diff --git a/css/main.css b/css/main.css
index 037b80b42..e364e6216 100644
--- a/css/main.css
+++ b/css/main.css
@@ -54,7 +54,7 @@ html, body {height: 100%;}
   position: relative;
   float: right;
   margin-left: 15px;
-  height: 62px;
+  /* height: 551px; */
 }
 
 .logo {
@@ -64,13 +64,6 @@ html, body {height: 100%;}
   margin: 0 auto;
 }
 
-@media (max-width: 640px) {
-  .logo {
-    margin: 0 auto;
-    margin-bottom: 10px;
-  }
-}
-
 .top-bar-section li:not(.has-form) a:not(.button) {
   line-height: 60px;
 }
@@ -129,7 +122,6 @@ html, body {height: 100%;}
 }
 
 .panel {
-  /* padding: 0.7rem 1rem; */
   border:0;
 }
 
@@ -155,7 +147,7 @@ html, body {height: 100%;}
 }
 
 .box-backup {
-  margin: 2rem 0;
+  margin: 0.6rem 0;
   padding: 2rem 1rem;
 }
 
@@ -328,7 +320,7 @@ hr { margin: 2.25rem 0;}
 
 .box-copayers figure {
   width: 51px;
-  height: 55px;
+  height: 63px;
   border-top-left-radius: 4px 4px;
   border-bottom-left-radius: 4px 4px;
   overflow: hidden;
@@ -621,3 +613,59 @@ p.dr-notification-text {
   white-space: nowrap;
 }
 
+ul.pagination li.current a {
+  background: #1ABC9C;
+}
+
+ul.pagination li.current a:hover, ul.pagination li.current a:focus {
+  background: #16A085;
+}
+
+@media only screen and (max-width: 40em) { 
+
+  #main, .header-content {
+    font-size: 80%;
+    line-height: 140%;
+  }
+
+  .top-bar {
+    background: #1ABC9C;
+  }
+
+  .header-content {
+    padding: 0.3rem 0rem 1rem 0.4rem;
+  }
+
+  .logo {
+    background-size: 90px 44px !important;
+    float: left;
+    margin-top: 0.7rem;
+  }
+
+  .header-content .small-9 {
+    text-align: right !important;
+  }
+
+  .header-content .line-dashed-v {
+    border: none !important;  
+  }
+
+  .box-backup {
+    margin: 0.6rem 0;
+  }
+
+  #footer {
+    font-size: 80%;
+    padding: 0.2rem 0.5rem;
+  }
+
+  .box-status {
+    height: 71px;
+  }
+
+  .box-copayers figure {
+    height: 71px;
+    width: 71px;
+  }
+
+}
\ No newline at end of file
diff --git a/css/tpl-clean.css b/css/tpl-clean.css
index 0df4a0644..a6b2c3581 100644
--- a/css/tpl-clean.css
+++ b/css/tpl-clean.css
@@ -1,5 +1,5 @@
 .logo {
-  background: transparent url('../img/logo.png');
+  background: transparent url('../img/logo.png') no-repeat;
 }
 
 #footer {
