diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c72bab59..29d260643 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 ## [Unreleased]
 
+### Changed
+- Indentation of ingredients depends on existence of subgroups
+  [#512](https://github.com/nextcloud/cookbook/pull/512/) @seyfeb
+
+
 ### Fixed
 - Fixed keywords of shared recipes counted multiple times, fixes #491
   [#493](https://github.com/nextcloud/cookbook/pull/493/) @seyfeb
diff --git a/src/components/RecipeIngredient.vue b/src/components/RecipeIngredient.vue
index 2e9fca348..bfdff6558 100644
--- a/src/components/RecipeIngredient.vue
+++ b/src/components/RecipeIngredient.vue
@@ -1,14 +1,14 @@
 <template>
-    <li :class="{ 'header': isHeader() }" @click="toggleDone">
+    <li :class="{ 'header': isHeader(), 'unindented': !recipeIngredientsHaveSubgroups}" @click="toggleDone">
     	<div class="checkmark" :class="{ 'done': isDone }">✔</div>
-    	{{ displayIngredient }}
+    	<div class="ingredient">{{ displayIngredient }}</div>
 	</li>
 </template>
 
 <script>
 export default {
     name: 'RecipeIngredient',
-    props: ['ingredient'],
+    props: ['ingredient','recipeIngredientsHaveSubgroups'],
     data () {
         return {
             headerPrefix: "## ",
@@ -41,7 +41,7 @@ export default {
 <style scoped>
 
 li {
-    margin-left: 1.25em;
+    display: flex;
 }
     li.header {
         position: relative;
@@ -50,19 +50,32 @@ li {
         list-style-type: none;
         font-variant: small-caps;
     }
-    
+
+    li.unindented {
+        position: relative;
+        left: -1.25em;
+    }
+
     li > div.checkmark {
     	display: inline;
     	visibility: hidden;
     }
+
     li > div.done {
-    	visibility: visible;
+        visibility: visible;
     }
-    
+
     li:hover > div.checkmark {
-    	visibility: visible;
-    	opacity: 0.5;
-    	color: var(--color-primary-element);
+        visibility: visible;
+        opacity: 0.5;
+        color: var(--color-primary-element);
     }
-    
+
+    li > div.ingredient {
+        display: inline;
+        margin-left: .3em;
+        padding-left: 1em;
+        text-indent: -1em;
+    }
+
 </style>
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index 2982dd53a..a06b1e5bc 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -45,7 +45,7 @@
                     <section>
                         <h3 v-if="ingredients.length">{{ t('cookbook', 'Ingredients') }}</h3>
                         <ul v-if="ingredients.length">
-                            <RecipeIngredient v-for="(ingredient,idx) in ingredients" :key="'ingr'+idx" :ingredient="ingredient" />
+                            <RecipeIngredient v-for="(ingredient,idx) in ingredients" :key="'ingr'+idx" :ingredient="ingredient" :recipeIngredientsHaveSubgroups="recipeIngredientsHaveSubgroups" />
                         </ul>
                     </section>
 
@@ -110,6 +110,7 @@ export default {
     },
     data () {
         return {
+            headerPrefix: "## ",
             // Own properties
             ingredients: [],
             instructions: [],
@@ -124,6 +125,16 @@ export default {
         }
     },
     computed: {
+        recipeIngredientsHaveSubgroups: function() {
+            if (this.ingredients && this.ingredients.length > 0) {
+                for (let idx = 0; idx < this.ingredients.length; ++idx) {
+                    if (this.ingredients[idx].startsWith(this.headerPrefix)) {
+                        return true
+                    }
+                }
+            }
+            return false
+        },
         showModifiedDate: function() {
             if (!this.dateModified) {  
                 return false