diff --git a/css/src/main.css b/css/src/main.css
index 9523b610a..c166f6563 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -803,6 +803,13 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #A02F23;
 }
 
+.txp-popup .header {
+  background: #F3F5F6;
+  width: 100%;
+  padding: 0.8rem;
+  position: relative;
+}
+
 .addresses .label {
   font-weight: normal;
   padding: .2rem .3rem;
@@ -1608,14 +1615,17 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 }
 
 .reveal-modal .close-reveal-modal, dialog .close-reveal-modal {
-  padding: 5px 10px;
-  position: relative;
-  font-weight: normal;
-  border: 1px solid #bbb;
-  font-size: 22px;
-  background:#eee;
-  right:0;
-  top:0;
-  text-transform: uppercase;
+  padding: 0.8rem;
+  position: absolute;
+  background: #E4E8EC;
+  top: 37px;
+  right: 15px;
+  line-height: 0;
+  color: #7A8C9E;
+  border-radius: 3px;
 }
 
+.reveal-modal .close-reveal-modal:hover, dialog .close-reveal-modal:hover {
+  background-color: #7A8C9E;
+  color: #fff;
+}
diff --git a/css/src/mobile.css b/css/src/mobile.css
index a3c3a5f1c..81134430a 100644
--- a/css/src/mobile.css
+++ b/css/src/mobile.css
@@ -52,6 +52,10 @@
     padding: 1rem 0;
   }
 
+  .reveal-modal {
+    padding: 0.5rem;
+  } 
+
   header {
     height: 45px;
     line-height: 110%;
@@ -290,5 +294,14 @@
     padding: 15px;
   }
 
+  .button-popup {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #F3F5F6;
+    padding: 1rem 0;
+  }
+
 }
 
diff --git a/views/modals/txp-details.html b/views/modals/txp-details.html
index f7be43a79..1bc60289e 100644
--- a/views/modals/txp-details.html
+++ b/views/modals/txp-details.html
@@ -1,94 +1,100 @@
-
-<div class="text-right">
-  <a class="close-reveal-modal" ng-click="cancel()">Close</a>
-</div>
-
-<div ng-repeat="out in tx.outs">
-  <div class="m20t text-center ">
-    <div class="size-48">
-    {{out.value}} {{$root.wallet.settings.unitName}}
+<div class="txp-popup">
+  <div class="header">
+    <div class="ellipsis p10b size-16 m20r">
+      <span class="tx-proposal size-12 m5r"> <i ng-class="{'active':pendingForUs}" class="fi-arrow-right"></i> </span>
+      <span class="text-gray">
+        To:
+        <span ng-if="tx.merchant">
+          <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
+          <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
+        </span>
+        <contact address="{{out.address}}" ng-hide="tx.merchant"></contact>
+      </span>
+      </span>
     </div>
-    <div class="size-18 m5t text-gray">
-      {{out.alternativeAmount}} {{out.alternativeIsoCode}}
+
+    <div class="p25l" ng-class="{'text-gray':!pendingForUs}" ng-repeat="out in tx.outs">
+      <div class="size-21 text-bold m5b">
+        {{out.value}} {{$root.wallet.settings.unitName}}
+      </div>
+      <span class="alt-currency black size-12" ng-class="{'gray':!pendingForUs}">
+        {{out.alternativeAmount}} {{out.alternativeIsoCode}}
+      </span>
+    </div>
+    <a class="close-reveal-modal" ng-click="cancel()"><i class="fi-x size-18"></i></a>
+  </div>
+
+  <div class="m10v line-b size-14" ng-show="tx.comment">
+    <div class="oh" ng-if="tx.ts || tx.createdTs ">
+      <p class="left m5b">Bechilandia@gmail.com</p>
+      <div class="text-gray text-right m5t size-12">
+        <time>{{ (tx.ts || tx.createdTs ) | amTimeAgo}}</time>
+      </div>
+    </div>
+    <div class="text-gray m10b">
+      {{tx.comment}}
     </div>
   </div>
-  <div class="line-b m10v"></div>
 
-  <div class="ellipsis m10v">
-    To:
-    <span ng-if="tx.merchant">
-    <span ng-show="tx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{tx.merchant.domain}}</span>
-    <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock color-yellowi"></i> {{tx.merchant.domain}}</span>
+  <div class="m10v line-b size-14" ng-if="tx.merchant">
+    <div class="oh">
+      <p class="left m5b">Merchant Message:</p>
+      <div class="text-gray text-right m5t size-12" ng-if="tx.merchant && tx.merchant.expirationDate">
+        <span><i>Expires</i>: {{tx.merchant.expirationDate | amTimeAgo }}</span>
+      </div>
+    </div>
+    <div class="text-gray m10b">
+      {{tx.merchant.pr.pd.memo}}
+    </div>
+  </div>
+
+  <div ng-if="tx.actionList[0]" class="m10v">
+    <i>Signatures:</i>
+    <ul class="tx-copayers m10t" ng-if="tx.actionList[0]">
+      <li ng-repeat="c in tx.actionList" ng-class="{'bottom-line-copayers':!$last}">
+        <span>
+            <i ng-if="c.actions.rejected" class="fi-x icon-sign x"></i>
+            <i ng-if="c.actions.sign" class="fi-check icon-sign check"></i>
+            <i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="m10r fi-loop icon-rotate"></i>
+          </span>
+        <span>
+            <i ng-if="c.actions.create" class="fi-crown icon-status icon-active m10r"></i>
+          </span>
+        <span>{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}</span>
+      </li>
+    </ul>
+  </div>
+  </div>
+
+  <div class="box-notification" ng-show="error">
+    <div class="box-icon error">
+      <i class="fi-x size-24"></i>
+    </div>
+    <span class="text-warning size-14">
+      {{error}}
     </span>
