diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
index b6df455a..1cc58317 100644
--- a/.idea/jsLibraryMappings.xml
+++ b/.idea/jsLibraryMappings.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1}" />
+    <file url="file://$PROJECT_DIR$" libraries="{jquery-3.4.1, pdf, pretty-checkbox}" />
   </component>
 </project>
\ No newline at end of file
diff --git a/cookbook/templates/recipe_view.html b/cookbook/templates/recipe_view.html
index 96fc1f57..7dd0c8bf 100644
--- a/cookbook/templates/recipe_view.html
+++ b/cookbook/templates/recipe_view.html
@@ -20,8 +20,10 @@
         <div class="col col-md-3 d-print-none" style="text-align: right">
             <button class="btn btn-success" onclick="$('#bookmarkModal').modal({'show':true})"><i
                     class="fas fa-bookmark"></i></button>
-            <a class="btn btn-warning" href="{% url 'view_shopping' %}?r={{ recipe.pk }}"><i
-                    class="fas fa-shopping-cart"></i></a>
+            {% if ingredients %}
+                <a class="btn btn-warning" href="{% url 'view_shopping' %}?r={{ recipe.pk }}"><i
+                        class="fas fa-shopping-cart"></i></a>
+            {% endif %}
             <a class="btn btn-info" href="{% url 'new_plan' %}?recipe={{ recipe.pk }}"><i
                     class="fas fa-calendar"></i></a>
         </div>
@@ -130,30 +132,88 @@
 
 
     {% if recipe.storage %}
-        <a href='#' onClick='openRecipe({{ recipe.id }}, true)' class="d-print-none">{% trans 'View external recipe' %}
-            <i
-                    class="fas fa-external-link-alt"></i></a>
-    {% endif %}
+        <div class="row">
+            {% if recipe.internal %}
+                <a href='#' onClick='openRecipe({{ recipe.id }}, true)'
+                   class="d-print-none">{% trans 'View external recipe' %} <i class="fas fa-external-link-alt"></i></a>
+            {% else %}
 
-    {% if not recipe.internal %}
-        <br/>
-        <br/>
-        <br/>
-        <div class="card border-info">
-            <div class="card-body text-info">
-                <h5 class="card-title">{% trans 'External recipe' %}</h5>
-                <p class="card-text">
-                    {% blocktrans %}
-                        This is an external recipe, which means you can only view it by opening the link above.
-                        You can convert this recipe to a fancy recipe by pressing the convert button. The original file
-                        will still be accessible.
-                    {% endblocktrans %}.
-                    <br/>
-                    <br/>
-                    <a href="{% url 'edit_convert_recipe' recipe.pk %}"
-                       class="card-link btn btn-info">{% trans 'Convert now!' %}</a>
-                </p>
-            </div>
+                <canvas id="id_pdf_canvas" class="border"></canvas>
+
+                <br/>
+                <br/>
+                <br/>
+                <div class="card border-info">
+                    <div class="card-body text-info">
+                        <h5 class="card-title">{% trans 'External recipe' %}</h5>
+                        <p class="card-text">
+                            {% blocktrans %}
+                                This is an external recipe, which means you can only view it by opening the link above.
+                                You can convert this recipe to a fancy recipe by pressing the convert button. The
+                                original
+                                file
+                                will still be accessible.
+                            {% endblocktrans %}.
+                            <br/>
+                            <br/>
+                            <a href="{% url 'edit_convert_recipe' recipe.pk %}"
+                               class="card-link btn btn-info">{% trans 'Convert now!' %}</a>
+                        </p>
+                    </div>
+                </div>
+
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.min.js"
+                        integrity="sha256-J4Z8Fhj2MITUakMQatkqOVdtqodUlwHtQ/ey6fSsudE="
+                        crossorigin="anonymous"></script>
+
+                <script type="text/javascript">
+                    var url = "{% url 'api_get_external_file_link' recipe_id=12345 %}".replace(/12345/, {{ recipe.id }});
+
+                    var xhttp = new XMLHttpRequest();
+                    xhttp.onreadystatechange = function () {
+                        if (this.readyState === 4 && this.status === 200) {
+                            var url = this.responseText;
+
+                            var loadingTask = pdfjsLib.getDocument(url.replace('www.dropbox.', 'dl.dropboxusercontent.'));
+                            loadingTask.promise.then(function (pdf) {
+                                console.log('PDF loaded');
+
+                                // Fetch the first page
+                                var pageNumber = 1;
+                                pdf.getPage(pageNumber).then(function (page) {
+                                    console.log('Page loaded');
+
+                                    var scale = 1.5;
+                                    var viewport = page.getViewport({scale: scale*0.8});
+
+                                    // Prepare canvas using PDF page dimensions
+                                    var canvas = document.getElementById('id_pdf_canvas');
+                                    var context = canvas.getContext('2d');
+                                    canvas.height = viewport.height;
+                                    canvas.width = viewport.width;
+
+                                    // Render PDF page into canvas context
+                                    var renderContext = {
+                                        canvasContext: context,
+                                        viewport: viewport
+                                    };
+                                    var renderTask = page.render(renderContext);
+                                    renderTask.promise.then(function () {
+                                        console.log('Page rendered');
+                                    });
+                                });
+                            }, function (reason) {
+                                // PDF loading error
+                                console.error(reason);
+                            });
+                        }
+                    };
+                    xhttp.open("GET", url, true);
+                    xhttp.send();
+
+
+                </script>
+            {% endif %}
         </div>
     {% endif %}