diff --git a/resources/views/components/inputs/icon-button.blade.php b/resources/views/components/inputs/icon-button.blade.php
new file mode 100644
index 0000000..2198fd5
--- /dev/null
+++ b/resources/views/components/inputs/icon-button.blade.php
@@ -0,0 +1,5 @@
+@props(['color' => 'gray'])
+
+<button {{ $attributes->merge(['type' => 'submit', 'class' => "inline-flex items-center border border-transparent rounded-md font-semibold text-xs text-{$color}-500 tracking-widest hover:text-{$color}-700 active:text-{$color}-900 focus:outline-none focus:border-{$color}-900 focus:ring ring-{$color}-300 disabled:opacity-25 transition ease-in-out duration-150"]) }}>
+    {{ $slot }}
+</button>
diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index 37520fe..1182ff4 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -81,8 +81,14 @@
                                                     class="block"
                                                     name="ingredients_detail[]"
                                                     :value="old('ingredients_detail.' . $loop->index, $foodAmount->detail)" />
+                                    <x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
+                                        <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                        </svg>
+                                    </x-inputs.icon-button>
                                 </div>
                             @endforeach
+                            <!-- TODO: Handle old values!! -->
                             <template x-for="i in ingredients + 1">
                                 <div class="flex flex-row space-x-4 mb-4">
                                     <x-inputs.input type="text"
@@ -96,11 +102,18 @@
                                     <x-inputs.input type="text"
                                                     class="block"
                                                     name="ingredients_detail[]" />
+                                    <x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
+                                        <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                        </svg>
+                                    </x-inputs.icon-button>
                                 </div>
                             </template>
-                            <x-inputs.button type="button" class="ml-3" x-on:click="ingredients++;">
-                                Add Ingredient
-                            </x-inputs.button>
+                            <x-inputs.icon-button type="button" color="green" x-on:click="ingredients++;">
+                                <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
+                                </svg>
+                            </x-inputs.icon-button>
                         </div>
 
                         <!-- Steps -->
@@ -122,9 +135,11 @@
                                                        name="steps[]" />
                                 </div>
                             </template>
-                            <x-inputs.button type="button" class="ml-3" x-on:click="steps++;">
-                                Add Step
-                            </x-inputs.button>
+                            <x-inputs.icon-button type="button" color="green" x-on:click="steps++;">
+                                <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
+                                </svg>
+                            </x-inputs.icon-button>
                         </div>
 
                         <div class="flex items-center justify-end mt-4">