diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
index 095046499..4dc3d753d 100644
--- a/apps/web/messages/en.json
+++ b/apps/web/messages/en.json
@@ -1132,7 +1132,7 @@
   "task-boards": {
     "name": "Name",
     "board": "Board",
-    "progress": "Progress", 
+    "progress": "Progress",
     "tasks": "Tasks",
     "status": "Status",
     "last_updated": "Last Updated",
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/kanban.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/kanban.tsx
index 0b4a0388a..98bf26868 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/kanban.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/kanban.tsx
@@ -315,7 +315,8 @@ export function KanbanBoard({ boardId, tasks, isLoading }: Props) {
               const { transform } = args;
 
               // Get viewport bounds (safely handle SSR)
-              const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1920;
+              const viewportWidth =
+                typeof window !== 'undefined' ? window.innerWidth : 1920;
               const maxX = viewportWidth - 350; // Account for card width
 
               return {
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/task.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/task.tsx
index 6e86cb1b2..8d863d224 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/task.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/[boardId]/task.tsx
@@ -268,9 +268,9 @@ export function TaskCard({
         variant: 'destructive',
       });
     } finally {
-          setIsLoading(false);
-          setMenuOpen(false);
-      }
+      setIsLoading(false);
+      setMenuOpen(false);
+    }
   }
 
   async function handleDelete() {
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/columns.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/columns.tsx
index a56fc6d6d..51c8860df 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/columns.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/columns.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import { ProjectRowActions } from './row-action';
-import { ColumnDef } from '@tanstack/react-table';
 import { EnhancedBoard } from './types';
-import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
+import { ColumnDef } from '@tanstack/react-table';
 import { Badge } from '@tuturuuu/ui/badge';
-import { Progress } from '@tuturuuu/ui/progress';
 import { Button } from '@tuturuuu/ui/button';
+import { DataTableColumnHeader } from '@tuturuuu/ui/custom/tables/data-table-column-header';
 import { ExternalLink } from '@tuturuuu/ui/icons';
+import { Progress } from '@tuturuuu/ui/progress';
 import moment from 'moment';
 import Link from 'next/link';
 
@@ -29,16 +29,16 @@ export const projectColumns = (
       return (
         <div className="flex items-center gap-3">
           {/* Department/Group Color Indicator */}
-          <div className="w-1 h-8 rounded-full bg-primary/20" />
+          <div className="h-8 w-1 rounded-full bg-primary/20" />
           <div>
             <Link
               href={board.href}
-              className="font-medium hover:text-primary transition-colors hover:underline"
+              className="font-medium transition-colors hover:text-primary hover:underline"
             >
               {board.name}
             </Link>
             {board.groupId && (
-              <p className="text-xs text-muted-foreground mt-1">
+              <p className="mt-1 text-xs text-muted-foreground">
                 Group: {board.groupId}
               </p>
             )}
@@ -59,9 +59,9 @@ export const projectColumns = (
     cell: ({ row }) => {
       const completionRate = row.original.stats.completionRate;
       return (
-        <div className="flex items-center gap-2 min-w-[120px]">
-          <Progress value={completionRate} className="w-16 h-2" />
-          <span className="text-sm font-medium min-w-[3rem]">
+        <div className="flex min-w-[120px] items-center gap-2">
+          <Progress value={completionRate} className="h-2 w-16" />
+          <span className="min-w-[3rem] text-sm font-medium">
             {completionRate}%
           </span>
         </div>
@@ -106,20 +106,28 @@ export const projectColumns = (
             </Badge>
           )}
           {stats.hasMultipleOverdue && (
-            <Badge variant="secondary" className="text-xs bg-orange-100 text-orange-800">
+            <Badge
+              variant="secondary"
+              className="bg-orange-100 text-xs text-orange-800"
+            >
               Overdue
             </Badge>
           )}
           {stats.hasWorkloadImbalance && (
-            <Badge variant="outline" className="text-xs border-blue-200 text-blue-700">
+            <Badge
+              variant="outline"
+              className="border-blue-200 text-xs text-blue-700"
+            >
               Imbalanced
             </Badge>
           )}
-          {!stats.hasUrgentTasks && !stats.hasMultipleOverdue && !stats.hasWorkloadImbalance && (
-            <Badge variant="outline" className="text-xs">
-              Normal
-            </Badge>
-          )}
+          {!stats.hasUrgentTasks &&
+            !stats.hasMultipleOverdue &&
+            !stats.hasWorkloadImbalance && (
+              <Badge variant="outline" className="text-xs">
+                Normal
+              </Badge>
+            )}
         </div>
       );
     },
@@ -156,7 +164,11 @@ export const projectColumns = (
       return (
         <div className="flex items-center gap-2">
           <Link href={board.href}>
-            <Button variant="ghost" size="sm" className="hover:bg-primary/10 hover:text-primary">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hover:bg-primary/10 hover:text-primary"
+            >
               <ExternalLink className="h-4 w-4" />
             </Button>
           </Link>
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-card.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-card.tsx
index 0519ecba6..e69de29bb 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-card.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-card.tsx
@@ -1 +0,0 @@
- 
\ No newline at end of file
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-list.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-list.tsx
index d4b9d4b57..bbfa3e78a 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-list.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/board-list.tsx
@@ -1,12 +1,14 @@
 'use client';
 
-import { EnhancedBoard, ViewSettings, BoardGroup, GROUP_COLORS } from '../types';
+import {
+  BoardGroup,
+  EnhancedBoard,
+  GROUP_COLORS,
+  ViewSettings,
+} from '../types';
 import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import { Card, CardContent, CardHeader } from '@tuturuuu/ui/card';
-import { Progress } from '@tuturuuu/ui/progress';
-// import { Separator } from '@tuturuuu/ui/separator';
-import { Input } from '@tuturuuu/ui/input';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,25 +16,28 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@tuturuuu/ui/dropdown-menu';
-import { 
+import {
+  AlertCircle,
+  Archive,
+  BarChart3,
   Calendar,
+  ChevronDown,
+  ChevronRight,
   Clock,
-  BarChart3,
-  Users,
+  Edit,
+  ExternalLink,
   // AlertTriangle,
   Flag,
-  TrendingUp,
-  ExternalLink,
   MoreHorizontal,
-  Edit,
-  Archive,
-  Trash2,
-  ChevronDown,
-  ChevronRight,
   Plus,
+  Trash2,
+  TrendingUp,
+  Users,
   X,
-  AlertCircle
 } from '@tuturuuu/ui/icons';
+// import { Separator } from '@tuturuuu/ui/separator';
+import { Input } from '@tuturuuu/ui/input';
+import { Progress } from '@tuturuuu/ui/progress';
 import { cn } from '@tuturuuu/utils/format';
 import Link from 'next/link';
 import { useState } from 'react';
@@ -44,7 +49,11 @@ interface BoardListProps {
   onSettingsChange: (settings: ViewSettings) => void;
 }
 
-export function BoardList({ boards, settings, onSettingsChange }: BoardListProps) {
+export function BoardList({
+  boards,
+  settings,
+  onSettingsChange,
+}: BoardListProps) {
   // Smart filtering logic
   const getFilteredBoards = () => {
     if (settings.forceShowAll) {
@@ -61,7 +70,7 @@ export function BoardList({ boards, settings, onSettingsChange }: BoardListProps
   const sortedBoards = [...filteredBoards].sort((a, b) => {
     switch (settings.sortBy) {
       case 'name':
-        return settings.sortOrder === 'asc' 
+        return settings.sortOrder === 'asc'
           ? a.name.localeCompare(b.name)
           : b.name.localeCompare(a.name);
       case 'id':
@@ -91,8 +100,8 @@ export function BoardList({ boards, settings, onSettingsChange }: BoardListProps
 
   if (settings.viewMode === 'groups') {
     return (
-      <GroupsView 
-        boards={sortedBoards} 
+      <GroupsView
+        boards={sortedBoards}
         settings={settings}
         onSettingsChange={onSettingsChange}
       />
@@ -105,8 +114,8 @@ export function BoardList({ boards, settings, onSettingsChange }: BoardListProps
 
 function EnhancedCardsView({ boards }: { boards: EnhancedBoard[] }) {
   return (
-    <div className="max-h-[70vh] overflow-y-auto space-y-6">
-      <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+    <div className="max-h-[70vh] space-y-6 overflow-y-auto">
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         {boards.map((board) => (
           <EnhancedBoardCard key={board.id} board={board} />
         ))}
@@ -117,22 +126,28 @@ function EnhancedCardsView({ boards }: { boards: EnhancedBoard[] }) {
 
 function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
   const [isHovered, setIsHovered] = useState(false);
-  
-  const progressColor = board.stats.completionRate >= 75 ? 'from-emerald-400 to-emerald-600' : 
-                       board.stats.completionRate >= 50 ? 'from-blue-400 to-blue-600' : 
-                       board.stats.completionRate >= 25 ? 'from-yellow-400 to-yellow-600' : 'from-gray-400 to-gray-600';
 
-  const groupColor = board.groupId && GROUP_COLORS[board.groupId as keyof typeof GROUP_COLORS]
-    ? GROUP_COLORS[board.groupId as keyof typeof GROUP_COLORS]
-    : GROUP_COLORS.Default;
+  const progressColor =
+    board.stats.completionRate >= 75
+      ? 'from-emerald-400 to-emerald-600'
+      : board.stats.completionRate >= 50
+        ? 'from-blue-400 to-blue-600'
+        : board.stats.completionRate >= 25
+          ? 'from-yellow-400 to-yellow-600'
+          : 'from-gray-400 to-gray-600';
+
+  const groupColor =
+    board.groupId && GROUP_COLORS[board.groupId as keyof typeof GROUP_COLORS]
+      ? GROUP_COLORS[board.groupId as keyof typeof GROUP_COLORS]
+      : GROUP_COLORS.Default;
 
   return (
-    <Card 
+    <Card
       className={cn(
-        "group relative overflow-hidden transition-all duration-200",
-        "hover:shadow-lg hover:scale-[1.02]",
-        "border-l-4 bg-gradient-to-br from-card to-card/95",
-        isHovered && "shadow-lg scale-[1.02]"
+        'group relative overflow-hidden transition-all duration-200',
+        'hover:scale-[1.02] hover:shadow-lg',
+        'border-l-4 bg-gradient-to-br from-card to-card/95',
+        isHovered && 'scale-[1.02] shadow-lg'
       )}
       style={{ borderLeftColor: groupColor }}
       onMouseEnter={() => setIsHovered(true)}
@@ -141,29 +156,38 @@ function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
       {/* Alert Indicators */}
       <div className="absolute top-4 left-4 flex gap-1">
         {board.stats.hasUrgentTasks && (
-          <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" title="Has urgent tasks" />
+          <div
+            className="h-2 w-2 animate-pulse rounded-full bg-red-500"
+            title="Has urgent tasks"
+          />
         )}
         {board.stats.hasMultipleOverdue && (
-          <div className="w-2 h-2 rounded-full bg-orange-500 animate-pulse" title="Multiple overdue tasks" />
+          <div
+            className="h-2 w-2 animate-pulse rounded-full bg-orange-500"
+            title="Multiple overdue tasks"
+          />
         )}
         {board.stats.hasWorkloadImbalance && (
-          <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" title="Workload imbalance detected" />
+          <div
+            className="h-2 w-2 animate-pulse rounded-full bg-blue-500"
+            title="Workload imbalance detected"
+          />
         )}
       </div>
 
       <CardHeader className="space-y-4 pb-4">
         <div className="flex items-start justify-between">
           <div className="min-w-0 flex-1 space-y-1">
-            <Link 
+            <Link
               href={board.href}
-              className="font-bold text-lg hover:text-primary transition-colors line-clamp-1 block"
+              className="line-clamp-1 block text-lg font-bold transition-colors hover:text-primary"
             >
               {board.name}
             </Link>
             {board.groupId && (
-              <p className="text-sm text-muted-foreground flex items-center gap-2">
-                <span 
-                  className="w-2 h-2 rounded-full"
+              <p className="flex items-center gap-2 text-sm text-muted-foreground">
+                <span
+                  className="h-2 w-2 rounded-full"
                   style={{ backgroundColor: groupColor }}
                 />
                 {board.groupId}
@@ -177,17 +201,22 @@ function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
         <div className="space-y-2">
           <div className="flex items-center justify-between text-sm">
             <span className="text-muted-foreground">Progress</span>
-            <span className="font-bold text-foreground">{board.stats.completionRate}%</span>
+            <span className="font-bold text-foreground">
+              {board.stats.completionRate}%
+            </span>
           </div>
           <div className="relative">
-            <div className="w-full h-3 bg-muted rounded-full overflow-hidden">
-              <div 
-                className={cn("h-full rounded-full bg-gradient-to-r transition-all duration-700", progressColor)}
+            <div className="h-3 w-full overflow-hidden rounded-full bg-muted">
+              <div
+                className={cn(
+                  'h-full rounded-full bg-gradient-to-r transition-all duration-700',
+                  progressColor
+                )}
                 style={{ width: `${board.stats.completionRate}%` }}
               />
             </div>
             {board.stats.completionRate > 80 && (
-              <div className="absolute -top-1 right-0 w-4 h-4 bg-emerald-500 rounded-full animate-bounce opacity-75" />
+              <div className="absolute -top-1 right-0 h-4 w-4 animate-bounce rounded-full bg-emerald-500 opacity-75" />
             )}
           </div>
         </div>
@@ -196,19 +225,19 @@ function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
       <CardContent className="space-y-4">
         {/* Enhanced Stats Grid */}
         <div className="grid grid-cols-2 gap-4">
-          <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/30">
+          <div className="flex items-center gap-2 rounded-lg bg-muted/30 p-3">
             <BarChart3 className="h-4 w-4 text-blue-600" />
             <div className="text-sm">
-              <span className="font-bold block">{board.stats.totalTasks}</span>
-              <span className="text-muted-foreground text-xs">tasks</span>
+              <span className="block font-bold">{board.stats.totalTasks}</span>
+              <span className="text-xs text-muted-foreground">tasks</span>
             </div>
           </div>
 
-          <div className="flex items-center gap-2 p-3 rounded-lg bg-muted/30">
+          <div className="flex items-center gap-2 rounded-lg bg-muted/30 p-3">
             <Users className="h-4 w-4 text-green-600" />
             <div className="text-sm">
-              <span className="font-bold block">{board.stats.totalLists}</span>
-              <span className="text-muted-foreground text-xs">lists</span>
+              <span className="block font-bold">{board.stats.totalLists}</span>
+              <span className="text-xs text-muted-foreground">lists</span>
             </div>
           </div>
         </div>
@@ -216,22 +245,30 @@ function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
         {/* Status Indicators */}
         <div className="space-y-2">
           {board.stats.activeTasks > 0 && (
-            <div className="flex items-center justify-between p-2 rounded-lg bg-blue-50 dark:bg-blue-950/20">
+            <div className="flex items-center justify-between rounded-lg bg-blue-50 p-2 dark:bg-blue-950/20">
               <div className="flex items-center gap-2">
                 <Clock className="h-4 w-4 text-blue-600" />
-                <span className="text-sm text-blue-700 dark:text-blue-300">Active tasks</span>
+                <span className="text-sm text-blue-700 dark:text-blue-300">
+                  Active tasks
+                </span>
               </div>
-              <span className="font-semibold text-blue-700 dark:text-blue-300">{board.stats.activeTasks}</span>
+              <span className="font-semibold text-blue-700 dark:text-blue-300">
+                {board.stats.activeTasks}
+              </span>
             </div>
           )}
 
           {board.stats.overdueTasks > 0 && (
-            <div className="flex items-center justify-between p-2 rounded-lg bg-red-50 dark:bg-red-950/20">
+            <div className="flex items-center justify-between rounded-lg bg-red-50 p-2 dark:bg-red-950/20">
               <div className="flex items-center gap-2">
                 <AlertCircle className="h-4 w-4 text-red-600" />
-                <span className="text-sm text-red-700 dark:text-red-300">Overdue</span>
+                <span className="text-sm text-red-700 dark:text-red-300">
+                  Overdue
+                </span>
               </div>
-              <span className="font-semibold text-red-700 dark:text-red-300">{board.stats.overdueTasks}</span>
+              <span className="font-semibold text-red-700 dark:text-red-300">
+                {board.stats.overdueTasks}
+              </span>
             </div>
           )}
         </div>
@@ -239,19 +276,28 @@ function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
         {/* Enhanced Priority Badges */}
         <div className="flex flex-wrap gap-1">
           {board.stats.priorityDistribution.urgent > 0 && (
-            <Badge variant="destructive" className="text-xs gap-1 bg-red-500 hover:bg-red-600 shadow-sm">
+            <Badge
+              variant="destructive"
+              className="gap-1 bg-red-500 text-xs shadow-sm hover:bg-red-600"
+            >
               <Flag className="h-3 w-3" />
               {board.stats.priorityDistribution.urgent} urgent
             </Badge>
           )}
           {board.stats.priorityDistribution.high > 0 && (
-            <Badge variant="secondary" className="text-xs gap-1 bg-orange-100 text-orange-800 border-orange-200">
+            <Badge
+              variant="secondary"
+              className="gap-1 border-orange-200 bg-orange-100 text-xs text-orange-800"
+            >
               <Flag className="h-3 w-3" />
               {board.stats.priorityDistribution.high} high
             </Badge>
           )}
           {board.stats.completionRate > 75 && (
-            <Badge variant="outline" className="text-xs gap-1 border-emerald-200 text-emerald-700 bg-emerald-50">
+            <Badge
+              variant="outline"
+              className="gap-1 border-emerald-200 bg-emerald-50 text-xs text-emerald-700"
+            >
               <TrendingUp className="h-3 w-3" />
               High progress
             </Badge>
@@ -259,19 +305,21 @@ function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
         </div>
 
         {/* Last Activity */}
-        <div className="flex items-center gap-2 text-xs text-muted-foreground pt-2 border-t border-border/50">
+        <div className="flex items-center gap-2 border-t border-border/50 pt-2 text-xs text-muted-foreground">
           <Calendar className="h-3 w-3" />
-          <span>Updated {new Date(board.stats.lastActivity).toLocaleDateString()}</span>
+          <span>
+            Updated {new Date(board.stats.lastActivity).toLocaleDateString()}
+          </span>
         </div>
 
         {/* Enhanced Action Button */}
         <Link href={board.href} className="block">
-          <Button 
-            className="w-full bg-gradient-to-r from-primary to-primary/90 hover:from-primary/90 hover:to-primary shadow-md"
+          <Button
+            className="w-full bg-gradient-to-r from-primary to-primary/90 shadow-md hover:from-primary/90 hover:to-primary"
             size="lg"
           >
             Open Board
-            <ExternalLink className="h-4 w-4 ml-2" />
+            <ExternalLink className="ml-2 h-4 w-4" />
           </Button>
         </Link>
       </CardContent>
@@ -279,31 +327,43 @@ function EnhancedBoardCard({ board }: { board: EnhancedBoard }) {
   );
 }
 
-function GroupsView({ 
-  boards, 
-  settings, 
-  onSettingsChange 
-}: { 
-  boards: EnhancedBoard[]; 
+function GroupsView({
+  boards,
+  settings,
+  onSettingsChange,
+}: {
+  boards: EnhancedBoard[];
   settings: ViewSettings;
   onSettingsChange: (settings: ViewSettings) => void;
 }) {
   const [groups, setGroups] = useState<BoardGroup[]>([
-    { id: 'gaming', name: 'Gaming', boards: [], color: GROUP_COLORS.Gaming, order: 1 },
-    { id: 'robotics', name: 'Robotics', boards: [], color: GROUP_COLORS.Robotics, order: 2 },
+    {
+      id: 'gaming',
+      name: 'Gaming',
+      boards: [],
+      color: GROUP_COLORS.Gaming,
+      order: 1,
+    },
+    {
+      id: 'robotics',
+      name: 'Robotics',
+      boards: [],
+      color: GROUP_COLORS.Robotics,
+      order: 2,
+    },
   ]);
   const [newGroupName, setNewGroupName] = useState('');
   const [isCreatingGroup, setIsCreatingGroup] = useState(false);
 
   // Organize boards into groups
-  const organizedGroups = groups.map(group => ({
+  const organizedGroups = groups.map((group) => ({
     ...group,
-    boards: boards.filter(board => board.groupId === group.id)
+    boards: boards.filter((board) => board.groupId === group.id),
   }));
 
   // Unassigned boards
-  const unassignedBoards = boards.filter(board => 
-    !groups.find(group => group.id === board.groupId)
+  const unassignedBoards = boards.filter(
+    (board) => !groups.find((group) => group.id === board.groupId)
   );
 
   const handleCreateGroup = () => {
@@ -313,7 +373,7 @@ function GroupsView({
         name: newGroupName,
         boards: [],
         color: GROUP_COLORS.Default,
-        order: groups.length + 1
+        order: groups.length + 1,
       };
       setGroups([...groups, newGroup]);
       setNewGroupName('');
@@ -322,28 +382,28 @@ function GroupsView({
   };
 
   const handleDeleteGroup = (groupId: string) => {
-    setGroups(groups.filter(g => g.id !== groupId));
+    setGroups(groups.filter((g) => g.id !== groupId));
   };
 
   const toggleGroup = (groupId: string) => {
     const collapsed = settings.groupView?.collapsed?.includes(groupId)
-      ? settings.groupView.collapsed.filter(id => id !== groupId)
+      ? settings.groupView.collapsed.filter((id) => id !== groupId)
       : [...(settings.groupView?.collapsed || []), groupId];
-    
+
     onSettingsChange({
       ...settings,
-      groupView: { 
-        ...settings.groupView, 
-        collapsed 
-      }
+      groupView: {
+        ...settings.groupView,
+        collapsed,
+      },
     });
   };
 
   return (
     <div className="h-[70vh] overflow-hidden">
-      <div className="flex flex-col h-full">
+      <div className="flex h-full flex-col">
         {/* Groups Management Header */}
-        <div className="mb-4 flex items-center justify-between p-4 bg-muted/20 rounded-lg border">
+        <div className="mb-4 flex items-center justify-between rounded-lg border bg-muted/20 p-4">
           <h3 className="text-lg font-semibold">Board Groups</h3>
           <div className="flex items-center gap-2">
             {isCreatingGroup ? (
@@ -361,13 +421,17 @@ function GroupsView({
                 <Button size="sm" onClick={handleCreateGroup}>
                   Add
                 </Button>
-                <Button variant="outline" size="sm" onClick={() => setIsCreatingGroup(false)}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setIsCreatingGroup(false)}
+                >
                   <X className="h-4 w-4" />
                 </Button>
               </div>
             ) : (
               <Button size="sm" onClick={() => setIsCreatingGroup(true)}>
-                <Plus className="h-4 w-4 mr-2" />
+                <Plus className="mr-2 h-4 w-4" />
                 Add Group
               </Button>
             )}
@@ -376,27 +440,29 @@ function GroupsView({
 
         {/* Scrollable Groups Container */}
         <div className="flex-1 overflow-x-auto">
-          <div className="flex gap-6 h-full min-w-max">
+          <div className="flex h-full min-w-max gap-6">
             {/* Existing Groups */}
             {organizedGroups.map((group) => (
-              <GroupColumn 
-                key={group.id} 
-                group={group} 
-                isCollapsed={settings.groupView?.collapsed?.includes(group.id) || false}
+              <GroupColumn
+                key={group.id}
+                group={group}
+                isCollapsed={
+                  settings.groupView?.collapsed?.includes(group.id) || false
+                }
                 onToggle={() => toggleGroup(group.id)}
                 onDelete={() => handleDeleteGroup(group.id)}
               />
             ))}
-            
+
             {/* Unassigned Boards Column */}
             {unassignedBoards.length > 0 && (
-              <GroupColumn 
+              <GroupColumn
                 group={{
                   id: 'unassigned',
                   name: 'Unassigned',
                   boards: unassignedBoards,
                   color: GROUP_COLORS.Default,
-                  order: 999
+                  order: 999,
                 }}
                 isCollapsed={false}
                 onToggle={() => {}}
@@ -411,26 +477,26 @@ function GroupsView({
   );
 }
 
-function GroupColumn({ 
-  group, 
-  isCollapsed, 
-  onToggle, 
+function GroupColumn({
+  group,
+  isCollapsed,
+  onToggle,
   onDelete,
-  isUnassigned = false 
-}: { 
-  group: BoardGroup; 
-  isCollapsed: boolean; 
-  onToggle: () => void; 
+  isUnassigned = false,
+}: {
+  group: BoardGroup;
+  isCollapsed: boolean;
+  onToggle: () => void;
   onDelete: () => void;
   isUnassigned?: boolean;
 }) {
   const [dragOver, setDragOver] = useState(false);
 
   return (
-    <div 
+    <div
       className={cn(
-        "flex-shrink-0 w-80 bg-muted/30 rounded-lg border-2 border-dashed border-transparent transition-all",
-        dragOver && "border-primary bg-primary/10"
+        'w-80 flex-shrink-0 rounded-lg border-2 border-dashed border-transparent bg-muted/30 transition-all',
+        dragOver && 'border-primary bg-primary/10'
       )}
       onDragOver={(e) => {
         e.preventDefault();
@@ -443,15 +509,15 @@ function GroupColumn({
         // Handle board drop logic here
       }}
     >
-      <div className="p-4 h-full flex flex-col">
+      <div className="flex h-full flex-col p-4">
         {/* Group Header */}
-        <div className="flex items-center justify-between mb-4">
-          <div 
-            className="flex items-center gap-2 cursor-pointer"
+        <div className="mb-4 flex items-center justify-between">
+          <div
+            className="flex cursor-pointer items-center gap-2"
             onClick={onToggle}
           >
-            <div 
-              className="w-4 h-4 rounded-full"
+            <div
+              className="h-4 w-4 rounded-full"
               style={{ backgroundColor: group.color }}
             />
             <h4 className="font-semibold">{group.name}</h4>
@@ -468,11 +534,11 @@ function GroupColumn({
               </Button>
             )}
           </div>
-          
+
           {!isUnassigned && (
-            <Button 
-              variant="ghost" 
-              size="sm" 
+            <Button
+              variant="ghost"
+              size="sm"
               onClick={onDelete}
               className="text-destructive hover:text-destructive"
             >
@@ -483,13 +549,17 @@ function GroupColumn({
 
         {/* Boards List */}
         {!isCollapsed && (
-          <div className="flex-1 overflow-y-auto space-y-3">
+          <div className="flex-1 space-y-3 overflow-y-auto">
             {group.boards.map((board) => (
-              <DraggableBoardCard key={board.id} board={board} groupColor={group.color} />
+              <DraggableBoardCard
+                key={board.id}
+                board={board}
+                groupColor={group.color}
+              />
             ))}
-            
+
             {group.boards.length === 0 && (
-              <div className="h-32 border-2 border-dashed border-muted-foreground/30 rounded-lg flex items-center justify-center text-muted-foreground text-sm">
+              <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/30 text-sm text-muted-foreground">
                 Drop boards here
               </div>
             )}
@@ -500,25 +570,33 @@ function GroupColumn({
   );
 }
 
-function DraggableBoardCard({ board, groupColor }: { board: EnhancedBoard; groupColor: string }) {
+function DraggableBoardCard({
+  board,
+  groupColor,
+}: {
+  board: EnhancedBoard;
+  groupColor: string;
+}) {
   const [isDragging, setIsDragging] = useState(false);
 
   return (
-    <Card 
+    <Card
       className={cn(
-        "cursor-move transition-all duration-200 border-l-4",
-        isDragging ? "scale-105 shadow-lg rotate-1 opacity-75" : "hover:scale-102 hover:shadow-md"
+        'cursor-move border-l-4 transition-all duration-200',
+        isDragging
+          ? 'scale-105 rotate-1 opacity-75 shadow-lg'
+          : 'hover:scale-102 hover:shadow-md'
       )}
       style={{ borderLeftColor: groupColor }}
       draggable
       onDragStart={() => setIsDragging(true)}
       onDragEnd={() => setIsDragging(false)}
     >
-      <CardContent className="p-4 space-y-3">
+      <CardContent className="space-y-3 p-4">
         <div className="flex items-center justify-between">
-          <Link 
+          <Link
             href={board.href}
-            className="font-medium hover:text-primary transition-colors line-clamp-1"
+            className="line-clamp-1 font-medium transition-colors hover:text-primary"
           >
             {board.name}
           </Link>
@@ -549,10 +627,17 @@ function DraggableBoardCard({ board, groupColor }: { board: EnhancedBoard; group
         {/* Status Badges */}
         <div className="flex flex-wrap gap-1">
           {board.stats.hasUrgentTasks && (
-            <Badge variant="destructive" className="text-xs">Urgent</Badge>
+            <Badge variant="destructive" className="text-xs">
+              Urgent
+            </Badge>
           )}
           {board.stats.hasMultipleOverdue && (
-            <Badge variant="secondary" className="text-xs bg-orange-100 text-orange-800">Overdue</Badge>
+            <Badge
+              variant="secondary"
+              className="bg-orange-100 text-xs text-orange-800"
+            >
+              Overdue
+            </Badge>
           )}
         </div>
       </CardContent>
@@ -579,25 +664,38 @@ function BoardActionsMenu({ board }: { board: EnhancedBoard }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="opacity-0 group-hover:opacity-100 transition-opacity">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="opacity-0 transition-opacity group-hover:opacity-100"
+        >
           <MoreHorizontal className="h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-48">
-        <DropdownMenuItem onClick={handleEdit} className="flex items-center gap-2">
+        <DropdownMenuItem
+          onClick={handleEdit}
+          className="flex items-center gap-2"
+        >
           <Edit className="h-4 w-4" />
           Edit Board
         </DropdownMenuItem>
         <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={handleArchive} className="flex items-center gap-2 text-orange-600">
+        <DropdownMenuItem
+          onClick={handleArchive}
+          className="flex items-center gap-2 text-orange-600"
+        >
           <Archive className="h-4 w-4" />
           Archive Board
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={handleDelete} className="flex items-center gap-2 text-destructive">
+        <DropdownMenuItem
+          onClick={handleDelete}
+          className="flex items-center gap-2 text-destructive"
+        >
           <Trash2 className="h-4 w-4" />
           Delete Board
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
-} 
\ No newline at end of file
+}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/view-settings.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/view-settings.tsx
index b3dd668f9..069fb5b3c 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/view-settings.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/components/view-settings.tsx
@@ -1,20 +1,20 @@
 'use client';
 
-import { useState } from 'react';
+import { SmartFilters, ViewSettings } from '../types';
+import { Badge } from '@tuturuuu/ui/badge';
 import { Button } from '@tuturuuu/ui/button';
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from '@tuturuuu/ui/dropdown-menu';
-import { Badge } from '@tuturuuu/ui/badge';
 import { Columns3, RefreshCw, SortAsc, SortDesc } from '@tuturuuu/ui/icons';
-import { ViewSettings, SmartFilters } from '../types';
+import { useState } from 'react';
 
 interface ViewSettingsPanelProps {
   settings: ViewSettings;
@@ -62,17 +62,19 @@ export function ViewSettingsPanel({
               <Button
                 variant="outline"
                 size="sm"
-                className="w-full h-8 gap-2"
+                className="h-8 w-full gap-2"
                 onClick={handleRefresh}
                 disabled={isRefreshing}
               >
-                <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+                <RefreshCw
+                  className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`}
+                />
                 {isRefreshing ? 'Refreshing...' : 'Refresh Data'}
               </Button>
             </div>
-            
+
             <DropdownMenuSeparator />
-            
+
             {/* Sorting Section */}
             <DropdownMenuLabel className="flex items-center gap-2">
               <SortAsc className="h-4 w-4" />
@@ -84,18 +86,28 @@ export function ViewSettingsPanel({
                 onSettingsChange({ ...settings, sortBy: value as any })
               }
             >
-              <DropdownMenuRadioItem value="name">Sort by Name</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="id">Sort by ID</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="created_at">Sort by Created Date</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="progress">Sort by Progress</DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="tasks">Sort by Task Count</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="name">
+                Sort by Name
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="id">
+                Sort by ID
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="created_at">
+                Sort by Created Date
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="progress">
+                Sort by Progress
+              </DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="tasks">
+                Sort by Task Count
+              </DropdownMenuRadioItem>
             </DropdownMenuRadioGroup>
-            
+
             <div className="px-2 pt-1">
               <Button
                 variant="ghost"
                 size="sm"
-                className="w-full h-8 gap-2 justify-start"
+                className="h-8 w-full justify-start gap-2"
                 onClick={() =>
                   onSettingsChange({
                     ...settings,
@@ -126,23 +138,45 @@ export function ViewSettingsPanel({
                 <DropdownMenuCheckboxItem
                   checked={settings.visibleColumns?.includes('board') ?? true}
                   onCheckedChange={(checked) => {
-                    const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions'];
+                    const columns = settings.visibleColumns || [
+                      'board',
+                      'progress',
+                      'tasks',
+                      'status',
+                      'last_updated',
+                      'actions',
+                    ];
                     const newColumns = checked
-                      ? [...columns.filter(c => c !== 'board'), 'board']
-                      : columns.filter(c => c !== 'board');
-                    onSettingsChange({ ...settings, visibleColumns: newColumns });
+                      ? [...columns.filter((c) => c !== 'board'), 'board']
+                      : columns.filter((c) => c !== 'board');
+                    onSettingsChange({
+                      ...settings,
+                      visibleColumns: newColumns,
+                    });
                   }}
                 >
                   Board Name
                 </DropdownMenuCheckboxItem>
                 <DropdownMenuCheckboxItem
-                  checked={settings.visibleColumns?.includes('progress') ?? true}
+                  checked={
+                    settings.visibleColumns?.includes('progress') ?? true
+                  }
                   onCheckedChange={(checked) => {
-                    const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions'];
+                    const columns = settings.visibleColumns || [
+                      'board',
+                      'progress',
+                      'tasks',
+                      'status',
+                      'last_updated',
+                      'actions',
+                    ];
                     const newColumns = checked
-                      ? [...columns.filter(c => c !== 'progress'), 'progress']
-                      : columns.filter(c => c !== 'progress');
-                    onSettingsChange({ ...settings, visibleColumns: newColumns });
+                      ? [...columns.filter((c) => c !== 'progress'), 'progress']
+                      : columns.filter((c) => c !== 'progress');
+                    onSettingsChange({
+                      ...settings,
+                      visibleColumns: newColumns,
+                    });
                   }}
                 >
                   Progress
@@ -150,11 +184,21 @@ export function ViewSettingsPanel({
                 <DropdownMenuCheckboxItem
                   checked={settings.visibleColumns?.includes('tasks') ?? true}
                   onCheckedChange={(checked) => {
-                    const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions'];
+                    const columns = settings.visibleColumns || [
+                      'board',
+                      'progress',
+                      'tasks',
+                      'status',
+                      'last_updated',
+                      'actions',
+                    ];
                     const newColumns = checked
-                      ? [...columns.filter(c => c !== 'tasks'), 'tasks']
-                      : columns.filter(c => c !== 'tasks');
-                    onSettingsChange({ ...settings, visibleColumns: newColumns });
+                      ? [...columns.filter((c) => c !== 'tasks'), 'tasks']
+                      : columns.filter((c) => c !== 'tasks');
+                    onSettingsChange({
+                      ...settings,
+                      visibleColumns: newColumns,
+                    });
                   }}
                 >
                   Tasks
@@ -162,23 +206,48 @@ export function ViewSettingsPanel({
                 <DropdownMenuCheckboxItem
                   checked={settings.visibleColumns?.includes('status') ?? true}
                   onCheckedChange={(checked) => {
-                    const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions'];
+                    const columns = settings.visibleColumns || [
+                      'board',
+                      'progress',
+                      'tasks',
+                      'status',
+                      'last_updated',
+                      'actions',
+                    ];
                     const newColumns = checked
-                      ? [...columns.filter(c => c !== 'status'), 'status']
-                      : columns.filter(c => c !== 'status');
-                    onSettingsChange({ ...settings, visibleColumns: newColumns });
+                      ? [...columns.filter((c) => c !== 'status'), 'status']
+                      : columns.filter((c) => c !== 'status');
+                    onSettingsChange({
+                      ...settings,
+                      visibleColumns: newColumns,
+                    });
                   }}
                 >
                   Status
                 </DropdownMenuCheckboxItem>
                 <DropdownMenuCheckboxItem
-                  checked={settings.visibleColumns?.includes('last_updated') ?? true}
+                  checked={
+                    settings.visibleColumns?.includes('last_updated') ?? true
+                  }
                   onCheckedChange={(checked) => {
-                    const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions'];
+                    const columns = settings.visibleColumns || [
+                      'board',
+                      'progress',
+                      'tasks',
+                      'status',
+                      'last_updated',
+                      'actions',
+                    ];
                     const newColumns = checked
-                      ? [...columns.filter(c => c !== 'last_updated'), 'last_updated']
-                      : columns.filter(c => c !== 'last_updated');
-                    onSettingsChange({ ...settings, visibleColumns: newColumns });
+                      ? [
+                          ...columns.filter((c) => c !== 'last_updated'),
+                          'last_updated',
+                        ]
+                      : columns.filter((c) => c !== 'last_updated');
+                    onSettingsChange({
+                      ...settings,
+                      visibleColumns: newColumns,
+                    });
                   }}
                 >
                   Last Updated
@@ -186,11 +255,21 @@ export function ViewSettingsPanel({
                 <DropdownMenuCheckboxItem
                   checked={settings.visibleColumns?.includes('actions') ?? true}
                   onCheckedChange={(checked) => {
-                    const columns = settings.visibleColumns || ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions'];
+                    const columns = settings.visibleColumns || [
+                      'board',
+                      'progress',
+                      'tasks',
+                      'status',
+                      'last_updated',
+                      'actions',
+                    ];
                     const newColumns = checked
-                      ? [...columns.filter(c => c !== 'actions'), 'actions']
-                      : columns.filter(c => c !== 'actions');
-                    onSettingsChange({ ...settings, visibleColumns: newColumns });
+                      ? [...columns.filter((c) => c !== 'actions'), 'actions']
+                      : columns.filter((c) => c !== 'actions');
+                    onSettingsChange({
+                      ...settings,
+                      visibleColumns: newColumns,
+                    });
                   }}
                 >
                   Actions
@@ -208,7 +287,7 @@ export function ViewSettingsPanel({
     smartFilters.hasUrgentTasks && 'Urgent Tasks',
     smartFilters.hasMultipleOverdue && 'Multiple Overdue',
     smartFilters.hasWorkloadImbalance && 'Workload Imbalance',
-    settings.forceShowAll && 'Show All Override'
+    settings.forceShowAll && 'Show All Override',
   ].filter(Boolean);
 
   return (
@@ -268,13 +347,23 @@ export function ViewSettingsPanel({
               onSettingsChange({ ...settings, sortBy: value as any })
             }
           >
-            <DropdownMenuRadioItem value="name">Sort by Name</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="name">
+              Sort by Name
+            </DropdownMenuRadioItem>
             <DropdownMenuRadioItem value="id">Sort by ID</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="created_at">Sort by Created Date</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="progress">Sort by Progress</DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="tasks">Sort by Task Count</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="created_at">
+              Sort by Created Date
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="progress">
+              Sort by Progress
+            </DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="tasks">
+              Sort by Task Count
+            </DropdownMenuRadioItem>
             {settings.viewMode === 'groups' && (
-              <DropdownMenuRadioItem value="group">Sort by Group</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="group">
+                Sort by Group
+              </DropdownMenuRadioItem>
             )}
           </DropdownMenuRadioGroup>
 
@@ -282,7 +371,7 @@ export function ViewSettingsPanel({
             <Button
               variant="ghost"
               size="sm"
-              className="w-full h-8 gap-2 justify-start"
+              className="h-8 w-full justify-start gap-2"
               onClick={() =>
                 onSettingsChange({
                   ...settings,
@@ -330,4 +419,4 @@ export function ViewSettingsPanel({
       </DropdownMenu>
     </div>
   );
-} 
\ No newline at end of file
+}
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/enhanced-content.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/enhanced-content.tsx
index 976e4e125..c211cd136 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/enhanced-content.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/enhanced-content.tsx
@@ -1,25 +1,31 @@
 'use client';
 
-import { EnhancedBoard, ViewSettings, DEFAULT_VIEW_SETTINGS, STORAGE_KEYS, SmartFilters } from './types';
+import { projectColumns } from './columns';
 import { BoardList } from './components/board-list';
 import { ViewSettingsPanel } from './components/view-settings';
-import { useState, useEffect } from 'react';
-import dynamic from 'next/dynamic';
-import { Button } from '@tuturuuu/ui/button';
+import {
+  DEFAULT_VIEW_SETTINGS,
+  EnhancedBoard,
+  STORAGE_KEYS,
+  SmartFilters,
+  ViewSettings,
+} from './types';
+import { CustomDataTable } from '@/components/custom-data-table';
 import { Badge } from '@tuturuuu/ui/badge';
-import { 
-  Grid3X3, 
-  LayoutGrid, 
-  List, 
-  TrendingUp,
-  Clock,
+import { Button } from '@tuturuuu/ui/button';
+import {
   AlertCircle,
+  Clock,
+  Columns,
   Flag,
+  Grid3X3,
+  LayoutGrid,
+  List,
   RefreshCw,
-  Columns
+  TrendingUp,
 } from '@tuturuuu/ui/icons';
-import { CustomDataTable } from '@/components/custom-data-table';
-import { projectColumns } from './columns';
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
 
 interface EnhancedTaskBoardsContentProps {
   boards: EnhancedBoard[];
@@ -28,11 +34,11 @@ interface EnhancedTaskBoardsContentProps {
   isOwner?: boolean;
 }
 
-function EnhancedTaskBoardsContentInner({ 
-  boards, 
+function EnhancedTaskBoardsContentInner({
+  boards,
   count,
   wsId: _wsId,
-  isOwner = false
+  isOwner = false,
 }: EnhancedTaskBoardsContentProps) {
   const [settings, setSettings] = useState<ViewSettings>(DEFAULT_VIEW_SETTINGS);
 
@@ -52,14 +58,17 @@ function EnhancedTaskBoardsContentInner({
   // Save settings to localStorage
   const handleSettingsChange = (newSettings: ViewSettings) => {
     setSettings(newSettings);
-    localStorage.setItem(STORAGE_KEYS.VIEW_SETTINGS, JSON.stringify(newSettings));
+    localStorage.setItem(
+      STORAGE_KEYS.VIEW_SETTINGS,
+      JSON.stringify(newSettings)
+    );
   };
 
   // Create smart filters data
   const smartFilters: SmartFilters = {
-    hasUrgentTasks: boards.some(b => b.stats.hasUrgentTasks),
-    hasMultipleOverdue: boards.some(b => b.stats.hasMultipleOverdue),
-    hasWorkloadImbalance: boards.some(b => b.stats.hasWorkloadImbalance),
+    hasUrgentTasks: boards.some((b) => b.stats.hasUrgentTasks),
+    hasMultipleOverdue: boards.some((b) => b.stats.hasMultipleOverdue),
+    hasWorkloadImbalance: boards.some((b) => b.stats.hasWorkloadImbalance),
   };
 
   // Refresh function
@@ -76,50 +85,67 @@ function EnhancedTaskBoardsContentInner({
   ];
 
   // Summary statistics
-  const totalActiveBoards = boards.filter(b => b.stats.activeTasks > 0).length;
-  const totalUrgentTasks = boards.reduce((sum, b) => sum + b.stats.priorityDistribution.urgent, 0);
-  const totalOverdueBoards = boards.filter(b => b.stats.overdueTasks > 0).length;
-  const avgProgress = boards.length > 0 
-    ? Math.round(boards.reduce((sum, b) => sum + b.stats.completionRate, 0) / boards.length)
-    : 0;
+  const totalActiveBoards = boards.filter(
+    (b) => b.stats.activeTasks > 0
+  ).length;
+  const totalUrgentTasks = boards.reduce(
+    (sum, b) => sum + b.stats.priorityDistribution.urgent,
+    0
+  );
+  const totalOverdueBoards = boards.filter(
+    (b) => b.stats.overdueTasks > 0
+  ).length;
+  const avgProgress =
+    boards.length > 0
+      ? Math.round(
+          boards.reduce((sum, b) => sum + b.stats.completionRate, 0) /
+            boards.length
+        )
+      : 0;
 
   return (
     <div className="space-y-6">
       {/* Enhanced Header with Quick Stats */}
-      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4 p-4 bg-muted/20 rounded-lg border">
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 flex-1">
+      <div className="flex flex-col justify-between gap-4 rounded-lg border bg-muted/20 p-4 lg:flex-row lg:items-center">
+        <div className="grid flex-1 grid-cols-2 gap-4 lg:grid-cols-4">
           <div className="flex items-center gap-2">
             <TrendingUp className="h-4 w-4 text-blue-600" />
             <div className="text-sm">
               <span className="font-semibold">{avgProgress}%</span>
-              <span className="text-muted-foreground ml-1">avg progress</span>
+              <span className="ml-1 text-muted-foreground">avg progress</span>
             </div>
           </div>
-          
+
           <div className="flex items-center gap-2">
             <Clock className="h-4 w-4 text-green-600" />
             <div className="text-sm">
               <span className="font-semibold">{totalActiveBoards}</span>
-              <span className="text-muted-foreground ml-1">active boards</span>
+              <span className="ml-1 text-muted-foreground">active boards</span>
             </div>
           </div>
-          
+
           {totalUrgentTasks > 0 && (
             <div className="flex items-center gap-2">
               <Flag className="h-4 w-4 text-red-600" />
               <div className="text-sm">
-                <span className="font-semibold text-red-600">{totalUrgentTasks}</span>
-                <span className="text-muted-foreground ml-1">urgent tasks</span>
+                <span className="font-semibold text-red-600">
+                  {totalUrgentTasks}
+                </span>
+                <span className="ml-1 text-muted-foreground">urgent tasks</span>
               </div>
             </div>
           )}
-          
+
           {totalOverdueBoards > 0 && (
             <div className="flex items-center gap-2">
               <AlertCircle className="h-4 w-4 text-orange-600" />
               <div className="text-sm">
-                <span className="font-semibold text-orange-600">{totalOverdueBoards}</span>
-                <span className="text-muted-foreground ml-1">overdue boards</span>
+                <span className="font-semibold text-orange-600">
+                  {totalOverdueBoards}
+                </span>
+                <span className="ml-1 text-muted-foreground">
+                  overdue boards
+                </span>
               </div>
             </div>
           )}
@@ -127,21 +153,22 @@ function EnhancedTaskBoardsContentInner({
       </div>
 
       {/* Enhanced Controls */}
-      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
         <div className="flex items-center gap-2">
           <span className="text-sm text-muted-foreground">
             {count} board{count !== 1 ? 's' : ''}
           </span>
-          {(smartFilters.hasUrgentTasks || 
-            smartFilters.hasMultipleOverdue || 
-            smartFilters.hasWorkloadImbalance) && !settings.forceShowAll && (
-            <Badge variant="outline" className="text-xs">
-              Smart filters active
-            </Badge>
-          )}
+          {(smartFilters.hasUrgentTasks ||
+            smartFilters.hasMultipleOverdue ||
+            smartFilters.hasWorkloadImbalance) &&
+            !settings.forceShowAll && (
+              <Badge variant="outline" className="text-xs">
+                Smart filters active
+              </Badge>
+            )}
         </div>
 
-        <div className="flex items-center gap-2 flex-wrap">
+        <div className="flex flex-wrap items-center gap-2">
           {/* View Mode Buttons */}
           <div className="flex items-center rounded-lg border bg-background p-1">
             {viewModeButtons.map(({ mode, icon: Icon, label }) => (
@@ -149,7 +176,9 @@ function EnhancedTaskBoardsContentInner({
                 key={mode}
                 variant={settings.viewMode === mode ? 'default' : 'ghost'}
                 size="sm"
-                onClick={() => handleSettingsChange({ ...settings, viewMode: mode })}
+                onClick={() =>
+                  handleSettingsChange({ ...settings, viewMode: mode })
+                }
                 className="flex items-center gap-2 text-xs"
               >
                 <Icon className="h-4 w-4" />
@@ -170,7 +199,7 @@ function EnhancedTaskBoardsContentInner({
                 <RefreshCw className="h-4 w-4" />
                 Refresh
               </Button>
-              
+
               <Button
                 variant="outline"
                 size="sm"
@@ -183,8 +212,8 @@ function EnhancedTaskBoardsContentInner({
           )}
 
           {/* View Settings */}
-          <ViewSettingsPanel 
-            settings={settings} 
+          <ViewSettingsPanel
+            settings={settings}
             onSettingsChange={handleSettingsChange}
             onRefresh={handleRefresh}
             smartFilters={smartFilters}
@@ -220,14 +249,14 @@ function EnhancedTaskBoardsContentInner({
 
 export const EnhancedTaskBoardsContent = dynamic(
   () => Promise.resolve(EnhancedTaskBoardsContentInner),
-  { 
+  {
     ssr: false,
     loading: () => (
       <div className="space-y-4">
-        <div className="h-16 bg-muted/50 rounded animate-pulse" />
-        <div className="h-8 bg-muted/50 rounded animate-pulse" />
-        <div className="h-64 bg-muted/50 rounded animate-pulse" />
+        <div className="h-16 animate-pulse rounded bg-muted/50" />
+        <div className="h-8 animate-pulse rounded bg-muted/50" />
+        <div className="h-64 animate-pulse rounded bg-muted/50" />
       </div>
-    )
+    ),
   }
-); 
\ No newline at end of file
+);
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/page.tsx b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/page.tsx
index 42c09bc8f..7918e1b79 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/page.tsx
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/page.tsx
@@ -1,5 +1,6 @@
 import { EnhancedTaskBoardsContent } from './enhanced-content';
 import { TaskBoardForm } from './form';
+import { EnhancedBoard } from './types';
 import { createClient } from '@tuturuuu/supabase/next/server';
 import { TaskBoard } from '@tuturuuu/types/primitives/TaskBoard';
 import FeatureSummary from '@tuturuuu/ui/custom/feature-summary';
@@ -7,7 +8,6 @@ import { Separator } from '@tuturuuu/ui/separator';
 import { getPermissions } from '@tuturuuu/utils/workspace-helper';
 import { getTranslations } from 'next-intl/server';
 import { redirect } from 'next/navigation';
-import { EnhancedBoard } from './types';
 
 interface Props {
   params: Promise<{
@@ -33,14 +33,18 @@ export default async function WorkspaceProjectsPage({
 
   // Check if the current user is a workspace owner/creator
   const supabase = await createClient();
-  const { data: { user } } = await supabase.auth.getUser();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
   const { data: workspace } = await supabase
     .from('workspaces')
     .select('creator_id')
     .eq('id', wsId)
     .single();
-  
-  const isOwner = Boolean(user && workspace && workspace.creator_id === user.id);
+
+  const isOwner = Boolean(
+    user && workspace && workspace.creator_id === user.id
+  );
 
   const { data: rawData, count } = await getData(wsId, await searchParams);
   const t = await getTranslations();
@@ -49,11 +53,17 @@ export default async function WorkspaceProjectsPage({
   const enhancedBoards: EnhancedBoard[] = await Promise.all(
     rawData.map(async (board, index) => {
       const boardStats = await getBoardStats(board.id);
-      
+
       // Sample group assignment based on board name or index
-      const groups = ['gaming', 'robotics', 'marketing', 'development', 'design'];
+      const groups = [
+        'gaming',
+        'robotics',
+        'marketing',
+        'development',
+        'design',
+      ];
       const groupId = groups[index % groups.length];
-      
+
       return {
         ...board,
         href: `/${wsId}/tasks/boards/${board.id}`,
@@ -75,10 +85,10 @@ export default async function WorkspaceProjectsPage({
         requireExpansion
       />
       <Separator className="my-4" />
-      <EnhancedTaskBoardsContent 
-        boards={enhancedBoards} 
-        count={count} 
-        wsId={wsId} 
+      <EnhancedTaskBoardsContent
+        boards={enhancedBoards}
+        count={count}
+        wsId={wsId}
         isOwner={isOwner}
       />
     </>
@@ -122,17 +132,19 @@ async function getData(
 
 async function getBoardStats(boardId: string) {
   const supabase = await createClient();
-  
+
   // Get all tasks for this board with assignee information
   const { data: tasks } = await supabase
     .from('tasks')
-    .select(`
+    .select(
+      `
       id, 
       list_id, 
       priority, 
       end_date,
       task_assignees!inner(user_id, workspace_users!inner(display_name))
-    `)
+    `
+    )
     .eq('board_id', boardId);
 
   // Get all lists for this board with their status
@@ -142,81 +154,107 @@ async function getBoardStats(boardId: string) {
     .eq('board_id', boardId);
 
   const totalTasks = tasks?.length || 0;
-  
+
   // Create a map of list_id to status for quick lookup
-  const listStatusMap = new Map(lists?.map(list => [list.id, list.status]) || []);
-  
+  const listStatusMap = new Map(
+    lists?.map((list) => [list.id, list.status]) || []
+  );
+
   // Calculate task statuses based on which list they're in
-  const completedTasks = tasks?.filter(task => {
-    const listStatus = listStatusMap.get(task.list_id);
-    return listStatus === 'done' || listStatus === 'closed';
-  }).length || 0;
-  
-  const activeTasks = tasks?.filter(task => {
-    const listStatus = listStatusMap.get(task.list_id);
-    return listStatus === 'active' || listStatus === 'not_started';
-  }).length || 0;
-  
+  const completedTasks =
+    tasks?.filter((task) => {
+      const listStatus = listStatusMap.get(task.list_id);
+      return listStatus === 'done' || listStatus === 'closed';
+    }).length || 0;
+
+  const activeTasks =
+    tasks?.filter((task) => {
+      const listStatus = listStatusMap.get(task.list_id);
+      return listStatus === 'active' || listStatus === 'not_started';
+    }).length || 0;
+
   const now = new Date();
-  const overdueTasks = tasks?.filter(task => {
-    const listStatus = listStatusMap.get(task.list_id);
-    return task.end_date && 
-           new Date(task.end_date) < now && 
-           (listStatus !== 'done' && listStatus !== 'closed');
-  }).length || 0;
+  const overdueTasks =
+    tasks?.filter((task) => {
+      const listStatus = listStatusMap.get(task.list_id);
+      return (
+        task.end_date &&
+        new Date(task.end_date) < now &&
+        listStatus !== 'done' &&
+        listStatus !== 'closed'
+      );
+    }).length || 0;
 
   // Priority distribution - simplified since we don't know the exact priority values
   const priorityDistribution = {
-    low: tasks?.filter(t => t.priority === 1).length || 0,
-    medium: tasks?.filter(t => t.priority === 2).length || 0,
-    high: tasks?.filter(t => t.priority === 3).length || 0,
-    urgent: tasks?.filter(t => t.priority === 4).length || 0,
+    low: tasks?.filter((t) => t.priority === 1).length || 0,
+    medium: tasks?.filter((t) => t.priority === 2).length || 0,
+    high: tasks?.filter((t) => t.priority === 3).length || 0,
+    urgent: tasks?.filter((t) => t.priority === 4).length || 0,
   };
 
   // Status distribution based on list statuses
   const statusDistribution = {
-    not_started: tasks?.filter(task => listStatusMap.get(task.list_id) === 'not_started').length || 0,
-    active: tasks?.filter(task => listStatusMap.get(task.list_id) === 'active').length || 0,
-    done: tasks?.filter(task => listStatusMap.get(task.list_id) === 'done').length || 0,
-    closed: tasks?.filter(task => listStatusMap.get(task.list_id) === 'closed').length || 0,
+    not_started:
+      tasks?.filter((task) => listStatusMap.get(task.list_id) === 'not_started')
+        .length || 0,
+    active:
+      tasks?.filter((task) => listStatusMap.get(task.list_id) === 'active')
+        .length || 0,
+    done:
+      tasks?.filter((task) => listStatusMap.get(task.list_id) === 'done')
+        .length || 0,
+    closed:
+      tasks?.filter((task) => listStatusMap.get(task.list_id) === 'closed')
+        .length || 0,
   };
 
   // Workload analysis
-  const assigneeWorkload = tasks?.reduce((acc, task) => {
-    task.task_assignees?.forEach((assignee: any) => {
-      const userId = assignee.user_id;
-      const userName = assignee.workspace_users?.display_name || 'Unknown';
-      
-      if (!acc[userId]) {
-        acc[userId] = { userId, name: userName, taskCount: 0 };
-      }
-      acc[userId].taskCount++;
-    });
-    return acc;
-  }, {} as Record<string, { userId: string; name: string; taskCount: number }>) || {};
+  const assigneeWorkload =
+    tasks?.reduce(
+      (acc, task) => {
+        task.task_assignees?.forEach((assignee: any) => {
+          const userId = assignee.user_id;
+          const userName = assignee.workspace_users?.display_name || 'Unknown';
+
+          if (!acc[userId]) {
+            acc[userId] = { userId, name: userName, taskCount: 0 };
+          }
+          acc[userId].taskCount++;
+        });
+        return acc;
+      },
+      {} as Record<string, { userId: string; name: string; taskCount: number }>
+    ) || {};
 
   const workloadStats = Object.values(assigneeWorkload);
-  const avgTasksPerPerson = workloadStats.length > 0 
-    ? workloadStats.reduce((sum, stat) => sum + stat.taskCount, 0) / workloadStats.length 
-    : 0;
-  
+  const avgTasksPerPerson =
+    workloadStats.length > 0
+      ? workloadStats.reduce((sum, stat) => sum + stat.taskCount, 0) /
+        workloadStats.length
+      : 0;
+
   // Mark users as overloaded if they have >150% of average tasks
-  const assigneeWorkloadArray = workloadStats.map(stat => ({
+  const assigneeWorkloadArray = workloadStats.map((stat) => ({
     ...stat,
-    isOverloaded: stat.taskCount > avgTasksPerPerson * 1.5 && avgTasksPerPerson > 0
+    isOverloaded:
+      stat.taskCount > avgTasksPerPerson * 1.5 && avgTasksPerPerson > 0,
   }));
 
   // Smart detection flags
   const hasUrgentTasks = priorityDistribution.urgent > 0;
   const hasMultipleOverdue = overdueTasks >= 2;
-  const hasWorkloadImbalance = assigneeWorkloadArray.some(assignee => assignee.isOverloaded);
+  const hasWorkloadImbalance = assigneeWorkloadArray.some(
+    (assignee) => assignee.isOverloaded
+  );
 
   return {
     totalTasks,
     completedTasks,
     activeTasks,
     overdueTasks,
-    completionRate: totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0,
+    completionRate:
+      totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0,
     priorityDistribution,
     statusDistribution,
     totalLists: lists?.length || 0,
diff --git a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/types.ts b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/types.ts
index dd1093a67..07a325ca7 100644
--- a/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/types.ts
+++ b/apps/web/src/app/[locale]/(dashboard)/[wsId]/tasks/boards/types.ts
@@ -48,7 +48,13 @@ export interface BoardGroup {
 }
 
 export type ViewMode = 'table' | 'cards' | 'groups';
-export type SortField = 'name' | 'id' | 'created_at' | 'progress' | 'tasks' | 'group';
+export type SortField =
+  | 'name'
+  | 'id'
+  | 'created_at'
+  | 'progress'
+  | 'tasks'
+  | 'group';
 export type SortDirection = 'asc' | 'desc';
 
 export interface SmartFilters {
@@ -77,33 +83,40 @@ export const DEFAULT_VIEW_SETTINGS: ViewSettings = {
   sortBy: 'name',
   sortOrder: 'asc',
   forceShowAll: false,
-  visibleColumns: ['board', 'progress', 'tasks', 'status', 'last_updated', 'actions'],
+  visibleColumns: [
+    'board',
+    'progress',
+    'tasks',
+    'status',
+    'last_updated',
+    'actions',
+  ],
   groupView: {
-    collapsed: []
+    collapsed: [],
   },
   pagination: {
     page: 1,
-    pageSize: 5
-  }
+    pageSize: 5,
+  },
 };
 
 export const STORAGE_KEYS = {
-  VIEW_SETTINGS: 'task_boards_view_settings'
+  VIEW_SETTINGS: 'task_boards_view_settings',
 } as const;
 
 // Predefined group colors
 export const GROUP_COLORS = {
-  'Gaming': '#10b981', // emerald
-  'Robotics': '#3b82f6', // blue
-  'Marketing': '#f59e0b', // amber
-  'Development': '#8b5cf6', // violet
-  'Design': '#ec4899', // pink
-  'Research': '#06b6d4', // cyan
-  'Sales': '#84cc16', // lime
-  'Support': '#f97316', // orange
-  'Finance': '#6366f1', // indigo
-  'HR': '#14b8a6', // teal
-  'Operations': '#ef4444', // red
-  'Strategy': '#64748b', // slate
-  'Default': '#6b7280' // gray
-} as const; 
\ No newline at end of file
+  Gaming: '#10b981', // emerald
+  Robotics: '#3b82f6', // blue
+  Marketing: '#f59e0b', // amber
+  Development: '#8b5cf6', // violet
+  Design: '#ec4899', // pink
+  Research: '#06b6d4', // cyan
+  Sales: '#84cc16', // lime
+  Support: '#f97316', // orange
+  Finance: '#6366f1', // indigo
+  HR: '#14b8a6', // teal
+  Operations: '#ef4444', // red
+  Strategy: '#64748b', // slate
+  Default: '#6b7280', // gray
+} as const;