diff --git a/datamodels/2.x/itop-portal-base/portal/public/css/layout/_all.scss b/datamodels/2.x/itop-portal-base/portal/public/css/layout/_all.scss
index c8758d101..0914184f4 100644
--- a/datamodels/2.x/itop-portal-base/portal/public/css/layout/_all.scss
+++ b/datamodels/2.x/itop-portal-base/portal/public/css/layout/_all.scss
@@ -1,3 +1,4 @@
 @import "navigation-menu";
 @import "page";
-@import "home";
\ No newline at end of file
+@import "home";
+@import "tabs";
\ No newline at end of file
diff --git a/datamodels/2.x/itop-portal-base/portal/public/css/layout/_tabs.scss b/datamodels/2.x/itop-portal-base/portal/public/css/layout/_tabs.scss
new file mode 100644
index 000000000..d5f6733f7
--- /dev/null
+++ b/datamodels/2.x/itop-portal-base/portal/public/css/layout/_tabs.scss
@@ -0,0 +1,55 @@
+$ipb-tabs--tab--border: solid 1px $common-color-grey-400 !default;
+$ipb-tabs--tab--badge--border-radius: $common-border-radius-500 !default;
+$ipb-tabs--tab--badge--padding-y: 3px !default;
+$ipb-tabs--tab--badge--padding-x: 5px !default;
+$ipb-tabs--tab--badge--margin-left: $common-spacing-200 !default;
+
+$ipb-tabs--tab--background-color: $common-color-grey-100 !default;
+$ipb-tabs--tab--color: $common-color-grey-900 !default;
+$ipb-tabs--tab--active--background-color: $common-color-white-100 !default;
+$ipb-tabs--tab--active--badge--background-color: $common-color-grey-200 !default;
+$ipb-tabs--tab--active--indicator--background-color: $common-color-primary-600 !default;
+$ipb-tabs--tab--active--indicator--width: $common-size-150 !default;
+$ipb-tabs--tab--active--indicator--height: $ipb-tabs--tab--active--indicator--width !default;
+$ipb-tabs--tab--active--indicator--margin-right: $common-spacing-300 !default;
+$ipb-tabs--tab--active--indicator--border-radius: $common-border-radius-full !default;
+
+.ipb-tabs.nav-pills > li{
+  > a {
+    display: flex;
+    align-items: center;
+    background-color: $ipb-tabs--tab--background-color;
+    color: $ipb-tabs--tab--color;
+
+    @extend %common-font-ral-med-150;
+
+    > .badge {
+      color: $common-color-grey-900;
+      background-color: transparent;
+      border-radius: $ipb-tabs--tab--badge--border-radius;
+      padding: $ipb-tabs--tab--badge--padding-y $ipb-tabs--tab--badge--padding-x;
+      margin-left: $ipb-tabs--tab--badge--margin-left;
+    }
+
+    border: $ipb-tabs--tab--border;
+    border-bottom: none;
+  }
+
+  &.active > a {
+    background-color: $ipb-tabs--tab--active--background-color;
+
+    &:before {
+      content: " ";
+      display: inline-block;
+      width: $ipb-tabs--tab--active--indicator--width;
+      height: $ipb-tabs--tab--active--indicator--height;
+      margin-right: $ipb-tabs--tab--active--indicator--margin-right;
+      border-radius: $ipb-tabs--tab--active--indicator--border-radius;
+      background-color: $ipb-tabs--tab--active--indicator--background-color;
+    }
+
+    > .badge {
+      background-color: $ipb-tabs--tab--active--badge--background-color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_manage-brick.scss b/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_manage-brick.scss
index bb9eab5f1..aaee53fb3 100644
--- a/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_manage-brick.scss
+++ b/datamodels/2.x/itop-portal-base/portal/public/css/pages/bricks/_manage-brick.scss
@@ -7,21 +7,6 @@ $ipb-manage-brick--panel--body--datatable--row--margin: $common-spacing-0 !defau
 $ipb-manage-brick--panel--body--datatable--row--padding-y: $common-spacing-0 !default;
 $ipb-manage-brick--panel--body--datatable--row--padding-x: $common-spacing-400 !default;
 
-$ipb-manage-brick--tabs--tab--border: solid 1px $common-color-grey-400 !default;
-$ipb-manage-brick--tabs--tab--badge--border-radius: $common-border-radius-500 !default;
-$ipb-manage-brick--tabs--tab--badge--padding-y: 3px !default;
-$ipb-manage-brick--tabs--tab--badge--padding-x: 5px !default;
-$ipb-manage-brick--tabs--tab--badge--margin-left: $common-spacing-200 !default;
-
-$ipb-manage-brick--tabs--tab--background-color: $common-color-grey-100 !default;
-$ipb-manage-brick--tabs--tab--color: $common-color-grey-900 !default;
-$ipb-manage-brick--tabs--tab--active--background-color: $common-color-white-100 !default;
-$ipb-manage-brick--tabs--tab--active--badge--background-color: $common-color-grey-200 !default;
-$ipb-manage-brick--tabs--tab--active--indicator--background-color: $common-color-primary-600 !default;
-$ipb-manage-brick--tabs--tab--active--indicator--width: $common-size-150 !default;
-$ipb-manage-brick--tabs--tab--active--indicator--height: $ipb-manage-brick--tabs--tab--active--indicator--width !default;
-$ipb-manage-brick--tabs--tab--active--indicator--margin-right: $common-spacing-300 !default;
-$ipb-manage-brick--tabs--tab--active--indicator--border-radius: $common-border-radius-full !default;
 
 $ipb-manage-brick--panel--body--table--margin-top: $common-spacing-500 !default;
 
@@ -47,45 +32,7 @@ $ipb-manage-brick--no-result--text--color: $common-color-grey-800 !default;
 
 
 }
-.ipb-manage-brick--tabs.grouping_tabs.nav-pills > li{
-  > a {
-    display: flex;
-    align-items: center;
-    background-color: $ipb-manage-brick--tabs--tab--background-color;
-    color: $ipb-manage-brick--tabs--tab--color;
-    
-    @extend %common-font-ral-med-150;
 
-    > .badge {
-      color: $common-color-grey-900;
-      background-color: transparent;
-      border-radius: $ipb-manage-brick--tabs--tab--badge--border-radius;
-      padding: $ipb-manage-brick--tabs--tab--badge--padding-y $ipb-manage-brick--tabs--tab--badge--padding-x;
-      margin-left: $ipb-manage-brick--tabs--tab--badge--margin-left;
-    }
-
-    border: $ipb-manage-brick--tabs--tab--border;
-    border-bottom: none;
-  }
-  
-  &.active > a {
-    background-color: $ipb-manage-brick--tabs--tab--active--background-color;
-    
-    &:before {
-      content: " ";
-      display: inline-block;
-      width: $ipb-manage-brick--tabs--tab--active--indicator--width;
-      height: $ipb-manage-brick--tabs--tab--active--indicator--height;
-      margin-right: $ipb-manage-brick--tabs--tab--active--indicator--margin-right;
-      border-radius: $ipb-manage-brick--tabs--tab--active--indicator--border-radius;
-      background-color: $ipb-manage-brick--tabs--tab--active--indicator--background-color;
-    }
-    
-    > .badge {
-      background-color: $ipb-manage-brick--tabs--tab--active--badge--background-color;
-    }
-  }
-}
 
 .ipb-manage-brick--panel--body--table  {
   margin-top: $ipb-manage-brick--panel--body--table--margin-top !important;
diff --git a/datamodels/2.x/itop-portal-base/portal/templates/bricks/manage/layout-table.html.twig b/datamodels/2.x/itop-portal-base/portal/templates/bricks/manage/layout-table.html.twig
index 7ca6186a3..b9124150b 100644
--- a/datamodels/2.x/itop-portal-base/portal/templates/bricks/manage/layout-table.html.twig
+++ b/datamodels/2.x/itop-portal-base/portal/templates/bricks/manage/layout-table.html.twig
@@ -4,7 +4,7 @@
 
 {% block pMainContentHolder %}
     {% if aGroupingTabsValues|length > 1 %}
-        <ul class="ipb-manage-brick--tabs nav nav-pills grouping_tabs">
+        <ul class="ipb-manage-brick--tabs ipb-tabs nav nav-pills grouping_tabs">
             {% for aGroupingTab in aGroupingTabsValues %}
                 <li{% if sGroupingTab is defined and sGroupingTab == aGroupingTab.value %} class="active"{% endif %} data-id="{{ aGroupingTab.value }}" data-label="{{ aGroupingTab.label }}" data-item-count="{{ aGroupingTab.count }}">
                     <a href="{{ app.url_generator.generate('p_manage_brick_display_as', {'sBrickId': sBrickId, 'sDisplayMode': sDisplayMode, 'sGroupingTab': aGroupingTab.value}) }}"
diff --git a/datamodels/2.x/itop-portal-base/portal/templates/bricks/user-profile/layout.html.twig b/datamodels/2.x/itop-portal-base/portal/templates/bricks/user-profile/layout.html.twig
index 65c28d11a..f40cfa9d2 100644
--- a/datamodels/2.x/itop-portal-base/portal/templates/bricks/user-profile/layout.html.twig
+++ b/datamodels/2.x/itop-portal-base/portal/templates/bricks/user-profile/layout.html.twig
@@ -32,7 +32,7 @@
         {% endif %}
     </div>
 
-    <ul class="nav nav-pills _tabs">
+    <ul class="ipb-tabs nav nav-pills _tabs">
         {% if aTabsValues is defined and aTabsValues|length > 0 %}
             <li{% if sTab == "user-info" %} class="active"{% endif %} data-id="user-info" data-label="{{ 'MyAccount:UserInfo:Tab:Title'|dict_s }}">
                 <a href="{{ app.url_generator.generate('p_user_profile_brick', {'sBrickId': oBrick.GetId(), 'sDisplayMode': '_self', 'sTab': "user-info"}) }}"