diff --git a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/manage/tile-badge.html.twig b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/manage/tile-badge.html.twig
index 5ce3b180c6..635a3e9d0f 100644
--- a/datamodels/2.x/itop-portal-base/portal/src/views/bricks/manage/tile-badge.html.twig
+++ b/datamodels/2.x/itop-portal-base/portal/src/views/bricks/manage/tile-badge.html.twig
@@ -6,23 +6,25 @@
         <a href="{{ app.url_generator.generate('p_manage_brick', {'sBrickId': sBrickId, 'sDisplayType': oBrick.GetDisplayType}) }}{% if app['combodo.portal.instance.routes'][oBrick.GetRouteName]['hash'] is defined %}#{{ app['combodo.portal.instance.routes'][oBrick.GetRouteName]['hash'] }}{% endif %}"
         {% if app['combodo.portal.instance.routes'][oBrick.GetRouteName]['navigation_menu_attr'] is defined %}{% for key, value in app['combodo.portal.instance.routes'][oBrick.GetRouteName]['navigation_menu_attr'] %} {{ key }}="{{ value }}"{% endfor %}{% endif %}
         {% if oBrick.GetModal %}data-toggle="modal" data-target="#modal-for-all"{% endif %}
-        class="tile{# vertical-center#}"
-        id="brick-{{ oBrick.GetId }}"
-        data-brick-id="{{ oBrick.GetId }}">
-        <div>
-            <div class="tile_decoration">{% if oBrick.GetDecorationClassHome %}<span
-                    class="icon {{ oBrick.GetDecorationClassHome }}"></span>{% else %}<img src="{{ sIconURL }}"
-                                                                                           style="vertical-align:middle;"
-                                                                                           alt="Class Icon">{% endif %}
-            </div>
-            <div class="tile_body">
+                class="tile{# vertical-center#}"
+                id="brick-{{ oBrick.GetId }}"
+                data-brick-id="{{ oBrick.GetId }}">
+            <div>
                 <div>
-                    <div class="tile_title">{{ iCount }}</div>
-                    <div class="tile_description">{{ oBrick.GetTitle()|dict_s }}</div>
+                    <div class="tile_decoration">{% if oBrick.GetDecorationClassHome %}<span
+                            class="icon {{ oBrick.GetDecorationClassHome }}"></span>{% else %}<img src="{{ sIconURL }}"
+                                                                                                   style="vertical-align:middle;"
+                                                                                                   alt="Class Icon">{% endif %}
+                    </div>
+                    <div class="tile_body">
+                        <div>
+                            <div class="tile_title">{{ iCount }}</div>
+                            <div class="tile_description">{{ oBrick.GetTitle()|dict_s }}</div>
+                        </div>
+                    </div>
                 </div>
-                <div class="tile_description"><p>{{ oBrick.GetDescription|dict_s|raw }}</p></div>
             </div>
-        </div>
+            <div class="tile_description">{{ oBrick.GetDescription|dict_s|raw }}</div>
         </a>
     {% endblock %}
 </div>
\ No newline at end of file
diff --git a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
index 9c4625f392..372713845f 100644
--- a/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
+++ b/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
@@ -144,12 +144,12 @@ footer{
 		text-align: center;
 	}
 	#sidebar .logo img{
