diff --git a/lib/proposals_discussion_plugin/topic.rb b/lib/proposals_discussion_plugin/topic.rb
index e51f3aa..eedb621 100644
--- a/lib/proposals_discussion_plugin/topic.rb
+++ b/lib/proposals_discussion_plugin/topic.rb
@@ -6,6 +6,10 @@ class ProposalsDiscussionPlugin::Topic < Folder
   has_many :proposals_comments, :class_name => 'Comment', :through => :children, :source => :comments
   has_many :proposals_authors, :class_name => 'Person', :through => :children, :source => :created_by
 
+  settings_items :color, :type => :string
+
+  attr_accessible :color
+
   def self.short_description
     _("Discussion topic")
   end
diff --git a/public/style.css b/public/style.css
index 43180a5..087bdfb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -9,10 +9,10 @@
   background: rgb(236, 236, 236);
   width: 100%;
   min-width: 272px;
-  display: table;
   vertical-align: top;
   margin: 12px 13px 12px 0;
   box-shadow: 5px 5px 5px -2px #ddd;
+  height: 100px;
 }
 
 .article-body-proposals-discussion-plugin_discussion .actions,
@@ -25,6 +25,8 @@
   border-right: 1px solid;
   border-color: rgb(201, 201, 201);
   padding: 5px;
+  vertical-align: middle;
+  height: 100%;
 }
 .proposal .topic {
   border-right: 0;
@@ -46,7 +48,7 @@
 }
 
 #article .proposal a:visited, #article .proposal a {
-  color: rgb(94, 94, 94);
+  color: rgb(70, 70, 70);
   text-decoration: none;
   width: 100%;
   display: inline-block;
@@ -59,6 +61,8 @@
 .proposal .content {
   width: 68%;
   color: rgb(83, 83, 83);
+  vertical-align: top;
+  height: 90px;
 }
 
 .proposal .abstract {
@@ -76,3 +80,32 @@ form .proposals-discussion-plugin .abstract textarea {
 form .proposals-discussion-plugin .body textarea {
   height: 400px;
 }
+
+.topic-color {
+  width: 9px;
+  float: left;
+  height: 100%;
+}
+
+.topics .topic {
+  background-color: rgb(233, 233, 233);
+  margin: 5px 0;
+  height: 25px;
+}
+
+#article .proposal .topic a {
+  font-weight: bold;
+  color: #888a85;
+  width: 100%;
+  height: 100%;
+}
+
+#article .topics .topic a {
+  text-decoration: none;
+  display: inline-block;
+  width: 95%;
+  height: 100%;
+  padding-left: 5px;
+  font-weight: bold;
+  font-size: 14px;
+}
diff --git a/views/cms/proposals_discussion_plugin/_topic.html.erb b/views/cms/proposals_discussion_plugin/_topic.html.erb
new file mode 100644
index 0000000..79c80dd
--- /dev/null
+++ b/views/cms/proposals_discussion_plugin/_topic.html.erb
@@ -0,0 +1,9 @@
+<%= required_fields_message %>
+
+<%= required f.text_field('name', :size => '64', :maxlength => 150) %>
+<%= render :partial => 'general_fields' %>
+
+<%= labelled_form_field(_('Description:'), text_area(:article, :body, :rows => 3, :cols => 64)) %>
+
+<!-- FIXME: Use the colorpicker component from AI2915 -->
+<%= labelled_form_field(_('Color:'), text_field(:article, :color)) %>
diff --git a/views/content_viewer/_proposal_card.html.erb b/views/content_viewer/_proposal_card.html.erb
index ef6e30b..4e237f2 100644
--- a/views/content_viewer/_proposal_card.html.erb
+++ b/views/content_viewer/_proposal_card.html.erb
@@ -1,4 +1,5 @@
 <div class="proposal">
+  <div class="topic-color" style="background-color: <%= proposal_card.topic.color %>;"></div>
   <div class="content">
     <div class="title">
       <%= link_to proposal_card.name, proposal_card.view_url %>
diff --git a/views/content_viewer/discussion.html.erb b/views/content_viewer/discussion.html.erb
index c5777b2..fb33d1a 100644
--- a/views/content_viewer/discussion.html.erb
+++ b/views/content_viewer/discussion.html.erb
@@ -13,9 +13,11 @@
 <div class="topics">
   <h3><%= _('Discussion Topics') %></h3>
   <% @page.topics.includes(:profile).each do |topic| %>
-    <div class="topic"><%= link_to topic.title, topic.view_url %></div>
+    <div class="topic">
+      <div class="topic-color" style="background-color: <%= topic.color %>;"></div>
+      <%= link_to topic.title, topic.view_url %>
+    </div>
   <% end %>
-  <div class="clear"></div>
 </div>
 
 <div class="actions">
--
libgit2 0.21.2