diff --git a/package-lock.json b/package-lock.json
index 7580349..a511a11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-switch": "^1.1.1",
         "@radix-ui/react-toggle": "^1.1.0",
+        "@tanstack/react-table": "^8.20.5",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
@@ -2204,6 +2205,25 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.20.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
+      "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
+      "dependencies": {
+        "@tanstack/table-core": "8.20.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@tanstack/router-devtools": {
       "version": "1.85.0",
       "resolved": "https://registry.npmjs.org/@tanstack/router-devtools/-/router-devtools-1.85.0.tgz",
@@ -2305,6 +2325,18 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.20.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
+      "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/virtual-file-routes": {
       "version": "1.81.9",
       "resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.81.9.tgz",
diff --git a/package.json b/package.json
index 17cddaf..61bbcd1 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-toggle": "^1.1.0",
+    "@tanstack/react-table": "^8.20.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..f62edea
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index 12d81c4..6d7f122 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
diff --git a/src/routes/-components/columns.tsx b/src/routes/-components/columns.tsx
new file mode 100644
index 0000000..b36945d
--- /dev/null
+++ b/src/routes/-components/columns.tsx
@@ -0,0 +1,36 @@
+import { ColumnDef } from "@tanstack/react-table"
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Result = {
+  year: number
+  unitCode: string
+  unitTitle?: string
+  teachingPeriod?: string
+  creditPoints: number
+  mark: number
+  grade: string
+}
+
+export const columns: ColumnDef<Result>[] = [
+  {
+    accessorKey: "year",
+    header: "Year",
+  },
+  {
+    accessorKey: "unitCode",
+    header: "Unit Code",
+  },
+  {
+    accessorKey: "creditPoints",
+    header: "Credit Points",
+  },
+  {
+    accessorKey: "mark",
+    header: "Mark",
+  },
+  {
+    accessorKey: "grade",
+    header: "Grade",
+  },
+]
diff --git a/src/routes/-components/data-table.tsx b/src/routes/-components/data-table.tsx
new file mode 100644
index 0000000..2f9cad6
--- /dev/null
+++ b/src/routes/-components/data-table.tsx
@@ -0,0 +1,78 @@
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+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(),
+  })
+
+  return (
+    <div className="rounded-md 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>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx
index 63284ca..d93c55f 100644
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -1,17 +1,177 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { Button } from "@/components/ui/button"
-import { Switch } from "@/components/ui/switch"
+import { Result, columns } from "./-components/columns"
+import { DataTable } from "./-components/data-table"
+// import { Button } from "@/components/ui/button"
+// import { Input } from "@/components/ui/input"
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
 
 export const Route = createLazyFileRoute('/')({
   component: Index,
 })
 
+function getData(): Result[] {
+  return [
+    {
+      year: 2021,
+      unitCode: "ENG1002",
+      creditPoints: 6,
+      mark: 75,
+      grade: "D",
+    },
+    {
+      year: 2021,
+      unitCode: "ENG1003",
+      creditPoints: 6,
+      mark: 80,
+      grade: "HD",
+    },
+    {
+      year: 2021,
+      unitCode: "ENG1090",
+      creditPoints: 6,
+      mark: 75,
+      grade: "D",
+    },
+    {
+      year: 2021,
+      unitCode: "PHS1001",
+      creditPoints: 6,
+      mark: 71,
+      grade: "D",
+    },
+    {
+      year: 2021,
+      unitCode: "ECE2072",
+      creditPoints: 6,
+      mark: 50,
+      grade: "P",
+    },
+    {
+      year: 2021,
+      unitCode: "ENG1001",
+      creditPoints: 6,
+      mark: 70,
+      grade: "D",
+    },
+    {
+      year: 2021,
+      unitCode: "ENG1005",
+      creditPoints: 6,
+      mark: 83,
+      grade: "HD",
+    },
+    {
+      year: 2021,
+      unitCode: "ENG1060",
+      creditPoints: 6,
+      mark: 89,
+      grade: "HD",
+    },
+    {
+      year: 2022,
+      unitCode: "FIT1045",
+      creditPoints: 6,
+      mark: 95,
+      grade: "HD",
+    },
+    {
+      year: 2022,
+      unitCode: "FIT2085",
+      creditPoints: 6,
+      mark: 79,
+      grade: "D",
+    },
+    {
+      year: 2022,
+      unitCode: "FIT2099",
+      creditPoints: 6,
+      mark: 77,
+      grade: "D",
+    },
+    {
+      year: 2022,
+      unitCode: "MAT1830",
+      creditPoints: 6,
+      mark: 83,
+      grade: "HD",
+    },
+    {
+      year: 2022,
+      unitCode: "FIT2004",
+      creditPoints: 6,
+      mark: 52,
+      grade: "P",
+    },
+    {
+      year: 2022,
+      unitCode: "FIT2100",
+      creditPoints: 6,
+      mark: 79,
+      grade: "D",
+    },
+    {
+      year: 2022,
+      unitCode: "FIT2101",
+      creditPoints: 6,
+      mark: 82,
+      grade: "HD",
+    },
+    {
+      year: 2022,
+      unitCode: "FIT2107",
+      creditPoints: 6,
+      mark: 64,
+      grade: "C",
+    },
+  ]
+}
+
 function Index() {
+  const data = getData()
+
   return (
     <div className="p-2">
-      <h3>Welcome Home!</h3>
-      <Button>Button</Button>
-      <Switch />
+      <div className="container mx-auto grid gap-6 grid-cols-2 mb-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>WAM <span className="hidden md:inline text-xl text-muted-foreground">(Weighted Average Mark)</span></CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-4xl font-bold font-mono">75.50</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>GPA <span className="hidden md:inline text-xl text-muted-foreground">(Grade Point Average)</span></CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-4xl font-bold font-mono">3.25</p>
+          </CardContent>
+        </Card>
+      </div>
+      {/* <div className="container mx-auto mb-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Add Unit</CardTitle>
+          </CardHeader>
+          <CardContent>
+          <div className="grid gap-4 md:grid-cols-3 lg:grid-cols-6">
+            <Input placeholder="Unit Code" />
+            <Input placeholder="Credit Points" type="number" />
+            <Input placeholder="Mark" type="number" />
+            <Button>Add Unit</Button>
+          </div>
+          </CardContent>
+        </Card>
+      </div> */}
+      <div className="container mx-auto py-4">
+        <DataTable columns={columns} data={data} />
+      </div>
     </div>
   )
 }
\ No newline at end of file