diff --git a/app/helpers/admin_helper.rb b/app/helpers/admin_helper.rb
index 06e8c3eb7..239c2a616 100644
--- a/app/helpers/admin_helper.rb
+++ b/app/helpers/admin_helper.rb
@@ -54,7 +54,8 @@ module AdminHelper
   end
 
   def menu_customization?
-    ["pages", "banners", "information_texts"].include?(controller_name) || menu_homepage? || menu_pages?
+    ["pages", "banners", "information_texts"].include?(controller_name) ||
+    menu_homepage? || menu_pages?
   end
 
   def menu_homepage?
diff --git a/app/helpers/legislation_helper.rb b/app/helpers/legislation_helper.rb
index a39e9784d..d695e0400 100644
--- a/app/helpers/legislation_helper.rb
+++ b/app/helpers/legislation_helper.rb
@@ -41,4 +41,11 @@ module LegislationHelper
   def banner_color?
     @process.background_color.present? && @process.font_color.present?
   end
+
+  def css_for_process_header
+    if banner_color?
+      "background:" + @process.background_color + ";color:" + @process.font_color + ";"
+    end
+  end
+
 end
diff --git a/app/models/legislation/process.rb b/app/models/legislation/process.rb
index 9595995d4..78754e2ce 100644
--- a/app/models/legislation/process.rb
+++ b/app/models/legislation/process.rb
@@ -22,6 +22,8 @@ class Legislation::Process < ActiveRecord::Base
   PHASES_AND_PUBLICATIONS = %i[homepage_phase draft_phase debate_phase allegations_phase
                                proposals_phase draft_publication result_publication].freeze
 
+  CSS_HEX_COLOR = /\A#?(?:[A-F0-9]{3}){1,2}\z/i
+
   has_many :draft_versions, -> { order(:id) }, class_name: 'Legislation::DraftVersion',
                                                foreign_key: 'legislation_process_id',
                                                dependent: :destroy
@@ -44,8 +46,8 @@ class Legislation::Process < ActiveRecord::Base
   validates :allegations_end_date, presence: true, if: :allegations_start_date?
   validates :proposals_phase_end_date, presence: true, if: :proposals_phase_start_date?
   validate :valid_date_ranges
