diff --git a/frontend/vue_dl6tom/index.html b/frontend/vue_dl6tom/index.html
new file mode 100644
index 0000000..868d3ae
--- /dev/null
+++ b/frontend/vue_dl6tom/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport"
+              content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link rel="stylesheet"
+              href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+              integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
+              crossorigin="anonymous">
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+        <title>Pizzatool</title>
+    </head>
+    <body>
+        <div id="app">
+            <h2>Ingredients</h2>
+            <ul>
+                <li v-for="ingredient in ingredients">
+                    {{ ingredient.name }}
+                    <button v-on:click="delete_ingredient(ingredient.id)">-</button>
+                </li>
+                <li>
+                    <form v-on:submit.prevent="create_ingredient">
+                        <input v-model="ingredient_name">
+                        <button type="submit">+</button>
+                    </form>
+                </li>
+            </ul>
+            <h2>Pizzas</h2>
+            <ul>
+                <li v-for="pizza in pizzas">
+                    {{ pizza.name }}
+                    <button v-on:click="delete_pizza(pizza.id)">-</button>
+                </li>
+                <li>
+                    <form v-on:submit.prevent="create_pizza">
+                        <input v-model="pizza_name">
+                        <button type="submit">+</button>
+                    </form>
+                </li>
+            </ul>
+         </div>
+        <script src="ui.js"></script>
+    </body>
+</html>
diff --git a/frontend/vue_dl6tom/ui.js b/frontend/vue_dl6tom/ui.js
new file mode 100644
index 0000000..4937636
--- /dev/null
+++ b/frontend/vue_dl6tom/ui.js
@@ -0,0 +1,53 @@
+var app = new Vue({
+    el: '#app',
+    data: {
+        ingredients: [],
+        ingredient_name: '',
+        pizzas: [],
+        pizza_name: '',
+    },
+    methods: {
+        create_ingredient: function() {
+            axios.post('api/ingredients', {
+                    name: this.ingredient_name,
+                })
+                .then(function(response) {
+                    app.ingredients.push(response.data);
+                });
+        },
+        delete_ingredient: function(id) {
+            axios.delete('api/ingredients/' + id)
+                .then(function() {
+                    app.ingredients = app.ingredients.filter(function(ingredient) {
+                        return ingredient.id != id;
+                    });
+                });
+        },
+        create_pizza: function() {
+            axios.post('api/pizzas', {
+                    name: this.pizza_name,
+                })
+                .then(function(response) {
+                    app.pizzas.push(response.data);
+                });
+        },
+        delete_pizza: function(id) {
+            axios.delete('api/pizzas/' + id)
+                .then(function() {
+                    app.pizzas = app.pizzas.filter(function(pizza) {
+                        return pizza.id != id;
+                    });
+                });
+        },
+     },
+    mounted: function() {
+        axios.get('api/ingredients')
+            .then(function(response) {
+                app.ingredients = response.data;
+            });
+        axios.get('api/pizzas')
+            .then(function(response) {
+                app.pizzas = response.data;
+            });
+     },
+})
