diff --git a/src/app/default/api/route.ts b/src/app/default/api/route.ts
new file mode 100644
index 0000000..bcbb1ad
--- /dev/null
+++ b/src/app/default/api/route.ts
@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { data } from "@/app/default/data";
+
+export async function GET() {
+  // Simulate network delay
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  return NextResponse.json({
+    data,
+    total: data.length,
+  });
+}
diff --git a/src/app/default/client.tsx b/src/app/default/client.tsx
new file mode 100644
index 0000000..d16bf50
--- /dev/null
+++ b/src/app/default/client.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { columns } from "./columns";
+import { filterFields } from "./constants";
+import { DataTable } from "./data-table";
+import { dataOptions } from "./query-options";
+import { useQueryStates } from "nuqs";
+import { searchParamsParser } from "./search-params";
+
+export function Client() {
+  const [search] = useQueryStates(searchParamsParser);
+  const { data } = useQuery(dataOptions(search));
+
+  if (!data) return null;
+
+  return (
+    <DataTable
+      columns={columns}
+      data={data.data}
+      filterFields={filterFields}
+      defaultColumnFilters={Object.entries(search)
+        .map(([key, value]) => ({
+          id: key,
+          value,
+        }))
+        .filter(({ value }) => value ?? undefined)}
+    />
+  );
+}
diff --git a/src/app/default/loading.tsx b/src/app/default/loading.tsx
new file mode 100644
index 0000000..7aca0bc
--- /dev/null
+++ b/src/app/default/loading.tsx
@@ -0,0 +1,5 @@
+import { Skeleton } from "./skeleton";
+
+export default function Loading() {
+  return <Skeleton />;
+}
diff --git a/src/app/default/page.tsx b/src/app/default/page.tsx
index fa46dad..7a450e3 100644
--- a/src/app/default/page.tsx
+++ b/src/app/default/page.tsx
@@ -1,10 +1,8 @@
-import * as React from "react";
-import { columns } from "./columns";
-import { filterFields } from "./constants";
-import { data } from "./data";
-import { DataTable } from "./data-table";
+import { getQueryClient } from "@/providers/get-query-client";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { searchParamsCache } from "./search-params";
-import { Skeleton } from "./skeleton";
+import { dataOptions } from "./query-options";
+import { Client } from "./client";
 
 export default async function Page({
   searchParams,
@@ -12,20 +10,14 @@ export default async function Page({
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
   const search = searchParamsCache.parse(await searchParams);
+  const queryClient = getQueryClient();
+  await queryClient.prefetchQuery(dataOptions(search));
+
+  const dehydratedState = dehydrate(queryClient);
 
   return (
-    <React.Suspense fallback={<Skeleton />}>
-      <DataTable
-        columns={columns}
-        data={data}
-        filterFields={filterFields}
-        defaultColumnFilters={Object.entries(search)
-          .map(([key, value]) => ({
-            id: key,
-            value,
-          }))
-          .filter(({ value }) => value ?? undefined)}
-      />
-    </React.Suspense>
+    <HydrationBoundary state={dehydratedState}>
+      <Client />
+    </HydrationBoundary>
   );
 }
diff --git a/src/app/default/query-options.ts b/src/app/default/query-options.ts
new file mode 100644
index 0000000..cea6a42
--- /dev/null
+++ b/src/app/default/query-options.ts
@@ -0,0 +1,26 @@
+import { queryOptions } from "@tanstack/react-query";
+import type { ColumnSchema } from "./types";
+
+interface ApiResponse {
+  data: ColumnSchema[];
+  total: number;
+}
+
+export const dataOptions = (search: Record<string, any>) =>
+  queryOptions({
+    queryKey: ["default-data", search],
+    queryFn: async () => {
+      // Use absolute URL for server-side fetching
+      const baseUrl = typeof window === 'undefined'
+        ? `http://localhost:${process.env.PORT || 3001}`
+        : '';
+
+      const response = await fetch(`${baseUrl}/default/api`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch data");
+      }
+      const result: ApiResponse = await response.json();
+      return result;
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
diff --git a/src/app/infinite/client.tsx b/src/app/infinite/client.tsx
index 70eeecc..33774ab 100644
--- a/src/app/infinite/client.tsx
+++ b/src/app/infinite/client.tsx
@@ -5,7 +5,7 @@ import { getLevelRowClassName } from "@/lib/request/level";
 import { cn } from "@/lib/utils";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import type { Table as TTable } from "@tanstack/react-table";
-import { useQueryState, useQueryStates } from "nuqs";
+import { useQueryState } from "nuqs";
 import * as React from "react";
 import { LiveRow } from "./_components/live-row";
 import { columns } from "./columns";
@@ -13,10 +13,9 @@ import { filterFields as defaultFilterFields, sheetFields } from "./constants";
 import { DataTableInfinite } from "./data-table-infinite";
 import { dataOptions } from "./query-options";
 import type { FacetMetadataSchema } from "./schema";
-import { searchParamsParser } from "./search-params";
+import { searchParamsParser, type SearchParamsType } from "./search-params";
 
-export function Client() {
-  const [search] = useQueryStates(searchParamsParser);
+export function Client({ search }: { search: SearchParamsType }) {
   const {
     data,
     isFetching,
@@ -76,6 +75,15 @@ export function Client() {
     });
   }, [facets]);
 
+  const defaultColumnFilters = React.useMemo(() => {
+    return Object.entries(filter)
+      .map(([key, value]) => ({
+        id: key,
+        value,
+      }))
+      .filter(({ value }) => value ?? undefined);
+  }, [filter]);
+
   return (
     <DataTableInfinite
       columns={columns}
@@ -83,12 +91,7 @@ export function Client() {
       totalRows={totalDBRowCount}
       filterRows={filterDBRowCount}
       totalRowsFetched={totalFetched}
-      defaultColumnFilters={Object.entries(filter)
-        .map(([key, value]) => ({
-          id: key,
-          value,
-        }))
-        .filter(({ value }) => value ?? undefined)}
+      defaultColumnFilters={defaultColumnFilters}
       defaultColumnSorting={sort ? [sort] : undefined}
       defaultRowSelection={search.uuid ? { [search.uuid]: true } : undefined}
       // FIXME: make it configurable - TODO: use `columnHidden: boolean` in `filterFields`
diff --git a/src/app/infinite/loading.tsx b/src/app/infinite/loading.tsx
new file mode 100644
index 0000000..7aca0bc
--- /dev/null
+++ b/src/app/infinite/loading.tsx
@@ -0,0 +1,5 @@
+import { Skeleton } from "./skeleton";
+
+export default function Loading() {
+  return <Skeleton />;
+}
diff --git a/src/app/infinite/page.tsx b/src/app/infinite/page.tsx
index fd656b6..ccf620e 100644
--- a/src/app/infinite/page.tsx
+++ b/src/app/infinite/page.tsx
@@ -1,17 +1,23 @@
-import * as React from "react";
 import { searchParamsCache } from "./search-params";
 import { getQueryClient } from "@/providers/get-query-client";
 import { dataOptions } from "./query-options";
 import { Client } from "./client";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
-  const search = searchParamsCache.parse(await searchParams);
+  const search = await searchParamsCache.parse(searchParams);
   const queryClient = getQueryClient();
   await queryClient.prefetchInfiniteQuery(dataOptions(search));
 
-  return <Client />;
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Client search={search} />
+    </HydrationBoundary>
+  );
 }
diff --git a/src/app/infinite/query-options.ts b/src/app/infinite/query-options.ts
index f666b1e..c3d1149 100644
--- a/src/app/infinite/query-options.ts
+++ b/src/app/infinite/query-options.ts
@@ -49,7 +49,7 @@ export const dataOptions = (search: SearchParamsType) => {
         json,
       );
     },
-    initialPageParam: { cursor: new Date().getTime(), direction: "next" },
+    initialPageParam: { cursor: search.cursor.getTime(), direction: "next" },
     getPreviousPageParam: (firstPage, _pages) => {
       if (!firstPage.prevCursor) return null;
       return { cursor: firstPage.prevCursor, direction: "prev" };
@@ -60,5 +60,6 @@ export const dataOptions = (search: SearchParamsType) => {
     },
     refetchOnWindowFocus: false,
     placeholderData: keepPreviousData,
-  });
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
 };
diff --git a/src/app/infinite/skeleton.tsx b/src/app/infinite/skeleton.tsx
new file mode 100644
index 0000000..5a1331f
--- /dev/null
+++ b/src/app/infinite/skeleton.tsx
@@ -0,0 +1,237 @@
+import { Skeleton as DefaultSkeleton } from "@/components/ui/skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/custom/table";
+import { cn } from "@/lib/utils";
+
+export function Skeleton() {
+  return (
+    <div
+      className="flex h-full min-h-screen w-full flex-col sm:flex-row"
+      style={
+        {
+          "--top-bar-height": "0px",
+        } as React.CSSProperties
+      }
+    >
+      {/* Left Sidebar - Filters */}
+      <div
+        className={cn(
+          "h-full w-full flex-col sm:sticky sm:top-0 sm:max-h-screen sm:min-h-screen sm:min-w-52 sm:max-w-52 sm:self-start md:min-w-72 md:max-w-72",
+          "hidden sm:flex",
+        )}
+      >
+        <div className="border-b border-border bg-background p-2 md:sticky md:top-0">
+          <div className="flex h-[46px] items-center justify-between gap-3">
+            <p className="px-2 font-medium text-foreground">Filters</p>
+          </div>
+        </div>
+        <div className="flex-1 p-2 sm:overflow-y-scroll">
+          {/* Filter Controls Skeleton */}
+          <div className="flex flex-col gap-4">
+            {/* Time Range */}
+            <div className="space-y-2">
+              <DefaultSkeleton className="h-4 w-20" />
+              <DefaultSkeleton className="h-9 w-full" />
+            </div>
+
+            {/* Level Filters */}
+            <div className="space-y-2">
+              <DefaultSkeleton className="h-4 w-12" />
+              <div className="grid gap-2">
+                <DefaultSkeleton className="h-7 w-full" />
+                <DefaultSkeleton className="h-7 w-full" />
+                <DefaultSkeleton className="h-7 w-full" />
+              </div>
+            </div>
+
+            {/* Other Filters */}
+            {Array.from({ length: 9 }).map((_, i) => (
+              <div key={i} className="space-y-2">
+                <DefaultSkeleton className="h-4 w-24" />
+                <DefaultSkeleton className="h-9 w-full" />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="border-t border-border bg-background p-4 md:sticky md:bottom-0">
+          {/* Socials Footer Skeleton */}
+          <div className="flex items-center justify-center gap-2">
+            <DefaultSkeleton className="h-5 w-5 rounded-full" />
+            <DefaultSkeleton className="h-5 w-5 rounded-full" />
+            <DefaultSkeleton className="h-5 w-5 rounded-full" />
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div
+        className={cn(
+          "flex max-w-full flex-1 flex-col border-border sm:border-l",
+        )}
+      >
+        {/* Top Bar */}
+        <div
+          className={cn(
+            "flex flex-col gap-4 bg-background p-2",
+            "sticky top-0 z-10 pb-4",
+          )}
+        >
+          {/* Search Command Palette */}
+          <DefaultSkeleton className="h-11 w-full rounded-lg border border-border" />
+
+          {/* Toolbar */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <DefaultSkeleton className="h-9 w-32" />
+            </div>
+            <div className="flex items-center gap-2">
+              <DefaultSkeleton className="h-4 w-36" />
+              <div className="flex gap-1">
+                <DefaultSkeleton className="h-9 w-9" />
+                <DefaultSkeleton className="h-9 w-9" />
+              </div>
+            </div>
+          </div>
+
+          {/* Timeline Chart Skeleton */}
+          <div className="-mb-2 aspect-auto h-[60px] w-full">
+            <div className="relative h-full">
+              {/* Chart bars area - positioned at top */}
+              <div className="absolute inset-x-0 top-0 flex h-[45px] items-end gap-[1px]">
+                {Array.from({ length: 40 }).map((_, i) => (
+                  <DefaultSkeleton
+                    key={i}
+                    className="flex-1 rounded-sm"
+                    style={{
+                      height: `${Math.random() * 30 + 15}%`,
+                    }}
+                  />
+                ))}
+              </div>
+              {/* Axis labels area - positioned at bottom */}
+              <div className="absolute bottom-0 left-0 right-0 flex h-[15px] items-center justify-between px-1">
+                <DefaultSkeleton className="h-3 w-12" />
+                <DefaultSkeleton className="h-3 w-12" />
+                <DefaultSkeleton className="h-3 w-12" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Data Table */}
+        <div className="z-0">
+          <Table
+            className="border-separate border-spacing-0"
+            containerClassName="max-h-[calc(100vh_-_var(--top-bar-height))]"
+          >
+            <TableHeader className={cn("sticky top-0 z-20 bg-background")}>
+              <TableRow
+                className={cn(
+                  "bg-muted/50 hover:bg-muted/50",
+                  "[&>*]:border-t [&>:not(:last-child)]:border-r",
+                )}
+              >
+                {/* Level */}
+                <TableHead className="w-[27px] max-w-[27px] min-w-[27px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-4" />
+                </TableHead>
+                {/* Date */}
+                <TableHead className="w-[200px] max-w-[200px] min-w-[200px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-12" />
+                </TableHead>
+                {/* Status */}
+                <TableHead className="w-[60px] max-w-[60px] min-w-[60px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-12" />
+                </TableHead>
+                {/* Method */}
+                <TableHead className="w-[69px] max-w-[69px] min-w-[69px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-12" />
+                </TableHead>
+                {/* Host */}
+                <TableHead className="min-w-[125px] w-[125px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-12" />
+                </TableHead>
+                {/* Pathname */}
+                <TableHead className="min-w-[130px] w-[130px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-16" />
+                </TableHead>
+                {/* Latency */}
+                <TableHead className="w-[100px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-14" />
+                </TableHead>
+                {/* Region */}
+                <TableHead className="w-[100px] border-b border-border">
+                  <DefaultSkeleton className="h-4 w-12" />
+                </TableHead>
+                {/* Timing Phases */}
+                <TableHead className="border-b border-border">
+                  <DefaultSkeleton className="h-4 w-24" />
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: 12 }).map((_, i) => (
+                <TableRow key={i} className="hover:bg-transparent">
+                  {/* Level */}
+                  <TableCell className="w-[27px] max-w-[27px] min-w-[27px]">
+                    <DefaultSkeleton className="h-2 w-2 rounded-full" />
+                  </TableCell>
+                  {/* Date */}
+                  <TableCell className="w-[200px] max-w-[200px] min-w-[200px] font-mono">
+                    <DefaultSkeleton className="h-4 w-[180px]" />
+                  </TableCell>
+                  {/* Status */}
+                  <TableCell className="w-[60px] max-w-[60px] min-w-[60px] font-mono">
+                    <DefaultSkeleton className="h-5 w-8 rounded" />
+                  </TableCell>
+                  {/* Method */}
+                  <TableCell className="w-[69px] max-w-[69px] min-w-[69px] font-mono">
+                    <DefaultSkeleton className="h-4 w-10" />
+                  </TableCell>
+                  {/* Host */}
+                  <TableCell className="min-w-[125px] w-[125px] font-mono">
+                    <DefaultSkeleton className="h-4 w-[110px]" />
+                  </TableCell>
+                  {/* Pathname */}
+                  <TableCell className="min-w-[130px] w-[130px] font-mono">
+                    <DefaultSkeleton className="h-4 w-[100px]" />
+                  </TableCell>
+                  {/* Latency */}
+                  <TableCell className="w-[100px] font-mono">
+                    <DefaultSkeleton className="h-4 w-16" />
+                  </TableCell>
+                  {/* Region */}
+                  <TableCell className="w-[100px]">
+                    <DefaultSkeleton className="h-4 w-12" />
+                  </TableCell>
+                  {/* Timing Phases */}
+                  <TableCell>
+                    <div className="flex h-6 w-full items-center gap-0.5">
+                      <DefaultSkeleton className="h-2 flex-1 rounded-sm" />
+                      <DefaultSkeleton className="h-2 flex-1 rounded-sm" />
+                      <DefaultSkeleton className="h-2 flex-1 rounded-sm" />
+                      <DefaultSkeleton className="h-2 flex-1 rounded-sm" />
+                      <DefaultSkeleton className="h-2 flex-1 rounded-sm" />
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {/* Load More Button Row */}
+              <TableRow className="hover:bg-transparent data-[state=selected]:bg-transparent">
+                <TableCell colSpan={9} className="text-center">
+                  <DefaultSkeleton className="mx-auto h-9 w-24" />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/light/page.tsx b/src/app/light/page.tsx
index 07ff9b9..d5b13f0 100644
--- a/src/app/light/page.tsx
+++ b/src/app/light/page.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { Client } from "./client";
 import { dataOptions } from "./query-options";
 import { searchParamsCache } from "./search-params";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 
 export default async function Page({
   searchParams,
@@ -14,5 +15,11 @@ export default async function Page({
   const queryClient = getQueryClient();
   await queryClient.prefetchInfiniteQuery(dataOptions(search));
 
-  return <Client />;
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      <Client />
+    </HydrationBoundary>
+  );
 }
diff --git a/src/app/light/query-options.ts b/src/app/light/query-options.ts
index 3e9a00b..5ad7c22 100644
--- a/src/app/light/query-options.ts
+++ b/src/app/light/query-options.ts
@@ -36,5 +36,6 @@ export const dataOptions = (search: SearchParamsType) => {
     },
     refetchOnWindowFocus: false,
     placeholderData: keepPreviousData,
+    staleTime: 1000 * 60 * 5, // 5 minutes
   });
 };