diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 5e44107..2f32111 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -92,19 +92,32 @@ footer ul li {
   margin-left: 15px;
 }
 
-.overview{
+.usercontainer{
+  position: absolute;
   width: 49%;
-  height: 49%;
   border-radius: 0px;
   margin: -2px;
   padding: 18px;
   border-color: #000;
   border: 0px;
+  vertical-align: bottom;
+
 
   font-weight: bold;
   font-size: 24px;
 
+}
 
+.overview{
+  //margin-left: 2px;
+  width: 50%;
+  float: left;
+  border-radius: 0px;
+
+  .btn{
+    width: 100%;
+    border-color: #444;
+  }
 }
 
 .center{
diff --git a/app/views/orders/overview.html.erb b/app/views/orders/overview.html.erb
index adbba94..7d21183 100644
--- a/app/views/orders/overview.html.erb
+++ b/app/views/orders/overview.html.erb
@@ -2,14 +2,25 @@
   <h3 class="center" >sort by name</h3>
 
   <% @users_by_name.each do |user| %>
+      <div class="thumbnail overview">
+      <%= link_to image_tag("http://placehold.it/100x100", class: "img-circle"),
+        new_user_order_path(user) %>
       <%= link_to user.name , new_user_order_path(user), class: "btn btn-info overview",
         style: get_color_style(user) %>
+    </div>
   <% end %>
+
 </div>
-<div class="col-md-6">
-  <h3 class="center">sort by orders</h3>
+
+
+<div class="col-md-6 ">
+  <h3 class="center" >sort by name</h3>
+
   <% @users_by_order.each do |user| %>
+      <div class="thumbnail overview">
+      <%= link_to image_tag("http://babeholder.pixoil.com/img/100/100", class: "img-circle"),
+        new_user_order_path(user) %>
       <%= link_to user.name , new_user_order_path(user), class: "btn btn-info overview",
         style: get_color_style(user) %>
+    </div>
   <% end %>
-</div>