diff --git a/apps/web/src/app/play/checker/_components/checker-form.tsx b/apps/web/src/app/play/checker/_components/checker-form.tsx
index bdaf17a55..b210ddba0 100644
--- a/apps/web/src/app/play/checker/_components/checker-form.tsx
+++ b/apps/web/src/app/play/checker/_components/checker-form.tsx
@@ -66,7 +66,7 @@ const FloatingActionNoSSR = dynamic(
   {
     ssr: false,
     loading: () => <></>,
-  }
+  },
 );
 
 /**
@@ -190,7 +190,7 @@ export function CheckerForm({ defaultValues, defaultData }: CheckerFormProps) {
                     `Checking ${regionFormatter(_result[0].region, "long")} (${latencyFormatter(_result[0].latency)})`,
                     {
                       id: toastId,
-                    }
+                    },
                   );
                 }
               }
diff --git a/apps/web/src/app/play/checker/_components/global-monitoring.tsx b/apps/web/src/app/play/checker/_components/global-monitoring.tsx
index b22137507..8de9288ef 100644
--- a/apps/web/src/app/play/checker/_components/global-monitoring.tsx
+++ b/apps/web/src/app/play/checker/_components/global-monitoring.tsx
@@ -18,9 +18,9 @@ const features: {
 }[] = [
   {
     icon: "gauge",
-    catchline: "Speed Test for Websites",
+    catchline: "Speed Test",
     description:
-      "Enter your URL and get a website speed check. Get insights on page load, header details and timing phases (DNS, Connect, TLS, TTFB) of the response.",
+      "Enter your URL and get a website speed check. Get insights on page load, header details and timing phases (DNS, Connect, TLS, TTFB, Transfer) of the response.",
   },
   {
     icon: "globe",
@@ -32,7 +32,7 @@ const features: {
     icon: "link",
     catchline: "Share the Results",
     description:
-      "Quickly share the results of your website speed test with your team or clients. We share the results for 7 days, so you can easily collaborate on performance.",
+      "Quickly share the results of your website speed test with your team or clients. The results expire after 7 days, so you can easily collaborate on performance.",
   },
 ];
 export const GlobalMonitoring = () => {
diff --git a/apps/web/src/components/data-table/data-table-column-header.tsx b/apps/web/src/components/data-table/data-table-column-header.tsx
index 68b1fea9d..4620e2fdc 100644
--- a/apps/web/src/components/data-table/data-table-column-header.tsx
+++ b/apps/web/src/components/data-table/data-table-column-header.tsx
@@ -1,18 +1,11 @@
 import type { Column } from "@tanstack/react-table";
-import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@openstatus/ui";
+import { Button, type ButtonProps } from "@openstatus/ui";
 
 import { cn } from "@/lib/utils";
 
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableColumnHeaderProps<TData, TValue> extends ButtonProps {
   column: Column<TData, TValue>;
   title: string;
 }
@@ -21,46 +14,41 @@ export function DataTableColumnHeader<TData, TValue>({
   column,
   title,
   className,
+  ...props
 }: DataTableColumnHeaderProps<TData, TValue>) {
   if (!column.getCanSort()) {
     return <div className={cn(className)}>{title}</div>;
   }
 
   return (
-    <div className={cn("flex items-center space-x-2", className)}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="-ml-3 h-8 data-[state=open]:bg-accent"
-          >
-            <span>{title}</span>
-            {column.getIsSorted() === "desc" ? (
-              <ArrowUp className="ml-2 h-4 w-4" />
-            ) : column.getIsSorted() === "asc" ? (
-              <ArrowDown className="ml-2 h-4 w-4" />
-            ) : (
-              <ChevronsUpDown className="ml-2 h-4 w-4" />
-            )}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
-          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Asc
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-            Desc
-          </DropdownMenuItem>
-          {/* <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeOff className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
-            Hide
-          </DropdownMenuItem> */}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => {
+        column.toggleSorting(undefined);
+      }}
+      className={className}
+      {...props}
+    >
+      <span>{title}</span>
+      <span className="ml-2 flex flex-col">
+        <ChevronUp
+          className={cn(
+            "-mb-0.5 h-3 w-3",
+            column.getIsSorted() === "asc" || !column.getIsSorted()
+              ? "text-accent-foreground"
+              : "text-muted-foreground/70",
+          )}
+        />
+        <ChevronDown
+          className={cn(
+            "-mt-0.5 h-3 w-3",
+            column.getIsSorted() === "desc" || !column.getIsSorted()
+              ? "text-accent-foreground"
+              : "text-muted-foreground/70",
+          )}
+        />
+      </span>
+    </Button>
   );
 }
