diff --git a/src/menu-left.pug b/src/menu-left.pug
index e478a76..38a7d02 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -100,7 +100,7 @@ sib-router#navbar-router(default-route='dashboard')
           div.menu-icon.icon-folder-alt
       sib-route(name='circle', rdf-type='hd:circle', use-id='', hidden)
       div.sub-menu.menu-notification
-        sib-display(
+        sib-display.circle-tab(
           bind-user
           nested-field='circles'
           fields='circle'
@@ -120,7 +120,7 @@ sib-router#navbar-router(default-route='dashboard')
         div.menu-icon.icon-envelope-letter
       sib-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
       div.sub-menu.menu-notification
-        sib-display.nosub(
+        sib-display.nosub.message-tab(
           data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
           fields='name, chatProfile.jabberID, badge'
           search-fields="name"
diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss
index aed0a7c..39648b5 100644
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@@ -10,14 +10,14 @@
   .unread {
     font-weight: bolder;
   }
-  
+
   sib-router {
-  
     .menu-wrapper {
       &.is-closed {
         .sub-menu {
           display: none;
         }
+
         .menu-chevron {
           transform: rotate(180deg);
         }
@@ -27,22 +27,22 @@
     sib-link {
       width: 100%;
     }
-  
+
     .menu {
       cursor: pointer;
       display: flex;
       flex-direction: row-reverse;
       font-weight: bold;
       padding: 1.2rem;
-  
+
       &[active] {
         background-color: var(--color-menu-highlight-primary);
-  
+
         .menu-icon:before {
           background-color: var(--color-menu-icon-background-active);
         }
-  
-        .menu-notification > sib-display > div:first-child {
+
+        .menu-notification>sib-display>div:first-child {
           background-color: var(--color-menu-badge-background);
         }
       }
@@ -55,7 +55,7 @@
         flex-shrink: 0;
         font-size: 1.7rem;
         width: 3.2em;
-  
+
         &:before {
           border-radius: 100%;
           height: 1.9em;
@@ -63,7 +63,7 @@
           width: 1.9em;
         }
       }
-      
+
       .menu-label {
         display: flex;
         flex-direction: column;
@@ -84,63 +84,89 @@
         justify-content: center;
         width: 2em;
       }
-  
-      > sib-display {
+
+      >sib-display {
         display: block;
       }
     }
 
     .sub-menu {
 
-      /* Specific styles for the "Projects" tab */
+      /* Ellipsis for project tab */
 
       .project-tab>div>sib-display>div:nth-child(1) {
 
         sib-set-default[name='project'] {
+          flex: 3;
+          
+          .project-customer,
+          .project-name {
+            box-sizing: border-box;
+            display: block;
+            width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              width: 150px;
+            }
+          }
 
           .project-customer,
           .project-name>div {
-            display: block;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-
-          .project-customer {
-            width: 100%;
 
             @include breakpoint(lg) {
-              width: 150px;
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
           }
-
-          .project-name {
-            display: block;
-            width: calc(80vw - 50px);
-
-            @include breakpoint(lg) {
-              width: 150px;
-            }
-          }
-        }
-
-        hubl-counter {
-          margin-top: 16px;
         }
       }
-      /* End of specific styles of "Projects" tab */
+
+      /* Ellipsis for circle tab */
+
+      .circle-tab>div>sib-display>div {
+
+        sib-display-div[name='name'] {
+          flex: 3;
+
+          >div[name='name'] {
+            box-sizing: border-box;
+            padding-left: 0.2em;
+            width: calc(80vw - 76px);  /*76px = padding of the element + width and margin of counter */
+
+            @include breakpoint(lg) {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 150px;
+            }
+          }
+        }
+      }
+
+      /* Ellipsis for message tab */
+
+      .message-tab>div>sib-display>div>sib-display-div>div {
+        box-sizing: border-box;
+        width: calc(80vw - 76px); /*76px = padding of the element + width and margin of counter */
+        
+        @include breakpoint(lg) {
+          width: 150px;
+        }
+      }
 
       sib-display.nosub>sib-form[fields="name"]>hubl-search-users>input {
         margin-left: 30px;
-        max-width: 87%;
-        width: 87%;
+        max-width: 82%;
+        width: 82%;
         display: block;
         background-color: var(--color-secondary);
         color: var(--color-grey-6);
         border: 1px solid var(--color-grey-4);
         border-radius: 3px;
         padding: 4px;
-        
+
         @include breakpoint(lg) {
           margin: auto;
           width: auto;
@@ -153,15 +179,19 @@
         display: grid;
         grid-template-columns: auto 50% auto;
         grid-template-areas: "left middle right";
+
         >* {
           color: var(--color-grey-6);
         }
+
         >[data-id="prev"] {
           grid-area: left;
         }
+
         >[data-id="next"] {
           grid-area: right;
         }
+
         >span {
           grid-area: middle;
         }
@@ -170,6 +200,7 @@
       hubl-menu-publicprivate {
         display: inline-block;
         text-align: center;
+
         div {
           font-family: simple-line-icons;
           width: 20px;
@@ -188,16 +219,16 @@
           color: var(--color-white);
           margin: 1rem 1rem 2.2rem 3.2rem;
         }
-      
+
         &>sib-display {
-          
           &:last-child>div {
             margin-bottom: 2.2rem;
           }
-        
+
           >div {
             color: var(--color-grey-6);
             cursor: pointer;
+
             >hubl-menu-fix-url-circle>sib-display>div,
             >hubl-menu-fix-url-project>sib-display>div {
               padding: 1rem 1rem 1rem 3rem;
@@ -219,54 +250,40 @@
       }
 
       &.menu-notification {
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-circle,
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-project {
+
+        >sib-display>div>sib-display>div>hubl-menu-fix-url-circle,
+        >sib-display>div>sib-display>div>hubl-menu-fix-url-project {
           flex: 1;
         }
-        > sib-display > div > sib-display > div,
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-circle  > sib-display > div,
-        > sib-display > div > sib-display > div > hubl-menu-fix-url-project  > sib-display > div {
-            display: flex;
-            sib-display-div {
-              flex: 3;
 
-              @include breakpoint(lg) {
-                max-width: 150px;
-              }
-            }
-            hubl-counter {
-              height: 20px;
-              width: 20px;
-              margin-right: 1em;
-              div.counter:not([data-nb-unread="0"]) {
-                text-align: center;
-                display: block;
-                background-color: var(--sib-notifications-theme, gray);
-                border-radius: 50%;
-                font-size: 12px;
-                line-height: 20px;
-                width: 20px;
-                height: 20px;
-                padding-bottom: 0;
-                color: var(--color-secondary);
-              }
-            }
+        >sib-display>div>sib-display>div,
+        >sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div,
+        >sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div {
+          display: flex;
+          justify-content: space-between;
+        }
 
-            sib-display-div {
+        hubl-counter {
+          background-color: turquoise;
+          height: 20px;
+          width: 20px;
+          margin-right: 1em;
 
-              @include breakpoint(lg) {
-                max-width: 150px;
-
-                >div[name='name'] {
-                  white-space: nowrap;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-              }
-            }
+          div.counter:not([data-nb-unread="0"]) {
+            text-align: center;
+            display: block;
+            background-color: var(--sib-notifications-theme, gray);
+            border-radius: 50%;
+            font-size: 12px;
+            line-height: 20px;
+            width: 20px;
+            height: 20px;
+            padding-bottom: 0;
+            color: var(--color-secondary);
           }
         }
       }
+    }
 
     .divider {
       height: 1px;
@@ -278,9 +295,7 @@
 
 /* Styles for hovering (only on large screens) */
 #main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-project>sib-display>div:hover,
-#main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div:hover,
-#main__menu sib-router .sub-menu.menu-notification>sib-display.nosub>div>sib-display>div:hover {
-  
+#main__menu sib-router .sub-menu.menu-notification>sib-display>div>sib-display>div>hubl-menu-fix-url-circle>sib-display>div:hover {
   @include breakpoint(lg) {
     background-color: var(--color-secondary);
     color: var(--color-white);
@@ -291,7 +306,6 @@
     box-sizing: border-box;
     font-weight: normal;
 
-
     >hubl-menu-publicprivate {
       display: none;
     }
@@ -302,16 +316,17 @@
 
     /* Hover for projects */
     >sib-set-default[name='project']>.project-customer {
-      width: 250px;
-      white-space: break-spaces;
-      text-align: left;
       font-weight: normal;
+      padding-left: 1rem;
+      text-align: left;
+      width: 150px;
+      white-space: break-spaces;
     }
 
     sib-set-default[name='project']>.project-name {
-      padding-left: 0;
+      padding-left: 1rem;
       width: 100%;
-    
+
       &>div {
         white-space: break-spaces;
         text-align: left;
@@ -320,14 +335,10 @@
 
     /* Hover for circles */
     >sib-display-div[name="name"] {
-      padding-left: 0;
       width: 100%;
-    }
 
-    /* Hover for private messages */
-    sib-display-div {
-
-      >div[name="name"] {
+      &>div {
+        padding-left: 1rem;
         white-space: normal;
       }
     }
@@ -349,4 +360,4 @@ sib-fix-badge {
   text-align: center;
   font-weight: bold;
   padding-bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/src/styles/base/new.scss b/src/styles/base/new.scss
new file mode 100644
index 0000000..e69de29