diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index c8a9e736b..bcb93a7e9 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -18,4 +18,12 @@
 @import "bootstrap-sprockets";
 @import "bootstrap";
 
-.bg-blue{background-color:blue;}
+.widget.red {
+  background-color: #ff0000;
+}
+.widget.green {
+  background-color: #00ff00;
+}
+.widget.blue {
+  background-color: #0000ff;
+}
\ No newline at end of file
diff --git a/app/models/paragraph_widget.rb b/app/models/paragraph_widget.rb
index d2075638e..77445b5b6 100644
--- a/app/models/paragraph_widget.rb
+++ b/app/models/paragraph_widget.rb
@@ -2,5 +2,5 @@ class ParagraphWidget < Widget
   attribute :image, :reference
   attribute :headline, :string
   attribute :text, :string
-  attribute :color, :enum, values: %w[red green blue], default: 'blue'
+  attribute :background_color_select, :enum, values: ["red","green","blue"], default: "red" 
 end
diff --git a/app/views/paragraph_widget/details.html.erb b/app/views/paragraph_widget/details.html.erb
index a63407642..af614f1ef 100644
--- a/app/views/paragraph_widget/details.html.erb
+++ b/app/views/paragraph_widget/details.html.erb
@@ -2,4 +2,5 @@
   <%= scrivito_details_for ParagraphWidget.description_for_editor do %>
     A cover with head, text and image
   <% end %>
-<% end %>
+  <%= scrivito_tag(:div, widget, :background_color_select) %>
+<% end %>
\ No newline at end of file