diff --git a/src/App.svelte b/src/App.svelte
index 55bc0e1..b78b90b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,13 +3,13 @@
 
 <script lang="ts">
     import "../node_modules/bulma/css/bulma.min.css";
-    import Drink from "./lib/Drink.svelte";
+    import List from "./lib/List.svelte";
     import Navbar from "./lib/Navbar.svelte";
 </script>
 
 <main>
   <Navbar />
   <div class="container" id="drink-container">
-    <Drink />
+    <List />
   </div>
 </main>
\ No newline at end of file
diff --git a/src/api.js b/src/api.js
new file mode 100644
index 0000000..73a32ed
--- /dev/null
+++ b/src/api.js
@@ -0,0 +1,9 @@
+export default class inventoryAPI {
+    static async save(drinks) {
+        localStorage.setItem("inventory", JSON.stringify(drinks));
+    }
+
+    static async load() {
+        return JSON.parse(localStorage.getItem("inventory") || "[]");
+    }
+}
\ No newline at end of file
diff --git a/src/lib/Drink.svelte b/src/lib/Drink.svelte
index 8c7b28f..7ba9806 100644
--- a/src/lib/Drink.svelte
+++ b/src/lib/Drink.svelte
@@ -1,57 +1,46 @@
-<!-- svelte-ignore a11y-missing-attribute -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-
 <script lang="ts">
-    import { activeCategory, drinks } from "../stores.js";
+    import { inventory } from "../stores/inventory"
+    import { drinks } from "../stores/drinks";
+
+    export let drinkName: string;
+
+    let amountContainers: number;
+    let amountBottles: number;
+
+    const saveInventory = () => {
+        // Check if a drink is already in the inventory. If yes, then update the amounts. If not, add it.
+        if ($inventory.some(item => item.name === drinkName)) {
+            $inventory.forEach(item => {
+                if (drinkName === item.name) {
+                    item.amountContainers = amountContainers;
+                    item.amountBottles = amountBottles;
+                }
+            });
+        }
+        else {
+            $inventory = [
+                {
+                    name: drinkName,
+                    amountContainers: amountContainers,
+                    amountBottles: amountBottles,
+                },
+                ...$inventory,
+            ];
+        }
+        console.log($inventory);
+    };
 </script>
 
-<section class="section">
-    <div class="container">
-        {#if $activeCategory == ""}
-            <article class="message is-info">
-                <div class="message-header">
-                    <p>Hallo! Schön, dass du eine Inventur machen möchtest. :)</p>
-                </div>
-                <div class="message-body">
-                    <p>
-                        Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen.
-                        <br>
-                        Dein Fortschritt wird gespeichert, bis du mit Klick auf <span class="tag is-primary"><strong>Abschluss</strong></span> die Inventur abschließt.
-                        <br>
-                        Wenn du neu starten möchtest, klicke auf <span class="tag is-danger"><strong>Reset</strong></span>.
-                        <br><br>
-                        Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
-                    </p>
-
-                </div>
-            </article>
-            <article class="message is-link">
-                <div class="message-body">
-                    <p>
-                        ℹ️ Inventur begonnen am TBD
-                        <!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
-                    </p>
-                </div>
-            </article>
-        {:else}
-            {#each $drinks as drink, name}
-                {#if drink.type == $activeCategory}
-                    <div class="box">
-                        <div class="columns">
-                            <div class="column is-one-third">
-                                {drink.name}
-                            </div>
-                            <div class="column">
-                                <input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen">
-                            </div>
-                            <div class="column">
-                                <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen">
-                            </div>
-                        </div>
-
-                    </div>
-                {/if}
-            {/each}
-        {/if}
+<div class="box">
+    <div class="columns">
+        <div class="column is-one-third">
+            {drinkName}
+        </div>
+        <div class="column">
+            <input class="input is-primary" type="number" placeholder="Anzahl volle Gebinde/Kästen" bind:value={amountContainers} on:input={saveInventory}>
+        </div>
+        <div class="column">
+            <input class="input is-rounded" type="number" placeholder="Anzahl einzelne Flaschen" bind:value={amountBottles} on:input={saveInventory}>
+        </div>
     </div>
-</section>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/lib/Info.svelte b/src/lib/Info.svelte
new file mode 100644
index 0000000..de67e34
--- /dev/null
+++ b/src/lib/Info.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+</script>
+
+<article class="message is-info">
+    <div class="message-header">
+        <p>Hallo! Schön, dass du eine Inventur machen möchtest. :)</p>
+    </div>
+    <div class="message-body">
+        <p>
+            Wähle oben eine Getränkekategorie aus, um mit der Inventur loszulegen.
+            <br>
+            Dein Fortschritt wird gespeichert, bis du mit Klick auf <span class="tag is-primary"><strong>Abschluss</strong></span> die Inventur abschließt.
+            <br>
+            Wenn du neu starten möchtest, klicke auf <span class="tag is-danger"><strong>Reset</strong></span>.
+            <br><br>
+            Zurück hierher kommst du, wenn du oben auf das Spartacus-Logo klickst.
+        </p>
+
+    </div>
+</article>
+<article class="message is-link">
+    <div class="message-body">
+        <p>
+            ℹ️ Inventur begonnen am TBD
+            <!-- Wenn schon was im local storage liegt, sollte der Zeitpunkt der Erstellung hier genannt werden -->
+        </p>
+    </div>
+</article>
\ No newline at end of file
diff --git a/src/lib/List.svelte b/src/lib/List.svelte
new file mode 100644
index 0000000..2f034b0
--- /dev/null
+++ b/src/lib/List.svelte
@@ -0,0 +1,23 @@
+<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+<script lang="ts">
+    import { activeCategory, drinks } from "../stores/drinks.js";
+    import Drink from "./Drink.svelte";
+    import Info from "./Info.svelte";
+
+    $: filteredDrinks = $drinks.filter(drink => drink.type == $activeCategory);
+
+</script>
+
+<section class="section">
+    <div class="container">
+        {#if $activeCategory == ""}
+            <Info />
+        {:else}
+            {#each filteredDrinks as drink (drink.name)}
+                <Drink drinkName={drink.name} /> 
+            {/each}
+        {/if}
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 2413a29..493a2f3 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -2,7 +2,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
 <script lang="ts">
-    import { activeCategory } from "../stores";
+    import { activeCategory } from "../stores/drinks";
 
     let sparti_logo = "./src/assets/sparti_logo.png";
 
diff --git a/src/stores.js b/src/stores/drinks.js
similarity index 100%
rename from src/stores.js
rename to src/stores/drinks.js
diff --git a/src/stores/inventory.js b/src/stores/inventory.js
new file mode 100644
index 0000000..f62b7fa
--- /dev/null
+++ b/src/stores/inventory.js
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store"
+
+export const inventory = writable([])
\ No newline at end of file