diff --git a/css/main.css b/css/main.css
index b63ab76fd..ff3c5f725 100644
--- a/css/main.css
+++ b/css/main.css
@@ -78,10 +78,13 @@
   font-family: 'Ubuntu', Helvetica, sans-serif !important;
 }
 
+h1, h2, h3, h4, h5, h6 {
+  color: #2C3E50;
+}
+
 h1 {
   font-weight: 100;
   font-size: 24px;
-  color: #2C3E50;
   margin-bottom: 1rem;
 }
 
@@ -93,7 +96,6 @@ h2 {
 h3 {
   font-weight: 300;
   font-size: 16px;
-  color: #fff;
 }
 
 h4 {
@@ -103,6 +105,7 @@ h4 {
 body, html{
   height:100%;
   width:100%;
+  color: #2C3E50;
 }
 
 .off-canvas-wrap, .inner-wrap{
@@ -256,62 +259,56 @@ a:hover {
 }
 
 .last-transactions {
-  border: 1px solid #eee;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  border-radius: 3px;
-  margin-bottom: 1.25rem;
-  background-color: #fff;
+  margin-bottom: 2rem;
+  background-color: #E8EAEF;
 }
 
 .last-transactions-header {
-  padding: 10px 0;
-  overflow: hidden;
+  padding: 1rem 0;
+  height: 50px;
 }
 
 .last-transactions-footer {
-  padding: 10px 0;
+  padding: 1rem 0;
   overflow: hidden;
 }
 
 .last-transactions-content {
-  background-color: #FDFCFC;
   overflow: hidden;
-  padding: 10px 0;
+  padding: 1rem;
+  background: #CED3DB;
 }
 
 .last-transactions-content .box-status {
-  text-align: center;
-  font-size: 14;
+  font-size: 13px;
+  width: 35px;
 }
 
 .last-transactions-content .box-copayer {
-  width: 60px;
+  width: 100px;
   margin-right: 20px;
   float: left;
   text-align: center;
 }
 
 .last-transactions-content .copayer-ico {
-  width: 30px;
-  height: 30px;
-}
-
-.last-transactions-content .box-copayer .icon-inactive {
-  color: #4C5B69;
+  width: 45px;
+  height: 45px;
+  border: 2px solid #7A8C9B;
 }
 
 .last-transactions-content .box-copayer .icon-active {
-  color: #ccc;
+  color: #fff;
 }
 
 .last-transactions-content .box-copayer .icon-active-check {
-  color: #3FBC9C;
+  background-color: #3FBC9C;
+  color: #fff;
 }
 
 .last-transactions-content .box-copayer .icon-active-x {
-  color: #C0392B;
+  background-color: #C0392B;
+  color: #fff;
 }
 
 .input-note {
@@ -630,17 +627,27 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .dr-notification-image.dr-notification-type-success {
-  color: #B4D455;
+  color: #1ABC9C;
 }
 
 .dr-notification-image.success {
-  color: #B4D455;
+  color: #1ABC9C;
 }
 
 .success { 
   color: #1ABC9C;
 }
 
+.label.success { 
+  background-color: #1ABC9C;
+}
+
+.label.alert {
+  background-color: #C0392A;
+  padding: 0.3rem 0.4rem;
+  font-weight: 700;
+}
+
 .dr-notification-text {
   font-size: 12px;
   line-height: 120%;
@@ -662,7 +669,7 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
 }
 
 .tooltip { 
-  background: #16A085; 
+  background: #1ABC9C; 
   color: #fff; 
   font-weight: normal; 
   font-size: 14px; 
@@ -670,7 +677,7 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px; 
   border-radius: 3px; 
-  border: 1px solid #16A085;
+  border: 1px solid #1ABC9C;
   text-overflow: ellipsis;
   overflow-y: hidden;
 }
@@ -860,6 +867,10 @@ button.gray:focus,
   color: #2C3E50;
 }
 
+button, .button, p {
+  margin: 0;
+}
+
 .side-nav {padding: 0;}
 
 .side-nav li {
@@ -932,6 +943,19 @@ button.gray:focus,
   padding: 0.2rem 0.4rem;
 }
 
+.box-status {
+  float: right;
+}
+
+.icon-status { 
+  background-color: #34495E;
+  color: #7A8C9E;
+  border-radius: 100%;
+  padding: 0.17rem 0.3rem;
+  float: left;
+  margin-bottom: 0.2rem;
+}
+
 .has-error {
   color: #C0392A;
 }
@@ -964,8 +988,13 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   opacity: 0.6;
 }
 
+.black {
+  background-color: #2C3E50;
+}
+
 .text-light {font-weight: 100;}
 .text-gray {color: #8597A7;}
+.text-black {color: #2C3E50;}
 .text-primary {color: #1ABC9C;}
 .text-secondary {color: #3498DB;}
 .text-white {color: #fff;}
@@ -973,6 +1002,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 
 .footer-setup a.text-gray:hover {color: #fff;}
 a.text-gray:hover {color: #2C3E50;}
+a.text-black:hover {color: #213140;}
 a.text-primary:hover {color: #50E3C2;}
 a.text-secondary:hover {color: #4A90E2;}
 a.text-white:hover {color: #ccc;}
@@ -1003,6 +1033,35 @@ a.text-white:hover {color: #ccc;}
   border: 0;
 }
 
+.box-setup h3 {
+  color: #fff;
+}
+
+.joyride-tip-guide {
+  width: 150px;
+  background: #213140;
+  top: -20px !important;
+  left: 50px !important;
+  -moz-box-shadow:    1px 1px 3px 0px rgba(0,0,0,0.40);
+  box-shadow:         1px 1px 3px 0px rgba(0,0,0,0.40);
+}
+
+.joyride-tip-guide .joyride-nub.left {
+  border-color: #213140 !important;
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  border-bottom-color: transparent !important;
+}
+
+.joyride-content-wrapper {
+  padding: 0.8rem
+}
+
+.joyride-tip-guide p {
+  margin: 0;
+  color: #8597A7;
+}
+
 .panel qrcode {
   float: left;
   width: 160px;
diff --git a/js/controllers/transactions.js b/js/controllers/transactions.js
index 78fcae464..7a8185d9c 100644
--- a/js/controllers/transactions.js
+++ b/js/controllers/transactions.js
@@ -166,6 +166,10 @@ angular.module('copayApp.controllers').controller('TransactionsController',
       }
     };
 
+    $scope.hasAction = function(actions, action) {
+      return actions.hasOwnProperty('create');
+    }
+
     $scope.getShortNetworkName = function() {
       return config.networkName.substring(0, 4);
     };
diff --git a/views/includes/sidebar.html b/views/includes/sidebar.html
index ae82b4c46..d57e4075a 100644
--- a/views/includes/sidebar.html
+++ b/views/includes/sidebar.html
@@ -49,7 +49,9 @@
     <li data-ng-repeat="item in menu" ui-route="{{item.link}}" class="nav-item" data-ng-class="{active: isActive(item)}">
       <a href="#!/{{item.link}}" ng-click="toggleCollapse()" class="db p20h"> 
         <i class="size-21 m20r {{item.icon}}"></i> {{item.title}}
-        <span class="label alert round" ng-if="item.link=='transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
+        <span class="right">
+          <span class="label alert" ng-if="item.link=='transactions' && $root.pendingTxCount > 0">{{$root.pendingTxCount}}</span>
+        </span>
       </a>
     </li>
     <li>
diff --git a/views/join.html b/views/join.html
index 8a7d140c0..179d89f48 100644
--- a/views/join.html
+++ b/views/join.html
@@ -9,7 +9,7 @@
     </div>
     <div class="large-8 columns line-dashed-setup-v">
         <div class="box-setup">
-        <h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
+          <h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
           <form name="joinForm" ng-submit="join(joinForm)" novalidate>
             <label for="connectionId"> Wallet Setting </label>
             <input id="connectionId" type="text" class="small-9 columns" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required style="width:85%;">
@@ -38,7 +38,7 @@
               </div>
             </div>
 
-            <label for="joinPassword"> User info</label>
+            <label for="joinPassword"> User info </label>
             <input id="joinPassword" type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
             <input type="password" class="form-control"
             placeholder="Choose your password" name="joinPassword"
diff --git a/views/transactions.html b/views/transactions.html
index ddc18977f..1119e81ce 100644
--- a/views/transactions.html
+++ b/views/transactions.html
@@ -8,76 +8,107 @@
       </ul>
       <div class="last-transactions" ng-repeat="tx in txs | paged">
         <div class="last-transactions-header">
-          <div class="large-8 medium-8 small-12 columns">
+          <div class="hide-for-small-only large-1 medium-1 columns">
+            <a class="text-black" ng-show="tx.comment">
+              <i class="fi-comment-quotes size-24" Popover-animation="true" popover="{{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}" popover-title="{{tx.comment}}" popover-placement="right" popover-trigger="mouseenter"></i>
+            </a>
+            <a class="disable" ng-show="!tx.comment">
+              <i class="fi-comment-quotes size-24 text-gray"></i>
+            </a>
+          </div>
+          <div class="show-for-small-only small-12 columns m10b" ng-show="tx.comment">
+            <p class="size-14 label" >
+              {{tx.comment}} - 
+              {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
+            </p>
+          </div>
+          <div class="large-8 medium-8 small-8 columns">
             <div ng-repeat="out in tx.outs">
               <div class="large-3 medium-3 small-3 columns">
-                {{out.value | noFractionNumber}} {{$root.unitName}}</div>
+                <p class="size-14 hide-for-small-only">{{out.value | noFractionNumber}} {{$root.unitName}}</p>
+                <p class="size-12 show-for-small-only">{{out.value | noFractionNumber}} {{$root.unitName}}</p>
+              </div>
               <div class="large-1 medium-1 small-2 columns fi-arrow-right"> </div>
               <div class="large-8 medium-8 small-7 columns ellipsis">
                 <contact address="{{out.address}}" tooltip-popup-delay="500" tooltip tooltip-placement="right"/>
               </div>
             </div>
           </div>
-          <div class="large-4 medium-4 small-12 columns text-right">
-            {{tx.createdTs | amCalendar}}
+          <div class="large-3 medium-3 small-4 columns text-right">
+            <p class="size-12">{{tx.createdTs | amCalendar}}</p>
           </div>
         </div>
 
         <div class="last-transactions-content">
-          <div class="box-note large-12" ng-show="tx.comment">
-            "{{tx.comment}}" - {{$root.wallet.publicKeyRing.nicknameForCopayer(tx.creator)}}
-          </div>
-
           <div class="box-copayer" ng-repeat="(cId, actions) in tx.peerActions">
             <a href="#!/transactions" class="has-tip" tooltip-popup-delay="1000" tooltip="{{cId === $root.wallet.getMyCopayerId() ? 'You' : $root.wallet.publicKeyRing.nicknameForCopayer(cId)}}">
               <img class="copayer-ico br100" src="./img/satoshi.gif" alt="{{cId}}">
             </a>
             <div class="box-status">
-              <span ng-repeat="(action, ts) in actions">
-                <a ng-if="action == 'create'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
+              <a ng-if="actions.create" tooltip-popup-delay="1000" tooltip="Created {{ts | amTimeAgo}}">
                   <i class="fi-crown icon-status icon-active"></i>
-                </a>
-                <a ng-if="action == 'seen'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
+              </a>
+              <a ng-if="!actions.create"><i class="fi-crown icon-status"></i></a>
+
+              <a ng-if="actions.seen" tooltip-popup-delay="1000" tooltip="Seen {{ts | amTimeAgo}}">
                   <i class="fi-eye icon-status icon-active"></i>
-                </a>
-                <a ng-if="action == 'sign'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
-                  <i class="fi-check icon-status icon-active-check"></i>
-                </a>
-                <a ng-if="action == 'rejected'" href="#!/transactions" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
+              </a>
+              <a ng-if="!actions.seen"><i class="fi-eye icon-status"></i></a>
+
+              <a ng-if="actions.rejected" tooltip-popup-delay="1000" tooltip="Rejected {{ts | amTimeAgo}}">
                   <i class="fi-x icon-status icon-active-x"></i>
-                </a>
-              </span>
+              </a>
+
+              <a ng-if="actions.sign" tooltip-popup-delay="1000" tooltip="Signed {{ts | amTimeAgo}}">
+                  <i class="fi-check icon-status icon-active-check"></i>
+              </a>
+
+              <a ng-if="!actions.sign && !actions.rejected" href="#!/transactions" class="icon-status">
+                  <i class="fi-loop icon-rotate"></i>
+              </a>
             </div>
 
             <div class="text-center">
-              {{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
+              <p class="size-12 text-gray ellipsis">
+                {{$root.wallet.publicKeyRing.nicknameForCopayer(cId)}}
+              </p>
             </div>
           </div>
         </div>
 
         <div class="last-transactions-footer">
-          <div class="large-5 medium-5 columns" ng-show="!tx.sentTs">
+          <div class="large-5 medium-7 small-12 columns" ng-show="!tx.sentTs">
             <div ng-show="!tx.signedByUs && !tx.rejectedByUs  && !tx.finallyRejected && tx.missingSignatures">
-              <button class="secondary radius m10r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
-                <i class="fi-check"></i> Sign
-              </button>
-              <button class="warning radius" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
-                <i class="fi-x" ></i> Reject
-              </button>
+              <div class="hide-for-small-only">
+                <button class="primary m15r"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
+                  <i class="fi-check"></i> Sign
+                </button>
+                <button class="warning" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
+                  <i class="fi-x" ></i> Reject
+                </button>
+              </div>
+              <div class="show-for-small-only row m10b">
+                <button class="primary small-5 columns"  ng-click="sign(tx.ntxid)" ng-disabled="loading" loading="Signing">
+                  <i class="fi-check"></i> Sign
+                </button>
+                <button class="warning small-5 columns" ng-click="reject(tx.ntxid)" ng-disabled="loading" loading="Rejecting">
+                  <i class="fi-x" ></i> Reject
+                </button>
+              </div>
             </div>
             <div ng-show="!tx.missingSignatures && !tx.sentTs">
-              <button class="primary radius"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
+              <button class="primary"  ng-click="send(tx.ntxid)" ng-disabled="loading" loading="Broadcasting"> <i class=".fi-upload-cloud"></i>
                 Broadcast Transaction
               </button>
             </div>
           </div>
 
-          <div class="large-7 medium-7 columns text-right">
-            <div ng-show="tx.finallyRejected" class="text-warning m10b">
+          <div class="large-7 medium-5 small-12 columns text-right">
+            <div ng-show="tx.finallyRejected" class="has-error m10b">
               Transaction finally rejected
             </div>
             <div ng-show="!tx.missingSignatures && tx.sentTs">
-              <div class="success m10b">
+              <div class="is-valid m10b">
                 <strong>Sent</strong> <span class="text-gray" am-time-ago="tx.sentTs"></span>
               </div>
               <div class="ellipsis small">