diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 69738a66..32fec231 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -191,7 +191,7 @@ class RecipeSerializer(WritableNestedModelSerializer):
         fields = (
             'id', 'name', 'image', 'keywords', 'steps', 'working_time',
             'waiting_time', 'created_by', 'created_at', 'updated_at',
-            'internal', 'nutrition', 'servings'
+            'internal', 'nutrition', 'servings', 'file_path'
         )
         read_only_fields = ['image', 'created_by', 'created_at']
 
diff --git a/cookbook/templates/test.html b/cookbook/templates/test.html
index 26261a6e..0d7c6dd1 100644
--- a/cookbook/templates/test.html
+++ b/cookbook/templates/test.html
@@ -24,7 +24,7 @@
 
 
     <script type="application/javascript">
-        window.RECIPE_ID = 6;
+        window.RECIPE_ID = {{pk}};
         window.USER_PREF = {
             'use_fractions': {% if request.user.userpreference.use_fractions %} true {% else %} false {% endif %},
             'ingredient_decimals': {{ request.user.userpreference.ingredient_decimals }},
diff --git a/cookbook/urls.py b/cookbook/urls.py
index 6d81a95e..26b6b9e8 100644
--- a/cookbook/urls.py
+++ b/cookbook/urls.py
@@ -56,7 +56,7 @@ urlpatterns = [
         ),
         name='service_worker'
     ),
-    path('test/', views.test, name='view_test'),
+    path('test/<int:pk>', views.test, name='view_test'),
 
     path('import/', import_export.import_recipe, name='view_import'),
     path('export/', import_export.export_recipe, name='view_export'),
diff --git a/cookbook/views/views.py b/cookbook/views/views.py
index b06a25ea..0e3964d6 100644
--- a/cookbook/views/views.py
+++ b/cookbook/views/views.py
@@ -493,8 +493,8 @@ def offline(request):
     return render(request, 'offline.html', {})
 
 
-def test(request):
+def test(request, pk):
     if not settings.DEBUG:
         return HttpResponseRedirect(reverse('index'))
 
-    return render(request, 'test.html', {'test': None})
+    return render(request, 'test.html', {'pk': pk})
diff --git a/recipes/urls.py b/recipes/urls.py
index 26b54a96..bc64f94a 100644
--- a/recipes/urls.py
+++ b/recipes/urls.py
@@ -32,12 +32,8 @@ urlpatterns = [
         JavaScriptCatalog.as_view(domain='django'),
         name='javascript-catalog'
     ),
-    url(r'^jsreverse.json$', reverse_views.urls_js, name='js_reverse'),
 ]
 
 if settings.GUNICORN_MEDIA or settings.DEBUG:
-    urlpatterns += url(
-        r'^media/(?P<path>.*)$',
-        serve,
-        {'document_root': settings.MEDIA_ROOT}
-    ),
+    urlpatterns += url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
+    urlpatterns += url(r'^jsreverse.json$', reverse_views.urls_js, name='js_reverse'),
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 618459ac..c47eb4c4 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -59,15 +59,17 @@
 
       <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
         <img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
-             :alt="_( 'Recipe Image')">
-
-        <div>
-
-        </div>
-
+             :alt="_( 'Recipe Image')" v-if="recipe.image !== null">
       </div>
     </div>
 
+    <div v-if="recipe.file_path.includes('.pdf')">
+      <PdfViewer :recipe="recipe"></PdfViewer>
+    </div>
+    <div v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg')">
+      <ImageViewer :recipe="recipe"></ImageViewer>
+    </div>
+
     <!--TODO timers -->
     <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
       <Step v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
@@ -93,6 +95,8 @@ import {GettextMixin, ToastMixin} from "@/utils/utils";
 import Ingredient from "@/components/Ingredient";
 
 import ScalableNumber from "@/components/ScalableNumber";
+import PdfViewer from "@/components/PdfViewer";
+import ImageViewer from "@/components/ImageViewer";
 
 Vue.use(BootstrapVue)
 
@@ -103,6 +107,8 @@ export default {
     ToastMixin,
   ],
   components: {
+    PdfViewer,
+    ImageViewer,
     Ingredient,
     Step,
     RecipeContextMenu,
diff --git a/vue/src/components/ImageViewer.vue b/vue/src/components/ImageViewer.vue
new file mode 100644
index 00000000..274933b0
--- /dev/null
+++ b/vue/src/components/ImageViewer.vue
@@ -0,0 +1,28 @@
+<template>
+
+  <div>
+    <img :src="pdfUrl" width="100%" height="700px" :alt="_('External Recipe Image')">
+  </div>
+
+</template>
+
+<script>
+
+import {GettextMixin, resolveDjangoUrl} from "@/utils/utils";
+
+
+export default {
+  name: 'ImageViewer',
+  mixins: [
+    GettextMixin,
+  ],
+  props: {
+    recipe: Object,
+  },
+  computed: {
+    pdfUrl: function() {
+      return resolveDjangoUrl('api_get_recipe_file', (this.recipe.id))
+    }
+  },
+}
+</script>
diff --git a/vue/src/components/PdfViewer.vue b/vue/src/components/PdfViewer.vue
new file mode 100644
index 00000000..774b8e7f
--- /dev/null
+++ b/vue/src/components/PdfViewer.vue
@@ -0,0 +1,28 @@
+<template>
+
+  <div>
+    <iframe :src="pdfUrl" width="100%" height="700px" style="border: none;"></iframe>
+  </div>
+
+</template>
+
+<script>
+
+import {resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
+
+
+export default {
+  name: 'PdfViewer',
+  mixins: [
+    ResolveUrlMixin
+  ],
+  props: {
+    recipe: Object,
+  },
+  computed: {
+    pdfUrl: function() {
+      return '/static/pdfjs/viewer.html?file=' + resolveDjangoUrl('api_get_recipe_file', (this.recipe.id))
+    }
+  },
+}
+</script>
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index cda47fda..e87c3026 100644
--- a/vue/webpack-stats.json
+++ b/vue/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"}]}}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.c7f91f91728c11ba84da.hot-update.js","publicPath":"http://localhost:8080/recipe_view.c7f91f91728c11ba84da.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.c7f91f91728c11ba84da.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\ImageViewer.vue\n  25:50  error  'resolveDjangoUrl' is not defined  no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n"}
\ No newline at end of file