diff --git a/src/app/channel/layout.tsx b/src/app/channel/layout.tsx
index 385aae1..d81692e 100644
--- a/src/app/channel/layout.tsx
+++ b/src/app/channel/layout.tsx
@@ -1,49 +1,64 @@
-import { createContext, useContext, useState, useMemo, useCallback, type ReactNode } from "react";
-import { Outlet } from "react-router-dom";
-import { useMatch } from "react-router-dom";
-import { ChevronRight } from "lucide-react";
-import { ServerIconRail } from "@/components/layout/ServerIconRail";
-import { ChannelSidebar } from "@/components/layout/ChannelSidebar";
-import { Header } from "@/components/layout/Header";
-import { MemberList } from "@/components/layout/MemberList";
-import { useIsMobile, useIsTablet } from "@/hooks/use-mobile";
+import {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  useCallback,
+  type ReactNode,
+} from "react"
+import { Outlet } from "react-router-dom"
+import { useMatch } from "react-router-dom"
+import { ChevronRight } from "lucide-react"
+import { ServerIconRail } from "@/components/layout/ServerIconRail"
+import { ChannelSidebar } from "@/components/layout/ChannelSidebar"
+import { Header } from "@/components/layout/Header"
+import { MemberList } from "@/components/layout/MemberList"
+import { useIsMobile, useIsTablet } from "@/hooks/use-mobile"
 
 interface ChannelContextType {
-  showMembers: boolean;
-  setShowMembers: (v: boolean) => void;
+  showMembers: boolean
+  setShowMembers: (v: boolean) => void
 }
 
 const ChannelContext = createContext<ChannelContextType>({
   showMembers: false,
   setShowMembers: () => {},
-});
+})
 
 // eslint-disable-next-line react-refresh/only-export-components
-export const useChannel = () => useContext(ChannelContext);
+export const useChannel = () => useContext(ChannelContext)
 
 export function ChannelLayout({ children }: { children?: ReactNode }) {
-  const [showMembers, setShowMembers] = useState(false);
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
-  const isMobile = useIsMobile();
-  const isTablet = useIsTablet();
-  const canShowMembers = !isMobile && !isTablet;
+  const [showMembers, setShowMembers] = useState(false)
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
+  const isMobile = useIsMobile()
+  const isTablet = useIsTablet()
+  const canShowMembers = !isMobile && !isTablet
 
   const contextValue = useMemo(
     () => ({ showMembers, setShowMembers }),
-    [showMembers],
-  );
+    [showMembers]
+  )
 
-  const toggleSidebar = useCallback(
-    () => setIsSidebarCollapsed((v) => !v),
-    [],
-  );
+  const toggleSidebar = useCallback(() => setIsSidebarCollapsed((v) => !v), [])
 
-  const roomMatch = useMatch("/channel/:roomId");
-  const mainShouldOwnScroll = !roomMatch;
+  const roomMatch = useMatch("/channel/:roomId")
+  const mainShouldOwnScroll = !roomMatch
 
   return (
     <ChannelContext.Provider value={contextValue}>
-      <div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--surface-ground)" }}>
+      <div
+        className="relative flex h-screen overflow-hidden"
+        style={{ backgroundColor: "var(--surface-ground)" }}
+      >
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 opacity-70"
+          style={{
+            backgroundImage:
+              "radial-gradient(circle at top left, color-mix(in oklch, var(--accent) 9%, transparent) 0, transparent 28%), radial-gradient(circle at bottom right, color-mix(in oklch, var(--accent) 4%, transparent) 0, transparent 24%)",
+          }}
+        />
         {!isMobile && <ServerIconRail />}
 
         <div className="relative flex shrink-0">
@@ -53,14 +68,16 @@ export function ChannelLayout({ children }: { children?: ReactNode }) {
               transition: "width 0.2s ease",
               overflow: "hidden",
               backgroundColor: "var(--surface-sidebar)",
-              borderRight: isSidebarCollapsed ? "none" : "0.5px solid var(--border-subtle)",
+              borderRight: isSidebarCollapsed
+                ? "none"
+                : "0.5px solid var(--border-subtle)",
             }}
           >
             {!isSidebarCollapsed && <ChannelSidebar />}
           </div>
           <button
             onClick={toggleSidebar}
