diff --git a/src/app/pages/components/mail/mail.html b/src/app/pages/components/mail/mail.html
index 0a1593e..605cab0 100644
--- a/src/app/pages/components/mail/mail.html
+++ b/src/app/pages/components/mail/mail.html
@@ -3,8 +3,8 @@
     <div ba-panel ba-panel-class="xmedium-panel mail-panel">
       <div class="letter-layout">
         <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
-          <div class="compose-button">
-            <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
+          <div class="text-center">
+            <button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('','','')">
               Compose
             </button>
           </div>
diff --git a/src/sass/app/_email.scss b/src/sass/app/_email.scss
index cea6864..f8c4709 100644
--- a/src/sass/app/_email.scss
+++ b/src/sass/app/_email.scss
@@ -4,27 +4,34 @@
 }
 
 .mail-panel {
-  &.panel>.panel-body{
+  &.panel > .panel-body {
     padding-left: 0;
   }
 }
 
 .mail-navigation-container {
+  float: left;
+  position: relative;
+  height: 550px;
+  transition: width 0.5s;
   color: $default-text;
   width: 200px;
+  overflow: hidden;
+  padding: 0;
   .mail-navigation {
     cursor: pointer;
     font-weight: $font-light;
     font-size: 16px;
     text-align: left;
     padding: 10px 10px 10px 30px;
+    margin-left: 0;
     transition: 0.8s padding ease;
     .new-mails {
       position: absolute;
       left: 150px;
       padding: 1px 6px;
       border: 1px solid;
-      background-color: $primary-light;
+      background-color: transparent;
       margin-top: -2px;
       font-size: 12px;
       margin-right: 5px;
@@ -32,33 +39,31 @@
       transition: 0.8s left ease;
     }
     &.active {
-      background-color: $primary-light;
+      background: rgba(black, 0.2);
+      color: white;
+      transition: background-color .5s ease;
       &:hover {
-        background-color: $primary-light;
+        background-color: rgba(black, 0.3);
       }
       .new-mails {
-        color: $primary-light;
-        background-color: $default;
+        background-color: transparent;
       }
-      transition: background-color .2s ease, 0.8s padding ease;
     }
     &:hover {
-      background-color: $border-light;
+      background-color: rgba(black, 0.1);
     }
   }
-  .compose-button {
-    margin: 7px 0;
-    .btn {
-      width: 140px;
-      font-weight: $font-light;
-      background-color: $dribble-color;
-    }
+  .btn.compose-button {
+    width: 140px;
+    font-weight: $font-light;
+    border: $border 2px solid;
+    background-color: transparent;
+    margin: 15px 0 ;
   }
 }
 
 .labels {
   margin-top: 14px;
-  margin-left: 22px;
 }
 
 .labels-container {
@@ -73,18 +78,20 @@
 
 .labels-title {
   padding-left: 10px;
-  border-bottom: 1px solid $border-light;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
   .label-header {
     line-height: 24px;
   }
 }
 
 .label-item {
-  margin: 10px 0 0 10px;
+  margin: 5px;
 }
 
 .add-label-container {
-  padding-left: 10px;
+  margin-top: 10px;
+  text-align: center;
   font-size: 16px;
   font-weight: $font-light;
   .label-input-stub {
@@ -109,7 +116,12 @@
 
   .btn {
     background-color: transparent;
-    border: 1px solid $border-light;
+    width: auto;
+    &:focus, &:hover, &:active {
+      color: $default-text;
+      opacity: 0.8;
+      box-shadow: none;
+    }
   }
 
   .more-button {
@@ -118,76 +130,69 @@
     padding: 6px 5px;
   }
 
+  .refresh-button {
+    margin-left: 10px;
+  }
+
   span.select-all-label {
     font-size: 13px;
     font-weight: $font-light;
   }
 }
 
-.message-container, .side-message-navigation, .mail-navigation-container {
+.message-container, .side-message-navigation {
   float: left;
   padding: 0 15px;
   position: relative;
   height: 550px;
   transition: width 0.5s;
+  width: calc(100% - 200px);
+  border-bottom-right-radius: 5px;
+  border-top-right-radius: 5px;
+  border-left: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.12);
 }
 
 .side-message-navigation {
-  padding: 10px 0 0 0;
+  padding: 0;
   width: calc(100% - 200px);
-  box-shadow: -4px 0 7px -2px $input-border;
   .side-message-navigation-item {
-    border-bottom: 1px solid $input-border;
-    &.work {
-      border-left: 4px solid $primary-light;
-    }
-
-    &.study {
-      border-left: 4px solid $google-color;
-    }
-
-    &.family {
-      border-left: 4px solid $warning;
-    }
-
-    &.friend {
-      border-left: 4px solid $danger;
-    }
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   }
 }
 
 .mail-body-part {
+  width: calc(100% - 30px);
   text-overflow: ellipsis;
   height: 16px;
   overflow: hidden;
   margin-top: 3px;
   margin-left: 5px;
+  opacity: .8;
 }
 
 .mail-tag.tag.label {
   display: inline-block;
   font-size: 14px;
   text-transform: uppercase;
-  margin-top: 10px;
   width: 65px;
 }
 
 .phone-email {
   i {
-    color: $primary-dark;
+    color: $default-text;
   }
 }
 
 .message-container {
-  width: calc(100% - 300px);
-  padding: 15px 15px 10px 30px;
-  box-shadow: -4px 0 7px -2px $input-border;
+  padding: 15px 15px 10px 15px;
   overflow-x: hidden;
 }
 
 .little-human {
   cursor: pointer;
   transition: border-left 1.5s ease;
+  font-weight: 300;
   .little-human-picture {
     width: 45px;
     height: 45px;
@@ -205,36 +210,39 @@
   }
   .date {
     float: right;
-    margin-top: 10px;
+    margin: 10px 10px 0 5px;
     display: inline-block;
     font-size: 13px;
-    margin-left: 5px;
-    margin-right: 5px;
     white-space: nowrap;
   }
   .tag {
     vertical-align: super;
   }
   .subject {
-    font-size: 14px;
     white-space: nowrap;
+    margin: 0 30px;
+    font-size: 16px;
   }
   &:hover {
     .little-human-picture {
       animation: rotateReturnAnimation 0.5s;
     }
-    color: $dribble-color;
+    background-color: rgba(255, 255, 255, 0.1);
   }
 }
 
-.name-container{
+.back-button {
+  margin-left: 45px;
+}
+
+.name-container {
   margin-left: 10px;
 }
 
 .mail-checkbox {
   margin-top: 5px;
   margin-left: 6px;
-  .custom-checkbox{
+  .custom-checkbox {
     margin-left: 5px;
   }
 }
@@ -274,11 +282,12 @@
     width: 100%;
   }
 }
+
 @media screen and (min-width: 1199px) {
   .photo-td {
     width: 55px;
   }
-  .check-td{
+  .check-td {
     width: 35px;
   }
 }
@@ -294,13 +303,13 @@
 }
 
 .person-info {
-  padding: 0 0 10px 15px;
+  padding: 0 0 10px 45px;
   margin-top: 10px;
   .human-picture {
     width: 80px;
     height: 80px;
     border-radius: 40px;
-    margin-top: -60px;
+    margin-top: -65px;
   }
 
   .name {
@@ -308,9 +317,13 @@
     margin-left: 10px;
     margin-top: 5px;
     h2 {
+      font-weight: 300;
       margin-bottom: 0;
       font-size: 24px;
     }
+    .second-name {
+      margin: 5px 0;
+    }
   }
 
 }
@@ -365,6 +378,7 @@
 
 .message-details {
   margin: 5px 0;
+  padding: 5px 0 5px 30px;
   .subject {
     font-size: 20px;
     margin-right: 10px;
@@ -386,6 +400,7 @@
 
 .message-body {
   margin: 20px 0;
+  padding-left: 30px;
   font-weight: $font-light;
   line-height: 18px;
   p {
@@ -395,6 +410,7 @@
 
 .attachment {
   margin: 5px 0;
+  padding-left: 30px;
   .file-icon {
     font-size: 24px;
     cursor: pointer;
@@ -452,10 +468,6 @@
   }
 }
 
-.second-name {
-  margin-top: -7px;
-}
-
 @keyframes rotateReturnAnimation {
   0% {
     transform: rotate(0deg);
@@ -468,13 +480,20 @@
   }
 }
 
-
 @media screen and (max-width: 1199px) {
   .name-h {
     display: inline;
   }
-  .person-info .human-picture {
-    margin-top: -30px;
+  .person-info {
+    .human-picture {
+      margin-top: -35px;
+    }
+    .name {
+      margin-top: 20px;
+    }
+    .mail-tag {
+      margin-top: 10px;
+    }
   }
   .second-name {
     margin-top: 0;
@@ -492,8 +511,8 @@
 
   }
 
-  .person-info {
-    padding-left: 0;
+  .person-info, .message-details, .message-body, .attachment {
+    padding-left: 10px;
   }
 
   .message-container {
@@ -522,7 +541,7 @@
 
   .mail-navigation-container {
     width: 175px;
-    .mail-navigation{
+    .mail-navigation {
       padding-left: 19px;
       .new-mails {
         left: 137px;
@@ -570,13 +589,13 @@
         margin-left: 10px;
       }
     }
-    .compose-button .btn {
+    .compose-button {
       width: 110px;
     }
   }
 
-  .mail-messages-control{
-    .custom-checkbox{
+  .mail-messages-control {
+    .custom-checkbox {
       margin-left: 5px;
       margin-top: -2px;
     }
@@ -641,13 +660,13 @@
 
 .modal-compose input.form-control.compose-input {
   background-color: transparent;
-  border-bottom: 1px solid rgba(0,0,0,.2);
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
   border-radius: 0;
 }
 
 .compose-footer {
   padding: 2px 4px;
-  background-color: whitesmoke;
+  background-color: $input-border;
   .btn-send {
     background-color: $primary-light;
     color: white;
@@ -670,18 +689,18 @@
   font-size: 18px;
   margin-right: 5px;
   cursor: pointer;
-  color: $help-text;
+  color: $dropdown-text;
   &:hover {
     color: $primary-light;
   }
 }
 
 .compose-container {
-  background-color: whitesmoke;
+  background-color: $input-border;
   .ta-text.ta-editor {
-    background-color: white;
-    div{
-      &:focus{
+    background-color: $input-border;
+    div {
+      &:focus {
         outline: none;
       }
     }
@@ -699,20 +718,20 @@
   display: none;
   vertical-align: middle;
   margin-left: -1px;
-  &.detail-page{
+  &.detail-page {
     margin-left: 10px;
   }
 }
 
 .collapse-navigation-link {
   font-size: 32px;
-  color: $default;
-  &:hover{
-    color: $default;
-    opacity: .8;
+  color: $default-text;
+  &:visited {
+    color: $default-text;
   }
-  &:visited{
-    color: $default;
+  &:hover {
+    color: $warning;
+    opacity: .8;
   }
 
 }
@@ -729,15 +748,15 @@
   max-height: 474px;
 
   .form-control, .bootstrap-tagsinput input {
-    @include placeholderStyle($default-text, 1);
-    color: $default-text;
+    @include placeholderStyle($dropdown-text, 1);
+    color: $dropdown-text;
     border-radius: 0;
   }
   .ta-toolbar {
     .btn {
       border-width: 1px;
       border-radius: 0;
-      color: $default-text;
+      color: $dropdown-text;
       border-color: transparent;
       &.active {
         box-shadow: none;
@@ -745,275 +764,11 @@
       }
     }
   }
-  @include overrideColors($default-text)
+  @include overrideColors($dropdown-text)
 }
 
 @media (max-width: 640px) {
   .modal .modal-dialog.modal-compose {
     max-height: 600px;
   }
-}
-
-.mail-client-container.transparent {
-  .mail-navigation-container {
-    overflow: hidden;
-    width: 200px;
-    padding: 0;
-    .mail-navigation {
-      margin-left: 0;
-      .new-mails {
-        background-color: transparent;
-      }
-      &.active {
-        background: rgba(white, 0.2);
-        color: white;
-        transition: background-color .5s ease;
-        .new-mails {
-          background-color: transparent;
-          color: $default-text;
-        }
-        &:hover {
-          background-color: rgba(white, 0.3);
-        }
-      }
-      &:hover {
-        background-color: rgba(black, 0.1);
-      }
-    }
-  }
-
-  .message-container, .side-message-navigation{
-    width: calc(100% - 200px);
-    border-bottom-right-radius: 5px;
-    border-top-right-radius: 5px;
-    border-left: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
-  }
-
-  .side-message-navigation {
-    overflow: hidden;
-    padding: 0;
-  }
-
-  .labels, .add-label-container {
-    margin-left: 0;
-  }
-
-  .add-label-container {
-    margin-top: 10px;
-    text-align: center;
-  }
-
-  .labels-title {
-    text-align: center;
-    .label-header {
-      width: 100%;
-      margin-bottom: 5px;
-    }
-    padding-left: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
-  }
-
-  .compose-button {
-    text-align: center;
-    .btn {
-      border: $default-text 2px solid;
-      background-color: transparent;
-    }
-  }
-
-  .side-message-navigation .side-message-navigation-item {
-    border-bottom: 1px solid rgba($border, 0.2);
-    &.work, &.study, &.family, &.friend {
-      border-left: none;
-    }
-  }
-
-  .mail-messages-control {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.12);
-    padding-right: 0;
-    .btn {
-      border: none;
-      width: auto;
-      &:focus, &:hover {
-        color:$default-text;
-        opacity: 0.8;
-        box-shadow: none;
-      }
-    }
-    .refresh-button{
-      margin-left: 10px;
-    }
-  }
-
-  .little-human {
-    font-weight: $font-light;
-    transition: background-color .5s;
-    &:hover {
-      color: $default-text;
-      background-color: rgba(black, 0.05);
-    }
-    .subject {
-      font-weight: $font-light;
-      margin: 0 30px;
-      font-size: 16px;
-    }
-    .date {
-      margin-right: 10px;
-    }
-  }
-
-  .mail-body-part {
-    width: calc(100% - 50px);
-    opacity: 0.8;
-  }
-
-  .name-h {
-    font-weight: $font-light;
-    &.second-name {
-      margin: 5px 0;
-    }
-  }
-
-  .person-info .human-picture {
-    margin-top: -65px;
-  }
-
-  .mail-tag.tag.label {
-    margin-top: 0;
-  }
-
-  .back-button {
-    margin-left: 45px;
-  }
-
-  .phone-email i {
-    color: $default;
-  }
-
-  .message-details {
-    padding: 5px 0 5px 30px;
-  }
-
-  .message-body, .attachment {
-    padding-left: 30px;
-  }
-
-  .person-info {
-    padding-left: 45px;
-  }
-
-  @media screen and (max-width: 1199px) {
-    .person-info {
-      .human-picture {
-        margin-top: -35px;
-      }
-      .name {
-        margin-top: 20px;
-      }
-    }
-    .mail-tag.tag.label {
-      margin-top: 10px;
-    }
-  }
-
-  @media screen and (max-width: 990px) {
-    .person-info {
-      .human-picture {
-        margin-top: 5px;
-      }
-    }
-
-    .back-button {
-      margin-left: 10px;
-    }
-
-    .message-details {
-      padding: 5px 0 5px 0;
-    }
-
-    .message-body, .attachment {
-      padding-left: 0;
-    }
-
-    .person-info {
-      padding-left: 0;
-    }
-
-  }
-
-  @media screen and (max-width: 760px) {
-
-    .mail-navigation-container {
-      width: 175px
-    }
-
-    .side-message-navigation {
-      width: calc(100% - 175px);
-    }
-
-    .message-container {
-      width: calc(100% - 175px);
-    }
-  }
-
-  @media screen and (max-width: 560px) {
-    .mail-navigation-container {
-      width: 0;
-      &.expanded {
-        width: 155px;
-      }
-      .mail-navigation {
-        font-size: 14px;
-        .new-mails {
-          padding: 0 5px;
-          margin-top: 0;
-          font-size: 12px;
-        }
-        .labels {
-          margin-left: 10px;
-        }
-      }
-      .compose-button .btn {
-        width: 110px;
-      }
-    }
-
-    .mail-messages-control{
-      .custom-checkbox{
-        margin-left: 5px;
-        margin-top: -2px;
-      }
-    }
-
-    .side-message-navigation, .message-container {
-      &.expanded {
-        width: 100%;
-        border: none;
-        box-shadow: none;
-      }
-      width: calc(100% - 155px);
-    }
-
-    .toggle-navigation-container {
-      display: inline-block;
-    }
-
-    .little-human {
-      .name {
-        white-space: inherit;
-      }
-      .little-human-picture {
-        display: none;
-      }
-    }
-
-    .add-label-container {
-      padding-left: 0;
-      font-size: 13px;
-      font-weight: $font-light;
-    }
-  }
-}
+}
\ No newline at end of file