feat(ui): refine default frontend layouts

web/default/src/features/profile/components/passkey-card.tsx

@@ -15,7 +15,13 @@ import {
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { StatusBadge } from '@/components/status-badge'
 import { usePasskeyManagement } from '@/features/auth/passkey'
@@ -163,7 +169,7 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
 
   if (pageLoading || loading) {
     return (
-      <Card>
+      <Card className='overflow-hidden'>
         <CardHeader>
           <Skeleton className='h-6 w-48' />
           <Skeleton className='mt-2 h-4 w-64' />
@@ -185,18 +191,18 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
 
   return (
     <>
-      <Card>
+      <Card className='overflow-hidden'>
         <CardHeader>
-          <h3 className='text-xl font-semibold tracking-tight'>
+          <CardTitle className='text-xl tracking-tight'>
             {t('Passkey Login')}
-          </h3>
-          <p className='text-muted-foreground mt-2 text-sm'>
+          </CardTitle>
+          <CardDescription>
             {t('Use Passkey to sign in without entering your password.')}
-          </p>
+          </CardDescription>
         </CardHeader>
 
         <CardContent className='space-y-6'>
-          <div className='flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between'>
+          <div className='flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between xl:flex-col xl:items-stretch 2xl:flex-row 2xl:items-center'>
             <div className='flex items-start gap-3'>
               <div className='bg-muted rounded-md p-2'>
                 <KeyRound className='h-5 w-5' />
@@ -239,7 +245,7 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
 
             {!enabled ? (
               <Button
-                className='w-full sm:w-auto'
+                className='w-full sm:w-auto xl:w-full 2xl:w-auto'
                 onClick={handleRegister}
                 disabled={!supported || registering}
               >
@@ -253,7 +259,7 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
                 <AlertDialogTrigger asChild>
                   <Button
                     variant='outline'
-                    className='w-full sm:w-auto'
+                    className='w-full sm:w-auto xl:w-full 2xl:w-auto'
                     disabled={removing}
                   >
                     {t('Remove Passkey')}

web/default/src/features/profile/components/profile-header.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next'
+import { formatCompactNumber, formatQuota } from '@/lib/format'
 import { getRoleLabel } from '@/lib/roles'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -15,20 +17,34 @@ interface ProfileHeaderProps {
 }
 
 export function ProfileHeader({ profile, loading }: ProfileHeaderProps) {
+  const { t } = useTranslation()
+
   if (loading) {
     return (
-      <div className='space-y-6'>
-        <div className='flex flex-col items-center gap-4 text-center lg:flex-row lg:items-center lg:gap-6 lg:text-left'>
-          <Skeleton className='h-20 w-20 rounded-full' />
-          <div className='flex-1 space-y-3 lg:space-y-2'>
-            <div className='flex flex-col items-center gap-2 sm:flex-row sm:justify-center lg:justify-start'>
-              <Skeleton className='h-8 w-48' />
-              <Skeleton className='h-5 w-16' />
+      <div className='bg-card overflow-hidden rounded-2xl border'>
+        <div className='p-5 sm:p-6'>
+          <div className='flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between'>
+            <div className='flex flex-col items-center gap-4 text-center sm:flex-row sm:text-left'>
+              <Skeleton className='h-20 w-20 rounded-2xl' />
+              <div className='space-y-3'>
+                <div className='flex flex-col items-center gap-2 sm:flex-row sm:justify-start'>
+                  <Skeleton className='h-8 w-48' />
+                  <Skeleton className='h-5 w-16' />
+                </div>
+                <div className='flex flex-col items-center gap-1 sm:flex-row sm:justify-start sm:gap-4'>
+                  <Skeleton className='h-4 w-24' />
+                  <Skeleton className='h-4 w-40' />
+                  <Skeleton className='h-4 w-20' />
+                </div>
+              </div>
             </div>
-            <div className='flex flex-col items-center gap-1 sm:flex-row sm:justify-center sm:gap-4 lg:justify-start'>
-              <Skeleton className='h-4 w-24' />
-              <Skeleton className='h-4 w-40' />
-              <Skeleton className='h-4 w-20' />
+            <div className='grid gap-3 sm:grid-cols-3 lg:w-[480px]'>
+              {Array.from({ length: 3 }).map((_, i) => (
+                <div key={i} className='rounded-xl border p-4'>
+                  <Skeleton className='mb-3 h-3 w-20' />
+                  <Skeleton className='h-7 w-24' />
+                </div>
+              ))}
             </div>
           </div>
         </div>
@@ -41,38 +57,76 @@ export function ProfileHeader({ profile, loading }: ProfileHeaderProps) {
   const displayName = getDisplayName(profile)
   const initials = getUserInitials(profile)
   const roleLabel = getRoleLabel(profile.role)
+  const stats = [
+    {
+      label: t('Current Balance'),
+      value: formatQuota(profile.quota),
+    },
+    {
+      label: t('Total Usage'),
+      value: formatQuota(profile.used_quota),
+    },
+    {
+      label: t('API Requests'),
+      value: formatCompactNumber(profile.request_count),
+    },
+  ]
 
   return (
-    <div className='space-y-6'>
-      <div className='flex flex-col items-center gap-4 text-center lg:flex-row lg:items-center lg:gap-6 lg:text-left'>
-        <Avatar className='h-20 w-20 text-xl'>
-          <AvatarFallback className='bg-primary/10 text-primary'>
-            {initials}
-          </AvatarFallback>
-        </Avatar>
+    <div className='bg-card relative overflow-hidden rounded-2xl border'>
+      <div className='relative p-5 sm:p-6'>
+        <div className='flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between'>
+          <div className='flex flex-col items-center gap-4 text-center sm:flex-row sm:text-left'>
+            <Avatar className='ring-background h-20 w-20 rounded-2xl text-xl ring-4'>
+              <AvatarFallback className='bg-primary/10 text-primary rounded-2xl'>
+                {initials}
+              </AvatarFallback>
+            </Avatar>
 
-        <div className='flex-1 space-y-3 lg:space-y-2'>
-          <div className='flex flex-col items-center gap-2 sm:flex-row sm:justify-center lg:justify-start'>
-            <h1 className='text-3xl font-semibold tracking-tight'>
-              {displayName}
-            </h1>
-            <StatusBadge label={roleLabel} variant='neutral' copyable={false} />
+            <div className='min-w-0 flex-1 space-y-3'>
+              <div className='flex flex-col items-center gap-2 sm:flex-row sm:justify-start'>
+                <h1 className='text-2xl font-semibold tracking-tight sm:text-3xl'>
+                  {displayName}
+                </h1>
+                <StatusBadge
+                  label={roleLabel}
+                  variant='neutral'
+                  copyable={false}
+                />
+              </div>
+
+              <div className='text-muted-foreground flex flex-col gap-1 text-sm sm:flex-row sm:flex-wrap sm:justify-start sm:gap-4'>
+                <span>@{profile.username}</span>
+                {profile.email && (
+                  <>
+                    <span className='hidden sm:inline'>•</span>
+                    <span>{profile.email}</span>
+                  </>
+                )}
+                {profile.group && (
+                  <>
+                    <span className='hidden sm:inline'>•</span>
+                    <span>{profile.group}</span>
+                  </>
+                )}
+              </div>
+            </div>
           </div>
 
-          <div className='text-muted-foreground flex flex-col gap-1 text-sm sm:flex-row sm:flex-wrap sm:justify-center sm:gap-4 lg:justify-start'>
-            <span>@{profile.username}</span>
-            {profile.email && (
-              <>
-                <span className='hidden sm:inline'>•</span>
-                <span>{profile.email}</span>
-              </>
-            )}
-            {profile.group && (
-              <>
-                <span className='hidden sm:inline'>•</span>
-                <span>{profile.group}</span>
-              </>
-            )}
+          <div className='grid gap-3 sm:grid-cols-3 lg:w-[480px]'>
+            {stats.map((item) => (
+              <div
+                key={item.label}
+                className='bg-background/70 rounded-xl border p-4 backdrop-blur'
+              >
+                <p className='text-muted-foreground text-xs font-medium'>
+                  {item.label}
+                </p>
+                <p className='mt-2 truncate text-xl font-semibold tracking-tight'>
+                  {item.value}
+                </p>
+              </div>
+            ))}
           </div>
         </div>
       </div>

web/default/src/features/profile/components/profile-security-card.tsx

@@ -1,7 +1,13 @@
 import { Shield, Key, Trash2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useDialogs } from '@/hooks/use-dialog'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import type { UserProfile } from '../types'
 import { AccessTokenDialog } from './dialogs/access-token-dialog'
@@ -28,12 +34,12 @@ export function ProfileSecurityCard({
 
   if (loading) {
     return (
-      <Card>
-        <CardHeader>
+      <Card className='overflow-hidden'>
+        <CardHeader className='border-b'>
           <Skeleton className='h-6 w-32' />
           <Skeleton className='mt-2 h-4 w-48' />
         </CardHeader>
-        <CardContent className='space-y-3'>
+        <CardContent className='space-y-3 pt-6'>
           {Array.from({ length: 3 }).map((_, i) => (
             <Skeleton key={i} className='h-16 w-full' />
           ))}
@@ -70,18 +76,25 @@ export function ProfileSecurityCard({
 
   return (
     <>
-      <Card>
-        <CardHeader>
-          <h3 className='text-xl font-semibold tracking-tight'>
-            {t('Security')}
-          </h3>
-          <p className='text-muted-foreground mt-2 text-sm'>
-            {t('Manage your security settings and account access')}
-          </p>
+      <Card className='overflow-hidden'>
+        <CardHeader className='border-b'>
+          <div className='flex items-center gap-3'>
+            <div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
+              <Shield className='h-4 w-4' />
+            </div>
+            <div className='min-w-0'>
+              <CardTitle className='text-xl tracking-tight'>
+                {t('Security')}
+              </CardTitle>
+              <CardDescription>
+                {t('Manage your security settings and account access')}
+              </CardDescription>
+            </div>
+          </div>
         </CardHeader>
 
-        <CardContent>
-          <div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
+        <CardContent className='pt-6'>
+          <div className='grid grid-cols-1 gap-3 md:grid-cols-3'>
             {securityActions.map((item) => (
               <button
                 key={item.title}

web/default/src/features/profile/components/profile-settings-card.tsx

@@ -1,7 +1,13 @@
 import { useState } from 'react'
 import { Link2, Settings } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import type { UserProfile } from '../types'
@@ -28,12 +34,12 @@ export function ProfileSettingsCard({
 
   if (loading) {
     return (
-      <Card>
-        <CardHeader>
+      <Card className='overflow-hidden'>
+        <CardHeader className='border-b'>
           <Skeleton className='h-6 w-32' />
           <Skeleton className='mt-2 h-4 w-48' />
         </CardHeader>
-        <CardContent className='space-y-4'>
+        <CardContent className='space-y-4 pt-6'>
           <Skeleton className='h-10 w-full' />
           {Array.from({ length: 3 }).map((_, i) => (
             <Skeleton key={i} className='h-20 w-full' />
@@ -44,25 +50,38 @@ export function ProfileSettingsCard({
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <h3 className='text-xl font-semibold tracking-tight'>
-          {t('Settings')}
-        </h3>
-        <p className='text-muted-foreground mt-2 text-sm'>
-          {t('Configure your account preferences and integrations')}
-        </p>
+    <Card className='overflow-hidden'>
+      <CardHeader className='border-b'>
+        <div className='flex items-center gap-3'>
+          <div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
+            <Settings className='h-4 w-4' />
+          </div>
+          <div className='min-w-0'>
+            <CardTitle className='text-xl tracking-tight'>
+              {t('Settings')}
+            </CardTitle>
+            <CardDescription>
+              {t('Configure your account preferences and integrations')}
+            </CardDescription>
+          </div>
+        </div>
       </CardHeader>
 
-      <CardContent>
+      <CardContent className='pt-6'>
         <Tabs value={activeTab} onValueChange={setActiveTab}>
-          <TabsList className='grid w-full grid-cols-2'>
-            <TabsTrigger value='bindings' className='gap-2'>
+          <TabsList className='grid h-auto w-full grid-cols-2 gap-1 rounded-xl p-1'>
+            <TabsTrigger
+              value='bindings'
+              className='h-auto gap-2 rounded-lg px-3 py-2.5'
+            >
               <Link2 className='h-4 w-4' />
               <span className='hidden sm:inline'>{t('Account Bindings')}</span>
               <span className='sm:hidden'>{t('Bindings')}</span>
             </TabsTrigger>
-            <TabsTrigger value='settings' className='gap-2'>
+            <TabsTrigger
+              value='settings'
+              className='h-auto gap-2 rounded-lg px-3 py-2.5'
+            >
               <Settings className='h-4 w-4' />
               <span className='hidden sm:inline'>
                 {t('Settings & Preferences')}

web/default/src/features/profile/components/sidebar-modules-card.tsx

@@ -182,23 +182,32 @@ export function SidebarModulesCard() {
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className='flex items-center gap-2'>
-          <LayoutDashboard className='h-4 w-4' />
-          {t('Sidebar Personal Settings')}
-        </CardTitle>
-        <CardDescription>
-          {t('Customize sidebar display content')}
-        </CardDescription>
+    <Card className='overflow-hidden'>
+      <CardHeader className='border-b'>
+        <div className='flex items-center gap-3'>
+          <div className='bg-muted flex h-9 w-9 shrink-0 items-center justify-center rounded-lg'>
+            <LayoutDashboard className='h-4 w-4' />
+          </div>
+          <div className='min-w-0'>
+            <CardTitle className='text-xl tracking-tight'>
+              {t('Sidebar Personal Settings')}
+            </CardTitle>
+            <CardDescription>
+              {t('Customize sidebar display content')}
+            </CardDescription>
+          </div>
+        </div>
       </CardHeader>
-      <CardContent className='space-y-6'>
+      <CardContent className='space-y-5 pt-6'>
         {sectionDefs.map((section) => {
           const sectionEnabled = config[section.key]?.enabled !== false
           return (
-            <div key={section.key} className='space-y-3'>
-              <div className='bg-muted/50 flex items-center justify-between rounded-lg border p-3'>
-                <div>
+            <div
+              key={section.key}
+              className='bg-background/60 rounded-xl border p-3'
+            >
+              <div className='flex items-start justify-between gap-3'>
+                <div className='min-w-0'>
                   <p className='text-sm font-medium'>{section.title}</p>
                   <p className='text-muted-foreground text-xs'>
                     {section.description}
@@ -209,11 +218,11 @@ export function SidebarModulesCard() {
                   onCheckedChange={(v) => toggleSection(section.key, v)}
                 />
               </div>
-              <div className='grid grid-cols-2 gap-2 sm:grid-cols-3'>
+              <div className='mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-1'>
                 {section.modules.map((mod) => (
                   <div
                     key={mod.key}
-                    className={`flex items-center justify-between rounded-lg border p-3 transition-opacity ${
+                    className={`flex min-h-16 items-center justify-between rounded-lg border p-3 transition-opacity ${
                       sectionEnabled ? '' : 'opacity-50'
                     }`}
                   >
@@ -239,7 +248,7 @@ export function SidebarModulesCard() {
           )
         })}
 
-        <div className='flex justify-end gap-2 border-t pt-4'>
+        <div className='flex flex-col-reverse gap-2 border-t pt-4 sm:flex-row sm:justify-end'>
           <Button variant='outline' onClick={handleReset}>
             {t('Reset to Default')}
           </Button>

web/default/src/features/profile/components/tabs/account-bindings-tab.tsx

@@ -249,9 +249,9 @@ export function AccountBindingsTab({
         {bindings.map((binding) => (
           <div
             key={binding.id}
-            className='flex items-center justify-between rounded-lg border p-3'
+            className='flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between'
           >
-            <div className='flex items-center gap-3'>
+            <div className='flex min-w-0 items-center gap-3'>
               <div className='bg-muted shrink-0 rounded-md p-2'>
                 <binding.icon className='h-4 w-4' />
               </div>
@@ -274,7 +274,7 @@ export function AccountBindingsTab({
             <Button
               variant='outline'
               size='sm'
-              className='ml-2 h-7 shrink-0 px-2.5 text-xs'
+              className='h-7 shrink-0 self-start px-2.5 text-xs sm:self-auto'
               onClick={binding.onBind}
               disabled={binding.isBound && binding.id !== 'email'}
             >
@@ -304,9 +304,9 @@ export function AccountBindingsTab({
               return (
                 <div
                   key={provider.id}
-                  className='flex items-center justify-between rounded-lg border p-3'
+                  className='flex flex-col gap-3 rounded-lg border p-3 sm:flex-row sm:items-center sm:justify-between'
                 >
-                  <div className='flex items-center gap-3'>
+                  <div className='flex min-w-0 items-center gap-3'>
                     <div className='bg-muted shrink-0 rounded-md p-2'>
                       <Link2 className='h-4 w-4' />
                     </div>
@@ -332,7 +332,7 @@ export function AccountBindingsTab({
                     <Button
                       variant='ghost'
                       size='sm'
-                      className='text-destructive hover:text-destructive ml-2 h-7 shrink-0 px-2.5 text-xs'
+                      className='text-destructive hover:text-destructive h-7 shrink-0 self-start px-2.5 text-xs sm:self-auto'
                       onClick={() => setUnbindTarget(binding)}
                     >
                       <Unlink className='mr-1 h-3 w-3' />
@@ -342,7 +342,7 @@ export function AccountBindingsTab({
                     <Button
                       variant='outline'
                       size='sm'
-                      className='ml-2 h-7 shrink-0 px-2.5 text-xs'
+                      className='h-7 shrink-0 self-start px-2.5 text-xs sm:self-auto'
                       onClick={() => handleBindCustomOAuth(provider)}
                     >
                       {t('Bind')}

web/default/src/features/profile/components/tabs/notification-tab.tsx

@@ -132,7 +132,7 @@ export function NotificationTab({ profile, onUpdate }: NotificationTabProps) {
                   className='sr-only'
                 />
                 <Icon className='h-5 w-5' />
-                <span className='text-sm font-medium'>{method.label}</span>
+                <span className='text-sm font-medium'>{t(method.label)}</span>
               </Label>
             )
           })}
@@ -297,7 +297,7 @@ export function NotificationTab({ profile, onUpdate }: NotificationTabProps) {
 
         {/* Receive Upstream Model Update Notifications (admin only) */}
         {isAdmin && (
-          <div className='flex items-center justify-between rounded-lg border p-4'>
+          <div className='flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between'>
             <div className='space-y-0.5'>
               <Label htmlFor='upstreamModelUpdateNotify'>
                 {t('Receive Upstream Model Update Notifications')}
@@ -310,6 +310,7 @@ export function NotificationTab({ profile, onUpdate }: NotificationTabProps) {
             </div>
             <Switch
               id='upstreamModelUpdateNotify'
+              className='shrink-0'
               checked={settings.upstream_model_update_notify_enabled}
               onCheckedChange={(checked) =>
                 updateField('upstream_model_update_notify_enabled', checked)
@@ -319,7 +320,7 @@ export function NotificationTab({ profile, onUpdate }: NotificationTabProps) {
         )}
 
         {/* Accept Unset Model Price */}
-        <div className='flex items-center justify-between rounded-lg border p-4'>
+        <div className='flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between'>
           <div className='space-y-0.5'>
             <Label htmlFor='acceptUnsetPrice'>
               {t('Accept Unpriced Models')}
@@ -330,6 +331,7 @@ export function NotificationTab({ profile, onUpdate }: NotificationTabProps) {
           </div>
           <Switch
             id='acceptUnsetPrice'
+            className='shrink-0'
             checked={settings.accept_unset_model_ratio_model}
             onCheckedChange={(checked) =>
               updateField('accept_unset_model_ratio_model', checked)
@@ -338,7 +340,7 @@ export function NotificationTab({ profile, onUpdate }: NotificationTabProps) {
         </div>
 
         {/* Record IP Log */}
-        <div className='flex items-center justify-between rounded-lg border p-4'>
+        <div className='flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between'>
           <div className='space-y-0.5'>
             <Label htmlFor='recordIp'>{t('Record IP Address')}</Label>
             <p className='text-muted-foreground text-sm'>
@@ -347,6 +349,7 @@ export function NotificationTab({ profile, onUpdate }: NotificationTabProps) {
           </div>
           <Switch
             id='recordIp'
+            className='shrink-0'
             checked={settings.record_ip_log}
             onCheckedChange={(checked) => updateField('record_ip_log', checked)}
           />

web/default/src/features/profile/components/two-fa-card.tsx

@@ -2,7 +2,13 @@ import { Shield, AlertTriangle, RefreshCw } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useDialogs } from '@/hooks/use-dialog'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { StatusBadge } from '@/components/status-badge'
 import { useTwoFA } from '../hooks'
@@ -27,7 +33,7 @@ export function TwoFACard({ loading: pageLoading }: TwoFACardProps) {
 
   if (pageLoading || loading) {
     return (
-      <Card>
+      <Card className='overflow-hidden'>
         <CardHeader>
           <Skeleton className='h-6 w-48' />
           <Skeleton className='mt-2 h-4 w-64' />
@@ -41,20 +47,20 @@ export function TwoFACard({ loading: pageLoading }: TwoFACardProps) {
 
   return (
     <>
-      <Card>
+      <Card className='overflow-hidden'>
         <CardHeader>
-          <h3 className='text-xl font-semibold tracking-tight'>
+          <CardTitle className='text-xl tracking-tight'>
             {t('Two-Factor Authentication')}
-          </h3>
-          <p className='text-muted-foreground mt-2 text-sm'>
+          </CardTitle>
+          <CardDescription>
             {t('Add an extra layer of security to your account')}
-          </p>
+          </CardDescription>
         </CardHeader>
 
         <CardContent>
           <div className='space-y-6'>
             {/* Status Section */}
-            <div className='flex items-start justify-between'>
+            <div className='flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between xl:flex-col 2xl:flex-row'>
               <div className='flex items-start gap-4'>
                 <div className='bg-muted rounded-md p-2'>
                   <Shield className='h-5 w-5' />
@@ -97,7 +103,10 @@ export function TwoFACard({ loading: pageLoading }: TwoFACardProps) {
               </div>
 
               {!status.enabled && (
-                <Button onClick={() => dialogs.open('setup')}>
+                <Button
+                  className='w-full sm:w-auto xl:w-full 2xl:w-auto'
+                  onClick={() => dialogs.open('setup')}
+                >
                   {t('Enable')}
                 </Button>
               )}
@@ -105,7 +114,7 @@ export function TwoFACard({ loading: pageLoading }: TwoFACardProps) {
 
             {/* Actions Section - Only show when enabled */}
             {status.enabled && (
-              <div className='flex flex-col gap-3 border-t pt-6 sm:flex-row'>
+              <div className='flex flex-col gap-3 border-t pt-6 sm:flex-row xl:flex-col 2xl:flex-row'>
                 <Button
                   variant='outline'
                   className='flex-1'