diff --git a/src/pages-desktop/dashboard/academic-calendar.tsx b/src/pages-desktop/dashboard/academic-calendar.tsx
index 993c0c6..a445390 100644
--- a/src/pages-desktop/dashboard/academic-calendar.tsx
+++ b/src/pages-desktop/dashboard/academic-calendar.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import {
   getAcademicCalendarOptions,
@@ -6,6 +6,7 @@ import {
   CalendarMonthOption,
   MonthlySchedule,
 } from "@/lib/features";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import {
@@ -104,101 +105,47 @@ type CalendarCell = {
 
 export default function AcademicCalendarPage() {
   const { loading: authLoading } = useAuth();
-  const [options, setOptions] = useState<CalendarMonthOption[] | null>(null);
+  const {
+    data: optionsData,
+    loading: optionsLoading,
+    error: optionsError,
+    retry: fetchOptions,
+  } = useOfflineData<CalendarMonthOption[]>({
+    cacheKey: "deskly::cache::calendar_options",
+    fetcher: getAcademicCalendarOptions,
+  });
+
+  const options = optionsData;
   const [selectedOption, setSelectedOption] = useState<CalendarMonthOption | null>(null);
-  const [schedule, setSchedule] = useState<MonthlySchedule | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
 
-  // Selected cell details in side panel
-  const [selectedCell, setSelectedCell] = useState<CalendarCell | null>(null);
-
-  // Load options from cache first
   useEffect(() => {
-    const cachedOptions = localStorage.getItem("deskly::cache::calendar_options");
-    if (cachedOptions) {
-      try {
-        const parsed = JSON.parse(cachedOptions);
-        if (parsed && parsed.length > 0) {
-          setOptions(parsed);
-          setSelectedOption(parsed[0]);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached academic calendar options", e);
-      }
+    if (optionsData && optionsData.length > 0 && !selectedOption) {
+      setSelectedOption(optionsData[0]);
     }
-  }, []);
+  }, [optionsData, selectedOption]);
+
+  const {
+    data: scheduleData,
+    loading: viewLoading,
+    error: viewError,
+    retry: retryView,
+  } = useOfflineData<MonthlySchedule>({
+    cacheKey: selectedOption ? `deskly::cache::calendar_view_${selectedOption.dateValue}` : "",
+    fetcher: () => getAcademicCalendarView(selectedOption!.dateValue),
+    enabled: !!selectedOption,
+  });
+
+  const schedule = scheduleData;
+  const loading = optionsLoading || viewLoading;
+  const error = optionsError || viewError;
 
-  // Load monthly view from cache first when selectedOption changes
-  useEffect(() => {
-    if (selectedOption) {
-      const cachedView = localStorage.getItem(`deskly::cache::calendar_view_${selectedOption.dateValue}`);
-      if (cachedView) {
-        try {
-          const parsed = JSON.parse(cachedView);
-          if (parsed && parsed.days && parsed.days.length > 0) {
-            setSchedule(parsed);
-            setLoading(false);
-            return;
-          }
-        } catch (e) {
-          console.error("Failed to parse cached calendar view", e);
-        }
-      }
-      setSchedule(null);
-      setLoading(true);
-    }
-  }, [selectedOption]);
-
-  const fetchOptions = async () => {
-    setLoading(options && options.length > 0 ? false : true);
-    setError(null);
-    try {
-      const res = await getAcademicCalendarOptions();
-      if (res.success && res.data && res.data.length > 0) {
-        setOptions(res.data);
-        localStorage.setItem("deskly::cache::calendar_options", JSON.stringify(res.data));
-        if (!selectedOption) {
-          setSelectedOption(res.data[0]);
-        }
-      } else {
-        setError(res.error ?? "No academic calendar semesters found.");
-        setLoading(false);
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-      setLoading(false);
-    }
-  };
-
-  const fetchView = async (dateVal: string) => {
-    setLoading(schedule ? false : true);
-    setError(null);
-    try {
-      const res = await getAcademicCalendarView(dateVal);
-      if (res.success && res.data) {
-        setSchedule(res.data);
-        localStorage.setItem(`deskly::cache::calendar_view_${dateVal}`, JSON.stringify(res.data));
-        setSelectedCell(null); // Reset day details view on month change
-      } else {
-        setError(res.error ?? "Failed to load academic calendar view.");
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchOptions();
-  }, []);
+  // Selected cell details in side panel
+  const [selectedCell, setSelectedCell] = useState<CalendarCell | null>(null);
 
-  useEffect(() => {
-    if (selectedOption) {
-      fetchView(selectedOption.dateValue);
-    }
-  }, [selectedOption]);
+  const fetchView = useCallback((_dateVal?: string) => {
+    setSelectedCell(null);
+    retryView();
+  }, [retryView]);
 
   // Calendar Math: construct 35-42 grid cells based on loaded schedule and options
   const calendarCells = useMemo(() => {
diff --git a/src/pages-desktop/dashboard/attendance.tsx b/src/pages-desktop/dashboard/attendance.tsx
index 29d2e7e..b614f88 100644
--- a/src/pages-desktop/dashboard/attendance.tsx
+++ b/src/pages-desktop/dashboard/attendance.tsx
@@ -1,11 +1,12 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getCurrentAttendance, AttendanceRecord } from "@/lib/attendance";
-import { isNetworkError, fetchWithTimeout } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
 import { ErrorDisplay } from "@/components/error-display";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { OfflineDisplay } from "@/components/offline-display";
 import { Outlet, useMatch, useNavigate } from "react-router-dom";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import {
   UserCheck,
   CalendarDays,
@@ -247,49 +248,25 @@ export default function AttendancePage() {
   const isDetailRoute = useMatch("/dashboard/attendance/:classId");
   const isOnline = useOnlineStatus();
 
-  const [attendance, setAttendance] = useState<AttendanceRecord[]>(() => {
-    try {
-      const cached = localStorage.getItem("deskly::cache::attendance");
-      if (cached) {
-        const parsed = JSON.parse(cached) as AttendanceRecord[];
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
+  const {
+    data: attendanceRaw,
+    loading,
+    error,
+    retry,
+  } = useOfflineData<AttendanceRecord[]>({
+    cacheKey: "deskly::cache::attendance",
+    fetcher: async () => {
+      const res = await getCurrentAttendance();
+      if (res.success && res.semesterId) {
+        localStorage.setItem("deskly::cache::attendance_semester", res.semesterId);
       }
-    } catch {}
-    return [];
+      return res;
+    },
+    enabled: isLoggedIn && !authLoading,
   });
-  const [loading, setLoading] = useState(attendance.length === 0);
-  const [error, setError] = useState<string | null>(null);
-  const [filterType, setFilterType] = useState("all");
 
-  async function load() {
-    if (authLoading || !isLoggedIn) return;
-    setError(null);
-    const hasCache = attendance.length > 0;
-    setLoading(!hasCache);
-    try {
-      const res = await fetchWithTimeout(getCurrentAttendance(), 15000);
-      if (res.success && res.data) {
-        setAttendance(res.data);
-        const sem = res.semesterId ?? "";
-        localStorage.setItem("deskly::cache::attendance", JSON.stringify(res.data));
-        localStorage.setItem("deskly::cache::attendance_semester", sem);
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch attendance.");
-        }
-      }
-    } catch (e) {
-      if (!hasCache) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) load();
-  }, [isLoggedIn, authLoading]);
+  const attendance = useMemo(() => attendanceRaw || [], [attendanceRaw]);
+  const [filterType, setFilterType] = useState("all");
 
   const stats = useMemo(() => {
     let totalAttended = 0;
@@ -326,7 +303,7 @@ export default function AttendancePage() {
   const showOffline = attendance.length === 0 && (isOnline === false || isNetworkError(error, isOnline));
 
   if (showOffline) {
-    return <OfflineDisplay onRetry={load} />;
+    return <OfflineDisplay onRetry={retry} />;
   }
 
   if (authLoading || (loading && attendance.length === 0)) {
@@ -336,7 +313,7 @@ export default function AttendancePage() {
   if (error && attendance.length === 0) {
     return (
       <div className="flex h-full items-center justify-center font-saira">
-        <ErrorDisplay message={error} onRetry={load} />
+        <ErrorDisplay message={error} onRetry={retry} />
       </div>
     );
   }
@@ -349,7 +326,7 @@ export default function AttendancePage() {
       {error && !isNetworkError(error, isOnline) && (
         <div className="flex items-center justify-between gap-4 px-4 py-3 bg-destructive/10 border border-destructive/20 text-destructive rounded-lg">
           <p className="text-xs font-semibold truncate">Sync failed — {error}</p>
-          <button onClick={load} className="text-xs font-bold uppercase tracking-wider shrink-0 border-0 bg-transparent text-destructive cursor-pointer">
+          <button onClick={retry} className="text-xs font-bold uppercase tracking-wider shrink-0 border-0 bg-transparent text-destructive cursor-pointer">
             Retry
           </button>
         </div>
diff --git a/src/pages-desktop/dashboard/attendance/%5BclassId%5D.tsx b/src/pages-desktop/dashboard/attendance/%5BclassId%5D.tsx
deleted file mode 100644
index 5412b3f..0000000
--- a/src/pages-desktop/dashboard/attendance/%5BclassId%5D.tsx
+++ /dev/null
@@ -1,372 +0,0 @@
-import { useState, useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { useParams, useNavigate } from "@/router";
-import { getAttendanceDetail, AttendanceDetailRecord, AttendanceRecord } from "@/lib/attendance";
-
-import {
-  ArrowLeft,
-  User,
-  CheckCircle2,
-  XCircle,
-  Clock,
-  Calendar,
-
-  School,
-  MinusCircle,
-} from "lucide-react";
-
-// ─── Circular Arc Progress ────────────────────────────────────────────────────
-
-function BigCircularProgress({ percentage }: { percentage: number }) {
-  const size = 68;
-  const radius = 28;
-  const circumference = 2 * Math.PI * radius;
-  const offset = circumference - (Math.min(percentage, 100) / 100) * circumference;
-
-  let stroke = "stroke-destructive";
-  if (percentage >= 75) stroke = "stroke-emerald-500";
-  else if (percentage >= 50) stroke = "stroke-amber-500";
-
-  return (
-    <div className="relative flex items-center justify-center shrink-0" style={{ width: size, height: size }}>
-      <svg width={size} height={size} className="transform -rotate-90">
-        <circle className="text-muted/15 stroke-current" strokeWidth="4.5" fill="transparent" r={radius} cx={size / 2} cy={size / 2} />
-        <circle
-          className={`${stroke} transition-all duration-700`}
-          strokeWidth="4.5"
-          strokeDasharray={circumference}
-          strokeDashoffset={offset}
-          strokeLinecap="round"
-          fill="transparent"
-          r={radius}
-          cx={size / 2}
-          cy={size / 2}
-        />
-      </svg>
-      <span className="absolute text-sm font-semibold text-foreground leading-none">{percentage}%</span>
-    </div>
-  );
-}
-
-// ─── Status Badge ─────────────────────────────────────────────────────────────
-
-function StatusBadge({ status }: { status: string }) {
-  const s = status.trim().toLowerCase();
-  const isPresent = s === "present" || s === "p" || s === "1";
-  const isAbsent = s === "absent" || s === "a" || s === "0";
-  const isOd = s.includes("od") || s.includes("duty") || s === "on duty";
-
-  if (isPresent) {
-    return (
-      <span className="inline-flex items-center gap-1 text-xs font-semibold text-emerald-400 bg-emerald-500/5 border border-emerald-500/10 px-2 py-0.5 rounded-md leading-none">
-        <CheckCircle2 className="w-3 h-3" />
-        Present
-      </span>
-    );
-  }
-  if (isAbsent) {
-    return (
-      <span className="inline-flex items-center gap-1 text-xs font-semibold text-destructive bg-destructive/5 border border-destructive/10 px-2 py-0.5 rounded-md leading-none">
-        <XCircle className="w-3 h-3" />
-        Absent
-      </span>
-    );
-  }
-  if (isOd) {
-    return (
-      <span className="inline-flex items-center gap-1 text-xs font-semibold text-sky-400 bg-sky-500/5 border border-sky-500/10 px-2 py-0.5 rounded-md leading-none">
-        <span className="w-3.5 h-3.5 rounded-full bg-sky-500/10 text-sky-400 flex items-center justify-center text-[7px] font-bold border border-sky-500/20 shrink-0">OD</span>
-        {status}
-      </span>
-    );
-  }
-  return (
-    <span className="inline-flex items-center gap-1 text-xs font-semibold text-muted-foreground bg-muted/20 border border-border/10 px-2 py-0.5 rounded-md leading-none">
-      <Clock className="w-3 h-3" />
-      {status}
-    </span>
-  );
-}
-
-// ─── Skeleton ─────────────────────────────────────────────────────────────────
-
-function Sk({ className = "" }: { className?: string }) {
-  return <div className={`animate-pulse rounded-md bg-muted/65 ${className}`} />;
-}
-
-function DetailSkeleton() {
-  return (
-    <div className="w-full space-y-6 px-2 py-4 animate-pulse font-saira">
-      <div className="flex items-center gap-2">
-        <Sk className="h-6 w-32" />
-      </div>
-      <div className="flex justify-between items-center gap-4">
-        <div className="space-y-2 flex-1">
-          <Sk className="h-4 w-20" />
-          <Sk className="h-6 w-48" />
-          <Sk className="h-4 w-32" />
-        </div>
-        <Sk className="w-16 h-16 rounded-full shrink-0" />
-      </div>
-      <Sk className="h-44 w-full rounded-lg" />
-      <div className="space-y-4 pt-2">
-        <Sk className="h-8 w-28" />
-        <Sk className="h-32 w-full rounded-lg" />
-      </div>
-    </div>
-  );
-}
-
-// ─── Main Page ────────────────────────────────────────────────────────────────
-
-export default function AttendanceDetailPage() {
-  const { classId } = useParams("/dashboard/attendance/:classId");
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  const [record, setRecord] = useState<AttendanceRecord | undefined>(location.state?.record);
-  const [details, setDetails] = useState<AttendanceDetailRecord[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!record && classId) {
-      const cached = localStorage.getItem("deskly::cache::attendance");
-      if (cached) {
-        try {
-          const parsed = JSON.parse(cached) as AttendanceRecord[];
-          const found = parsed.find((r) => String(r.classId) === String(classId));
-          if (found) {
-            setRecord(found);
-          }
-        } catch (e) {
-          console.error("Failed to parse cached attendance for fallback", e);
-        }
-      }
-    }
-  }, [classId, record]);
-
-  useEffect(() => {
-    if (!classId || !record) return;
-
-    async function load() {
-      try {
-        const res = await getAttendanceDetail(classId!, record!.slot);
-        if (res.success && res.data) {
-          setDetails(res.data);
-        } else {
-          setError(res.error ?? "Failed to load attendance details.");
-        }
-      } catch (e) {
-        setError(e instanceof Error ? e.message : String(e));
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    load();
-  }, [classId, record]);
-
-  if (loading && !record) {
-    return <DetailSkeleton />;
-  }
-
-  if (!record) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full gap-4 font-saira py-16">
-        <p className="text-muted-foreground text-sm">No course data found.</p>
-        <button
-          onClick={() => navigate("/dashboard/attendance")}
-          className="text-xs font-semibold text-sky-500 underline underline-offset-2 bg-transparent border-none cursor-pointer"
-        >
-          Go back to Attendance
-        </button>
-      </div>
-    );
-  }
-
-  const isLab = record.courseType.toLowerCase().includes("lab");
-  const displayType = isLab ? "Lab Only" : "Theory Only";
-  const badgeStyle = isLab
-    ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/10"
-    : "bg-sky-500/10 text-sky-400 border border-sky-500/10";
-
-  // Calculate detailed fractions from logs
-
-  const odSlots = details.filter((d) => {
-    const s = d.status.trim().toLowerCase();
-    return s.includes("od") || s.includes("duty") || s === "on duty";
-  }).length;
-
-  const totalClasses = record.totalClasses;
-  const attendedClasses = record.attendedClasses;
-  const absentClasses = totalClasses - attendedClasses;
-
-  return (
-    <div className="w-full space-y-6 px-2 py-4 font-saira select-none overscroll-y-contain">
-      {/* Google Font Saira Injection */}
-      <style>{`
-        .font-saira {
-          font-family: 'Saira', sans-serif !important;
-        }
-      `}</style>
-
-      {/* ── Header Row (Back Chevron + Title) ─────────────────────────────────── */}
-      <header className="flex items-center gap-1">
-        <button
-          onClick={() => navigate("/dashboard/attendance")}
-          className="inline-flex items-center gap-2 text-foreground/80 hover:text-foreground bg-transparent border-none p-0 cursor-pointer text-sm font-semibold"
-        >
-          <ArrowLeft className="w-5 h-5 shrink-0" />
-          <span>My Attendance</span>
-        </button>
-      </header>
-
-      {/* ── Course Hero Block ─────────────────────────────────────────────────── */}
-      <div className="flex items-start justify-between gap-4">
-        <div className="space-y-1.5 min-w-0 flex-1">
-          <div className="flex items-center gap-2 leading-none flex-wrap">
-            <span className="text-sm font-semibold tracking-wide text-sky-500 uppercase leading-none">
-              {record.courseCode}
-            </span>
-            <span className={`text-xs font-medium px-1.5 py-0.5 rounded leading-none ${badgeStyle}`}>
-              {displayType}
-            </span>
-          </div>
-          <h1 className="text-[20px] font-medium text-foreground leading-snug tracking-tight">
-            {record.courseTitle}
-          </h1>
-          <div className="flex items-center gap-2 text-xs text-muted-foreground font-mono leading-none pt-0.5 flex-wrap">
-            {record.faculty?.name && (
-              <span className="flex items-center gap-1">
-                <User className="w-3.5 h-3.5 text-muted-foreground/50 shrink-0" />
-                {record.faculty.name}
-              </span>
-            )}
-            {record.faculty?.school && (
-              <>
-                <span>|</span>
-                <span className="flex items-center gap-1">
-                  <School className="w-3.5 h-3.5 text-muted-foreground/50 shrink-0" />
-                  {record.faculty.school}
-                </span>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Attendance circular progress */}
-        <div className="shrink-0 flex flex-col items-center gap-1.5">
-          <BigCircularProgress percentage={record.attendancePercentage} />
-          <p className="text-xs text-muted-foreground/60 font-semibold uppercase tracking-wider leading-none">
-            Attendance
-          </p>
-        </div>
-      </div>
-
-      {/* ── 2x2 Grid Stats Card ───────────────────────────────────────────────── */}
-      <div className="bg-[#0e0e0f]/40 border border-border/10 rounded-lg grid grid-cols-2 overflow-hidden relative">
-        {/* Inner vertical separator line */}
-        <div className="absolute top-0 bottom-0 left-1/2 w-px bg-border/10 -translate-x-1/2" />
-        {/* Inner horizontal separator line */}
-        <div className="absolute left-0 right-0 top-1/2 h-px bg-border/10 -translate-y-1/2" />
-
-        {/* cell 1: Total Classes */}
-        <div className="p-4 flex flex-col gap-2">
-          <div className="flex items-center gap-1.5 text-muted-foreground/60 leading-none">
-            <Calendar className="w-4 h-4 text-blue-500 shrink-0" />
-            <span className="text-xs font-semibold uppercase tracking-wider">Total Classes</span>
-          </div>
-          <span className="text-3xl font-semibold text-foreground leading-none">{totalClasses}</span>
-        </div>
-
-        {/* cell 2: Present */}
-        <div className="p-4 flex flex-col gap-2">
-          <div className="flex items-center gap-1.5 text-muted-foreground/60 leading-none">
-            <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0" />
-            <span className="text-xs font-semibold uppercase tracking-wider">Present</span>
-          </div>
-          <span className="text-3xl font-semibold text-foreground leading-none">{attendedClasses}</span>
-        </div>
-
-        {/* cell 3: On Leave */}
-        <div className="p-4 flex flex-col gap-2">
-          <div className="flex items-center gap-1.5 text-muted-foreground/60 leading-none">
-            <MinusCircle className="w-4 h-4 text-sky-400 shrink-0" />
-            <span className="text-xs font-semibold uppercase tracking-wider">On Leave</span>
-          </div>
-          <span className="text-3xl font-semibold text-foreground leading-none">{odSlots}</span>
-        </div>
-
-        {/* cell 4: Absent */}
-        <div className="p-4 flex flex-col gap-2">
-          <div className="flex items-center gap-1.5 text-muted-foreground/60 leading-none">
-            <XCircle className="w-4 h-4 text-destructive shrink-0" />
-            <span className="text-xs font-semibold uppercase tracking-wider">Absent</span>
-          </div>
-          <span className="text-3xl font-semibold text-foreground leading-none">{absentClasses}</span>
-        </div>
-      </div>
-
-      {/* ── Session Log Section ───────────────────────────────────────────────── */}
-      <div className="space-y-4 pt-1">
-        <div className="space-y-1">
-          <h2 className="text-base font-semibold text-foreground tracking-tight leading-none uppercase">
-            Session Log
-          </h2>
-          <p className="text-xs text-muted-foreground/75 leading-none">
-            {details.length || record.totalClasses} sessions recorded
-          </p>
-        </div>
-
-        {loading ? (
-          <div className="space-y-3">
-            {[...Array(3)].map((_, i) => (
-              <Sk key={i} className="h-14 w-full rounded-lg" />
-            ))}
-          </div>
-        ) : details.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-16 gap-3 text-center bg-[#0e0e0f]/20 border border-border/10 rounded-lg">
-            <Calendar className="w-8 h-8 text-muted-foreground/20" />
-            <p className="text-sm font-semibold text-foreground leading-none">No session logs available</p>
-            <p className="text-xs text-muted-foreground">Detailed logs haven't been synchronized.</p>
-          </div>
-        ) : (
-          <div className="bg-[#0e0e0f]/40 border border-border/10 rounded-lg overflow-hidden divide-y divide-border/10">
-            {details.map((row, i) => (
-              <div
-                key={`${row.serialNo}-${i}`}
-                className="flex items-center justify-between gap-4 p-4 hover:bg-muted/5 transition-colors duration-150"
-              >
-                {/* Left: Serial Number */}
-                <span className="text-xs font-semibold text-muted-foreground/35 tabular-nums w-4 shrink-0 text-left">
-                  {row.serialNo ?? i + 1}
-                </span>
-
-                {/* Middle: Date and Time Range */}
-                <div className="flex-1 min-w-0 space-y-1">
-                  <p className="text-sm font-semibold text-foreground leading-none">
-                    {row.date}
-                  </p>
-                  <p className="text-xs text-muted-foreground/60 font-mono leading-none">
-                    {row.dayAndTime || "10:30 AM – 11:30 AM"}
-                  </p>
-                </div>
-
-                {/* Slot Code (in blue) */}
-                <span className="text-xs font-semibold text-sky-500 font-mono shrink-0">
-                  {row.slot || record.slot}
-                </span>
-
-                {/* Right: Status badge */}
-                <div className="shrink-0">
-                  <StatusBadge status={row.status} />
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages-desktop/dashboard/attendance/[classId].tsx b/src/pages-desktop/dashboard/attendance/[classId].tsx
index 7b00a14..6ae0e86 100644
--- a/src/pages-desktop/dashboard/attendance/[classId].tsx
+++ b/src/pages-desktop/dashboard/attendance/[classId].tsx
@@ -1,11 +1,12 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useLocation } from "react-router-dom";
 import { useParams, useNavigate } from "@/router";
 import { getAttendanceDetail, AttendanceDetailRecord, AttendanceRecord } from "@/lib/attendance";
-import { fetchWithTimeout, isNetworkError } from "@/lib/utils";
+import { isNetworkError } from "@/lib/utils";
 import { OfflineDisplay } from "@/components/offline-display";
 import { useOnlineStatus } from "@/hooks/use-online-status";
 import { ErrorDisplay } from "@/components/error-display";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import {
   ArrowLeft,
   User,
@@ -164,21 +165,6 @@ export default function AttendanceDetailPage() {
   const navigate = useNavigate();
   const isOnline = useOnlineStatus();
   const [record, setRecord] = useState<AttendanceRecord | undefined>(location.state?.record);
-  const [details, setDetails] = useState<AttendanceDetailRecord[]>(() => {
-    if (!classId) return [];
-    try {
-      const cacheKey = `deskly::cache::attendance_detail_${classId}`;
-      const cached = localStorage.getItem(cacheKey);
-      if (cached) {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      }
-    } catch {}
-    return [];
-  });
-  const [loading, setLoading] = useState(details.length === 0);
-  const [isRetrying, setIsRetrying] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!record && classId) {
@@ -197,37 +183,19 @@ export default function AttendanceDetailPage() {
     }
   }, [classId, record]);
 
-  async function load(isManualRetry = false) {
-    if (!classId || !record) return;
-    if (isManualRetry && !isOnline) return;
-
-    const hasCache = details.length > 0;
-    if (isManualRetry) {
-      setIsRetrying(true);
-    } else {
-      setLoading(!hasCache);
-    }
-
-    try {
-      const cacheKey = `deskly::cache::attendance_detail_${classId}`;
-      const res = await fetchWithTimeout(getAttendanceDetail(classId!, record!.slot), 15000);
-      if (res.success && res.data) {
-        setDetails(res.data);
-        localStorage.setItem(cacheKey, JSON.stringify(res.data));
-      } else {
-        if (!hasCache) setError(res.error ?? "Failed to load attendance details.");
-      }
-    } catch (e) {
-      if (!hasCache) setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-      setIsRetrying(false);
-    }
-  }
+  const {
+    data: detailsRaw,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<AttendanceDetailRecord[]>({
+    cacheKey: classId ? `deskly::cache::attendance_detail_${classId}` : "",
+    fetcher: () => getAttendanceDetail(classId!, record!.slot),
+    enabled: !!classId && !!record,
+  });
 
-  useEffect(() => {
-    load();
-  }, [classId, record]);
+  const details = useMemo(() => detailsRaw || [], [detailsRaw]);
+  const isRetrying = loading && details.length > 0;
 
   const isLab = record?.courseType.trim().toUpperCase().includes("LAB");
   const multiplier = isLab ? 2 : 1;
@@ -432,7 +400,7 @@ export default function AttendanceDetailPage() {
               <p className="text-sm font-bold text-foreground">Session logs unavailable offline</p>
               <p className="text-xs text-muted-foreground">Connect to the internet to load detailed session logs for this class.</p>
               <button
-                onClick={() => load(true)}
+                onClick={() => load()}
                 disabled={isRetrying || loading || !isOnline}
                 className="mt-1 min-w-[144px] h-9 px-4 py-2 rounded-md bg-primary/10 hover:bg-primary/15 text-primary text-xs font-bold transition-all border border-primary/20 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center text-center shrink-0"
               >
diff --git a/src/pages-desktop/dashboard/contact.tsx b/src/pages-desktop/dashboard/contact.tsx
index 753d0f5..52437c4 100644
--- a/src/pages-desktop/dashboard/contact.tsx
+++ b/src/pages-desktop/dashboard/contact.tsx
@@ -1,7 +1,8 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getContactInfo, ContactDetail } from "@/lib/features";
 import { openUrl } from "@tauri-apps/plugin-opener";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import { Copy, Check, Phone, Search, Building2, X } from "lucide-react";
@@ -132,46 +133,17 @@ function ContactRow({ contact }: { contact: ContactDetail }) {
 
 export default function ContactPage() {
   const { loading: authLoading } = useAuth();
-  const [contacts, setContacts] = useState<ContactDetail[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [query, setQuery] = useState("");
-
-  // Load from Cache first
-  useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::contact");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (parsed && parsed.length > 0) {
-          setContacts(parsed);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached contacts", e);
-      }
-    }
-  }, []);
-
-  const fetchContacts = async () => {
-    setLoading(contacts && contacts.length > 0 ? false : true);
-    setError(null);
-    try {
-      const res = await getContactInfo();
-      if (res.success && res.data) {
-        setContacts(res.data);
-        localStorage.setItem("deskly::cache::contact", JSON.stringify(res.data));
-      } else {
-        setError(res.error ?? "Failed to load contact information.");
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  };
+  const {
+    data: contacts,
+    loading,
+    error,
+    retry: fetchContacts,
+  } = useOfflineData<ContactDetail[]>({
+    cacheKey: "deskly::cache::contact_info",
+    fetcher: getContactInfo,
+  });
 
-  useEffect(() => { fetchContacts(); }, []);
+  const [query, setQuery] = useState("");
 
   const filtered = useMemo(() => {
     if (!contacts) return [];
diff --git a/src/pages-desktop/dashboard/courses.tsx b/src/pages-desktop/dashboard/courses.tsx
index b53a332..899d1bd 100644
--- a/src/pages-desktop/dashboard/courses.tsx
+++ b/src/pages-desktop/dashboard/courses.tsx
@@ -1,6 +1,7 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getTimetableCourses, TimetableCourse } from "@/lib/features";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import {
@@ -246,58 +247,23 @@ function CoursesSkeleton() {
 
 export default function CoursesPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
-
-  const [courses, setCourses] = useState<TimetableCourse[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const {
+    data: coursesRaw,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<TimetableCourse[]>({
+    cacheKey: "deskly::cache::courses",
+    fetcher: getTimetableCourses,
+    enabled: isLoggedIn && !authLoading,
+  });
+
+  const courses = useMemo(() => coursesRaw || [], [coursesRaw]);
 
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedTypeFilter, setSelectedTypeFilter] = useState("ALL");
   const [selectedCategoryFilter, setSelectedCategoryFilter] = useState("ALL");
 
-  useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::courses");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached) as TimetableCourse[];
-        if (parsed.length > 0) {
-          setCourses(parsed);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached courses", e);
-      }
-    }
-  }, []);
-
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
-      setLoading(courses.length > 0 ? false : true);
-
-      const res = await getTimetableCourses();
-      if (res.success && res.data) {
-        setCourses(res.data);
-        localStorage.setItem("deskly::cache::courses", JSON.stringify(res.data));
-      } else {
-        setError(res.error ?? "Failed to fetch registered courses.");
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      load();
-    }
-  }, [isLoggedIn, authLoading]);
-
   const filterOptions = useMemo(() => {
     const types = new Set<string>();
     const categories = new Set<string>();
diff --git a/src/pages-desktop/dashboard/curriculum/[categoryId].tsx b/src/pages-desktop/dashboard/curriculum/[categoryId].tsx
index bce252b..8d832b2 100644
--- a/src/pages-desktop/dashboard/curriculum/[categoryId].tsx
+++ b/src/pages-desktop/dashboard/curriculum/[categoryId].tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useParams, useNavigate } from "@/router";
 import { useAuth } from "@/hooks/useAuth";
 import { save } from "@tauri-apps/plugin-dialog";
@@ -11,6 +11,7 @@ import {
 } from "@/lib/features";
 
 import { ErrorDisplay } from "@/components/error-display";
+import { useOfflineData } from "@/hooks/use-offline-data";
 import { fetchWithTimeout } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import {
@@ -76,23 +77,18 @@ export default function CategoryCoursesPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
   const { categoryId } = useParams("/dashboard/curriculum/:categoryId");
   const navigate = useNavigate();
-  const cacheKey = categoryId ? `deskly::cache::curriculum_courses_${categoryId}` : "";
-
-  const [courses, setCourses] = useState<CurriculumCourse[]>(() => {
-    if (!cacheKey) return [];
-    const cached = localStorage.getItem(cacheKey);
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (Array.isArray(parsed) && parsed.length > 0) return parsed;
-      } catch (e) {
-        console.error("Failed to parse cached curriculum courses", e);
-      }
-    }
-    return [];
+  const {
+    data: coursesRaw,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<CurriculumCourse[]>({
+    cacheKey: categoryId ? `deskly::cache::curriculum_courses_${categoryId}` : "",
+    fetcher: () => getCurriculumCategoryCourses(categoryId!),
+    enabled: isLoggedIn && !authLoading && !!categoryId,
   });
-  const [loading, setLoading] = useState(courses.length === 0);
-  const [error, setError] = useState<string | null>(null);
+
+  const courses = useMemo(() => coursesRaw || [], [coursesRaw]);
   const [query, setQuery] = useState("");
 
   // Downloading syllabus state ("picking" | "downloading" | null)
@@ -104,55 +100,6 @@ export default function CategoryCoursesPage() {
     [activeCourseState]
   );
 
-  async function load() {
-    if (!categoryId) return;
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
-      const hasCache = courses.length > 0;
-      setLoading(!hasCache);
-
-      const res = await fetchWithTimeout(getCurriculumCategoryCourses(categoryId), 15000);
-      if (res.success && res.data) {
-        setCourses(res.data);
-        if (cacheKey) {
-          localStorage.setItem(cacheKey, JSON.stringify(res.data));
-        }
-      } else {
-        if (!hasCache) {
-          setError(res.error ?? "Failed to fetch courses for this category.");
-        }
-      }
-    } catch (e) {
-      if (courses.length === 0) {
-        setError(e instanceof Error ? e.message : String(e));
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (cacheKey) {
-      const cached = localStorage.getItem(cacheKey);
-      if (cached) {
-        try {
-          const parsed = JSON.parse(cached);
-          if (Array.isArray(parsed) && parsed.length > 0) {
-            setCourses(parsed);
-          }
-        } catch (e) {
-          console.error("Failed to parse cached curriculum courses", e);
-        }
-      }
-    }
-    if (isLoggedIn && categoryId) {
-      load();
-    }
-  }, [isLoggedIn, authLoading, categoryId]);
-
   // Filtering search query
   const filtered = useMemo(() => {
     if (!query.trim()) return courses;
diff --git a/src/pages-desktop/dashboard/curriculum/index.tsx b/src/pages-desktop/dashboard/curriculum/index.tsx
index 5800bc7..a75741c 100644
--- a/src/pages-desktop/dashboard/curriculum/index.tsx
+++ b/src/pages-desktop/dashboard/curriculum/index.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { useNavigate } from "@/router";
 import { getCurriculumCategories, CurriculumCategory } from "@/lib/features";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import { ScrollText, ChevronRight } from "lucide-react";
@@ -38,53 +38,18 @@ export default function CurriculumIndexPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
   const navigate = useNavigate();
 
-  const [categories, setCategories] = useState<CurriculumCategory[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Cache loading
-  useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::curriculum::categories");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached) as CurriculumCategory[];
-        if (parsed.length > 0) {
-          setCategories(parsed);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached curriculum categories", e);
-      }
-    }
-  }, []);
-
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
-      setLoading(categories.length > 0 ? false : true);
-
-      const res = await getCurriculumCategories();
-      if (res.success && res.data) {
-        setCategories(res.data);
-        localStorage.setItem("deskly::cache::curriculum::categories", JSON.stringify(res.data));
-      } else {
-        setError(res.error ?? "Failed to fetch curriculum categories.");
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      load();
-    }
-  }, [isLoggedIn, authLoading]);
+  const {
+    data: categoriesRaw,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<CurriculumCategory[]>({
+    cacheKey: "deskly::cache::curriculum_categories",
+    fetcher: getCurriculumCategories,
+    enabled: isLoggedIn && !authLoading,
+  });
+
+  const categories = categoriesRaw || [];
 
   const shell = (children: React.ReactNode) => (
     <>{children}</>
diff --git a/src/pages-desktop/dashboard/exams.tsx b/src/pages-desktop/dashboard/exams.tsx
index 03aea7e..2a137b8 100644
--- a/src/pages-desktop/dashboard/exams.tsx
+++ b/src/pages-desktop/dashboard/exams.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { invoke } from "@tauri-apps/api/core";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import { motion } from "framer-motion";
@@ -183,9 +184,26 @@ function SidebarSkeleton() {
 export default function ExamSchedulePage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
 
-  const [groups, setGroups] = useState<ExamScheduleGroup[]>([]);
+  const {
+    data: groupsRaw,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<ExamScheduleGroup[]>({
+    cacheKey: "deskly::cache::exam_schedule",
+    fetcher: async () => {
+      const res = await invoke<ExamScheduleResponse>("exam_schedule_get", { semesterSubId: null });
+      return {
+        success: res.success,
+        data: res.data,
+        error: res.error,
+      };
+    },
+    enabled: isLoggedIn && !authLoading,
+  });
+
+  const groups = useMemo(() => groupsRaw || [], [groupsRaw]);
   const [selectedTab, setSelectedTab] = useState<string>("");
-  const [loading, setLoading] = useState(true);
 
   const handleDownloadGroupIcs = async () => {
     try {
@@ -199,25 +217,15 @@ export default function ExamSchedulePage() {
       console.error("Failed to save calendar file", e);
     }
   };
-  const [error, setError] = useState<string | null>(null);
+
   const [currentTime, setCurrentTime] = useState<Date>(new Date());
 
-  // Load from Cache (SWR) first
+  // Auto-select first tab when groups load
   useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::exams");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached) as ExamScheduleGroup[];
-        if (parsed.length > 0) {
-          setGroups(parsed);
-          setSelectedTab(parsed[0].examType);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached exams", e);
-      }
+    if (groups.length > 0 && (!selectedTab || !groups.some(g => g.examType === selectedTab))) {
+      setSelectedTab(groups[0].examType);
     }
-  }, []);
+  }, [groups, selectedTab]);
 
   // Update Current Time every second for countdown
   useEffect(() => {
@@ -225,58 +233,6 @@ export default function ExamSchedulePage() {
     return () => clearInterval(t);
   }, []);
 
-  // Load fresh from backend
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
-      setLoading(groups.length > 0 ? false : true);
-
-      const res = await invoke<ExamScheduleResponse>("exam_schedule_get", { semesterSubId: null });
-      if (res.success && res.data) {
-        setGroups(res.data);
-        localStorage.setItem("deskly::cache::exams", JSON.stringify(res.data));
-        if (res.data.length > 0) {
-          const tabNames = res.data.map(g => g.examType);
-          if (!selectedTab || !tabNames.includes(selectedTab)) {
-            setSelectedTab(res.data[0].examType);
-          }
-        } else {
-          setGroups([]);
-          localStorage.removeItem("deskly::cache::exams");
-        }
-      } else {
-        const errMsg = res.error ?? "Failed to fetch exam schedule.";
-        if (errMsg.includes("Could not find exam schedule table")) {
-          setGroups([]);
-          localStorage.removeItem("deskly::cache::exams");
-          setError("Could not find exam schedule table");
-        } else {
-          setError(errMsg);
-        }
-      }
-    } catch (e) {
-      const errMsg = e instanceof Error ? e.message : String(e);
-      if (errMsg.includes("Could not find exam schedule table")) {
-        setGroups([]);
-        localStorage.removeItem("deskly::cache::exams");
-        setError("Could not find exam schedule table");
-      } else {
-        setError(errMsg);
-      }
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      load();
-    }
-  }, [isLoggedIn, authLoading]);
-
   // Select active schedules matching the current tab selection
   const activeSchedules = useMemo(() => {
     const group = groups.find((g) => g.examType === selectedTab);
diff --git a/src/pages-desktop/dashboard/grades.tsx b/src/pages-desktop/dashboard/grades.tsx
index fa42b70..d0ab225 100644
--- a/src/pages-desktop/dashboard/grades.tsx
+++ b/src/pages-desktop/dashboard/grades.tsx
@@ -1,6 +1,7 @@
-import { useState, useEffect, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getGradesHistory, StudentHistoryData } from "@/lib/features";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import { Input } from "@/components/ui/input";
@@ -147,58 +148,20 @@ function GradesSkeleton() {
 export default function GradesPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
 
-  const [data, setData] = useState<StudentHistoryData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const {
+    data,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<StudentHistoryData>({
+    cacheKey: "deskly::cache::grades",
+    fetcher: getGradesHistory,
+    enabled: isLoggedIn && !authLoading,
+  });
   
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedGradeFilter, setSelectedGradeFilter] = useState("ALL");
 
-  // Load from Cache (SWR) first
-  useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::grades");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached) as StudentHistoryData;
-        if (parsed && parsed.grades && parsed.grades.length > 0) {
-          setData(parsed);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached grades", e);
-      }
-    }
-  }, []);
-
-  // Fetch fresh grades data
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
-      setLoading(data && data.grades && data.grades.length > 0 ? false : true);
-
-      const res = await getGradesHistory();
-      if (res.success && res.data) {
-        setData(res.data);
-        localStorage.setItem("deskly::cache::grades", JSON.stringify(res.data));
-      } else {
-        setError(res.error ?? "Failed to fetch grade history.");
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      load();
-    }
-  }, [isLoggedIn, authLoading]);
-
   // Derived values
   const totalSubjects = useMemo(() => data?.grades?.length ?? 0, [data]);
   const totalCredits = useMemo(() => data?.cgpa?.creditsEarned ?? 0, [data]);
diff --git a/src/pages-desktop/dashboard/hod-dean.tsx b/src/pages-desktop/dashboard/hod-dean.tsx
index 37aba0c..073f26c 100644
--- a/src/pages-desktop/dashboard/hod-dean.tsx
+++ b/src/pages-desktop/dashboard/hod-dean.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getHodDeanDetails, HodDeanDetail } from "@/lib/features";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import {
@@ -137,46 +137,15 @@ function HodDeanSkeleton() {
 
 export default function HodDeanDetailsPage() {
   const { loading: authLoading } = useAuth();
-  const [details, setDetails] = useState<HodDeanDetail[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Load from cache first
-  useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::hod_dean");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (parsed && parsed.length > 0) {
-          setDetails(parsed);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached HOD/Dean details", e);
-      }
-    }
-  }, []);
-
-  async function fetchDetails() {
-    try {
-      setLoading(details && details.length > 0 ? false : true);
-      const res = await getHodDeanDetails();
-      if (res.success && res.data) {
-        setDetails(res.data);
-        localStorage.setItem("deskly::cache::hod_dean", JSON.stringify(res.data));
-      } else {
-        setError(res.error ?? "Failed to fetch HOD and Dean details.");
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    fetchDetails();
-  }, []);
+  const {
+    data: details,
+    loading,
+    error,
+    retry: fetchDetails,
+  } = useOfflineData<HodDeanDetail[]>({
+    cacheKey: "deskly::cache::hod_dean_details",
+    fetcher: getHodDeanDetails,
+  });
 
   const shell = (children: React.ReactNode) => (
     <>{children}</>
diff --git a/src/pages-desktop/dashboard/index.tsx b/src/pages-desktop/dashboard/index.tsx
index ddfd510..735b12b 100644
--- a/src/pages-desktop/dashboard/index.tsx
+++ b/src/pages-desktop/dashboard/index.tsx
@@ -1,7 +1,8 @@
-import { useState, useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { invoke } from "@tauri-apps/api/core";
 import { Link } from "react-router-dom";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import { getStudentProfile, ProfileData } from "@/lib/features";
@@ -179,98 +180,55 @@ function DashboardSkeleton() {
 export default function DashboardHomePage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
 
-  const [profile, setProfile] = useState<ProfileData | null>(null);
-  const [cgpaData, setCgpaData] = useState<CgpaData | null>(null);
-  const [feedbackData, setFeedbackData] = useState<FeedbackStatus[] | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Today's Date formatted nicely
-  const formattedDate = useMemo(() => {
-    return new Date().toLocaleDateString("default", {
-      weekday: "long",
-      month: "long",
-      day: "numeric",
-      year: "numeric",
-    });
-  }, []);
-
-  // Load from Cache (SWR) first
-  useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::dashboard");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (parsed && (parsed.cgpaData || parsed.feedbackData || parsed.profile)) {
-          if (parsed.cgpaData) setCgpaData(parsed.cgpaData);
-          if (parsed.feedbackData) setFeedbackData(parsed.feedbackData);
-          if (parsed.profile) setProfile(parsed.profile);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached dashboard data", e);
-      }
-    }
-  }, []);
-
-  async function loadData() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
+  const {
+    data: combinedData,
+    loading,
+    error,
+    retry: loadData,
+  } = useOfflineData<{
+    cgpaData: CgpaData | null;
+    feedbackData: FeedbackStatus[] | null;
+    profile: ProfileData | null;
+  }>({
+    cacheKey: "deskly::cache::dashboard",
+    fetcher: async () => {
       const [cgpaRes, feedbackRes, profileRes] = await Promise.all([
         getCgpaPage(),
         getFeedbackStatus(),
         getStudentProfile().catch(() => null),
       ]);
 
-      let updatedCgpa = cgpaData;
-      let updatedFeedback = feedbackData;
-      let updatedProfile = profile;
+      const data = {
+        cgpaData: cgpaRes.success && cgpaRes.cgpaData ? cgpaRes.cgpaData : null,
+        feedbackData: feedbackRes.success && feedbackRes.data ? feedbackRes.data : null,
+        profile: profileRes && profileRes.success && profileRes.data ? profileRes.data : null,
+      };
 
-      if (cgpaRes.success && cgpaRes.cgpaData) {
-        setCgpaData(cgpaRes.cgpaData);
-        updatedCgpa = cgpaRes.cgpaData;
-      } else if (cgpaRes.error) {
-        console.error("CGPA fetch error:", cgpaRes.error);
-        setError(cgpaRes.error);
+      if (!cgpaRes.success && cgpaRes.error) {
+        return { success: false, error: cgpaRes.error };
       }
-
-      if (feedbackRes.success && feedbackRes.data) {
-        setFeedbackData(feedbackRes.data);
-        updatedFeedback = feedbackRes.data;
-      } else if (feedbackRes.error) {
-        console.error("Feedback fetch error:", feedbackRes.error);
-        setError(feedbackRes.error);
+      if (!feedbackRes.success && feedbackRes.error) {
+        return { success: false, error: feedbackRes.error };
       }
 
-      if (profileRes && profileRes.success && profileRes.data) {
-        setProfile(profileRes.data);
-        updatedProfile = profileRes.data;
-      }
+      return { success: true, data };
+    },
+    enabled: isLoggedIn && !authLoading,
+  });
 
-      // Save to cache
-      localStorage.setItem(
-        "deskly::cache::dashboard",
-        JSON.stringify({
-          cgpaData: updatedCgpa,
-          feedbackData: updatedFeedback,
-          profile: updatedProfile,
-        })
-      );
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }
+  const cgpaData = combinedData?.cgpaData || null;
+  const feedbackData = combinedData?.feedbackData || null;
+  const profile = combinedData?.profile || null;
 
-  useEffect(() => {
-    if (isLoggedIn) {
-      loadData();
-    }
-  }, [isLoggedIn, authLoading]);
+  // Today's Date formatted nicely
+  const formattedDate = useMemo(() => {
+    return new Date().toLocaleDateString("default", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    });
+  }, []);
 
   function parseFeedbackText(text: string) {
     const normalized = text.toLowerCase();
diff --git a/src/pages-desktop/dashboard/marks.tsx b/src/pages-desktop/dashboard/marks.tsx
index 232b0bf..91be9e8 100644
--- a/src/pages-desktop/dashboard/marks.tsx
+++ b/src/pages-desktop/dashboard/marks.tsx
@@ -1,6 +1,8 @@
 import { useState, useEffect, useMemo } from "react";
 import { useAuth } from "@/hooks/useAuth";
-import { getMarks, StudentMarkEntry } from "@/lib/features";
+import { StudentMarkEntry } from "@/lib/features";
+import { invoke } from "@tauri-apps/api/core";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import { Input } from "@/components/ui/input";
@@ -78,61 +80,32 @@ function MarksSkeleton() {
 export default function MarksPage() {
   const { isLoggedIn, loading: authLoading } = useAuth();
 
-  const [data, setData] = useState<StudentMarkEntry[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const {
+    data: dataRaw,
+    loading,
+    error,
+    retry: load,
+  } = useOfflineData<StudentMarkEntry[]>({
+    cacheKey: "deskly::cache::marks",
+    fetcher: async () => {
+      return await invoke<{ success: boolean; data?: StudentMarkEntry[]; error?: string }>(
+        "marks_get_student_mark_view",
+        { semesterSubId: null }
+      );
+    },
+    enabled: isLoggedIn && !authLoading,
+  });
+
+  const data = useMemo(() => dataRaw || [], [dataRaw]);
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedCourseCode, setSelectedCourseCode] = useState<string>("");
 
-  // Load from Cache (SWR) first
+  // Auto-select first course when data loads
   useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::marks");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (parsed && parsed.length > 0) {
-          setData(parsed);
-          setLoading(false);
-          setSelectedCourseCode(parsed[0].courseCode);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached marks", e);
-      }
+    if (data.length > 0 && !selectedCourseCode) {
+      setSelectedCourseCode(data[0].courseCode);
     }
-  }, []);
-
-  // Fetch fresh marks data
-  async function load() {
-    try {
-      if (!isLoggedIn && !authLoading) return;
-      setError(null);
-      if (authLoading) return;
-
-      setLoading(data.length > 0 ? false : true);
-
-      const res = await getMarks();
-      if (res.success && res.data) {
-        setData(res.data);
-        localStorage.setItem("deskly::cache::marks", JSON.stringify(res.data));
-
-        if (res.data.length > 0) {
-          setSelectedCourseCode(res.data[0].courseCode);
-        }
-      } else {
-        setError(res.error ?? "Failed to fetch marks view.");
-      }
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (isLoggedIn) {
-      load();
-    }
-  }, [isLoggedIn, authLoading]);
+  }, [data, selectedCourseCode]);
 
   // Derived values
   const filteredCourses = useMemo(() => {
diff --git a/src/pages-desktop/dashboard/profile.tsx b/src/pages-desktop/dashboard/profile.tsx
index c410447..a9d420c 100644
--- a/src/pages-desktop/dashboard/profile.tsx
+++ b/src/pages-desktop/dashboard/profile.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from "react";
 import { useAuth } from "@/hooks/useAuth";
 import { getStudentProfile, ProfileData } from "@/lib/features";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import {
@@ -185,46 +185,15 @@ function ProfileSkeleton() {
 
 export default function StudentProfilePage() {
   const { loading: authLoading } = useAuth();
-  const [profile, setProfile] = useState<ProfileData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Load from cache first
-  useEffect(() => {
-    const cached = localStorage.getItem("deskly::cache::profile");
-    if (cached) {
-      try {
-        const parsed = JSON.parse(cached);
-        if (parsed && parsed.student && parsed.student.name) {
-          setProfile(parsed);
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached profile", e);
-      }
-    }
-  }, []);
-
-  async function fetchProfile() {
-    setLoading(profile ? false : true);
-    try {
-      const res = await getStudentProfile();
-      if (res.success && res.data) {
-        setProfile(res.data);
-        localStorage.setItem("deskly::cache::profile", JSON.stringify(res.data));
-      } else {
-        setError(res.error ?? "Failed to fetch student profile details.");
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    fetchProfile();
-  }, []);
+  const {
+    data: profile,
+    loading,
+    error,
+    retry: fetchProfile,
+  } = useOfflineData<ProfileData>({
+    cacheKey: "deskly::cache::profile",
+    fetcher: getStudentProfile,
+  });
 
   const shell = (children: React.ReactNode) => (
     <>{children}</>
diff --git a/src/pages-desktop/dashboard/timetable.tsx b/src/pages-desktop/dashboard/timetable.tsx
index ddfbb47..a11f21c 100644
--- a/src/pages-desktop/dashboard/timetable.tsx
+++ b/src/pages-desktop/dashboard/timetable.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "@/hooks/useAuth";
 import { invoke } from "@tauri-apps/api/core";
+import { useOfflineData } from "@/hooks/use-offline-data";
 
 import { ErrorDisplay } from "@/components/error-display";
 import CalendarExportPopover from "@/components/calendar-export-popover";
@@ -174,82 +175,58 @@ export default function TimetablePage() {
     const mon = new Date(n.setDate(n.getDate() - d + (d === 0 ? -6 : 1)));
     mon.setHours(0,0,0,0); return mon;
   });
-  const [schedule, setSchedule]         = useState<WeeklySchedule>(EMPTY);
-  const [attendance, setAttendance]     = useState<AttendanceRecord[]>([]);
-  const [loading, setLoading]           = useState(true);
-  const [error, setError]               = useState<string|null>(null);
+  const {
+    data: timetableRaw,
+    loading: timetableLoading,
+    error: timetableError,
+    retry: retryTimetable,
+  } = useOfflineData<WeeklySchedule>({
+    cacheKey: "deskly::cache::timetable",
+    fetcher: async () => {
+      const res = await invoke<ApiResult<WeeklySchedule>>("timetable_get_weekly", { semesterSubId: null });
+      return {
+        success: res.success,
+        data: res.data,
+        error: res.error,
+      };
+    },
+    enabled: isLoggedIn && !authLoading,
+    isEmpty: (val) => Object.values(val).every((arr) => arr.length === 0),
+  });
+  const schedule = timetableRaw || EMPTY;
+
+  const {
+    data: attendanceRaw,
+    loading: attendanceLoading,
+    retry: retryAttendance,
+  } = useOfflineData<AttendanceRecord[]>({
+    cacheKey: "deskly::cache::timetable_attendance",
+    fetcher: async () => {
+      const res = await invoke<AttendanceResponse>("attendance_get_current").catch(
+        () => ({ success: false } as AttendanceResponse)
+      );
+      return {
+        success: res.success,
+        data: res.data,
+        error: res.error,
+      };
+    },
+    enabled: isLoggedIn && !authLoading,
+  });
+  const attendance = attendanceRaw || [];
+
+  const loading = timetableLoading || attendanceLoading;
+  const error = timetableError;
   const [now, setNow]                   = useState(() => new Date());
 
+  const load = () => {
+    retryTimetable();
+    retryAttendance();
+  };
+
   useEffect(() => { const t = setInterval(() => setNow(new Date()), 60_000); return () => clearInterval(t); }, []);
   useEffect(() => { if (!authLoading && !isLoggedIn) navigate("/"); }, [isLoggedIn, authLoading]);
 
-  // Load from Cache (SWR) first
-  useEffect(() => {
-    const cachedTt = localStorage.getItem("deskly::cache::timetable");
-    const cachedAtt = localStorage.getItem("deskly::cache::timetable_attendance");
-    if (cachedTt || cachedAtt) {
-      try {
-        let hasData = false;
-        if (cachedTt) {
-          const parsedTt = JSON.parse(cachedTt);
-          if (parsedTt && Object.values(parsedTt).some((arr: any) => Array.isArray(arr) && arr.length > 0)) {
-            setSchedule(parsedTt);
-            hasData = true;
-          }
-        }
-        if (cachedAtt) {
-          const parsedAtt = JSON.parse(cachedAtt);
-          if (parsedAtt && parsedAtt.length > 0) {
-            setAttendance(parsedAtt);
-            hasData = true;
-          }
-        }
-        if (hasData) {
-          setLoading(false);
-        }
-      } catch (e) {
-        console.error("Failed to parse cached timetable/attendance", e);
-      }
-    }
-  }, []);
-
-  async function load() {
-    try {
-      setError(null);
-      const isScheduleEmpty = Object.values(schedule).every(arr => arr.length === 0);
-      setLoading(isScheduleEmpty);
-
-      const [tt, att] = await Promise.all([
-        invoke<ApiResult<WeeklySchedule>>("timetable_get_weekly", { semesterSubId: null }),
-        invoke<AttendanceResponse>("attendance_get_current").catch(() => ({ success: false } as AttendanceResponse)),
-      ]);
-      
-      let updatedTt = schedule;
-      let updatedAtt = attendance;
-      
-      if (tt.success && tt.data) {
-        setSchedule(tt.data);
-        updatedTt = tt.data;
-      } else if (tt.error) {
-        setError(tt.error);
-      }
-      
-      if (att.success && att.data) {
-        setAttendance(att.data);
-        updatedAtt = att.data;
-      }
-      
-      // Save cache
-      localStorage.setItem("deskly::cache::timetable", JSON.stringify(updatedTt));
-      localStorage.setItem("deskly::cache::timetable_attendance", JSON.stringify(updatedAtt));
-    } catch (e) { 
-      setError(e instanceof Error ? e.message : String(e)); 
-    } finally { 
-      setLoading(false); 
-    }
-  }
-  useEffect(() => { if (isLoggedIn) load(); }, [isLoggedIn]);
-
   const DAY_KEYS: (keyof WeeklySchedule)[] = ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"];
   const DAY_SHORT = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
   const DAY_FULL  = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
diff --git a/src/router.ts b/src/router.ts
index a003673..bf0a1cf 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -19,7 +19,6 @@ export type Path =
   | `/dashboard/grades`
   | `/dashboard/hod-dean`
   | `/dashboard/marks`
-  | `/dashboard/payment-receipts`
   | `/dashboard/profile`
   | `/dashboard/settings`
   | `/dashboard/timetable`