diff --git a/cuizin/js_src/components/Recipe.vue b/cuizin/js_src/components/Recipe.vue
index 33b8da5..e585277 100644
--- a/cuizin/js_src/components/Recipe.vue
+++ b/cuizin/js_src/components/Recipe.vue
@@ -27,7 +27,7 @@
               </li>
           </ul>
           <h2 class="mt-3">Instructions</h2>
-          <p>{{ recipe.instructions }}</p>
+          <nl2br tag="p" :text="recipe.instructions"></nl2br>
           <p v-if="recipe.url" class="text-xs-center">
               <v-btn :href="recipe.url">
                   <v-icon class="fa-icon">fa-external-link</v-icon>
diff --git a/cuizin/js_src/main.js b/cuizin/js_src/main.js
index 12187ac..0f30c8f 100644
--- a/cuizin/js_src/main.js
+++ b/cuizin/js_src/main.js
@@ -6,6 +6,7 @@ import 'roboto-fontface/css/roboto/roboto-fontface.css';
 import 'font-awesome/css/font-awesome.css';
 import 'material-design-icons/iconfont/material-icons.css';
 import 'vuetify/dist/vuetify.min.css';
+import Nl2br from 'vue-nl2br';
 
 import App from './App';
 import router from './router';
@@ -14,6 +15,7 @@ import router from './router';
 require('es6-promise').polyfill();
 require('isomorphic-fetch');
 
+Vue.component('nl2br', Nl2br);
 Vue.use(Vuetify);
 
 Vue.config.productionTip = false;
diff --git a/package.json b/package.json
index 15dae3d..91ba9ee 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "material-design-icons": "^3.0.1",
     "roboto-fontface": "^0.9.0",
     "vue": "^2.5.2",
+    "vue-nl2br": "^0.0.5",
     "vue-router": "^3.0.1",
     "vuetify": "^1.0.0"
   },