diff --git a/qwen3-tts-frontend/src/components/Navbar.tsx b/qwen3-tts-frontend/src/components/Navbar.tsx
index 6a6a22e..6c778ab 100644
--- a/qwen3-tts-frontend/src/components/Navbar.tsx
+++ b/qwen3-tts-frontend/src/components/Navbar.tsx
@@ -22,7 +22,7 @@ export function Navbar({ onToggleSidebar }: NavbarProps) {
   const { t, i18n } = useTranslation(['nav', 'constants'])
 
   return (
-    <nav className="h-16 bg-background flex items-center justify-end px-4 gap-2">
+    <nav className="h-16 flex items-center justify-end px-4 gap-2">
       {onToggleSidebar && (
         <Button
           variant="ghost"
diff --git a/qwen3-tts-frontend/src/pages/Home.tsx b/qwen3-tts-frontend/src/pages/Home.tsx
index a5347f0..169cbdf 100644
--- a/qwen3-tts-frontend/src/pages/Home.tsx
+++ b/qwen3-tts-frontend/src/pages/Home.tsx
@@ -44,10 +44,10 @@ function Home() {
         onOpenChange={setSidebarOpen}
       />
 
-      <div className="flex-1 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col overflow-hidden bg-muted/30">
         <Navbar onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} />
 
-        <main className="flex-1 overflow-y-auto flex items-start md:items-center justify-center">
+        <main className="flex-1 overflow-y-auto flex items-start md:items-center justify-center lg:rounded-tl-2xl bg-background">
           <div className="w-full container mx-auto p-3 md:p-6 max-w-[800px] md:max-w-[700px]">
             <Tabs value={currentTab} onValueChange={setCurrentTab}>
               <TabsList className="grid w-full grid-cols-3 h-9 mb-3">