-  validates :background_color, format: { allow_blank: true, with: /\A#?(?:[A-F0-9]{3}){1,2}\z/i }
-  validates :font_color, format: { allow_blank: true, with: /\A#?(?:[A-F0-9]{3}){1,2}\z/i }
+  validates :background_color, format: { allow_blank: true, with: CSS_HEX_COLOR }
+  validates :font_color, format: { allow_blank: true, with: CSS_HEX_COLOR }
 
   scope :open, -> { where("start_date <= ? and end_date >= ?", Date.current, Date.current) }
   scope :next, -> { where("start_date > ?", Date.current) }
diff --git a/app/models/site_customization/page.rb b/app/models/site_customization/page.rb
index 9d3c6b37e..6dd8f8d2f 100644
--- a/app/models/site_customization/page.rb
+++ b/app/models/site_customization/page.rb
@@ -1,6 +1,6 @@
 class SiteCustomization::Page < ActiveRecord::Base
-  VALID_STATUSES = %w(draft published)
-  has_many :cards, class_name: 'Widget::Card', foreign_key: 'site_customization_page_id'
+  VALID_STATUSES = %w[draft published]
+  has_many :cards, class_name: "Widget::Card", foreign_key: "site_customization_page_id"
 
   translates :title,       touch: true
   translates :subtitle,    touch: true
@@ -13,9 +13,12 @@ class SiteCustomization::Page < ActiveRecord::Base
                    format: { with: /\A[0-9a-zA-Z\-_]*\Z/, message: :slug_format }
   validates :status, presence: true, inclusion: { in: VALID_STATUSES }
 
-  scope :published, -> { where(status: 'published').order('id DESC') }
-  scope :with_more_info_flag, -> { where(status: 'published', more_info_flag: true).order('id ASC') }
-  scope :with_same_locale, -> { joins(:translations).where("site_customization_page_translations.locale": I18n.locale) }
+  scope :published, -> { where(status: "published").sort_desc }
+  scope :sort_asc, -> { order("id ASC") }
+  scope :sort_desc, -> { order("id DESC") }
+  scope :with_more_info_flag, -> { where(status: "published", more_info_flag: true).sort_asc }
+  scope :with_same_locale, -> { joins(:translations).locale }
+  scope :locale, ->  { where("site_customization_page_translations.locale": I18n.locale) }
 
   def url
     "/#{slug}"
diff --git a/app/models/widget/card.rb b/app/models/widget/card.rb
index bc7da86d2..5ec0d4944 100644
--- a/app/models/widget/card.rb
+++ b/app/models/widget/card.rb
@@ -1,6 +1,6 @@
 class Widget::Card < ActiveRecord::Base
   include Imageable
-  belongs_to :page, class_name: 'SiteCustomization::Page', foreign_key: 'site_customization_page_id'
+  belongs_to :page, class_name: "SiteCustomization::Page", foreign_key: "site_customization_page_id"
 
   # table_name must be set before calls to 'translates'
   self.table_name = "widget_cards"
diff --git a/app/views/admin/legislation/processes/_form.html.erb b/app/views/admin/legislation/processes/_form.html.erb
index 1cfb699ee..86c419b07 100644
--- a/app/views/admin/legislation/processes/_form.html.erb
+++ b/app/views/admin/legislation/processes/_form.html.erb
@@ -213,16 +213,27 @@
     <h3><%= t("admin.legislation.processes.form.banner_title") %></h3>
   </div>
 
-  <div class="row">
-    <div class="small-3 column">
-      <%= f.label :sections, t("admin.legislation.processes.form.banner_background_color") %>
-      <%= color_field(:process, :background_color, id: 'banner_background_color_picker') %>
-      <%= f.text_field :background_color, label: false, id: 'banner_background_color' %>
+  <div class="small-3 column">
+    <%= f.label :sections, t("admin.legislation.processes.form.banner_background_color") %>
+    <div class="row collapse">
+      <div class="small-6 column">
+        <%= color_field(:process, :background_color) %>
+      </div>
+      <div class="small-6 column">
+        <%= f.text_field :background_color, label: false %>
+      </div>
     </div>
-    <div class="small-3 column end">
-      <%= f.label :sections, t("admin.legislation.processes.form.banner_font_color") %>
-      <%= color_field(:process, :font_color, id: 'banner_font_color_picker') %>
-      <%= f.text_field :font_color, label: false, id: 'banner_font_color' %>
+  </div>
+
+  <div class="small-3 column end">
+    <%= f.label :sections, t("admin.legislation.processes.form.banner_font_color") %>
+    <div class="row collapse">
+      <div class="small-6 column">
+        <%= color_field(:process, :font_color) %>
+      </div>
+      <div class="small-6 column">
+        <%= f.text_field :font_color, label: false %>
+      </div>
     </div>
   </div>
 
diff --git a/app/views/legislation/processes/_header.html.erb b/app/views/legislation/processes/_header.html.erb
index 607fb9cbf..67de094a9 100644
--- a/app/views/legislation/processes/_header.html.erb
+++ b/app/views/legislation/processes/_header.html.erb
@@ -1,6 +1,4 @@
-<div class="legislation-hero jumbo" <% if banner_color? %> 
-    style="background:<%= process.background_color %>; color:<%= process.font_color %>;"
-  <% end %>>
+<div class="legislation-hero jumbo" style="<%= css_for_process_header %>">
   <div class="row">
     <div class="small-12 medium-9 column">
 
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index 819a2037e..d1a9fe98c 100644
--- a/config/locales/en/admin.yml
+++ b/config/locales/en/admin.yml
@@ -438,7 +438,7 @@ en:
           homepage: Description
           homepage_description: Here you can explain the content of the process
           homepage_enabled: Homepage enabled
-          banner_title: Banner colors
+          banner_title: Header colors
           banner_background_color: Background colour
           banner_font_color: Font colour
         index:
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index 50576eec7..3b82eee84 100644
--- a/config/locales/es/admin.yml
+++ b/config/locales/es/admin.yml
@@ -439,7 +439,7 @@ es:
           homepage: Descripción
           homepage_description: Aquí puedes explicar el contenido del proceso
           homepage_enabled: Homepage activada
-          banner_title: Colores del banner
+          banner_title: Colores del encabezado
           banner_background_color: Color de fondo
           banner_font_color: Color del texto
         index:
diff --git a/spec/features/admin/legislation/processes_spec.rb b/spec/features/admin/legislation/processes_spec.rb
index 851d6d1cb..bfeeece69 100644
--- a/spec/features/admin/legislation/processes_spec.rb
+++ b/spec/features/admin/legislation/processes_spec.rb
@@ -146,23 +146,23 @@ feature 'Admin legislation processes' do
 
     scenario "Create a legislation process with an image", :js do
       visit new_admin_legislation_process_path()
-      fill_in 'Process Title', with: 'An example legislation process'
-      fill_in 'Summary', with: 'Summary of the process'
+      fill_in "Process Title", with: "An example legislation process"
+      fill_in "Summary", with: "Summary of the process"
 
       base_date = Date.current
-      fill_in 'legislation_process[start_date]', with: base_date.strftime("%d/%m/%Y")
-      fill_in 'legislation_process[end_date]', with: (base_date + 5.days).strftime("%d/%m/%Y")
-      imageable_attach_new_file(create(:image), Rails.root.join('spec/fixtures/files/clippy.jpg'))
+      fill_in "legislation_process[start_date]", with: base_date.strftime("%d/%m/%Y")
+      fill_in "legislation_process[end_date]", with: (base_date + 5.days).strftime("%d/%m/%Y")
+      imageable_attach_new_file(create(:image), Rails.root.join("spec/fixtures/files/clippy.jpg"))
 
-      click_button 'Create process'
+      click_button "Create process"
 
-      expect(page).to have_content 'An example legislation process'
-      expect(page).to have_content 'Process created successfully'
+      expect(page).to have_content "An example legislation process"
+      expect(page).to have_content "Process created successfully"
 
-      click_link 'Click to visit'
+      click_link "Click to visit"
 
-      expect(page).to have_content 'An example legislation process'
-      expect(page).not_to have_content 'Summary of the process'
+      expect(page).to have_content "An example legislation process"
+      expect(page).not_to have_content "Summary of the process"
       expect(page).to have_css("img[alt='#{Legislation::Process.last.title}']")
     end
   end
diff --git a/spec/helpers/legislation_helper_spec.rb b/spec/helpers/legislation_helper_spec.rb
index 9d88aa8c8..627155123 100644
--- a/spec/helpers/legislation_helper_spec.rb
+++ b/spec/helpers/legislation_helper_spec.rb
@@ -1,4 +1,4 @@
-require 'rails_helper'
+require "rails_helper"
 
 describe LegislationHelper do
   let(:process) { build(:legislation_process) }
diff --git a/spec/models/legislation/process_spec.rb b/spec/models/legislation/process_spec.rb
index c2b1c8214..503b4395e 100644
--- a/spec/models/legislation/process_spec.rb
+++ b/spec/models/legislation/process_spec.rb
@@ -177,8 +177,8 @@ describe Legislation::Process do
     end
   end
 
-  describe "banner colors" do
-    it "valid banner colors" do
+  describe "Header colors" do
+    it "valid format colors" do
       process1 = create(:legislation_process, background_color: "123", font_color: "#fff")
       process2 = create(:legislation_process, background_color: "#fff", font_color: "123")
       process3 = create(:legislation_process, background_color: "", font_color: "")
@@ -189,11 +189,16 @@ describe Legislation::Process do
       expect(process4).to be_valid
     end
 
-    it "invalid banner colors" do
+    it "invalid format colors" do
       expect {
-        process1 = create(:legislation_process, background_color: "#123ghi", font_color: "#fff")
-        process2 = create(:legislation_process, background_color: "#ffffffff", font_color: "#123")
-      }.to raise_error(ActiveRecord::RecordInvalid, "Validation failed: Background color is invalid")
+        process = create(:legislation_process, background_color: "#123ghi", font_color: "#fff")
+      }.to raise_error(ActiveRecord::RecordInvalid,
+                       "Validation failed: Background color is invalid")
+
+      expect {
+        process = create(:legislation_process, background_color: "#fff", font_color: "ggg")
+      }.to raise_error(ActiveRecord::RecordInvalid,
+                       "Validation failed: Font color is invalid")
     end
   end