diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f45887a5..2a805fd36 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@
   [#562](https://github.com/nextcloud/cookbook/pull/562/) @seyfeb
 - Bundle Analyzer documentation
   [#573](https://github.com/nextcloud/cookbook/pull/573/) @seyfeb
+- Added button to allow adding empty ingredient, instruction, and tool entries above existing ones in editor
+  [#575](https://github.com/nextcloud/cookbook/pull/575/) @seyfeb
 
 ### Changed
 - Using computed property in recipe view
diff --git a/src/components/EditInputGroup.vue b/src/components/EditInputGroup.vue
index 9efb0bf8a..b74de6e90 100644
--- a/src/components/EditInputGroup.vue
+++ b/src/components/EditInputGroup.vue
@@ -7,13 +7,14 @@
                 <input v-if="fieldType==='text'" type="text" ref="list-field" v-model="buffer[idx]" @keyup="keyPressed" v-on:input="handleInput" @paste="handlePaste" />
                 <textarea v-else-if="fieldType==='textarea'" ref="list-field" v-model="buffer[idx]" @keyup="keyPressed" v-on:input="handleInput" @paste="handlePaste"></textarea>
                 <div class="controls">
-                    <button class="icon-arrow-up" @click="moveEntryUp(idx)"></button>
-                    <button class="icon-arrow-down" @click="moveEntryDown(idx)"></button>
-                    <button class="icon-delete" @click="deleteEntry(idx)"></button>
+                    <button class="icon-arrow-up" @click="moveEntryUp(idx)" :title="t('cookbook', 'Move entry up')"></button>
+                    <button class="icon-arrow-down" @click="moveEntryDown(idx)" :title="t('cookbook', 'Move entry down')"></button>
+                    <button class="icon-add" @click="addNewEntry(idx)" :title="t('cookbook', 'Insert entry above')"></button>
+                    <button class="icon-delete" @click="deleteEntry(idx)" :title="t('cookbook', 'Delete entry')"></button>
                 </div>
             </li>
         </ul>
-        <button class="button add-list-item" @click="addNewEntry ()"><span class="icon-add"></span> {{ t('cookbook', 'Add') }}</button>
+        <button class="button add-list-item" @click="addNewEntry()"><span class="icon-add"></span> {{ t('cookbook', 'Add') }}</button>
     </fieldset>
 </template>
 
diff --git a/webpack.config.js b/webpack.config.js
index 086727657..0d8e5ee3b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,7 +23,16 @@ module.exports = {
         rules: [
             {
                 test: /\.css$/,
-                use: ['vue-style-loader', 'css-loader'],
+                use: [{ loader: 'vue-style-loader' }, 
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            esModule: false
+                        }
+                    },
+                    // [sass-loader](/loaders/sass-loader)
+                    { loader: 'sass-loader' }
+                ]
             },
             {
                 test: /\.html$/,
@@ -61,9 +70,14 @@ module.exports = {
             {
                 test: /\.scss$/,
                 use: [
-                'vue-style-loader',
-                'css-loader',
-                'sass-loader'
+                    { loader: 'vue-style-loader' },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            esModule: false
+                        }
+                    },
+                    { loader: 'sass-loader' }
                 ]
             }
         ],