diff --git a/apps/web/src/components/views/settings-view/SettingsView.tsx b/apps/web/src/components/views/settings-view/SettingsView.tsx
index 59badb783..ad2880ce6 100644
--- a/apps/web/src/components/views/settings-view/SettingsView.tsx
+++ b/apps/web/src/components/views/settings-view/SettingsView.tsx
@@ -12,7 +12,7 @@ export function SettingsView({ initialTab = 'profile' }: SettingsViewProps = {})
   );
 
   return (
-    <div className="flex flex-col gap-8 animate-fadeIn pb-20">
+    <div className="flex flex-col gap-8 animate-fadeIn pb-20 min-h-layout-page">
       <SettingsViewHeader />
 
       <SettingsViewTabs
diff --git a/apps/web/src/components/views/settings-view/SettingsViewContent.tsx b/apps/web/src/components/views/settings-view/SettingsViewContent.tsx
index 89a86dd80..1c6bbd9c9 100644
--- a/apps/web/src/components/views/settings-view/SettingsViewContent.tsx
+++ b/apps/web/src/components/views/settings-view/SettingsViewContent.tsx
@@ -29,7 +29,7 @@ export function SettingsViewContent({ activeTab }: SettingsViewContentProps) {
 
   if (activeTab === 'audio' || activeTab === 'notifications') {
     return (
-      <Card variant="default" className="min-h-layout-page-sm">
+      <Card variant="glass" className="min-h-layout-page-sm border-white/5 bg-black/20 backdrop-blur-xl">
         <div className="flex flex-col items-center justify-center h-full text-center animate-fadeIn py-24">
           <div className="w-20 h-20 rounded-full bg-muted flex items-center justify-center mb-6">
             {activeTab === 'audio' ? (
diff --git a/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx b/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx
index 5bc18407e..028573c1c 100644
--- a/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx
+++ b/apps/web/src/components/views/settings-view/SettingsViewHeader.tsx
@@ -1,12 +1,13 @@
 import React from 'react';
+import { Card } from '@/components/ui/card';
 
 export function SettingsViewHeader() {
   return (
-    <div>
-      <h2 className="text-3xl font-display font-bold text-white mb-2">SETTINGS</h2>
+    <Card variant="glass" className="p-6 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-300">
+      <h2 className="text-3xl font-display font-bold text-foreground mb-2">SETTINGS</h2>
       <p className="text-muted-foreground font-mono text-sm">
         Configure your studio, account, and preferences.
       </p>
-    </div>
+    </Card>
   );
 }
diff --git a/apps/web/src/components/views/settings-view/SettingsViewSkeleton.tsx b/apps/web/src/components/views/settings-view/SettingsViewSkeleton.tsx
index ea6fbd19c..13e3c292e 100644
--- a/apps/web/src/components/views/settings-view/SettingsViewSkeleton.tsx
+++ b/apps/web/src/components/views/settings-view/SettingsViewSkeleton.tsx
@@ -18,7 +18,7 @@ export function SettingsViewSkeleton() {
       </div>
 
       <div className="min-h-layout-page">
-        <Skeleton className="h-96 w-full rounded-xl" />
+        <Skeleton className="h-96 w-full rounded-[var(--radius-xl)]" />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/views/settings-view/SettingsViewTabs.tsx b/apps/web/src/components/views/settings-view/SettingsViewTabs.tsx
index b0edd63de..959226f83 100644
--- a/apps/web/src/components/views/settings-view/SettingsViewTabs.tsx
+++ b/apps/web/src/components/views/settings-view/SettingsViewTabs.tsx
@@ -14,7 +14,7 @@ export function SettingsViewTabs({
   tabs,
 }: SettingsViewTabsProps) {
   return (
-    <div className="border-b border-border">
+    <div className="border-b border-border bg-card/30 backdrop-blur-sm rounded-t-[var(--radius-xl)] px-2">
       <Tabs value={activeTab} onValueChange={onTabChange} className="pb-0">
         <TabsList className="bg-transparent border-none p-0">
           {tabs.map((tab) => (