diff --git a/app/views/goals/_form_edit.html.erb b/app/views/goals/_form_edit.html.erb
index 236a3b3b7..ba088d055 100644
--- a/app/views/goals/_form_edit.html.erb
+++ b/app/views/goals/_form_edit.html.erb
@@ -8,6 +8,10 @@
                      url: goal_path(goal),
                      method: :patch,
                      class: "space-y-3" do |f| %>
+  <div class="flex justify-center">
+    <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
+  </div>
+
   <%= f.text_field :name,
                    label: t("goals.form_stepper.step1.fields.name"),
                    required: true,
@@ -50,8 +54,6 @@
     </div>
   </div>
 
-  <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
-
   <%= f.text_area :notes,
                   label: t("goals.form_stepper.step1.fields.notes"),
                   rows: 2 %>
diff --git a/app/views/goals/_form_stepper.html.erb b/app/views/goals/_form_stepper.html.erb
index 0e921ecc1..1951524b3 100644
--- a/app/views/goals/_form_stepper.html.erb
+++ b/app/views/goals/_form_stepper.html.erb
@@ -32,18 +32,16 @@
         <p class="text-sm text-secondary"><%= t("goals.form_stepper.step1.subheading") %></p>
       </div>
 
+      <div class="flex justify-center">
+        <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
+      </div>
+
       <div>
-        <div class="flex items-start gap-3">
-          <div class="shrink-0 pt-6">
-            <%= render "color_picker", form: f, colors: Goal::COLORS, icons: Goal::ICONS %>
-          </div>
-          <%= f.text_field :name,
-                           placeholder: t("goals.form_stepper.step1.fields.name_placeholder"),
-                           autofocus: true,
-                           label: t("goals.form_stepper.step1.fields.name"),
-                           container_class: "flex-1",
-                           data: { goal_stepper_target: "nameInput", action: "input->goal-stepper#nameChanged" } %>
-        </div>
+        <%= f.text_field :name,
+                         placeholder: t("goals.form_stepper.step1.fields.name_placeholder"),
+                         autofocus: true,
+                         label: t("goals.form_stepper.step1.fields.name"),
+                         data: { goal_stepper_target: "nameInput", action: "input->goal-stepper#nameChanged" } %>
         <p class="hidden mt-1.5 text-xs text-destructive" data-goal-stepper-target="nameError"><%= t("goals.form_stepper.errors.name_required") %></p>
       </div>