diff --git a/CHANGELOG b/CHANGELOG
index 842978468ad..7d9c8975468 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -26,6 +26,7 @@ v 6.4.0
   - API Cross-origin resource sharing
   - Show READMe link at project home page
   - Show repo size for projects in Admin area
+	- Add color custimization and previewing to broadcast messages
 
 v 6.3.0
   - API for adding gitlab-ci service
diff --git a/app/assets/javascripts/admin.js.coffee b/app/assets/javascripts/admin.js.coffee
index 6230fe7f93f..6634bb6cc34 100644
--- a/app/assets/javascripts/admin.js.coffee
+++ b/app/assets/javascripts/admin.js.coffee
@@ -8,6 +8,23 @@ class Admin
       else
         elems.removeAttr 'disabled'
 
+    $('body').on 'click', '.js-toggle-colors-link', (e) ->
+      e.preventDefault()
+      $('.js-toggle-colors-link').hide()
+      $('.js-toggle-colors-container').show()
+
+    $('input#broadcast_message_color').on 'input', ->
+      previewColor = $('input#broadcast_message_color').val()
+      $('div.broadcast-message-preview').css('background-color', previewColor)
+
+    $('input#broadcast_message_font').on 'input', ->
+      previewColor = $('input#broadcast_message_font').val()
+      $('div.broadcast-message-preview').css('color', previewColor)
+
+    $('textarea#broadcast_message_message').on 'input', ->
+      previewMessage = $('textarea#broadcast_message_message').val()
+      $('div.broadcast-message-preview span').text(previewMessage)
+
     $('.log-tabs a').click (e) ->
       e.preventDefault()
       $(this).tab('show')
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1615cd79259..1cfcbcedc60 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -361,6 +361,11 @@ table {
   color: #BBB;
 }
 
