diff --git a/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BookingLevelCalendar.tsx b/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BookingLevelCalendar.tsx
index b8a80020..c0b91f81 100644
--- a/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BookingLevelCalendar.tsx
+++ b/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BookingLevelCalendar.tsx
@@ -24,7 +24,7 @@ const BookingLevelCalendar = () => {
       const daysInMonth = new Date(year, month + 1, 0).getDate();
 
       const fetchPromises = [];
-      for (let day = 1; day <= daysInMonth; day++) {
+      for (let day = 0; day <= daysInMonth + 1; day++) {  // Fetch one extra day
         const date = new Date(year, month, day);
         const formattedDate = date.toISOString().split('T')[0];
         fetchPromises.push(
@@ -41,7 +41,15 @@ const BookingLevelCalendar = () => {
       try {
         const results = await Promise.all(fetchPromises);
         const newBookingData = Object.assign({}, ...results);
-        setBookingData(newBookingData);
+        // Shift all predictions down by one day
+        const shiftedBookingData = Object.entries(newBookingData).reduce((acc: { [key: string]: BookingData }, [date, data]) => {
+          const shiftedDate = new Date(date);
+          shiftedDate.setDate(shiftedDate.getDate() - 1);
+          const shiftedDateString = shiftedDate.toISOString().split('T')[0];
+          acc[shiftedDateString] = data as BookingData;
+          return acc;
+        }, {});
+        setBookingData(shiftedBookingData);
       } catch (error) {
         console.error('Error fetching booking data:', error);
       }
@@ -53,7 +61,11 @@ const BookingLevelCalendar = () => {
         const response = await fetch(`https://date.nager.at/api/v3/PublicHolidays/${year}/ZA`);
         const holidays = await response.json();
         const holidayMap = holidays.reduce((acc: HolidayData, holiday: { date: string; name: string }) => {
-          acc[holiday.date] = holiday.name;
+          // Move the holiday one day back
+          const holidayDate = new Date(holiday.date);
+          holidayDate.setDate(holidayDate.getDate() - 1);
+          const adjustedDate = holidayDate.toISOString().split('T')[0];
+          acc[adjustedDate] = holiday.name;
           return acc;
         }, {});
         setHolidayData(holidayMap);
@@ -103,7 +115,7 @@ const BookingLevelCalendar = () => {
               {holiday && (
                 <>
                   <p className='text-text_col_secondary_alt'><strong>{holiday}</strong></p>
-                  <p className="text-yellow-400">Note: AI predictions may be less accurate on holidays.</p>
+                  <p className="text-yellow-400">Note: Predictions on Special days may be inaccurate.</p>
                 </>
               )}
               {dayData ? (
diff --git a/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BuildingTower.tsx b/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BuildingTower.tsx
index 3513cccf..02afd23e 100644
--- a/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BuildingTower.tsx
+++ b/frontend/occupi-web/src/components/aiDashboard/aiDashGraphs/BuildingTower.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
 import { OrbitControls, Text } from '@react-three/drei';
 import { Vector3, Group, Color } from 'three';
@@ -11,20 +11,25 @@ interface FloorProps {
   depth: number;
 }
 
-function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
-  const [, setHovered] = useState(false)
+interface Room {
+  floorNo: string;
+  maxOccupancy: number;
+}
+
+const Floor: React.FC<FloorProps> = ({ position, occupancy, floorNumber, width, depth }) => {
+  const [, setHovered] = useState(false);
 
-  const getColor = (value: number) => {
+  const getColor = (value: number): Vector3 => {
     const colors = [
       [0.2, 0.8, 0.2], // Green (1)
       [0.5, 0.8, 0.2], // Yellow-green (2)
       [0.8, 0.8, 0.2], // Yellow (3)
       [0.8, 0.5, 0.2], // Orange (4)
-      [0.8, 0.2, 0.2] // Red (5)
-    ]
-    const index = Math.max(0, Math.min(Math.floor(value) - 1, 4))
-    return new Vector3(...colors[index])
-  }
+      [0.8, 0.2, 0.2]  // Red (5)
+    ];
+    const index = Math.max(0, Math.min(Math.floor(value) - 1, 4));
+    return new Vector3(...colors[index]);
+  };
 
   return (
     <group position={new Vector3(...position)}>
@@ -40,6 +45,8 @@ function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
         rotation={[0, -Math.PI / 2, 0]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Floor ${floorNumber}`}
       </Text>
@@ -48,6 +55,8 @@ function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
         rotation={[0, Math.PI / 2, 0]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Occupancy: ${occupancy}/5`}
       </Text>
@@ -56,6 +65,8 @@ function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
         rotation={[0, Math.PI, 0]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Floor ${floorNumber}`}
       </Text>
@@ -63,34 +74,36 @@ function Floor({ position, occupancy, floorNumber, width, depth }: FloorProps) {
         position={[0, 0, -depth / 2 - 0.2]}
         fontSize={0.2}
         color="black"
+        anchorX="center"
+        anchorY="middle"
       >
         {`Occupancy: ${occupancy}/5`}
       </Text>
     </group>
-  )
-}
+  );
+};
 
 interface BuildingProps {
   floors: number[];
 }
 
-function Building({ floors }: BuildingProps) {
-  const groupRef = useRef<Group>(null)
-  const baseWidth = 4
-  const baseDepth = 4
-  const shrinkFactor = 0.05
+const Building: React.FC<BuildingProps> = ({ floors }) => {
+  const groupRef = useRef<Group>(null);
+  const baseWidth = 4;
+  const baseDepth = 4;
+  const shrinkFactor = 0.05;
 
   useFrame(() => {
     if (groupRef.current) {
-      groupRef.current.rotation.y += 0.002
+      groupRef.current.rotation.y += 0.002;
     }
-  })
+  });
 
   return (
     <group ref={groupRef}>
       {floors.map((occupancy: number, index: number) => {
-        const width = baseWidth - index * shrinkFactor
-        const depth = baseDepth - index * shrinkFactor
+        const width = baseWidth - index * shrinkFactor;
+        const depth = baseDepth - index * shrinkFactor;
         return (
           <Floor
             key={index}
@@ -100,14 +113,41 @@ function Building({ floors }: BuildingProps) {
             width={width}
             depth={depth}
           />
-        )
+        );
       })}
     </group>
-  )
-}
+  );
+};
 
-export default function BuildingTower() {
-  const occupancyData = [5, 4, 3, 3, 2, 2, 1]
+const BuildingTower: React.FC = () => {
+  const [occupancyData, setOccupancyData] = useState<number[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // In a real scenario, you would fetch this data from your API
+        const response = await fetch('/api/view-rooms');
+        const data = await response.json();
+        
+        const rooms: Room[] = data.data;
+        const highestFloor = Math.max(...rooms.map(room => parseInt(room.floorNo)));
+        
+        // Calculate occupancy for each floor
+        const occupancy = Array(highestFloor + 1).fill(0);
+        rooms.forEach((room: Room) => {
+          const floor = parseInt(room.floorNo);
+          occupancy[floor] = Math.max(occupancy[floor], room.maxOccupancy);
+        });
+        
+        // Remove the ground floor (index 0) and reverse the array so the highest floor is first
+        setOccupancyData(occupancy.slice(1).reverse());
+      } catch (error) {
+        console.error('Error fetching room data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
 
   return (
     <div style={{ width: '100%', height: '100%', minHeight: '300px' }}>
@@ -118,5 +158,7 @@ export default function BuildingTower() {
         <OrbitControls target={[0, 2, 0]} maxPolarAngle={Math.PI / 2} />
       </Canvas>
     </div>
-  )
-}
\ No newline at end of file
+  );
+};
+
+export default BuildingTower;
\ No newline at end of file
diff --git a/frontend/occupi-web/src/components/workerStats/ActiveEmployeeCard.tsx b/frontend/occupi-web/src/components/workerStats/ActiveEmployeeCard.tsx
index 035a94b7..b48c09c3 100644
--- a/frontend/occupi-web/src/components/workerStats/ActiveEmployeeCard.tsx
+++ b/frontend/occupi-web/src/components/workerStats/ActiveEmployeeCard.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Avatar, Button, Spinner, Progress } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Avatar, Button, Progress, Skeleton } from "@nextui-org/react";
 import { ChevronDown, ChevronUp, Clock, Calendar, TrendingUp } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { getMostActiveEmployee, MostActiveEmployeeData } from 'WorkerStatsService';
@@ -36,8 +36,10 @@ const ActiveEmployeeCard = () => {
 
   if (isLoading) {
     return (
-      <Card className="max-w-[400px] h-[300px] flex items-center justify-center">
-        <Spinner label="Loading..." color="white" labelColor="primary" />
+      <Card className="max-w-[400px] h-[300px] p-4">
+        <Skeleton className="w-full h-full rounded-lg">
+            <div className="h-3 w-2/5 rounded-lg bg-default-200"></div>
+        </Skeleton>
       </Card>
     );
   }
diff --git a/frontend/occupi-web/src/components/workerStats/AverageHoursChart.tsx b/frontend/occupi-web/src/components/workerStats/AverageHoursChart.tsx
index 14d11794..b063a487 100644
--- a/frontend/occupi-web/src/components/workerStats/AverageHoursChart.tsx
+++ b/frontend/occupi-web/src/components/workerStats/AverageHoursChart.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Spinner } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Skeleton } from "@nextui-org/react";
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { getAverageHours } from 'WorkerStatsService';
 
@@ -29,7 +29,26 @@ const AverageHoursChart = () => {
     fetchData();
   }, []);
 
-  if (loading) return <Spinner />;
+  if (loading) {
+    return (
+      <div className="w-[500px] h-[600px]">
+        
+          <Card key={1} className="w-full">
+            <CardBody className="p-4 space-y-3">
+              
+              <div className="flex flex-wrap gap-2">
+                
+                  <Skeleton key={1} className="w-full h-full rounded-lg">
+                    <div className="h-[600px] w-full rounded-lg bg-default-200"></div>
+                  </Skeleton>
+                
+              </div>
+            </CardBody>
+          </Card>
+      
+      </div>
+    );
+  }
   if (error) return <div>{error}</div>;
 
   return (
diff --git a/frontend/occupi-web/src/components/workerStats/HoursDashboard.tsx b/frontend/occupi-web/src/components/workerStats/HoursDashboard.tsx
index d947bf55..5e240c5d 100644
--- a/frontend/occupi-web/src/components/workerStats/HoursDashboard.tsx
+++ b/frontend/occupi-web/src/components/workerStats/HoursDashboard.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Spinner } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Skeleton } from "@nextui-org/react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { getHours } from 'WorkerStatsService';
 
@@ -30,9 +30,22 @@ const HoursDashboard = () => {
 
   if (loading) {
     return (
-      <Card className="w-full h-[400px] flex items-center justify-center">
-        <Spinner size="lg" />
-      </Card>
+      <div className="w-[500px] h-[600px]">
+        
+          <Card key={1} className="w-full">
+            <CardBody className="p-4 space-y-3">
+              
+              <div className="flex flex-wrap gap-2">
+                
+                  <Skeleton key={1} className="w-full h-full rounded-lg">
+                    <div className="h-[600px] w-full rounded-lg bg-default-200"></div>
+                  </Skeleton>
+                
+              </div>
+            </CardBody>
+          </Card>
+      
+      </div>
     );
   }
 
diff --git a/frontend/occupi-web/src/components/workerStats/LeastActiveEmployeeCard.tsx b/frontend/occupi-web/src/components/workerStats/LeastActiveEmployeeCard.tsx
index de195ea3..acbe90c5 100644
--- a/frontend/occupi-web/src/components/workerStats/LeastActiveEmployeeCard.tsx
+++ b/frontend/occupi-web/src/components/workerStats/LeastActiveEmployeeCard.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Avatar, Button, Spinner, Progress } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Avatar, Button, Progress, Skeleton } from "@nextui-org/react";
 import { ChevronDown, ChevronUp, Clock, Calendar, TrendingDown } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { getLeastActiveEmployee, LeastActiveEmployeeData } from 'WorkerStatsService';
@@ -36,8 +36,11 @@ const LeastActiveEmployeeCard = () => {
 
   if (isLoading) {
     return (
-      <Card className="max-w-[400px] h-[300px] flex items-center justify-center">
-        <Spinner label="Loading..." color="primary" labelColor="primary" />
+      <Card className="w-[300px] h-[300px] p-4">
+        
+        <Skeleton className="w-full h-full rounded-lg">
+            <div className="h-3 w-2/5 rounded-lg bg-default-200"></div>
+          </Skeleton>
       </Card>
     );
   }
diff --git a/frontend/occupi-web/src/components/workerStats/PeakOfficeHoursChart.tsx b/frontend/occupi-web/src/components/workerStats/PeakOfficeHoursChart.tsx
index 877660f8..bd8c8472 100644
--- a/frontend/occupi-web/src/components/workerStats/PeakOfficeHoursChart.tsx
+++ b/frontend/occupi-web/src/components/workerStats/PeakOfficeHoursChart.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Spinner } from "@nextui-org/react";
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import React from 'react';
+import { Card, CardBody, Chip, Tooltip, Skeleton } from "@nextui-org/react";
+import { Info } from 'lucide-react'; // Importing the Info icon
 import { getPeakOfficeHours } from 'WorkerStatsService';
 
 interface PeakOfficeHoursResponse {
@@ -9,12 +9,12 @@ interface PeakOfficeHoursResponse {
   }[];
 }
 
-const PeakOfficeHoursChart = () => {
-  const [data, setData] = useState<{ weekday: string; hours: number[] }[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+const PeakOfficeHoursCard = () => {
+  const [data, setData] = React.useState<{ weekday: string; hours: number[] }[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const fetchData = async () => {
       try {
         const response = await getPeakOfficeHours({});
@@ -30,30 +30,93 @@ const PeakOfficeHoursChart = () => {
     fetchData();
   }, []);
 
-  if (loading) return <Spinner />;
-  if (error) return <div>{error}</div>;
+  if (loading) {
+    return (
+      <div className="w-[500px] h-[600px]">
+        
+          <Card key={1} className="w-full">
+            <CardBody className="p-4 space-y-3">
+              
+              <div className="flex flex-wrap gap-2">
+                
+                  <Skeleton key={1} className="w-full h-full rounded-lg">
+                    <div className="h-[600px] w-full rounded-lg bg-default-200"></div>
+                  </Skeleton>
+                
+              </div>
+            </CardBody>
+          </Card>
+      
+      </div>
+    );
+  }
+  if (error) return <div className="text-danger">{error}</div>;
+
+  const sortedData = [...data].sort((a, b) => {
+    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+    return days.indexOf(a.weekday) - days.indexOf(b.weekday);
+  });
+
+  const getColorForHour = (hour: number) => {
+    if (hour < 9) return "primary";
+    if (hour < 12) return "success";
+    if (hour < 15) return "warning";
+    return "danger";
+  };
+
+  const colorLegend = [
+    { color: "primary", label: "Early Morning (12 AM - 8 AM)" },
+    { color: "success", label: "Morning (9 AM - 11 AM)" },
+    { color: "warning", label: "Afternoon (12 PM - 2 PM)" },
+    { color: "danger", label: "Late Afternoon & Evening (3 PM - 11 PM)" },
+  ];
 
   return (
-    <Card className="w-full h-[400px]">
-      <CardHeader>
-        <h2 className="text-xl font-bold">Peak Office Hours by Weekday</h2>
-      </CardHeader>
+    <Card className="max-h-[550px] w-full max-w-[800px] p-4">
       <CardBody>
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={data}>
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="weekday" />
-            <YAxis />
-            <Tooltip />
-            <Legend />
-            <Bar dataKey="hours[0]" name="1st Peak Hour" fill="#8884d8" />
-            <Bar dataKey="hours[1]" name="2nd Peak Hour" fill="#82ca9d" />
-            <Bar dataKey="hours[2]" name="3rd Peak Hour" fill="#ffc658" />
-          </BarChart>
-        </ResponsiveContainer>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-2xl font-bold">Peak Office Hours</h2>
+          <Tooltip content="The Top 3 busiest hours per day of this week">
+            <Info className="text-default-400 cursor-pointer" /> {/* Using Info icon from lucide-react */}
+          </Tooltip>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-6">
+          {sortedData.map((day) => (
+            <Card key={day.weekday} className="w-full shadow-md">
+              <CardBody className="p-4">
+                <h3 className="text-xl font-semibold mb-3">{day.weekday}</h3>
+                <div className="flex flex-wrap gap-2">
+                  {day.hours.map((hour, index) => (
+                    <Chip
+                      key={index}
+                      color={getColorForHour(hour)}
+                      variant="flat"
+                      className="text-sm"
+                    >
+                      {hour}:00
+                    </Chip>
+                  ))}
+                </div>
+              </CardBody>
+            </Card>
+          ))}
+        </div>
+
+        <div className="border-t pt-4">
+          <h3 className="text-lg font-semibold mb-2">Color Legend</h3>
+          <div className="flex flex-wrap gap-2">
+            {colorLegend.map(({ color, label }) => (
+              <div key={color} className="flex items-center">
+                <Chip color='primary' className="mr-2" />
+                <span className="text-sm">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
       </CardBody>
     </Card>
   );
 };
 
-export default PeakOfficeHoursChart;
\ No newline at end of file
+export default PeakOfficeHoursCard;
diff --git a/frontend/occupi-web/src/components/workerStats/WorkRatioChart.tsx b/frontend/occupi-web/src/components/workerStats/WorkRatioChart.tsx
index 74dc9d67..f35a7e98 100644
--- a/frontend/occupi-web/src/components/workerStats/WorkRatioChart.tsx
+++ b/frontend/occupi-web/src/components/workerStats/WorkRatioChart.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody, Spinner } from "@nextui-org/react";
+import { Card, CardHeader, CardBody, Skeleton } from "@nextui-org/react";
 import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, Tooltip, Legend } from 'recharts';
 import { getWorkRatio } from 'WorkerStatsService';
 
@@ -35,7 +35,15 @@ const WorkRatioChart = () => {
     fetchData();
   }, []);
 
-  if (loading) return <Spinner />;
+  if (loading) {
+    return (
+      <Card className="max-w-[400px] h-[300px] p-4">
+        <Skeleton className="w-full h-full rounded-lg">
+            <div className="h-3 w-2/5 rounded-lg bg-default-200"></div>
+        </Skeleton>
+      </Card>
+    );
+  }
   if (error) return <div>{error}</div>;
 
   return (
diff --git a/frontend/occupi-web/src/pages/worker-dash/WorkerDashboard.tsx b/frontend/occupi-web/src/pages/worker-dash/WorkerDashboard.tsx
index 5d01ef23..993d7920 100644
--- a/frontend/occupi-web/src/pages/worker-dash/WorkerDashboard.tsx
+++ b/frontend/occupi-web/src/pages/worker-dash/WorkerDashboard.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import { Spinner } from "@nextui-org/react";
 import { Button } from "@nextui-org/react";
 import {
   Dropdown,
@@ -7,22 +6,10 @@ import {
   DropdownMenu,
   DropdownItem,
 } from "@nextui-org/dropdown";
-import {
-  Clock,
-  Users,
-  BarChart2,
-  Sunrise,
-  Sunset,
-  User,
-  UserMinus,
-} from "lucide-react";
+import { Clock, Users, BarChart2, Sunrise, Sunset } from "lucide-react";
 import * as workerStats from "WorkerStatsService";
-import { Responsive, WidthProvider, Layout, Layouts } from "react-grid-layout";
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
 import type { Selection } from "@nextui-org/react";
 import {
-  AiDashCard,
   ActiveEmployeeCard,
   LeastActiveEmployeeCard,
   WorkRatioChart,
@@ -30,26 +17,75 @@ import {
   HoursDashboard,
   AverageHoursChart,
   TopNav,
+  AiDashCard,
 } from "@components/index";
+import { AI_loader } from "@assets/index";
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
+// New individual AiDashCard components
+const TotalHoursCard: React.FC<{
+  stat: string | null;
+  onRemove: () => void;
+}> = ({ stat, onRemove }) => (
+  <AiDashCard
+    title="Total Hours"
+    icon={<Clock />}
+    stat={stat || "N/A"}
+    trend={5}
+    onRemove={onRemove}
+  />
+);
 
-const defaultVisibleCards = [
-  "hours",
-  "averageHours",
-  "workRatio",
-  "peakOfficeHours",
-];
+const AverageHoursCard: React.FC<{
+  stat: string | null;
+  onRemove: () => void;
+}> = ({ stat, onRemove }) => (
+  <AiDashCard
+    title="Average Hours"
+    icon={<BarChart2 />}
+    stat={stat || "N/A"}
+    trend={-2}
+    onRemove={onRemove}
+  />
+);
 
-const defaultLayouts: Layouts = {
-  lg: defaultVisibleCards.map((id, index) => ({
-    i: id,
-    x: index * 3,
-    y: 0,
-    w: 3,
-    h: 2,
-  })),
-};
+const WorkRatioCard: React.FC<{
+  stat: string | null;
+  onRemove: () => void;
+}> = ({ stat, onRemove }) => (
+  <AiDashCard
+    title="Work Ratio"
+    icon={<Users />}
+    stat={stat || "N/A"}
+    trend={3}
+    onRemove={onRemove}
+  />
+);
+
+const ArrivalDepartureCard: React.FC<{
+  stat: string | null;
+  onRemove: () => void;
+}> = ({ stat, onRemove }) => (
+  <AiDashCard
+    title="Avg Arrival - Departure"
+    icon={<Sunrise />}
+    stat={stat || "N/A"}
+    onRemove={onRemove}
+    trend={0}
+  />
+);
+
+const InOfficeRateCard: React.FC<{
+  stat: string | null;
+  onRemove: () => void;
+}> = ({ stat, onRemove }) => (
+  <AiDashCard
+    title="In-Office Rate"
+    icon={<Sunset />}
+    stat={stat || "N/A"}
+    trend={-1}
+    onRemove={onRemove}
+  />
+);
 
 interface WorkerStats {
   hours: string | null;
@@ -74,15 +110,11 @@ const WorkerStatsDashboard: React.FC = () => {
     leastActiveEmployee: null,
   });
   const [loading, setLoading] = useState(true);
-  const [layouts, setLayouts] = useState<Layouts>(() => {
-    const savedLayouts = localStorage.getItem("workerStatsDashboardLayouts");
-    return savedLayouts ? JSON.parse(savedLayouts) : defaultLayouts;
-  });
   const [visibleCards, setVisibleCards] = useState<string[]>(() => {
     const savedVisibleCards = localStorage.getItem("workerStatsVisibleCards");
     return savedVisibleCards
       ? JSON.parse(savedVisibleCards)
-      : defaultVisibleCards;
+      : ["hours", "averageHours"];
   });
   const [selectedKeys, setSelectedKeys] = React.useState<Selection>(
     new Set(visibleCards)
@@ -103,7 +135,11 @@ const WorkerStatsDashboard: React.FC = () => {
         ] as const;
         const results = await Promise.all(
           statNames.map((stat) => {
-            const method = workerStats[`get${stat.charAt(0).toUpperCase() + stat.slice(1)}` as keyof typeof workerStats] as unknown as () => Promise<{ data: [string] }>;
+            const method = workerStats[
+              `get${
+                stat.charAt(0).toUpperCase() + stat.slice(1)
+              }` as keyof typeof workerStats
+            ] as unknown as () => Promise<{ data: [string] }>;
             return method();
           })
         );
@@ -126,55 +162,51 @@ const WorkerStatsDashboard: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    localStorage.setItem(
-      "workerStatsDashboardLayouts",
-      JSON.stringify(layouts)
-    );
     localStorage.setItem(
       "workerStatsVisibleCards",
       JSON.stringify(visibleCards)
     );
-  }, [layouts, visibleCards]);
+  }, [visibleCards]);
 
   const formatStat = (stat: string, value: unknown): string => {
     switch (stat) {
       case "hours":
       case "averageHours":
-        return typeof value === "object" && value !== null && "overallTotal" in value
+        return typeof value === "object" &&
+          value !== null &&
+          "overallTotal" in value
           ? (value.overallTotal as number).toFixed(2)
           : "N/A";
       case "workRatio":
-        return typeof value === "number" ? `${(value * 100).toFixed(2)}%` : "N/A";
+        return typeof value === "number"
+          ? `${(value * 100).toFixed(2)}%`
+          : "N/A";
       case "peakOfficeHours":
-        return typeof value === "object" && value !== null && "peakHours" in value
-          ? value.peakHours as string
+        return typeof value === "object" &&
+          value !== null &&
+          "peakHours" in value
+          ? (value.peakHours as string)
           : "N/A";
       case "arrivalDepartureAverage":
-        return typeof value === "object" && value !== null &&
-               "overallavgArrival" in value && "overallavgDeparture" in value
+        return typeof value === "object" &&
+          value !== null &&
+          "overallavgArrival" in value &&
+          "overallavgDeparture" in value
           ? `${value.overallavgArrival} - ${value.overallavgDeparture}`
           : "N/A";
       case "mostActiveEmployee":
       case "leastActiveEmployee":
         return typeof value === "object" && value !== null && "email" in value
-          ? value.email as string
+          ? (value.email as string)
           : "N/A";
       default:
         return "N/A";
     }
   };
 
-  const onLayoutChange = (_currentLayout: Layout[], allLayouts: Layouts) => {
-    setLayouts(allLayouts);
-  };
-
   const handleAddCard = (cardId: string) => {
     if (!visibleCards.includes(cardId)) {
       setVisibleCards((prev) => [...prev, cardId]);
-      setLayouts((prev) => ({
-        ...prev,
-        lg: [...prev.lg, { i: cardId, x: 0, y: Infinity, w: 3, h: 2 }],
-      }));
     }
   };
 
@@ -185,101 +217,54 @@ const WorkerStatsDashboard: React.FC = () => {
       newKeys.delete(cardId);
       return newKeys;
     });
-    setLayouts((prev) => ({
-      ...prev,
-      lg: prev.lg.filter((item) => item.i !== cardId),
-    }));
   };
 
   if (loading) {
-    return <Spinner>Loading stats...</Spinner>;
+    return (
+      <div className="flex items-center ml-96 justify-center min-h-screen">
+      <div className="font-bold flex flex-col items-center">
+        <img className="h-96 w-62" src={AI_loader} alt="Loading" />
+        <div>Loading Statistics from Occubot...</div>
+      </div>
+    </div>
+    
+    
+    );
   }
 
-  const cardData = [
-    {
-      id: "hours",
-      title: "Total Hours",
-      icon: <Clock />,
-      stat: stats.hours,
-      trend: 5,
-    },
-    {
-      id: "averageHours",
-      title: "Average Hours",
-      icon: <BarChart2 />,
-      stat: stats.averageHours,
-      trend: -2,
-    },
-    {
-      id: "workRatio",
-      title: "Work Ratio",
-      icon: <Users />,
-      stat: stats.workRatio,
-      trend: 3,
-    },
-    {
-      id: "peakOfficeHours",
-      title: "Peak Office Hours",
-      icon: <Sunrise />,
-      stat: stats.peakOfficeHours,
-      trend: 0,
-    },
-    {
-      id: "arrivalDepartureAverage",
-      title: "Avg Arrival - Departure",
-      icon: <Sunrise />,
-      stat: stats.arrivalDepartureAverage,
-      trend: 1,
-    },
-    {
-      id: "inOfficeRate",
-      title: "In-Office Rate",
-      icon: <Sunset />,
-      stat: stats.inOfficeRate,
-      trend: -1,
-    },
-    {
-      id: "mostActiveEmployee",
-      title: "Most Active Employee",
-      icon: <User />,
-      stat: stats.mostActiveEmployee,
-      trend: 2,
-    },
-    {
-      id: "leastActiveEmployee",
-      title: "Least Active Employee",
-      icon: <UserMinus />,
-      stat: stats.leastActiveEmployee,
-      trend: -3,
-    },
-  ];
-
   return (
-    <div className="w-full overflow-auto">
-       <TopNav
-        mainComponent={<div className="text-text_col font-semibold text-2xl ml-5">
-          Employee Statistics
-          <span className="block text-sm opacity-65  text-text_col_secondary_alt ">
-            See all Your Employee Statistics from Occubot
-          </span>
-        </div>} searchQuery={""} onChange={function (): void {
-          throw new Error("Function not implemented.");
-        } }        
+    <div className=" w-full overflow-auto">
+      <TopNav
+        mainComponent={
+          <div className="text-text_col font-semibold text-2xl ml-5">
+            Employee Statistics
+            <span className="block text-sm opacity-65 text-text_col_secondary_alt">
+              See all Your Employee Statistics from Occubot
+            </span>
+          </div>
+        }
+        searchQuery=""
+        onChange={() => {}}
       />
       <div className="flex justify-between mb-4">
         <Button
           color="primary"
+          className="mt-2 ml-3 px-4 py-2 bg-text_col text-text_col_alt font-semibold rounded-lg transition-colors duration-300 flex items-center"
           onClick={() => {
-            setLayouts(defaultLayouts);
-            setVisibleCards(defaultVisibleCards);
-            setSelectedKeys(new Set(defaultVisibleCards));
+            setVisibleCards(["hours"]);
+            setSelectedKeys(new Set(["hours"]));
           }}
         >
           Reset to Default Layout
         </Button>
         <Dropdown>
           <DropdownTrigger>
-            <Button color="primary">Add Card</Button>
+            <Button
+              color="primary"
+              className="mr-3 mt-2 px-4 py-2 bg-text_col text-text_col_alt font-semibold rounded-lg transition-colors duration-300 flex items-center"
+            >
+              Add Card
+            </Button>
           </DropdownTrigger>
           <DropdownMenu
             aria-label="Add Card Actions"
@@ -297,61 +282,87 @@ const WorkerStatsDashboard: React.FC = () => {
               });
             }}
           >
-            {cardData.map((card) => (
-              <DropdownItem key={card.id} startContent={card.icon}>
-                {card.title}
-              </DropdownItem>
-            ))}
+            <DropdownItem key="hours" startContent={<Clock />}>
+              Total Hours
+            </DropdownItem>
+            <DropdownItem key="averageHours" startContent={<BarChart2 />}>
+              Average Hours
+            </DropdownItem>
+            <DropdownItem key="workRatio" startContent={<Users />}>
+              Work Ratio
+            </DropdownItem>
+            <DropdownItem
+              key="arrivalDepartureAverage"
+              startContent={<Sunrise />}
+            >
+              Avg Arrival - Departure
+            </DropdownItem>
+            <DropdownItem key="inOfficeRate" startContent={<Sunset />}>
+              In-Office Rate
+            </DropdownItem>
           </DropdownMenu>
         </Dropdown>
       </div>
 
-      <ResponsiveGridLayout
-        className="layout"
-        layouts={layouts}
-        onLayoutChange={onLayoutChange}
-        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-        rowHeight={100}
-        isDraggable={true}
-        isResizable={true}
-        compactType="vertical"
-        preventCollision={false}
-        margin={[20, 20]}
-      >
-        {cardData.map(
-          (card) =>
-            visibleCards.includes(card.id) && (
-              <div key={card.id}>
-                <AiDashCard
-                  title={card.title}
-                  icon={card.icon}
-                  stat={card.stat || "N/A"}
-                  trend={card.trend}
-                  onRemove={() => handleRemoveCard(card.id)}
-                />
-              </div>
-            )
+      <div className="mb-2 ml-3 mr-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {visibleCards.includes("workRatio") && (
+          <WorkRatioCard
+            stat={stats.workRatio}
+            onRemove={() => handleRemoveCard("workRatio")}
+          />
+        )}
+        {visibleCards.includes("averageHours") && (
+          <AverageHoursCard
+            stat={stats.averageHours}
+            onRemove={() => handleRemoveCard("averageHours")}
+          />
+        )}
+        {visibleCards.includes("arrivalDepartureAverage") && (
+          <ArrivalDepartureCard
+            stat={stats.arrivalDepartureAverage}
+            onRemove={() => handleRemoveCard("arrivalDepartureAverage")}
+          />
+        )}
+        {visibleCards.includes("inOfficeRate") && (
+          <InOfficeRateCard
+            stat={stats.inOfficeRate}
+            onRemove={() => handleRemoveCard("inOfficeRate")}
+          />
         )}
-      </ResponsiveGridLayout>
+      </div>
 
-      <div className="mb-3 ml-5 flex gap-5 ">
+      <div className="mb-3 ml-3 flex gap-2">
         <div>
-          <div className=" mb-5">
+          <div className="mb-5">
             <ActiveEmployeeCard />
           </div>
           <LeastActiveEmployeeCard />
         </div>
 
-        <div className="flex gap-6 ">
+        <div className="flex gap-2 mr-2">
           <PeakOfficeHoursChart />
-          <HoursDashboard />
-          <AverageHoursChart />
-          <WorkRatioChart />
+
+          <div className="">
+            <div className=" mb-2">
+              {visibleCards.includes("hours") && (
+                <TotalHoursCard
+                  stat={stats.hours}
+                  onRemove={() => handleRemoveCard("hours")}
+                />
+              )}
+            </div>
+
+            <WorkRatioChart />
+          </div>
         </div>
       </div>
+
+      <div className="flex gap-2 ml-3 mr-3">
+        <HoursDashboard />
+        <AverageHoursChart />
+      </div>
     </div>
   );
 };
 
-export default WorkerStatsDashboard;
\ No newline at end of file
+export default WorkerStatsDashboard;