diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb
index 495dce62a..9ef743cfd 100644
--- a/app/views/users/_profile.html.erb
+++ b/app/views/users/_profile.html.erb
@@ -1,4 +1,4 @@
-<%= javascript_packs_with_chunks_tag "colorPreview", "stickySaveFooter", "userProfileSettings", "validateFileInputs", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPicker", "stickySaveFooter", "userProfileSettings", "validateFileInputs", defer: true %>
 
 <%= render "users/additional_authentication" %>
 
@@ -167,16 +167,14 @@
         <%= f.public_send(:text_field, "users_setting[brand_color1]",
                           value: users_setting.public_send(:brand_color1),
                           placeholder: "#000000",
-                          class: "crayons-textfield js-color-field") %>
-        <%= f.public_send(:color_field,
-                          "users_setting[brand_color1]",
-                          value: users_setting.public_send(:brand_color1),
-                          class: "crayons-color-selector js-color-field ml-2") %>
+                          class: "crayons-textfield",
+                          data: { color_picker: "true", label_text: t("views.logo.color_1.label") }) %>
+
       </div>
     </div>
 
     <div class="crayons-field ">
-      <label class="crayons-field__label" for="users_setting[brand_color1]">
+      <label class="crayons-field__label" for="users_setting[brand_color2]">
         <%= t("views.logo.color_2.label") %>
       </label>
       <p class="crayons-field__description"><%= t("views.logo.color_2.description_html") %></p>
@@ -184,11 +182,8 @@
         <%= f.public_send(:text_field, "users_setting[brand_color2]",
                           value: users_setting.public_send(:brand_color2),
                           placeholder: "#000000",
-                          class: "crayons-textfield js-color-field") %>
-        <%= f.public_send(:color_field,
-                          "users_setting[brand_color2]",
-                          value: users_setting.public_send(:brand_color2),
-                          class: "crayons-color-selector js-color-field ml-2") %>
+                          class: "crayons-textfield",
+                          data: { color_picker: "true", label_text: t("views.logo.color_2.label") }) %>
       </div>
     </div>
   </div>
diff --git a/cypress/integration/seededFlows/settingsFlows/updateProfileSettings.spec.js b/cypress/integration/seededFlows/settingsFlows/updateProfileSettings.spec.js
new file mode 100644
index 000000000..a7e96e437
--- /dev/null
+++ b/cypress/integration/seededFlows/settingsFlows/updateProfileSettings.spec.js
@@ -0,0 +1,35 @@
+describe('Update profile settings', () => {
+  beforeEach(() => {
+    cy.testSetup();
+    cy.fixture('users/adminUser.json').as('user');
+
+    cy.get('@user').then((user) => {
+      cy.loginAndVisit(user, '/settings');
+    });
+  });
+
+  it('updates brand colors', () => {
+    // Verify both a button and an input exist to update both colors
+    cy.findByRole('button', { name: 'Brand color 1' });
+    cy.findByRole('textbox', { name: 'Brand color 1' }).as('brandColor1');
+
+    cy.findByRole('button', { name: 'Brand color 2' });
+    cy.findByRole('textbox', { name: 'Brand color 2' }).as('brandColor2');
+
+    // Verify that changing the value saves properly
+    cy.get('@brandColor1').clear().type('ababab');
+    cy.get('@brandColor2').clear().type('d22a2a');
+
+    cy.findByRole('button', { name: 'Save Profile Information' }).click();
+    cy.findByText('Your profile has been updated');
+
+    cy.findByRole('textbox', { name: 'Brand color 1' }).should(
+      'have.value',
+      '#ababab',
+    );
+    cy.findByRole('textbox', { name: 'Brand color 2' }).should(
+      'have.value',
+      '#d22a2a',
+    );
+  });
+});