-            className="absolute flex items-center justify-center w-5 h-10 cursor-pointer transition-colors"
+            className="absolute flex h-10 w-5 cursor-pointer items-center justify-center transition-colors"
             style={{
               color: "var(--text-muted)",
               backgroundColor: "var(--surface-sidebar)",
@@ -75,15 +92,22 @@ export function ChannelLayout({ children }: { children?: ReactNode }) {
             title={isSidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
           >
             <ChevronRight
-              className={`w-3.5 h-3.5 transition-transform duration-200 ${isSidebarCollapsed ? "" : "rotate-180"}`}
+              className={`h-3.5 w-3.5 transition-transform duration-200 ${isSidebarCollapsed ? "" : "rotate-180"}`}
             />
           </button>
         </div>
 
-        <div className="flex-1 flex flex-col overflow-hidden min-w-0" style={{ backgroundColor: "var(--surface-ground)" }}>
+        <div
+          className="relative z-10 flex min-w-0 flex-1 flex-col overflow-hidden"
+          style={{ backgroundColor: "var(--surface-ground)" }}
+        >
           <Header />
           <main
-            className={mainShouldOwnScroll ? "flex-1 overflow-y-auto" : "flex-1 overflow-hidden min-h-0"}
+            className={
+              mainShouldOwnScroll
+                ? "flex-1 overflow-y-auto"
+                : "min-h-0 flex-1 overflow-hidden"
+            }
             style={{ backgroundColor: "var(--surface-ground)" }}
           >
             {children ?? <Outlet />}
@@ -91,11 +115,13 @@ export function ChannelLayout({ children }: { children?: ReactNode }) {
         </div>
 
         {canShowMembers && (
-          <div className={`transition-all duration-300 ${showMembers ? "w-[240px]" : "w-0"}`}>
+          <div
+            className={`transition-all duration-300 ${showMembers ? "w-[240px]" : "w-0"}`}
+          >
             {showMembers && <MemberList />}
           </div>
         )}
       </div>
     </ChannelContext.Provider>
-  );
+  )
 }
diff --git a/src/app/project/board/BoardHeader.tsx b/src/app/project/board/BoardHeader.tsx
index 11a27a3..23e734c 100644
--- a/src/app/project/board/BoardHeader.tsx
+++ b/src/app/project/board/BoardHeader.tsx
@@ -1,13 +1,13 @@
-import { useNavigate } from "react-router-dom";
-import { Plus, Trash2, ArrowLeft } from "lucide-react";
-import { BOARD_PAGE } from "@/css/app/board-styles";
+import { useNavigate } from "react-router-dom"
+import { Plus, Trash2, ArrowLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
 
 interface BoardHeaderProps {
-  projectName: string;
-  boardName: string;
-  boardDescription?: string;
-  onDeleteBoard: () => void;
-  onAddColumn: () => void;
+  projectName: string
+  boardName: string
+  boardDescription?: string
+  onDeleteBoard: () => void
+  onAddColumn: () => void
 }
 
 export function BoardHeader({
@@ -17,40 +17,60 @@ export function BoardHeader({
   onDeleteBoard,
   onAddColumn,
 }: BoardHeaderProps) {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   return (
-    <div className={BOARD_PAGE.header}>
-      <div className={BOARD_PAGE.titleGroup}>
-        <div className="flex items-center gap-3">
-          <button
-            onClick={() => navigate(`/${projectName}/board`)}
-            className={BOARD_PAGE.iconBtn}
-          >
-            <ArrowLeft className="w-5 h-5" />
-          </button>
-          <h1 className={BOARD_PAGE.title}>{boardName}</h1>
+    <div className="rounded-2xl border border-border/70 bg-card/80 p-5 shadow-sm backdrop-blur">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="min-w-0">
+          <div className="flex items-center gap-3">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              className="rounded-full text-muted-foreground"
+              onClick={() => navigate(`/${projectName}/board`)}
+              title="Back to boards"
+            >
+              <ArrowLeft />
+            </Button>
+          </div>
+          <div className="mt-3 flex flex-wrap items-center gap-3">
+            <h1 className="truncate text-2xl font-semibold tracking-tight text-foreground">
+              {boardName}
+            </h1>
+            <span className="rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
+              /{projectName}
+            </span>
+          </div>
+          {boardDescription && (
+            <p className="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
+              {boardDescription}
+            </p>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            onClick={onAddColumn}
+            variant="outline"
+            size="sm"
+            className="rounded-full"
+          >
+            <Plus />
+            Add column
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            className="rounded-full text-destructive hover:bg-destructive/10 hover:text-destructive"
+            onClick={onDeleteBoard}
+            title="Delete board"
+          >
+            <Trash2 />
+          </Button>
         </div>
-        <p className={BOARD_PAGE.description} style={{ marginLeft: 36 }}>
-          {boardDescription}
-        </p>
-      </div>
-      <div className="flex items-center gap-2">
-        <button
-          onClick={onAddColumn}
-          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors text-[12px] font-medium"
-        >
-          <Plus className="w-4 h-4" />
-          Add Column
-        </button>
-        <button
-          className={BOARD_PAGE.iconBtn}
-          onClick={onDeleteBoard}
-          title="Delete Board"
-        >
-          <Trash2 className="w-4 h-4" />
-        </button>
       </div>
     </div>
-  );
+  )
 }
diff --git a/src/app/project/issue-detail/IssueSidebar.tsx b/src/app/project/issue-detail/IssueSidebar.tsx
index 2e42de3..f01e67d 100644
--- a/src/app/project/issue-detail/IssueSidebar.tsx
+++ b/src/app/project/issue-detail/IssueSidebar.tsx
@@ -15,9 +15,10 @@ import {
   useUnlinkPRMutation,
   useLinkRepoMutation,
   useUnlinkRepoMutation,
-} from "@/hooks/useIssueExtraQuery";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
+} from "@/hooks/useIssueExtraQuery"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
 import {
   Tag,
   Bell,
@@ -27,97 +28,135 @@ import {
   Plus,
   X,
   Users,
-  Settings
-} from "lucide-react";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+  Settings,
+} from "lucide-react"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-    DropdownMenuSeparator
-} from "@/components/ui/dropdown-menu";
-import { useState } from "react";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+import { useState } from "react"
 import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { t } from "@/i18n/T";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { t } from "@/i18n/T"
 
 interface IssueSidebarProps {
-  projectName: string;
-  issueNumber: number;
+  projectName: string
+  issueNumber: number
 }
 
 export function IssueSidebar({ projectName, issueNumber }: IssueSidebarProps) {
-  const { data: assignees = [] } = useIssueAssigneesQuery({ projectName, issueNumber });
-  const { data: issueLabels = [] } = useIssueLabelsQuery({ projectName, issueNumber });
-  const { data: projectLabels = [] } = useProjectLabelsQuery(projectName);
-  const { data: subscribers = [] } = useIssueSubscribersQuery({ projectName, issueNumber });
-  const { data: prs = [] } = useIssuePRsQuery({ projectName, issueNumber });
-  const { data: repos = [] } = useIssueReposQuery({ projectName, issueNumber });
+  const { data: assignees = [] } = useIssueAssigneesQuery({
+    projectName,
+    issueNumber,
+  })
+  const { data: issueLabels = [] } = useIssueLabelsQuery({
+    projectName,
+    issueNumber,
+  })
+  const { data: projectLabels = [] } = useProjectLabelsQuery(projectName)
+  const { data: subscribers = [] } = useIssueSubscribersQuery({
+    projectName,
+    issueNumber,
+  })
+  const { data: prs = [] } = useIssuePRsQuery({ projectName, issueNumber })
+  const { data: repos = [] } = useIssueReposQuery({ projectName, issueNumber })
 
-  const addAssignee = useAddAssigneeMutation();
-  const removeAssignee = useRemoveAssigneeMutation();
-  const addLabel = useAddIssueLabelMutation();
-  const removeLabel = useRemoveIssueLabelMutation();
-  const subscribe = useIssueSubscribeMutation();
-  const unsubscribe = useIssueUnsubscribeMutation();
-  const linkPR = useLinkPRMutation();
-  const unlinkPR = useUnlinkPRMutation();
-  const linkRepo = useLinkRepoMutation();
-  const unlinkRepo = useUnlinkRepoMutation();
+  const addAssignee = useAddAssigneeMutation()
+  const removeAssignee = useRemoveAssigneeMutation()
+  const addLabel = useAddIssueLabelMutation()
+  const removeLabel = useRemoveIssueLabelMutation()
+  const subscribe = useIssueSubscribeMutation()
+  const unsubscribe = useIssueUnsubscribeMutation()
+  const linkPR = useLinkPRMutation()
+  const unlinkPR = useUnlinkPRMutation()
+  const linkRepo = useLinkRepoMutation()
+  const unlinkRepo = useUnlinkRepoMutation()
 
-  const isSubscribed = subscribers.some(s => s.user_id === "me");
+  const isSubscribed = subscribers.some((s) => s.user_id === "me")
 
-  const [showLinkPR, setShowLinkPR] = useState(false);
-  const [prRepo, setPrRepo] = useState("");
-  const [prNum, setPrNum] = useState("");
-  const [showLinkRepo, setShowLinkRepo] = useState(false);
-  const [repoName, setRepoName] = useState("");
+  const [showLinkPR, setShowLinkPR] = useState(false)
+  const [prRepo, setPrRepo] = useState("")
+  const [prNum, setPrNum] = useState("")
+  const [showLinkRepo, setShowLinkRepo] = useState(false)
+  const [repoName, setRepoName] = useState("")
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-5 rounded-2xl border border-border/70 bg-card/80 p-4 shadow-sm backdrop-blur">
       {/* Assignees */}
       <div className="space-y-2">
-        <div className="flex items-center justify-between group">
-          <h3 className="text-xs font-semibold uppercase tracking-wider flex items-center gap-1.5" style={{ color: "var(--text-muted)" }}>
-            <Users className="w-3.5 h-3.5" /> {t("project.issue_detail.assignees")}
+        <div className="group flex items-center justify-between">
+          <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+            <Users className="size-3.5" /> {t("project.issue_detail.assignees")}
+            <Badge
+              variant="secondary"
+              className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
+            >
+              {assignees.length}
+            </Badge>
           </h3>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <button className="hover:underline text-[10px] font-medium opacity-0 group-hover:opacity-100 transition-opacity" style={{ color: "var(--accent)" }}>
-                    {t("project.issue_detail.edit")}
-                </button>
+              <button className="text-[10px] font-medium text-accent opacity-0 transition-opacity group-hover:opacity-100 hover:underline">
+                {t("project.issue_detail.edit")}
+              </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-48" style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }}>
-                <DropdownMenuItem className="text-xs">{t("project.issue_detail.assign_to_me")}</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <p className="px-2 py-1.5 text-[10px] text-muted-foreground uppercase font-bold">{t("project.issue_detail.suggestions")}</p>
-                <DropdownMenuItem onClick={() => addAssignee.mutate({ projectName, issueNumber, userId: "me" })}>
-                    admin
-                </DropdownMenuItem>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuItem className="text-xs">
+                {t("project.issue_detail.assign_to_me")}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <p className="px-2 py-1.5 text-[10px] font-bold text-muted-foreground uppercase">
+                {t("project.issue_detail.suggestions")}
+              </p>
+              <DropdownMenuItem
+                onClick={() =>
+                  addAssignee.mutate({ projectName, issueNumber, userId: "me" })
+                }
+              >
+                admin
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <div className="space-y-1.5">
+        <div className="space-y-1.5 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 p-3">
           {assignees.length === 0 ? (
-            <p className="text-xs" style={{ color: "var(--text-muted)" }}>{t("project.issue_detail.no_assigned")}</p>
+            <p className="text-xs text-muted-foreground">
+              {t("project.issue_detail.no_assigned")}
+            </p>
           ) : (
-            assignees.map(a => (
-              <div key={a.username} className="flex items-center gap-2 text-sm group">
-                <Avatar className="w-5 h-5 rounded-full">
-                  <AvatarFallback className="text-[10px]">{a.username[0].toUpperCase()}</AvatarFallback>
+            assignees.map((a) => (
+              <div
+                key={a.username}
+                className="group flex items-center gap-2 text-sm"
+              >
+                <Avatar className="size-5 rounded-full">
+                  <AvatarFallback className="text-[10px]">
+                    {a.username[0].toUpperCase()}
+                  </AvatarFallback>
                 </Avatar>
-                <span className="flex-1 truncate" style={{ color: "var(--text-primary)" }}>{a.username}</span>
+                <span className="flex-1 truncate text-foreground">
+                  {a.username}
+                </span>
                 <button
-                    onClick={() => removeAssignee.mutate({ projectName, issueNumber, userId: a.user_id })}
-                    className="opacity-0 group-hover:opacity-100 text-destructive"
+                  onClick={() =>
+                    removeAssignee.mutate({
+                      projectName,
+                      issueNumber,
+                      userId: a.user_id,
+                    })
+                  }
+                  className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
                 >
-                    <X className="w-3 h-3" />
+                  <X className="size-3" />
                 </button>
               </div>
             ))
@@ -125,57 +164,82 @@ export function IssueSidebar({ projectName, issueNumber }: IssueSidebarProps) {
         </div>
       </div>
 
-      <hr className="border-[var(--border-default)]" />
+      <Separator />
 
       {/* Labels */}
       <div className="space-y-2">
-        <div className="flex items-center justify-between group">
-          <h3 className="text-xs font-semibold uppercase tracking-wider flex items-center gap-1.5" style={{ color: "var(--text-muted)" }}>
-            <Tag className="w-3.5 h-3.5" /> {t("project.issue_detail.labels")}
+        <div className="group flex items-center justify-between">
+          <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+            <Tag className="size-3.5" /> {t("project.issue_detail.labels")}
+            <Badge
+              variant="secondary"
+              className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
+            >
+              {issueLabels.length}
+            </Badge>
           </h3>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <button className="hover:underline text-[10px] font-medium opacity-0 group-hover:opacity-100 transition-opacity" style={{ color: "var(--accent)" }}>
-                    {t("project.issue_detail.edit")}
-                </button>
+              <button className="text-[10px] font-medium text-accent opacity-0 transition-opacity group-hover:opacity-100 hover:underline">
+                {t("project.issue_detail.edit")}
+              </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56" style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }}>
-                <p className="px-2 py-1.5 text-[10px] text-muted-foreground uppercase font-bold">{t("project.issue_detail.apply_labels")}</p>
-                {projectLabels.map(l => (
-                    <DropdownMenuItem
-                        key={l.id}
-                        className="flex items-center gap-2"
-                        onClick={() => addLabel.mutate({ projectName, issueNumber, labelId: l.id })}
-                    >
-                        <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: l.color || "var(--accent)" }} />
-                        <span className="flex-1">{l.name}</span>
-                        {issueLabels.some(il => il.label_name === l.name) && <Loader2 className="w-3 h-3 animate-spin" />}
-                    </DropdownMenuItem>
-                ))}
-                <DropdownMenuSeparator />
-                <DropdownMenuItem style={{ color: "var(--accent)" }}>
-                    <Settings className="w-3.5 h-3.5 mr-2" /> Manage labels
+            <DropdownMenuContent align="end" className="w-56">
+              <p className="px-2 py-1.5 text-[10px] font-bold text-muted-foreground uppercase">
+                {t("project.issue_detail.apply_labels")}
+              </p>
+              {projectLabels.map((l) => (
+                <DropdownMenuItem
+                  key={l.id}
+                  className="flex items-center gap-2"
+                  onClick={() =>
+                    addLabel.mutate({ projectName, issueNumber, labelId: l.id })
+                  }
+                >
+                  <div
+                    className="size-2.5 rounded-full"
+                    style={{ backgroundColor: l.color || "var(--accent)" }}
+                  />
+                  <span className="flex-1">{l.name}</span>
+                  {issueLabels.some((il) => il.label_name === l.name) && (
+                    <Loader2 className="size-3 animate-spin" />
+                  )}
                 </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem className="text-accent">
+                <Settings className="mr-2" /> Manage labels
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <div className="flex flex-wrap gap-1">
+        <div className="flex flex-wrap gap-1 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 p-3">
           {issueLabels.length === 0 ? (
-            <p className="text-xs" style={{ color: "var(--text-muted)" }}>{t("project.issue_detail.none_yet")}</p>
+            <p className="text-xs text-muted-foreground">
+              {t("project.issue_detail.none_yet")}
+            </p>
           ) : (
-            issueLabels.map(l => (
+            issueLabels.map((l) => (
               <Badge
                 key={l.label_name}
                 variant="outline"
-                className="text-[10px] px-1.5 py-0 h-5 border-none"
-                style={{ backgroundColor: "var(--border-default)", color: "var(--text-primary)", borderLeft: `3px solid ${l.label_color ?? "var(--accent)"}` }}
+                className="h-5 border-border/70 bg-muted/40 px-1.5 text-[10px] text-foreground"
+                style={{
+                  borderLeft: `3px solid ${l.label_color ?? "var(--accent)"}`,
+                }}
               >
                 {l.label_name}
                 <button
-                    onClick={() => removeLabel.mutate({ projectName, issueNumber, labelId: l.label_id })}
-                    className="ml-1 hover:text-destructive"
+                  onClick={() =>
+                    removeLabel.mutate({
+                      projectName,
+                      issueNumber,
+                      labelId: l.label_id,
+                    })
+                  }
+                  className="ml-1 transition-colors hover:text-destructive"
                 >
-                    <X className="w-2.5 h-2.5" />
+                  <X className="size-2.5" />
                 </button>
               </Badge>
             ))
@@ -183,151 +247,236 @@ export function IssueSidebar({ projectName, issueNumber }: IssueSidebarProps) {
         </div>
       </div>
 
-      <hr className="border-[var(--border-default)]" />
+      <Separator />
 
       {/* Notifications */}
       <div className="space-y-2">
-        <h3 className="text-xs font-semibold uppercase tracking-wider flex items-center gap-1.5" style={{ color: "var(--text-muted)" }}>
-          <Bell className="w-3.5 h-3.5" /> {t("project.issue_detail.notifications")}
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+          <Bell className="size-3.5" />{" "}
+          {t("project.issue_detail.notifications")}
+          <Badge
+            variant="secondary"
+            className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
+          >
+            {subscribers.length}
+          </Badge>
         </h3>
         <Button
-            variant="outline"
-            size="sm"
-            className="w-full h-8 text-xs"
-            style={{ backgroundColor: "var(--surface-elevated)" }}
-            onClick={() => {
-              if (isSubscribed) {
-                unsubscribe.mutate({ projectName, issueNumber });
-              } else {
-                subscribe.mutate({ projectName, issueNumber });
-              }
-            }}
+          variant="outline"
+          size="sm"
+          className="h-8 w-full justify-start rounded-full text-xs"
+          onClick={() => {
+            if (isSubscribed) {
+              unsubscribe.mutate({ projectName, issueNumber })
+            } else {
+              subscribe.mutate({ projectName, issueNumber })
+            }
+          }}
         >
-            {isSubscribed ? t("project.issue_detail.unsubscribe") : t("project.issue_detail.subscribe")}
+          {isSubscribed
+            ? t("project.issue_detail.unsubscribe")
+            : t("project.issue_detail.subscribe")}
         </Button>
-        <p className="text-[10px]" style={{ color: "var(--text-muted)" }}>
-            {t("project.issue_detail.subscribers_count", { count: String(subscribers.length) })}
+        <p className="text-[10px] text-muted-foreground">
+          {t("project.issue_detail.subscribers_count", {
+            count: String(subscribers.length),
+          })}
         </p>
       </div>
 
-      <hr className="border-[var(--border-default)]" />
+      <Separator />
 
       {/* Development */}
       <div className="space-y-2">
-        <h3 className="text-xs font-semibold uppercase tracking-wider flex items-center gap-1.5" style={{ color: "var(--text-muted)" }}>
+        <h3 className="flex items-center gap-1.5 text-xs font-semibold tracking-wider text-muted-foreground uppercase">
           {t("project.issue_detail.development")}
+          <Badge
+            variant="secondary"
+            className="ml-1 rounded-full px-2 py-0.5 text-[10px]"
+          >
+            {prs.length + repos.length}
+          </Badge>
         </h3>
         <div className="space-y-2">
-            {prs.length > 0 && (
-                <div className="space-y-1">
-                    <p className="text-[10px] font-bold uppercase" style={{ color: "var(--text-muted)" }}>{t("project.issue_detail.pull_requests")}</p>
-                    {prs.map(pr => (
-                        <div key={`${pr.repo}-${pr.number}`} className="flex items-center gap-1.5 text-xs group">
-                            <div className="flex items-center gap-1.5 hover:underline cursor-pointer" style={{ color: "var(--accent)" }}>
-                                <GitPullRequest className="w-3 h-3" />
-                                <span>#{pr.number} in {pr.repo}</span>
-                            </div>
-                            <button
-                                onClick={() => unlinkPR.mutate({ projectName, issueNumber, repo: pr.repo!, prNumber: pr.number! })}
-                                className="opacity-0 group-hover:opacity-100 text-destructive"
-                            >
-                                <X className="w-3 h-3" />
-                            </button>
-                        </div>
-                    ))}
+          {prs.length > 0 && (
+            <div className="space-y-1">
+              <p className="text-[10px] font-bold text-muted-foreground uppercase">
+                {t("project.issue_detail.pull_requests")}
+              </p>
+              {prs.map((pr) => (
+                <div
+                  key={`${pr.repo}-${pr.number}`}
+                  className="group flex items-center gap-1.5 text-xs"
+                >
+                  <div className="flex cursor-pointer items-center gap-1.5 text-accent hover:underline">
+                    <GitPullRequest className="size-3" />
+                    <span>
+                      #{pr.number} in {pr.repo}
+                    </span>
+                  </div>
+                  <button
+                    onClick={() =>
+                      unlinkPR.mutate({
+                        projectName,
+                        issueNumber,
+                        repo: pr.repo!,
+                        prNumber: pr.number!,
+                      })
+                    }
+                    className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
+                  >
+                    <X className="size-3" />
+                  </button>
                 </div>
-            )}
-            {repos.length > 0 && (
-                <div className="space-y-1">
-                    <p className="text-[10px] font-bold uppercase" style={{ color: "var(--text-muted)" }}>{t("project.issue_detail.linked_repos")}</p>
-                    {repos.map(r => (
-                        <div key={r.repo} className="flex items-center gap-1.5 text-xs group">
-                            <div className="flex items-center gap-1.5 hover:underline cursor-pointer" style={{ color: "var(--accent)" }}>
-                                <LinkIcon className="w-3 h-3" />
-                                <span>{r.repo}</span>
-                            </div>
-                            <button
-                                onClick={() => unlinkRepo.mutate({ projectName, issueNumber, repoId: r.repo! })}
-                                className="opacity-0 group-hover:opacity-100 text-destructive"
-                            >
-                                <X className="w-3 h-3" />
-                            </button>
-                        </div>
-                    ))}
+              ))}
+            </div>
+          )}
+          {repos.length > 0 && (
+            <div className="space-y-1">
+              <p className="text-[10px] font-bold text-muted-foreground uppercase">
+                {t("project.issue_detail.linked_repos")}
+              </p>
+              {repos.map((r) => (
+                <div
+                  key={r.repo}
+                  className="group flex items-center gap-1.5 text-xs"
+                >
+                  <div className="flex cursor-pointer items-center gap-1.5 text-accent hover:underline">
+                    <LinkIcon className="size-3" />
+                    <span>{r.repo}</span>
+                  </div>
+                  <button
+                    onClick={() =>
+                      unlinkRepo.mutate({
+                        projectName,
+                        issueNumber,
+                        repoId: r.repo!,
+                      })
+                    }
+                    className="text-destructive opacity-0 transition-opacity group-hover:opacity-100"
+                  >
+                    <X className="size-3" />
+                  </button>
                 </div>
-            )}
-            <button className="flex items-center gap-1 text-[10px] hover:underline font-medium" style={{ color: "var(--accent)" }} onClick={() => setShowLinkPR(true)}>
-                <Plus className="w-3 h-3" /> {t("project.issue_detail.link_pr")}
+              ))}
+            </div>
+          )}
+          <div className="flex flex-col gap-2">
+            <button
+              className="flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 px-3 py-1.5 text-[10px] font-medium text-accent transition-colors hover:bg-[var(--hover-bg)]"
+              onClick={() => setShowLinkPR(true)}
+            >
+              <Plus className="size-3" /> {t("project.issue_detail.link_pr")}
             </button>
-            <button className="flex items-center gap-1 text-[10px] hover:underline font-medium" style={{ color: "var(--accent)" }} onClick={() => setShowLinkRepo(true)}>
-                <Plus className="w-3 h-3" /> {t("project.issue_detail.link_repo")}
+            <button
+              className="flex items-center gap-1 rounded-full border border-[var(--border-subtle)] bg-[var(--surface-ground)]/60 px-3 py-1.5 text-[10px] font-medium text-accent transition-colors hover:bg-[var(--hover-bg)]"
+              onClick={() => setShowLinkRepo(true)}
+            >
+              <Plus className="size-3" /> {t("project.issue_detail.link_repo")}
             </button>
+          </div>
         </div>
       </div>
 
       {/* Link PR Dialog */}
       <Dialog open={showLinkPR} onOpenChange={setShowLinkPR}>
         <DialogContent>
-            <DialogHeader>
-                <DialogTitle>{t("project.issue_detail.link_pr_title")}</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-3">
-                <div>
-                    <label className="text-xs font-medium" style={{ color: "var(--text-muted)" }}>Repo</label>
-                    <Input value={prRepo} onChange={(e) => setPrRepo(e.target.value)} placeholder="owner/repo" />
-                </div>
-                <div>
-                    <label className="text-xs font-medium" style={{ color: "var(--text-muted)" }}>PR Number</label>
-                    <Input value={prNum} onChange={(e) => setPrNum(e.target.value)} placeholder="123" />
-                </div>
-                <Button
-                    size="sm"
-                    style={{ backgroundColor: "var(--accent)" }}
-                    onClick={() => {
-                        const parts = prRepo.split("/");
-                        if (parts.length === 2 && prNum) {
-                            linkPR.mutate({ projectName, issueNumber, repo: prRepo, prNumber: Number(prNum) });
-                            setShowLinkPR(false);
-                            setPrRepo("");
-                            setPrNum("");
-                        }
-                    }}
-                    disabled={linkPR.isPending}
-                >
-                    Link
-                </Button>
+          <DialogHeader>
+            <DialogTitle>{t("project.issue_detail.link_pr_title")}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <label
+                className="text-xs font-medium"
+                style={{ color: "var(--text-muted)" }}
+              >
+                Repo
+              </label>
+              <Input
+                value={prRepo}
+                onChange={(e) => setPrRepo(e.target.value)}
+                placeholder="owner/repo"
+              />
             </div>
+            <div>
+              <label
+                className="text-xs font-medium"
+                style={{ color: "var(--text-muted)" }}
+              >
+                PR Number
+              </label>
+              <Input
+                value={prNum}
+                onChange={(e) => setPrNum(e.target.value)}
+                placeholder="123"
+              />
+            </div>
+            <Button
+              size="sm"
+              className="rounded-full"
+              style={{ backgroundColor: "var(--accent)" }}
+              onClick={() => {
+                const parts = prRepo.split("/")
+                if (parts.length === 2 && prNum) {
+                  linkPR.mutate({
+                    projectName,
+                    issueNumber,
+                    repo: prRepo,
+                    prNumber: Number(prNum),
+                  })
+                  setShowLinkPR(false)
+                  setPrRepo("")
+                  setPrNum("")
+                }
+              }}
+              disabled={linkPR.isPending}
+            >
+              Link
+            </Button>
+          </div>
         </DialogContent>
       </Dialog>
 
       {/* Link Repo Dialog */}
       <Dialog open={showLinkRepo} onOpenChange={setShowLinkRepo}>
         <DialogContent>
-            <DialogHeader>
-                <DialogTitle>{t("project.issue_detail.link_repo_title")}</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-3">
-                <div>
-                    <label className="text-xs font-medium" style={{ color: "var(--text-muted)" }}>Repo</label>
-                    <Input value={repoName} onChange={(e) => setRepoName(e.target.value)} placeholder="owner/repo" />
-                </div>
-                <Button
-                    size="sm"
-                    style={{ backgroundColor: "var(--accent)" }}
-                    onClick={() => {
-                        if (repoName) {
-                            linkRepo.mutate({ projectName, issueNumber, repo: repoName });
-                            setShowLinkRepo(false);
-                            setRepoName("");
-                        }
-                    }}
-                    disabled={linkRepo.isPending}
-                >
-                    Link
-                </Button>
+          <DialogHeader>
+            <DialogTitle>
+              {t("project.issue_detail.link_repo_title")}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div>
+              <label
+                className="text-xs font-medium"
+                style={{ color: "var(--text-muted)" }}
+              >
+                Repo
+              </label>
+              <Input
+                value={repoName}
+                onChange={(e) => setRepoName(e.target.value)}
+                placeholder="owner/repo"
+              />
             </div>
+            <Button
+              size="sm"
+              className="rounded-full"
+              style={{ backgroundColor: "var(--accent)" }}
+              onClick={() => {
+                if (repoName) {
+                  linkRepo.mutate({ projectName, issueNumber, repo: repoName })
+                  setShowLinkRepo(false)
+                  setRepoName("")
+                }
+              }}
+              disabled={linkRepo.isPending}
+            >
+              Link
+            </Button>
+          </div>
         </DialogContent>
       </Dialog>
     </div>
-  );
+  )
 }
diff --git a/src/app/project/layout.tsx b/src/app/project/layout.tsx
index 6188bd1..b58f9fc 100644
--- a/src/app/project/layout.tsx
+++ b/src/app/project/layout.tsx
@@ -1,25 +1,25 @@
-import { Link, Outlet, useMatch, useParams } from "react-router-dom";
-import { createContext, useContext, useState } from "react";
-import { Lock, PanelLeftOpen } from "lucide-react";
-import { ServerIconRail } from "@/components/layout/ServerIconRail";
-import { ChannelSidebar } from "@/components/layout/ChannelSidebar";
-import { Header } from "@/components/layout/Header";
-import { MemberList } from "@/components/layout/MemberList";
-import { RoomProvider } from "@/contexts/room";
-import { useIsMobile, useIsTablet } from "@/hooks/use-mobile";
-import { useProjectInfo } from "@/hooks/useProjectInfo";
-import type { ProjectInfoRelational } from "@/client/model";
-import { Button } from "@/components/ui/button";
-import { t } from "@/i18n/T";
+import { Link, Outlet, useMatch, useParams } from "react-router-dom"
+import { createContext, useContext, useState } from "react"
+import { Lock, PanelLeftOpen } from "lucide-react"
+import { ServerIconRail } from "@/components/layout/ServerIconRail"
+import { ChannelSidebar } from "@/components/layout/ChannelSidebar"
+import { Header } from "@/components/layout/Header"
+import { MemberList } from "@/components/layout/MemberList"
+import { RoomProvider } from "@/contexts/room"
+import { useIsMobile, useIsTablet } from "@/hooks/use-mobile"
+import { useProjectInfo } from "@/hooks/useProjectInfo"
+import type { ProjectInfoRelational } from "@/client/model"
+import { Button } from "@/components/ui/button"
+import { t } from "@/i18n/T"
 
 interface ProjectContextType {
-  showMembers: boolean;
-  setShowMembers: (v: boolean) => void;
-  currentRoomName: string | null;
-  setCurrentRoomName: (name: string | null) => void;
-  projectInfo: ProjectInfoRelational | null;
-  isProjectMember: boolean;
-  isProjectPreview: boolean;
+  showMembers: boolean
+  setShowMembers: (v: boolean) => void
+  currentRoomName: string | null
+  setCurrentRoomName: (name: string | null) => void
+  projectInfo: ProjectInfoRelational | null
+  isProjectMember: boolean
+  isProjectPreview: boolean
 }
 
 const ProjectContext = createContext<ProjectContextType>({
@@ -30,62 +30,67 @@ const ProjectContext = createContext<ProjectContextType>({
   projectInfo: null,
   isProjectMember: false,
   isProjectPreview: false,
-});
+})
 
 // eslint-disable-next-line react-refresh/only-export-components
-export const useProjectLayout = () => useContext(ProjectContext);
+export const useProjectLayout = () => useContext(ProjectContext)
 
 export function ProjectJoinBanner({
   compact = false,
   message,
 }: {
-  compact?: boolean;
-  message?: string;
+  compact?: boolean
+  message?: string
 }) {
-  const { projectInfo } = useProjectLayout();
-  const projectName = projectInfo?.name;
-  const defaultMessage = t("project.layout.join_banner.join_to_participate");
+  const { projectInfo } = useProjectLayout()
+  const projectName = projectInfo?.name
+  const defaultMessage = t("project.layout.join_banner.join_to_participate")
 
   return (
     <div
-      className={`flex ${compact ? "items-center justify-between gap-3 rounded-lg px-4 py-3" : "items-start justify-between gap-4 px-6 py-4"} border bg-muted/30`}
-      style={{ borderColor: "var(--border-subtle)" }}
+      className={`flex ${compact ? "items-center justify-between gap-3 rounded-xl px-4 py-3" : "items-start justify-between gap-4 px-6 py-4"} border border-border/70 bg-card/80 shadow-sm backdrop-blur`}
     >
       <div className="flex min-w-0 items-start gap-3">
         <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
           <Lock className="size-4" />
         </div>
         <div className="min-w-0">
-          <p className="text-sm font-medium text-foreground">{t("project.layout.join_banner.preview_mode")}</p>
-          <p className="text-sm text-muted-foreground">{message ?? defaultMessage}</p>
+          <p className="text-sm font-medium text-foreground">
+            {t("project.layout.join_banner.preview_mode")}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            {message ?? defaultMessage}
+          </p>
         </div>
       </div>
       {projectName && (
         <Button asChild size={compact ? "sm" : "default"} className="shrink-0">
-          <Link to={`/${projectName}/join`}>{t("project.layout.join_banner.apply_to_join")}</Link>
+          <Link to={`/${projectName}/join`}>
+            {t("project.layout.join_banner.apply_to_join")}
+          </Link>
         </Button>
       )}
     </div>
-  );
+  )
 }
 
 export function ProjectLayout() {
-  const [showMembers, setShowMembers] = useState(false);
-  const [currentRoomName, setCurrentRoomName] = useState<string | null>(null);
-  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
-  const { projectName } = useParams<{ projectName: string }>();
-  const { data: projectInfo = null } = useProjectInfo(projectName);
-  const channelMatch = useMatch("/:projectName/channel/:roomId");
-  const chatMatch = useMatch("/:projectName/chat/*");
-  const roomId = channelMatch?.params.roomId ?? null;
-  const isMobile = useIsMobile();
-  const isTablet = useIsTablet();
+  const [showMembers, setShowMembers] = useState(false)
+  const [currentRoomName, setCurrentRoomName] = useState<string | null>(null)
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
+  const { projectName } = useParams<{ projectName: string }>()
+  const { data: projectInfo = null } = useProjectInfo(projectName)
+  const channelMatch = useMatch("/:projectName/channel/:roomId")
+  const chatMatch = useMatch("/:projectName/chat/*")
+  const roomId = channelMatch?.params.roomId ?? null
+  const isMobile = useIsMobile()
+  const isTablet = useIsTablet()
 
-  const isProjectMember = !!projectInfo?.role;
-  const isProjectPreview = !!projectInfo && !projectInfo.role;
-  const canShowMembers = !isMobile && !isTablet && isProjectMember;
+  const isProjectMember = !!projectInfo?.role
+  const isProjectPreview = !!projectInfo && !projectInfo.role
+  const canShowMembers = !isMobile && !isTablet && isProjectMember
 
-  const mainShouldOwnScroll = !channelMatch && !chatMatch;
+  const mainShouldOwnScroll = !channelMatch && !chatMatch
 
   return (
     <ProjectContext.Provider
@@ -99,8 +104,19 @@ export function ProjectLayout() {
         isProjectPreview,
       }}
     >
-      <RoomProvider roomId={isProjectMember ? roomId : null} projectName={projectName}>
-        <div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--surface-ground)" }}>
+      <RoomProvider
+        roomId={isProjectMember ? roomId : null}
+        projectName={projectName}
+      >
+        <div className="relative flex h-screen overflow-hidden bg-[var(--surface-ground)]">
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 opacity-80"
+            style={{
+              backgroundImage:
+                "radial-gradient(circle at top left, color-mix(in oklch, var(--accent) 9%, transparent) 0, transparent 28%), radial-gradient(circle at bottom right, color-mix(in oklch, var(--accent) 4%, transparent) 0, transparent 24%)",
+            }}
+          />
           {!isMobile && <ServerIconRail />}
 
           <div className="relative flex shrink-0">
@@ -109,41 +125,34 @@ export function ProjectLayout() {
                 width: isSidebarCollapsed ? 0 : 220,
                 transition: "width 0.2s ease",
                 overflow: "hidden",
-                backgroundColor: "var(--surface-sidebar)",
-                borderRight: isSidebarCollapsed ? "none" : "0.5px solid var(--border-subtle)",
+                backgroundColor:
+                  "color-mix(in oklch, var(--surface-sidebar) 92%, transparent)",
+                borderRight: isSidebarCollapsed
+                  ? "none"
+                  : "0.5px solid var(--border-subtle)",
               }}
             >
               {!isSidebarCollapsed && (
-                <ChannelSidebar onCollapse={() => setIsSidebarCollapsed(true)} />
+                <ChannelSidebar
+                  onCollapse={() => setIsSidebarCollapsed(true)}
+                />
               )}
             </div>
             {/* Expand button - visible when collapsed */}
             {isSidebarCollapsed && (
-              <button
+              <Button
                 onClick={() => setIsSidebarCollapsed(false)}
-                className="absolute flex items-center justify-center w-5 h-10 cursor-pointer transition-colors"
-                style={{
-                  color: "var(--text-muted)",
-                  backgroundColor: "var(--surface-sidebar)",
-                  right: -10,
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  borderRadius: "0 4px 4px 0",
-                  border: "0.5px solid var(--border-subtle)",
-                  borderLeft: "none",
-                  zIndex: 10,
-                }}
+                variant="ghost"
+                size="icon-sm"
+                className="absolute top-1/2 right-[-12px] z-10 rounded-l-none rounded-r-xl border border-l-0 border-[var(--border-subtle)] bg-[var(--surface-sidebar)] text-[var(--text-muted)] shadow-sm"
                 title={t("project.layout.expand_sidebar")}
               >
-                <PanelLeftOpen className="w-3.5 h-3.5" />
-              </button>
+                <PanelLeftOpen className="size-3.5" />
+              </Button>
             )}
           </div>
 
-          <div
-            className="flex-1 flex flex-col overflow-hidden min-w-0"
-            style={{ backgroundColor: "var(--surface-ground)" }}
-          >
+          <div className="relative z-10 flex min-w-0 flex-1 flex-col overflow-hidden bg-[var(--surface-ground)]">
             <Header />
             {isProjectPreview && (
               <ProjectJoinBanner
@@ -156,7 +165,11 @@ export function ProjectLayout() {
               />
             )}
             <main
-              className={mainShouldOwnScroll ? "flex-1 overflow-y-auto" : "flex-1 overflow-hidden min-h-0"}
+              className={
+                mainShouldOwnScroll
+                  ? "flex-1 overflow-y-auto"
+                  : "min-h-0 flex-1 overflow-hidden"
+              }
               style={{ backgroundColor: "var(--surface-ground)" }}
             >
               <Outlet />
@@ -173,5 +186,5 @@ export function ProjectLayout() {
         </div>
       </RoomProvider>
     </ProjectContext.Provider>
-  );
+  )
 }