diff --git a/pkg/interface/groups/src/css/custom.css b/pkg/interface/groups/src/css/custom.css
index 95aa634bc3..641d8d8538 100644
--- a/pkg/interface/groups/src/css/custom.css
+++ b/pkg/interface/groups/src/css/custom.css
@@ -148,6 +148,9 @@ a {
   .b--gray0-d {
     border-color: #333;
   }
+  .b--gray1-d {
+    border-color: #4d4d4d;
+  }
   .b--gray2-d {
     border-color: #7f7f7f;
   }
diff --git a/pkg/interface/groups/src/js/components/lib/contact-card.js b/pkg/interface/groups/src/js/components/lib/contact-card.js
index e68498da02..6948c35070 100644
--- a/pkg/interface/groups/src/js/components/lib/contact-card.js
+++ b/pkg/interface/groups/src/js/components/lib/contact-card.js
@@ -501,7 +501,7 @@ export class ContactCard extends Component {
         <div
           className={
             "flex justify-between w-100 bg-white bg-gray0-d " +
-            "bb b--gray4 b--gray2-d "
+            "bb b--gray4 b--gray1-d "
           }>
           <div className="f9 mv4 mh3 pt1 dib w-100">
             <Link to={meLink}>
diff --git a/pkg/interface/groups/src/js/components/lib/contact-sidebar.js b/pkg/interface/groups/src/js/components/lib/contact-sidebar.js
index 7eb1874bb5..4823f842ce 100644
--- a/pkg/interface/groups/src/js/components/lib/contact-sidebar.js
+++ b/pkg/interface/groups/src/js/components/lib/contact-sidebar.js
@@ -86,9 +86,9 @@ export class ContactSidebar extends Component {
     let detailHref = `/~groups/detail${props.path}`
 
     return (
-      <div className={`bn br-m br-l br-xl b--gray2 lh-copy h-100 flex-shrink-0
-      flex-basis-100-s flex-basis-30-ns mw5-m mw5-l mw5-xl relative
-      overflow-hidden ` + responsiveClasses}>
+      <div className={"bn br-m br-l br-xl b--gray4 b--gray1-d lh-copy h-100 " +
+      "flex-basis-100-s flex-basis-30-ns mw5-m mw5-l mw5-xl relative " +
+      "overflow-hidden flex-shrink-0 " + responsiveClasses}>
         <div className="pt3 pb5 pl3 f8 db dn-m dn-l dn-xl">
           <Link to="/~groups/">{"⟵ All Groups"}</Link>
         </div>
diff --git a/pkg/interface/groups/src/js/components/lib/group-sidebar.js b/pkg/interface/groups/src/js/components/lib/group-sidebar.js
index 4797ff46d3..33e509e3c3 100644
--- a/pkg/interface/groups/src/js/components/lib/group-sidebar.js
+++ b/pkg/interface/groups/src/js/components/lib/group-sidebar.js
@@ -121,9 +121,9 @@ export class GroupSidebar extends Component {
     let activeClasses = (this.props.activeDrawer === "groups") ? "" : "dn-s";
 
     return (
-      <div className={"bn br-m br-l br-xl b--gray2 lh-copy h-100 flex-basis-100-s " +
-       "flex-basis-30-ns flex-shrink-0 mw5-m mw5-l mw5-xl pt3 pt0-m pt0-l pt0-xl " +
-        "relative overflow-hidden " + activeClasses}>
+      <div className={"bn br-m br-l br-xl b--gray4 b--gray1-d lh-copy h-100 " +
+       "flex-basis-30-ns flex-shrink-0 mw5-m mw5-l mw5-xl flex-basis-100-s " +
+        "relative overflow-hidden pt3 pt0-m pt0-l pt0-xl " + activeClasses}>
         <a className="db dn-m dn-l dn-xl f8 pb6 pl3" href="/">⟵ Landscape</a>
         <div className="overflow-auto pb8 h-100">
           <Link to="/~groups/new" className="dib">