diff --git a/app/actions.ts b/app/actions.ts
new file mode 100644
index 0000000..f247c5e
--- /dev/null
+++ b/app/actions.ts
@@ -0,0 +1,11 @@
+import client from "@/lib/mongodb";
+
+export async function getTeamPlayers() {
+    const db = client.db("SloppyFuckers")
+    return  await db.collection("players").find({}).toArray();
+}
+
+export async function getEvents() {
+    const db = client.db("SloppyFuckers")
+    return  await db.collection("events").find({}).toArray();
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..54a3470
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,42 @@
+import { Metadata } from "next"
+import Footer from "../components/Footer/Footer"
+import Navbar from "../components/Navbar/Navbar"
+
+import "../styles/tailwind.css"
+
+export const metadata: Metadata = {
+  title: "IsaCon",
+  description: "IsaCon Consulting",
+  openGraph: {
+    type: "website",
+    url: "https://isacon.be",
+    title: "IsaCon",
+    description: "IsaCon Consulting",
+    siteName: "IsaCon",
+    images: [
+      {
+        url: "/Isacon logo RBG_1.png",
+      },
+    ],
+  },
+}
+
+export default function RootLayout({
+  // Layouts must accept a children prop.
+  // This will be populated with nested layouts or pages
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="flex min-h-screen flex-col justify-between">
+          <Navbar />
+          <main className="mb-auto min-h-screen bg-primary-50">{children}</main>
+          <Footer />
+        </div>
+      </body>
+    </html>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..5bf66d1
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,13 @@
+export default function Web() {
+  return (
+    <section>
+      <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
+        <div className="mx-auto place-self-center">
+          <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
+            IsaCon
+          </h1>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
deleted file mode 100644
index e10f680..0000000
--- a/components/Layout/Layout.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Head from "next/head"
-import Footer from "../Footer/Footer"
-import Navbar from "../Navbar/Navbar"
-
-export default function Layout({ children }) {
-  return (
-    <>
-      <Head>
-        <meta property="og:url" content="https://isacon.be" />
-        <meta property="og:image" content="/Isacon logo RBG_1.png" />
-        <meta property="og:image:width" content="1200" />
-        <meta property="og:image:height" content="630" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <title>IsaCon</title>
-      </Head>
-      <div className="flex min-h-screen flex-col justify-between">
-        <Navbar />
-        <main className="min-h-screen mb-auto bg-primary-50">{children}</main>
-        <Footer />
-      </div>
-    </>
-  )
-}
diff --git a/pages/_app.test.tsx b/pages/_app.test.tsx
deleted file mode 100644
index adc4579..0000000
--- a/pages/_app.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { render } from "@testing-library/react"
-import { AppProps } from "next/app"
-import MyApp from "./_app"
-
-// Mock router object with required properties
-const router = {
-  basePath: "",
-  pathname: "/",
-  query: {},
-  asPath: "/",
-}
-
-describe("MyApp", () => {
-  it("should render a component with page props", () => {
-    const props: AppProps = {
-      Component: ({ title }) => (
-        <>
-          <div>Test Component</div>
-          <div>{title}</div>
-        </>
-      ),
-      pageProps: { title: "Test Page" },
-      router: router as never, // Include mocked router object in props
-    }
-    const { getByText } = render(<MyApp {...props} />)
-    expect(getByText("Test Component")).toBeInTheDocument()
-    expect(getByText("Test Page")).toBeInTheDocument()
-  })
-})
diff --git a/pages/_app.tsx b/pages/_app.tsx
deleted file mode 100644
index 3ba068b..0000000
--- a/pages/_app.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import "../styles/tailwind.css"
-import { AppProps } from "next/app"
-import Layout from "../components/Layout/Layout";
-
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Layout>
-    <Component {...pageProps} />
-  </Layout>
-}
-
-export default MyApp
diff --git a/pages/api/events.ts b/pages/api/events.ts
deleted file mode 100644
index 0682d30..0000000
--- a/pages/api/events.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import client from "../../lib/mongodb"
-
-export default async function handler(req, res) {
-  const db = client.db("SloppyFuckers")
-  switch (req.method) {
-    case "POST":
-      const myEvent = await db.collection("events").insertOne(JSON.parse(req.body))
-      res.json(myEvent)
-      break
-    case "GET":
-      const allEvents = await db.collection("events").find({}).toArray()
-      res.json({ status: 200, data: allEvents })
-      break
-  }
-}
diff --git a/pages/api/games.ts b/pages/api/games.ts
deleted file mode 100644
index 14acf23..0000000
--- a/pages/api/games.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import client from "../../lib/mongodb"
-
-export default async function handler(req, res) {
-  const db = client.db("SloppyFuckers")
-  switch (req.method) {
-    case "POST":
-      const myEvent = await db.collection("games").insertOne(JSON.parse(req.body))
-      res.json(myEvent)
-      break
-    case "GET":
-      const allEvents = await db.collection("games").find({}).toArray()
-      res.json({ status: 200, data: allEvents })
-      break
-  }
-}
diff --git a/pages/api/health.ts b/pages/api/health.ts
deleted file mode 100644
index 05fda7d..0000000
--- a/pages/api/health.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NextApiRequest, NextApiResponse } from "next"
-
-export default function handler(req: NextApiRequest, res: NextApiResponse) {
-  res.status(200).json({ status: "ok" })
-}
diff --git a/pages/api/players.ts b/pages/api/players.ts
deleted file mode 100644
index 0d03b00..0000000
--- a/pages/api/players.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import client from "../../lib/mongodb"
-
-export default async function handler(req, res) {
-  const db = client.db("SloppyFuckers")
-  switch (req.method) {
-    case "POST":
-      const myPlayer = await db.collection("players").insertOne(JSON.parse(req.body))
-      res.json(myPlayer)
-      break
-    case "GET":
-      const allPlayers = await db.collection("players").find({}).toArray()
-      res.json({ status: 200, data: allPlayers })
-      break
-  }
-}
diff --git a/pages/api/teams.ts b/pages/api/teams.ts
deleted file mode 100644
index c8af8d3..0000000
--- a/pages/api/teams.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import client from "../../lib/mongodb"
-
-export default async function handler(req, res) {
-  const db = client.db("SloppyFuckers")
-  switch (req.method) {
-    case "POST":
-      const myEvent = await db.collection("teams").insertOne(JSON.parse(req.body))
-      res.json(myEvent)
-      break
-    case "GET":
-      const allEvents = await db.collection("teams").find({}).toArray()
-      res.json({ status: 200, data: allEvents })
-      break
-  }
-}
diff --git a/pages/calendar.tsx b/pages/calendar.tsx
deleted file mode 100644
index 18e1243..0000000
--- a/pages/calendar.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-export async function getServerSideProps({ res }) {
-  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
-  const gamesResponse = await fetch("http://localhost:3000/api/games", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-  const allGames = await gamesResponse.json()
-
-  const teamsResponse = await fetch("http://localhost:3000/api/teams", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-  const allTeams = await teamsResponse.json()
-
-  return {
-    props: { allGames, allTeams },
-  }
-}
-
-export default function Dashboard({ allGames, allTeams }) {
-  const findTeam = (id) => {
-    return allTeams?.data.find((team) => team._id === id)
-  }
-  return (
-    <>
-      <section>
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-          <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
-              IsaCon
-            </h1>
-            <h2 className="mb-2 font-bold">Games</h2>
-            {allGames.data.map((game) => (
-              <div key={game.id}>
-                <div className="mb-2 flex max-w-sm flex-wrap overflow-hidden rounded bg-white shadow-lg">
-                  <div className="grid w-1/2 content-center p-2">
-                    {findTeam(game.homeTeam).logo?._meta.url ? (
-                      <img src={findTeam(game.homeTeam).logo?._meta.url} alt="Sunset in the mountains" />
-                    ) : (
-                      findTeam(game.homeTeam).name
-                    )}
-                  </div>
-                  <div className="grid w-1/2 content-center p-2">
-                    {findTeam(game.awayTeam).logo?._meta.url ? (
-                      <img src={findTeam(game.awayTeam).logo?._meta.url} alt="Sunset in the mountains" />
-                    ) : (
-                      findTeam(game.awayTeam).name
-                    )}
-                  </div>
-                  <div className="flex w-full justify-around p-2">
-                    <span>{game.homeScore}</span>
-                    <span>-</span>
-                    <span>{game.awayScore}</span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    </>
-  )
-}
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
deleted file mode 100644
index 1dcbe99..0000000
--- a/pages/dashboard.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export default function Dashboard() {
-  return (
-    <>
-      <section>
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-          <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
-              IsaCon
-            </h1>
-            <h2>Dashboard</h2>
-          </div>
-        </div>
-      </section>
-    </>
-  )
-}
diff --git a/pages/index.tsx b/pages/index.tsx
deleted file mode 100644
index fec4088..0000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-export default function Web() {
-  return (
-    <>
-      <section>
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-          <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
-              IsaCon
-            </h1>
-          </div>
-        </div>
-      </section>
-    </>
-  )
-}
diff --git a/pages/projects.tsx b/pages/projects.tsx
deleted file mode 100644
index 5dacea1..0000000
--- a/pages/projects.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-export async function getServerSideProps({ res }) {
-  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
-  const eventsResponse = await fetch("http://localhost:3000/api/events", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-  const allEvents = await eventsResponse.json()
-
-  return {
-    props: { allEvents },
-  }
-}
-
-export default function Dashboard({ allEvents }) {
-  return (
-    <>
-      <section>
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-          <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
-              IsaCon
-            </h1>
-            <h2>Events</h2>
-            {allEvents.data.map((event) => (
-              <div key={event.id}>{event.name}</div>
-            ))}
-          </div>
-        </div>
-      </section>
-    </>
-  )
-}
diff --git a/pages/team.tsx b/pages/team.tsx
deleted file mode 100644
index 7dbb485..0000000
--- a/pages/team.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-export async function getServerSideProps({ res }) {
-  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
-  const playersResponse = await fetch("http://localhost:3000/api/players", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-  const allPlayers = await playersResponse.json()
-
-  return {
-    props: { allPlayers },
-  }
-}
-
-export default function Dashboard({ allPlayers }) {
-  return (
-    <>
-      <section>
-        <div className="mx-auto grid max-w-screen-xl px-4 py-8 text-center lg:py-16">
-          <div className="mx-auto place-self-center">
-            <h1 className="mb-4 max-w-2xl text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl">
-              IsaCon
-            </h1>
-            <h2>Players</h2>
-            <div className="flex flex-wrap items-center justify-center">
-              {allPlayers.data.map((player) => (
-                <div className="p-2" key={player.id}>
-                  {player.avatar?._meta.url ? (
-                    <img className="max-w-sm" src={player.avatar?._meta.url} alt="Sunset in the mountains" />
-                  ) : (
-                    player.name
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  )
-}
diff --git a/tsconfig.json b/tsconfig.json
index 32b3fdd..513dc56 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,11 @@
   "display": "Next.js",
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -16,8 +20,21 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mjs"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mjs",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }