diff --git a/app/assets/javascripts/announcements.js.coffee b/app/assets/javascripts/announcements.js.coffee
new file mode 100644
--- /dev/null
+++ b/app/assets/javascripts/announcements.js.coffee
@@ -0,0 +1,15 @@
+#js for announcement
+$ ->
+  $('.ajax-toggle').on 'click', (event) ->
+    console.log event.target.id
+    target = $(event.target)
+    target.removeClass 'btn-default'
+    target.removeClass 'btn-success'
+    target.addClass 'btn-warning'
+    target.text '...'
+    return
+
+  $(document).ajaxError (event, jqxhr, settings, exception) ->
+    if jqxhr.status
+      alert 'We\'re sorry, but something went wrong (' + jqxhr.status + ')'
+    return
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
--- a/app/assets/stylesheets/application.css.sass
+++ b/app/assets/stylesheets/application.css.sass
@@ -85,17 +85,17 @@
   border-bottom: 1px solid #eeeeee
 
 
-a
-  color: #6666cc
-  text-decoration: none
-
-  &:link, &:visited
-    color: #6666cc
-    text-decoration: none
-
-  &:hover, &:focus
-    color: #111166
-    text-decoration: none
+//#a
+//  color: #6666cc
+//  text-decoration: none
+//
+//  &:link, &:visited
+//    color: #6666cc
+//    text-decoration: none
+//
+//  &:hover, &:focus
+//    color: #111166
+//    text-decoration: none
 
 
 div
diff --git a/app/controllers/announcements_controller.rb b/app/controllers/announcements_controller.rb
--- a/app/controllers/announcements_controller.rb
+++ b/app/controllers/announcements_controller.rb
@@ -81,7 +81,7 @@
 
   def toggle
     @announcement = Announcement.find(params[:id])
-    @announcement.update_attributes( published: params[:published] == 1)
+    @announcement.update_attributes( published:  !@announcement.published? )
     respond_to do |format|
       format.js {}
     end
diff --git a/app/views/announcements/index.html.erb b/app/views/announcements/index.html.erb
deleted file mode 100644
--- a/app/views/announcements/index.html.erb
+++ /dev/null
@@ -1,41 +0,0 @@
-<h1>Listing announcements</h1>
-
-<%= link_to 'New announcement', new_announcement_path %>
-
-<table class="info">
-  <tr class="info-head">
-    <th>Updated</th>
-    <th>Announcement</th>
-    <th>Author</th>
-    <th>Published</th>  
-    <th></th>
-    <th></th>
-    <th></th>
-  </tr>
-
-<% for announcement in @announcements %>
-  <tr class="info-<%= cycle 'odd', 'even' %>">
-    <% @announcement = announcement %>
-    <td><%= time_ago_in_words announcement.updated_at %></td>
-    <td>
-      <% if !announcement.title.blank? %>
-        <b>Title:</b> <%=h announcement.title %><br/>
-      <% end %>
-      <% if !announcement.notes.blank? %>
-        <b>Notes: <%=h announcement.notes %></b><br/>
-      <% end %>
-      <%=h announcement.body %>
-    </td>
-    <td><%=h announcement.author %></td>
-    <td><%= check_box_tag :published, 1, announcement.published, { class: 'bootstrap-toggle', id: "published-#{announcement.id}", data: {remote: true, method: 'PUT', url: url_for(controller: :announcements, action: :toggle, id: announcement), size: 'small', toggle: 'toggle' } } %></td>
-    <!-- <td><%= in_place_editor_field :announcement, :published, {}, :rows => 1 %></td> -->
-    <td><%= link_to 'Show', announcement %></td>
-    <td><%= link_to 'Edit', edit_announcement_path(announcement) %></td>
-    <td><%= link_to 'Destroy', announcement, :confirm => 'Are you sure?', :method => :delete %></td>
-  </tr>
-<% end %>
-</table>
-
-<br />
-
-<%= link_to 'New announcement', new_announcement_path %>
diff --git a/app/views/announcements/index.html.haml b/app/views/announcements/index.html.haml
new file mode 100644
--- /dev/null
+++ b/app/views/announcements/index.html.haml
@@ -0,0 +1,37 @@
+%h1 Listing announcements
+
+= link_to '+ Add announcement', new_announcement_path, class: 'btn btn-success'
+%br
+%br
+
+%table.table.table-striped
+  %tr
+    %th Updated
+    %th Announcement
+    %th Author
+    %th Published
+    %th
+    %th
+  - for announcement in @announcements
+    %tr
+      - @announcement = announcement
+      %td= time_ago_in_words announcement.updated_at
+      %td
+        - if !announcement.title.blank?
+          %b Title:
+          = h announcement.title
+          %br/
+        - if !announcement.notes.blank?
+          %b
+            Notes: #{h announcement.notes}
+          %br/
+        = h announcement.body
+      %td= h announcement.author
+      // %td= check_box_tag :published, 1, announcement.published, { class: 'bootstrap-toggle', id: "published-#{announcement.id}", data: {remote: true, method: 'PUT', url: url_for(controller: :announcements, action: :toggle, id: announcement), size: 'small', toggle: 'toggle' } }
+      // <td><haml_loud> in_place_editor_field :announcement, :published, {}, :rows => 1 </haml_loud></td>
+      %td= link_to (announcement.published? ? "Yes" : "No"), url_for(controller: :announcements, action: :toggle, id: announcement), { class: "btn btn-block btn-sm btn-#{(announcement.published? ? 'success' : 'default')} ajax-toggle", id: "published-#{announcement.id}", data: {remote: true, method: 'post' } }
+      %td= link_to 'Edit', edit_announcement_path(announcement), class: 'btn btn-block btn-sm btn-info'
+      %td= link_to 'Destroy', announcement, :confirm => 'Are you sure?', :method => :delete, class: "btn btn-block btn-sm btn-danger"
+%br
+
+= link_to '+ Add announcement', new_announcement_path, class: 'btn btn-success'
diff --git a/app/views/announcements/toggle.js.haml b/app/views/announcements/toggle.js.haml
new file mode 100644
--- /dev/null
+++ b/app/views/announcements/toggle.js.haml
@@ -0,0 +1,8 @@
+:plain
+  var t = $("#published-#{@announcement.id}");
+  t.removeClass('btn-default');
+  t.removeClass('btn-success');
+  t.removeClass('btn-warning');
+  t.addClass("btn-#{@announcement.published? ? 'success' : 'default'}");
+  t.attr("data-params","published=#{!@announcement.published?}");
+  t.text("#{@announcement.published? ? "Yes" : "No"}");
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,8 +2,8 @@
 %html
 %head
   %title= GraderConfiguration['contest.name']
-  = stylesheet_link_tag "application", :media => "all"
-  = javascript_include_tag "application"
+  = stylesheet_link_tag "application", params[:controller], :media => "all"
+  = javascript_include_tag "application", params[:controller]
   = csrf_meta_tags
   = content_for :header
   = yield :head
diff --git a/config/routes.rb b/config/routes.rb
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -6,7 +6,7 @@
   resources :contests
 
   resources :announcements
-  match 'announcements/toggle/:id' => 'announcements#toggle', via: :put
+  match 'announcements/toggle/:id' => 'announcements#toggle'
 
   resources :sites