diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index e42ad19..ae3c97b 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -79,7 +79,7 @@ define(['./workbox-21a80088'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "index.html",
-    "revision": "0.dkv277t7u3k"
+    "revision": "0.9ku5uov2tfg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/public/print.css b/public/print.css
index a408f81..02b8a48 100644
--- a/public/print.css
+++ b/public/print.css
@@ -1,5 +1,5 @@
-
 @media print {
+
   /* Reset margins and hide unnecessary elements */
   * {
     -webkit-print-color-adjust: exact !important;
@@ -13,6 +13,7 @@
     color: black !important;
     background: white !important;
   }
+
   .bg-gradient-to-br {
     background-image: none !important;
   }
@@ -164,11 +165,15 @@
   }
 
   /* Ensure proper spacing */
-  .space-y-4 > * + * {
+  .space-y-6>*+* {
+    margin-top: 18pt !important;
+  }
+
+  .space-y-4>*+* {
     margin-top: 12pt !important;
   }
 
-  .space-y-2 > * + * {
+  .space-y-2>*+* {
     margin-top: 6pt !important;
   }
 
@@ -186,4 +191,4 @@
     background: transparent !important;
     background-color: transparent !important;
   }
-}
+}
\ No newline at end of file
diff --git a/public/pwa.css b/public/pwa.css
index bfcb311..b020bce 100644
--- a/public/pwa.css
+++ b/public/pwa.css
@@ -51,6 +51,7 @@ button,
 
 /* Landscape mode optimizations */
 @media (orientation: landscape) and (max-height: 500px) {
+
   /* Compact header for landscape mobile */
   header {
     height: 48px;
@@ -65,6 +66,7 @@ button,
 
 /* Standalone mode specific styles (when app is installed) */
 @media (display-mode: standalone) {
+
   /* Add subtle indication that app is installed */
   body::before {
     content: "";
@@ -90,10 +92,11 @@ body {
 
 /* Improve button touch targets on mobile */
 @media (max-width: 768px) {
-  button:not(.icon-only) {
-    min-height: 44px;
-    padding: 0.75rem 1rem;
-  }
+  /* button:not(.icon-only) { */
+  /* min-height: 44px; */
+  /* min-width: 44px; */
+  /* padding: 0.75rem 1rem; */
+  /* } */
 
   /* Larger tap targets for icon buttons */
   button.icon-only {
@@ -108,9 +111,12 @@ body {
 }
 
 @keyframes pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     opacity: 1;
   }
+
   50% {
     opacity: 0.5;
   }
@@ -134,6 +140,7 @@ body {
 
 /* iOS specific fixes */
 @supports (-webkit-touch-callout: none) {
+
   /* Fix iOS safari bounce */
   body {
     position: fixed;
@@ -193,9 +200,10 @@ body {
 
 /* Android specific fixes */
 @media (max-width: 768px) {
+
   /* Prevent address bar from covering content */
   .mobile-viewport {
     min-height: 100vh;
     min-height: -webkit-fill-available;
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/ArchiveEditDialog.tsx b/src/components/ArchiveEditDialog.tsx
index 38ce391..ee7ee68 100644
--- a/src/components/ArchiveEditDialog.tsx
+++ b/src/components/ArchiveEditDialog.tsx
@@ -5,7 +5,7 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog';
-import { Callout } from '@radix-ui/themes';
+import { Callout } from '@/components/ui/callout';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -270,61 +270,62 @@ export const ArchiveEditDialog: React.FC<ArchiveEditDialogProps> = ({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-[90dvw] max-h-[90dvh] overflow-y-auto">
         <DialogHeader>
           <div className="flex items-center justify-between">
             <DialogTitle className="flex items-center space-x-2">
               <Calendar className="w-5 h-5 text-blue-600" />
               <span>{formatDate(day.startTime)}</span>
             </DialogTitle>
-            <div className="flex items-center space-x-2 my-4">
-              {!isEditing ? (
-                <>
-                  <Button
-                    onClick={handleRestoreDay}
-                    variant="ghost"
-                    size="sm"
-                    className="text-blue-600 hover:text-blue-700"
-                  >
-                    <RotateCcw className="w-4 h-4 mr-2" />
-                    Restore
-                  </Button>
-                  <Button
-                    onClick={() => setShowDeleteConfirm(true)}
-                    variant="destructive"
-                    size="sm"
-                  >
-                    <Trash2 className="w-4 h-4 mr-2" />
-                    Delete
-                  </Button>
-                  <Button
-                    onClick={() => setIsEditing(true)}
-                    variant="default"
-                    size="sm"
-                  >
-                    <Edit className="w-4 h-4 mr-2" />
-                    Edit
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Button onClick={handleCancel} variant="outline" size="sm">
-                    Cancel
-                  </Button>
-                  <Button onClick={handleSaveDay} size="sm">
-                    <Save className="w-4 h-4 mr-2" />
-                    Save
-                  </Button>
-                </>
-              )}
-            </div>
           </div>
+
         </DialogHeader>
 
-        <div className="space-y-6">
+        <div className="space-y-6 overflow-x-hidden">
+          <div className="flex flex-wrap justify-center sm:justify-end items-center gap-3 my-4">
+            {!isEditing ? (
+              <>
+                <Button
+                  onClick={handleRestoreDay}
+                  variant="outline"
+                  size="sm"
+                  className="text-blue-600 hover:text-blue-700"
+                >
+                  <RotateCcw className="w-4 h-4 mr-2" />
+                  Restore
+                </Button>
+                <Button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  variant="destructive"
+                  size="sm"
+                >
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  Delete
+                </Button>
+                <Button
+                  onClick={() => setIsEditing(true)}
+                  variant="default"
+                  size="sm"
+                >
+                  <Edit className="w-4 h-4 mr-2" />
+                  Edit
+                </Button>
+              </>
+            ) : (
+              <>
+                <Button onClick={handleCancel} variant="outline" size="sm">
+                  Cancel
+                </Button>
+                <Button onClick={handleSaveDay} size="sm">
+                  <Save className="w-4 h-4 mr-2" />
+                  Save
+                </Button>
+              </>
+            )}
+          </div>
           {/* Day Summary */}
           {isEditing && (
-            <Callout.Root size="1" variant="outline">
+            <Callout.Root size="1" variant="soft">
               <Callout.Icon>
                 <InfoCircledIcon />
               </Callout.Icon>
@@ -334,7 +335,7 @@ export const ArchiveEditDialog: React.FC<ArchiveEditDialogProps> = ({
               </Callout.Text>
             </Callout.Root>
           )}
-          <Card>
+          <Card style={{ marginBottom: '1rem' }}>
             <CardHeader>
               <CardTitle className="text-lg">Summary of Day</CardTitle>
             </CardHeader>
@@ -410,7 +411,7 @@ export const ArchiveEditDialog: React.FC<ArchiveEditDialogProps> = ({
                   </div>
                 </div>
               ) : (
-                <div className="grid grid-cols-2 gap-4 text-sm">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-8 text-sm">
                   <div>
                     <span className="font-medium text-gray-900">
                       Start Time:
@@ -458,95 +459,99 @@ export const ArchiveEditDialog: React.FC<ArchiveEditDialogProps> = ({
               <CardTitle className="text-lg">Tasks ({tasks.length})</CardTitle>
             </CardHeader>
             <CardContent>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Task</TableHead>
-                    <TableHead>Category</TableHead>
-                    <TableHead>Project</TableHead>
-                    <TableHead>Start Time</TableHead>
-                    <TableHead>End Time</TableHead>
-                    <TableHead>Duration</TableHead>
-                    {isEditing && <TableHead>Actions</TableHead>}
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {tasks.map((task) => {
-                    const category = categories.find(
-                      (c) => c.id === task.category
-                    );
-                    return (
-                      <TableRow key={task.id}>
-                        <TableCell className="font-medium">
-                          <div>
-                            <div>{task.title}</div>
-                            {task.description && (
-                              <div className="text-sm text-gray-500 mt-1">
-                                {task.description}
-                              </div>
-                            )}
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          {category && (
-                            <div className="flex items-center space-x-2">
-                              <div
-                                className="w-3 h-3 rounded-full"
-                                style={{ backgroundColor: category.color }}
-                              />
-                              <span className="text-sm">{category.name}</span>
+              <div className="overflow-x-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Task</TableHead>
+                      <TableHead>Category</TableHead>
+                      <TableHead>Project/Client</TableHead>
+                      <TableHead>Start Time</TableHead>
+                      <TableHead>End Time</TableHead>
+                      <TableHead>Duration</TableHead>
+                      {isEditing && <TableHead>Actions</TableHead>}
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {tasks.map((task) => {
+                      const category = categories.find(
+                        (c) => c.id === task.category
+                      );
+                      return (
+                        <TableRow key={task.id}>
+                          <TableCell className="font-medium">
+                            <div className="min-w-[150px]">
+                              <div>{task.title}</div>
+                              <span className="hidden lg:block">
+                                {task.description && (
+                                  <div className="text-sm text-gray-500 mt-1">
+                                    {task.description}
+                                  </div>
+                                )}
+                              </span>
                             </div>
-                          )}
-                        </TableCell>
-                        <TableCell>
-                          {task.project && (
-                            <div>
-                              <div className="text-sm font-medium">
-                                {task.project}
+                          </TableCell>
+                          <TableCell>
+                            {category && (
+                              <div className="flex items-center space-x-2 min-w-[120px]">
+                                <div
+                                  className="w-3 h-3 rounded-full"
+                                  style={{ backgroundColor: category.color }}
+                                />
+                                <span className="text-sm">{category.name}</span>
                               </div>
-                              {task.client && (
-                                <div className="text-xs text-gray-500">
-                                  {task.client}
-                                </div>
-                              )}
-                            </div>
-                          )}
-                        </TableCell>
-                        <TableCell>
-                          {formatTime12Hour(task.startTime)}
-                        </TableCell>
-                        <TableCell>
-                          {task.endTime ? formatTime12Hour(task.endTime) : '-'}
-                        </TableCell>
-                        <TableCell>
-                          {formatDuration(task.duration || 0)}
-                        </TableCell>
-                        {isEditing && (
+                            )}
+                          </TableCell>
                           <TableCell>
-                            <div className="flex space-x-2">
-                              <Button
-                                onClick={() => handleTaskEdit(task)}
-                                size="sm"
-                                variant="outline"
-                              >
-                                <Edit className="w-3 h-3" />
-                              </Button>
-                              <Button
-                                onClick={() => handleTaskDelete(task.id)}
-                                size="sm"
-                                variant="outline"
-                                className="text-red-600 hover:text-red-700"
-                              >
-                                <Trash2 className="w-3 h-3" />
-                              </Button>
-                            </div>
+                            {task.project && (
+                              <div className="min-w-[120px]">
+                                <div className="text-sm font-medium">
+                                  {task.project}
+                                </div>
+                                {task.client && (
+                                  <div className="text-xs text-gray-500">
+                                    {task.client}
+                                  </div>
+                                )}
+                              </div>
+                            )}
                           </TableCell>
-                        )}
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
+                          <TableCell className="whitespace-nowrap">
+                            {formatTime12Hour(task.startTime)}
+                          </TableCell>
+                          <TableCell className="whitespace-nowrap">
+                            {task.endTime ? formatTime12Hour(task.endTime) : '-'}
+                          </TableCell>
+                          <TableCell className="whitespace-nowrap">
+                            {formatDuration(task.duration || 0)}
+                          </TableCell>
+                          {isEditing && (
+                            <TableCell>
+                              <div className="flex space-x-2">
+                                <Button
+                                  onClick={() => handleTaskEdit(task)}
+                                  size="sm"
+                                  variant="outline"
+                                >
+                                  <Edit className="w-3 h-3" />
+                                </Button>
+                                <Button
+                                  onClick={() => handleTaskDelete(task.id)}
+                                  size="sm"
+                                  variant="outline"
+                                  className="text-red-600 hover:text-red-700"
+                                >
+                                  <Trash2 className="w-3 h-3" />
+                                </Button>
+                              </div>
+                            </TableCell>
+                          )}
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </div>
             </CardContent>
           </Card>
 
@@ -597,7 +602,7 @@ export const ArchiveEditDialog: React.FC<ArchiveEditDialogProps> = ({
           />
         )}
       </DialogContent>
-    </Dialog>
+    </Dialog >
   );
 };
 
diff --git a/src/components/ArchiveFilter.tsx b/src/components/ArchiveFilter.tsx
index 2921dee..eecab45 100644
--- a/src/components/ArchiveFilter.tsx
+++ b/src/components/ArchiveFilter.tsx
@@ -13,6 +13,7 @@ import {
 import { X, ChevronDown, ChevronUp } from 'lucide-react';
 import { Project } from '@/contexts/TimeTrackingContext';
 import { TaskCategory } from '@/config/categories';
+import { ResetIcon } from '@radix-ui/react-icons';
 
 export interface ArchiveFilterState {
   startDate: string;
@@ -37,7 +38,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
   projects,
   categories
 }) => {
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const handleReset = () => {
     onFilterChange({
@@ -53,7 +54,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
 
   return (
     <Card className="print:hidden">
-      <CardContent className="pt-6">
+      <CardContent className="p-4 md:p-6">
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <button
@@ -74,7 +75,7 @@ export const ArchiveFilter: React.FC<ArchiveFilterProps> = ({
               disabled={!isFilterActive}
               className="flex items-center space-x-2"
             >
-              <X className="w-4 h-4" />
+              <ResetIcon className="w-4 h-4" />
               <span>Reset</span>
             </Button>
           </div>
diff --git a/src/components/MobileNav.tsx b/src/components/MobileNav.tsx
index 41d0a02..4edaacf 100644
--- a/src/components/MobileNav.tsx
+++ b/src/components/MobileNav.tsx
@@ -15,16 +15,16 @@ export const MobileNav = memo(function MobileNav() {
       icon: Home,
       label: 'Home'
     },
-    {
-      path: '/archive',
-      icon: Archive,
-      label: 'Archive'
-    },
     {
       path: '/projectlist',
       icon: FolderKanban,
       label: 'Projects'
     },
+    {
+      path: '/archive',
+      icon: Archive,
+      label: 'Archive'
+    },
     {
       path: '/settings',
       icon: Settings,
@@ -44,11 +44,10 @@ export const MobileNav = memo(function MobileNav() {
           <Link
             key={path}
             to={path}
-            className={`flex flex-col items-center justify-center space-y-1 transition-colors touch-manipulation ${
-              isActive(path)
+            className={`flex flex-col items-center justify-center space-y-1 transition-colors touch-manipulation ${isActive(path)
                 ? 'text-primary'
                 : 'text-muted-foreground hover:text-foreground'
-            }`}
+              }`}
             aria-label={label}
             aria-current={isActive(path) ? 'page' : undefined}
           >
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index e0e290a..56c2c5f 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -43,85 +43,85 @@ const SiteNavigationMenu = () => {
 
   return (
     <>
-    <NavigationMenu className="relative bg-gradient-to-br from-gray-50 to-blue-50 print:hidden hidden md:block">
-      <List className="flex items-center justify-between px-8 py-4 m-0 list-none rounded-md bg-white p-1 shadow-sm">
-        <Item className="flex items-center justify-between">
-          <h1 className="text-2xl font-bold text-gray-900 flex">
-            <Link
-              to="/"
-              className="flex items-center text-gray-900 hover:text-blue-700"
-            >
-              <img src="favicon-96x96.png" alt="Logo" className="w-8 h-8 sm:mr-2" />
-              <span className="hidden sm:block">TimeTracker</span>
-            </Link>
-          </h1>
-          {isDayStarted && tasks.length > 0 && (
-            <span className="ml-4 text-lg text-gray-900 font-bold inline-flex">
-              <CalendarClock className="mr-1 text-gray-900" />
-              {formatDuration(runningTime)}
-            </span>
-          )}
-        </Item>
-        <div className="flex space-x-4">
-          <Item>
-            <SyncStatus
-              isAuthenticated={isAuthenticated}
-              lastSyncTime={lastSyncTime}
-              isSyncing={isSyncing}
-              hasUnsavedChanges={hasUnsavedChanges}
-              onRefresh={forceSyncToDatabase}
-            />
+      <NavigationMenu className="relative bg-gradient-to-br from-gray-50 to-blue-50 print:hidden block">
+        <List className="flex items-center justify-between px-4 py-2 md:px-8 md:py-4 m-0 list-none rounded-md bg-white p-1 shadow-sm">
+          <Item className="flex items-center justify-between">
+            <h1 className="text-2xl font-bold text-gray-900 flex">
+              <Link
+                to="/"
+                className="flex items-center text-gray-900 hover:text-blue-700"
+              >
+                <img src="favicon-96x96.png" alt="Logo" className="w-8 h-8 sm:mr-2" />
+                <span className="hidden lg:block">TimeTracker</span>
+              </Link>
+            </h1>
+            {isDayStarted && tasks.length > 0 && (
+              <span className="ml-4 text-lg text-gray-900 font-bold inline-flex">
+                <CalendarClock className="mr-1 text-gray-900" />
+                {formatDuration(runningTime)}
+              </span>
+            )}
           </Item>
-          <Item>
-            <Button
-              onClick={handlePrint}
-              variant="outline"
-              className="flex items-center space-x-2"
-            >
-              <Printer className="w-4 h-4" />
-              <span className="hidden sm:block">Print</span>
-            </Button>
-          </Item>
-          <Item>
-            <NavLink
-              to="/settings"
-              className={({ isActive }) =>
-                `transition-all duration-200 flex items-center space-x-2 px-4 rounded-md h-10 bg-white border border-gray-200 hover:bg-accent hover:accent-foreground hover:border-input ... ${isActive ? 'bg-blue-200 hover:bg-accent hover:text-accent-foreground' : 'bg-white'}`
-              }
-            >
-              <CogIcon className="w-4 h-4" />
-              <span className="hidden sm:block">Settings</span>
-            </NavLink>
-          </Item>
-          <Item>
-            <div className="flex space-x-4">
-              <UserMenu onSignInClick={() => setShowAuthDialog(true)} />
-            </div>
-          </Item>
-        </div>
-      </List>
+          <div className="flex space-x-4">
+            <Item>
+              <SyncStatus
+                isAuthenticated={isAuthenticated}
+                lastSyncTime={lastSyncTime}
+                isSyncing={isSyncing}
+                hasUnsavedChanges={hasUnsavedChanges}
+                onRefresh={forceSyncToDatabase}
+              />
+            </Item>
+            <Item className="hidden md:flex">
+              <Button
+                onClick={handlePrint}
+                variant="outline"
+                className="flex items-center space-x-2"
+              >
+                <Printer className="w-4 h-4" />
+                <span className="hidden lg:block">Print</span>
+              </Button>
+            </Item>
+            <Item className="hidden md:flex">
+              <NavLink
+                to="/settings"
+                className={({ isActive }) =>
+                  `transition-all duration-200 flex items-center space-x-2 px-4 rounded-md h-10 bg-white border border-gray-200 hover:bg-accent hover:accent-foreground hover:border-input ... ${isActive ? 'bg-blue-200 hover:bg-accent hover:text-accent-foreground' : 'bg-white'}`
+                }
+              >
+                <CogIcon className="w-4 h-4" />
+                <span className="hidden lg:block">Settings</span>
+              </NavLink>
+            </Item>
+            <Item>
+              <div className="flex">
+                <UserMenu onSignInClick={() => setShowAuthDialog(true)} />
+              </div>
+            </Item>
+          </div>
+        </List>
 
-      <div className="perspective-[2000px] absolute left-0 top-full flex w-full justify-center">
-        <Viewport
-          className="relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]"
-        />
-      </div>
-    </NavigationMenu>
+        <div className="perspective-[2000px] absolute left-0 top-full flex w-full justify-center">
+          <Viewport
+            className="relative mt-2.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md bg-white transition-[width,_height] duration-300 data-[state=closed]:animate-scaleOut data-[state=open]:animate-scaleIn sm:w-[var(--radix-navigation-menu-viewport-width)]"
+          />
+        </div>
+      </NavigationMenu>
 
-    <AuthDialog
-      isOpen={showAuthDialog}
-      onClose={() => setShowAuthDialog(false)}
-    />
+      <AuthDialog
+        isOpen={showAuthDialog}
+        onClose={() => setShowAuthDialog(false)}
+      />
 
-    <ExportDialog
-      isOpen={showExportDialog}
-      onClose={() => setShowExportDialog(false)}
-    />
+      <ExportDialog
+        isOpen={showExportDialog}
+        onClose={() => setShowExportDialog(false)}
+      />
 
-    <ProjectManagement
-      isOpen={showProjectManagement}
-      onClose={() => setShowProjectManagement(false)}
-    />
+      <ProjectManagement
+        isOpen={showProjectManagement}
+        onClose={() => setShowProjectManagement(false)}
+      />
     </>
   );
 };
diff --git a/src/components/SyncStatus.tsx b/src/components/SyncStatus.tsx
index cf5e7f6..3175265 100644
--- a/src/components/SyncStatus.tsx
+++ b/src/components/SyncStatus.tsx
@@ -1,8 +1,12 @@
 import { useState, useEffect, memo, useCallback } from 'react';
 import { Cloud, CloudOff, RefreshCw, Save, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { Popover, Tooltip } from "radix-ui";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface SyncStatusProps {
   isAuthenticated: boolean;
@@ -36,106 +40,48 @@ export const SyncStatus = memo(function SyncStatus({
   if (!isAuthenticated) {
     return (
       <div className="flex items-center gap-2 text-sm text-gray-500">
-        <Tooltip.Provider>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <button className="inline-flex size-[35px] items-center justify-center rounded-full bg-white text-violet11 shadow-[0_2px_10px] shadow-violet-200 focus:shadow-[0_0_0_2px]">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button className="inline-flex size-[35px] items-center justify-center rounded-full bg-white text-violet11 shadow-[0_2px_10px] shadow-violet-200 focus:shadow-[0_0_0_2px] p-0">
                 <CloudOff className="h-4 w-4 text-violet-900" />
               </button>
-            </Tooltip.Trigger>
-            <Tooltip.Portal>
-              <Tooltip.Content
-                className="select-none rounded bg-white px-[15px] py-2.5 text-[15px] leading-none text-violet11 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
-                sideOffset={5}
-              >
-                Data saved to local storage only
-                <Tooltip.Arrow className="fill-white" />
-              </Tooltip.Content>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-        </Tooltip.Provider>
+            </TooltipTrigger>
+            <TooltipContent>
+              Data saved to local storage only
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
     );
   }
 
   return (
     <div
-      className={`flex items-center gap-2 text-sm transition-opacity duration-300 ${
-        showStatus ? 'opacity-100' : 'opacity-50'
-      }`}
+      className={`flex items-center gap-2 transition-opacity duration-300 ${isSyncing || hasUnsavedChanges || showStatus ? 'opacity-100' : 'opacity-70'
+        }`}
     >
-      {isSyncing ? (
-        <>
-          <button
-            className="transition-all duration-200 flex items-center space-x-2 px-4 rounded-md h-10 bg-white border border-gray-200 hover:bg-accent hover:accent-foreground hover:border-input"
-            aria-label="Data is syncing"
-            disabled
-          >
-            <RefreshCw className="h-4 w-4 animate-spin" />
-          </button>
-        </>
-      ) : (
-        <>
-          <Popover.Root>
-            <Popover.Trigger asChild>
-              <button
-                className={`transition-all duration-200 flex items-center space-x-2 px-4 rounded-md h-10 border border-gray-200 hover:bg-accent hover:accent-foreground hover:border-input ${
-                  hasUnsavedChanges ? 'bg-orange-50 border-orange-200' : 'bg-white'
-                }`}
-                aria-label={hasUnsavedChanges ? "Unsaved changes" : "Manual sync mode"}
-              >
-                {hasUnsavedChanges ? (
-                  <Save className="h-4 w-4 text-orange-600" />
-                ) : (
-                  <Cloud className="h-4 w-4 text-green-600" />
-                )}
-              </button>
-            </Popover.Trigger>
-            <Popover.Portal>
-              <Popover.Content
-                className="w-[260px] rounded bg-white p-5 shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] will-change-[transform,opacity] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.violet7)] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=top]:animate-slideDownAndFade"
-                sideOffset={5}
-              >
-                <div className="flex flex-col gap-2.5">
-                  <span className="text-sm font-medium">
-                    Manual Sync Mode
-                  </span>
-                  <span className="text-xs text-gray-500">
-                    Data saves only when you click "Save" or end the day
-                  </span>
-                  <span className="text-xs text-gray-500">
-                    Last sync: {lastSyncTime ? new Date(lastSyncTime).toLocaleTimeString() : 'Never'}
-                  </span>
-                  {hasUnsavedChanges && (
-                    <div className="flex items-center gap-1 text-orange-600 text-xs">
-                      <AlertCircle className="h-3 w-3" />
-                      You have unsaved changes
-                    </div>
-                  )}
-                  {onRefresh && (
-                    <Button
-                      variant={hasUnsavedChanges ? "default" : "outline"}
-                      onClick={handleRefresh}
-                      disabled={isSyncing}
-                      className="transition-all duration-200 flex items-center space-x-2"
-                    >
-                      {hasUnsavedChanges ? 'Save Now' : 'Save to Database'}
-                      <Save className="h-3 w-3" />
-                    </Button>
-                  )}
-                </div>
-                <Popover.Close
-                  className="absolute right-[5px] top-[5px] inline-flex size-[25px] cursor-default items-center justify-center rounded-full text-violet11 outline-none hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7"
-                  aria-label="Close"
-                >
-                  <Cross2Icon />
-                </Popover.Close>
-                <Popover.Arrow className="fill-white" />
-              </Popover.Content>
-            </Popover.Portal>
-          </Popover.Root>
-        </>
-      )}
+      <Button
+        variant="outline"
+        onClick={handleRefresh}
+        disabled={isSyncing}
+        className="flex items-center space-x-2"
+        aria-label={hasUnsavedChanges ? "Save changes" : "Changes saved"}
+      >
+        {isSyncing ? (
+          <RefreshCw className="h-4 w-4 animate-spin text-blue-600" />
+        ) : hasUnsavedChanges ? (
+          <>
+            <AlertCircle className="h-4 w-4 text-orange-600" />
+            <span className="hidden lg:block">Save</span>
+          </>
+        ) : (
+          <>
+            <Save className="h-4 w-4 text-green-600" />
+            <span className="hidden lg:block">Save</span>
+          </>
+        )}
+      </Button>
     </div>
   );
 });
diff --git a/src/components/TaskEditDialog.tsx b/src/components/TaskEditDialog.tsx
index 42413dd..3dc12b7 100644
--- a/src/components/TaskEditDialog.tsx
+++ b/src/components/TaskEditDialog.tsx
@@ -16,6 +16,7 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Clock, Save } from 'lucide-react';
 import { Task } from '@/contexts/TimeTrackingContext';
@@ -235,223 +236,233 @@ export const TaskEditDialog: React.FC<TaskEditDialogProps> = ({
         </DialogHeader>
 
         <div className="space-y-6">
-          {/* Task Details */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg">Task Details</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <Label htmlFor="title">
-                  Task Title <span className="text-red-700">*</span>
-                </Label>
-                <Input
-                  id="title"
-                  value={formData.title}
-                  onChange={(e) =>
-                    setFormData((prev) => ({ ...prev, title: e.target.value }))
-                  }
-                  placeholder="Enter task title"
-                />
-              </div>
-
-              <div>
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  value={formData.description}
-                  onChange={(e) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      description: e.target.value
-                    }))
-                  }
-                  placeholder="Enter task description (optional)"
-                  className="min-h-[80px] resize-none"
-                />
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <Label>Category</Label>
-                  <Select
-                    value={formData.category}
-                    onValueChange={(value) =>
-                      setFormData((prev) => ({ ...prev, category: value }))
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select category">
-                        {formData.category && formData.category !== 'none' ? (
-                          <div className="flex items-center space-x-2">
-                            <div
-                              className="w-3 h-3 rounded-full border"
-                              style={{
-                                backgroundColor:
-                                  categories.find(
-                                    (c) => c.id === formData.category
-                                  )?.color || '#gray'
-                              }}
-                            />
-                            <span>
-                              {
-                                categories.find(
-                                  (c) => c.id === formData.category
-                                )?.name
-                              }
-                            </span>
-                          </div>
-                        ) : (
-                          'Select category'
-                        )}
-                      </SelectValue>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">No category</SelectItem>
-                      {categories.map((category) => (
-                        <SelectItem key={category.id} value={category.id}>
-                          <div className="flex items-center space-x-2">
-                            <div
-                              className="w-3 h-3 rounded-full border"
-                              style={{ backgroundColor: category.color }}
-                            />
-                            <span>{category.name}</span>
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div>
-                  <Label>Project</Label>
-                  <Select
-                    value={formData.project}
-                    onValueChange={(value) =>
-                      setFormData((prev) => ({ ...prev, project: value }))
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select project">
-                        {formData.project && formData.project !== 'none' ? (
-                          <div className="flex flex-col">
-                            <span>
-                              {
-                                projects.find((p) => p.id === formData.project)
-                                  ?.name
-                              }
-                            </span>
-                            <span className="text-sm text-gray-500">
-                              {
-                                projects.find((p) => p.id === formData.project)
-                                  ?.client
-                              }
-                            </span>
-                          </div>
-                        ) : (
-                          'Select project'
-                        )}
-                      </SelectValue>
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="none">No project</SelectItem>
-                      {projects.map((project) => (
-                        <SelectItem key={project.id} value={project.id}>
-                          <div className="flex flex-col">
-                            <span>{project.name}</span>
-                            <span className="text-sm text-gray-500">
-                              {project.client}
-                            </span>
-                          </div>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Time Adjustment */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg">Time Adjustment</CardTitle>
-              <p className="text-sm text-gray-600">
-                Times are automatically rounded to the nearest 15-minute
-                interval
-              </p>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="text-sm text-gray-600 mb-4">
-                <p>Date: {formatDate(task.startTime)}</p>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <Label>Start Time</Label>
-                  <Select
-                    value={timeData.startTime}
-                    onValueChange={(value) =>
-                      setTimeData((prev) => ({ ...prev, startTime: value }))
-                    }
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select start time" />
-                    </SelectTrigger>
-                    <SelectContent className="max-h-60">
-                      {timeOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div>
-                  <Label>
-                    End Time {!task.endTime && '(Currently Active)'}
-                  </Label>
-                  <Select
-                    value={timeData.endTime}
-                    onValueChange={(value) =>
-                      setTimeData((prev) => ({ ...prev, endTime: value }))
-                    }
-                    disabled={!task.endTime}
-                  >
-                    <SelectTrigger>
-                      <SelectValue
-                        placeholder={
-                          task.endTime ? 'Select end time' : 'Task is active'
-                        }
-                      />
-                    </SelectTrigger>
-                    <SelectContent className="max-h-60">
-                      {timeOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              {/* Current Values Display */}
-              <div className="bg-gray-50 p-3 rounded-md text-sm">
-                <div className="grid grid-cols-2 gap-4">
+          <Tabs defaultValue="details" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="details">Details</TabsTrigger>
+              <TabsTrigger value="time">Time</TabsTrigger>
+            </TabsList>
+
+            {/* Task Details */}
+            <TabsContent value="details">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">Task Details</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
                   <div>
-                    <span className="font-medium">Current Start:</span>{' '}
-                    {formatTime(task.startTime)}
+                    <Label htmlFor="title">
+                      Task Title <span className="text-red-700">*</span>
+                    </Label>
+                    <Input
+                      id="title"
+                      value={formData.title}
+                      onChange={(e) =>
+                        setFormData((prev) => ({ ...prev, title: e.target.value }))
+                      }
+                      placeholder="Enter task title"
+                    />
                   </div>
+
                   <div>
-                    <span className="font-medium">Current End:</span>{' '}
-                    {task.endTime ? formatTime(task.endTime) : 'Active'}
+                    <Label htmlFor="description">Description</Label>
+                    <Textarea
+                      id="description"
+                      value={formData.description}
+                      onChange={(e) =>
+                        setFormData((prev) => ({
+                          ...prev,
+                          description: e.target.value
+                        }))
+                      }
+                      placeholder="Enter task description (optional)"
+                      className="min-h-[80px] resize-none"
+                    />
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <Label>Category</Label>
+                      <Select
+                        value={formData.category}
+                        onValueChange={(value) =>
+                          setFormData((prev) => ({ ...prev, category: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select category">
+                            {formData.category && formData.category !== 'none' ? (
+                              <div className="flex items-center space-x-2">
+                                <div
+                                  className="w-3 h-3 rounded-full border"
+                                  style={{
+                                    backgroundColor:
+                                      categories.find(
+                                        (c) => c.id === formData.category
+                                      )?.color || '#gray'
+                                  }}
+                                />
+                                <span>
+                                  {
+                                    categories.find(
+                                      (c) => c.id === formData.category
+                                    )?.name
+                                  }
+                                </span>
+                              </div>
+                            ) : (
+                              'Select category'
+                            )}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">No category</SelectItem>
+                          {categories.map((category) => (
+                            <SelectItem key={category.id} value={category.id}>
+                              <div className="flex items-center space-x-2">
+                                <div
+                                  className="w-3 h-3 rounded-full border"
+                                  style={{ backgroundColor: category.color }}
+                                />
+                                <span>{category.name}</span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div>
+                      <Label>Project</Label>
+                      <Select
+                        value={formData.project}
+                        onValueChange={(value) =>
+                          setFormData((prev) => ({ ...prev, project: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select project">
+                            {formData.project && formData.project !== 'none' ? (
+                              <div className="flex flex-col">
+                                <span>
+                                  {
+                                    projects.find((p) => p.id === formData.project)
+                                      ?.name
+                                  }
+                                </span>
+                                <span className="text-sm text-gray-500">
+                                  {
+                                    projects.find((p) => p.id === formData.project)
+                                      ?.client
+                                  }
+                                </span>
+                              </div>
+                            ) : (
+                              'Select project'
+                            )}
+                          </SelectValue>
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">No project</SelectItem>
+                          {projects.map((project) => (
+                            <SelectItem key={project.id} value={project.id}>
+                              <div className="flex flex-col">
+                                <span>{project.name}</span>
+                                <span className="text-sm text-gray-500">
+                                  {project.client}
+                                </span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+            <TabsContent value="time">
+              {/* Time Adjustment */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">Time Adjustment</CardTitle>
+                  <p className="text-sm text-gray-600">
+                    Times are automatically rounded to the nearest 15-minute
+                    interval
+                  </p>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="text-sm text-gray-600 mb-4">
+                    <p>Date: {formatDate(task.startTime)}</p>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <Label>Start Time</Label>
+                      <Select
+                        value={timeData.startTime}
+                        onValueChange={(value) =>
+                          setTimeData((prev) => ({ ...prev, startTime: value }))
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Select start time" />
+                        </SelectTrigger>
+                        <SelectContent className="max-h-60">
+                          {timeOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div>
+                      <Label>
+                        End Time {!task.endTime && '(Currently Active)'}
+                      </Label>
+                      <Select
+                        value={timeData.endTime}
+                        onValueChange={(value) =>
+                          setTimeData((prev) => ({ ...prev, endTime: value }))
+                        }
+                        disabled={!task.endTime}
+                      >
+                        <SelectTrigger>
+                          <SelectValue
+                            placeholder={
+                              task.endTime ? 'Select end time' : 'Task is active'
+                            }
+                          />
+                        </SelectTrigger>
+                        <SelectContent className="max-h-60">
+                          {timeOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {/* Current Values Display */}
+                  <div className="bg-gray-50 p-3 rounded-md text-sm">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <span className="font-medium">Current Start:</span>{' '}
+                        {formatTime(task.startTime)}
+                      </div>
+                      <div>
+                        <span className="font-medium">Current End:</span>{' '}
+                        {task.endTime ? formatTime(task.endTime) : 'Active'}
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
 
           {/* Action Buttons */}
           <div className="flex justify-end space-x-2">
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
index 1588b89..052555f 100644
--- a/src/components/UserMenu.tsx
+++ b/src/components/UserMenu.tsx
@@ -40,7 +40,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({ onSignInClick }) => {
       <DropdownMenuTrigger asChild>
         <Button variant="outline" className="flex items-center gap-2">
           <UserCheck className="h-4 w-4" />
-          <span className="hidden md:block">{user?.email}</span>
+          <span className="hidden lg:block">{user?.email}</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
diff --git a/src/components/ui/callout.tsx b/src/components/ui/callout.tsx
index e69de29..c92f6df 100644
--- a/src/components/ui/callout.tsx
+++ b/src/components/ui/callout.tsx
@@ -0,0 +1,84 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/util"
+
+const calloutVariants = cva(
+  "relative w-full rounded-xl border p-4 transition-all duration-200 ease-in-out flex gap-3 items-start",
+  {
+    variants: {
+      variant: {
+        default: "bg-white/50 border-gray-200 text-gray-900 shadow-sm backdrop-blur-sm",
+        outline: "bg-transparent border-gray-200 text-gray-900",
+        soft: "border-transparent text-gray-900",
+        surface: "bg-white border-gray-200 text-gray-900 shadow-sm",
+        info: "bg-blue-50/80 border-blue-200 text-blue-900 shadow-sm shadow-blue-100/50 backdrop-blur-sm",
+        warning: "bg-orange-50/80 border-orange-200 text-orange-900 shadow-sm shadow-orange-100/50 backdrop-blur-sm",
+        error: "bg-red-50/80 border-red-200 text-red-900 shadow-sm shadow-red-100/50 backdrop-blur-sm",
+        success: "bg-green-50/80 border-green-200 text-green-900 shadow-sm shadow-green-100/50 backdrop-blur-sm",
+      },
+      size: {
+        "1": "p-2.5 text-xs",
+        "2": "p-4 text-sm",
+        "3": "p-6 text-base",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "soft",
+        className: "bg-gray-100",
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "2",
+    },
+  }
+)
+
+interface CalloutRootProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+  VariantProps<typeof calloutVariants> { }
+
+const CalloutRoot = React.forwardRef<HTMLDivElement, CalloutRootProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(calloutVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+)
+CalloutRoot.displayName = "CalloutRoot"
+
+const CalloutIcon = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex-shrink-0 mt-0.5 opacity-80", className)}
+    {...props}
+  />
+))
+CalloutIcon.displayName = "CalloutIcon"
+
+const CalloutText = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm leading-relaxed flex-1", className)}
+    {...props}
+  />
+))
+CalloutText.displayName = "CalloutText"
+
+export const Callout = {
+  Root: CalloutRoot,
+  Icon: CalloutIcon,
+  Text: CalloutText,
+}
+
+export { CalloutRoot, CalloutIcon, CalloutText }
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index fa79d81..775c0bd 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-2 border bg-background px-2 py-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 1779d94..ff38a08 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 px-2 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className
     )}
     {...props}
@@ -89,7 +89,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("p-2 md:p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ))