diff --git a/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss b/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss
index 7f49c0af1c..a64f197f32 100644
--- a/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss
+++ b/resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss
@@ -1,30 +1,34 @@
 $iconsPath: '../../../assets/common/images/icons/';
-
-ul.image_set{
-  padding:0;
-  margin:0;
-  border:none;
-  width:100%;
-  border:none;
+$feedbackColor : #8bc34a;
+$basketColor : #2196f3 ;
+ul.image_set {
+  padding: 0;
+  margin: 0;
+  border: none;
+  width: 100%;
+  border: none;
   list-style-type: none;
   display: flex;
   flex-wrap: wrap;
 }
-li.image_box a img{
-  position:relative;
-  border:none;
-  width: auto!important;
-  height: 100%  !important;
+
+li.image_box a img {
+  position: relative;
+  border: none;
+  width: auto !important;
+  height: 100% !important;
   top: 0 !important;
   object-fit: contain;
 }
-li.image_box a{
-  padding:0;
-  text-shadow:0;
-  margin:0;
+
+li.image_box a {
+  padding: 0;
+  text-shadow: 0;
+  margin: 0;
   width: 100%;
 }
-li.image_box{
+
+li.image_box {
   width: 18%;
   position: relative;
   margin: 0 2.5% 15px 0;
@@ -38,19 +42,20 @@ li.image_box{
   }
   .thumb_wrapper {
     background: #ededed;
-    width: 100%!important;
-    height: 160px!important;
+    width: 100% !important;
+    height: 160px !important;
     @media screen and (max-width: 767px) {
-      height: 130px  !important;
+      height: 130px !important;
     }
   }
 }
+
 @media screen and (max-width: 767px) {
-  li.image_box{
+  li.image_box {
     width: 32%;
     margin: 0 2% 15px 0;
     &:nth-child(5n) {
-      margin-right: 2% ;
+      margin-right: 2%;
     }
     &:nth-child(3n) {
       margin-right: 0;
@@ -58,35 +63,37 @@ li.image_box{
   }
 }
 
-a.no.active_choice{
-  background-color:red;
+a.no.active_choice {
+  background-color: red;
   color: #fff;
 }
-a.active_choice{
+
+a.active_choice {
   background-color: #53b401;
   color: #fff;
 }
 
-.valid_choice{
-  position:absolute;
-  bottom:0;
-  right:0;
-  width:16px;
-  height:16px;
-  z-index:2;
+.valid_choice {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  z-index: 2;
 }
 
-.valid_choice.agree{
+.valid_choice.agree {
   background: #7ed321;
   border-top-left-radius: 100px;
 }
-.valid_choice.disagree{
+
+.valid_choice.disagree {
   background: #d0021b;
   border-top-left-radius: 100px;
 }
 
 .thumb_wrapper {
-  text-align:center;
+  text-align: center;
 }
 
 @media screen and (orientation: landscape) {
@@ -109,21 +116,120 @@ a.active_choice{
   font-size: 18px;
 }
 
-
-.ui-listview .ui-li-has-thumb .ui-li-thumb, .ui-listview .ui-li-has-thumb>.ui-btn>img:first-child, .ui-listview .ui-li-has-thumb>img:first-child {
+.ui-listview .ui-li-has-thumb .ui-li-thumb, .ui-listview .ui-li-has-thumb > .ui-btn > img:first-child, .ui-listview .ui-li-has-thumb > img:first-child {
   top: 50%;
   transform: translateY(-50%);
 }
 
 /*user status*/
 .menu-bar-item {
-  background: #000;
-  padding: 12px;
-  text-align: center;
-  a {
-    color: #fff!important;
-    text-decoration: none!important;
-    font-weight: normal;
+  background: #f0f0f0;
+  padding: 12px 15px;
+  text-align: left;
+  position: relative;
+  .icomoon {
+    font-size: 17px;
+    position: absolute;
+    left: 23px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  .ui-link {
+    color: #4f4f4f !important;
+    text-decoration: none !important;
+    .text {
+      padding-left: 31px;
+      color: #4f4f4f !important;
+      text-decoration: none !important;
+      font-weight: 700;
+      font-size: 13px;
+    }
   }
 }
 
+/*new design of lightbox*/
+/*main nav */
+#lightbox-menu {
+  li {
+    margin-bottom: 30px;
+    .ui-li-count {
+      border-radius: 3px !important;
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+      border: 0;
+      color: #fff;
+      text-shadow: none;
+      padding: 18px 23px;
+      top: 0;
+      right: 0;
+      margin: 0;
+      font-size: 22px;
+      min-width: 25px;
+      background: $feedbackColor;
+    }
+    &.ui-first-child {
+      margin-top: 15px;
+    }
+    &.ui-last-child {
+      a {
+        &:before {
+          background: $basketColor;
+        }
+        &:hover, &:active, &:focus {
+          color: $basketColor;
+        }
+      }
+      .ui-li-count {
+        background: $basketColor;
+      }
+    }
+
+  }
+  a {
+    padding: 22px 25px;
+    font-size: 20px;
+    border-radius: 3px !important;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.19);
+    background-color: #eeeeee;
+    &:hover, &:active, &:focus {
+      color: $feedbackColor;
+    }
+    &:after {
+      content: none !important;
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 4px;
+      bottom: 0;
+      background: $feedbackColor;
+      left: 0;
+      border-radius: 3px;
+    }
+  }
+}
+
+.lightbox-bottom-btn {
+  margin-top: 50px;
+  .ui-btn {
+    font-size: 15px;
+  }
+}
+#validation, #basket {
+  .ui-content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+.basket-title {
+  background: $feedbackColor;
+  padding: 12px 30px;
+  font-size: 17px;
+  margin: 0;
+  text-shadow: none;
+  color: #fff;
+  font-weight: 700;
+}
+
diff --git a/templates/mobile/common/menubar.html.twig b/templates/mobile/common/menubar.html.twig
index 03a41053f7..d8190dd5fa 100644
--- a/templates/mobile/common/menubar.html.twig
+++ b/templates/mobile/common/menubar.html.twig
@@ -3,13 +3,13 @@
 {% if app.getAuthenticator().isAuthenticated() %}
     <div class="menu-bar-item">
         {% if app.getAuthenticatedUser().isGuest %}
-            <span class="icomoon icon-agree">&#xe957;</span>
-            <span>{{ 'Guest' | trans }}</span>
+            <span class="icomoon icon-agree">&#xe950;</span>
+            <span class="text">{{ 'Guest' | trans }}</span>
         {% else %}
             <a target="_blank" href="{{ path('account') }}"
                title="{{ 'login:: Mon compte' | trans }}">
-                <span class="icomoon icon-agree">&#xe957;</span>
-                <span>{{ app.getAuthenticatedUser().getDisplayName() }}</span>
+                <span class="icomoon icon-agree">&#xe950;</span>
+                <span class="text">{{ app.getAuthenticatedUser().getDisplayName() }}</span>
             </a>
         {% endif %}
     </div>
diff --git a/templates/mobile/lightbox/index.html.twig b/templates/mobile/lightbox/index.html.twig
index a270116c9c..418df10caa 100644
--- a/templates/mobile/lightbox/index.html.twig
+++ b/templates/mobile/lightbox/index.html.twig
@@ -44,17 +44,17 @@
         {% include 'common/menubar.html.twig' %}
     </div>
     <div data-role="content">
-    <ul data-role="listview" style="width:100%;margin: 0;">
-      <li>
+    <ul id="lightbox-menu" data-role="listview" style="width:100%;margin: 0;">
+      <li class="lightbox-item">
         <a href="#validation">{{ 'Validations' | trans }}</a>
         <span class="ui-li-count">{{_self.valid_baskets_length(baskets_collection)}}</span>
       </li>
-      <li>
+        <li class="lightbox-item">
         <a href="#baskets">{{ 'Paniers' | trans }}</a>
         <span class="ui-li-count">{{_self.baskets_length(baskets_collection)}}</span>
       </li>
     </ul>
-    <div style="margin:2em 0 0 0">
+    <div class="lightbox-bottom-btn">
       <a href="{{ path ('logout') }}" data-role="button" rel="external">{{ 'Deconnexion' | trans }}</a>
     </div>
   </div>
@@ -89,15 +89,19 @@
 <div id="validation" data-role="page">
     <div data-role="header">
         <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
-     <h1>{{ 'Validations' | trans }}</h1>
+     <h1>{{ module_name }}</h1>
   </div>
     <div class="lightbox-user-info">
         {% include 'common/menubar.html.twig' %}
     </div>
     <div data-role="content">
-    <p>
-      {{ 'Voici vos validations en cours' | trans }}
-    </p>
+      <p class="basket-title">
+        {{ 'Validations' | trans }}
+        <span>{{_self.valid_baskets_length(baskets_collection)}}</span>
+      </p>
+      <p>
+        {{ 'Voici vos validations en cours' | trans }}
+      </p>
     <ul data-role="listview"  style="width:100%;margin: 0;">
             {% for basket in baskets_collection | sort | reverse%}
               {% if basket.getValidation() %}
@@ -122,12 +126,16 @@
 <div id="baskets" data-role="page">
     <div data-role="header">
         <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
-     <h1>{{ 'Paniers' | trans }}</h1>
+        <h1>{{module_name}}</h1>
   </div>
     <div class="lightbox-user-info">
         {% include 'common/menubar.html.twig' %}
     </div>
     <div data-role="content">
+    <p class="basket-title">
+        {{ 'Paniers' | trans }}
+        <span>{{_self.baskets_length(baskets_collection)}}</span>
+    </p>
     <p>
       {{ 'Voici vos paniers' | trans }}
     </p>