diff --git a/core/css/apps.scss b/core/css/apps.scss
index ad969630bbe17..07557a03acc59 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -215,7 +215,7 @@ kbd {
 				> a,
 				> .app-navigation-entry-bullet {
 					/* hide icon or bullet if loading state*/
-					background: none !important;
+					background: transparent !important;
 				}
 			}
 			/* Main entry link */
@@ -263,6 +263,12 @@ kbd {
 				border: none;
 				border-radius: 50%;
 				cursor: pointer;
+				transition: background 100ms ease-in-out;
+
+				+ a {
+					/* hide icon if bullet, can't have both */
+					background: transparent !important;
+				}
 			}
 
 			/* popover fix the flex positionning of the li parent */
@@ -319,7 +325,7 @@ kbd {
 			margin: 0;
 			z-index: 110;
 		}
-		&:after {
+		&:before {
 			position: absolute;
 			height: 44px;
 			width: 44px;
@@ -339,13 +345,14 @@ kbd {
 			-webkit-transform: rotate(-90deg);
 			-ms-transform: rotate(-90deg);
 			transform: rotate(-90deg);
+			z-index: 50;
 		}
 
 		/* force padding on link no matter if 'a' has an icon class */
 		> a:first-child {
 			padding-left: 44px;
 		}
-		&:after,
+		&:before,
 		> a {
 			transition: background 100ms ease-in-out,
 						transform 250ms ease-in-out,
@@ -357,12 +364,15 @@ kbd {
 		}
 		&:hover,
 		&:focus {
-			&:after {
+			&:before {
 				opacity: 1;
 			}
+			.app-navigation-entry-bullet {
+				background: transparent !important;
+			}
 		}
 		&.open {
-			&:after {
+			&:before {
 				-webkit-transform: rotate(0);
 				-ms-transform: rotate(0);
 				transform: rotate(0);