diff --git a/app/assets/stylesheets/bootstrap_and_overrides.css.less b/app/assets/stylesheets/bootstrap_and_overrides.css.less
index 1911eeae..7892f09e 100644
--- a/app/assets/stylesheets/bootstrap_and_overrides.css.less
+++ b/app/assets/stylesheets/bootstrap_and_overrides.css.less
@@ -48,7 +48,7 @@ body {
 
 
 // Fix empty dd tags in horizontal dl, see https://github.com/twitter/bootstrap/issues/4062
-.dl-horizontal { 
+.dl-horizontal {
     dd { .clearfix(); }
 }
 
@@ -119,6 +119,9 @@ table {
     td:first-child {
       text-align: left;
     }
+    small {
+      color: inherit; // keep it readable instead of gray
+    }
   }
   th.numeric, td.numeric {
     text-align: right;
@@ -129,7 +132,7 @@ table {
   th.left, td.left     { text-align: left; }
   th.right, td.right   { text-align: right; }
   th.center, td.center { text-align: center; }
-  
+
   td.main_info {
     font-weight: bold;
   }
diff --git a/app/views/shared/articles_by/_article_single.html.haml b/app/views/shared/articles_by/_article_single.html.haml
index 7b508029..f2f3ad78 100644
--- a/app/views/shared/articles_by/_article_single.html.haml
+++ b/app/views/shared/articles_by/_article_single.html.haml
@@ -1,11 +1,13 @@
 %tbody{id: "oa_#{order_article.id}"}
   - if not defined?(heading) or heading
     %tr.list-heading
-      %th.name{:colspan => "4"}>
-        = order_article.article.name + ' '
-        = "(#{order_article.article.unit}, #{number_to_currency order_article.price.fc_price}"
-        - pkg_info = pkg_helper(order_article.price)
-        = ", #{pkg_info}".html_safe unless pkg_info.blank?
-        )
+      %th{:colspan => "4"}>
+        %h4.name.pull-left
+          = order_article.article.name
+          %small
+            = "(#{order_article.article.unit}, #{number_to_currency order_article.price.fc_price}"
+            - pkg_info = pkg_helper(order_article.price)
+            = ", #{pkg_info}".html_safe unless pkg_info.blank?
+            )
   - for goa in order_article.group_order_articles.ordered
     = render 'shared/articles_by/article_single_goa', goa: goa, edit: (edit rescue nil)
diff --git a/app/views/shared/articles_by/_articles.html.haml b/app/views/shared/articles_by/_articles.html.haml
index d75832e4..17ad4166 100644
--- a/app/views/shared/articles_by/_articles.html.haml
+++ b/app/views/shared/articles_by/_articles.html.haml
@@ -1,4 +1,4 @@
-%table.table.table-hover.list#articles_by_articles
+%table.table.table-condensed.table-hover.list#articles_by_articles
   %thead.list-heading
     %tr
       %th{:style => 'width:70%'}= Ordergroup.model_name.human
diff --git a/app/views/shared/articles_by/_groups.html.haml b/app/views/shared/articles_by/_groups.html.haml
index 597b2d0e..7b0102b8 100644
--- a/app/views/shared/articles_by/_groups.html.haml
+++ b/app/views/shared/articles_by/_groups.html.haml
@@ -1,4 +1,4 @@
-%table.table.table-hover.list#articles_by_groups
+%table.table.table-condensed.table-hover.list#articles_by_groups
   %thead.list-heading
     %tr
       %th{:style => "width:40%"}= heading_helper Article, :name