diff --git a/.env b/.env
new file mode 100644
index 0000000..c12363c
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+REACT_APP_API_URL=http://localhost:2500
+API_URL=http://localhost:2500
\ No newline at end of file
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 354fd85..e448b6b 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,9 +1,53 @@
 import type { Route } from "./+types/home";
+import { useEffect, useState } from "react";
+import "../../config.json";
+
+const API_URL = process.env.API_URL;
+type transaction = { id: number; tier: number; type: string; cost: number };
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: "Albion Online Transaction Tracker" }];
 }
 
 export default function Home() {
-  return <></>;
+  return (
+    <>
+      <TransactionTable />
+    </>
+  );
+}
+
+function TransactionTable() {
+  const [transactions, setTransactions] = useState<transaction[]>([]);
+
+  useEffect(() => {
+    fetch(`${API_URL}/transactions`)
+      .then((response) => response.json())
+      .then((data) => {console.log(data); setTransactions(data);});
+  }, [API_URL]);
+
+  return (
+    <>
+      <table>
+        <thead>
+          <tr>
+            <th>Timestamp</th>
+            <th>Tier</th>
+            <th>Type</th>
+            <th>Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          {transactions.map((transaction) => (
+            <tr key={transaction.id}>
+              <td></td>
+              <td>{transaction.tier}</td>
+              <td>{transaction.type}</td>
+              <td>{transaction.cost}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
 }
diff --git a/config.json b/config.json
new file mode 100644
index 0000000..3547696
--- /dev/null
+++ b/config.json
@@ -0,0 +1,3 @@
+{
+  "API_URL": "http://localhost:2500"
+}
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 5dbdfcd..0000000
Binary files a/public/favicon.ico and /dev/null differ