diff --git a/src/app/reports/slas/page.tsx b/src/app/reports/slas/page.tsx
index 29d089a..2eb2a65 100644
--- a/src/app/reports/slas/page.tsx
+++ b/src/app/reports/slas/page.tsx
@@ -8,6 +8,7 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Header } from "@/components/layout/header"
 import { Sidebar } from "@/components/layout/sidebar"
+import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react"
 import { usePaymentTransfers, formatAmount } from "@/hooks/usePayments"
 import { useSLAs } from "@/hooks/useSLAs"
 import { useProjectSelection } from "@/contexts/project-context"
@@ -15,23 +16,50 @@ import { useProjectSelection } from "@/contexts/project-context"
 interface ReportData {
   id: string
   period: string
+  periodRaw: number
   entity: string
   entityInitial: string
   entityColor: string
   amount: string
+  amountRaw: number
   status: "paid-out" | "pending" | "processing"
 }
 
 interface TicketData {
   id: string
   date: string
+  dateRaw: string
   entity: string
   entityInitial: string
   entityColor: string
   amount: string
+  amountRaw: number
   status: "completed" | "pending" | "processing"
 }
 
+type MonthlySortField = "period" | "entity" | "amount" | "status"
+type TicketsSortField = "date" | "entity" | "amount" | "status"
+type SortDirection = "asc" | "desc"
+
+function ReportsSortIcon<T extends string>({
+  field,
+  sortField,
+  sortDirection,
+}: {
+  field: T
+  sortField: T | null
+  sortDirection: SortDirection
+}) {
+  if (sortField !== field) {
+    return <ChevronsUpDown className="w-4 h-4 text-muted-foreground" />
+  }
+  return sortDirection === "asc" ? (
+    <ChevronUp className="w-4 h-4 text-brand-primary" />
+  ) : (
+    <ChevronDown className="w-4 h-4 text-brand-primary" />
+  )
+}
+
 // Helper function to format date
 const formatDate = (dateString: string) => {
   const date = new Date(dateString)
@@ -85,6 +113,10 @@ export default function ReportsSLAsPage() {
   const [selectedFilter, setSelectedFilter] = useState("all")
   const [selectedRows, setSelectedRows] = useState<string[]>([])
   const [selectedTicketRows, setSelectedTicketRows] = useState<string[]>([])
+  const [monthlySortField, setMonthlySortField] = useState<MonthlySortField | null>(null)
+  const [monthlySortDirection, setMonthlySortDirection] = useState<SortDirection>("asc")
+  const [ticketsSortField, setTicketsSortField] = useState<TicketsSortField | null>(null)
+  const [ticketsSortDirection, setTicketsSortDirection] = useState<SortDirection>("asc")
 
   const { selectedProjectId } = useProjectSelection()
   const projectId = selectedProjectId ?? undefined
@@ -128,10 +160,12 @@ export default function ReportsSLAsPage() {
       return {
         id: key,
         period: data.month,
+        periodRaw: new Date(data.month).getTime(),
         entity: (data.sla as any)?.name || "Unknown",
         entityInitial: initial,
         entityColor: color,
         amount: formatAmount(data.total, "usd"),
+        amountRaw: data.total,
         status: "paid-out" as const,
       }
     })
@@ -148,21 +182,117 @@ export default function ReportsSLAsPage() {
         return {
           id: transfer.id,
           date: formatDate(transfer.completed_at!),
+          dateRaw: transfer.completed_at!,
           entity: (transfer.sla as any)?.name || "Unknown",
           entityInitial: initial,
           entityColor: color,
           amount: formatAmount(transfer.amount_smallest_unit, transfer.currency),
+          amountRaw: transfer.amount_smallest_unit,
           status: transfer.status === "completed" ? "completed" : "pending",
         }
       })
   }, [transfersData, slasData])
 
