diff --git a/svelte/my-app/src/routes/+page.svelte b/svelte/my-app/src/routes/+page.svelte
index cc88df0..aa86059 100644
--- a/svelte/my-app/src/routes/+page.svelte
+++ b/svelte/my-app/src/routes/+page.svelte
@@ -1,2 +1,29 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import axios from 'axios';
+  let cards = [];
+
+  async function loadCard() {
+    const response = await fetch('http://localhost:8000/foreign/json/card.json');
+    cards = [...cards, (await response.json())];
+    //console.log(response);
+    //console.log(cards);
+  }
+
+  onMount(() => {
+    loadCard();
+  });
+</script>
+
+<div>
+
+  <button onclick={loadCard}>Load Card</button>
+
+  {#each cards as card}
+    <article>
+      <header>{card.title}</header>
+      <p>{card.content}</p>
+    </article>
+  {/each}
+
+</div>