diff --git a/src/app/pages/mail/MailTabCtrl.js b/src/app/pages/mail/MailTabCtrl.js
index 682859c..e46b6ae 100644
--- a/src/app/pages/mail/MailTabCtrl.js
+++ b/src/app/pages/mail/MailTabCtrl.js
@@ -9,17 +9,11 @@
       .controller('MailTabCtrl', MailTabCtrl);
 
   /** @ngInject */
-  function MailTabCtrl($scope, $state, $stateParams, composeModal, mailMessages) {
+  function MailTabCtrl(composeModal, mailMessages) {
 
-    $scope.selectTab = function (tab) {
-      $state.go('mail.label',{
-        label : tab
-      })
-    };
+    var vm = this;
 
-    console.log($state);
-
-    $scope.showCompose = function(subject, to , text){
+    vm.showCompose = function(subject, to , text){
       composeModal.open({
         subject : subject,
         to: to,
@@ -27,8 +21,7 @@
       })
     };
 
-    $scope.tabs = mailMessages.getTabs();
-    $scope.currentTabLabel = $stateParams.label ? $stateParams.label : $scope.tabs[0].label;
+    vm.tabs = mailMessages.getTabs();
   }
 
 })();
diff --git a/src/app/theme/components/composeBox/compose.html b/src/app/pages/mail/composeBox/compose.html
similarity index 100%
rename from src/app/theme/components/composeBox/compose.html
rename to src/app/pages/mail/composeBox/compose.html
diff --git a/src/app/theme/components/composeBox/composeBoxCtrl.js b/src/app/pages/mail/composeBox/composeBoxCtrl.js
similarity index 89%
rename from src/app/theme/components/composeBox/composeBoxCtrl.js
rename to src/app/pages/mail/composeBox/composeBoxCtrl.js
index 3b65153..34074e5 100644
--- a/src/app/theme/components/composeBox/composeBoxCtrl.js
+++ b/src/app/pages/mail/composeBox/composeBoxCtrl.js
@@ -5,7 +5,7 @@
 (function () {
   'use strict';
 
-  angular.module('BlurAdmin.theme.components')
+  angular.module('BlurAdmin.pages.mail')
     .controller('composeBoxCtrl', composeBoxCtrl);
 
   /** @ngInject */
diff --git a/src/app/theme/services/composeModal.js b/src/app/pages/mail/composeBox/composeModal.js
similarity index 85%
rename from src/app/theme/services/composeModal.js
rename to src/app/pages/mail/composeBox/composeModal.js
index 8219e71..e250bab 100644
--- a/src/app/theme/services/composeModal.js
+++ b/src/app/pages/mail/composeBox/composeModal.js
@@ -5,7 +5,7 @@
 (function () {
   'use strict';
 
-  angular.module('BlurAdmin.theme')
+  angular.module('BlurAdmin.pages.mail')
     .service('composeModal', composeModal);
 
   /** @ngInject */
@@ -14,7 +14,7 @@
       open : function(options){
         return $uibModal.open({
           animation: false,
-          templateUrl: 'app/theme/components/composeBox/compose.html',
+          templateUrl: 'app/pages/mail/composeBox/compose.html',
           controller: 'composeBoxCtrl',
           size: 'slim',
           resolve: {
diff --git a/src/app/pages/mail/detail/MailDetailCtrl.js b/src/app/pages/mail/detail/MailDetailCtrl.js
index cf673fb..24fb944 100644
--- a/src/app/pages/mail/detail/MailDetailCtrl.js
+++ b/src/app/pages/mail/detail/MailDetailCtrl.js
@@ -9,11 +9,12 @@
     .controller('MailDetailCtrl', MailDetailCtrl);
 
   /** @ngInject */
-  function MailDetailCtrl($scope, $state,$stateParams, mailMessages) {
-    $scope.mail = mailMessages.getMessageById($stateParams.id);
-    $scope.back = function(){
+  function MailDetailCtrl($state, $stateParams, mailMessages) {
+    var vm = this;
+    vm.mail = mailMessages.getMessageById($stateParams.id);
+    vm.back = function(){
       $state.go('mail.label', {
-        label: 'inbox'
+        label: $stateParams.label
       })
     }
   }
diff --git a/src/app/pages/mail/detail/mailDetail.html b/src/app/pages/mail/detail/mailDetail.html
index ec2e498..0eff64f 100644
--- a/src/app/pages/mail/detail/mailDetail.html
+++ b/src/app/pages/mail/detail/mailDetail.html
@@ -1,21 +1,21 @@
 <div class="message-container">
   <div class="message">
     <div class="row">
-      <button ng-click="back()" type="button" class="back-button btn btn-default btn-with-icon"><i
+      <button ng-click="detailCtrl.back()" type="button" class="back-button btn btn-default btn-with-icon"><i
           class="ion-chevron-left"></i>Back
       </button>
     </div>
     <div class="person-info row">
       <div class="col-lg-4 col-md-12  no-padding">
-        <img ng-src="{{mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
+        <img ng-src="{{detailCtrl.mail.name.split(' ')[0] | profilePicture}}" class="human-picture">
 
         <div class="name">
-          <h2 class="name-h">{{mail.name.split(' ')[0]}}</h2>
+          <h2 class="name-h">{{detailCtrl.mail.name.split(' ')[0]}}</h2>
 
-          <h2 class="name-h second-name">{{mail.name.split(' ')[1]}}</h2>
+          <h2 class="name-h second-name">{{detailCtrl.mail.name.split(' ')[1]}}</h2>
 
           <div>
-            <span class="mail-tag tag label {{mail.tag}}">{{mail.tag}}</span>
+            <span class="mail-tag tag label {{detailCtrl.mail.tag}}">{{detailCtrl.mail.tag}}</span>
           </div>
         </div>
       </div>
@@ -27,7 +27,7 @@
           </div>
           <div>
             <i class="ion-email"></i>
-            <span class="email">{{mail.email}}</span>
+            <span class="email">{{detailCtrl.mail.email}}</span>
           </div>
         </div>
       </div>
@@ -35,7 +35,7 @@
       <div class="col-lg-4 col-md-6 col-xs-12 no-padding">
         <div class="contact-info position-address">
           <div>
-            <span class="position">{{mail.position}}</span>
+            <span class="position">{{detailCtrl.mail.position}}</span>
           </div>
           <div>
             <span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
@@ -47,32 +47,32 @@
     </div>
     <div class="line"></div>
     <div class="message-details">
-      <span class="subject">{{mail.subject}} </span>
-      <span class="date">• {{mail.date | date : 'h:mm a MMMM d '}}</span>
+      <span class="subject">{{detailCtrl.mail.subject}} </span>
+      <span class="date">• {{detailCtrl.mail.date | date : 'h:mm a MMMM d '}}</span>
     </div>
     <div class="line"></div>
-    <div ng-bind-html="mail.body" class="message-body">
+    <div ng-bind-html="detailCtrl.mail.body" class="message-body">
 
     </div>
     <div class="line"></div>
-    <div class="attachment" ng-show="mail.attachment">
+    <div class="attachment" ng-show="detailCtrl.mail.attachment">
       <span class="file-links">1 Attachment - <a href>View</a> | <a href>Download</a></span>
       <div>
         <i class="file-icon ion-document"></i>
-        <span class="file-name">{{mail.attachment}}</span>
+        <span class="file-name">{{detailCtrl.mail.attachment}}</span>
       </div>
     </div>
-    <div class="line" ng-show="mail.attachment"></div>
+    <div class="line" ng-show="detailCtrl.mail.attachment"></div>
     <div class="answer-container">
-      <button type="button" class="btn btn-with-icon" ng-click="showCompose(mail.subject,mail.email,'')"><i class="ion-reply"></i>Reply</button>
-      <button type="button" class="btn btn-with-icon" ng-click="showCompose(mail.subject,'',mail.body)"><i class="ion-forward"></i>Forward</button>
+      <button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,detailCtrl.mail.email,'')"><i class="ion-reply"></i>Reply</button>
+      <button type="button" class="btn btn-with-icon" ng-click="showCompose(detailCtrl.mail.subject,'',detailCtrl.mail.body)"><i class="ion-forward"></i>Forward</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-printer"></i>Print</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-android-remove-circle"></i>Spam</button>
       <button type="button" class="btn btn-with-icon"><i class="ion-android-delete"></i>Delete</button>
     </div>
 
   </div>
-  <div ng-show="!mail">
+  <div ng-show="!detailCtrl.mail">
     <h5 ng-class="text-center">Nothing to show</h5>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/mail/list/MailListCtrl.js b/src/app/pages/mail/list/MailListCtrl.js
index 05a6275..58c2f77 100644
--- a/src/app/pages/mail/list/MailListCtrl.js
+++ b/src/app/pages/mail/list/MailListCtrl.js
@@ -9,17 +9,10 @@
     .controller('MailListCtrl', MailListCtrl);
 
   /** @ngInject */
-  function MailListCtrl($scope, $state, $stateParams,  mailMessages) {
-
-    $scope.messages = mailMessages.getMessagesByLabel($stateParams.label);
-    $scope.$parent.currentTabLabel = $stateParams.label;
-    $scope.selectMail = function (mail) {
-      $state.go('mail.detail', {
-        id: mail.id,
-        back: $stateParams.label
-      })
-    };
-
+  function MailListCtrl($stateParams,  mailMessages) {
+    var vm = this;
+    vm.messages = mailMessages.getMessagesByLabel($stateParams.label);
+    vm.label = $stateParams.label;
   }
 
 })();
diff --git a/src/app/pages/mail/list/mailList.html b/src/app/pages/mail/list/mailList.html
index 945b8e0..040b6a1 100644
--- a/src/app/pages/mail/list/mailList.html
+++ b/src/app/pages/mail/list/mailList.html
@@ -21,9 +21,9 @@
   </div>
   <div class="messages">
     <table>
-      <tr ng-repeat="m in messages track by m.id | orderBy:'-date'"
+      <tr ng-repeat="m in listCtrl.messages track by m.id | orderBy:'-date'"
           class="side-message-navigation-item little-human shineHover {{m.tag}}"
-          ng-click="selectMail(m)">
+          ui-sref="mail.detail({id: m.id, label: listCtrl.label})">
         <td>
           <div class="mail-checkbox">
             <label class="checkbox-inline custom-checkbox nowrap margin-left">
diff --git a/src/app/pages/mail/mail.html b/src/app/pages/mail/mail.html
index 76ed03e..0e4e914 100644
--- a/src/app/pages/mail/mail.html
+++ b/src/app/pages/mail/mail.html
@@ -1,16 +1,16 @@
 <div class="row mail-row">
-  <div class="col-md-12 col-sm-12">
+  <div class="col-md-12">
     <div ba-panel ba-panel-class="xmedium-panel mail-panel">
       <div class="mail-container">
-        <div class="row letter-layout">
+        <div class="letter-layout">
           <div class="mail-navigation-container">
             <div class="compose-button">
-              <button type="button" class="btn compose-button" ng-click="showCompose('','','')">
+              <button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
                 Compose
               </button>
             </div>
-            <div ng-repeat="t in tabs" class="mail-navigation {{currentTabLabel == t.label ? 'active' : ''}}"
-                 ng-click="selectTab(t.label)">
+            <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
+                 ui-sref="mail.label({label: t.label})" ng-click="selectTab(t.label)">
               {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
             </div>
             <div class="labels">
diff --git a/src/app/pages/mail/mail.module.js b/src/app/pages/mail/mail.module.js
index 5d7bfd7..43aabae 100644
--- a/src/app/pages/mail/mail.module.js
+++ b/src/app/pages/mail/mail.module.js
@@ -23,7 +23,7 @@
         controller: "MailListCtrl",
         controllerAs: "listCtrl"
       }).state('mail.detail', {
-        url: '/detail/:id',
+        url: '/:label/:id',
         templateUrl: 'app/pages/mail/detail/mailDetail.html',
         controller: "MailDetailCtrl",
         controllerAs: "detailCtrl"
diff --git a/src/app/theme/services/mailMessages.js b/src/app/pages/mail/mailMessages.js
similarity index 99%
rename from src/app/theme/services/mailMessages.js
rename to src/app/pages/mail/mailMessages.js
index 46f4f3d..3c58a1f 100644
--- a/src/app/theme/services/mailMessages.js
+++ b/src/app/pages/mail/mailMessages.js
@@ -5,7 +5,7 @@
 (function () {
   'use strict';
 
-  angular.module('BlurAdmin.theme')
+  angular.module('BlurAdmin.pages.mail')
     .service('mailMessages', mailMessages);
 
   /** @ngInject */
diff --git a/src/sass/app/_email.scss b/src/sass/app/_email.scss
index 858d16d..46e4ce7 100644
--- a/src/sass/app/_email.scss
+++ b/src/sass/app/_email.scss
@@ -155,12 +155,6 @@
   margin-left: 5px;
 }
 
-
-
-.border-tag{
-
-}
-
 .mail-tag.tag.label{
   display: inline-block;
   font-size: 14px;
@@ -182,40 +176,6 @@
   overflow-x: hidden;
 }
 
-
-.control-container {
-  background-color: #ebebeb;
-  padding-left: 15px;
-  margin-bottom: 30px;
-
-  .icon-buttons {
-    margin-left: -10px;
-  }
-  .btn-icon {
-    background-color: $dribble-color;
-    color: white;
-    height: 35px;
-    width: 35px;
-    font-size: 16px;
-    margin-left: -3px;
-  }
-
-  .btn.btn-icon.dropdown-toggle {
-    width: 50px;
-    &.margin-left {
-      margin-left: 10px;
-    }
-  }
-  .dropdown-menu {
-    margin-left: 10px;
-  }
-
-  .more-button {
-    font-size: 12px;
-    font-weight: 100;
-  }
-}
-
 .little-human {
   cursor: pointer;
   transition: border-left 1.5s ease;
@@ -618,4 +578,86 @@
 
 
 
+.compose-header {
+  padding: 8px 3px 8px 10px;
+  color: white;
+  font-weight: 100;
+  font-size: 13px;
+  background-color: $github-color;
+}
+
+.header-controls {
+  display: inline-block;
+  float: right;
+  i {
+    margin-right: 5px;
+    font-size: 14px;
+    cursor: pointer;
+    &:hover {
+      color: $primary-light;
+    }
+  }
+}
+
+.compose-input {
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+
+
+.compose-footer {
+  padding: 2px 4px;
+  background-color: whitesmoke;
+  .btn-send {
+    background-color: $primary-light;
+    color: white;
+    padding: 2px 10px;
+    margin: 3px;
+    font-weight: 100;
+  }
+  .btn-default{
+    background-color: transparent;
+    border: none;
+  }
+}
+
+.footer-controls {
+  float: right;
+  margin: 6px;
+}
+
+.compose-footer-icon {
+  font-size: 18px;
+  margin-right: 5px;
+  cursor: pointer;
+  &:hover {
+    color: $primary-light;
+  }
+}
+
+.compose-container {
+  background-color: whitesmoke;
+  .ta-text.ta-editor {
+    background-color: white;
+  }
+
+}
+
+.footer-control-first {
+  border-right: 2px solid $help-text;
+  display: inline-block;
+  padding-right: 9px;
+}
+
+.modal .modal-dialog.modal-slim {
+  width: 398px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  max-height: 474px;
+}
+
+
 
diff --git a/src/sass/app/_mail.scss b/src/sass/app/_mail.scss
deleted file mode 100644
index 39f03c6..0000000
--- a/src/sass/app/_mail.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-
-.compose-header {
-  padding: 8px 3px 8px 10px;
-  color: white;
-  font-weight: 100;
-  font-size: 13px;
-  background-color: $github-color;
-}
-
-.header-controls {
-  display: inline-block;
-  float: right;
-  i {
-    margin-right: 5px;
-    font-size: 14px;
-    cursor: pointer;
-    &:hover {
-      color: $primary-light;
-    }
-  }
-}
-
-.compose-input {
-  border-left: 0;
-  border-right: 0;
-  border-top: 0;
-}
-
-
-
-.compose-footer {
-  padding: 2px 4px;
-  background-color: whitesmoke;
-    .btn-send {
-    background-color: $primary-light;
-    color: white;
-    padding: 2px 10px;
-    margin: 3px;
-    font-weight: 100;
-  }
-  .btn-default{
-    background-color: transparent;
-    border: none;
-  }
-}
-
-.footer-controls {
-  float: right;
-  margin: 6px;
-}
-
-.compose-footer-icon {
-  font-size: 18px;
-  margin-right: 5px;
-  cursor: pointer;
-  &:hover {
-    color: $primary-light;
-  }
-}
-
-.compose-container {
-  background-color: whitesmoke;
-  .ta-text.ta-editor {
-    background-color: white;
-  }
-
-}
-
-.footer-control-first {
-  border-right: 2px solid $help-text;
-  display: inline-block;
-  padding-right: 9px;
-}
-
-.modal .modal-dialog.modal-slim {
-  width: 398px;
-  float: right;
-  margin-top: 10%;
-}
\ No newline at end of file