diff --git a/src/App.svelte b/src/App.svelte
index 0c0ae15..a936535 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,9 +1,19 @@
+<!-- svelte-ignore a11y-missing-attribute -->
 <script lang="ts">
     import "../node_modules/bulma/css/bulma.min.css"
-    
+    import Drink from "./lib/Drink.svelte";
     import Navbar from "./lib/Navbar.svelte";
 </script>
 
 <main>
   <Navbar />
-</main>
\ No newline at end of file
+  <div class="container" id="drink-container">
+    <Drink />
+  </div>
+</main>
+
+<style>
+  #drink-container {
+    margin: 20px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/Drink.svelte b/src/lib/Drink.svelte
new file mode 100644
index 0000000..4e367eb
--- /dev/null
+++ b/src/lib/Drink.svelte
@@ -0,0 +1,10 @@
+<!-- svelte-ignore a11y-missing-attribute -->
+<script lang="ts">
+    import {beers} from "../stores.js"
+</script>
+
+<main>
+    {#each $beers as beer, name}
+        <h1>{beer.name}</h1>
+    {/each}
+</main>
\ No newline at end of file
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 54e3048..5a6b21e 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-missing-attribute -->
 <script lang="ts">
     let sparti_logo = "./src/assets/sparti_logo.png"
 </script>
diff --git a/src/stores.js b/src/stores.js
new file mode 100644
index 0000000..dafe57b
--- /dev/null
+++ b/src/stores.js
@@ -0,0 +1,10 @@
+import { readable } from "svelte/store"
+
+export const beers = readable([
+    {
+        name: "PU",
+    },
+    {
+        name: "Sterni"
+    },
+]);
\ No newline at end of file