diff --git a/app/globals.css b/app/globals.css
index 4083b72..14d3a88 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -152,7 +152,7 @@
   --sidebar-project-background: #1e1e1e;
   --sidebar-primary: #007acc;
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #264f78;
+  --sidebar-accent: #2d2d30;
   --sidebar-accent-foreground: #ffffff;
   --sidebar-border: #1e1e1e;
   --sidebar-ring: #007fd4;
diff --git a/app/projects/[id]/auth/page.tsx b/app/projects/[id]/auth/page.tsx
index 4f0f498..984930a 100644
--- a/app/projects/[id]/auth/page.tsx
+++ b/app/projects/[id]/auth/page.tsx
@@ -88,11 +88,11 @@ function AuthPageContent() {
 
   return (
     <ConfigLayout
-      title="Authentication Configuration"
-      description="Configure OAuth providers and other authentication settings"
+      title="Auth Configuration"
+      description="Configure auth configuration settings for this project."
       loading={envLoading || projectLoading}
     >
-      <div className="space-y-8">
+      <div>
         {/* GitHub OAuth Section */}
         <div>
           <div className="flex items-center justify-between mb-4">
diff --git a/app/projects/[id]/database/page.tsx b/app/projects/[id]/database/page.tsx
index d5d82e3..92e783d 100644
--- a/app/projects/[id]/database/page.tsx
+++ b/app/projects/[id]/database/page.tsx
@@ -7,6 +7,7 @@
 import { Info } from 'lucide-react';
 import { notFound, redirect } from 'next/navigation';
 
+import { ConfigLayout } from '@/components/config/config-layout';
 import { auth } from '@/lib/auth';
 import { prisma } from '@/lib/db';
 
@@ -48,91 +49,85 @@ export default async function DatabasePage({ params }: { params: Promise<{ id: s
   }
 
   return (
-    <div className="flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]">
-      {/* Header */}
-      <div className="shrink-0 border-b border-[#3e3e42] bg-[#1e1e1e] px-6 py-4">
-        <div>
-          <h1 className="text-base font-medium text-[#cccccc]">Database Information</h1>
-          <p className="text-xs text-[#858585] mt-0.5">View database connection details</p>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto">
-        <div className="max-w-4xl mx-auto p-6 space-y-6">
-          {connectionString ? (
-            <>
-              {/* Connection Details */}
-              <div className="space-y-3">
-                <h2 className="text-sm font-medium text-[#cccccc] mb-3">PostgreSQL Connection</h2>
-
-                {/* Host */}
-                <div>
-                  <label className="text-xs text-[#858585] mb-1 block">Host</label>
-                  <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
-                    {host}
+    <ConfigLayout title="Database Information" description="View database connection details">
+      <div className="flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]">
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto">
+          <div>
+            {connectionString ? (
+              <>
+                {/* Connection Details */}
+                <div className="space-y-3">
+                  <h2 className="text-sm font-medium text-[#cccccc] mb-3">PostgreSQL Connection</h2>
+
+                  {/* Host */}
+                  <div>
+                    <label className="text-xs text-[#858585] mb-1 block">Host</label>
+                    <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
+                      {host}
+                    </div>
                   </div>
-                </div>
 
-                {/* Port */}
-                <div>
-                  <label className="text-xs text-[#858585] mb-1 block">Port</label>
-                  <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
-                    {port}
+                  {/* Port */}
+                  <div>
+                    <label className="text-xs text-[#858585] mb-1 block">Port</label>
+                    <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
+                      {port}
+                    </div>
                   </div>
-                </div>
 
-                {/* Database Name */}
-                <div>
-                  <label className="text-xs text-[#858585] mb-1 block">Database</label>
-                  <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
-                    {dbName}
+                  {/* Database Name */}
+                  <div>
+                    <label className="text-xs text-[#858585] mb-1 block">Database</label>
+                    <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
+                      {dbName}
+                    </div>
                   </div>
-                </div>
 
-                {/* Username */}
-                <div>
-                  <label className="text-xs text-[#858585] mb-1 block">Username</label>
-                  <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
-                    {username}
+                  {/* Username */}
+                  <div>
+                    <label className="text-xs text-[#858585] mb-1 block">Username</label>
+                    <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
+                      {username}
+                    </div>
                   </div>
-                </div>
 
-                {/* Password */}
-                <div>
-                  <label className="text-xs text-[#858585] mb-1 block">Password</label>
-                  <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
-                    {'•'.repeat(Math.min(password.length, 20))}
+                  {/* Password */}
+                  <div>
+                    <label className="text-xs text-[#858585] mb-1 block">Password</label>
+                    <div className="p-2.5 bg-[#3c3c3c] border border-[#3e3e42] rounded font-mono text-sm text-[#cccccc]">
+                      {'•'.repeat(Math.min(password.length, 20))}
+                    </div>
                   </div>
-                </div>
 
-                {/* Full Connection String */}
-                <ConnectionString connectionString={connectionString} />
-              </div>
+                  {/* Full Connection String */}
+                  <ConnectionString connectionString={connectionString} />
+                </div>
 
-              {/* Info Panel */}
-              <div className="p-4 bg-[#252526] border border-[#3e3e42] rounded">
-                <div className="flex items-start gap-2">
-                  <Info className="h-4 w-4 text-[#3794ff] mt-0.5 shrink-0" />
-                  <div className="space-y-1 text-xs text-[#858585]">
-                    <p>• Database is automatically provisioned with your sandbox</p>
-                    <p>• Managed by KubeBlocks with high availability</p>
-                    <p>• SSL encryption enabled by default</p>
-                    <p>• Connection string available via DATABASE_URL environment variable</p>
+                {/* Info Panel */}
+                <div className="p-4 bg-[#252526] border border-[#3e3e42] rounded">
+                  <div className="flex items-start gap-2">
+                    <Info className="h-4 w-4 text-[#3794ff] mt-0.5 shrink-0" />
+                    <div className="space-y-1 text-xs text-[#858585]">
+                      <p>• Database is automatically provisioned with your sandbox</p>
+                      <p>• Managed by KubeBlocks with high availability</p>
+                      <p>• SSL encryption enabled by default</p>
+                      <p>• Connection string available via DATABASE_URL environment variable</p>
+                    </div>
                   </div>
                 </div>
+              </>
+            ) : (
+              <div className="py-12 text-center">
+                <p className="text-sm text-[#858585]">No database configured</p>
+                <p className="text-xs text-[#858585] mt-1">
+                  Database will be automatically provisioned when sandbox is created
+                </p>
               </div>
-            </>
-          ) : (
-            <div className="py-12 text-center">
-              <p className="text-sm text-[#858585]">No database configured</p>
-              <p className="text-xs text-[#858585] mt-1">
-                Database will be automatically provisioned when sandbox is created
-              </p>
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </ConfigLayout>
   );
 }
diff --git a/components/config/config-layout.tsx b/components/config/config-layout.tsx
index 6df82d4..6e45792 100644
--- a/components/config/config-layout.tsx
+++ b/components/config/config-layout.tsx
@@ -9,6 +9,7 @@ import type { ReactNode } from 'react';
 
 import { Spinner } from '@/components/ui/spinner';
 
+
 interface ConfigLayoutProps {
   /** Page title */
   title: string;
@@ -26,29 +27,32 @@ interface ConfigLayoutProps {
 export function ConfigLayout({ title, description, children, loading }: ConfigLayoutProps) {
   if (loading) {
     return (
-      <div className="flex-1 flex items-center justify-center bg-[#1e1e1e]">
+      <div className="flex-1 flex items-center justify-center bg-background">
         <div className="flex items-center gap-3">
-          <Spinner className="h-5 w-5 text-[#3794ff]" />
-          <span className="text-sm text-[#cccccc]">Loading configuration...</span>
+          <Spinner className="h-5 w-5 text-primary" />
+          <span className="text-sm text-muted-foreground">Loading configuration...</span>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]">
-      {/* Header - Clean VSCode style */}
-      <div className="shrink-0 border-b border-[#3e3e42] bg-[#1e1e1e] px-6 py-4">
-        <div>
-          <h1 className="text-base font-medium text-[#cccccc]">{title}</h1>
-          <p className="text-xs text-[#858585] mt-0.5">{description}</p>
+    <div className="flex-1 p-8 sm:p-12 overflow-y-auto">
+      <div className="max-w-4xl mx-auto w-full animate-fade-in-up">
+        {/* Header - Clean VSCode style */}
+        <div className="flex items-center gap-4 mb-8">
+            <div>
+              <h1 className="text-3xl font-bold text-vscode-heading">{title}</h1>
+              <p className="text-vscode-fg/60 mt-1">{description}</p>
+            </div>
         </div>
-      </div>
 
-      {/* Content - Scrollable area */}
-      <div className="flex-1 overflow-y-auto">
-        <div className="max-w-4xl mx-auto p-6">{children}</div>
+        {/* Content - Scrollable area */}
+        <div className="flex-1 overflow-y-auto">
+          {children}
+        </div>
       </div>
     </div>
+
   );
 }
diff --git a/components/sidebars/primary-sidebar.tsx b/components/sidebars/primary-sidebar.tsx
index 06e6f90..c7800c9 100644
--- a/components/sidebars/primary-sidebar.tsx
+++ b/components/sidebars/primary-sidebar.tsx
@@ -61,7 +61,7 @@ export default function PrimarySidebar({ currentProjectId }: PrimarySidebarProps
         {/* Home Link */}
         <Link
           href="/projects"
-          className="group flex items-center h-8 px-3 hover:bg-sidebar-accent transition-colors"
+          className="group flex items-center h-8 px-3 hover:bg-sidebar-accent/10 transition-colors"
         >
           <Home className="h-4 w-4 text-muted-foreground group-hover:text-sidebar-foreground shrink-0 transition-colors" />
           {isExpanded && (