diff --git a/frontend/src/App.css b/frontend/src/App.css
index 549732a..e9a992d 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -46,15 +46,15 @@
 
   /* buttons */
   .primary-button {
-    @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600
+    @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap
   }
 
   .default-button{
-    @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 text-gray-600
+    @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 whitespace-nowrap text-gray-600
   }
 
   .dark-button{
-    @apply bg-gray-600 text-white rounded px-4 py-2
+    @apply bg-gray-600  hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap
   }
 
   /* input field */
@@ -71,9 +71,17 @@
     @apply flex gap-4 mt-4;
   }
 
+  .horizontal-input-group{
+    @apply flex gap-2 mb-2 items-center;
+  }
+
   /* lists */
   .default-list {
-    @apply list-disc pl-6 mb-6
+    @apply list-disc pl-6 mb-6;
+  }
+
+  .ingredient-group-card {
+    @apply py-4 border-b border-gray-400;
   }
   
 }
\ No newline at end of file
diff --git a/frontend/src/components/IngredientGroupListEditor.tsx b/frontend/src/components/IngredientGroupListEditor.tsx
index 889fcc5..bf0da33 100644
--- a/frontend/src/components/IngredientGroupListEditor.tsx
+++ b/frontend/src/components/IngredientGroupListEditor.tsx
@@ -31,10 +31,11 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
   }
   return (
     <div>
-      <h3 className="subsection-heading">Ingredient Groups</h3>
+      {/* remove bottom margin from this headingas the group card has a top padding */}
+      <h3 className="subsection-heading" >Ingredient Groups</h3>
       {ingredientGroupList.map((ingGrp, index) => (
-        <div key={index} className="mb-2 py-4 border-y border-gray-300">
-          <div className="flex columns-2 gap-2 mb-2 items-center">
+        <div key={index} className="ingredient-group-card">
+          <div className="horizontal-input-group columns-2">
             <input
               className="input-field"
               placeholder="Group title (Optional)"
@@ -43,7 +44,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
             />
             <button
               type="button"
-              className="dark-button whitespace-nowrap"
+              className="dark-button"
               onClick={() => handleRemove(index)}
             >
               Remove Group
@@ -57,7 +58,7 @@ export function IngredientGroupListEditor({ ingredientGroupList, onChange }: Ing
       ))}
       <button
         type="button"
-        className="primary-button mt-2"
+        className="primary-button mt-4"
         onClick={handleAdd}
       >
         ➕ Add Ingredient Group
diff --git a/frontend/src/components/IngredientListEditor.tsx b/frontend/src/components/IngredientListEditor.tsx
index bbc2750..55f767e 100644
--- a/frontend/src/components/IngredientListEditor.tsx
+++ b/frontend/src/components/IngredientListEditor.tsx
@@ -29,7 +29,7 @@ export function IngredientListEditor({ ingredients, onChange }: IngredientListEd
     <div>
       <h3 className="subsection-heading">Ingredients</h3>
       {ingredients.map((ing, index) => (
-        <div key={index} className="flex gap-2 mb-2 items-center">
+        <div key={index} className="horizontal-input-group">
           <input
             type="number"
             className="input-field"