diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index 5475480..227fbf6 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -43,7 +43,7 @@ export default async function AdminLayout({
         tutorialEnabled={siteSettings.tutorialEnabled ?? false}
         rankingEnabled={siteSettings.rankingEnabled ?? true}
       />
-      <div className="flex-1 pr-20">{children}</div>
+      <div className="flex-1 pl-16">{children}</div>
     </div>
   );
 }
diff --git a/app/(chat)/layout.tsx b/app/(chat)/layout.tsx
index 3676ee9..5021231 100644
--- a/app/(chat)/layout.tsx
+++ b/app/(chat)/layout.tsx
@@ -63,7 +63,7 @@ async function SidebarWrapper({ children }: { children: React.ReactNode }) {
         tutorialEnabled={siteSettings.tutorialEnabled ?? false}
         rankingEnabled={siteSettings.rankingEnabled ?? true}
       />
-      <div className="flex h-svh w-full overflow-hidden pr-20">
+      <div className="flex h-svh w-full overflow-hidden pl-16 [--sidebar-offset:4rem]">
         <AppSidebar user={session?.user} />
         <SidebarInset className="h-full">{children}</SidebarInset>
       </div>
diff --git a/app/canvas/[id]/layout.tsx b/app/canvas/[id]/layout.tsx
index 5f9eb57..193132a 100644
--- a/app/canvas/[id]/layout.tsx
+++ b/app/canvas/[id]/layout.tsx
@@ -59,7 +59,7 @@ async function CanvasLayoutWrapper({ children }: { children: React.ReactNode })
         tutorialEnabled={siteSettings.tutorialEnabled ?? false}
         rankingEnabled={siteSettings.rankingEnabled ?? true}
       />
-      <div className="h-full pr-20">
+      <div className="h-full pl-16">
         {children}
       </div>
     </div>
diff --git a/components/top-navbar.tsx b/components/top-navbar.tsx
index c4ce895..f0601e7 100644
--- a/components/top-navbar.tsx
+++ b/components/top-navbar.tsx
@@ -140,8 +140,8 @@ export function TopNavbar({
   };
 
   const navItemBaseClass =
-    "flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-xl text-white hover:bg-white/10 transition-colors";
-  const navLabelClass = "text-[10px] leading-none font-medium";
+    "flex h-12 w-12 flex-col items-center justify-center gap-1 rounded-xl text-gray-800 hover:bg-black/5 transition-colors dark:text-white dark:hover:bg-white/10";
+  const navLabelClass = "text-[10px] leading-none font-medium text-gray-700 dark:text-white/90";
 
   // 打开图片编辑器 - 直接打开，不触发上传
   const handleOpenImageEditor = () => {
@@ -201,7 +201,7 @@ export function TopNavbar({
   };
 
   const navContent = (
-    <nav className="fixed right-0 top-0 bottom-0 z-[100] flex w-20 flex-col items-center bg-black/90 backdrop-blur-sm text-white border-l border-white/10 shadow-sm">
+    <nav className="fixed left-0 top-0 bottom-0 z-[100] flex w-16 flex-col items-center bg-white/90 backdrop-blur-sm text-gray-900 border-r border-gray-200 shadow-sm dark:bg-black/90 dark:text-white dark:border-white/10">
       {/* 顶部：LOGO + 网站名称 */}
       <a
         href="/"
@@ -238,7 +238,7 @@ export function TopNavbar({
                 <span className={navLabelClass}>{getShortLabel(toolbox1Name)}</span>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent side="left" align="center" className="w-[320px] p-2">
+            <DropdownMenuContent side="right" align="center" className="w-[320px] p-2">
               <div className="grid grid-cols-2 gap-2">
                 {customLinks
                   .filter(l => (l.toolboxGroup || 1) === 1)
@@ -276,7 +276,7 @@ export function TopNavbar({
                 <span className={navLabelClass}>{getShortLabel(toolbox2Name)}</span>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent side="left" align="center" className="w-[320px] p-2">
+            <DropdownMenuContent side="right" align="center" className="w-[320px] p-2">
               <div className="grid grid-cols-2 gap-2">
                 {customLinks
                   .filter(l => l.toolboxGroup === 2)
@@ -328,7 +328,7 @@ export function TopNavbar({
                 <span className={navLabelClass}>{getShortLabel("功能教程")}</span>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent side="left" align="center" className="w-[320px] p-2">
+            <DropdownMenuContent side="right" align="center" className="w-[320px] p-2">
               <div className="space-y-1 max-h-[400px] overflow-y-auto">
                 {tutorialVideos
                   .sort((a, b) => a.order - b.order)
@@ -387,7 +387,7 @@ export function TopNavbar({
                 <span className={navLabelClass}>{getShortLabel("精选榜")}</span>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent side="left" align="center" className="w-[280px] p-3">
+            <DropdownMenuContent side="right" align="center" className="w-[280px] p-3">
               <div className="flex items-center gap-2 mb-3 pb-2 border-b">
                 <Trophy className="h-5 w-5 text-orange-500" />
                 <span className="font-semibold">精选榜单 TOP5</span>
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 9a265b7..d79254d 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -245,8 +245,8 @@ const Sidebar = React.forwardRef<
           className={cn(
             "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
             side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              ? "left-[var(--sidebar-offset,0px)] group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-offset,0px)_-_var(--sidebar-width))]"
+              : "right-[var(--sidebar-offset,0px)] group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-offset,0px)_-_var(--sidebar-width))]",
             // Adjust the padding for floating and inset variants.
             variant === "floating" || variant === "inset"
               ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"