diff --git a/cookbook/templates/test.html b/cookbook/templates/test.html
index 87aad3234..ecb7c527e 100644
--- a/cookbook/templates/test.html
+++ b/cookbook/templates/test.html
@@ -10,7 +10,9 @@
 
 {% block content_fluid %}
 
-    {{ data }}
+    <div id="app">
+        <test-view></test-view>
+    </div>
 
 {% endblock %}
 
diff --git a/vue/src/apps/TestView/TestView.vue b/vue/src/apps/TestView/TestView.vue
index 115d1e1d2..63ad31cfb 100644
--- a/vue/src/apps/TestView/TestView.vue
+++ b/vue/src/apps/TestView/TestView.vue
@@ -2,37 +2,50 @@
 
     <div id="app">
 
+        Recipe Card
+        <b-checkbox v-model="recipe_detailed"></b-checkbox>
+        <div class="row">
+            <div class="col-md-3">
+                <recipe-card
+                    v-if="recipe !== undefined"
+                    :recipe="recipe"
+                    :detailed="recipe_detailed"
+                ></recipe-card>
+            </div>
+        </div>
+
     </div>
 </template>
 
 <script>
 import Vue from "vue"
-import { BootstrapVue } from "bootstrap-vue"
+import {BootstrapVue} from "bootstrap-vue"
 
 import "bootstrap-vue/dist/bootstrap-vue.css"
+import {ApiApiFactory} from "@/utils/openapi/api";
+import RecipeCard from "@/components/RecipeCard.vue";
 
 Vue.use(BootstrapVue)
 
-//import Multiselect from "vue-multiselect"
 
 export default {
     name: "TestView",
     mixins: [],
-    components: {
-      // Multiselect,
-    },
+    components: {RecipeCard},
     data() {
         return {
-
+            recipe: undefined,
+            recipe_detailed: false,
         }
     },
     mounted() {
         this.$i18n.locale = window.CUSTOM_LOCALE
-
-    },
-    methods: {
-
+        let apiClient = new ApiApiFactory()
+        apiClient.retrieveRecipe('119').then((r) => {
+            this.recipe = r.data
+        })
     },
+    methods: {},
 }
 </script>