diff --git a/apps/web/src/components/marketing/card.tsx b/apps/web/src/components/marketing/card.tsx
index bde4ee924..dfdd69df4 100644
--- a/apps/web/src/components/marketing/card.tsx
+++ b/apps/web/src/components/marketing/card.tsx
@@ -96,15 +96,15 @@ export function CardFeature(props: FeatureDescription) {
   const FeatureIcon = Icons[props.icon];
   return (
     <li>
-      <p className="flex flex-col">
-        <span>
-          <FeatureIcon className="mr-1.5 mb-1 inline-flex h-4 w-4 text-foreground/80" />
+      <div className="grid gap-1">
+        <p className="flex items-center gap-2">
+          <FeatureIcon className="h-4 w-4 text-foreground/80" />
           <span className="font-medium text-foreground">
             {props.catchline.replace(".", "")}
           </span>{" "}
-        </span>
+        </p>
         <span className="text-muted-foreground">{props.description}</span>
-      </p>
+      </div>
       {props.badge ? (
         <Badge variant="secondary" className="-ml-2 mt-1">
           {props.badge}
diff --git a/apps/web/src/components/marketing/hero.tsx b/apps/web/src/components/marketing/hero.tsx
index 074e4e92b..981d08d90 100644
--- a/apps/web/src/components/marketing/hero.tsx
+++ b/apps/web/src/components/marketing/hero.tsx
@@ -29,7 +29,7 @@ export function Hero() {
         <h1
           className={cn(
             "font-cal text-4xl text-foreground md:text-6xl",
-            "bg-gradient-to-tl from-0% from-[hsl(var(--muted))] to-40% to-[hsl(var(--foreground))] bg-clip-text text-transparent"
+            "bg-gradient-to-tl from-0% from-[hsl(var(--muted))] to-40% to-[hsl(var(--foreground))] bg-clip-text text-transparent",
           )}
         >
           A better way to monitor your services.
diff --git a/apps/web/src/components/ping-response-analysis/columns.tsx b/apps/web/src/components/ping-response-analysis/columns.tsx
index a4d59f03a..2de2ab731 100644
--- a/apps/web/src/components/ping-response-analysis/columns.tsx
+++ b/apps/web/src/components/ping-response-analysis/columns.tsx
@@ -6,9 +6,9 @@ import {
   continentFormatter,
   latencyFormatter,
   regionFormatter,
-  timestampFormatter,
 } from "./utils";
 
+import { flyRegionsDict } from "@openstatus/utils";
 import { format } from "date-fns";
 import { utcToZonedTime } from "date-fns-tz";
 import { DataTableColumnHeader } from "../data-table/data-table-column-header";
@@ -26,6 +26,7 @@ export const columns: ColumnDef<RegionChecker>[] = [
   },
   {
     accessorKey: "region",
+    accessorFn: (row) => row.region,
     header: "Region",
     cell: ({ row }) => {
       return (
@@ -34,15 +35,11 @@ export const columns: ColumnDef<RegionChecker>[] = [
         </div>
       );
     },
-  },
-  {
-    id: "continent",
-    accessorFn: (row) => continentFormatter(row.region),
-    header: ({ column }) => {
-      return <DataTableColumnHeader column={column} title="Continent" />;
-    },
-    cell: ({ row }) => {
-      return <div>{row.getValue("continent")}</div>;
+    filterFn: (row, _id, filterValue) => {
+      const region = regionFormatter(row.original.region, "long").toLowerCase();
+      const continent =
+        flyRegionsDict[row.original.region].continent.toLocaleLowerCase();
+      return `${region} ${continent}`.includes(filterValue.toLowerCase());
     },
   },
   {
@@ -55,85 +52,141 @@ export const columns: ColumnDef<RegionChecker>[] = [
   {
     id: "DNS",
     header: ({ column }) => {
-      return <DataTableColumnHeader column={column} title="DNS" />;
+      return (
+        <DataTableColumnHeader
+          column={column}
+          title="DNS"
+          className="pr-0 text-right"
+        />
+      );
     },
     accessorFn: (row) => `${row.timing.dnsDone - row.timing.dnsStart}`,
     cell: ({ row, column }) => {
       return (
-        <div className="font-mono">
+        <div className="text-right font-mono">
           {latencyFormatter(row.getValue(column.id))}
         </div>
       );
     },
+    meta: {
+      headerClassName: "text-right",
+    },
   },
   {
     id: "connect",
     accessorFn: (row) => `${row.timing.connectDone - row.timing.connectStart}`,
     header: ({ column }) => {
-      return <DataTableColumnHeader column={column} title="Connect" />;
+      return (
+        <DataTableColumnHeader
+          column={column}
+          title="Connect"
+          className="pr-0 text-right"
+        />
+      );
     },
     cell: ({ row, column }) => {
       return (
-        <div className="font-mono">
+        <div className="text-right font-mono">
           {latencyFormatter(row.getValue(column.id))}
         </div>
       );
     },
+    meta: {
+      headerClassName: "text-right",
+    },
   },
   {
     id: "TLS",
-
     accessorFn: (row) =>
       `${row.timing.tlsHandshakeDone - row.timing.tlsHandshakeStart}`,
     header: ({ column }) => {
-      return <DataTableColumnHeader column={column} title="TLS" />;
+      return (
+        <DataTableColumnHeader
+          column={column}
+          title="TLS"
+          className="pr-0 text-right"
+        />
+      );
     },
     cell: ({ row, column }) => {
       return (
-        <div className="font-mono">
+        <div className="text-right font-mono">
           {latencyFormatter(row.getValue(column.id))}
         </div>
       );
     },
+    meta: {
+      headerClassName: "text-right",
+    },
   },
   {
     id: "TTFB",
     accessorFn: (row) =>
       `${row.timing.firstByteDone - row.timing.firstByteStart}`,
     header: ({ column }) => {
-      return <DataTableColumnHeader column={column} title="TTFB" />;
+      return (
+        <DataTableColumnHeader
+          column={column}
+          title="TTFB"
+          className="pr-0 text-right"
+        />
+      );
     },
     cell: ({ row, column }) => {
       return (
-        <div className="font-mono">
+        <div className="text-right font-mono">
           {latencyFormatter(row.getValue(column.id))}
         </div>
       );
     },
+    meta: {
+      headerClassName: "text-right",
+    },
   },
   {
-    accessorKey: "latency",
+    accessorKey: "transfer",
+    accessorFn: (row) =>
+      `${row.timing.transferDone - row.timing.transferStart}`,
     header: ({ column }) => {
-      return <DataTableColumnHeader column={column} title="Latency" />;
+      return (
+        <DataTableColumnHeader
+          column={column}
+          title="Transfer"
+          className="pr-0 text-right"
+        />
+      );
     },
-    cell: ({ row }) => {
+    cell: ({ row, column }) => {
       return (
-        <div className="font-mono">
-          {latencyFormatter(row.original.latency)}
+        <div className="text-right font-mono">
+          {latencyFormatter(row.getValue(column.id))}
         </div>
       );
     },
+    meta: {
+      headerClassName: "text-right",
+    },
   },
   {
-    id: "Time (UTC)",
-    accessorFn: (row) => row.time,
+    accessorKey: "latency",
+    header: ({ column }) => {
+      return (
+        <DataTableColumnHeader
+          column={column}
+          title="Latency"
+          className="pr-0 text-right"
+        />
+      );
+    },
     cell: ({ row }) => {
-      const date = format(
-        utcToZonedTime(row.original.time, "UTC"),
-        "dd LLL hh:mm a",
+      return (
+        <div className="text-right font-mono">
+          {latencyFormatter(row.original.latency)}
+        </div>
       );
-
-      return <div className="whitespace-nowrap">{date}</div>;
+    },
+    meta: {
+      headerClassName: "text-right",
     },
   },
 ];
diff --git a/apps/web/src/components/ping-response-analysis/multi-region-table.tsx b/apps/web/src/components/ping-response-analysis/multi-region-table.tsx
index dce23a494..b06951177 100644
--- a/apps/web/src/components/ping-response-analysis/multi-region-table.tsx
+++ b/apps/web/src/components/ping-response-analysis/multi-region-table.tsx
@@ -10,8 +10,10 @@ import {
   TableRow,
 } from "@openstatus/ui/src/components/table";
 
+import { Input } from "@openstatus/ui";
 import {
   type ColumnDef,
+  type ColumnFiltersState,
   type ExpandedState,
   type Row,
   type SortingState,
@@ -19,6 +21,7 @@ import {
   flexRender,
   getCoreRowModel,
   getExpandedRowModel,
+  getFilteredRowModel,
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
@@ -47,10 +50,8 @@ export function MultiRegionTable<TData, TValue>({
     { id: "latency", desc: false },
   ]);
   const [expanded, setExpanded] = useState<ExpandedState>({});
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
-    continent: false,
-    "Time (UTC)": false,
-  });
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
   const table = useReactTable({
     data,
@@ -58,24 +59,32 @@ export function MultiRegionTable<TData, TValue>({
     onSortingChange: setSorting,
     onExpandedChange: setExpanded,
     onColumnVisibilityChange: setColumnVisibility,
+    onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
     getRowCanExpand,
     autoResetExpanded,
     state: {
       sorting,
       expanded,
       columnVisibility,
+      columnFilters,
     },
   });
 
   return (
     <div className="grid gap-4">
       <div className="flex items-end justify-between gap-2">
-        <p className="text-muted-foreground text-xs">
-          Select a row to expand the response details.
-        </p>
+        <Input
+          placeholder="Filter regions, continents, flags..."
+          value={(table.getColumn("region")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("region")?.setFilterValue(event.target.value)
+          }
+          className="h-8 max-w-[325px] truncate"
+        />
         <div className="flex items-center justify-end gap-2">
           <DataTableCollapseButton table={table} />
           <DataTableViewOptions table={table} />
@@ -96,7 +105,7 @@ export function MultiRegionTable<TData, TValue>({
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                   </TableHead>
                 );
@@ -119,7 +128,7 @@ export function MultiRegionTable<TData, TValue>({
                     <TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
-                        cell.getContext()
+                        cell.getContext(),
                       )}
                     </TableCell>
                   ))}
diff --git a/apps/web/src/components/ping-response-analysis/multi-region-tabs.tsx b/apps/web/src/components/ping-response-analysis/multi-region-tabs.tsx
index 4565176e8..d17f98cdd 100644
--- a/apps/web/src/components/ping-response-analysis/multi-region-tabs.tsx
+++ b/apps/web/src/components/ping-response-analysis/multi-region-tabs.tsx
@@ -20,10 +20,14 @@ export function MultiRegionTabs({
 }) {
   return (
     <Tabs defaultValue="table">
-      <div className="flex items-center justify-between">
-        <TabsList>
-          <TabsTrigger value="table">Table</TabsTrigger>
-          <TabsTrigger value="chart">Chart</TabsTrigger>
+      <div className="flex items-center justify-between gap-2">
+        <TabsList className="h-8 p-0.5">
+          <TabsTrigger value="table" className="h-7">
+            Table
+          </TabsTrigger>
+          <TabsTrigger value="chart" className="h-7">
+            Chart
+          </TabsTrigger>
         </TabsList>
         <RegionsPreset
           regions={regions.map((i) => i.region)}
@@ -31,12 +35,12 @@ export function MultiRegionTabs({
           size="sm"
         />
       </div>
-      <TabsContent value="chart">
+      <TabsContent value="chart" className="mt-3">
         <MultiRegionChart
           regions={regions.filter((i) => selectedRegions?.includes(i.region))}
         />
       </TabsContent>
-      <TabsContent value="table">
+      <TabsContent value="table" className="mt-3">
         <MultiRegionTable
           data={regions.filter((i) => selectedRegions?.includes(i.region))}
           columns={columns}