diff --git a/src/components/admin/ConfigurationManager.tsx b/src/components/admin/ConfigurationManager.tsx
index ae3d4bc..0fdb74a 100644
--- a/src/components/admin/ConfigurationManager.tsx
+++ b/src/components/admin/ConfigurationManager.tsx
@@ -158,9 +158,12 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
 
     if (!config.isEditable) {
       return (
-        <div className="p-3 bg-gray-100 rounded-lg">
-          <p className="text-sm text-gray-600 font-mono">{config.configValue}</p>
-          <p className="text-xs text-gray-500 mt-1">This setting cannot be modified</p>
+        <div className="p-3 bg-slate-100 border border-slate-200 rounded-md">
+          <p className="text-sm text-slate-700 font-mono">{config.configValue}</p>
+          <p className="text-xs text-slate-500 mt-1.5 flex items-center gap-1">
+            <AlertCircle className="w-3 h-3" />
+            This setting cannot be modified
+          </p>
         </div>
       );
     }
@@ -168,10 +171,13 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
     switch (config.uiComponent || config.valueType.toLowerCase()) {
       case 'toggle':
         return (
-          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-            <span className="text-sm font-medium">
-              {currentValue === 'true' ? 'Enabled' : 'Disabled'}
-            </span>
+          <div className="flex items-center justify-between p-3 bg-slate-50 border border-slate-200 rounded-md hover:bg-slate-100 transition-colors">
+            <div className="flex items-center gap-2">
+              <div className={`w-2 h-2 rounded-full ${currentValue === 'true' ? 'bg-green-500' : 'bg-slate-400'}`}></div>
+              <span className={`text-sm font-medium ${currentValue === 'true' ? 'text-green-700' : 'text-slate-600'}`}>
+                {currentValue === 'true' ? 'Enabled' : 'Disabled'}
+              </span>
+            </div>
             <Switch
               checked={currentValue === 'true'}
               onCheckedChange={(checked) => 
@@ -187,10 +193,10 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
         const min = config.validationRules?.min || 0;
         const max = config.validationRules?.max || 100;
         return (
-          <div className="space-y-2">
+          <div className="space-y-3 p-3 bg-slate-50 border border-slate-200 rounded-md">
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">{numValue}%</span>
-              <span className="text-xs text-gray-500">Range: {min}-{max}</span>
+              <span className="text-lg font-semibold text-slate-900">{numValue}%</span>
+              <span className="text-xs text-slate-500 bg-slate-100 px-2 py-1 rounded-sm border border-slate-200">Range: {min}-{max}</span>
             </div>
             <Slider
               value={[numValue]}
@@ -213,7 +219,7 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
             disabled={isSaving}
             min={config.validationRules?.min}
             max={config.validationRules?.max}
-            className="font-mono"
+            className="font-mono border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-md transition-all shadow-sm"
           />
         );
 
@@ -226,7 +232,7 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
             value={currentValue}
             onChange={(e) => handleValueChange(config.configKey, e.target.value)}
             disabled={isSaving}
-            className="font-mono"
+            className="font-mono border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-md transition-all shadow-sm"
           />
         );
     }
@@ -289,11 +295,13 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
 
   if (configurations.length === 0) {
     return (
-      <Card>
+      <Card className="shadow-lg border-0 rounded-md">
         <CardContent className="p-12 text-center">
-          <Settings className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-          <p className="text-gray-600">No configurations found</p>
-          <p className="text-sm text-gray-500 mt-2">
+          <div className="p-4 bg-slate-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
+            <Settings className="w-10 h-10 text-slate-400" />
+          </div>
+          <p className="text-slate-700 font-medium text-lg">No configurations found</p>
+          <p className="text-sm text-slate-500 mt-2 max-w-md mx-auto">
             System configurations will appear here once they are initialized
           </p>
         </CardContent>
@@ -307,22 +315,26 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
     <div className="space-y-6">
       {/* Success Message */}
       {successMessage && (
-        <div className="p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
-          <CheckCircle className="w-5 h-5 text-green-600 shrink-0" />
-          <p className="text-sm text-green-800">{successMessage}</p>
+        <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-300 rounded-md shadow-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="p-1.5 bg-green-500 rounded-md">
+            <CheckCircle className="w-4 h-4 text-white shrink-0" />
+          </div>
+          <p className="text-sm font-medium text-green-900">{successMessage}</p>
         </div>
       )}
 
       {/* Error Message */}
       {error && (
-        <div className="p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
-          <AlertCircle className="w-5 h-5 text-red-600 shrink-0" />
-          <p className="text-sm text-red-800">{error}</p>
+        <div className="p-4 bg-gradient-to-r from-red-50 to-rose-50 border border-red-300 rounded-md shadow-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="p-1.5 bg-red-500 rounded-md">
+            <AlertCircle className="w-4 h-4 text-white shrink-0" />
+          </div>
+          <p className="text-sm font-medium text-red-900">{error}</p>
           <Button 
             size="sm" 
             variant="ghost" 
             onClick={() => setError(null)}
-            className="ml-auto"
+            className="ml-auto hover:bg-red-100"
           >
             Dismiss
           </Button>
@@ -331,58 +343,64 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
 
       {/* Configurations by Category */}
       <Tabs defaultValue={categories[0]} className="w-full">
-        <TabsList className="grid w-full" style={{ gridTemplateColumns: `repeat(${Math.min(categories.length, 5)}, 1fr)` }}>
+        <TabsList className="flex flex-wrap w-full bg-slate-100/80 backdrop-blur-sm p-1 gap-1 rounded-md h-auto border border-slate-200 shadow-sm">
           {categories.map(category => (
-            <TabsTrigger key={category} value={category} className="text-xs sm:text-sm">
-              {category.replace(/_/g, ' ')}
+            <TabsTrigger 
+              key={category} 
+              value={category} 
+              className="flex-1 min-w-[120px] text-[10px] xs:text-xs sm:text-sm font-medium py-2 sm:py-2.5 px-2 sm:px-3 rounded-sm data-[state=active]:bg-white data-[state=active]:shadow-sm data-[state=active]:text-slate-900 transition-all"
+            >
+              <span className="truncate block">
+                {category.replace(/_/g, ' ')}
+              </span>
             </TabsTrigger>
           ))}
         </TabsList>
 
         {categories.map(category => (
           <TabsContent key={category} value={category} className="space-y-4 mt-6">
-            <Card>
-              <CardHeader className="pb-4">
+            <Card className="shadow-lg border-0 rounded-md">
+              <CardHeader className="pb-4 border-b border-slate-100">
                 <div className="flex items-center gap-3">
-                  <div className={`p-3 rounded-lg ${getCategoryColor(category)}`}>
+                  <div className={`p-2.5 rounded-md shadow-sm ${getCategoryColor(category)}`}>
                     {getCategoryIcon(category)}
                   </div>
                   <div>
-                    <CardTitle className="text-lg">
+                    <CardTitle className="text-lg font-semibold text-slate-900">
                       {category.replace(/_/g, ' ')}
                     </CardTitle>
-                    <CardDescription>
-                      {groupedConfigs[category].length} setting{groupedConfigs[category].length !== 1 ? 's' : ''}
+                    <CardDescription className="text-sm">
+                      {groupedConfigs[category].length} setting{groupedConfigs[category].length !== 1 ? 's' : ''} available
                     </CardDescription>
                   </div>
                 </div>
               </CardHeader>
               <CardContent className="space-y-6">
                 {groupedConfigs[category].map(config => (
-                  <div key={config.configKey} className="space-y-3 pb-6 border-b last:border-b-0 last:pb-0">
+                  <div key={config.configKey} className="space-y-3 pb-6 border-b border-slate-100 last:border-b-0 last:pb-0 hover:bg-slate-50/50 -mx-6 px-6 py-4 rounded-md transition-colors">
                     <div className="flex items-start justify-between gap-4">
                       <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-1">
-                          <Label className="text-sm font-semibold text-gray-900">
+                        <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+                          <Label className="text-sm font-semibold text-slate-900">
                             {config.displayName}
                           </Label>
                           {hasChanges(config) && (
-                            <Badge variant="outline" className="text-xs bg-yellow-50 text-yellow-700 border-yellow-300">
+                            <Badge variant="outline" className="text-xs bg-gradient-to-r from-yellow-50 to-amber-50 text-yellow-800 border-yellow-400 font-medium shadow-sm">
                               Modified
                             </Badge>
                           )}
                           {config.requiresRestart && (
-                            <Badge variant="outline" className="text-xs bg-orange-50 text-orange-700 border-orange-300">
+                            <Badge variant="outline" className="text-xs bg-gradient-to-r from-orange-50 to-red-50 text-orange-800 border-orange-400 font-medium shadow-sm">
                               Requires Restart
                             </Badge>
                           )}
                         </div>
                         {config.description && (
-                          <p className="text-xs text-gray-600 mt-1">{config.description}</p>
+                          <p className="text-xs text-slate-600 mt-1 leading-relaxed">{config.description}</p>
                         )}
                         {config.defaultValue && (
-                          <p className="text-xs text-gray-500 mt-1">
-                            Default: <code className="px-1.5 py-0.5 bg-gray-100 rounded">{config.defaultValue}</code>
+                          <p className="text-xs text-slate-500 mt-2">
+                            Default: <code className="px-2 py-0.5 bg-slate-100 text-slate-700 rounded-sm font-mono text-xs border border-slate-200">{config.defaultValue}</code>
                           </p>
                         )}
                       </div>
@@ -391,12 +409,12 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
                     {renderConfigInput(config)}
 
                     {config.isEditable && (
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-2 flex-wrap">
                         <Button
                           size="sm"
                           onClick={() => handleSave(config)}
                           disabled={!hasChanges(config) || saving === config.configKey}
-                          className="gap-2"
+                          className="gap-2 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                           {saving === config.configKey ? (
                             <>
@@ -406,7 +424,7 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
                           ) : (
                             <>
                               <Save className="w-4 h-4" />
-                              Save
+                              Save Changes
                             </>
                           )}
                         </Button>
@@ -416,7 +434,7 @@ export function ConfigurationManager({ onConfigUpdate }: ConfigurationManagerPro
                             variant="outline"
                             onClick={() => handleReset(config)}
                             disabled={saving === config.configKey}
-                            className="gap-2"
+                            className="gap-2 border-slate-300 hover:bg-slate-50 hover:border-slate-400 shadow-sm"
                           >
                             <RotateCcw className="w-4 h-4" />
                             Reset to Default
diff --git a/src/components/admin/HolidayManager.tsx b/src/components/admin/HolidayManager.tsx
index 45246d5..8e3ef0d 100644
--- a/src/components/admin/HolidayManager.tsx
+++ b/src/components/admin/HolidayManager.tsx
@@ -135,13 +135,13 @@ export function HolidayManager() {
   const getTypeColor = (type: Holiday['holidayType']) => {
     switch (type) {
       case 'NATIONAL':
-        return 'bg-red-100 text-red-800 border-red-200';
+        return 'bg-gradient-to-r from-red-50 to-rose-50 text-red-800 border-red-300';
       case 'REGIONAL':
-        return 'bg-blue-100 text-blue-800 border-blue-200';
+        return 'bg-gradient-to-r from-blue-50 to-cyan-50 text-blue-800 border-blue-300';
       case 'ORGANIZATIONAL':
-        return 'bg-purple-100 text-purple-800 border-purple-200';
+        return 'bg-gradient-to-r from-purple-50 to-violet-50 text-purple-800 border-purple-300';
       case 'OPTIONAL':
-        return 'bg-gray-100 text-gray-800 border-gray-200';
+        return 'bg-gradient-to-r from-slate-50 to-gray-50 text-slate-700 border-slate-300';
     }
   };
 
@@ -168,22 +168,26 @@ export function HolidayManager() {
     <div className="space-y-6">
       {/* Success Message */}
       {successMessage && (
-        <div className="p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
-          <CheckCircle className="w-5 h-5 text-green-600 shrink-0" />
-          <p className="text-sm text-green-800">{successMessage}</p>
+        <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-300 rounded-md shadow-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="p-1.5 bg-green-500 rounded-md">
+            <CheckCircle className="w-4 h-4 text-white shrink-0" />
+          </div>
+          <p className="text-sm font-medium text-green-900">{successMessage}</p>
         </div>
       )}
 
       {/* Error Message */}
       {error && (
-        <div className="p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
-          <AlertCircle className="w-5 h-5 text-red-600 shrink-0" />
-          <p className="text-sm text-red-800">{error}</p>
+        <div className="p-4 bg-gradient-to-r from-red-50 to-rose-50 border border-red-300 rounded-md shadow-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-2 duration-300">
+          <div className="p-1.5 bg-red-500 rounded-md">
+            <AlertCircle className="w-4 h-4 text-white shrink-0" />
+          </div>
+          <p className="text-sm font-medium text-red-900">{error}</p>
           <Button 
             size="sm" 
             variant="ghost" 
             onClick={() => setError(null)}
-            className="ml-auto"
+            className="ml-auto hover:bg-red-100"
           >
             Dismiss
           </Button>
@@ -191,26 +195,26 @@ export function HolidayManager() {
       )}
 
       {/* Header */}
-      <Card>
-        <CardHeader>
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <Card className="shadow-lg border-0 rounded-md">
+        <CardHeader className="border-b border-slate-100 py-4 sm:py-5">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
             <div className="flex items-center gap-3">
-              <div className="p-3 bg-blue-100 rounded-lg">
-                <Calendar className="w-6 h-6 text-blue-600" />
+              <div className="p-2.5 bg-gradient-to-br from-blue-500 to-blue-600 rounded-md shadow-md">
+                <Calendar className="w-5 h-5 text-white" />
               </div>
               <div>
-                <CardTitle className="text-xl">Holiday Calendar</CardTitle>
-                <CardDescription>
+                <CardTitle className="text-lg sm:text-xl font-semibold text-slate-900">Holiday Calendar</CardTitle>
+                <CardDescription className="text-sm">
                   Manage organization holidays for TAT calculations
                 </CardDescription>
               </div>
             </div>
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
               <Select value={selectedYear.toString()} onValueChange={(v) => setSelectedYear(parseInt(v))}>
-                <SelectTrigger className="w-32">
+                <SelectTrigger className="w-24 sm:w-32 border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-md transition-all shadow-sm">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent className="rounded-md">
                   {years.map(year => (
                     <SelectItem key={year} value={year.toString()}>
                       {year}
@@ -218,9 +222,13 @@ export function HolidayManager() {
                   ))}
                 </SelectContent>
               </Select>
-              <Button onClick={handleAdd} className="gap-2">
+              <Button 
+                onClick={handleAdd} 
+                className="gap-2 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 shadow-sm flex-1 sm:flex-initial"
+              >
                 <Plus className="w-4 h-4" />
-                Add Holiday
+                <span className="hidden xs:inline">Add Holiday</span>
+                <span className="xs:hidden">Add</span>
               </Button>
             </div>
           </div>
@@ -233,69 +241,83 @@ export function HolidayManager() {
           <Loader2 className="w-8 h-8 animate-spin text-gray-400" />
         </div>
       ) : holidays.length === 0 ? (
-        <Card>
+        <Card className="shadow-lg border-0 rounded-md">
           <CardContent className="p-12 text-center">
-            <Calendar className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-            <p className="text-gray-600">No holidays found for {selectedYear}</p>
-            <Button onClick={handleAdd} variant="outline" className="mt-4 gap-2">
+            <div className="p-4 bg-slate-100 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4">
+              <Calendar className="w-10 h-10 text-slate-400" />
+            </div>
+            <p className="text-slate-700 font-medium text-lg">No holidays found for {selectedYear}</p>
+            <p className="text-sm text-slate-500 mt-2 mb-6">Add holidays to exclude them from TAT calculations</p>
+            <Button 
+              onClick={handleAdd} 
+              variant="outline" 
+              className="gap-2 border-slate-300 hover:bg-slate-50 hover:border-slate-400 shadow-sm"
+            >
               <Plus className="w-4 h-4" />
               Add First Holiday
             </Button>
           </CardContent>
         </Card>
       ) : (
-        <div className="space-y-6">
+        <div className="space-y-4 sm:space-y-6">
           {sortedMonths.map(month => (
-            <Card key={month}>
-              <CardHeader className="pb-4">
-                <CardTitle className="text-lg">{month} {selectedYear}</CardTitle>
-                <CardDescription>
-                  {holidaysByMonth[month].length} holiday{holidaysByMonth[month].length !== 1 ? 's' : ''}
-                </CardDescription>
+            <Card key={month} className="shadow-lg border-0 rounded-md">
+              <CardHeader className="pb-3 sm:pb-4 border-b border-slate-100">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle className="text-base sm:text-lg font-semibold text-slate-900">{month} {selectedYear}</CardTitle>
+                    <CardDescription className="text-xs sm:text-sm">
+                      {holidaysByMonth[month].length} holiday{holidaysByMonth[month].length !== 1 ? 's' : ''}
+                    </CardDescription>
+                  </div>
+                  <div className="p-2 bg-blue-50 rounded-md">
+                    <Calendar className="w-4 h-4 text-blue-600" />
+                  </div>
+                </div>
               </CardHeader>
-              <CardContent className="space-y-3">
+              <CardContent className="space-y-3 pt-4">
                 {holidaysByMonth[month].map(holiday => (
                   <div 
                     key={holiday.holidayId}
-                    className="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
+                    className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 p-3 sm:p-4 bg-slate-50 border border-slate-200 rounded-md hover:bg-slate-100 hover:border-slate-300 transition-all shadow-sm"
                   >
-                    <div className="flex-1">
-                      <div className="flex items-center gap-3 mb-2">
-                        <p className="font-semibold text-gray-900">{holiday.holidayName}</p>
-                        <Badge variant="outline" className={getTypeColor(holiday.holidayType)}>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-2 flex-wrap">
+                        <p className="font-semibold text-slate-900 text-sm sm:text-base truncate">{holiday.holidayName}</p>
+                        <Badge variant="outline" className={`${getTypeColor(holiday.holidayType)} text-[10px] sm:text-xs font-medium shadow-sm`}>
                           {holiday.holidayType}
                         </Badge>
                         {holiday.isRecurring && (
-                          <Badge variant="outline" className="bg-indigo-50 text-indigo-700 border-indigo-200">
+                          <Badge variant="outline" className="bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 border-indigo-300 text-[10px] sm:text-xs font-medium shadow-sm">
                             Recurring
                           </Badge>
                         )}
                       </div>
-                      <p className="text-sm text-gray-600">
+                      <p className="text-xs sm:text-sm text-slate-600 font-medium">
                         {formatDateShort(holiday.holidayDate)}
                       </p>
                       {holiday.description && (
-                        <p className="text-xs text-gray-500 mt-1">{holiday.description}</p>
+                        <p className="text-xs text-slate-500 mt-1.5 line-clamp-2">{holiday.description}</p>
                       )}
                     </div>
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 sm:gap-2 self-end sm:self-auto">
                       <Button
                         size="sm"
                         variant="ghost"
                         onClick={() => handleEdit(holiday)}
-                        className="gap-2"
+                        className="gap-1.5 hover:bg-blue-50 border border-transparent hover:border-blue-200 text-xs sm:text-sm"
                       >
-                        <Edit2 className="w-4 h-4" />
-                        Edit
+                        <Edit2 className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                        <span className="hidden xs:inline">Edit</span>
                       </Button>
                       <Button
                         size="sm"
                         variant="ghost"
                         onClick={() => handleDelete(holiday)}
-                        className="gap-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+                        className="gap-1.5 text-red-600 hover:text-red-700 hover:bg-red-50 border border-transparent hover:border-red-200 text-xs sm:text-sm"
                       >
-                        <Trash2 className="w-4 h-4" />
-                        Delete
+                        <Trash2 className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                        <span className="hidden xs:inline">Delete</span>
                       </Button>
                     </div>
                   </div>
@@ -308,59 +330,62 @@ export function HolidayManager() {
 
       {/* Add/Edit Dialog */}
       <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
-        <DialogContent className="sm:max-w-[500px]">
+        <DialogContent className="sm:max-w-[500px] rounded-md">
           <DialogHeader>
-            <DialogTitle>
+            <DialogTitle className="text-lg sm:text-xl font-semibold text-slate-900">
               {editingHoliday ? 'Edit Holiday' : 'Add New Holiday'}
             </DialogTitle>
-            <DialogDescription>
+            <DialogDescription className="text-sm text-slate-600">
               {editingHoliday ? 'Update holiday information' : 'Add a new holiday to the calendar'}
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4 py-4">
             <div className="space-y-2">
-              <Label htmlFor="date">Date *</Label>
+              <Label htmlFor="date" className="text-sm font-medium text-slate-900">Date *</Label>
               <Input
                 id="date"
                 type="date"
                 value={formData.holidayDate}
                 onChange={(e) => setFormData({ ...formData, holidayDate: e.target.value })}
+                className="border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-md transition-all shadow-sm"
               />
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="name">Holiday Name *</Label>
+              <Label htmlFor="name" className="text-sm font-medium text-slate-900">Holiday Name *</Label>
               <Input
                 id="name"
                 placeholder="e.g., Diwali, Republic Day"
                 value={formData.holidayName}
                 onChange={(e) => setFormData({ ...formData, holidayName: e.target.value })}
+                className="border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-md transition-all shadow-sm"
               />
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="description">Description</Label>
+              <Label htmlFor="description" className="text-sm font-medium text-slate-900">Description</Label>
               <Input
                 id="description"
                 placeholder="Optional description"
                 value={formData.description}
                 onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                className="border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-md transition-all shadow-sm"
               />
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="type">Holiday Type</Label>
+              <Label htmlFor="type" className="text-sm font-medium text-slate-900">Holiday Type</Label>
               <Select 
                 value={formData.holidayType} 
                 onValueChange={(value: Holiday['holidayType']) => 
                   setFormData({ ...formData, holidayType: value })
                 }
               >
-                <SelectTrigger id="type">
+                <SelectTrigger id="type" className="border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 rounded-md transition-all shadow-sm">
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent className="rounded-md">
                   <SelectItem value="NATIONAL">National</SelectItem>
                   <SelectItem value="REGIONAL">Regional</SelectItem>
                   <SelectItem value="ORGANIZATIONAL">Organizational</SelectItem>
@@ -369,25 +394,32 @@ export function HolidayManager() {
               </Select>
             </div>
 
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center gap-2 p-3 bg-slate-50 border border-slate-200 rounded-md hover:bg-slate-100 transition-colors">
               <input
                 type="checkbox"
                 id="recurring"
                 checked={formData.isRecurring}
                 onChange={(e) => setFormData({ ...formData, isRecurring: e.target.checked })}
-                className="rounded border-gray-300"
+                className="rounded border-slate-300 text-blue-600 focus:ring-2 focus:ring-blue-500/20 focus:ring-offset-0 w-4 h-4 cursor-pointer"
               />
-              <Label htmlFor="recurring" className="font-normal cursor-pointer">
+              <Label htmlFor="recurring" className="font-normal cursor-pointer text-sm text-slate-700">
                 This holiday recurs annually
               </Label>
             </div>
           </div>
 
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setShowAddDialog(false)}>
+          <DialogFooter className="gap-2">
+            <Button 
+              variant="outline" 
+              onClick={() => setShowAddDialog(false)}
+              className="border-slate-300 hover:bg-slate-50 hover:border-slate-400 shadow-sm"
+            >
               Cancel
             </Button>
-            <Button onClick={handleSave}>
+            <Button 
+              onClick={handleSave}
+              className="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 shadow-sm"
+            >
               {editingHoliday ? 'Update' : 'Add'} Holiday
             </Button>
           </DialogFooter>
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
index 01087e3..f580f94 100644
--- a/src/pages/Settings/Settings.tsx
+++ b/src/pages/Settings/Settings.tsx
@@ -18,73 +18,207 @@ import { HolidayManager } from '@/components/admin/HolidayManager';
 
 export function Settings() {
   const { user } = useAuth();
+  const isAdmin = (user as any)?.isAdmin;
+
   return (
-    <div className="space-y-6 max-w-7xl mx-auto">
-      {/* Header Card */}
-      <Card className="relative overflow-hidden shadow-xl border-0">
-        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
-        
-        <CardContent className="relative z-10 p-8 lg:p-12">
-          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
-            <div className="text-white">
-              <div className="flex items-center gap-4 mb-4">
-                <div className="w-16 h-16 bg-yellow-400 rounded-xl flex items-center justify-center shadow-lg">
-                  <SettingsIcon className="w-8 h-8 text-slate-900" />
-                </div>
-                <div>
-                  <h1 className="text-3xl font-bold mb-2 text-white">Settings</h1>
-                  <p className="text-lg text-gray-200">Manage your account settings and preferences</p>
-                </div>
+    <div className="min-h-screen pb-8">
+      <div className="max-w-7xl mx-auto space-y-6">
+        {/* Header Card */}
+        <Card className="relative overflow-hidden shadow-2xl border-0 rounded-2xl">
+          <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
+          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-yellow-400/20 via-transparent to-transparent"></div>
+          
+          <CardContent className="relative z-10 p-6 sm:p-8 lg:p-12">
+            <div className="flex items-center gap-4 sm:gap-6">
+              <div className="w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-2xl flex items-center justify-center shadow-xl transform hover:scale-105 transition-transform">
+                <SettingsIcon className="w-7 h-7 sm:w-8 sm:h-8 text-slate-900" />
+              </div>
+              <div>
+                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-white mb-1 sm:mb-2">Settings</h1>
+                <p className="text-sm sm:text-base lg:text-lg text-gray-300">Manage your account and preferences</p>
               </div>
             </div>
-          </div>
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
 
-      {/* Check if user is admin */}
-      {(user as any)?.isAdmin ? (
-        <Tabs defaultValue="user" className="w-full">
-          <TabsList className="grid w-full grid-cols-3 mb-6">
-            <TabsTrigger value="user" className="flex items-center gap-2">
-              <SettingsIcon className="w-4 h-4" />
-              User Settings
-            </TabsTrigger>
-            <TabsTrigger value="system" className="flex items-center gap-2">
-              <Sliders className="w-4 h-4" />
-              System Configuration
-            </TabsTrigger>
-            <TabsTrigger value="holidays" className="flex items-center gap-2">
-              <Calendar className="w-4 h-4" />
-              Holiday Calendar
-            </TabsTrigger>
-          </TabsList>
+        {/* Tabs for Admin, Cards for Non-Admin */}
+        {isAdmin ? (
+          <Tabs defaultValue="user" className="w-full">
+            <TabsList className="grid w-full grid-cols-3 mb-8 bg-slate-100 p-1 rounded-xl h-auto">
+              <TabsTrigger 
+                value="user" 
+                className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
+              >
+                <SettingsIcon className="w-4 h-4" />
+                <span className="hidden sm:inline">User Settings</span>
+                <span className="sm:hidden">User</span>
+              </TabsTrigger>
+              <TabsTrigger 
+                value="system" 
+                className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
+              >
+                <Sliders className="w-4 h-4" />
+                <span className="hidden sm:inline">Configuration</span>
+                <span className="sm:hidden">Config</span>
+              </TabsTrigger>
+              <TabsTrigger 
+                value="holidays" 
+                className="flex items-center justify-center gap-2 py-3 rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-md transition-all"
+              >
+                <Calendar className="w-4 h-4" />
+                <span className="hidden sm:inline">Holidays</span>
+                <span className="sm:hidden">Holidays</span>
+              </TabsTrigger>
+            </TabsList>
 
-          {/* User Settings Tab */}
-          <TabsContent value="user" className="space-y-6">
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Fixed width container to prevent layout shifts */}
+            <div className="w-full min-h-[600px]">
+              {/* User Settings Tab */}
+              <TabsContent value="user" className="mt-0 space-y-0">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
+                  {/* Notification Settings */}
+                  <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
+                    <CardHeader className="pb-4">
+                      <div className="flex items-center gap-3">
+                        <div className="p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                          <Bell className="h-5 w-5 text-white" />
+                        </div>
+                        <div>
+                          <CardTitle className="text-lg font-semibold text-gray-900">Notifications</CardTitle>
+                          <CardDescription className="text-sm text-gray-600">Manage notification preferences</CardDescription>
+                        </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-4">
+                        <Button 
+                          onClick={async () => { 
+                            try { 
+                              await setupPushNotifications(); 
+                              alert('Notifications enabled'); 
+                            } catch (e) { 
+                              alert('Failed to enable notifications'); 
+                            } 
+                          }}
+                          className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-md hover:shadow-lg transition-all"
+                        >
+                          <Bell className="w-4 h-4 mr-2" />
+                          Enable Push Notifications
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Security Settings */}
+                  <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
+                    <CardHeader className="pb-4">
+                      <div className="flex items-center gap-3">
+                        <div className="p-3 bg-gradient-to-br from-red-500 to-red-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                          <Lock className="h-5 w-5 text-white" />
+                        </div>
+                        <div>
+                          <CardTitle className="text-lg font-semibold text-gray-900">Security</CardTitle>
+                          <CardDescription className="text-sm text-gray-600">Password and security settings</CardDescription>
+                        </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-4">
+                        <div className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200">
+                          <p className="text-sm text-gray-600 text-center">Security settings will be available soon</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Appearance Settings */}
+                  <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
+                    <CardHeader className="pb-4">
+                      <div className="flex items-center gap-3">
+                        <div className="p-3 bg-gradient-to-br from-purple-500 to-purple-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                          <Palette className="h-5 w-5 text-white" />
+                        </div>
+                        <div>
+                          <CardTitle className="text-lg font-semibold text-gray-900">Appearance</CardTitle>
+                          <CardDescription className="text-sm text-gray-600">Theme and display preferences</CardDescription>
+                        </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-4">
+                        <div className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200">
+                          <p className="text-sm text-gray-600 text-center">Appearance settings will be available soon</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* Preferences */}
+                  <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
+                    <CardHeader className="pb-4">
+                      <div className="flex items-center gap-3">
+                        <div className="p-3 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                          <Shield className="h-5 w-5 text-white" />
+                        </div>
+                        <div>
+                          <CardTitle className="text-lg font-semibold text-gray-900">Preferences</CardTitle>
+                          <CardDescription className="text-sm text-gray-600">Application preferences</CardDescription>
+                        </div>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="space-y-4">
+                        <div className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border border-gray-200">
+                          <p className="text-sm text-gray-600 text-center">User preferences will be available soon</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                </div>
+              </TabsContent>
+
+              {/* System Configuration Tab (Admin Only) */}
+              <TabsContent value="system" className="mt-0">
+                <ConfigurationManager />
+              </TabsContent>
+
+              {/* Holiday Calendar Tab (Admin Only) */}
+              <TabsContent value="holidays" className="mt-0">
+                <HolidayManager />
+              </TabsContent>
+            </div>
+          </Tabs>
+        ) : (
+          <>
+            {/* Non-Admin User Settings Only */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
               {/* Notification Settings */}
-              <Card className="shadow-lg hover:shadow-xl transition-shadow">
+              <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
                 <CardHeader className="pb-4">
                   <div className="flex items-center gap-3">
-                    <div className="p-3 bg-blue-100 rounded-lg">
-                      <Bell className="h-5 w-5 text-blue-600" />
+                    <div className="p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                      <Bell className="h-5 w-5 text-white" />
                     </div>
                     <div>
-                      <CardTitle className="text-lg text-gray-900">Notifications</CardTitle>
-                      <CardDescription className="text-gray-600">Manage notification preferences</CardDescription>
+                      <CardTitle className="text-lg font-semibold text-gray-900">Notifications</CardTitle>
+                      <CardDescription className="text-sm text-gray-600">Manage notification preferences</CardDescription>
                     </div>
                   </div>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-4">
-                    <Button onClick={async () => { 
-                      try { 
-                        await setupPushNotifications(); 
-                        alert('Notifications enabled'); 
-                      } catch (e) { 
-                        alert('Failed to enable notifications'); 
-                      } 
-                    }}>
+                    <Button 
+                      onClick={async () => { 
+                        try { 
+                          await setupPushNotifications(); 
+                          alert('Notifications enabled'); 
+                        } catch (e) { 
+                          alert('Failed to enable notifications'); 
+                        } 
+                      }}
+                      className="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-md hover:shadow-lg transition-all"
+                    >
+                      <Bell className="w-4 h-4 mr-2" />
                       Enable Push Notifications
                     </Button>
                   </div>
@@ -92,197 +226,89 @@ export function Settings() {
               </Card>
 
               {/* Security Settings */}
-              <Card className="shadow-lg hover:shadow-xl transition-shadow">
+              <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
                 <CardHeader className="pb-4">
                   <div className="flex items-center gap-3">
-                    <div className="p-3 bg-red-100 rounded-lg">
-                      <Lock className="h-5 w-5 text-red-600" />
+                    <div className="p-3 bg-gradient-to-br from-red-500 to-red-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                      <Lock className="h-5 w-5 text-white" />
                     </div>
                     <div>
-                      <CardTitle className="text-lg text-gray-900">Security</CardTitle>
-                      <CardDescription className="text-gray-600">Password and security settings</CardDescription>
+                      <CardTitle className="text-lg font-semibold text-gray-900">Security</CardTitle>
+                      <CardDescription className="text-sm text-gray-600">Password and security settings</CardDescription>
                     </div>
                   </div>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-4">
-                    <div className="p-4 bg-gray-50 rounded-lg">
-                      <p className="text-sm text-gray-600">Security settings will be available soon</p>
+                    <div className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200">
+                      <p className="text-sm text-gray-600 text-center">Security settings will be available soon</p>
                     </div>
                   </div>
                 </CardContent>
               </Card>
 
               {/* Appearance Settings */}
-              <Card className="shadow-lg hover:shadow-xl transition-shadow">
+              <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
                 <CardHeader className="pb-4">
                   <div className="flex items-center gap-3">
-                    <div className="p-3 bg-purple-100 rounded-lg">
-                      <Palette className="h-5 w-5 text-purple-600" />
+                    <div className="p-3 bg-gradient-to-br from-purple-500 to-purple-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                      <Palette className="h-5 w-5 text-white" />
                     </div>
                     <div>
-                      <CardTitle className="text-lg text-gray-900">Appearance</CardTitle>
-                      <CardDescription className="text-gray-600">Theme and display preferences</CardDescription>
+                      <CardTitle className="text-lg font-semibold text-gray-900">Appearance</CardTitle>
+                      <CardDescription className="text-sm text-gray-600">Theme and display preferences</CardDescription>
                     </div>
                   </div>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-4">
-                    <div className="p-4 bg-gray-50 rounded-lg">
-                      <p className="text-sm text-gray-600">Appearance settings will be available soon</p>
+                    <div className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200">
+                      <p className="text-sm text-gray-600 text-center">Appearance settings will be available soon</p>
                     </div>
                   </div>
                 </CardContent>
               </Card>
 
               {/* Preferences */}
-              <Card className="shadow-lg hover:shadow-xl transition-shadow">
+              <Card className="shadow-lg hover:shadow-xl transition-all duration-300 border-0 rounded-md group">
                 <CardHeader className="pb-4">
                   <div className="flex items-center gap-3">
-                    <div className="p-3 bg-emerald-100 rounded-lg">
-                      <Shield className="h-5 w-5 text-emerald-600" />
+                    <div className="p-3 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-md shadow-md group-hover:shadow-lg transition-shadow">
+                      <Shield className="h-5 w-5 text-white" />
                     </div>
                     <div>
-                      <CardTitle className="text-lg text-gray-900">Preferences</CardTitle>
-                      <CardDescription className="text-gray-600">Application preferences</CardDescription>
+                      <CardTitle className="text-lg font-semibold text-gray-900">Preferences</CardTitle>
+                      <CardDescription className="text-sm text-gray-600">Application preferences</CardDescription>
                     </div>
                   </div>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-4">
-                    <div className="p-4 bg-gray-50 rounded-lg">
-                      <p className="text-sm text-gray-600">User preferences will be available soon</p>
+                    <div className="p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-md border border-gray-200">
+                      <p className="text-sm text-gray-600 text-center">User preferences will be available soon</p>
                     </div>
                   </div>
                 </CardContent>
               </Card>
             </div>
-          </TabsContent>
 
-          {/* System Configuration Tab (Admin Only) */}
-          <TabsContent value="system">
-            <ConfigurationManager />
-          </TabsContent>
-
-          {/* Holiday Calendar Tab (Admin Only) */}
-          <TabsContent value="holidays">
-            <HolidayManager />
-          </TabsContent>
-        </Tabs>
-      ) : (
-        <>
-          {/* Non-Admin User Settings Only */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            {/* Notification Settings */}
-            <Card className="shadow-lg hover:shadow-xl transition-shadow">
-              <CardHeader className="pb-4">
-                <div className="flex items-center gap-3">
-                  <div className="p-3 bg-blue-100 rounded-lg">
-                    <Bell className="h-5 w-5 text-blue-600" />
+            {/* Info: Admin features not available */}
+            <Card className="shadow-xl border-0 rounded-md bg-gradient-to-br from-blue-50 to-blue-100/50">
+              <CardContent className="p-5 sm:p-6">
+                <div className="flex items-start sm:items-center gap-3 sm:gap-4">
+                  <div className="p-2 sm:p-2.5 bg-blue-500 rounded-lg shrink-0">
+                    <AlertCircle className="w-5 h-5 text-white" />
                   </div>
-                  <div>
-                    <CardTitle className="text-lg text-gray-900">Notifications</CardTitle>
-                    <CardDescription className="text-gray-600">Manage notification preferences</CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <Button onClick={async () => { 
-                    try { 
-                      await setupPushNotifications(); 
-                      alert('Notifications enabled'); 
-                    } catch (e) { 
-                      alert('Failed to enable notifications'); 
-                    } 
-                  }}>
-                    Enable Push Notifications
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Security Settings */}
-            <Card className="shadow-lg hover:shadow-xl transition-shadow">
-              <CardHeader className="pb-4">
-                <div className="flex items-center gap-3">
-                  <div className="p-3 bg-red-100 rounded-lg">
-                    <Lock className="h-5 w-5 text-red-600" />
-                  </div>
-                  <div>
-                    <CardTitle className="text-lg text-gray-900">Security</CardTitle>
-                    <CardDescription className="text-gray-600">Password and security settings</CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <div className="p-4 bg-gray-50 rounded-lg">
-                    <p className="text-sm text-gray-600">Security settings will be available soon</p>
+                  <div className="flex-1">
+                    <p className="text-sm font-semibold text-gray-900 mb-1">Admin Features Not Accessible</p>
+                    <p className="text-xs text-gray-700">System configuration and holiday management require admin privileges. Contact your administrator for access.</p>
                   </div>
                 </div>
               </CardContent>
             </Card>
-
-            {/* Appearance Settings */}
-            <Card className="shadow-lg hover:shadow-xl transition-shadow">
-              <CardHeader className="pb-4">
-                <div className="flex items-center gap-3">
-                  <div className="p-3 bg-purple-100 rounded-lg">
-                    <Palette className="h-5 w-5 text-purple-600" />
-                  </div>
-                  <div>
-                    <CardTitle className="text-lg text-gray-900">Appearance</CardTitle>
-                    <CardDescription className="text-gray-600">Theme and display preferences</CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <div className="p-4 bg-gray-50 rounded-lg">
-                    <p className="text-sm text-gray-600">Appearance settings will be available soon</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Preferences */}
-            <Card className="shadow-lg hover:shadow-xl transition-shadow">
-              <CardHeader className="pb-4">
-                <div className="flex items-center gap-3">
-                  <div className="p-3 bg-emerald-100 rounded-lg">
-                    <Shield className="h-5 w-5 text-emerald-600" />
-                  </div>
-                  <div>
-                    <CardTitle className="text-lg text-gray-900">Preferences</CardTitle>
-                    <CardDescription className="text-gray-600">Application preferences</CardDescription>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <div className="p-4 bg-gray-50 rounded-lg">
-                    <p className="text-sm text-gray-600">User preferences will be available soon</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Info: Admin features not available */}
-          <Card className="shadow-lg border-blue-200 bg-blue-50">
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3">
-                <AlertCircle className="w-5 h-5 text-blue-600 shrink-0" />
-                <div>
-                  <p className="text-sm font-medium text-gray-900">Admin features not accessible</p>
-                  <p className="text-xs text-gray-600 mt-1">System configuration and holiday management require admin privileges.</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </>
-      )}
+          </>
+        )}
+      </div>
     </div>
   );
 }