+  const sortedReports = useMemo(() => {
+    if (!monthlySortField) return reports
+    const sorted = [...reports]
+    sorted.sort((a, b) => {
+      let aValue: string | number
+      let bValue: string | number
+      switch (monthlySortField) {
+        case "period":
+          aValue = a.periodRaw
+          bValue = b.periodRaw
+          break
+        case "entity":
+          aValue = a.entity.toLowerCase()
+          bValue = b.entity.toLowerCase()
+          break
+        case "amount":
+          aValue = a.amountRaw
+          bValue = b.amountRaw
+          break
+        case "status":
+          aValue = a.status.toLowerCase()
+          bValue = b.status.toLowerCase()
+          break
+        default:
+          return 0
+      }
+      if (aValue < bValue) return monthlySortDirection === "asc" ? -1 : 1
+      if (aValue > bValue) return monthlySortDirection === "asc" ? 1 : -1
+      return 0
+    })
+    return sorted
+  }, [reports, monthlySortField, monthlySortDirection])
+
+  const sortedTickets = useMemo(() => {
+    if (!ticketsSortField) return tickets
+    const sorted = [...tickets]
+    sorted.sort((a, b) => {
+      let aValue: string | number
+      let bValue: string | number
+      switch (ticketsSortField) {
+        case "date":
+          aValue = new Date(a.dateRaw).getTime()
+          bValue = new Date(b.dateRaw).getTime()
+          break
+        case "entity":
+          aValue = a.entity.toLowerCase()
+          bValue = b.entity.toLowerCase()
+          break
+        case "amount":
+          aValue = a.amountRaw
+          bValue = b.amountRaw
+          break
+        case "status":
+          aValue = a.status.toLowerCase()
+          bValue = b.status.toLowerCase()
+          break
+        default:
+          return 0
+      }
+      if (aValue < bValue) return ticketsSortDirection === "asc" ? -1 : 1
+      if (aValue > bValue) return ticketsSortDirection === "asc" ? 1 : -1
+      return 0
+    })
+    return sorted
+  }, [tickets, ticketsSortField, ticketsSortDirection])
+
+  const handleMonthlySort = (field: MonthlySortField) => {
+    if (monthlySortField === field) {
+      if (monthlySortDirection === "asc") {
+        setMonthlySortDirection("desc")
+      } else {
+        setMonthlySortField(null)
+        setMonthlySortDirection("asc")
+      }
+    } else {
+      setMonthlySortField(field)
+      setMonthlySortDirection("asc")
+    }
+  }
+
+  const handleTicketsSort = (field: TicketsSortField) => {
+    if (ticketsSortField === field) {
+      if (ticketsSortDirection === "asc") {
+        setTicketsSortDirection("desc")
+      } else {
+        setTicketsSortField(null)
+        setTicketsSortDirection("asc")
+      }
+    } else {
+      setTicketsSortField(field)
+      setTicketsSortDirection("asc")
+    }
+  }
+
   const handleRowSelect = (id: string) => {
     setSelectedRows((prev) => (prev.includes(id) ? prev.filter((rowId) => rowId !== id) : [...prev, id]))
   }
 
   const handleSelectAll = () => {
-    setSelectedRows(selectedRows.length === reports.length ? [] : reports.map((report) => report.id))
+    setSelectedRows(selectedRows.length === sortedReports.length ? [] : sortedReports.map((report) => report.id))
   }
 
   const handleTicketRowSelect = (id: string) => {
@@ -170,7 +300,7 @@ export default function ReportsSLAsPage() {
   }
 
   const handleTicketSelectAll = () => {
-    setSelectedTicketRows(selectedTicketRows.length === tickets.length ? [] : tickets.map((ticket) => ticket.id))
+    setSelectedTicketRows(selectedTicketRows.length === sortedTickets.length ? [] : sortedTickets.map((ticket) => ticket.id))
   }
 
   return (
@@ -214,100 +344,108 @@ export default function ReportsSLAsPage() {
 
           <div className="max-w-7xl space-y-6">
             {/* Filters */}
-            <div className="flex items-center gap-4">
-              {activeTab === "tickets" ? (
-                <>
-                  <Button
-                    variant={selectedFilter === "current" ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedFilter("current")}
-                    className={
-                      selectedFilter === "current"
-                        ? "bg-brand-primary hover:bg-brand-primary/90 text-white h-9"
-                        : "text-muted-foreground border-border hover:bg-muted bg-white h-9"
-                    }
-                  >
-                    Current month
-                  </Button>
-                  <Select value={selectedMonth} onValueChange={setSelectedMonth}>
-                    <SelectTrigger className="w-[140px] h-9 text-muted-foreground border-border">
-                      <SelectValue placeholder="Choose month" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {months.map((month) => (
-                        <SelectItem key={month} value={month}>
-                          {month}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <Button
-                    variant={selectedFilter === "all" ? "lavender" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedFilter("all")}
-                    className={
-                      selectedFilter === "all"
-                        ? "bg-brand-primary hover:bg-brand-primary/90 text-white h-9"
-                        : "text-muted-foreground border-border hover:bg-muted bg-white h-9"
-                    }
-                  >
-                    All
-                  </Button>
-                </>
-              ) : (
-                <>
-                  <Select value={selectedMonth} onValueChange={setSelectedMonth}>
-                    <SelectTrigger className="w-[140px] h-9 text-muted-foreground border-border">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {months.map((month) => (
-                        <SelectItem key={month} value={month}>
-                          {month}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-
-                  <Button
-                    variant={selectedFilter === "all" ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setSelectedFilter("all")}
-                    className={
-                      selectedFilter === "all"
-                        ? "bg-brand-primary hover:bg-brand-primary/90 text-white h-9"
-                        : "text-muted-foreground border-border hover:bg-muted bg-white h-9"
-                    }
-                  >
-                    All
-                  </Button>
-                </>
+            <div className="flex gap-2 mb-6">
+              {activeTab === "tickets" && (
+                <Button
+                  variant={selectedFilter === "current" ? "default" : "outline"}
+                  size="sm"
+                  className={
+                    selectedFilter === "current"
+                      ? "h-9 text-brand-primary border-brand-primary hover:bg-brand-primary/10 bg-brand-primary/10"
+                      : "h-9 text-muted-foreground border-border hover:bg-muted bg-transparent"
+                  }
+                  onClick={() => {
+                    setSelectedFilter("current")
+                    setSelectedMonth("")
+                  }}
+                >
+                  Current month
+                </Button>
               )}
+              <Select
+                value={selectedMonth}
+                onValueChange={(v) => {
+                  setSelectedMonth(v)
+                  if (v) setSelectedFilter("all")
+                }}
+              >
+                <SelectTrigger className="w-[180px] h-9 text-muted-foreground">
+                  <SelectValue placeholder="Choose month" />
+                </SelectTrigger>
+                <SelectContent>
+                  {months.map((month) => (
+                    <SelectItem key={month} value={month}>
+                      {month}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <Button
+                variant={selectedFilter === "all" ? "default" : "outline"}
+                size="sm"
+                className="h-9 text-muted-foreground border-border hover:bg-muted bg-transparent"
+                onClick={() => {
+                  setSelectedFilter("all")
+                  setSelectedMonth("")
+                }}
+              >
+                All
+              </Button>
             </div>
 
             {/* Monthly Reports Table */}
             {activeTab === "monthly" && (
               <div className="bg-white rounded-lg border border-border overflow-hidden">
                 {/* Table Header */}
-                <div className="bg-muted px-6 py-3 border-b border-border">
+                <div className="bg-brand-primary/10 px-6 py-3 border-b border-border">
                   <div className="grid grid-cols-12 gap-4 items-center">
                     <div className="col-span-1">
-                      <Checkbox
-                        checked={selectedRows.length === reports.length && reports.length > 0}
-                        onCheckedChange={handleSelectAll}
+                      <input
+                        type="checkbox"
+                        className="rounded border-border"
+                        checked={selectedRows.length === sortedReports.length && sortedReports.length > 0}
+                        onChange={handleSelectAll}
                       />
                     </div>
                     <div className="col-span-2">
-                      <span className="text-sm font-medium text-foreground">Period</span>
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("period")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Period</span>
+                        <ReportsSortIcon field="period" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-3">
-                      <span className="text-sm font-medium text-foreground">Entity</span>
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("entity")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Entity</span>
+                        <ReportsSortIcon field="entity" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-2">
-                      <span className="text-sm font-medium text-foreground">Amount</span>
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("amount")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Amount</span>
+                        <ReportsSortIcon field="amount" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-2">
-                      <span className="text-sm font-medium text-foreground">Status</span>
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("status")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Status</span>
+                        <ReportsSortIcon field="status" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-2"></div>
                   </div>
@@ -317,10 +455,10 @@ export default function ReportsSLAsPage() {
                 <div className="divide-y divide-border">
                   {isLoading ? (
                     <div className="px-6 py-8 text-center text-muted-foreground">Loading reports...</div>
-                  ) : reports.length === 0 ? (
+                  ) : sortedReports.length === 0 ? (
                     <div className="px-6 py-8 text-center text-muted-foreground">No reports found</div>
                   ) : (
-                    reports.map((report) => (
+                    sortedReports.map((report) => (
                     <div key={report.id} className="px-6 py-4 hover:bg-[#f7f9ff]">
                       <div className="grid grid-cols-12 gap-4 items-center">
                         <div className="col-span-1">
@@ -355,14 +493,14 @@ export default function ReportsSLAsPage() {
                           <Button
                             variant="outline"
                             size="sm"
-                            className="text-muted-foreground border-border hover:bg-muted bg-white"
+                            className="text-muted-foreground border-border hover:bg-muted bg-transparent"
                           >
                             Open
                           </Button>
                           <Button
                             variant="outline"
                             size="sm"
-                            className="text-muted-foreground border-border hover:bg-muted bg-white"
+                            className="text-muted-foreground border-border hover:bg-muted bg-transparent"
                           >
                             Download PDF
                           </Button>
@@ -377,25 +515,55 @@ export default function ReportsSLAsPage() {
             {activeTab === "tickets" && (
               <div className="bg-white rounded-lg border border-border overflow-hidden">
                 {/* Table Header */}
-                <div className="bg-muted px-6 py-3 border-b border-border">
+                <div className="bg-brand-primary/10 px-6 py-3 border-b border-border">
                   <div className="grid grid-cols-12 gap-4 items-center">
                     <div className="col-span-1">
-                      <Checkbox
-                        checked={selectedTicketRows.length === tickets.length && tickets.length > 0}
-                        onCheckedChange={handleTicketSelectAll}
+                      <input
+                        type="checkbox"
+                        className="rounded border-border"
+                        checked={selectedTicketRows.length === sortedTickets.length && sortedTickets.length > 0}
+                        onChange={handleTicketSelectAll}
                       />
                     </div>
                     <div className="col-span-2">
-                      <span className="text-sm font-medium text-foreground">Date</span>
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("date")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Date</span>
+                        <ReportsSortIcon field="date" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-3">
-                      <span className="text-sm font-medium text-foreground">Entity</span>
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("entity")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Entity</span>
+                        <ReportsSortIcon field="entity" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-2">
-                      <span className="text-sm font-medium text-foreground">Amount</span>
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("amount")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Amount</span>
+                        <ReportsSortIcon field="amount" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-2">
-                      <span className="text-sm font-medium text-foreground">Status</span>
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("status")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Status</span>
+                        <ReportsSortIcon field="status" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
                     </div>
                     <div className="col-span-2"></div>
                   </div>
@@ -405,10 +573,10 @@ export default function ReportsSLAsPage() {
                 <div className="divide-y divide-border">
                   {isLoading ? (
                     <div className="px-6 py-8 text-center text-muted-foreground">Loading tickets...</div>
-                  ) : tickets.length === 0 ? (
+                  ) : sortedTickets.length === 0 ? (
                     <div className="px-6 py-8 text-center text-muted-foreground">No tickets found</div>
                   ) : (
-                    tickets.map((ticket) => (
+                    sortedTickets.map((ticket) => (
                     <div key={ticket.id} className="px-6 py-4 hover:bg-[#f7f9ff]">
                       <div className="grid grid-cols-12 gap-4 items-center">
                         <div className="col-span-1">
@@ -455,14 +623,14 @@ export default function ReportsSLAsPage() {
                           <Button
                             variant="outline"
                             size="sm"
-                            className="text-muted-foreground border-border hover:bg-muted bg-white"
+                            className="text-muted-foreground border-border hover:bg-muted bg-transparent"
                           >
                             Open
                           </Button>
                           <Button
                             variant="outline"
                             size="sm"
-                            className="text-muted-foreground border-border hover:bg-muted bg-white"
+                            className="text-muted-foreground border-border hover:bg-muted bg-transparent"
                           >
                             Download PDF
                           </Button>
diff --git a/src/app/reports/support/page.tsx b/src/app/reports/support/page.tsx
index 346bbda..c49c4e9 100644
--- a/src/app/reports/support/page.tsx
+++ b/src/app/reports/support/page.tsx
@@ -6,13 +6,36 @@ import { Header } from "@/components/layout/header"
 import { Sidebar } from "@/components/layout/sidebar"
 import { Button } from "@/components/ui/button"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Checkbox } from "@/components/ui/checkbox"
 import { Badge } from "@/components/ui/badge"
+import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react"
 import { getStatusBadgeClass } from "@/lib/status-colors"
 import { usePaymentTransfers, formatAmount } from "@/hooks/usePayments"
 import { useProjectSelection } from "@/contexts/project-context"
 
+type MonthlySortField = "period" | "description" | "amount" | "status"
+type TicketsSortField = "ticketId" | "date" | "helper" | "amount" | "status"
+type SortDirection = "asc" | "desc"
+
+function ReportsSortIcon<T extends string>({
+  field,
+  sortField,
+  sortDirection,
+}: {
+  field: T
+  sortField: T | null
+  sortDirection: SortDirection
+}) {
+  if (sortField !== field) {
+    return <ChevronsUpDown className="w-4 h-4 text-muted-foreground" />
+  }
+  return sortDirection === "asc" ? (
+    <ChevronUp className="w-4 h-4 text-brand-primary" />
+  ) : (
+    <ChevronDown className="w-4 h-4 text-brand-primary" />
+  )
+}
+
 const HELPER_COLORS = ["#f4bccc", "#d0f6bc", "#f6e6bc", "#bcedf6", "#cbbcf6", "#82c95f"]
 
 function formatDate(dateString: string) {
@@ -56,6 +79,10 @@ export default function ReportsSupportPage() {
   const [selectedFilter, setSelectedFilter] = useState<"all" | "current">("all")
   const [selectedRows, setSelectedRows] = useState<string[]>([])
   const [selectedTicketRows, setSelectedTicketRows] = useState<string[]>([])
+  const [monthlySortField, setMonthlySortField] = useState<MonthlySortField | null>(null)
+  const [monthlySortDirection, setMonthlySortDirection] = useState<SortDirection>("asc")
+  const [ticketsSortField, setTicketsSortField] = useState<TicketsSortField | null>(null)
+  const [ticketsSortDirection, setTicketsSortDirection] = useState<SortDirection>("asc")
 
   const { selectedProjectId } = useProjectSelection()
   const projectId = selectedProjectId ?? undefined
@@ -97,11 +124,13 @@ export default function ReportsSupportPage() {
       .map(([key, data]) => ({
         id: key,
         period: data.month,
+        periodRaw: new Date(data.month).getTime(),
         description: "Monthly report",
         amount: formatAmount(data.total, "usd"),
+        amountRaw: data.total,
         status: "Paid out" as const,
       }))
-      .sort((a, b) => new Date(b.period).getTime() - new Date(a.period).getTime())
+      .sort((a, b) => b.periodRaw - a.periodRaw)
   }, [transfersData])
 
   // Tickets: individual payment transfers with ticket + helper info
@@ -121,6 +150,7 @@ export default function ReportsSupportPage() {
         helperInitial: initial,
         helperColor: color,
         amount: formatAmount(transfer.amount_smallest_unit, transfer.currency),
+        amountRaw: transfer.amount_smallest_unit,
         status: transfer.status === "completed" ? "Completed" : transfer.status === "failed" ? "Failed" : "Pending",
         statusType: transfer.status,
       }
@@ -137,16 +167,110 @@ export default function ReportsSupportPage() {
 
   // Filter monthly reports by selected month
   const filteredMonthlyReports = useMemo(() => {
-    if (!selectedMonth) return monthlyReports
-    return monthlyReports.filter((r) => r.period === selectedMonth)
-  }, [monthlyReports, selectedMonth])
+    const list = !selectedMonth ? monthlyReports : monthlyReports.filter((r) => r.period === selectedMonth)
+    if (!monthlySortField) return list
+    const sorted = [...list]
+    sorted.sort((a, b) => {
+      let aValue: string | number
+      let bValue: string | number
+      switch (monthlySortField) {
+        case "period":
+          aValue = a.periodRaw
+          bValue = b.periodRaw
+          break
+        case "description":
+          aValue = a.description.toLowerCase()
+          bValue = b.description.toLowerCase()
+          break
+        case "amount":
+          aValue = a.amountRaw
+          bValue = b.amountRaw
+          break
+        case "status":
+          aValue = a.status.toLowerCase()
+          bValue = b.status.toLowerCase()
+          break
+        default:
+          return 0
+      }
+      if (aValue < bValue) return monthlySortDirection === "asc" ? -1 : 1
+      if (aValue > bValue) return monthlySortDirection === "asc" ? 1 : -1
+      return 0
+    })
+    return sorted
+  }, [monthlyReports, selectedMonth, monthlySortField, monthlySortDirection])
+
+  const sortedTickets = useMemo(() => {
+    if (!ticketsSortField) return ticketsData
+    const sorted = [...ticketsData]
+    sorted.sort((a, b) => {
+      let aValue: string | number
+      let bValue: string | number
+      switch (ticketsSortField) {
+        case "ticketId":
+          aValue = (a.ticketId ?? "").toLowerCase()
+          bValue = (b.ticketId ?? "").toLowerCase()
+          break
+        case "date":
+          aValue = new Date(a.dateRaw).getTime()
+          bValue = new Date(b.dateRaw).getTime()
+          break
+        case "helper":
+          aValue = a.helper.toLowerCase()
+          bValue = b.helper.toLowerCase()
+          break
+        case "amount":
+          aValue = a.amountRaw
+          bValue = b.amountRaw
+          break
+        case "status":
+          aValue = a.status.toLowerCase()
+          bValue = b.status.toLowerCase()
+          break
+        default:
+          return 0
+      }
+      if (aValue < bValue) return ticketsSortDirection === "asc" ? -1 : 1
+      if (aValue > bValue) return ticketsSortDirection === "asc" ? 1 : -1
+      return 0
+    })
+    return sorted
+  }, [ticketsData, ticketsSortField, ticketsSortDirection])
+
+  const handleMonthlySort = (field: MonthlySortField) => {
+    if (monthlySortField === field) {
+      if (monthlySortDirection === "asc") {
+        setMonthlySortDirection("desc")
+      } else {
+        setMonthlySortField(null)
+        setMonthlySortDirection("asc")
+      }
+    } else {
+      setMonthlySortField(field)
+      setMonthlySortDirection("asc")
+    }
+  }
+
+  const handleTicketsSort = (field: TicketsSortField) => {
+    if (ticketsSortField === field) {
+      if (ticketsSortDirection === "asc") {
+        setTicketsSortDirection("desc")
+      } else {
+        setTicketsSortField(null)
+        setTicketsSortDirection("asc")
+      }
+    } else {
+      setTicketsSortField(field)
+      setTicketsSortDirection("asc")
+    }
+  }
 
   const handleRowSelect = (id: string) => {
     setSelectedRows((prev) => (prev.includes(id) ? prev.filter((r) => r !== id) : [...prev, id]))
   }
 
   const handleSelectAll = () => {
-    const ids = activeTab === "monthly" ? filteredMonthlyReports.map((r) => r.id) : ticketsData.map((t) => t.id)
+    const ids = activeTab === "monthly" ? filteredMonthlyReports.map((r) => r.id) : sortedTickets.map((t) => t.id)
     setSelectedRows((prev) => (prev.length === ids.length ? [] : ids))
   }
 
@@ -156,15 +280,15 @@ export default function ReportsSupportPage() {
 
   const handleTicketSelectAll = () => {
     setSelectedTicketRows((prev) =>
-      prev.length === ticketsData.length ? [] : ticketsData.map((t) => t.id)
+      prev.length === sortedTickets.length ? [] : sortedTickets.map((t) => t.id)
     )
   }
 
-  const displayReports = activeTab === "monthly" ? filteredMonthlyReports : ticketsData
+  const displayReports = activeTab === "monthly" ? filteredMonthlyReports : sortedTickets
   const allSelected =
     activeTab === "monthly"
       ? selectedRows.length === filteredMonthlyReports.length && filteredMonthlyReports.length > 0
-      : selectedTicketRows.length === ticketsData.length && ticketsData.length > 0
+      : selectedTicketRows.length === sortedTickets.length && sortedTickets.length > 0
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -252,131 +376,230 @@ export default function ReportsSupportPage() {
               </Button>
             </div>
 
-            <div className="bg-white rounded-lg border border-border">
-              <Table>
-                <TableHeader>
-                  <TableRow className="border-b border-border">
-                    <TableHead className="w-12">
-                      <Checkbox
+            <div className="bg-white rounded-lg border border-border overflow-hidden">
+              {/* Table Header */}
+              <div className="bg-brand-primary/10 px-6 py-3 border-b border-border">
+                {activeTab === "monthly" ? (
+                  <div className="grid gap-4 items-center" style={{ gridTemplateColumns: '2rem repeat(11, 1fr)' }}>
+                    <div>
+                      <input
+                        type="checkbox"
+                        className="rounded border-border"
                         checked={allSelected}
-                        onCheckedChange={activeTab === "monthly" ? handleSelectAll : handleTicketSelectAll}
+                        onChange={handleSelectAll}
                       />
-                    </TableHead>
-                    {activeTab === "monthly" ? (
-                      <>
-                        <TableHead className="text-muted-foreground font-medium">Period</TableHead>
-                        <TableHead className="text-muted-foreground font-medium">Description</TableHead>
-                      </>
-                    ) : (
-                      <>
-                        <TableHead className="text-muted-foreground font-medium">Ticket ID</TableHead>
-                        <TableHead className="text-muted-foreground font-medium">Date</TableHead>
-                        <TableHead className="text-muted-foreground font-medium">Helper</TableHead>
-                      </>
-                    )}
-                    <TableHead className="text-muted-foreground font-medium">Amount</TableHead>
-                    <TableHead className="text-muted-foreground font-medium">Status</TableHead>
-                    <TableHead className="w-32" />
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {isLoading ? (
-                    <TableRow>
-                      <TableCell colSpan={7} className="py-8 text-center text-muted-foreground">
-                        Loading...
-                      </TableCell>
-                    </TableRow>
-                  ) : activeTab === "monthly" ? (
-                    filteredMonthlyReports.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={7} className="py-8 text-center text-muted-foreground">
-                          No reports found
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      filteredMonthlyReports.map((report) => (
-                        <TableRow key={report.id} className="border-b border-border hover:bg-muted">
-                          <TableCell>
+                    </div>
+                    <div className="col-span-2">
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("period")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Period</span>
+                        <ReportsSortIcon field="period" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-3">
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("description")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Description</span>
+                        <ReportsSortIcon field="description" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-2">
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("amount")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Amount</span>
+                        <ReportsSortIcon field="amount" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-2">
+                      <button
+                        type="button"
+                        onClick={() => handleMonthlySort("status")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Status</span>
+                        <ReportsSortIcon field="status" sortField={monthlySortField} sortDirection={monthlySortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-2"></div>
+                  </div>
+                ) : (
+                  <div className="grid gap-4 items-center" style={{ gridTemplateColumns: '2rem repeat(11, 1fr)' }}>
+                    <div>
+                      <input
+                        type="checkbox"
+                        className="rounded border-border"
+                        checked={allSelected}
+                        onChange={handleTicketSelectAll}
+                      />
+                    </div>
+                    <div className="col-span-1">
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("ticketId")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Ticket ID</span>
+                        <ReportsSortIcon field="ticketId" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-1">
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("date")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Date</span>
+                        <ReportsSortIcon field="date" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-3">
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("helper")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Helper</span>
+                        <ReportsSortIcon field="helper" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-2">
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("amount")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Amount</span>
+                        <ReportsSortIcon field="amount" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-2">
+                      <button
+                        type="button"
+                        onClick={() => handleTicketsSort("status")}
+                        className="flex items-center space-x-2 hover:text-brand-primary cursor-pointer"
+                      >
+                        <span className="text-sm font-medium text-foreground">Status</span>
+                        <ReportsSortIcon field="status" sortField={ticketsSortField} sortDirection={ticketsSortDirection} />
+                      </button>
+                    </div>
+                    <div className="col-span-2"></div>
+                  </div>
+                )}
+              </div>
+
+              {/* Table Body */}
+              <div className="divide-y divide-border">
+                {isLoading ? (
+                  <div className="px-6 py-8 text-center text-muted-foreground">Loading...</div>
+                ) : activeTab === "monthly" ? (
+                  filteredMonthlyReports.length === 0 ? (
+                    <div className="px-6 py-8 text-center text-muted-foreground">No reports found</div>
+                  ) : (
+                    filteredMonthlyReports.map((report) => (
+                      <div key={report.id} className="px-6 py-4 hover:bg-[#f7f9ff]">
+                        <div className="grid gap-4 items-center" style={{ gridTemplateColumns: '2rem repeat(11, 1fr)' }}>
+                          <div>
                             <Checkbox
                               checked={selectedRows.includes(report.id)}
                               onCheckedChange={() => handleRowSelect(report.id)}
                             />
-                          </TableCell>
-                          <TableCell className="font-medium text-foreground">{report.period}</TableCell>
-                          <TableCell className="text-muted-foreground">{report.description}</TableCell>
-                          <TableCell className="text-foreground">{report.amount}</TableCell>
-                          <TableCell>
-                            <Badge className={`${getStatusBadgeClass(report.status)} hover:opacity-90`}>
+                          </div>
+                          <div className="col-span-2">
+                            <span className="text-sm font-medium text-foreground">{report.period}</span>
+                          </div>
+                          <div className="col-span-3">
+                            <span className="text-sm text-muted-foreground">{report.description}</span>
+                          </div>
+                          <div className="col-span-2">
+                            <span className="text-sm text-foreground">{report.amount}</span>
+                          </div>
+                          <div className="col-span-2">
+                            <Badge className={`${getStatusBadgeClass(report.status)} hover:opacity-90 text-[13px] px-3 py-1`}>
                               {report.status}
                             </Badge>
-                          </TableCell>
-                          <TableCell>
-                            <div className="flex gap-2">
-                              <Button variant="outline" size="sm" className="h-8 text-muted-foreground bg-transparent">
-                                Open
-                              </Button>
-                              <Button variant="outline" size="sm" className="h-8 text-muted-foreground bg-transparent">
-                                Download PDF
-                              </Button>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )
-                  ) : ticketsData.length === 0 ? (
-                    <TableRow>
-                      <TableCell colSpan={7} className="py-8 text-center text-muted-foreground">
-                        No tickets found
-                      </TableCell>
-                    </TableRow>
-                  ) : (
-                    ticketsData.map((ticket) => (
-                      <TableRow key={ticket.id} className="border-b border-border hover:bg-muted">
-                        <TableCell>
+                          </div>
+                          <div className="col-span-2 flex items-center justify-end space-x-2">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="text-muted-foreground border-border hover:bg-muted bg-transparent"
+                            >
+                              Open
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="text-muted-foreground border-border hover:bg-muted bg-transparent"
+                            >
+                              Download PDF
+                            </Button>
+                          </div>
+                        </div>
+                      </div>
+                    ))
+                  )
+                ) : sortedTickets.length === 0 ? (
+                  <div className="px-6 py-8 text-center text-muted-foreground">No tickets found</div>
+                ) : (
+                  sortedTickets.map((ticket) => (
+                    <div key={ticket.id} className="px-6 py-4 hover:bg-[#f7f9ff]">
+                      <div className="grid gap-4 items-center" style={{ gridTemplateColumns: '2rem repeat(11, 1fr)' }}>
+                        <div>
                           <Checkbox
                             checked={selectedTicketRows.includes(ticket.id)}
                             onCheckedChange={() => handleTicketRowSelect(ticket.id)}
                           />
-                        </TableCell>
-                        <TableCell className="font-medium text-foreground">
+                        </div>
+                        <div className="col-span-1">
                           {ticket.ticketId ? (
                             <Link
                               href={`/helper/tickets/${ticket.ticketId}`}
-                              className="text-brand-primary hover:underline"
+                              className="text-sm font-medium text-brand-primary hover:underline"
                             >
                               {getShortTicketId(ticket.ticketId)}
                             </Link>
                           ) : (
-                            "—"
+                            <span className="text-sm font-medium text-foreground">—</span>
                           )}
-                        </TableCell>
-                        <TableCell className="text-muted-foreground">{ticket.date}</TableCell>
-                        <TableCell>
-                          <div className="flex items-center gap-3">
-                            <div
-                              className="w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium text-foreground"
-                              style={{ backgroundColor: ticket.helperColor }}
-                            >
-                              {ticket.helperInitial}
-                            </div>
-                            <span className="text-foreground">{ticket.helper}</span>
+                        </div>
+                        <div className="col-span-1">
+                          <span className="text-sm text-muted-foreground">{ticket.date}</span>
+                        </div>
+                        <div className="col-span-3 flex items-center gap-[18px]">
+                          <div
+                            className="w-8 h-8 rounded-[11px] flex items-center justify-center text-sm font-medium text-foreground shrink-0"
+                            style={{ backgroundColor: ticket.helperColor }}
+                          >
+                            {ticket.helperInitial}
                           </div>
-                        </TableCell>
-                        <TableCell className="text-foreground">{ticket.amount}</TableCell>
-                        <TableCell>
+                          <span className="text-sm font-medium text-foreground">{ticket.helper}</span>
+                        </div>
+                        <div className="col-span-2">
+                          <span className="text-sm text-foreground">{ticket.amount}</span>
+                        </div>
+                        <div className="col-span-2">
                           {ticket.statusType === "pending" ? (
-                            <Badge className={`${getStatusBadgeClass("pending")} flex items-center gap-1 w-fit`}>
+                            <Badge className={`${getStatusBadgeClass("pending")} flex items-center gap-1 w-fit text-[13px] px-3 py-1`}>
                               <svg className="w-3 h-3" viewBox="0 0 12 12" fill="none">
                                 <circle cx="6" cy="6" r="2" fill="currentColor" />
                               </svg>
                               {ticket.status}
                             </Badge>
                           ) : ticket.statusType === "failed" ? (
-                            <Badge className={`${getStatusBadgeClass("failed")} flex items-center gap-1 w-fit`}>
+                            <Badge className={`${getStatusBadgeClass("failed")} flex items-center gap-1 w-fit text-[13px] px-3 py-1`}>
                               {ticket.status}
                             </Badge>
                           ) : (
-                            <Badge className={`${getStatusBadgeClass("completed")} flex items-center gap-1 w-fit`}>
+                            <Badge className={`${getStatusBadgeClass("completed")} flex items-center gap-1 w-fit text-[13px] px-3 py-1`}>
                               <svg className="w-3 h-3" viewBox="0 0 12 12" fill="none">
                                 <path
                                   d="M10 3L4.5 8.5L2 6"
@@ -389,28 +612,39 @@ export default function ReportsSupportPage() {
                               {ticket.status}
                             </Badge>
                           )}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex gap-2">
-                            {ticket.ticketId ? (
-                              <Button variant="outline" size="sm" className="h-8 text-muted-foreground bg-transparent" asChild>
-                                <Link href={`/helper/tickets/${ticket.ticketId}`}>Open</Link>
-                              </Button>
-                            ) : (
-                              <Button variant="outline" size="sm" className="h-8 text-muted-foreground bg-transparent">
-                                Open
-                              </Button>
-                            )}
-                            <Button variant="outline" size="sm" className="h-8 text-muted-foreground bg-transparent">
-                              Download PDF
+                        </div>
+                        <div className="col-span-2 flex items-center justify-end space-x-2">
+                          {ticket.ticketId ? (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="text-muted-foreground border-border hover:bg-muted bg-transparent"
+                              asChild
+                            >
+                              <Link href={`/helper/tickets/${ticket.ticketId}`}>Open</Link>
                             </Button>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
+                          ) : (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="text-muted-foreground border-border hover:bg-muted bg-transparent"
+                            >
+                              Open
+                            </Button>
+                          )}
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="text-muted-foreground border-border hover:bg-muted bg-transparent"
+                          >
+                            Download PDF
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
             </div>
           </div>
         </main>