diff --git a/package-lock.json b/package-lock.json
index 9982643be46c2932dcc5078c5bc5dc4afdf32dd8..1771eefa0cbd4bf141548aba5744f8d16f6b6f71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@startinblox/hubl-styling-framework": "^1.0.27",
+        "@startinblox/hubl-styling-framework": "^1.0.30",
         "fs-extra": "^9.0.1",
         "normalize.css": "^8.0.1",
         "parcel-bundler": "^1.12.4",
@@ -1442,9 +1442,9 @@
       }
     },
     "node_modules/@startinblox/hubl-styling-framework": {
-      "version": "1.0.27",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.27.tgz",
-      "integrity": "sha512-5lnGDuYPK6q8eXgo6xwWP9VS9ZDYZDiRAGXM1ZcS7M0vW9/aIhmCtKDTi8LYRp9BflgLky6+mInzWsDolS9cXw=="
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.30.tgz",
+      "integrity": "sha512-VgAy7Y2GK3jZnaiE5F29IuBVk85tQvGPhEz1wpAz/yBPutU/cefXwvLE3JLgX0VAZLtJifoetfzbshMdc9OR0w=="
     },
     "node_modules/@types/q": {
       "version": "1.5.4",
@@ -10603,9 +10603,9 @@
       }
     },
     "@startinblox/hubl-styling-framework": {
-      "version": "1.0.27",
-      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.27.tgz",
-      "integrity": "sha512-5lnGDuYPK6q8eXgo6xwWP9VS9ZDYZDiRAGXM1ZcS7M0vW9/aIhmCtKDTi8LYRp9BflgLky6+mInzWsDolS9cXw=="
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.30.tgz",
+      "integrity": "sha512-VgAy7Y2GK3jZnaiE5F29IuBVk85tQvGPhEz1wpAz/yBPutU/cefXwvLE3JLgX0VAZLtJifoetfzbshMdc9OR0w=="
     },
     "@types/q": {
       "version": "1.5.4",
diff --git a/package.json b/package.json
index b12aa0363589a5adba9f1fa92c62da49ede6b4b9..e48891ed74417c9935ffc10e01195604e98ad9c0 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@startinblox/hubl-styling-framework": "^1.0.27",
+    "@startinblox/hubl-styling-framework": "^1.0.30",
     "fs-extra": "^9.0.1",
     "normalize.css": "^8.0.1",
     "parcel-bundler": "^1.12.4",
diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug
index 65c947641240657855d208635c5a8592f9b2a141..4181723add76ad0706e50fb7512291982430357a 100644
--- a/src/views/partials/menu-left.pug
+++ b/src/views/partials/menu-left.pug
@@ -35,10 +35,15 @@ solid-widget(name='hubl-create')
 
 solid-widget(name='hubl-menu-fix-url-contact')
   template
-    solid-link(data-src="${value}" next="messages")
-      solid-display(
+    solid-link.segment.lg-full(data-src="${value}" next="messages")
+      solid-display.segment.lg-full.text-color-white.heading-active.bg-color-heading.hover.active(
         data-src='${value}'
-        fields='name, chatProfile.jabberID, badge'
+        fields='segment(message(name, chatProfile.jabberID), badge)'
+        
+        class-segment="segment lg-full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium"
+        class-message='segment lg-three-quarter sub-menu-name'
+        class-badge='segment badge'
+
         value-badge='${value}'
         widget-badge='hubl-counter'
         widget-chatProfile.jabberID='hubl-menu-jabberid'
@@ -209,7 +214,7 @@ solid-router#navbar-router(default-route='dashboard')
         //- search-label-contact.name=""
         //- data-trans="search-label-contact.name=menuLeft.search"
         //- search-widget-contact.name="hubl-search-users"
-      solid-display.message-tab.segment.lg-full(
+      solid-display.segment.lg-full.whitespace-normal(
         bind-user
         nested-field='contacts'
         fields='contact'