diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
new file mode 100644
index 0000000..99b8152
--- /dev/null
+++ b/src/components/DataTable.tsx
@@ -0,0 +1,113 @@
+import {
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+	getPaginationRowModel,
+	SortingState,
+	getSortedRowModel,
+} from "@tanstack/react-table"
+
+import { Button } from "./ui/button"
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table"
+import { useState } from "react"
+
+export function DataTable({ columns, data, loading }) {
+	const [sorting, setSorting] = useState([])
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onSortingChange: setSorting,
+		getSortedRowModel: getSortedRowModel(),
+		state: {
+			sorting,
+		},
+	})
+
+	const pageCount = table.getPageCount()
+	const currentPage = table.getState().pagination?.pageIndex
+	return (
+		<div>
+			<div className="rounded-none border">
+				<Table>
+					<TableHeader>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<TableRow key={headerGroup.id}>
+								{headerGroup.headers.map((header) => {
+									return (
+										<TableHead key={header.id}>
+											{header.isPlaceholder
+												? null
+												: flexRender(
+													header.column.columnDef.header,
+													header.getContext(),
+												)}
+										</TableHead>
+									)
+								})}
+							</TableRow>
+						))}
+					</TableHeader>
+					<TableBody>
+						{table.getRowModel().rows?.length ? (
+							table.getRowModel().rows.map((row) => (
+								<TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+									{row.getVisibleCells().map((cell) => (
+										<TableCell key={cell.id}>
+											{flexRender(cell.column.columnDef.cell, cell.getContext())}
+										</TableCell>
+									))}
+								</TableRow>
+							))
+						) : loading ? (
+							<TableRow>
+								<TableCell colSpan={columns.length} className="h-24 text-center">
+									Loading...
+								</TableCell>
+							</TableRow>
+						) : (
+							<TableRow>
+								<TableCell colSpan={columns.length} className="h-24 text-center">
+									No results.
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+			<div className="flex items-center justify-end space-x-2 py-4 gap-2">
+				<div>
+					<span className="text-sm text-muted-foreground">{`${currentPage + 1} of ${pageCount}`}</span>
+				</div>
+				<div>
+					<Button
+						className="rounded-none"
+						variant="outline"
+						size="sm"
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						Previous
+					</Button>
+					<Button
+						variant="outline"
+						className="rounded-none"
+						size="sm"
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+					>
+						Next
+					</Button>
+				</div>
+			</div>
+		</div>
+	)
+}
diff --git a/src/components/RecentEditsDataTable.tsx b/src/components/RecentEditsDataTable.tsx
deleted file mode 100644
index 5794add..0000000
--- a/src/components/RecentEditsDataTable.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import {
-   flexRender,
-   getCoreRowModel,
-   useReactTable,
-   getPaginationRowModel,
-} from "@tanstack/react-table"
-
-import { Button } from "./ui/button"
-import {
-   Table,
-   TableBody,
-   TableCell,
-   TableHead,
-   TableHeader,
-   TableRow,
-} from "@/components/ui/table"
-
-export function RecentEditsDataTable({ columns, data, loading }) {
-   const table = useReactTable({
-      data,
-      columns,
-      getCoreRowModel: getCoreRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-   })
-
-   const pageCount = table.getPageCount()
-   const currentPage = table.getState().pagination?.pageIndex
-   return (
-      <div>
-         <div className="rounded-none border">
-            <Table>
-               <TableHeader>
-                  {table.getHeaderGroups().map((headerGroup) => (
-                     <TableRow key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => {
-                           return (
-                              <TableHead key={header.id}>
-                                 {header.isPlaceholder
-                                    ? null
-                                    : flexRender(
-                                         header.column.columnDef.header,
-                                         header.getContext(),
-                                      )}
-                              </TableHead>
-                           )
-                        })}
-                     </TableRow>
-                  ))}
-               </TableHeader>
-               <TableBody>
-                  {table.getRowModel().rows?.length ? (
-                     table.getRowModel().rows.map((row) => (
-                        <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
-                           {row.getVisibleCells().map((cell) => (
-                              <TableCell key={cell.id}>
-                                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                              </TableCell>
-                           ))}
-                        </TableRow>
-                     ))
-                  ) : loading ? (
-                     <TableRow>
-                        <TableCell colSpan={columns.length} className="h-24 text-center">
-                           Loading...
-                        </TableCell>
-                     </TableRow>
-                  ) : (
-                     <TableRow>
-                        <TableCell colSpan={columns.length} className="h-24 text-center">
-                           No results.
-                        </TableCell>
-                     </TableRow>
-                  )}
-               </TableBody>
-            </Table>
-         </div>
-         <div className="flex items-center justify-end space-x-2 py-4 gap-2">
-            <div>
-               <span className="text-sm text-muted-foreground">{`${currentPage + 1} of ${pageCount}`}</span>
-            </div>
-            <div>
-               <Button
-                  className="rounded-none"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => table.previousPage()}
-                  disabled={!table.getCanPreviousPage()}
-               >
-                  Previous
-               </Button>
-               <Button
-                  variant="outline"
-                  className="rounded-none"
-                  size="sm"
-                  onClick={() => table.nextPage()}
-                  disabled={!table.getCanNextPage()}
-               >
-                  Next
-               </Button>
-            </div>
-         </div>
-      </div>
-   )
-}
diff --git a/src/containers/RecentEdits.tsx b/src/containers/RecentEdits.tsx
index 1d68faa..cdfe5e6 100644
--- a/src/containers/RecentEdits.tsx
+++ b/src/containers/RecentEdits.tsx
@@ -2,63 +2,77 @@ import { RecentEditsDataTable } from "@/components/RecentEditsDataTable"
 import { useQuery } from "@tanstack/react-query"
 import api from "../api/eolas-api"
 import { Link } from "react-router"