-	width: 40%;
-	max-width: 100%;
-}
+		width: 40%;
+		max-width: 100%;
+	}
 }
 @media (min-width: 992px){
-	
+
 }
 /* Warning : Not a offical BS breakpoint */
 @media (min-width: 1600px){
@@ -172,14 +172,14 @@ footer{
 /* Overlays*/
 .global_overlay{
 	z-index: 9999;
-    display: none;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    background-color: black;
-    opacity: 0.5;
+	display: none;
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	background-color: black;
+	opacity: 0.5;
 }
 #page_overlay .overlay_content{
 	margin-top: 20em;
@@ -220,15 +220,15 @@ footer{
 	display: -moz-box;
 	display: -ms-flexbox;
 	display: -webkit-flex;
-	display: flex; 
-  
+	display: flex;
+
 	/* Align the bootstrap's container vertically */
 	-webkit-box-align : center;
 	-webkit-align-items : center;
 	-moz-box-align : center;
 	-ms-flex-align : center;
 	align-items : center;
-  
+
 	/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
 	hence the bootstrap's container won't be aligned to the center anymore.
   
@@ -337,10 +337,10 @@ footer{
 	padding: 0em 1em;
 	min-height: 4em;
 	background-color: $white;
-    background-image: none;
-    border: none;
+	background-image: none;
+	border: none;
 	border-radius: 0px;
-    text-align: center;
+	text-align: center;
 	text-decoration: none;
 	white-space: normal;
 	line-height: 4em;
@@ -365,54 +365,70 @@ footer{
 	color: #555555;
 }
 
+
+
 .home div.tile-badge > a.tile {
-	display: table;
-	width: 100%;
-	padding: 12% 15% 5%;
+	padding: 0;
+	margin: 0;
+	margin-bottom: 25px;
+	height: 12em;
+	min-height: unset;
 }
 
 .home div.tile-badge > a.tile > div {
-	display: table-row;
+	padding: 12% 10% 0;
+}
+
+.home div.tile-badge > a.tile > div {
+	display: table;
+	width: 100%;
 }
 
 .home div.tile-badge > a.tile > div > div {
+	display: table-row;
+}
+
+.home div.tile-badge > a.tile > div > div > div {
 	display: table-cell;
 }
 
-.home div.tile-badge > a.tile > div > div.tile_decoration {
-	text-align: center;
+.home div.tile-badge > a.tile > div > div > div.tile_decoration {
+	text-align: left;
 	vertical-align: top;
 	position: inherit;
 	float: inherit;
 }
 
-.home div.tile-badge > a.tile > div > div.tile_body {
+.home div.tile-badge > a.tile > div > div > div.tile_body {
 	text-align: right;
 	padding-left: 0;
 }
 
-.home div.tile-badge > a.tile > div > div.tile_body > div:first-child {
-	text-align: center;
+.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child {
 	margin: 0 auto;
 	margin-left: 10%;
 }
 
-.home div.tile-badge > a.tile > div > div.tile_body > div:first-child > div {
-	text-align: center;
-}
-
-.home div.tile-badge > a.tile > div > div.tile_body > div:first-child > div.tile_description {
+.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_description {
 	margin-bottom: 1.5em;
+	text-align: right;
 }
 
-.home div.tile-badge > a.tile > div > div.tile_body > div:first-child > div.tile_title {
+.home div.tile-badge > a.tile > div > div > div.tile_body > div:first-child > div.tile_title {
 	font-size: 4.5em;
 	font-weight: normal;
 	margin-bottom: 0.5em;
 }
 
-.home div.tile-badge > a.tile > div > div.tile_body > div.tile_description {
-	text-align: right;
+.home div.tile-badge > a.tile > div.tile_description {
+	display: block;
+	padding: 0 5%;
+	font-size: 1em;
+	font-style: italic;
+	text-align: center;
+	line-height: normal;
+	height: 2em; /* needed even if height is defined on a.tile :/ */
+	overflow: hidden;
 }
 
 .home div.tile-chart > a > div {
@@ -561,7 +577,7 @@ footer{
 /***********************/
 /* Home tile */
 .home .tile.tile_communication{
-    padding: 20px;
+	padding: 20px;
 	background-color: #EDEDED;
 	border: none;
 	font-weight: initial;
@@ -578,15 +594,15 @@ footer{
 #user-profile-wrapper .user_profile_picture .content_loader{
 	position: absolute;
 	z-index: 1;
-    top: 0;
-    left: 0;
-    padding-top: 4em;
-    width: 100%;
-    height: 100%;
+	top: 0;
+	left: 0;
+	padding-top: 4em;
+	width: 100%;
+	height: 100%;
 	text-align: center;
 	color: white;
-    background-color: black;
-    opacity: 0.5;
+	background-color: black;
+	opacity: 0.5;
 }
 #user-profile-wrapper .user_profile_picture .preview{
 	display: inline-block;
@@ -724,9 +740,9 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 
 #brick_content_empty{
 	display: none;
-    padding: 40px;
+	padding: 40px;
 	font-size: 1.3em;
-    font-style: italic;
+	font-style: italic;
 }
 
 /* Loader */
@@ -752,7 +768,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 /*   eg. .mosaic-item-layout-5 when just name and image         */
 /****************************************************************/
 #brick_content_mosaic{
-  	position: relative;
+	position: relative;
 	padding: 10px 10px 1px 10px;
 }
 /* Breadcrumb */
@@ -822,12 +838,12 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	right: 5px;
 }
 .mosaic-group-item-actions > a{
-  color: $white;
-  text-decoration: none;
+	color: $white;
+	text-decoration: none;
 }
 .mosaic-group-item-actions > a:hover,
 .mosaic-group-item-actions > a:focus{
-  color: #EEEEEE;
+	color: #EEEEEE;
 }
 
 @media (max-width: 768px) {
@@ -899,6 +915,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	}
 	.mosaic-item-description{
 		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	/* Layout 1 */
 	.mosaic-item-layout-1 .mosaic-item-name{
@@ -1046,12 +1063,12 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 .caselog_field_entry_button{
 	display: block;
 	width: 15px;
-    height: 15px;
-    text-align: center;
+	height: 15px;
+	text-align: center;
 	line-height: 15px;
 	font-size: 16px;
-    border: 1px solid #a6a6a6;
-    border-bottom-color: #979797;
+	border: 1px solid #a6a6a6;
+	border-bottom-color: #979797;
 	cursor: pointer;
 }
 .caselog_field_entry_button:hover{
@@ -1155,8 +1172,8 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 }
 #drag_overlay .overlay_content{
 	margin-top: 5em;
-    width: 100%;
-    color: white;
+	width: 100%;
+	color: white;
 }
 #drag_overlay .overlay_content .icon{
 	font-size: 3em;
@@ -1296,7 +1313,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 
 /* CKEditor : Adding BS error feedback */
 .form_field div.cke{
-    border: 1px solid $gray-lighter;
+	border: 1px solid $gray-lighter;
 }
 .form_field.has-error div.cke{
 	border: 1px solid $state-danger-text;
@@ -1305,11 +1322,11 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 }
 /* CKEditor : Styling notifications based on BS alerts */
 .cke_notification{
-    position: relative;
+	position: relative;
 	padding: 15px;
-    margin-bottom: 18px;
-    border: 1px solid transparent;
-    border-radius: 4px;
+	margin-bottom: 18px;
+	border: 1px solid transparent;
+	border-radius: 4px;
 	background-color: $white
 }
 .cke_notification_close{
@@ -1325,13 +1342,13 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 .cke_notification_success{
 	display: none;
 	background-color: $alert-success-bg;
-    border-color: $alert-success-border;
-    color: $alert-success-text;
+	border-color: $alert-success-border;
+	color: $alert-success-text;
 }
 .cke_notification_warning{
-    background-color: $alert-warning-bg;
-    border-color: $alert-warning-border;
-    color: $alert-warning-text;
+	background-color: $alert-warning-bg;
+	border-color: $alert-warning-border;
+	color: $alert-warning-text;
 }
 /* CKEditor : Misc */
 .cke_toolbox_collapser,