diff --git a/web/src/pages/Front.svelte b/web/src/pages/Front.svelte
new file mode 100644
index 0000000..9bf9a2c
--- /dev/null
+++ b/web/src/pages/Front.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import LastGameCard from "../lib/LastGameCard.svelte";
+  import TopPlayerCard from "../lib/TopPlayerCard.svelte";
+  import Search from "../lib/Search.svelte";
+</script>
+
+<div class="flex justify-center">
+  <div class="flex flex-col w-3/4">
+    <div class="mb-7 mt-3">
+      <Search
+        placeholder="Search player"
+        onSuggest={(s) => {
+          return ["One", "Two", s];
+        }}
+      />
+    </div>
+    <div class="mb-7">
+      <h1 class="heading">Top players</h1>
+      <div>
+        <TopPlayerCard place={1} name="Player 1" elo={1337} playerID="1" />
+        <TopPlayerCard place={2} name="Player 2" elo={1234} playerID="2" />
+        <TopPlayerCard place={3} name="Player 3" elo={1001} playerID="3" />
+      </div>
+    </div>
+    <div class="mb-7">
+      <h1 class="heading">Last games</h1>
+      <div>
+        <LastGameCard
+          id="1"
+          score={2}
+          t0p0="Player 1"
+          t0p1="Player 2"
+          t1p0="Player 3"
+          t1p1="Player 4"
+        />
+        <LastGameCard
+          id="2"
+          score={-2}
+          t0p0="Player 1"
+          t0p1="Player 2"
+          t1p0="Player 3"
+          t1p1="Player 4"
+        />
+        <LastGameCard
+          id="3"
+          score={2}
+          t0p0="Player 1"
+          t0p1="Player 2"
+          t1p0="Player 3"
+          t1p1="Player 4"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .heading {
+    @apply text-2xl;
+  }
+</style>