diff --git a/src/components/EditRecipePage.vue b/src/components/EditRecipePage.vue
index fc76054..60d2d67 100644
--- a/src/components/EditRecipePage.vue
+++ b/src/components/EditRecipePage.vue
@@ -36,7 +36,6 @@ input {
     border: 0;
     border-bottom: 1px solid #ccc;
     font-size: large;
-    margin: 1ex 1em;
 }
 
 input.recipe-link {
diff --git a/src/components/IngredientAddBox.vue b/src/components/IngredientAddBox.vue
index 8f613c2..6b8e3e6 100644
--- a/src/components/IngredientAddBox.vue
+++ b/src/components/IngredientAddBox.vue
@@ -20,28 +20,17 @@ export default {
     components: { IngredientLine },
     data() {
         return {
-            ingredient: {
-                name: '',
-                quantity: '',
-                unit: '',
-                link: ''
-            },
+            ingredient: {},
         }
     },
     methods: {
         addIngredient() {
             this.$emit('add-ingredient', this.ingredient);
-            this.ingredient = {
-                name: '',
-                quantity: '',
-                unit: '',
-                link: ''
-            };
+            this.ingredient = {};
         },
         updateProduct(ingredient, product_link) {
             data.parseProduct(ingredient, product_link).then(product => {
                 this.ingredient.product = product;
-                this.ingredient.product_link = product.link;
             });
         },
         updateIngredient(ingredient, line) {
@@ -58,7 +47,7 @@ export default {
 
 .ingredient-add-box {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
 }
 
 .ingredient-line {
diff --git a/src/components/IngredientLine.vue b/src/components/IngredientLine.vue
index 4604c36..8f4d53a 100644
--- a/src/components/IngredientLine.vue
+++ b/src/components/IngredientLine.vue
@@ -1,46 +1,13 @@
 <template>
     <div class="ingredient-item">
-        <div class="full-ingredient">
-            <p>
-                <input v-model="ingredientText" @keyup.enter="updateIngredient" @focusout="updateIngredient" placeholder="Enter an ingredient" />
-                <input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @focusout="updateProductLink" />
-            </p>
-        </div>
-        <!-- Full ingredient line text bar -->
-        <div class="action_items">
-            <div class="action-bar">
-                <!-- Single line parse results -->
-                <div class="compact-parse-results">
-                    <compact-parsed-ingredient :ingredient="ingredient" />
-                </div>
-
-                <!-- Expand details button with animated chevron -->
-                <button class="expand-button" @click="showDetails = !showDetails">
-                <span :class="{'rotate-chevron': showDetails}">&#9662;</span>
-                </button>
-            </div>
-            <!-- Details section -->
-            <div v-if="showDetails" class="expanded-section">
-                <div class="details-section ingredient-details">
-                    <div class="parse-result">
-                        <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
-                        <p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
-                        <p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
-                        <p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
-                    </div>
-                    <div v-if="ingredient.product" class="product-result">
-                        <p>
-                            <a :href="ingredient?.product?.link"><small>Product: </small>
-                                <strong>{{ ingredient.product.name }}</strong>
-                                <img src="@/assets/external-link.svg" style="width: 1em; height: 1em; vertical-align: middle; margin-left: 0.5em; margin-bottom: 0.2em;" target=”_blank”/>
-                            </a>
-                        </p>
-                        <p><img :src="ingredient.product.img_small" /></p>
-                    </div>
-                </div>
-            </div>
-        </div>
-
+        <p>
+            <input v-model="ingredientText" @keyup.enter="updateIngredient" @blur="updateIngredient" placeholder="Enter an ingredient" />
+            <input v-model="productLink" class="product-link-input" placeholder="Enter product link" @keyup.enter="updateProductLink" @blur="updateProductLink" />
+        </p>
+        <p>
+            <!-- Single line parse results -->
+            <compact-parsed-ingredient :ingredient="ingredient" />
+        </p>
     </div>
 </template>
 
@@ -57,7 +24,7 @@ export default {
     data() {
         return {
             ingredientText: this.ingredient.line,
-            productLink: this.ingredient.product?.link ?? "",
+            productLink: this.ingredient.product?.product_link ?? "",
             showDetails: this.showExpanded
         };
     },
@@ -76,63 +43,7 @@ export default {
 
 <style scoped>
 
-.compact-parse-results {
-    flex: 1;
-}
-
-.ingredient-item {
-    border-radius: 5px;
-    padding: 10px;
-    margin-bottom: 10px;
-}
-
-.full-ingredient {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    text-align: left;
-    padding-left: 1em;
-}
-
-.action-bar {
-  display: flex;
-  align-items: center;
-  justify-content: right;
-  padding: 10px;
-  border: 1px solid #ccc;
-  margin-bottom: 10px;
-}
-
-.delete-button,
-.expand-button {
-  padding: 8px 16px;
-  margin: 0 5px;
-  cursor: pointer;
-}
-
-.expand-button {
-  background-color: #f0f0f0;
-  border: 1px solid #ccc;
-}
-
-.rotate-chevron {
-  transform: rotate(180deg);
-}
-
-.details-section {
-  margin-top: 10px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.full-ingredient p {
-    flex: 1;
-}
-
-.full-ingredient input {
+input {
     border: 0;
     font-size: larger;
     border-bottom: 1px solid #ccc;
@@ -143,23 +54,7 @@ export default {
 .product-link-input {
     padding: 0.5vh;
     color: #777;
-    margin-top: 0.2vh;
-}
-
-.ingredient-details {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    text-align: left;
-    padding-left: 1em;
-}
-
-.parse-result {
-    flex: 1;
-}
-
-.product-result {
-    flex: 1;
+    margin-top: 0.5vh;
 }
 
 </style>