diff --git a/app/views/styles/theme-grid/theme-grid.scss b/app/views/styles/theme-grid/theme-grid.scss
index 43be69784..51114501d 100644
--- a/app/views/styles/theme-grid/theme-grid.scss
+++ b/app/views/styles/theme-grid/theme-grid.scss
@@ -46,6 +46,8 @@ $border-color: #eeeeee;
 $border-color-dark: #cccccc;
 $body-bg: #ffffff;
 $text-color: #4e514e;
+$offline-red: #A30000;
+$offline-red-hover: #AD0000;
 
 $checkbox-size: 17px;
 $base-unit: 20px;
@@ -537,7 +539,35 @@ i.icon.icon-minus{
   width: 95px;
   }
 }
-
+// offline mode
+.offline-enabled{
+	margin-top: $base-unit + 10;
+}
+.offline-enabled__queue-length{
+  background-color: $offline-red;
+	color: $body-bg;
+	font-weight: bold;
+}
+.offline-enabled__queue-length:hover{
+  backgrond-color: $offline-red-hover;
+  color: $body-bg;
+}
 .offline-enabled__icon{
-  margin-top: $base-unit + 10;
+ background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MDAgNTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzhDMDAwMDtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9Cgkuc3Qxe2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQoJLnN0MntmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjIwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDt9Cgkuc3Qze2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MTU7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO30KPC9zdHlsZT4KPHJlY3QgeD0iLTAuNSIgeT0iMC41IiBjbGFzcz0ic3QwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIvPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yMjYuOCwxNTguOGMwLTM5LjEtMzEuNy03MC44LTcwLjgtNzAuOHMtNzAuOCwzMS43LTcwLjgsNzAuOHMzMS43LDcwLjgsNzAuOCw3MC44UzIyNi44LDE5Ny44LDIyNi44LDE1OC44eiIKCQkvPgoJPHBvbHlsaW5lIGNsYXNzPSJzdDIiIHBvaW50cz0iMTkxLjQsMTI5LjMgMTQxLjgsMTg4LjMgMTIwLjYsMTY0LjcgCSIvPgo8L2c+CjxnPgoJPHJlY3QgeD0iMzU1LjMiIHk9IjIxOCIgY2xhc3M9InN0MyIgd2lkdGg9IjUzLjciIGhlaWdodD0iMjIwLjkiLz4KCTxyZWN0IHg9IjI2OS43IiB5PSIyNjkuOCIgY2xhc3M9InN0MyIgd2lkdGg9IjUzLjciIGhlaWdodD0iMTY5LjEiLz4KCTxyZWN0IHg9IjE4NC4xIiB5PSIzMjUuNCIgY2xhc3M9InN0MyIgd2lkdGg9IjUzLjciIGhlaWdodD0iMTEzLjYiLz4KCTxyZWN0IHg9Ijk4LjUiIHk9IjM2Mi4zIiBjbGFzcz0ic3QzIiB3aWR0aD0iNTMuNyIgaGVpZ2h0PSI3Ni42Ii8+CjwvZz4KPC9zdmc+Cg==") !important;
+  background-size: $extend $extend;
+}
+.side-slider__toggle.open{
+	width: 0px;
+  height: 0px;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-left: 10px solid $theme-green;
+  border-right: 1px solid transparent;
+  outline:none;
+  &:hover{
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid $text-color;
+    border-right: 1px solid transparent;
+  }
 }