diff --git a/css/tpl-default.css b/css/tpl-default.css
index d2bf404c0..47e2494f7 100644
--- a/css/tpl-default.css
+++ b/css/tpl-default.css
@@ -38,8 +38,8 @@ body {
 }
 
 .logo {
-  background: transparent url('../img/logo-negative.svg');
-  background-size: 131px 51px;
+  background: transparent url('../img/logo-negative.svg') no-repeat;
+  background-size: 130px 51px;
 }
 
 .top-bar-section li:not(.has-form) a:not(.button) {
diff --git a/index.html b/index.html
index 4fcec18d3..0135f5e4c 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,10 @@
       <div data-ng-init="init()" data-ng-controller="HeaderController">
         <div class="header"> 
           <div class="header-content">
-            <div class="large-3 medium-3 columns">
+            <div class="large-3 medium-3 small-3 columns">
               <span class="logo"></span>
             </div>
-            <div class="large-9 medium-9 columns text-center p10t" ng-show="$root.wallet">
+            <div class="large-9 medium-9 small-9 columns text-center p10t" ng-show="$root.wallet">
               <div class="large-4 medium-4 columns line-dashed-v">
                 <a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="{{$root.wallet.id}}">
                   <strong><span>{{$root.wallet.getName()}}</span></strong>
@@ -56,7 +56,7 @@
           <ul class="title-area">
             <li class="name"></li>
             <li class="toggle-topbar menu-icon">
-              <a ng-click="isCollapsed=!isCollapsed"> Menu</a>
+              <a ng-click="isCollapsed=!isCollapsed"></a>
             </li>
           </ul>
 
@@ -84,6 +84,7 @@
 
       <div class="row">
         <div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'>
+          <div class="medium-12 small-12 columns">
             <div class="alert-box secondary radius" data-alert>
               <i class="fi-info"></i> 
               Not all copayers have joined your wallet yet. 
@@ -95,20 +96,23 @@
               </span>
               yet to join. 
             </div>
-
-            <div class="panel radius">
-              <h3 class="m15b">Share this secret with your other copayers
-                <small> for them to join your wallet</small>
-              </h3>
-              <div class="row">
-                <div class="large-9 medium-12 small-12 columns line-dashed-v text-gray">
-                  <div class="panel input">
-                    <p class="text-gray">{{$root.wallet.getSecret()}}</p>
+          </div>
+                      
+            <div class="medium-12 small-12 columns "> 
+              <div class="panel radius m30v">
+                <h3 class="m15b">Share this secret with your other copayers
+                  <small> for them to join your wallet</small>
+                </h3>
+                <div class="row">
+                  <div class="large-9 medium-12 small-12 columns line-dashed-v text-gray">
+                    <div class="panel input">
+                      <p class="ellipsis text-gray">{{$root.wallet.getSecret()}}</p>
+                    </div>
+                  </div>
+                  <div class="large-3 columns hide-for-medium hide-for-small" ng-show="$root.wallet">
+                    <h5 class="m0">{{$root.wallet.getName()}}</h5>
+                    <p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
                   </div>
-                </div>
-                <div class="large-3 columns hide-for-medium hide-for-small" ng-show="$root.wallet">
-                  <h5 class="m0">{{$root.wallet.getName()}}</h5>
-                  <p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
                 </div>
               </div>
             </div>
@@ -133,7 +137,7 @@
       </div>
     </div>
     <div class="row p10t" ng-show="$root.wallet">
-      <div class="large-3 medium-3 small-3 columns">
+      <div class="large-3 medium-3 hide-for-small columns">
         <div>
           <strong>{{$root.wallet.getName()}}</strong>
         </div>
@@ -191,9 +195,9 @@
                 <div ng-show="!wallets.length">
                   <h3>Create a new wallet</h3>
                   <form name="createForm" ng-submit="create(createForm)" novalidate>
-                    <label>
+                    <p class="text-gray">
                     Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
-                    </label>
+                    </p>
                     <button type="submit" class="button secondary radius"
                       ng-disabled="createForm.$invalid || loading" loading="Creating">Create</button>
                   </form>
@@ -272,19 +276,17 @@
         </div>
         <div ng-show="!loading">
           <form name="setupForm" ng-submit="create(setupForm)" novalidate>
-          <div class="row">
-            <div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup">
-              <h3>Create new wallet</h3>
-              <div class="large-6 columns line-dashed-v">
-                <h6>Select total number of copayers</h6>
-                <select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
-                </select>
-              </div>
-              <div class="large-6 columns">
-                <h6>Select required signatures</h6>
-                <select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
-                </select>
-              </div>
+          <div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup">
+            <h3>Create new wallet</h3>
+            <div class="large-6 columns line-dashed-v">
+              <h6>Select total number of copayers</h6>
+              <select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
+              </select>
+            </div>
+            <div class="large-6 columns">
+              <h6>Select required signatures</h6>
+              <select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
+              </select>
             </div>
           </div>
           <div class="row">
@@ -309,13 +311,11 @@
                 <input type="text" placeholder="Bob" class="form-control" ng-model="myNickname">
             </div>
           </div>
-          <div class="row">
-            <div class="large-12 columns line-dashed">
-              <button type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
-               Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
-              </button>
-              <a class="button secondary radius" href="#signin">Go back</a>
-            </div>
+          <div class="large-12 columns line-dashed">
+            <button type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
+             Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
+            </button>
+            <a class="button secondary radius" href="#signin">Go back</a>
           </div>
           </form>
         </div>
@@ -351,13 +351,12 @@
                       <i class="fi-bitcoin"></i>
                     </span>
                   </span>
-
                 </a>
 
-                <button class="button small secondary radius" ng-click="showAll=!showAll" ng-show="(addresses|withoutFunds) > 1"> 
+                <a class="secondary radius" ng-click="showAll=!showAll" ng-show="(addresses|withoutFunds) > 1"> 
                   <span ng-if="!showAll">Show all</span>
                   <span ng-if="showAll">Show less</span>
-                </button>
+                </a>
               </div>
               <div class="large-4 medium-4 columns line-dashed-v text-center" ng-show="selectedAddr">
                 <qrcode size="160" data="{{selectedAddr.address}}"></qrcode>
@@ -396,9 +395,9 @@
           <div class="large-12 columns">
             <h4> Transaction proposals <span ng-if="onlyPending">[Pending]</span>  <small>({{txs.length}})</small></h4>
 
-            <ul class="button-group">
-            <li> <button  ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating"> Pending </button>
-            <li> <button  ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating"> All </button>
+            <ul class="button-group radius">
+            <li> <button class="secondary" ng-click="show(true)" ng-disabled="loading || onlyPending" loading="Updating"> Pending </button>
+            <li> <button class="secondary" ng-click="show()" ng-disabled="loading || !onlyPending" loading="Updating"> All </button>
             </ul>
             <div class="panel radius pending" ng-repeat="tx in txs | paged">
               <div class="txheader row m10">
@@ -489,12 +488,12 @@
                 </div>
               </div>
             </div>
-            <pagination ng-show="!onlyPending" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small"></pagination>
+            <pagination ng-show="!onlyPending" total-items="txs.length" items-per-page="txpItemsPerPage" page="txpCurrentPage" on-select-page="show()" class="pagination-small primary"></pagination>
           </div>
           <div class="large-12 columns">
             <h4>Last transactions</h4>
-            <button ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-hide="lastShowed && !loading">Show</button>
-            <button ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-show="lastShowed && !loading">Hide</button>
+            <a ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-hide="lastShowed && !loading">Show</a>
+            <a ng-click="toogleLast()" ng-disabled="loading" loading="Updating" ng-show="lastShowed && !loading">Hide</a>
             <div class="btransactions" ng-if="lastShowed">
               <div ng-if="!blockchain_txs[0].txid && !loading">
                 No transactions yet.
@@ -503,7 +502,7 @@
                 <div class="m15">
                   <div class="row">
                     <div class="large-8 columns">
-                      <a href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
+                      <a class="ellipsis" href="http://{{getShortNetworkName()}}.insight.is/tx/{{btx.txid}}" target="blank">
                         {{btx.txid}}
                       </a>
                     </div>
@@ -513,24 +512,24 @@
                   </div>
                 </div>
                 <div class="tx-copayers">
-                  <div class="large-5 columns">
+                  <div class="large-5 small-5 columns">
                     <div ng-repeat="vin in btx.vin track by $index | groupByAddress">
-                      <p class="left text-gray size-12"> {{vin.addr}} </p>
-                      <small class="right">{{vin.value}}</small>
+                      <p class="small-8 ellipsis left text-gray size-12"> {{vin.addr}} </p>
+                      <small class="small-4 right">{{vin.value}}</small>
                     </div>
                   </div>
-                  <div class="large-1 columns text-center">
+                  <div class="large-1 small-1 columns text-center">
                     <i class="fi-arrow-right"></i>
                   </div>
-                  <div class="large-6 columns">
+                  <div class="large-6 small-6 columns">
                     <div ng-repeat="vout in btx.vout">
                       <div class="row">
-                        <div class="large-10 columns">
+                        <div class="large-10 small-8 columns">
                           <div ng-repeat="addr in vout.scriptPubKey.addresses">
-                            <p class="text-gray size-12"> {{addr}} </p>
+                            <p class="ellipsis text-gray size-12"> {{addr}} </p>
                           </div>
                         </div>
-                        <div class="large-2 columns">
+                        <div class="large-2 small-4 columns">
                           <small>{{vout.value}}</small>
                         </div>
                       </div>
@@ -539,9 +538,9 @@
                 </div>
                 <div class="m15 size-12 text-gray">
                   <div class="row">
-                    <div class="large-4 columns">Fees: {{btx.fees}}</div>
-                    <div class="large-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
-                    <div class="large-4 columns text-right">Total: {{btx.valueOut}}</div>
+                    <div class="large-4 medium-4 small-4 columns">Fees: {{btx.fees}}</div>
+                    <div class="large-4 medium-4 small-4 columns text-center">Confirmations: {{btx.confirmations || 0}}</div>
+                    <div class="large-4 medium-4 small-4 columns text-right">Total: {{btx.valueOut}}</div>
                   </div>
                 </div>
               </div>