-    </span>
-    <contact address="{{out.address}}" ng-hide="tx.merchant"></contact>
+    <a class="close-notification text-warning" ng-click="error=null">&#215;</a>
+  </div>
+
+  <div class="row button-popup" 
+    ng-init="hideSign = false; hideReject = false"
+    ng-show="!tx.signedBy[$root.wallet.getMyCopayerId()] && !tx.rejectedBy[$root.wallet.getMyCopayerId()]">
+    <div class="large-6 medium-6 small-6 columns">
+      <button class="button warning m0 expand" ng-click="hideSign = true; reject(tx.ntxid);" 
+        ng-disabled="loading" ng-show="!hideReject">
+        <i class="fi-x icon-sign x" ng-show="!loading"></i>  
+        <i class="fi-bitcoin-circle icon-rotate spinner" ng-show="loading"></i>
+        <span translate>Reject</span>
+      </button>
+    </div>
+    <div class="large-6 medium-6 small-6 columns text-right">
+      <button class="button primary m0 expand" ng-click="hideReject = true; sign(tx.ntxid)" 
+        ng-disabled="loading" ng-show="!hideSign">
+        <i class="fi-check icon-sign check" ng-show="!loading"></i>  
+        <i class="fi-bitcoin-circle icon-rotate spinner" ng-show="loading"></i>
+        <span translate>Sign</span>
+      </button>
+    </div>
   </div>
 </div>
 
-<div ng-if="tx.ts || tx.createdTs " class="m10v">
-  <time>{{ (tx.ts || tx.createdTs ) | amCalendar}}</time>
-  <time class="text-gray">[ {{ (tx.ts || tx.createdTs ) | amTimeAgo}} ]</time>
-</div>
-
-<div class="m10v" ng-show="tx.comment">
-  <i>Note:</i> {{tx.comment}}
-</div>
-
-
-<div ng-if="tx.merchant" class="lh140">
-  <i>Merchant Message:</i>  <span class="text-gray">{{tx.merchant.pr.pd.memo}}</span>
-</div>
-<div ng-if="tx.merchant && tx.merchant.expirationDate" class="m10v">
-  <i>Expires</i>: {{tx.merchant.expirationDate | amTimeAgo }}
-</div>
-
-<div ng-if="tx.actionList[0]" class="m10v">
-  <i>Signatures:</i>
-  <ul class="tx-copayers m10t" ng-if="tx.actionList[0]">
-    <li ng-repeat="c in tx.actionList" ng-class="{'bottom-line-copayers':!$last}">
-      <span>
-          <i ng-if="c.actions.rejected" class="fi-x icon-sign x"></i>
-          <i ng-if="c.actions.sign" class="fi-check icon-sign check"></i>
-          <i ng-if="!c.actions.sign && !c.actions.rejected && tx.missingSignatures" class="m10r fi-loop icon-rotate"></i>
-        </span>
-      <span>
-          <i ng-if="c.actions.create" class="fi-crown icon-status icon-active m10r"></i>
-        </span>
-      <span>{{c.cId === $root.wallet.getMyCopayerId() ? 'Me' : $root.wallet.publicKeyRing.nicknameForCopayer(c.cId)}}</span>
-    </li>
-  </ul>
-</div>
-</div>
-
-<div class="box-notification" ng-show="error">
-  <div class="box-icon error">
-    <i class="fi-x size-24"></i>
-  </div>
-  <span class="text-warning size-14">
-    {{error}}
-  </span>
-  <a class="close-notification text-warning" ng-click="error=null">&#215;</a>
-</div>
-
-<div class="row collapse" 
-  ng-init="hideSign = false; hideReject = false"
-  ng-show="!tx.signedBy[$root.wallet.getMyCopayerId()] && !tx.rejectedBy[$root.wallet.getMyCopayerId()]">
-  <div class="large-6 medium-6 small-6 columns">
-    <button class="button warning m0" ng-click="hideSign = true; reject(tx.ntxid);" 
-      ng-disabled="loading" ng-show="!hideReject">
-      <i class="fi-x icon-sign x" ng-show="!loading"></i>  
-      <i class="fi-bitcoin-circle icon-rotate spinner" ng-show="loading"></i>
-      <span translate>Reject</span>
-    </button>
-  </div>
-  <div class="large-6 medium-6 small-6 columns text-right">
-    <button class="button primary m0" ng-click="hideReject = true; sign(tx.ntxid)" 
-      ng-disabled="loading" ng-show="!hideSign">
-      <i class="fi-check icon-sign check" ng-show="!loading"></i>  
-      <i class="fi-bitcoin-circle icon-rotate spinner" ng-show="loading"></i>
-      <span translate>Sign</span>
-    </button>
-  </div>
-</div>
-
-