diff --git a/actions/accounts.ts b/actions/accounts.ts
index 4c78027..161c41d 100644
--- a/actions/accounts.ts
+++ b/actions/accounts.ts
@@ -8,7 +8,9 @@ interface GetAccountsParameters {
     skip?: number;
 }
 
-export async function getAccounts(args?: GetAccountsParameters): Promise<Pick<Users, "id" | "firstName" | "lastName" | "isAdmin" | "isTeacher">[]> {
+export type Account = Pick<Users, "id" | "firstName" | "lastName" | "isAdmin" | "isTeacher">;
+
+export async function getAccounts(args?: GetAccountsParameters): Promise<Account[]> {
     return await prisma.users.findMany({
         take: args?.take,
         skip: args?.skip,
diff --git a/app/dashboard/AccountsTable.tsx b/app/dashboard/AccountsTable.tsx
new file mode 100644
index 0000000..28aa5a4
--- /dev/null
+++ b/app/dashboard/AccountsTable.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { Account } from '@/actions/accounts';
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
+
+export const columns: ColumnDef<Account>[] = [
+	{
+		accessorKey: 'lastName',
+		header: 'Last Name',
+	},
+	{
+		accessorKey: 'firstName',
+		header: 'First Name',
+	},
+];
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+  }: DataTableProps<TData, TValue>) {
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    })