+import { ArrowUpDown } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { DataTable } from "@/components/DataTable"
 
 const columns = [
-	{
-		accessorKey: "title",
-		header: "Title",
-		cell: ({ cell, row }) => {
-			return (
-				<Link to={`entries/${row.original.title}`}>
-					<span className="text-foreground underline-offset-3 underline hover:text-gray-700 dark:hover:text-green-300">
-						{row.original.title}
-					</span>
-				</Link>
-			)
-		},
-	},
-	{
-		accessorKey: "date",
-		header: "Date",
-	},
-	{
-		accessorKey: "time",
-		header: "Time",
-	},
+   {
+      accessorKey: "title",
+      header: ({ column }) => {
+         return (
+            <Button
+               variant="ghost"
+               onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+            >
+               Title
+               <ArrowUpDown className="ml-2 h-4 w-4" />
+            </Button>
+         )
+      },
+      // header: "Title",
+      cell: ({ cell, row }) => {
+         return (
+            <Link to={`entries/${row.original.title}`}>
+               <span className="text-foreground underline-offset-3 underline hover:text-gray-700 dark:hover:text-green-300">
+                  {row.original.title}
+               </span>
+            </Link>
+         )
+      },
+   },
+   {
+      accessorKey: "date",
+      header: "Date",
+   },
+   {
+      accessorKey: "time",
+      header: "Time",
+   },
 ]
 
 export default function RecentEdits() {
-	const { data, isLoading } = useQuery({
-		queryKey: ["entries_recent"],
-		queryFn: () => api.get("/entries?limit=20&sort=date").then((res) => res.data),
-	})
+   const { data, isLoading } = useQuery({
+      queryKey: ["entries_recent"],
+      queryFn: () => api.get("/entries?limit=20&sort=date").then((res) => res.data),
+   })
 
-	console.log(data)
-	const parsed = data?.data?.map((entry) => {
-		const [date, time] = entry?.last_modified?.split(" ")
-		return {
-			title: entry.title.replace(/_/g, " "),
-			date: new Date(date).toLocaleString("en-GB", {
-				day: "numeric",
-				month: "long",
-				year: "numeric",
-			}),
-			time: time,
-		}
-	})
+   console.log(data)
+   const parsed = data?.data?.map((entry) => {
+      const [date, time] = entry?.last_modified?.split(" ")
+      return {
+         title: entry.title.replace(/_/g, " "),
+         date: new Date(date).toLocaleString("en-GB", {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+         }),
+         time: time,
+      }
+   })
 
-	return (
-		<>
-			<div className="border w-full">
-				<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
-					<h2 className="scroll-m-20 font-semibold">Recent edits</h2>
-				</div>
-				<div className="p-4 lg:p-6">
-					<div className="container mx-auto py-2">
-						<RecentEditsDataTable columns={columns} data={parsed || []} loading={isLoading} />
-					</div>
-				</div>
-			</div>
-		</>
-	)
+   return (
+      <>
+         <div className="border w-full">
+            <div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
+               <h2 className="scroll-m-20 font-semibold">Recent edits</h2>
+            </div>
+            <div className="p-4 lg:p-6">
+               <div className="container mx-auto py-2">
+                  <DataTable columns={columns} data={parsed || []} loading={isLoading} />
+               </div>
+            </div>
+         </div>
+      </>
+   )
 }
diff --git a/src/templates/Tag.tsx b/src/templates/Tag.tsx
index 7b7fabd..3351f86 100644
--- a/src/templates/Tag.tsx
+++ b/src/templates/Tag.tsx
@@ -1,4 +1,3 @@
-import Main from "@/templates/Main"
 import { useParams } from "react-router"
 import Page from "./Page"
 export default function Tag() {