+.broadcast-message-preview {
+  @extend .broadcast-message;
+  margin-bottom: 20px;
+}
+
 .ajax-users-select {
   width: 400px;
 
diff --git a/app/helpers/broadcast_messages_helper.rb b/app/helpers/broadcast_messages_helper.rb
new file mode 100644
index 00000000000..29ff47663da
--- /dev/null
+++ b/app/helpers/broadcast_messages_helper.rb
@@ -0,0 +1,9 @@
+module BroadcastMessagesHelper
+  def broadcast_styling(broadcast_message)
+    if(broadcast_message.color || broadcast_message.font)
+      "background-color:#{broadcast_message.color};color:#{broadcast_message.font}"
+    else
+      ""
+    end
+  end
+end
diff --git a/app/models/broadcast_message.rb b/app/models/broadcast_message.rb
index a8b1db9c24e..05b4dfc366e 100644
--- a/app/models/broadcast_message.rb
+++ b/app/models/broadcast_message.rb
@@ -9,10 +9,12 @@
 #  alert_type :integer
 #  created_at :datetime         not null
 #  updated_at :datetime         not null
+#  color      :string(255)
+#  font       :string(255)
 #
 
 class BroadcastMessage < ActiveRecord::Base
-  attr_accessible :alert_type, :ends_at, :message, :starts_at
+  attr_accessible :alert_type, :color, :ends_at, :font, :message, :starts_at
 
   validates :message, presence: true
   validates :starts_at, presence: true
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index b16d82f4abf..8a0d5e4d760 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -2,7 +2,9 @@
   Broadcast Messages
 %p.light
   Broadcast messages are displayed for every user and can be used to notify users about scheduled maintenance, recent upgrades and more.
-%hr
+.broadcast-message-preview
+  %i.icon-bullhorn
+  %span Your message here
 
 = form_for [:admin, @broadcast_message] do |f|
   -if @broadcast_message.errors.any?
@@ -13,6 +15,17 @@
     = f.label :message
     .controls
       = f.text_area :message, class: "input-xxlarge", rows: 2, required: true
+      %div
+        = link_to '#', class: 'js-toggle-colors-link' do
+          Customize colors
+  .control-group.js-toggle-colors-container.hide
+    = f.label :color, "Background Color"
+    .controls
+      = f.text_field :color
+  .control-group.js-toggle-colors-container.hide
+    = f.label :font, "Font Color"
+    .controls
+      = f.text_field :font
   .control-group
     = f.label :starts_at
     .controls.datetime-controls
diff --git a/app/views/layouts/_broadcast.html.haml b/app/views/layouts/_broadcast.html.haml
index 4c4de743fdf..5794e3de338 100644
--- a/app/views/layouts/_broadcast.html.haml
+++ b/app/views/layouts/_broadcast.html.haml
@@ -1,4 +1,4 @@
 - if broadcast_message.present?
-  .broadcast-message
+  .broadcast-message{ style: broadcast_styling(broadcast_message) }
     %i.icon-bullhorn
     = broadcast_message.message
diff --git a/db/migrate/20131130165425_add_color_and_font_to_broadcast_messages.rb b/db/migrate/20131130165425_add_color_and_font_to_broadcast_messages.rb
new file mode 100644
index 00000000000..473f355eceb
--- /dev/null
+++ b/db/migrate/20131130165425_add_color_and_font_to_broadcast_messages.rb
@@ -0,0 +1,6 @@
+class AddColorAndFontToBroadcastMessages < ActiveRecord::Migration
+  def change
+    add_column :broadcast_messages, :color, :string
+    add_column :broadcast_messages, :font, :string
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index cda5c3cf946..e02799e0dbc 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -20,6 +20,8 @@ ActiveRecord::Schema.define(version: 20131217102743) do
     t.integer  "alert_type"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.string   "color"
+    t.string   "font"
   end
 
   create_table "deploy_keys_projects", force: true do |t|
diff --git a/features/admin/broadcast_messages.feature b/features/admin/broadcast_messages.feature
index 0294b51a7c5..5f16120b7cc 100644
--- a/features/admin/broadcast_messages.feature
+++ b/features/admin/broadcast_messages.feature
@@ -11,3 +11,10 @@ Feature: Admin Broadcast Messages
     When submit form with new broadcast message
     Then I should be redirected to admin messages page
     And I should see newly created broadcast message
+
+  Scenario: Create a customized broadcast message
+    When submit form with new customized broadcast message
+    Then I should be redirected to admin messages page
+    And I should see newly created broadcast message
+    Then I visit dashboard page
+    And I should see a customized broadcast message
diff --git a/features/steps/admin/admin_broadcast_messages.rb b/features/steps/admin/admin_broadcast_messages.rb
index 4dfaac06ae4..a35fa34a3a2 100644
--- a/features/steps/admin/admin_broadcast_messages.rb
+++ b/features/steps/admin/admin_broadcast_messages.rb
@@ -24,4 +24,18 @@ class Spinach::Features::AdminBroadcastMessages < Spinach::FeatureSteps
   step 'I should see newly created broadcast message' do
     page.should have_content 'Application update from 4:00 CST to 5:00 CST'
   end
+
+  step 'submit form with new customized broadcast message' do
+    fill_in 'broadcast_message_message', with: 'Application update from 4:00 CST to 5:00 CST'
+    click_link "Customize colors"
+    fill_in 'broadcast_message_color', with: '#f2dede'
+    fill_in 'broadcast_message_font', with: '#b94a48'
+    select '2018', from: "broadcast_message_ends_at_1i"
+    click_button "Add broadcast message"
+  end
+
+  step 'I should see a customized broadcast message' do
+    page.should have_content 'Application update from 4:00 CST to 5:00 CST'
+    page.should have_selector %(div[style="background-color:#f2dede;color:#b94a48"])
+  end
 end
diff --git a/spec/factories/broadcast_messages.rb b/spec/factories/broadcast_messages.rb
index 84dea945025..ad16edaf2ef 100644
--- a/spec/factories/broadcast_messages.rb
+++ b/spec/factories/broadcast_messages.rb
@@ -9,6 +9,8 @@
 #  alert_type :integer
 #  created_at :datetime         not null
 #  updated_at :datetime         not null
+#  color      :string(255)
+#  font       :string(255)
 #
 
 # Read about factories at https://github.com/thoughtbot/factory_girl
@@ -19,5 +21,7 @@ FactoryGirl.define do
     starts_at "2013-11-12 13:43:25"
     ends_at "2013-11-12 13:43:25"
     alert_type 1
+    color "#555"
+    font "#BBB"
   end
 end
diff --git a/spec/helpers/broadcast_messages_helper_spec.rb b/spec/helpers/broadcast_messages_helper_spec.rb
new file mode 100644
index 00000000000..1338ce4873d
--- /dev/null
+++ b/spec/helpers/broadcast_messages_helper_spec.rb
@@ -0,0 +1,21 @@
+require 'spec_helper'
+
+describe BroadcastMessagesHelper do
+  describe 'broadcast_styling' do
+    let(:broadcast_message) { double(color: "", font: "") }
+
+    context "default style" do
+      it "should have no style" do
+        broadcast_styling(broadcast_message).should match('')
+      end
+    end
+
+    context "customiezd style" do
+      before { broadcast_message.stub(color: "#f2dede", font: "#b94a48") }
+
+      it "should have a customized style" do
+        broadcast_styling(broadcast_message).should match('background-color:#f2dede;color:#b94a48')
+      end
+    end
+  end
+end
diff --git a/spec/models/broadcast_message_spec.rb b/spec/models/broadcast_message_spec.rb
index 998e89fa26a..cf0b36a2830 100644
--- a/spec/models/broadcast_message_spec.rb
+++ b/spec/models/broadcast_message_spec.rb
@@ -9,6 +9,8 @@
 #  alert_type :integer
 #  created_at :datetime         not null
 #  updated_at :datetime         not null
+#  color      :string(255)
+#  font       :string(255)
 #
 
 require 'spec_helper'