diff --git a/frontend/public/notify_icon.png b/frontend/public/notify_icon.png
new file mode 100644
index 0000000..367898c
Binary files /dev/null and b/frontend/public/notify_icon.png differ
diff --git a/frontend/src/app/apple-icon.png b/frontend/src/app/apple-icon.png
new file mode 100644
index 0000000..25bf013
Binary files /dev/null and b/frontend/src/app/apple-icon.png differ
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
new file mode 100644
index 0000000..77600b9
Binary files /dev/null and b/frontend/src/app/favicon.ico differ
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 51ff795..1b8bbcd 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -6,7 +6,7 @@
 
 @layer base {
   :root {
-    --background: 220 20% 97%;
+    --background: 220 14% 96%;
     --foreground: 220 20% 10%;
     --card: 0 0% 100%;
     --card-foreground: 220 20% 10%;
@@ -17,27 +17,27 @@
     --secondary: 220 15% 94%;
     --secondary-foreground: 220 20% 20%;
     --muted: 220 15% 94%;
-    --muted-foreground: 220 10% 50%;
+    --muted-foreground: 220 10% 46%;
     --accent: 220 15% 94%;
     --accent-foreground: 220 20% 20%;
     --destructive: 0 72% 55%;
     --destructive-foreground: 0 0% 100%;
-    --border: 220 15% 92%;
-    --input: 220 15% 90%;
+    --border: 220 15% 90%;
+    --input: 220 15% 88%;
     --ring: 220 80% 55%;
-    --radius: 0.5rem;
+    --radius: 0.75rem;
     --sidebar: 0 0% 100%;
     --sidebar-foreground: 220 20% 20%;
     --sidebar-primary: 220 80% 55%;
     --sidebar-primary-foreground: 0 0% 100%;
     --sidebar-accent: 220 15% 96%;
     --sidebar-accent-foreground: 220 20% 20%;
-    --sidebar-border: 220 15% 94%;
+    --sidebar-border: 220 15% 93%;
     --sidebar-ring: 220 80% 55%;
   }
 
   html {
-    font-size: 28px;
+    font-size: 16px;
   }
 
   * {
@@ -47,6 +47,9 @@
   body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 }
 
@@ -92,38 +95,38 @@
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --radius: 0.75rem;
+  --background: hsl(220 14% 96%);
+  --foreground: hsl(220 20% 10%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(220 20% 10%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(220 20% 10%);
+  --primary: hsl(220 80% 55%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(220 15% 94%);
+  --secondary-foreground: hsl(220 20% 20%);
+  --muted: hsl(220 15% 94%);
+  --muted-foreground: hsl(220 10% 46%);
+  --accent: hsl(220 15% 94%);
+  --accent-foreground: hsl(220 20% 20%);
+  --destructive: hsl(0 72% 55%);
+  --border: hsl(220 15% 90%);
+  --input: hsl(220 15% 88%);
+  --ring: hsl(220 80% 55%);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar: hsl(0 0% 100%);
+  --sidebar-foreground: hsl(220 20% 20%);
+  --sidebar-primary: hsl(220 80% 55%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(220 15% 96%);
+  --sidebar-accent-foreground: hsl(220 20% 20%);
+  --sidebar-border: hsl(220 15% 93%);
+  --sidebar-ring: hsl(220 80% 55%);
 }
 
 .dark {
diff --git a/frontend/src/app/icon.png b/frontend/src/app/icon.png
new file mode 100644
index 0000000..a73b722
Binary files /dev/null and b/frontend/src/app/icon.png differ
diff --git a/frontend/src/app/invites/page.tsx b/frontend/src/app/invites/page.tsx
index d272c5e..b754380 100644
--- a/frontend/src/app/invites/page.tsx
+++ b/frontend/src/app/invites/page.tsx
@@ -115,7 +115,7 @@ const InvitesPage = () => {
       return { key: "statusRevoked", color: "bg-red-100 text-red-700" };
     }
     if (new Date(invite.expires_at) < new Date()) {
-      return { key: "statusExpired", color: "bg-slate-100 text-slate-700" };
+      return { key: "statusExpired", color: "bg-muted text-muted-foreground" };
     }
     if (invite.used_count >= invite.max_uses) {
       return { key: "statusExhausted", color: "bg-amber-100 text-amber-700" };
@@ -125,8 +125,12 @@ const InvitesPage = () => {
 
   return (
     <AppShell>
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">{t("navInvites")}</h1>
+        <p className="mt-1 text-sm text-muted-foreground">{t("createInviteDesc")}</p>
+      </div>
       <div className="grid gap-6 lg:grid-cols-2">
-        <Card className="bg-white">
+        <Card>
           <CardHeader>
             <CardTitle>{t("createInvite")}</CardTitle>
             <CardDescription>{t("createInviteDesc")}</CardDescription>
@@ -160,7 +164,7 @@ const InvitesPage = () => {
           </CardContent>
         </Card>
 
-        <Card className="bg-white">
+        <Card>
           <CardHeader>
             <CardTitle>{t("myInvites")}</CardTitle>
             <CardDescription>{t("myInvitesDesc")}</CardDescription>
@@ -173,17 +177,17 @@ const InvitesPage = () => {
                 return (
                   <div
                     key={invite.id}
-                    className="flex items-center justify-between rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
+                    className="flex items-center justify-between rounded-lg bg-muted/50 px-4 py-3 transition-colors hover:bg-muted"
                   >
                     <div className="min-w-0 flex-1">
                       <div className="flex items-center gap-2">
-                        <code className="rounded bg-slate-200 px-2 py-0.5 text-sm font-semibold text-slate-800">
+                        <code className="rounded bg-muted px-2 py-0.5 text-sm font-semibold text-foreground">
                           {invite.code}
                         </code>
                         <button
                           type="button"
                           onClick={() => copyCode(invite.code, invite.id)}
-                          className="rounded p-1 text-slate-400 hover:bg-slate-200 hover:text-slate-600"
+                          className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground/80"
                           title={t("copyCode")}
                         >
                           {copiedId === invite.id ? (
@@ -196,7 +200,7 @@ const InvitesPage = () => {
                           {t(status.key as keyof ReturnType<typeof useTranslation>)}
                         </span>
                       </div>
-                      <div className="mt-1 flex items-center gap-3 text-xs text-slate-500">
+                      <div className="mt-1 flex items-center gap-3 text-xs text-muted-foreground">
                         <span className="flex items-center gap-1">
                           <Users className="h-3 w-3" />
                           {invite.used_count}/{invite.max_uses}
@@ -209,7 +213,7 @@ const InvitesPage = () => {
                         variant="ghost"
                         size="sm"
                         onClick={() => viewDetails(invite.id)}
-                        className="text-slate-400 hover:text-blue-500"
+                        className="text-muted-foreground hover:text-blue-500"
                       >
                         <Eye className="h-4 w-4" />
                       </Button>
@@ -219,7 +223,7 @@ const InvitesPage = () => {
                             <Button
                               variant="ghost"
                               size="sm"
-                              className="text-slate-400 hover:text-red-500"
+                              className="text-muted-foreground hover:text-red-500"
                             >
                               {t("revoke")}
                             </Button>
@@ -248,7 +252,7 @@ const InvitesPage = () => {
                 );
               })}
               {invites.length === 0 && (
-                <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
+                <div className="rounded-lg bg-muted/50 p-6 text-center text-sm text-muted-foreground">
                   {t("noInvites")}
                 </div>
               )}
@@ -262,7 +266,7 @@ const InvitesPage = () => {
         <DialogContent className="max-w-md">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              <code className="rounded bg-slate-200 px-2 py-0.5 text-base">
+              <code className="rounded bg-muted px-2 py-0.5 text-base">
                 {selectedInvite?.code}
               </code>
             </DialogTitle>
@@ -275,19 +279,19 @@ const InvitesPage = () => {
               selectedInvite.registeredUsers.map((user) => (
                 <div
                   key={user.id}
-                  className="flex items-center gap-3 rounded-lg bg-slate-50 p-3"
+                  className="flex items-center gap-3 rounded-lg bg-muted/50 p-3"
                 >
                   <Avatar username={user.username} src={user.avatar} size="sm" />
                   <div className="min-w-0 flex-1">
-                    <div className="font-medium text-slate-800">{user.username}</div>
-                    <div className="text-xs text-slate-500">
+                    <div className="font-medium text-foreground">{user.username}</div>
+                    <div className="text-xs text-muted-foreground">
                       {formatDateTime(user.createdAt)}
                     </div>
                   </div>
                 </div>
               ))
             ) : (
-              <div className="rounded-lg bg-slate-50 p-6 text-center text-sm text-slate-400">
+              <div className="rounded-lg bg-muted/50 p-6 text-center text-sm text-muted-foreground">
                 {t("noRegisteredUsers")}
               </div>
             )}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index a01e259..621e796 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -5,6 +5,10 @@ import { I18nProvider } from "@/lib/i18n";
 export const metadata = {
   title: "Notify",
   description: "简洁提醒应用",
+  icons: {
+    icon: "/icon.png",
+    apple: "/apple-icon.png",
+  },
 };
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index aa35b39..751b01b 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -31,11 +31,11 @@ const LoginPage = () => {
   };
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-10">
+    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-muted via-background to-muted/80 px-4 py-10">
       <div className="absolute right-4 top-4">
         <LanguageSwitcher />
       </div>
-      <Card className="w-full max-w-md border-slate-200/80 shadow-lg">
+      <Card className="w-full max-w-md shadow-lg">
         <CardHeader>
           <CardTitle className="text-2xl">{t("login")}</CardTitle>
           <CardDescription>{t("loginWelcome")}</CardDescription>
@@ -66,7 +66,7 @@ const LoginPage = () => {
               {t("login")}
             </Button>
             <Link
-              className="block text-center text-sm text-slate-500 transition hover:text-slate-900"
+              className="block text-center text-sm text-muted-foreground transition hover:text-foreground"
               href="/register"
             >
               {t("noAccount")}
diff --git a/frontend/src/app/notifications/page.tsx b/frontend/src/app/notifications/page.tsx
index fdc6d16..1dc6cdc 100644
--- a/frontend/src/app/notifications/page.tsx
+++ b/frontend/src/app/notifications/page.tsx
@@ -46,10 +46,10 @@ const NotificationsPage = () => {
 
   return (
     <AppShell>
-      <Card className="bg-white">
+      <Card>
         <CardHeader className="flex-row items-center justify-between space-y-0">
           <div>
-            <CardTitle>{t("notifications")}</CardTitle>
+            <CardTitle className="text-xl">{t("notifications")}</CardTitle>
             <CardDescription>{t("notificationsDesc")}</CardDescription>
           </div>
           <div className="flex items-center gap-2">
@@ -66,13 +66,13 @@ const NotificationsPage = () => {
             {notifications.map((item) => (
               <div
                 key={item.id}
-                className="flex items-center justify-between rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
+                className="flex items-center justify-between rounded-xl bg-muted/50 px-4 py-3 transition-colors hover:bg-muted"
               >
                 <div>
-                  <div className="text-sm font-semibold text-slate-800">
+                  <div className="text-sm font-semibold text-foreground">
                     {t("triggerTime")}：{new Date(item.triggerAt).toLocaleString()}
                   </div>
-                  <div className="text-xs text-slate-500">{t("channel")}：{item.channel}</div>
+                  <div className="text-xs text-muted-foreground">{t("channel")}：{item.channel}</div>
                 </div>
                 <Button variant="outline" size="sm" onClick={() => markRead(item.id)}>
                   {t("markRead")}
@@ -80,7 +80,7 @@ const NotificationsPage = () => {
               </div>
             ))}
             {notifications.length === 0 && (
-              <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
+              <div className="rounded-xl bg-muted/50 p-6 text-center text-sm text-muted-foreground">
                 {t("noNotification")}
               </div>
             )}
diff --git a/frontend/src/app/register/page.tsx b/frontend/src/app/register/page.tsx
index b2068bb..5771c51 100644
--- a/frontend/src/app/register/page.tsx
+++ b/frontend/src/app/register/page.tsx
@@ -32,11 +32,11 @@ const RegisterPage = () => {
   };
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-50 via-white to-slate-100 px-4 py-10">
+    <div className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-muted via-background to-muted/80 px-4 py-10">
       <div className="absolute right-4 top-4">
         <LanguageSwitcher />
       </div>
-      <Card className="w-full max-w-md border-slate-200/80 shadow-lg">
+      <Card className="w-full max-w-md shadow-lg">
         <CardHeader>
           <CardTitle className="text-2xl">{t("registerTitle")}</CardTitle>
           <CardDescription>{t("registerDesc")}</CardDescription>
@@ -76,7 +76,7 @@ const RegisterPage = () => {
               {t("register")}
             </Button>
             <Link
-              className="block text-center text-sm text-slate-500 transition hover:text-slate-900"
+              className="block text-center text-sm text-muted-foreground transition hover:text-foreground"
               href="/login"
             >
               {t("hasAccount")}
diff --git a/frontend/src/app/reminders/page.tsx b/frontend/src/app/reminders/page.tsx
index b863ee5..bd7e1cb 100644
--- a/frontend/src/app/reminders/page.tsx
+++ b/frontend/src/app/reminders/page.tsx
@@ -160,8 +160,12 @@ const RemindersPage = () => {
 
   return (
     <AppShell>
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight text-foreground">{t("navReminder")}</h1>
+        <p className="mt-1 text-sm text-muted-foreground">{t("createReminderDesc")}</p>
+      </div>
       <div className="grid gap-6 lg:grid-cols-2">
-        <Card className="bg-white">
+        <Card>
           <CardHeader>
             <CardTitle>{t("createReminder")}</CardTitle>
             <CardDescription>{t("createReminderDesc")}</CardDescription>
@@ -279,14 +283,14 @@ const RemindersPage = () => {
                       return (
                         <span
                           key={id}
-                          className="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2 py-1 text-sm text-slate-700"
+                          className="inline-flex items-center gap-1.5 rounded-full bg-muted px-2 py-1 text-sm text-foreground/80"
                         >
                           <Avatar username={user.username} src={user.avatar} size="sm" className="h-5 w-5 text-xs" />
                           {user.username}
                           <button
                             type="button"
                             onClick={() => removeRecipient(id)}
-                            className="rounded-full p-0.5 hover:bg-slate-200"
+                            className="rounded-full p-0.5 hover:bg-muted/80"
                           >
                             <X className="h-3 w-3" />
                           </button>
@@ -307,8 +311,8 @@ const RemindersPage = () => {
                   <Label htmlFor="showBarkSettings">{t("barkSettings")}</Label>
                 </div>
                 {showBarkSettings && (
-                  <div className="ml-6 space-y-4 rounded-lg border border-slate-200 bg-slate-50/50 p-4">
-                    <p className="text-sm text-slate-500">{t("barkSettingsDesc")}</p>
+                  <div className="ml-6 space-y-4 rounded-xl border border-border/60 bg-muted/30 p-4">
+                    <p className="text-sm text-muted-foreground">{t("barkSettingsDesc")}</p>
                     
                     <div className="space-y-2">
                       <Label htmlFor="barkTitle">{t("barkTitle")}</Label>
@@ -393,7 +397,7 @@ const RemindersPage = () => {
             </form>
           </CardContent>
         </Card>
-        <Card className="bg-white">
+        <Card>
           <CardHeader>
             <CardTitle>{t("reminderList")}</CardTitle>
             <CardDescription>{t("reminderListDesc")}</CardDescription>
@@ -403,29 +407,29 @@ const RemindersPage = () => {
               {tasks.map((task) => (
                 <div
                   key={task.id}
-                  className="flex items-center justify-between rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
+                  className="flex items-center justify-between rounded-xl bg-muted/50 px-4 py-3 transition-colors hover:bg-muted"
                 >
                   <div>
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-semibold text-slate-800">{task.title}</span>
+                      <span className="text-sm font-semibold text-foreground">{task.title}</span>
                       {task.recurrenceRule && (
                         <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">
                           {getRecurrenceLabel(task.recurrenceRule)}
                         </span>
                       )}
                     </div>
-                    <div className="text-xs text-slate-500">
+                    <div className="text-xs text-muted-foreground">
                       {formatDateTime(task.dueAt)}
                     </div>
                   </div>
                   <div className="flex items-center gap-2">
-                    <span className="text-xs font-medium text-slate-500">{t("reminder")}</span>
+                    <span className="text-xs font-medium text-muted-foreground">{t("reminder")}</span>
                     <AlertDialog>
                       <AlertDialogTrigger asChild>
                         <Button
                           variant="ghost"
                           size="sm"
-                          className="text-slate-400 hover:text-red-500"
+                          className="text-muted-foreground hover:text-red-500"
                         >
                           {t("delete")}
                         </Button>
@@ -452,7 +456,7 @@ const RemindersPage = () => {
                 </div>
               ))}
               {tasks.length === 0 && (
-                <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
+                <div className="rounded-xl bg-muted/50 p-6 text-center text-sm text-muted-foreground">
                   {t("noReminder")}
                 </div>
               )}
diff --git a/frontend/src/app/todos/page.tsx b/frontend/src/app/todos/page.tsx
index 8bdcc5c..9e34f21 100644
--- a/frontend/src/app/todos/page.tsx
+++ b/frontend/src/app/todos/page.tsx
@@ -32,6 +32,7 @@ import { Label } from "@/components/ui/label";
 import { RecurrencePicker, type RecurrenceRule as RecurrenceRuleInput } from "@/components/ui/recurrence-picker";
 import { api } from "@/lib/api";
 import { useTranslation } from "@/lib/i18n";
+import { Bell, CalendarCheck, CheckCircle2, ListTodo, Plus, Repeat, Trash2 } from "lucide-react";
 
 type RecurrenceType = "hourly" | "daily" | "weekly" | "monthly" | "yearly";
 
@@ -54,9 +55,16 @@ type Todo = {
   checkInAt?: string | null;
 };
 
+type ReminderTask = {
+  id: string;
+  title: string;
+  dueAt: string;
+};
+
 const TodosPage = () => {
   const t = useTranslation();
   const [todos, setTodos] = useState<Todo[]>([]);
+  const [reminders, setReminders] = useState<ReminderTask[]>([]);
   const [title, setTitle] = useState("");
   const [dueAt, setDueAt] = useState<Date | undefined>(undefined);
   const [offsetMinutes, setOffsetMinutes] = useState(10);
@@ -70,8 +78,14 @@ const TodosPage = () => {
     setTodos(data);
   };
 
+  const loadReminders = async () => {
+    const data = (await api.getReminderTasks()) as ReminderTask[];
+    setReminders(data);
+  };
+
   useEffect(() => {
     loadTodos().catch(() => null);
+    loadReminders().catch(() => null);
   }, []);
 
   const resetForm = () => {
@@ -118,8 +132,6 @@ const TodosPage = () => {
     }
   };
 
-  const colorDots = ["bg-emerald-500", "bg-amber-500", "bg-blue-500", "bg-rose-500"];
-
   const getRecurrenceLabel = (rule: RecurrenceRule): string => {
     const interval = rule.interval || 1;
     if (rule.type === "weekly" && interval === 2) {
@@ -134,166 +146,307 @@ const TodosPage = () => {
     }
   };
 
+  const formatDueDate = (dateStr: string): string => {
+    const d = new Date(dateStr);
+    const now = new Date();
+    const isToday = d.toDateString() === now.toDateString();
+    const tomorrow = new Date(now);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const isTomorrow = d.toDateString() === tomorrow.toDateString();
+    const pad = (n: number) => n.toString().padStart(2, "0");
+    const timeStr = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+
+    if (isToday) return `Today ${timeStr}`;
+    if (isTomorrow) return `Tomorrow ${timeStr}`;
+    return `${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${timeStr}`;
+  };
+
+  const getDueStatus = (dateStr: string, isCheckedIn: boolean): { label: string; className: string } => {
+    if (isCheckedIn) {
+      return { label: t("checkInSuccess"), className: "bg-emerald-50 text-emerald-700 border-emerald-200" };
+    }
+    const d = new Date(dateStr);
+    const now = new Date();
+    if (d < now) {
+      return { label: "Overdue", className: "bg-red-50 text-red-700 border-red-200" };
+    }
+    const hoursUntil = (d.getTime() - now.getTime()) / (1000 * 60 * 60);
+    if (hoursUntil <= 24) {
+      return { label: "Due Soon", className: "bg-amber-50 text-amber-700 border-amber-200" };
+    }
+    return { label: "Upcoming", className: "bg-blue-50 text-blue-700 border-blue-200" };
+  };
+
+  // Stats
+  const totalTasks = todos.length;
+  const checkedInCount = todos.filter((t) => t.isCheckedIn).length;
+  const recurringCount = todos.filter((t) => t.recurrenceRule).length;
+
+  // Upcoming reminders (next 3, sorted by dueAt)
+  const upcomingReminders = reminders
+    .filter((r) => new Date(r.dueAt) >= new Date())
+    .sort((a, b) => new Date(a.dueAt).getTime() - new Date(b.dueAt).getTime())
+    .slice(0, 3);
+
   return (
     <AppShell>
-      <Card className="bg-white">
-        <CardHeader className="flex-row items-center justify-between space-y-0">
-          <div>
-            <CardTitle>{t("myTodoList")}</CardTitle>
-            <CardDescription>{t("myTodoListDesc")}</CardDescription>
-          </div>
-          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-            <DialogTrigger asChild>
-              <Button variant="outline" type="button">
-                {t("addTask")}
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="w-[90vw] max-w-[90vw] sm:w-[40vw] sm:max-w-[40vw]">
-              <form onSubmit={createTodo}>
-                <DialogHeader>
-                  <DialogTitle>{t("createTask")}</DialogTitle>
-                  <DialogDescription>{t("createTaskDesc")}</DialogDescription>
-                </DialogHeader>
-                <div className="grid gap-4 py-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="title">{t("title")}</Label>
-                    <Input
-                      id="title"
-                      placeholder={t("enterTodoTitle")}
-                      value={title}
-                      onChange={(event) => setTitle(event.target.value)}
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="dueAt">{t("dueTime")}</Label>
-                    <DateTimePicker
-                      value={dueAt}
-                      onChange={setDueAt}
-                      placeholder="选择截止日期和时间"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="offset">{t("advanceReminder")}</Label>
-                    <Input
-                      id="offset"
-                      type="number"
-                      min={0}
-                      value={offsetMinutes}
-                      onChange={(event) => setOffsetMinutes(Number(event.target.value))}
-                    />
-                  </div>
-                  <div className="space-y-3">
-                    <div className="flex items-center space-x-2">
-                      <Checkbox
-                        id="recurring"
-                        checked={isRecurring}
-                        onCheckedChange={(checked) => setIsRecurring(checked === true)}
-                      />
-                      <Label htmlFor="recurring">{t("setRecurring")}</Label>
-                    </div>
-                    {isRecurring && (
-                      <div className="mt-3">
-                        <RecurrencePicker
-                          value={recurrenceRule}
-                          onChange={setRecurrenceRule}
-                          dueDate={dueAt}
-                        />
-                      </div>
-                    )}
-                  </div>
-                </div>
-                <DialogFooter>
-                  <Button type="submit" disabled={!title || !dueAt}>
-                    {t("save")}
-                  </Button>
-                </DialogFooter>
-              </form>
-            </DialogContent>
-          </Dialog>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-3">
-            {todos.map((todo, index) => (
-              <div
-                key={todo.id}
-                className="flex items-center gap-3 rounded-lg bg-slate-50/80 px-4 py-3 transition-colors hover:bg-slate-100/80"
-              >
-                <span
-                  className={`h-3 w-3 rounded-sm ${colorDots[index % colorDots.length]}`}
-                />
-                <div className="flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-semibold text-slate-800">{todo.title}</span>
-                    {todo.recurrenceRule && (
-                      <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">
-                        {getRecurrenceLabel(todo.recurrenceRule)}
-                      </span>
-                    )}
-                    {todo.checkInCount > 0 && (
-                      <span className="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
-                        {todo.checkInCount}x
-                      </span>
-                    )}
-                  </div>
-                  <div className="text-xs text-slate-500">
-                    {t("due")} {new Date(todo.dueAt).toLocaleString()}
-                  </div>
-                </div>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className={
-                    todo.isCheckedIn
-                      ? "bg-emerald-50 text-emerald-600"
-                      : "text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700"
-                  }
-                  onClick={() => checkInTodo(todo.id)}
-                  disabled={checkingIn === todo.id || todo.isCheckedIn}
-                >
-                  {checkingIn === todo.id
-                    ? "..."
-                    : todo.isCheckedIn
-                      ? t("checkInSuccess")
-                      : t("checkIn")}
+      <div className="grid gap-5 lg:grid-cols-[1fr_280px]">
+        {/* Left column - Todo list */}
+        <Card>
+          <CardHeader className="flex-row items-center justify-between space-y-0">
+            <div>
+              <CardTitle className="text-xl">{t("myTodoList")}</CardTitle>
+              <CardDescription>{t("myTodoListDesc")}</CardDescription>
+            </div>
+            <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+              <DialogTrigger asChild>
+                <Button type="button">
+                  <Plus className="h-4 w-4" />
+                  {t("addTask")}
                 </Button>
-                <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="text-slate-400 hover:text-red-500"
-                    >
-                      {t("delete")}
+              </DialogTrigger>
+              <DialogContent className="w-[90vw] max-w-[90vw] sm:w-[40vw] sm:max-w-[40vw]">
+                <form onSubmit={createTodo}>
+                  <DialogHeader>
+                    <DialogTitle>{t("createTask")}</DialogTitle>
+                    <DialogDescription>{t("createTaskDesc")}</DialogDescription>
+                  </DialogHeader>
+                  <div className="grid gap-4 py-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="title">{t("title")}</Label>
+                      <Input
+                        id="title"
+                        placeholder={t("enterTodoTitle")}
+                        value={title}
+                        onChange={(event) => setTitle(event.target.value)}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="dueAt">{t("dueTime")}</Label>
+                      <DateTimePicker
+                        value={dueAt}
+                        onChange={setDueAt}
+                        placeholder="选择截止日期和时间"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="offset">{t("advanceReminder")}</Label>
+                      <Input
+                        id="offset"
+                        type="number"
+                        min={0}
+                        value={offsetMinutes}
+                        onChange={(event) => setOffsetMinutes(Number(event.target.value))}
+                      />
+                    </div>
+                    <div className="space-y-3">
+                      <div className="flex items-center space-x-2">
+                        <Checkbox
+                          id="recurring"
+                          checked={isRecurring}
+                          onCheckedChange={(checked) => setIsRecurring(checked === true)}
+                        />
+                        <Label htmlFor="recurring">{t("setRecurring")}</Label>
+                      </div>
+                      {isRecurring && (
+                        <div className="mt-3">
+                          <RecurrencePicker
+                            value={recurrenceRule}
+                            onChange={setRecurrenceRule}
+                            dueDate={dueAt}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <DialogFooter>
+                    <Button type="submit" disabled={!title || !dueAt}>
+                      {t("save")}
                     </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>{t("confirmDelete")}</AlertDialogTitle>
-                      <AlertDialogDescription>
-                        {t("confirmDeleteDesc", { title: todo.title })}
-                      </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-                      <AlertDialogAction
-                        className="bg-red-500 hover:bg-red-600"
-                        onClick={() => deleteTodo(todo.id)}
+                  </DialogFooter>
+                </form>
+              </DialogContent>
+            </Dialog>
+          </CardHeader>
+          <CardContent>
+            {todos.length > 0 ? (
+              <div className="divide-y divide-border/50">
+                {/* Table header */}
+                <div className="grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-4 px-3 pb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                  <div className="w-5" />
+                  <div>{t("title")}</div>
+                  <div>{t("due")}</div>
+                  <div>{t("status")}</div>
+                  <div className="w-16" />
+                </div>
+                {todos.map((todo) => {
+                  const status = getDueStatus(todo.dueAt, todo.isCheckedIn);
+                  return (
+                    <div
+                      key={todo.id}
+                      className="group grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-4 px-3 py-3 transition-colors hover:bg-muted/40 rounded-lg"
+                    >
+                      {/* Checkbox / Check-in */}
+                      <button
+                        type="button"
+                        className={`flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors ${
+                          todo.isCheckedIn
+                            ? "border-emerald-500 bg-emerald-500 text-white"
+                            : "border-border hover:border-emerald-400"
+                        }`}
+                        onClick={() => checkInTodo(todo.id)}
+                        disabled={checkingIn === todo.id || todo.isCheckedIn}
                       >
-                        {t("delete")}
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
+                        {todo.isCheckedIn && <CheckCircle2 className="h-3 w-3" />}
+                      </button>
+
+                      {/* Title + badges */}
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className={`truncate text-sm font-medium ${todo.isCheckedIn ? "text-muted-foreground line-through" : "text-foreground"}`}>
+                            {todo.title}
+                          </span>
+                          {todo.recurrenceRule && (
+                            <span className="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">
+                              <Repeat className="h-3 w-3" />
+                              {getRecurrenceLabel(todo.recurrenceRule)}
+                            </span>
+                          )}
+                          {todo.checkInCount > 0 && (
+                            <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">
+                              {todo.checkInCount}x
+                            </span>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Due date */}
+                      <div className="text-xs text-muted-foreground whitespace-nowrap">
+                        {formatDueDate(todo.dueAt)}
+                      </div>
+
+                      {/* Status pill */}
+                      <span className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap ${status.className}`}>
+                        {status.label}
+                      </span>
+
+                      {/* Delete */}
+                      <div className="flex justify-end w-16">
+                        <AlertDialog>
+                          <AlertDialogTrigger asChild>
+                            <button
+                              type="button"
+                              className="rounded-lg p-1.5 text-muted-foreground opacity-0 transition-all hover:bg-red-50 hover:text-red-500 group-hover:opacity-100"
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </button>
+                          </AlertDialogTrigger>
+                          <AlertDialogContent>
+                            <AlertDialogHeader>
+                              <AlertDialogTitle>{t("confirmDelete")}</AlertDialogTitle>
+                              <AlertDialogDescription>
+                                {t("confirmDeleteDesc", { title: todo.title })}
+                              </AlertDialogDescription>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                              <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+                              <AlertDialogAction
+                                className="bg-red-500 hover:bg-red-600"
+                                onClick={() => deleteTodo(todo.id)}
+                              >
+                                {t("delete")}
+                              </AlertDialogAction>
+                            </AlertDialogFooter>
+                          </AlertDialogContent>
+                        </AlertDialog>
+                      </div>
+                    </div>
+                  );
+                })}
               </div>
-            ))}
-            {todos.length === 0 && (
-              <div className="rounded-lg bg-slate-50/80 p-6 text-center text-sm text-slate-400">
-                {t("noTodo")}
+            ) : (
+              /* Empty state */
+              <div className="flex flex-col items-center justify-center py-16">
+                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                  <ListTodo className="h-7 w-7" />
+                </div>
+                <h3 className="mt-4 text-lg font-semibold text-foreground">{t("todoEmptyTitle")}</h3>
+                <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{t("todoEmptyDesc")}</p>
+                <Button className="mt-5" onClick={() => setIsDialogOpen(true)}>
+                  <Plus className="h-4 w-4" />
+                  {t("addTask")}
+                </Button>
               </div>
             )}
+          </CardContent>
+        </Card>
+
+        {/* Right column - Stats & Upcoming */}
+        <div className="flex flex-col gap-5">
+          {/* Stats cards */}
+          <div className="grid grid-cols-1 gap-3">
+            <Card className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                  <ListTodo className="h-4 w-4" />
+                </div>
+                <div>
+                  <div className="text-2xl font-semibold text-foreground">{totalTasks}</div>
+                  <div className="text-xs text-muted-foreground">{t("totalTasks")}</div>
+                </div>
+              </div>
+            </Card>
+            <Card className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600">
+                  <CalendarCheck className="h-4 w-4" />
+                </div>
+                <div>
+                  <div className="text-2xl font-semibold text-foreground">{checkedInCount}</div>
+                  <div className="text-xs text-muted-foreground">{t("checkedInToday")}</div>
+                </div>
+              </div>
+            </Card>
+            <Card className="p-4">
+              <div className="flex items-center gap-3">
+                <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-500/10 text-blue-600">
+                  <Repeat className="h-4 w-4" />
+                </div>
+                <div>
+                  <div className="text-2xl font-semibold text-foreground">{recurringCount}</div>
+                  <div className="text-xs text-muted-foreground">{t("recurringTasks")}</div>
+                </div>
+              </div>
+            </Card>
           </div>
-        </CardContent>
-      </Card>
+
+          {/* Upcoming reminders */}
+          <Card>
+            <CardHeader className="p-4 pb-3">
+              <CardTitle className="text-[15px] font-semibold">{t("upcomingReminders")}</CardTitle>
+            </CardHeader>
+            <CardContent className="p-4 pt-0">
+              {upcomingReminders.length > 0 ? (
+                <div className="space-y-2.5">
+                  {upcomingReminders.map((reminder) => (
+                    <div key={reminder.id} className="flex items-start gap-2.5">
+                      <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-amber-500/10 text-amber-600">
+                        <Bell className="h-3.5 w-3.5" />
+                      </div>
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-medium text-foreground">{reminder.title}</div>
+                        <div className="text-xs text-muted-foreground">{formatDueDate(reminder.dueAt)}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-muted-foreground">{t("noUpcomingReminders")}</p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
     </AppShell>
   );
 };
diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx
index 735b271..b2f1ad0 100644
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@@ -2,38 +2,18 @@
 
 import type { ReactNode } from "react";
 
-import { Button } from "@/components/ui/button";
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import AppSidebar from "@/components/AppSidebar";
-import LanguageSwitcher from "@/components/LanguageSwitcher";
-import { clearToken } from "@/lib/auth";
-import { useTranslation } from "@/lib/i18n";
 import { NotificationProvider } from "@/lib/notification-context";
 import { UserProvider } from "@/lib/user-context";
 
 const AppShellContent = ({ children }: { children: ReactNode }) => {
-  const t = useTranslation();
-
   return (
     <SidebarProvider defaultOpen>
-      <div className="flex min-h-screen bg-slate-100 p-6">
+      <div className="flex min-h-screen bg-muted/50 p-6">
         <AppSidebar />
         <SidebarInset>
-          <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6">
-            <div className="rounded-xl bg-white p-4 shadow-sm">
-              <div className="flex flex-wrap items-center justify-between gap-4">
-                <div>
-                  <h1 className="text-xl font-semibold leading-tight text-slate-900">Notify</h1>
-                  <p className="text-sm text-slate-500">{t("appDesc")}</p>
-                </div>
-                <div className="flex items-center gap-3">
-                  <LanguageSwitcher />
-                  <Button variant="outline" onClick={() => clearToken()}>
-                    {t("logout")}
-                  </Button>
-                </div>
-              </div>
-            </div>
+          <div className="w-full max-w-[1200px] py-6 px-6">
             <div className="grid gap-5">{children}</div>
           </div>
         </SidebarInset>
diff --git a/frontend/src/components/AppSidebar.tsx b/frontend/src/components/AppSidebar.tsx
index e3eebd1..1008ee9 100644
--- a/frontend/src/components/AppSidebar.tsx
+++ b/frontend/src/components/AppSidebar.tsx
@@ -1,8 +1,9 @@
 "use client";
 
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Bell, BellDot, ListTodo, Settings, UserPlus } from "lucide-react";
+import { Bell, BellDot, ListTodo, LogOut, Settings, UserPlus } from "lucide-react";
 
 import {
   Sidebar,
@@ -10,7 +11,6 @@ import {
   SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
-  SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
@@ -18,9 +18,11 @@ import {
   SidebarSeparator,
 } from "@/components/ui/sidebar";
 import Avatar from "@/components/ui/avatar";
+import LanguageSwitcher from "@/components/LanguageSwitcher";
 import { useTranslation, type TranslationKey } from "@/lib/i18n";
 import { useNotification } from "@/lib/notification-context";
 import { useUser } from "@/lib/user-context";
+import { clearToken } from "@/lib/auth";
 
 const navItems: { href: string; labelKey: TranslationKey; icon: typeof ListTodo }[] = [
   { href: "/todos", labelKey: "navTodo", icon: ListTodo },
@@ -40,19 +42,14 @@ const AppSidebar = () => {
     <Sidebar variant="inset" className="h-[calc(100vh-3rem)] self-start bg-white">
       <SidebarHeader className="gap-2 px-3 py-4">
         <div className="flex items-center gap-2">
-          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500/10 text-blue-600">
-            <span className="text-base font-semibold">◎</span>
-          </span>
-          <span className="text-base font-semibold group-data-[state=collapsed]/sidebar:hidden">
+          <Image src="/notify_icon.png" alt="Notify" width={28} height={28} className="h-7 w-7 rounded-lg" />
+          <span className="text-[15px] font-semibold tracking-tight text-foreground group-data-[state=collapsed]/sidebar:hidden">
             notify
           </span>
         </div>
       </SidebarHeader>
       <SidebarContent>
         <SidebarGroup>
-          <SidebarGroupLabel className="group-data-[state=collapsed]/sidebar:hidden">
-            {t("navigation")}
-          </SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
               {navItems.map((item) => {
@@ -67,7 +64,7 @@ const AppSidebar = () => {
                     >
                       <Link href={item.href}>
                         <span className="relative">
-                          <item.icon className="h-4 w-4" />
+                          <item.icon className={`h-[18px] w-[18px] ${isActive ? "text-sidebar-primary" : "text-muted-foreground"}`} />
                           {isNotifications && unreadCount > 0 && (
                             <span className="absolute -right-1 -top-1 hidden h-2 w-2 rounded-full bg-red-500 group-data-[state=collapsed]/sidebar:inline-flex" />
                           )}
@@ -90,12 +87,25 @@ const AppSidebar = () => {
         </SidebarGroup>
       </SidebarContent>
       <SidebarSeparator />
-      <SidebarFooter className="px-3 py-4">
-        <div className="flex items-center gap-2 group-data-[state=collapsed]/sidebar:justify-center">
-          <Avatar username={user?.username} src={user?.avatar} size="sm" />
-          <span className="text-sm font-medium text-slate-700 group-data-[state=collapsed]/sidebar:hidden">
-            {user?.username}
-          </span>
+      <SidebarFooter className="px-3 py-3">
+        <div className="flex items-center justify-between group-data-[state=collapsed]/sidebar:justify-center">
+          <div className="flex items-center gap-2 min-w-0">
+            <Avatar username={user?.username} src={user?.avatar} size="sm" />
+            <span className="truncate text-sm font-medium text-foreground/80 group-data-[state=collapsed]/sidebar:hidden">
+              {user?.username}
+            </span>
+          </div>
+          <div className="flex items-center gap-1 group-data-[state=collapsed]/sidebar:hidden">
+            <LanguageSwitcher />
+            <button
+              type="button"
+              onClick={() => clearToken()}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              title={t("logout")}
+            >
+              <LogOut className="h-4 w-4" />
+            </button>
+          </div>
         </div>
       </SidebarFooter>
     </Sidebar>
diff --git a/frontend/src/components/LanguageSwitcher.tsx b/frontend/src/components/LanguageSwitcher.tsx
index 7181a28..d2541f1 100644
--- a/frontend/src/components/LanguageSwitcher.tsx
+++ b/frontend/src/components/LanguageSwitcher.tsx
@@ -3,7 +3,6 @@
 import { useState } from "react";
 import { Globe } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
@@ -17,28 +16,28 @@ const languages: { value: Locale; label: string }[] = [
 ];
 
 const LanguageSwitcher = () => {
-  const { locale, setLocale, t } = useI18n();
+  const { locale, setLocale } = useI18n();
   const [open, setOpen] = useState(false);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="gap-2">
+        <button
+          type="button"
+          className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+        >
           <Globe className="h-4 w-4" />
-          <span className="hidden sm:inline">
-            {languages.find((l) => l.value === locale)?.label}
-          </span>
-        </Button>
+        </button>
       </PopoverTrigger>
       <PopoverContent className="w-32 p-1" align="end">
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col gap-0.5">
           {languages.map((lang) => (
             <button
               key={lang.value}
-              className={`w-full rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-slate-100 ${
+              className={`w-full rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted ${
                 locale === lang.value
-                  ? "bg-slate-100 font-medium text-slate-900"
-                  : "text-slate-600"
+                  ? "bg-muted font-medium text-foreground"
+                  : "text-muted-foreground"
               }`}
               onClick={() => {
                 setLocale(lang.value);
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index da7e9b0..33fb019 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/frontend/src/components/SettingsPanel.tsx
@@ -138,9 +138,9 @@ const SettingsPanel = () => {
   };
 
   return (
-    <Card className="bg-white">
+    <Card>
       <CardHeader>
-        <CardTitle>{t("settings")}</CardTitle>
+        <CardTitle className="text-xl">{t("settings")}</CardTitle>
         <CardDescription>{t("settingsDesc")}</CardDescription>
       </CardHeader>
       <CardContent>
@@ -176,7 +176,7 @@ const SettingsPanel = () => {
                     {t("removeAvatar")}
                   </Button>
                 )}
-                <p className="text-xs text-slate-500">{t("avatarHint")}</p>
+                <p className="text-xs text-muted-foreground">{t("avatarHint")}</p>
               </div>
             </div>
           </div>
@@ -201,11 +201,11 @@ const SettingsPanel = () => {
           </div>
           <div className="space-y-2">
             <Label>{t("notificationChannels")}</Label>
-            <div className="rounded-lg bg-slate-50/80">
+            <div className="rounded-xl bg-muted/50 border border-border/60">
               <div className="flex items-center justify-between px-4 py-3">
                 <div>
-                  <div className="text-sm font-medium text-slate-800">{t("webNotifications")}</div>
-                  <div className="text-xs text-slate-500">{t("webNotificationsDesc")}</div>
+                  <div className="text-sm font-medium text-foreground">{t("webNotifications")}</div>
+                  <div className="text-xs leading-relaxed text-muted-foreground">{t("webNotificationsDesc")}</div>
                 </div>
                 <Checkbox
                   id="inapp"
@@ -215,11 +215,11 @@ const SettingsPanel = () => {
                   }
                 />
               </div>
-              <div className="mx-4 h-px bg-slate-200/50" />
+              <div className="mx-4 h-px bg-border/60" />
               <div className="flex items-center justify-between px-4 py-3">
                 <div>
-                  <div className="text-sm font-medium text-slate-800">{t("barkAlerts")}</div>
-                  <div className="text-xs text-slate-500">{t("barkAlertsDesc")}</div>
+                  <div className="text-sm font-medium text-foreground">{t("barkAlerts")}</div>
+                  <div className="text-xs leading-relaxed text-muted-foreground">{t("barkAlertsDesc")}</div>
                 </div>
                 <Checkbox
                   id="bark"
@@ -242,8 +242,8 @@ const SettingsPanel = () => {
           </div>
 
           {/* Change Password Section */}
-          <div className="mt-8 pt-6 border-t border-slate-200">
-            <h3 className="text-lg font-medium mb-4">{t("changePassword")}</h3>
+          <div className="mt-8 pt-6 border-t border-border">
+            <h3 className="text-lg font-semibold tracking-tight mb-4">{t("changePassword")}</h3>
             <div className="space-y-4">
               <div className="space-y-2">
                 <Label htmlFor="currentPassword">{t("currentPassword")}</Label>
diff --git a/frontend/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
index 64e912f..9d43abd 100644
--- a/frontend/src/components/ui/alert-dialog.tsx
+++ b/frontend/src/components/ui/alert-dialog.tsx
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
         className
       )}
       {...props}
@@ -64,7 +64,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-slate-900", className)}
+    className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
 ));
@@ -76,7 +76,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-slate-500", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 65d4fcd..f3bc63d 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -5,16 +5,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow-md",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-border/80 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -22,8 +22,8 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
+        sm: "h-8 rounded-lg px-3 text-xs",
+        lg: "h-10 rounded-lg px-8",
         icon: "h-9 w-9",
       },
     },
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index 2b88a48..a194dba 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -6,7 +6,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("rounded-xl bg-card text-card-foreground shadow-sm", className)}
+      className={cn("rounded-2xl border border-border/60 bg-card text-card-foreground shadow-[0_1px_3px_0_rgb(0_0_0/0.04)]", className)}
       {...props}
     />
   )
@@ -15,14 +15,14 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6 pb-4", className)} {...props} />
   )
 );
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+    <h3 ref={ref} className={cn("text-lg font-semibold leading-snug tracking-tight text-foreground", className)} {...props} />
   )
 );
 CardTitle.displayName = "CardTitle";
@@ -31,7 +31,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  <p ref={ref} className={cn("mt-1 text-sm text-muted-foreground", className)} {...props} />
 ));
 CardDescription.displayName = "CardDescription";
 
diff --git a/frontend/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
index 1e674a4..d170faf 100644
--- a/frontend/src/components/ui/checkbox.tsx
+++ b/frontend/src/components/ui/checkbox.tsx
@@ -11,13 +11,13 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-[18px] w-[18px] shrink-0 rounded-[5px] border border-border transition-colors duration-150 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      <Check className="h-3.5 w-3.5" />
+      <Check className="h-3.5 w-3.5" strokeWidth={3} />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 54497b9..619d0a0 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-white p-6 shadow-xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-md opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-muted data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
@@ -72,7 +72,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold leading-none tracking-tight text-slate-900", className)}
+    className={cn("text-lg font-semibold leading-none tracking-tight text-foreground", className)}
     {...props}
   />
 ));
@@ -84,7 +84,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-slate-500", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 012a9fe..865df9f 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-lg border border-input/60 bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm transition-colors duration-150 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:border-primary/60 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index e4b5c53..0d9a987 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -66,7 +66,7 @@ const Sidebar = React.forwardRef<
       data-state={open ? "expanded" : "collapsed"}
       style={
         {
-          "--sidebar-width": "16rem",
+          "--sidebar-width": "14rem",
           "--sidebar-width-collapsed": "4.25rem",
           ...style,
         } as React.CSSProperties
@@ -116,7 +116,7 @@ const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("px-2 text-xs font-medium uppercase text-sidebar-foreground/60", className)}
+      className={cn("px-2 text-[11px] font-semibold uppercase tracking-wider text-sidebar-foreground/50", className)}
       {...props}
     />
   )
@@ -145,12 +145,12 @@ const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.HTMLAttributes<HTM
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-[14px] font-medium text-sidebar-foreground/80 transition-all duration-150 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
   {
     variants: {
       isActive: {
-        true: "bg-sidebar-accent text-sidebar-primary font-semibold",
-        false: "",
+        true: "border-l-2 border-sidebar-primary bg-sidebar-primary/[0.06] text-sidebar-primary font-semibold",
+        false: "border-l-2 border-transparent",
       },
     },
     defaultVariants: {
@@ -177,7 +177,7 @@ SidebarMenuButton.displayName = "SidebarMenuButton";
 
 const SidebarSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("mx-3 my-2 h-px bg-sidebar-border/50", className)} {...props} />
+    <div ref={ref} className={cn("mx-3 my-2 h-px bg-sidebar-border/40", className)} {...props} />
   )
 );
 SidebarSeparator.displayName = "SidebarSeparator";
diff --git a/frontend/src/lib/i18n/translations.ts b/frontend/src/lib/i18n/translations.ts
index 47f730c..ef8038b 100644
--- a/frontend/src/lib/i18n/translations.ts
+++ b/frontend/src/lib/i18n/translations.ts
@@ -51,6 +51,13 @@ export const translations = {
     addTask: "+ 添加任务",
     due: "截止",
     noTodo: "暂无 Todo",
+    todoEmptyTitle: "还没有任何任务",
+    todoEmptyDesc: "创建你的第一个任务，开始高效管理时间",
+    totalTasks: "总任务",
+    checkedInToday: "今日打卡",
+    recurringTasks: "周期任务",
+    upcomingReminders: "即将到来的提醒",
+    noUpcomingReminders: "暂无即将到来的提醒",
     confirmDelete: "确认删除",
     confirmDeleteDesc: "确定要删除「{title}」吗？此操作无法撤销。",
     checkIn: "打卡",
@@ -275,6 +282,13 @@ export const translations = {
     addTask: "+ Add Task",
     due: "Due",
     noTodo: "No Todo items",
+    todoEmptyTitle: "No tasks yet",
+    todoEmptyDesc: "Create your first task and start managing your time efficiently",
+    totalTasks: "Total Tasks",
+    checkedInToday: "Checked In",
+    recurringTasks: "Recurring",
+    upcomingReminders: "Upcoming Reminders",
+    noUpcomingReminders: "No upcoming reminders",
     confirmDelete: "Confirm Delete",
     confirmDeleteDesc: "Are you sure you want to delete \"{title}\"? This action cannot be undone.",
     checkIn: "Check In",
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index a505ff6..0ad0770 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -56,9 +56,11 @@ const config: Config = {
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        "2xl": "calc(var(--radius) + 4px)",
+        xl: "var(--radius)",
+        lg: "calc(var(--radius) - 2px)",
+        md: "calc(var(--radius) - 4px)",
+        sm: "calc(var(--radius) - 6px)",
       },
     },
   },