diff --git a/svelte/package-lock.json b/svelte/package-lock.json
index 0f9a4f8..b974cec 100644
--- a/svelte/package-lock.json
+++ b/svelte/package-lock.json
@@ -7,6 +7,9 @@
 		"": {
 			"name": "svelte",
 			"version": "0.0.1",
+			"dependencies": {
+				"@fontsource/roboto": "^5.1.0"
+			},
 			"devDependencies": {
 				"@playwright/test": "^1.28.1",
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -270,6 +273,12 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/@fontsource/roboto": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.1.0.tgz",
+			"integrity": "sha512-cFRRC1s6RqPygeZ8Uw/acwVHqih8Czjt6Q0MwoUoDe9U3m4dH1HmNDRBZyqlMSFwgNAUKgFImncKdmDHyKpwdg==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/@humanwhocodes/module-importer": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
diff --git a/svelte/package.json b/svelte/package.json
index 463bf3e..ef1c9d6 100644
--- a/svelte/package.json
+++ b/svelte/package.json
@@ -30,5 +30,8 @@
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
-}
\ No newline at end of file
+	"type": "module",
+	"dependencies": {
+		"@fontsource/roboto": "^5.1.0"
+	}
+}
diff --git a/svelte/src/lib/components/Card.svelte b/svelte/src/lib/components/Card.svelte
new file mode 100644
index 0000000..dffa7c8
--- /dev/null
+++ b/svelte/src/lib/components/Card.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	const CARD_REVERSE = '2B';
+
+	export let value: string = CARD_REVERSE;
+
+	export let width: number = 70;
+	const height: number = width * 1.4;
+
+	let isSelected: boolean = false;
+</script>
+
+<button
+	aria-label={value}
+	style="width:{width}px; height:{height}px;"
+	class:isSelected
+	on:click={() => (isSelected = !isSelected)}
+>
+	<img alt="" src={`/images/cards/${value.toUpperCase()}.svg`} />
+</button>
+
+<style>
+	button {
+		display: inline-block;
+		padding: 0;
+		margin: 2px;
+		cursor: pointer;
+		border: solid;
+		border-width: 0px;
+		border-radius: 4px;
+	}
+
+	button:hover {
+		outline: 3px solid #9ecaed;
+		box-shadow: 0 0 10px 1px #9ecaed;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/svelte/src/lib/components/CardIcon.svelte b/svelte/src/lib/components/CardIcon.svelte
index 6fe2e5e..023f610 100644
--- a/svelte/src/lib/components/CardIcon.svelte
+++ b/svelte/src/lib/components/CardIcon.svelte
@@ -11,10 +11,7 @@
 	aria-label={value}
 	style="width:{width}px; height:{height}px;"
 	class:isSelected
-	on:click={() => {
-		isSelected = !isSelected;
-		console.log(isSelected);
-	}}
+	on:click={() => (isSelected = !isSelected)}
 >
 	<img alt="" src={`/images/cards/${value.toUpperCase()}.svg`} />
 </button>
diff --git a/svelte/src/lib/components/Player.svelte b/svelte/src/lib/components/Player.svelte
new file mode 100644
index 0000000..f61c130
--- /dev/null
+++ b/svelte/src/lib/components/Player.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Card from './Card.svelte';
+
+	export let playerName: string = 'Player 1';
+
+	export let firstCard: string | undefined;
+	export let secondCard: string | undefined;
+</script>
+
+<section>
+	<div>
+		<Card value={firstCard} />
+		<Card value={secondCard} />
+	</div>
+	<h4>{playerName}</h4>
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		width: 200px;
+	}
+
+	h4 {
+		margin: 0;
+	}
+</style>
diff --git a/svelte/src/routes/+layout.svelte b/svelte/src/routes/+layout.svelte
new file mode 100644
index 0000000..5d39f5d
--- /dev/null
+++ b/svelte/src/routes/+layout.svelte
@@ -0,0 +1,8 @@
+<script>
+	import '@fontsource/roboto';
+	import './../styles.css';
+</script>
+
+<main>
+	<slot />
+</main>
diff --git a/svelte/src/routes/+page.svelte b/svelte/src/routes/+page.svelte
index b477e14..77e4d2c 100644
--- a/svelte/src/routes/+page.svelte
+++ b/svelte/src/routes/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import CardIcon from '$lib/components/CardIcon.svelte';
+	import Card from '../lib/components/Card.svelte';
+	import Player from '../lib/components/Player.svelte';
 
 	export const CARD_SUITS: string[] = ['s', 'd', 'h', 'c'];
 	export const CARD_RANKS: string[] = [
@@ -25,5 +27,9 @@
 	{/each}
 {/each}
 
+<br />
+
+<Player />
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
diff --git a/svelte/src/styles.css b/svelte/src/styles.css
new file mode 100644
index 0000000..ee2e1c8
--- /dev/null
+++ b/svelte/src/styles.css
@@ -0,0 +1,12 @@
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.6rem;
+}
+
+h4 {
+  font-size: 2.1rem;
+}
\ No newline at end of file