diff --git a/web/src/pages/AnalyticsPage.tsx b/web/src/pages/AnalyticsPage.tsx
index 5eab4a7a11..57943eba6f 100644
--- a/web/src/pages/AnalyticsPage.tsx
+++ b/web/src/pages/AnalyticsPage.tsx
@@ -1,5 +1,14 @@
-import { useCallback, useEffect, useLayoutEffect, useState } from "react";
-import { BarChart3, Brain, Cpu, RefreshCw, TrendingUp } from "lucide-react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  BarChart3,
+  Brain,
+  Cpu,
+  RefreshCw,
+  TrendingUp,
+} from "lucide-react";
 import { api } from "@/lib/api";
 import type {
   AnalyticsResponse,
@@ -40,6 +49,85 @@ function formatDate(day: string): string {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Sorting
+// ---------------------------------------------------------------------------
+
+function useTableSort<T>(
+  data: T[],
+  defaultKey: keyof T & string,
+  defaultDir: "asc" | "desc" = "desc",
+) {
+  const [sortKey, setSortKey] = useState<string>(defaultKey);
+  const [sortDir, setSortDir] = useState<"asc" | "desc">(defaultDir);
+
+  const sorted = useMemo(() => {
+    return [...data].sort((a, b) => {
+      const aVal = a[sortKey as keyof T];
+      const bVal = b[sortKey as keyof T];
+      // Nulls always last regardless of direction
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+      if (aVal === bVal) return 0;
+      const cmp = aVal > bVal ? 1 : -1;
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortDir]);
+
+  const toggle = useCallback(
+    (key: string) => {
+      if (key === sortKey) {
+        setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+      } else {
+        setSortKey(key);
+        setSortDir("desc");
+      }
+    },
+    [sortKey],
+  );
+
+  return { sorted, sortKey, sortDir, toggle };
+}
+
+function SortHeader({
+  label,
+  col,
+  sortKey,
+  sortDir,
+  toggle,
+  className,
+}: {
+  label: string;
+  col: string;
+  sortKey: string;
+  sortDir: "asc" | "desc";
+  toggle: (key: string) => void;
+  className?: string;
+}) {
+  const active = col === sortKey;
+  return (
+    <th
+      onClick={() => toggle(col)}
+      className={`cursor-pointer select-none ${className ?? ""}`}
+    >
+      <span className="inline-flex items-center gap-1.5 rounded px-1 -mx-1 py-0.5 hover:bg-muted/40 transition-colors">
+        {label}
+        {active ? (
+          sortDir === "asc" ? (
+            <ArrowUp className="h-3.5 w-3.5 text-foreground/80 shrink-0" />
+          ) : (
+            <ArrowDown className="h-3.5 w-3.5 text-foreground/80 shrink-0" />
+          )
+        ) : (
+          <ArrowUpDown className="h-3 w-3 text-muted-foreground/40 shrink-0" />
+        )}
+      </span>
+    </th>
+  );
+}
+
+
+
 function TokenBarChart({ daily }: { daily: AnalyticsDailyEntry[] }) {
   const { t } = useI18n();
   if (daily.length === 0) return null;
@@ -135,9 +223,9 @@ function TokenBarChart({ daily }: { daily: AnalyticsDailyEntry[] }) {
 
 function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
   const { t } = useI18n();
-  if (daily.length === 0) return null;
+  const { sorted, sortKey, sortDir, toggle } = useTableSort(daily, "day", "desc");
 
-  const sorted = [...daily].reverse();
+  if (daily.length === 0) return null;
 
   return (
     <Card>
@@ -154,46 +242,36 @@ function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border text-muted-foreground text-xs">
-                <th className="text-left py-2 pr-4 font-medium">
-                  {t.analytics.date}
-                </th>
-                <th className="text-right py-2 px-4 font-medium">
-                  {t.sessions.title}
-                </th>
-                <th className="text-right py-2 px-4 font-medium">
-                  {t.analytics.input}
-                </th>
-                <th className="text-right py-2 pl-4 font-medium">
-                  {t.analytics.output}
-                </th>
+                <SortHeader label={t.analytics.date} col="day" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-left py-2 pr-4 font-medium" />
+                <SortHeader label={t.sessions.title} col="sessions" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.input} col="input_tokens" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.output} col="output_tokens" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 pl-4 font-medium" />
               </tr>
             </thead>
             <tbody>
-              {sorted.map((d) => {
-                return (
-                  <tr
+              {sorted.map((d) => (
+                <tr
                     key={d.day}
                     className="border-b border-border/50 hover:bg-secondary/20 transition-colors"
                   >
-                    <td className="py-2 pr-4 font-medium">
+                  <td className="py-2 pr-4 font-medium">
                       {formatDate(d.day)}
                     </td>
-                    <td className="text-right py-2 px-4 text-muted-foreground">
+                  <td className="text-right py-2 px-4 text-muted-foreground">
                       {d.sessions}
                     </td>
-                    <td className="text-right py-2 px-4">
-                      <span className="text-[#ffe6cb]">
+                  <td className="text-right py-2 px-4">
+                    <span className="text-[#ffe6cb]">
                         {formatTokens(d.input_tokens)}
                       </span>
-                    </td>
-                    <td className="text-right py-2 pl-4">
-                      <span className="text-emerald-400">
+                  </td>
+                  <td className="text-right py-2 pl-4">
+                    <span className="text-emerald-400">
                         {formatTokens(d.output_tokens)}
                       </span>
-                    </td>
-                  </tr>
-                );
-              })}
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </div>
@@ -204,12 +282,9 @@ function DailyTable({ daily }: { daily: AnalyticsDailyEntry[] }) {
 
 function ModelTable({ models }: { models: AnalyticsModelEntry[] }) {
   const { t } = useI18n();
-  if (models.length === 0) return null;
+  const { sorted, sortKey, sortDir, toggle } = useTableSort(models, "input_tokens", "desc");
 
-  const sorted = [...models].sort(
-    (a, b) =>
-      b.input_tokens + b.output_tokens - (a.input_tokens + a.output_tokens),
-  );
+  if (models.length === 0) return null;
 
   return (
     <Card>
@@ -226,15 +301,9 @@ function ModelTable({ models }: { models: AnalyticsModelEntry[] }) {
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border text-muted-foreground text-xs">
-                <th className="text-left py-2 pr-4 font-medium">
-                  {t.analytics.model}
-                </th>
-                <th className="text-right py-2 px-4 font-medium">
-                  {t.sessions.title}
-                </th>
-                <th className="text-right py-2 pl-4 font-medium">
-                  {t.analytics.tokens}
-                </th>
+                <SortHeader label={t.analytics.model} col="model" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-left py-2 pr-4 font-medium" />
+                <SortHeader label={t.sessions.title} col="sessions" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.tokens} col="input_tokens" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 pl-4 font-medium" />
               </tr>
             </thead>
             <tbody>
@@ -270,6 +339,8 @@ function ModelTable({ models }: { models: AnalyticsModelEntry[] }) {
 
 function SkillTable({ skills }: { skills: AnalyticsSkillEntry[] }) {
   const { t } = useI18n();
+  const { sorted, sortKey, sortDir, toggle } = useTableSort(skills, "total_count", "desc");
+
   if (skills.length === 0) return null;
 
   return (
@@ -285,25 +356,15 @@ function SkillTable({ skills }: { skills: AnalyticsSkillEntry[] }) {
           <table className="w-full text-sm">
             <thead>
               <tr className="border-b border-border text-muted-foreground text-xs">
-                <th className="text-left py-2 pr-4 font-medium">
-                  {t.analytics.skill}
-                </th>
-                <th className="text-right py-2 px-4 font-medium">
-                  {t.analytics.loads}
-                </th>
-                <th className="text-right py-2 px-4 font-medium">
-                  {t.analytics.edits}
-                </th>
-                <th className="text-right py-2 px-4 font-medium">
-                  {t.analytics.total}
-                </th>
-                <th className="text-right py-2 pl-4 font-medium">
-                  {t.analytics.lastUsed}
-                </th>
+                <SortHeader label={t.analytics.skill} col="skill" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-left py-2 pr-4 font-medium" />
+                <SortHeader label={t.analytics.loads} col="view_count" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.edits} col="manage_count" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.total} col="total_count" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 px-4 font-medium" />
+                <SortHeader label={t.analytics.lastUsed} col="last_used_at" sortKey={sortKey} sortDir={sortDir} toggle={toggle} className="text-right py-2 pl-4 font-medium" />
               </tr>
             </thead>
             <tbody>
-              {skills.map((skill) => (
+              {sorted.map((skill) => (
                 <tr
                   key={skill.skill}
                   className="border-b border-border/50 hover:bg-secondary/20 transition-colors"