diff --git a/app/assets/javascripts/banners.js.coffee b/app/assets/javascripts/banners.js.coffee
index 5f0c770f1..e7748c148 100644
--- a/app/assets/javascripts/banners.js.coffee
+++ b/app/assets/javascripts/banners.js.coffee
@@ -36,7 +36,16 @@ App.Banners =
       change: ->
         App.Banners.update_background_color("#js-banner-style", "#banner_background_color", $(this).val());
 
+    $("#banner_background_color").on
+      change: ->
+        App.Banners.update_background_color("#js-banner-style", "#banner_background_color_picker", $(this).val());
+
     $("#banner_font_color_picker").on
       change: ->
         App.Banners.update_font_color("#js-banner-title", "#banner_font_color", $(this).val());
         App.Banners.update_font_color("#js-banner-description", "#banner_font_color", $(this).val());
+
+    $("#banner_font_color").on
+      change: ->
+        App.Banners.update_font_color("#js-banner-title", "#banner_font_color_picker", $(this).val());
+        App.Banners.update_font_color("#js-banner-description", "#banner_font_color_picker", $(this).val());
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 8ef6ebb7f..e7e917be8 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2226,7 +2226,8 @@ table {
 
 .banner-style-one,
 .banner-style-two,
-.banner-style-three {
+.banner-style-three,
+.banner {
   margin: 0;
   margin-bottom: $line-height;
 
diff --git a/app/controllers/admin/banners_controller.rb b/app/controllers/admin/banners_controller.rb
index 1c0d1528c..802110063 100644
--- a/app/controllers/admin/banners_controller.rb
+++ b/app/controllers/admin/banners_controller.rb
@@ -40,8 +40,9 @@ class Admin::BannersController < Admin::BaseController
 
     def banner_params
       attributes = [:title, :description, :target_url, :style, :image,
-                    :post_started_at, :post_ended_at, :sections,
-                    :background_color, :font_color]
+                    :post_started_at, :post_ended_at,
+                    :background_color, :font_color,
+                    web_section_ids: []]
       params.require(:banner).permit(*attributes)
     end
 
@@ -58,6 +59,6 @@ class Admin::BannersController < Admin::BaseController
     end
 
     def banner_sections
-      @banner_sections = Banner::Section.sections.map {|banner_section| [banner_section[1], banner_section[0]]} # name, value
+      @banner_sections = WebSection.all
     end
 end
diff --git a/app/models/banner.rb b/app/models/banner.rb
index afa6e5115..ad37fdc72 100644
--- a/app/models/banner.rb
+++ b/app/models/banner.rb
@@ -7,15 +7,13 @@ class Banner < ActiveRecord::Base
                     length: { minimum: 2 }
   validates :description, presence: true
   validates :target_url, presence: true
-  validates :style, presence: true
-  validates :image, presence: true
   validates :post_started_at, presence: true
   validates :post_ended_at, presence: true
 
   has_many :sections
+  has_many :web_sections, through: :sections
 
   scope :with_active,   -> { where("post_started_at <= ?", Time.current).where("post_ended_at >= ?", Time.current) }
 
   scope :with_inactive, -> { where("post_started_at > ? or post_ended_at < ?", Time.current, Time.current) }
-
 end
diff --git a/app/models/banner/section.rb b/app/models/banner/section.rb
index ac1861a1e..493093731 100644
--- a/app/models/banner/section.rb
+++ b/app/models/banner/section.rb
@@ -1,5 +1,4 @@
 class Banner::Section < ActiveRecord::Base
-  enum sections: { homepage: 0, debates: 1, proposals: 2, budgets: 3, more_info: 4 }
-
   belongs_to :banner
+  belongs_to :web_section
 end
diff --git a/app/models/web_section.rb b/app/models/web_section.rb
new file mode 100644
index 000000000..ffeca96f2
--- /dev/null
+++ b/app/models/web_section.rb
@@ -0,0 +1,4 @@
+class WebSection < ActiveRecord::Base
+  has_many :sections
+  has_many :banners, through: :sections
+end
diff --git a/app/views/admin/banners/_form.html.erb b/app/views/admin/banners/_form.html.erb
index 852ef551c..1db97e71a 100644
--- a/app/views/admin/banners/_form.html.erb
+++ b/app/views/admin/banners/_form.html.erb
@@ -3,18 +3,8 @@
   <%= render 'errors' %>
 
   <div class="row">
-    <div class="small-12 medium-6 large-3 column">
-    <%= f.label :style, t("admin.banners.banner.style") %>
-    <%= f.select :style, options_for_select(@banner_styles, @banner.style),:include_blank => '-',
-                      label: false,placeholder: t("admin.banners.banner.style") %>
-    </div>
-    <div class="small-12 medium-6 large-3 column">
-    <%= f.label :image, t("admin.banners.banner.image") %>
-    <%= f.select :image, options_for_select(@banner_imgs, @banner.image),:include_blank => '-',
-                      label: false, placeholder: t("admin.banners.banner.image") %>
-    </div>
     <% date_started_at = @banner.post_started_at.present? ? I18n.localize(@banner.post_started_at) : "" %>
-    <div class="small-12 medium-6 large-3 column">
+    <div class="small-12 medium-3 column">
       <%= f.label :post_started_at, t("admin.banners.banner.post_started_at") %>
       <%= f.text_field :post_started_at,
                         label: false,
@@ -24,7 +14,7 @@
                         id: "post_started_at" %>
     </div>
     <% date_ended_at = @banner.post_ended_at.present? ? I18n.localize(@banner.post_ended_at) : ""%>
-    <div class="small-12 medium-6 large-3 column">
+    <div class="small-12 medium-3 column end">
       <%= f.label :post_ended_at, t("admin.banners.banner.post_ended_at") %>
       <%= f.text_field  :post_ended_at,
                         label: false,
@@ -63,9 +53,8 @@
   <div class="row">
     <div class="small-12 column">
       <%= f.label :sections, t("admin.banners.banner.sections_label") %>
-      <% @banner_sections.each do |section| %>
-        <%= f.check_box :sections, {multiple: true, label: false}, section[0], nil %>
-        <%= t("admin.banners.banner.sections.#{section[1]}") %><br>
+      <%= f.collection_check_boxes(:web_section_ids, @banner_sections, :id, :name) do |b| %>
+        <%= b.check_box %> <%= t("admin.banners.banner.sections.#{b.text}") %><br>
       <% end %>
     </div>
   </div>
@@ -88,7 +77,7 @@
       <%= f.submit(class: "button expanded", value: t("admin.banners.edit.form.submit_button")) %>
     </div>
   </div>
-  <div id="js-banner-style" class="<%= @banner.style %>" style="background-color:<%= @banner.background_color %>">
+  <div id="js-banner-style" class="<%= @banner.style %> banner" style="background-color:<%= @banner.background_color %>">
     <div id="js-banner-image" class="<%= @banner.image %>">
       <%= link_to @banner.target_url do %>
         <h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
diff --git a/app/views/admin/banners/index.html.erb b/app/views/admin/banners/index.html.erb
index 352816bfc..c0e8186d2 100644
--- a/app/views/admin/banners/index.html.erb
+++ b/app/views/admin/banners/index.html.erb
@@ -37,7 +37,7 @@
       </tr>
       <tr>
         <td colspan="3">
-          <div class="<%= banner.style %>" style="background-color:<%= banner.background_color %>">
+          <div class="<%= banner.style %> banner" style="background-color:<%= banner.background_color %>">
             <div class="<%= banner.image %>">
               <%= link_to banner.target_url do %>
                 <h2 style="color:<%= banner.font_color %>"><%= banner.title %></h2>
diff --git a/db/migrate/20180109101656_create_banner_sections.rb b/db/migrate/20180109101656_create_banner_sections.rb
index e65bbd91a..3182858d8 100644
--- a/db/migrate/20180109101656_create_banner_sections.rb
+++ b/db/migrate/20180109101656_create_banner_sections.rb
@@ -2,7 +2,7 @@ class CreateBannerSections < ActiveRecord::Migration
   def change
     create_table :banner_sections do |t|
       t.integer :banner_id
-      t.integer :section
+      t.integer :web_section_id
       t.timestamps null: false
     end
   end
diff --git a/db/migrate/20180115075542_create_web_sections.rb b/db/migrate/20180115075542_create_web_sections.rb
new file mode 100644
index 000000000..483bc7bb7
--- /dev/null
+++ b/db/migrate/20180115075542_create_web_sections.rb
@@ -0,0 +1,8 @@
+class CreateWebSections < ActiveRecord::Migration
+  def change
+    create_table :web_sections do |t|
+      t.text :name
+      t.timestamps null: false
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index bb5863510..047909cb4 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -65,9 +65,9 @@ ActiveRecord::Schema.define(version: 20180519132610) do
 
   create_table "banner_sections", force: :cascade do |t|
     t.integer  "banner_id"
-    t.integer  "section"
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
+    t.integer  "web_section_id"
+    t.datetime "created_at",     null: false
+    t.datetime "updated_at",     null: false
   end
 
   create_table "banners", force: :cascade do |t|
@@ -1249,6 +1249,7 @@ ActiveRecord::Schema.define(version: 20180519132610) do
   add_index "votes", ["votable_id", "votable_type", "vote_scope"], name: "index_votes_on_votable_id_and_votable_type_and_vote_scope", using: :btree
   add_index "votes", ["voter_id", "voter_type", "vote_scope"], name: "index_votes_on_voter_id_and_voter_type_and_vote_scope", using: :btree
 
+<<<<<<< HEAD
   create_table "widget_cards", force: :cascade do |t|
     t.string   "title"
     t.text     "description"
@@ -1265,6 +1266,12 @@ ActiveRecord::Schema.define(version: 20180519132610) do
     t.integer  "limit",      default: 3
     t.datetime "created_at",             null: false
     t.datetime "updated_at",             null: false
+=======
+  create_table "web_sections", force: :cascade do |t|
+    t.text     "name"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+>>>>>>> Apply banner style to the new banners
   end
 
   add_foreign_key "administrators", "users"
diff --git a/lib/tasks/web_sections.rake b/lib/tasks/web_sections.rake
new file mode 100644
index 000000000..8790bddd0
--- /dev/null
+++ b/lib/tasks/web_sections.rake
@@ -0,0 +1,10 @@
+namespace :web_sections do
+  desc "Generate web sections for banners"
+  task generate: :environment do
+    WebSection.create(name: 'homepage')
+    WebSection.create(name: 'debates')
+    WebSection.create(name: 'proposals')
+    WebSection.create(name: 'budgets')
+    WebSection.create(name: 'more_info')
+  end
+end