diff --git a/.DS_Store b/backend/.DS_Store
similarity index 73%
rename from .DS_Store
rename to backend/.DS_Store
index 2a70607..059e395 100644
Binary files a/.DS_Store and b/backend/.DS_Store differ
diff --git a/compass/app/admin/page.tsx b/compass/app/admin/page.tsx
index f0d9d07..8ed0bd3 100644
--- a/compass/app/admin/page.tsx
+++ b/compass/app/admin/page.tsx
@@ -1,8 +1,28 @@
+"use client";
 import Table from "@/components/Table";
+import { useState } from "react";
+
+// TODO: Example data. Remove later.
+const headersExample = ["username", "email", "role", "password"];
+const dataExample = [
+  {id: 1, username: "example", email: "example@gmail.com", role: "role"},
+  {id: 3, username: "erhgoejnrgexample", email: "example@gmail.com", role: "role"},
+  {id: 2, username: "another one", email: "example@gmail.com", role: "role"},
+  {id: 4, username: "examgoiadnfgople", email: "example@gmail.com", role: "role"},
+  {id: 5, username: "edfhgiebroxample", email: "example@gmail.com", role: "role"},
+  {id: 6, username: "examlsdfkjg", email: "example@gmail.com", role: "role"},
+  {id: 7, username: "exkkkample", email: "example@gmail.com", role: "role"},
+]
 
 export default function Page() {
-    return (<>
-    <Table/>
+  const [data, setData] = useState({
+    headers: [...headersExample],
+    data: [...dataExample],
+  });
+
+  return (
+    <>
+      <Table headersData={data.headers} data={data.data} />
     </>)
-    
-}
\ No newline at end of file
+
+}
diff --git a/compass/components/Table.tsx b/compass/components/Table.tsx
index 2b8cb28..ac55a42 100644
--- a/compass/components/Table.tsx
+++ b/compass/components/Table.tsx
@@ -1,47 +1,45 @@
 import { Component } from "react"
 
+// interface TableHeader {
+//   title: string,
+//   type: string
+// }
+
+// interface TableRow {
+//   [key: string]: any,
+// }
 interface TableProps {
-    headers: object;
-    rows: object;
-  }
+  headersData: string[];
+  data: { [key: string]: any }[];
+}
 
-const Table: React.FC<TableProps> = ({headers, rows}) => {
+const Table: React.FC<TableProps> = ({ headersData, data }) => {
+  const headers = headersData.map((header, i) => {
+    return <th key={"header-" + i} >{header}</th>
+  })
 
-<table>
-<caption>
-    Front-end web developer course 2021
-  </caption>
-  <thead>
-    <tr>
-      <th scope="col">Person</th>
-      <th scope="col">Most interest in</th>
-      <th scope="col">Age</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">Chris</th>
-      <td>HTML tables</td>
-      <td>22</td>
-    </tr>
-    <tr>
-      <th scope="row">Dennis</th>
-      <td>Web accessibility</td>
-      <td>45</td>
-    </tr>
-    <tr>
-      <th scope="row">Sarah</th>
-      <td>JavaScript frameworks</td>
-      <td>29</td>
-    </tr>
-    <tr>
-      <th scope="row">Karen</th>
-      <td>Web performance</td>
-      <td>36</td>
-    </tr>
-  </tbody>
-</table>
+  console.log(data);
+
+  const rows = data.map((item) => {
+    const row = headersData.map(key => {
+      return <td key={"item-" + item.id + key}>{item[key]}</td>
+    });
+    return <tr key={"item-" + item.id}>{row}</tr>
+  })
+
+  return (<>
+    <table>
+      <thead>
+        <tr>
+          {headers}
+        </tr>
+      </thead>
+      <tbody>
+        {rows}
+      </tbody>
+    </table>
+  </>);
 
 }
 
-export default Table
\ No newline at end of file
+export default Table