diff --git a/src/dependencies.pug b/src/dependencies.pug
index 722df98747b330343c21bcdb4a3d1fa9663aa334..c0c73f70254a0827050387384a44c00039eafd8d 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -31,5 +31,5 @@ script(type="module" src="https://unpkg.com/@startinblox/core@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.6")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory")
+script(type="module" src="/lib/sib-directory/sib-directory.js")
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ddb82ea3a7fe75db0df1f7cfd3d7c750a3bf7b28..830c088e8bb2f9bd9c28b26ec99c407606150646 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,6 +1,5 @@
-@import 'variables';
-
-[hidden] {
+[hidden],
+.hidden {
   display: none !important;
 }
 
@@ -229,3 +228,7 @@ sib-multiple[name*='skills'] {
   padding: 0.5rem 2rem;
 }
 
+member-info-groups {
+  @extend %group;
+}
+
diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss
index 7182d42234ea6c7cb62faed1b8ca340803d3dd1d..d22438da2336c0ddf3f278db78fd8eb0be3ce202 100644
--- a/src/styles/member-profile.scss
+++ b/src/styles/member-profile.scss
@@ -23,29 +23,22 @@
     div[name='member-profile__bio'] {
       border-bottom: 1px solid $color-link-water;
       display: grid;
-      grid-template-areas: "avatar name name name status"
-                           "avatar pseudo pseudo pseudo status"
-                           "avatar bio bio bio status"
-                           "avatar list list list button"
-                           "avatar list list list button";
+      grid-template-areas: "avatar name status"
+                           "avatar pseudo status"
+                           "avatar bio status"
+                           "avatar list button";
+      grid-template-columns: 1fr 2fr 1fr;
       padding: 4.5rem;
 
       div[name='member-img'] {
-        background-color: $color-bombay;
-        border-radius: 50%;
         grid-area: avatar;
-        height: 34vh;
         overflow: hidden;
         position: relative;
-        width: 34vh;
         
         img {
-          height: 100%;
-          left: 0;
+          border-radius: 50%;
           object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
+          max-width: 90% !important;
         }
       }
 
@@ -64,10 +57,6 @@
         > sib-multiple[name$='groups'] {
           display: flex;
           padding-left: 1.4rem;
-
-          groups-name {
-            @extend %group;
-          }
         }
       }
 
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 96e8f7ca4047f90fc4d6e85884dfed9a68a5bbf0..f32e2e8feb6bdfa431d07ed99de737c2e6d510ac 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -97,19 +97,32 @@
           display: none;
         }
 
+        sib-multiple[name$='groups'] {
+          display: flex;
+          align-items: flex-start;
+          justify-content: flex-end;
+          padding-top: 1.3rem;
+          padding-right: 2.6rem;
+          padding-left: 2.6rem;
+          
+          > * {
+            margin: 0.3rem;
+          }
+        }
+
         div[name='header'] {
           border-bottom: 1px solid $color-anti-flash-white;
           display: flex;
           flex-direction: column;
           padding: 0.85rem 0 3.4rem;
 
-          > *:not(sib-display-img) {
+          >*:not(member-picture) {
             display: flex;
             flex-basis: content;
             justify-content: center;
           }
 
-          sib-display-img {
+          member-picture {
             background-color: $color-white;
             border-radius: 50%;
             height: 28vh;
@@ -164,14 +177,6 @@
           padding: 0 1.7rem;
 
           @extend %member-info;
-
-          sib-multiple[name$='groups'] {
-            display: flex;
-
-            > * {
-              margin-right: 0.4rem;
-            }
-          }
         }
       }
     }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 4c371cfa9c5b7c0fa6cf60d02f5370fcd445b3fb..b28254572b7c2f900e00c0a046586e62306c39aa 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -68,6 +68,7 @@ $color-majorelle-blue:   hsl(244, 73%, 62%);
 %member-info {
 
   sib-multiple[name^='user.'],
+  > member-info > div,
   > sib-display-div > div {
     display: flex;
     flex-wrap: wrap;