diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 75e152f..af2e07e 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,7 @@
   <component name="ChangeListManager">
     <list default="true" id="c5a06892-a370-4c6a-a9cf-5d61f93a285b" name="Changes" comment="Adding Front">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.css" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/daidokoro/src/app/component/recipe-form/recipe-form.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -41,22 +39,22 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "ASKED_ADD_EXTERNAL_FILES": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "git-widget-placeholder": "formFront",
-    "last_opened_file_path": "/home/dorian/Documents/but3/Angular/Daidokoro",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_package_manager_path": "npm",
-    "settings.editor.selected.configurable": "preferences.lookFeel",
-    "ts.external.directory.path": "/home/dorian/Documents/but3/Angular/Daidokoro/daidokoro/node_modules/typescript/lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;formFront&quot;,
+    &quot;last_opened_file_path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.lookFeel&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;/home/dorian/Documents/but3/Angular/Daidokoro/daidokoro/node_modules/typescript/lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$/daidokoro/public" />
diff --git a/daidokoro/src/app/component/recipe-form/recipe-form.component.html b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
index 2e4902c..5292f49 100644
--- a/daidokoro/src/app/component/recipe-form/recipe-form.component.html
+++ b/daidokoro/src/app/component/recipe-form/recipe-form.component.html
@@ -104,12 +104,14 @@
     <label for="image">Image: </label>
     <input id="image" type="file" (change)="onFileChange($event)">
 
+    <br>
     <div *ngIf="imageBase64">
       <img [src]="imageBase64" alt="Selected Image" style="max-width: 200px; max-height: 200px;">
     </div>
+    <br>
 
     <div formArrayName="ingredients">
-      <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i">
+      <div *ngFor="let ingredient of ingredients.controls; let i=index" [formGroupName]="i" class="form-group">
         <label for="ingredient-quantity">Quantity:</label>
         <input id="ingredient-quantity" type="number" formControlName="quantity" required>
 
@@ -123,14 +125,14 @@
           <option *ngFor="let ingredient of ingredientsList" [value]="ingredient.$name">{{ ingredient.$name }}</option>
         </select>
 
-        <button type="button" (click)="removeIngredient(i)">Remove</button>
+        <button type="button" class="remove-button" (click)="removeIngredient(i)">Remove</button>
       </div>
     </div>
 
-    <button type="button" (click)="addIngredient()">Add Ingredient</button>
+    <button type="button" class="add-ingredient-button" (click)="addIngredient()">Add Ingredient</button>
 
     <p>Complete the form to enable the button.</p>
-    <button type="submit" [disabled]="!recipeForm.valid">Submit</button>
+    <button type="submit"  class="submit-button"  [disabled]="!recipeForm.valid">Submit</button>
   </form>
   </div>
 </body>