diff --git a/app/stylesheets/g_collaborations.scss b/app/stylesheets/g_collaborations.scss
index f8b0e06e96c..f306bd6122f 100644
--- a/app/stylesheets/g_collaborations.scss
+++ b/app/stylesheets/g_collaborations.scss
@@ -71,10 +71,6 @@ $highlight-blue: #00b5fe;
     padding: 0;
   }
 
-  .box-header {
-    min-height: 36px;
-  }
-
   .ui-state-active i {
     color: #00b5fe !important;
   }
diff --git a/app/stylesheets/utilities/_components.scss b/app/stylesheets/utilities/_components.scss
index 0cbf6b03864..9088b57aa76 100644
--- a/app/stylesheets/utilities/_components.scss
+++ b/app/stylesheets/utilities/_components.scss
@@ -1,5 +1,5 @@
 .toolbar {
-  @extend .ui-widget-header;
+  @include ui-widget-header-bg-and-text;
   padding: $contentBoxPadding / 2;
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
diff --git a/app/views/jst/collaborations/CollaboratorPicker.handlebars b/app/views/jst/collaborations/CollaboratorPicker.handlebars
index 583291153d7..bdf9bcc8789 100644
--- a/app/views/jst/collaborations/CollaboratorPicker.handlebars
+++ b/app/views/jst/collaborations/CollaboratorPicker.handlebars
@@ -3,7 +3,7 @@
   {{#t "labels.collaborate_with"}}Collaborate With:{{/t}}
 
   <div class="box-with-header">
-    <header class="box-header">
+    <header class="toolbar border border-round-t border-trbl">
       <div class="filters">
         <input type="radio"
                aria-controls="available-users"
@@ -28,7 +28,7 @@
       </div>
     </header>
 
-    <div class="box-content">
+    <div class="box-content border border-round-b border-rbl">
       <div class="list-wrapper available-lists">
         <div class="list-view">
           <ul class="available-users" aria-label="{{#t "labels.available_users"}}Available users{{/t}}" tabindex="-1">