diff --git a/public/views/add.html b/public/views/add.html
index b399d9bd7..52663759c 100644
--- a/public/views/add.html
+++ b/public/views/add.html
@@ -1,34 +1,26 @@
-<div 
-  class="topbar-container" 
-  ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Add wallet'; closeToHome = true; noColor = true">
-</div>
+<ion-view view-title="Add wallet">
+  <ion-nav-buttons side="primary">
+    <a href ui-sref="tabs.home" class="button button-clear button-dark">Close</a>
+  </ion-nav-buttons>
 
+  <ion-content>
+    <ion-list>
+      <ion-item class="item-remove-animate item-icon-right" type="item-text-wrap" ui-sref="create">
+        <h2 translate>Create new wallet</h2>
+        <i class="icon ion-chevron-right icon-accessory"></i>
+      </ion-item>
 
+      <ion-item class="item-remove-animate item-icon-right" type="item-text-wrap" ui-sref="join">
+        <h2 translate>Join shared wallet</h2>
+        <i class="icon ion-chevron-right icon-accessory"></i>
+      </ion-item>
 
-<div class="content">
-<ul class="no-bullet manage size-12">
-	<li>
-		<a title="Create new wallet" href ui-sref="create">
-			<i class="fi-plus circle plus-fixed"></i>	
-			<i class="icon-arrow-right3 size-18 right m20t"></i>  
-			<span translate>Create new wallet</span>
-		</a>
-	</li>
-	<li>
-		<a title="Join shared wallet"  href ui-sref="join">
-			<i class="icon-people circle"></i>	  
-			<i class="icon-arrow-right3 size-18 right m20t"></i>  
-			<span translate>Join shared wallet</span>
-		</a>
-	</li>
-	<li>
-		<a title="Import wallet"   href ui-sref="import">
-			<i class="icon-download circle"></i>	  
-			<i class="icon-arrow-right3 size-18 right m20t"></i>  
-			<span translate>Import wallet </span>
-		</a>
-	</li>
+      <ion-item class="item-remove-animate item-icon-right" type="item-text-wrap" ui-sref="import">
+        <h2 translate>Import wallet</h2>
+        <i class="icon ion-chevron-right icon-accessory"></i>
+      </ion-item>
+    </ion-list>
+
+  </ion-content>
+</ion-view>
 
-</ul>
-</div>
diff --git a/public/views/create.html b/public/views/create.html
index cab18365a..1d427e392 100644
--- a/public/views/create.html
+++ b/public/views/create.html
@@ -1,164 +1,178 @@
-<div
-  class="topbar-container"
-  ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Create new wallet';  goBackToState = 'add'; noColor = true">
-</div>
+<ion-view view-title="Create new wallet" ng-controller="createController as create" ng-init="create.setTotalCopayers(1)">
+  <ion-nav-buttons side="primary">
+    <a href ui-sref="add" class="button icon-left ion-chevron-left button-clear button-dark">Add</a>
+  </ion-nav-buttons>
 
-<div class="content p20b" ng-controller="createController as create" ng-init="create.setTotalCopayers(1)">
+  <ion-content>
 
-  <div class="create-tab small-only-text-center" ng-hide="create.hideTabs">
-    <div class="row">
-      <div class="tab-container small-6 medium-6 large-6 columns" ng-class="{'selected': totalCopayers == 1}">
-        <a href ng-click="create.setTotalCopayers(1)" translate>Personal Wallet</a>
+    <div class="row" ng-hide="create.hideTabs">
+      <div class="col">
+        <button
+           ng-class="{'button-dark': totalCopayers == 1, 'button-stable': totalCopayers != 1}"
+           class="button button-full button-clear"
+           ng-click="create.setTotalCopayers(1)" translate>
+          Personal Wallet
+        </button>
       </div>
-      <div class="tab-container small-6 medium-6 large-6 columns" ng-class="{'selected': totalCopayers != 1}">
-        <a href ng-click="create.setTotalCopayers(3)" translate>Shared Wallet</a>
+      <div class="col">
+        <button
+           ng-class="{'button-stable': totalCopayers == 1, 'button-dark': totalCopayers != 1}"
+           class="button button-full button-clear"
+           ng-click="create.setTotalCopayers(3)" translate>
+          Shared Wallet
+        </button>
       </div>
     </div>
-  </div>
 
-  <form name="setupForm" ng-submit="create.create(setupForm)" novalidate>
-    <div class="box-notification m20b" id="notification" ng-show="create.error">
-      <span class="text-warning">
-        {{create.error|translate}}
-      </span>
+    <div class="padding assertive" ng-show="create.error">
+      {{create.error|translate}}
     </div>
-    <div class="row">
-      <div class="large-12 columns">
 
-        <div ng-hide="create.hideWalletName">
-          <label><span translate>Wallet name</span>
-            <div class="input">
-              <input type="text" placeholder="{{'Family vacation funds'|translate}}" class="form-control" name="walletName" ng-model="walletName" ng-required="true" ng-focus="create.formFocus('wallet-name')" ng-blur="create.formFocus(false)">
-            </div>
-          </label>
-        </div>
-        <div ng-show="totalCopayers != 1">
-          <label><span translate>Your nickname</span>
-            <div class="input">
-              <input type="text" placeholder="{{'John'|translate}}" class="form-control" name="myName" ng-model="myName" ng-required="totalCopayers != 1" ng-disabled="totalCopayers == 1" ng-focus="create.formFocus('my-name')" ng-blur="create.formFocus(false)">
-            </div>
-          </label>
-        </div>
-        <div class="row" ng-show="totalCopayers != 1">
-          <div class="large-6 medium-6 columns">
-            <label><span translate>Total number of copayers</span>
-              <select class="m10t" ng-model="totalCopayers"
-                ng-options="totalCopayers as totalCopayers for totalCopayers in create.TCValues"
-                ng-change="create.setTotalCopayers(totalCopayers)">
-              </select>
-            </label>
+    <form name="setupForm" ng-submit="create.create(setupForm)" novalidate>
+
+      <div class="list">
+        <label ng-hide="create.hideWalletName" class="item item-input item-stacked-label">
+          <span class="input-label" translate>Wallet name</span>
+          <input type="text"
+                 placeholder="{{'Family vacation funds'|translate}}"
+                 name="walletName"
+                 ng-model="walletName"
+                 ng-required="true"
+                 ng-focus="create.formFocus('wallet-name')"
+                 ng-blur="create.formFocus(false)">
+        </label>
+
+        <label ng-show="totalCopayers != 1" class="item item-input item-stacked-label">
+          <span class="input-label" translate>Your nickname</span>
+          <input type="text"
+                 placeholder="{{'John'|translate}}"
+                 name="myName"
+                 ng-model="myName"
+                 ng-required="totalCopayers != 1"
+                 ng-disabled="totalCopayers == 1"
+                 ng-focus="create.formFocus('my-name')"
+                 ng-blur="create.formFocus(false)">
+        </label>
+
+        <label ng-show="totalCopayers != 1" class="item item-input item-select">
+          <div class="input-label" translate>
+            Total number of copayers
           </div>
-          <div class="large-6 medium-6 columns">
-            <label><span translate>Required number of signatures</span>
-              <select class="m10t" ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in create.RCValues" ng-disabled="totalCopayers == 1">
-              </select>
-            </label>
+          <select class="m10t"
+                  ng-model="totalCopayers"
+                  ng-options="totalCopayers as totalCopayers for totalCopayers in create.TCValues"
+                  ng-change="create.setTotalCopayers(totalCopayers)">
+          </select>
+        </label>
+
+        <label ng-show="totalCopayers != 1" class="item item-input item-select">
+          <div class="input-label" translate>
+            Required number of signatures
           </div>
-        </div>
+          <select class="m10t"
+                  ng-model="requiredCopayers"
+                  ng-options="requiredCopayers as requiredCopayers for requiredCopayers in create.RCValues"
+                  ng-disabled="totalCopayers == 1">
+          </select>
+        </label>
 
-        <div class="m10t oh" ng-init="hideAdv=true">
-          <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
-            <i class="fi-widget m3r"></i>
-            <span translate ng-hide="!hideAdv">Show advanced options</span>
-            <span translate ng-hide="hideAdv">Hide advanced options</span>
-            <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-            <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-          </a>
-        </div>
+        <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+          <span translate ng-show="!showAdv">Show advanced options</span>
+          <span translate ng-show="showAdv">Hide advanced options</span>
+        </ion-toggle>
 
-        <div ng-hide="hideAdv" class="row">
-          <div class="large-12 columns m20b">
-            <div>
-              <label for="bws" class="oh">
-                <span>Wallet Service URL</span>
-                <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
-              </label>
-            </div>
+        <div ng-show="showAdv">
 
-            <div>
-              <label><span translate>Wallet Key</span>
-              <select class="m10t" ng-model="seedSource"
-                ng-options="seed as seed.label for seed in create.seedOptions"
-                ng-change="create.setSeedSource()">
-              </select>
-              </label>
-            </div>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Wallet Service URL</span>
+            <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
+          </label>
 
-            <div ng-show="create.seedSourceId == 'trezor' || create.seedSourceId == 'ledger'">
-              <label class="oh"><span translate>Account Number</span>
-                <input type="number" id="account" ng-model="account" ignore-mouse-wheel>
-              </label>
+          <label class="item item-input item-select">
+            <div class="input-label" translate>
+              Wallet Key
             </div>
+            <select class="m10t"
+                    ng-model="seedSource"
+                    ng-options="seed as seed.label for seed in create.seedOptions"
+                    ng-change="create.setSeedSource()">
+            </select>
+          </label>
 
-            <div class="box-notification" ng-show="create.seedSourceId=='new' && createPassphrase">
-              <span class="text-warning size-14">
-                <i class="fi-alert"></i>
-                <span translate>
-                WARNING: The password cannot be recovered. <b>Be sure to write it down</b>. The wallet can not be restored without the password.
-                </span>
-              </span>
-            </div>
+          <label class="item item-input item-stacked-label"
+                 ng-show="create.seedSourceId == 'trezor' || create.seedSourceId == 'ledger'">
+            <span class="input-label" translate>Account Number</span>
+            <input type="number" id="account" ng-model="account" ignore-mouse-wheel>
+          </label>
 
-            <div ng-show="create.seedSourceId=='new' ">
-              <label for="createPassphrase"  ><span translate>Add a Password</span>  <small translate>Add an optional password to secure the recovery phrase</small>
-                <div class="input">
-                  <input type="text" class="form-control" autocapitalize="off"
-                  name="createPassphrase" ng-model="createPassphrase">
-                </div>
-              </label>
+          <div class="card" ng-show="create.seedSourceId=='new' && createPassphrase">
+            <div class="item item-text-wrap" translate>
+              WARNING: The password cannot be recovered. <b>Be sure to write it down</b>. The wallet can not be restored without the password.
             </div>
+          </div>
 
-            <div ng-show="create.seedSourceId=='set'">
-              <label for="ext-master">
-                <span translate>Wallet Recovery Phrase</span>
-                <small translate>Enter the recovery phrase (BIP39)</small>
-                <input id="ext-master"
-                autocapitalize="off"
-                type="text"
-                name="privateKey" ng-model="privateKey">
-              </label>
-            </div>
+          <label class="item item-input item-stacked-label" ng-show="create.seedSourceId=='new'">
+            <span class="input-label" translate>Add a Password</span>
+            <input type="text"
+                   placeholder="{{'Add an optional password to secure the recovery phrase'|translate}}"
+                   autocapitalize="off"
+                   name="createPassphrase"
+                   ng-model="createPassphrase">
+          </label>
 
-            <div ng-show="create.seedSourceId=='set'">
-              <label for="passphrase"> <span translate>Password</span>  <small translate>The recovery phrase could require a password to be imported</small>
-                <div class="input">
-                  <input type="text" autocapitalize="off" class="form-control" name="passphrase" ng-model="passphrase">
-                </div>
-              </label>
-            </div>
 
-            <div ng-show="create.seedSourceId == 'set'">
-              <label class="oh"><span translate>Derivation Path</span> <small translate>BIP32 path for address derivation</small>
-                <input type="text" class="form-control" name="derivationPath" ng-model="derivationPath">
-              </label>
-            </div>
-            <div class="oh" ng-show="create.seedSourceId == 'new'">
-              <ion-toggle ng-model="testnetEnabled" toggle-class="toggle-balanced" class="bct">
-                <span class="toggle-label">Testnet</span>
-              </ion-toggle>
-            </div>
-            <div class="oh">
-              <ion-toggle ng-model="singleAddressEnabled" toggle-class="toggle-balanced" class="bct">
-                <div class="toggle-label">
-                  <span class="db" translate>Single Address Wallet</span>
-                  <small translate>For audit purposes</small>
-                </div>
-              </ion-toggle>
-            </div>
-          </div> <!-- columns -->
+          <label class="item item-input item-stacked-label" ng-show="create.seedSourceId=='set'">
+            <span class="input-label" translate>Wallet Recovery Phrase</span>
+            <input id="ext-master"
+                   placeholder="{{'Enter the recovery phrase (BIP39)'|translate}}"
+                   autocapitalize="off"
+                   type="text"
+                   name="privateKey"
+                   ng-model="privateKey">
+          </label>
+
+          <label class="item item-input item-stacked-label" ng-show="create.seedSourceId=='set'">
+            <span class="input-label" translate>Password</span>
+            <input type="text"
+                   placeholder="{{'The recovery phrase could require a password to be imported'|translate}}"
+                   autocapitalize="off"
+                   name="passphrase"
+                   ng-model="passphrase">
+          </label>
+
+          <label class="item item-input item-stacked-label" ng-show="create.seedSourceId == 'set'">
+            <span class="input-label" translate>Derivation Path</span>
+            <input type="text"
+                   placeholder="{{'BIP32 path for address derivation'|translate}}"
+                   name="derivationPath"
+                   ng-model="derivationPath">
+          </label>
+
+          <ion-toggle ng-show="create.seedSourceId == 'new'" ng-model="testnetEnabled" toggle-class="toggle-positive">
+            Testnet
+          </ion-toggle>
+
+          <ion-toggle ng-model="singleAddressEnabled" toggle-class="toggle-positive">
+            <span translate>Single Address Wallet</span>
+            <small translate>For audit purposes</small>
+          </ion-toggle>
+
         </div> <!-- advanced -->
+      </div> <!-- list -->
 
-        <button type="submit" class="button round black expand" ng-show="totalCopayers != 1" ng-disabled="setupForm.$invalid">
-          <span translate>Create {{requiredCopayers}}-of-{{totalCopayers}} wallet</span>
-        </button>
+      <button type="submit"
+              class="button button-block button-positive"
+              ng-show="totalCopayers != 1" ng-disabled="setupForm.$invalid">
+        <span translate>Create {{requiredCopayers}}-of-{{totalCopayers}} wallet</span>
+      </button>
 
-        <button type="submit" class="button round black expand" ng-show="totalCopayers == 1" ng-disabled="setupForm.$invalid">
-          <span translate>Create new wallet</span>
-        </button>
+      <button type="submit"
+              class="button button-block button-positive"
+              ng-show="totalCopayers == 1" ng-disabled="setupForm.$invalid">
+        <span translate>Create new wallet</span>
+      </button>
+
+    </form>
+  </ion-content>
+</ion-view>
 
-      </div> <!-- large-12 columns -->
-    </div> <!-- row -->
-  </form>
-<div class="extra-margin-bottom"></div>
-</div>
diff --git a/public/views/import.html b/public/views/import.html
index ecc99485a..9c40af245 100644
--- a/public/views/import.html
+++ b/public/views/import.html
@@ -1,228 +1,226 @@
-<div
-  class="topbar-container"
-  ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Import wallet';  goBackToState = 'add'; noColor = true">
-</div>
+<ion-view view-title="Import wallet" ng-controller="importController" ng-init="type='12'">
+  <ion-nav-buttons side="primary">
+    <a href ui-sref="add" class="button icon-left ion-chevron-left button-clear button-dark">Add</a>
+  </ion-nav-buttons>
+  <ion-nav-buttons side="secondary">
+    <qr-scanner class="button button-clear button-positive" on-scan="processWalletInfo(data)"></qr-scanner>
+  </ion-nav-buttons>
+
+  <ion-content>
 
-<div class="content p20b" ng-controller="importController" ng-init="type='12'">
-  <div class="create-tab pr small-only-text-center" ng-hide="create.hideTabs">
     <div class="row">
-      <div class="tab-container small-4 medium-4 large-4" ng-class="{'selected': type =='12'}">
-        <a href ng-click="setType('12')" translate>Recovery Phrase</a>
+      <div class="col">
+        <button
+           ng-class="{'button-dark': type == '12', 'button-stable': type != '12'}"
+           class="button button-full button-clear"
+           ng-click="setType('12')" translate>
+          Recovery Phrase
+        </button>
       </div>
-      <div class="tab-container small-4 medium-4 large-4" ng-class="{'selected': type=='file'}">
-        <a href ng-click="setType('file')" translate>File/Text</a>
+      <div class="col">
+        <button
+           ng-class="{'button-dark': type == 'file', 'button-stable': type != 'file'}"
+           class="button button-full button-clear"
+           ng-click="setType('file')" translate>
+          File/Text
+        </button>
       </div>
-      <div class="tab-container small-4 medium-4 large-4" ng-class="{'selected': type=='hwWallet'}">
-        <a href ng-click="setType('hwWallet')" translate>Hardware Wallet</a>
+      <div class="col">
+        <button
+           ng-class="{'button-dark': type == 'hwWallet', 'button-stable': type != 'hwWallet'}"
+           class="button button-full button-clear"
+           ng-click="setType('hwWallet')" translate>
+          Hardware Wallet
+        </button>
       </div>
     </div>
-  </div>
 
-  <div ng-show="type == '12' ">
+    <div ng-show="type == '12'">
 
-    <div class="row" ng-click="importErr = error = null">
-      <div class="large-12 columns">
-        <div class="box-notification m20b" ng-show="importErr">
-          <div class="text-warning">
-            <div class="m10 text-bold" translate>Could not access the wallet at the server. Please check:</div>
-            <ul class="size-12">
-              <li translate>The password of the recovery phrase (if set)</li>
-              <li translate>The derivation path</li>
-              <li translate>The wallet service URL</li>
-            </ul>
-            <div class="m15l">
-              <span translate>NOTE: To import a wallet from a 3rd party software, please go to Add Wallet &gt; Create Wallet, and specify the Recovery Phrase there.</span><br>
-            </div>
+      <div ng-show="importErr || error" class="padding assertive" ng-click="importErr = error = null">
+        <div ng-show="importErr">
+          <div translate>Could not access the wallet at the server. Please check:</div>
+          <ul>
+            <li translate>The password of the recovery phrase (if set)</li>
+            <li translate>The derivation path</li>
+            <li translate>The wallet service URL</li>
+          </ul>
+          <div translate>
+            NOTE: To import a wallet from a 3rd party software, please go to Add Wallet &gt; Create Wallet, and specify the Recovery Phrase there.
           </div>
         </div>
 
-        <div class="box-notification m20b" ng-show="error">
-          <div class="text-warning">{{error|translate}}</div>
+        <div ng-show="error">
+          {{error|translate}}
         </div>
       </div>
-    </div>
 
-    <div class="row">
-      <div class="large-12 columns">
-        <form name="importForm12" ng-submit="importMnemonic(importForm12)" novalidate>
-          <label for="words" class="m25r">
-            <span translate>Type the Recovery Phrase (usually 12 words)</span>:
+      <form name="importForm12" ng-submit="importMnemonic(importForm12)" novalidate>
+        <div class="list">
+          <label class="item item-input item-stacked-label">
+            <span class="input-label" translate>Type the Recovery Phrase (usually 12 words)</span>
+            <textarea name="words"
+                      ng-model="words"
+                      rows="3"
+                      autocapitalize="off"
+                      spellcheck="false"></textarea>
           </label>
 
-          <div class="qr-scanner-input-import">
-            <qr-scanner on-scan="processWalletInfo(data)"></qr-scanner>
+          <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+            <span translate ng-show="!showAdv">Show advanced options</span>
+            <span translate ng-show="showAdv">Hide advanced options</span>
+          </ion-toggle>
+
+          <div ng-show="showAdv">
+
+            <label class="item item-input item-stacked-label">
+              <span class="input-label">Wallet Service URL</span>
+              <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
+            </label>
+
+            <label class="item item-input item-stacked-label">
+              <span class="input-label" translate>Password</span>
+              <input type="text"
+                     placeholder="{{'The recovery phrase could require a password to be imported'|translate}}"
+                     autocapitalize="off"
+                     name="passphrase"
+                     ng-model="passphrase">
+            </label>
+
+            <label class="item item-input item-stacked-label">
+              <span class="input-label" translate>Derivation Path</span>
+              <input type="text"
+                     placeholder="{{'BIP32 path for address derivation'|translate}}"
+                     name="derivationPath"
+                     ng-model="derivationPath">
+            </label>
+
+            <ion-toggle ng-model="testnetEnabled" ng-change="setDerivationPath(testnetEnabled)" toggle-class="toggle-positive">
+              Testnet
+            </ion-toggle>
           </div>
-
-          <textarea class="form-control m10t" name="words" ng-model="words" rows="3" autocapitalize="off" spellcheck="false"></textarea>
-
-          <div class="m10t oh" ng-init="hideAdv=true">
-            <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
-              <i class="fi-widget m3r"></i>
-              <span translate ng-hide="!hideAdv">Show advanced options</span>
-              <span translate ng-hide="hideAdv">Hide advanced options</span>
-              <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-              <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-            </a>
-          </div>
-
-          <div ng-hide="hideAdv" class="row">
-            <div class="large-12 columns">
-              <label for="passphrase" class="oh"><span translate>Password</span>  <small translate>The Wallet Recovery Phrase could require a password to be imported</small>
-                <div class="input">
-                  <input type="password" class="form-control" placeholder="{{'Password'|translate}}"
-                  name="passphrase" ng-model="passphrase">
-                </div>
-              </label>
-
-              <div>
-                <label class="oh"><span translate>Derivation Path</span> <small translate>BIP32 path for address derivation</small>
-                  <input type="text" class="form-control" name="derivationPath" ng-model="derivationPath">
-                </label>
-              </div>
-
-              <label  for="bws" class="oh">
-                <span>Wallet Service URL</span>
-                <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
-              </label>
-
-              <div class="oh">
-                <ion-toggle ng-model="testnetEnabled" ng-change="setDerivationPath()" toggle-class="toggle-balanced" class="bct">
-                  <span class="toggle-label">Testnet</span>
-                </ion-toggle>
-              </div>
-            </div>
-          </div>
-
-          <button translate type="submit" class="button round expand black m10t" ng-disabled="importForm12.$invalid">Import</button>
-        </form>
-      </div>
-    </div>
-  </div>
-
-  <div ng-show="type == 'file' ">
-    <div class="row">
-      <div class="large-12 columns">
-        <div class="box-notification m20b" ng-show="error">
-          <span class="text-warning size-14">
-            {{error|translate}}
-          </span>
         </div>
-        <form name="importForm" ng-submit="importBlob(importForm)" novalidate>
 
-          <div ng-show="!index.isSafari && !index.isCordova" class="line-b m10b">
-            <label for="backupFile">
-              <span translate>Choose a backup file from your computer</span>  <i class="fi-laptop"></i>
-            </label>
-            <input type="file" class="form-control" placeholder="{{'Select a backup file'|translate}}"
-            name="backupFile" ng-model="backupFile" ng-file-select>
-          </div>
+        <button type="submit"
+                class="button button-block button-positive"
+                ng-disabled="importForm12.$invalid" translate>Import</button>
+      </form>
+    </div>
 
-          <div ng-show="index.isSafari || index.isCordova">
-            <label for="backupText">
-              <span translate>Paste the backup plain text code</span>  <i class="fi-clipboard"></i>
-            </label>
-            <textarea class="form-control" name="backupText" ng-model="backupText" rows="5"></textarea>
-          </div>
+    <div ng-show="type == 'file'">
 
-          <label for="password"><span translate>Password</span>
+      <div class="padding assertive" ng-show="error">
+        {{error|translate}}
+      </div>
+
+      <form name="importForm" ng-submit="importBlob(importForm)" novalidate>
+
+        <div class="list">
+          <label class="item item-input item-stacked-label" ng-show="!index.isSafari && !index.isCordova">
+            <span class="input-label" translate>Choose a backup file from your computer</span>
+            <input type="file"
+                   placeholder="{{'Select a backup file'|translate}}"
+                   name="backupFile"
+                   ng-model="backupFile" ng-file-select>
           </label>
-          <div class="input">
-            <input type="password" class="form-control" placeholder="{{'Your password'|translate}}"
-            name="password" ng-model="password">
+
+          <label class="item item-input item-stacked-label" ng-show="index.isSafari || index.isCordova">
+            <span class="input-label" translate>Paste the backup plain text code</span>
+            <textarea name="backupText" ng-model="backupText" rows="5"></textarea>
+          </label>
+
+          <label class="item item-input item-stacked-label">
+            <span class="input-label" translate>Password</span>
+            <input type="password"
+                   placeholder="{{'Your password'|translate}}"
+                   name="password"
+                   ng-model="password">
+          </label>
+
+          <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+            <span translate ng-show="!showAdv">Show advanced options</span>
+            <span translate ng-show="showAdv">Hide advanced options</span>
+          </ion-toggle>
+
+          <div ng-show="showAdv">
+
+            <label class="item item-input item-stacked-label">
+              <span class="input-label">Wallet Service URL</span>
+              <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
+            </label>
+
           </div>
-
-          <div class="m10t oh" ng-init="hideAdv=true">
-            <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
-              <i class="fi-widget m3r"></i>
-              <span translate ng-hide="!hideAdv">Show advanced options</span>
-              <span translate ng-hide="hideAdv">Hide advanced options</span>
-              <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-              <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-            </a>
-          </div>
-          <div ng-hide="hideAdv" class="row">
-            <div class="large-12 columns">
-
-              <label  for="bws" class="oh">
-                <span>Wallet Service URL</span>
-                <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
-              </label>
-            </div>
-          </div>
-
-          <button translate type="submit" class="button round expand black"
-            ng-disabled="importForm.$invalid || !password ">
-            Import backup
-          </button>
-        </form>
-      </div>
-    </div>
-  </div>
-
-  <div ng-show="type == 'hwWallet'">
-    <div class="row">
-      <div class="large-12 columns">
-        <div class="box-notification m20b" ng-show="error">
-          <span class="text-warning size-14">
-            {{error|translate}}
-          </span>
         </div>
 
-        <form name="importForm3" ng-submit="importHW(importForm3)" novalidate>
-          <div ng-show="!seedOptions[0]">
-            <span translate>No hardware wallets supported on this device</span>
+        <button type="submit"
+                class="button round expand black"
+                ng-disabled="importForm.$invalid || !password " translate>
+          Import backup
+        </button>
+      </form>
+    </div>
+
+    <div ng-show="type == 'hwWallet'">
+      <div class="padding assertive" ng-show="error">
+        {{error|translate}}
+      </div>
+
+      <form name="importForm3" ng-submit="importHW(importForm3)" novalidate>
+
+        <div class="card" ng-show="!seedOptions[0]">
+          <div class="item item-text-wrap" translate>
+            No hardware wallets supported on this device
           </div>
-          <div ng-show="seedOptions[0]">
-            <div>
-              <label><span translate>Wallet Type</span>
-              <select class="m10t" ng-model="seedSource"
-                ng-options="seed as seed.label for seed in seedOptions"
-                ng-change="setSeedSource()">
+        </div>
+
+        <div ng-show="seedOptions[0]">
+          <div class="list">
+
+            <label class="item item-input item-select">
+              <div class="input-label" translate>
+                Wallet Type
+              </div>
+              <select ng-model="seedSource"
+                      ng-options="seed as seed.label for seed in seedOptions"
+                      ng-change="setSeedSource()">
               </select>
+            </label>
+
+            <label class="item item-input item-stacked-label"
+                   ng-show="seedSourceId == 'trezor' || seedSourceId == 'ledger'">
+              <span class="input-label" translate>Account Number</span>
+              <input type="number" id="account" ng-model="account" ignore-mouse-wheel>
+            </label>
+
+            <ion-toggle ng-show="seedSourceId == 'trezor'"
+                        ng-model="isMultisig"
+                        toggle-class="toggle-positive">
+              <span translate>Shared Wallet</span>
+            </ion-toggle>
+
+            <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+              <span translate ng-show="!showAdv">Show advanced options</span>
+              <span translate ng-show="showAdv">Hide advanced options</span>
+            </ion-toggle>
+
+            <div ng-show="showAdv">
+
+              <label class="item item-input item-stacked-label">
+                <span class="input-label">Wallet Service URL</span>
+                <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
               </label>
+
             </div>
+          </div>
 
-            <div ng-show="seedSourceId == 'trezor' || seedSourceId == 'ledger'">
+          <button translate type="submit" class="button button-block button-positive">
+            Import
+          </button>
+        </div> <!-- seedoptions show -->
 
-              <label class="oh"><span translate>Account Number</span>
-                <input type="number" id="account" ng-model="account" ignore-mouse-wheel>
-              </label>
-            </div>
-
-            <div class="oh" ng-show="seedSourceId == 'trezor'">
-              <ion-toggle ng-model="isMultisig" toggle-class="toggle-balanced" class="bct">
-                <span class="toggle-label" translate>Shared Wallet</span>
-              </ion-toggle>
-            </div>
-
-            <div class="m10t oh" ng-init="hideAdv=true">
-              <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
-                <i class="fi-widget m3r"></i>
-                <span translate ng-hide="!hideAdv">Show advanced options</span>
-                <span translate ng-hide="hideAdv">Hide advanced options</span>
-                <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-                <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-              </a>
-            </div>
-            <div ng-hide="hideAdv" class="row">
-              <div class="large-12 columns">
-
-                <label  for="bws" class="oh">
-                  <span>Wallet Service URL</span>
-                  <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
-                </label>
-              </div>
-            </div>
-
-            <button translate type="submit" class="button round expand black">
-              Import
-            </button>
-          </div> <!-- seedoptions show -->
-        </form>
-      </div>
+      </form>
     </div>
-  </div>
-</div>
 
-<div class="extra-margin-bottom"></div>
+  </ion-content>
+</ion-view>
+
diff --git a/public/views/join.html b/public/views/join.html
index 0c62e118c..14ddb49b3 100644
--- a/public/views/join.html
+++ b/public/views/join.html
@@ -1,130 +1,126 @@
-<div
-  class="topbar-container"
-  ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Join shared wallet'; goBackToState = 'add'; noColor = true">
-</div>
+<ion-view view-title="Join shared wallet" ng-controller="joinController as join">
+  <ion-nav-buttons side="primary">
+    <a href ui-sref="add" class="button icon-left ion-chevron-left button-clear button-dark">Add</a>
+  </ion-nav-buttons>
+  <ion-nav-buttons side="secondary">
+    <qr-scanner class="button button-clear button-positive" on-scan="join.onQrCodeScanned(data)"></qr-scanner>
+  </ion-nav-buttons>
 
+  <ion-content>
 
-<div class="content p20v" ng-controller="joinController as join">
-  <form name="joinForm" ng-submit="join.join(joinForm)" novalidate>
-    <div class="box-notification m20b" ng-show="join.error">
-      <span class="text-warning">
-        {{join.error|translate}}
-      </span>
+    <div class="padding assertive" ng-show="join.error">
+      {{join.error|translate}}
     </div>
-    <div class="row">
-      <div class="large-12 columns">
 
-        <div>
-          <label><span translate>Your nickname</span>
-            <div class="input">
-              <input type="text" placeholder="{{'John'|translate}}" class="form-control" name="myName" ng-model="myName" ng-required="true">
-            </div>
-          </label>
-        </div>
+    <form name="joinForm" ng-submit="join.join(joinForm)" novalidate>
 
-        <div class="row collapse">
-          <label for="secret" class="left"><span translate>Wallet Invitation</span>
-            <small translate ng-show="joinForm.secret.$pristine">Required</small>
-          </label>
-          <span class="has-error right size-12" ng-show="joinForm.secret.$invalid
-            && !joinForm.secret.$pristine">
-            <span class="icon-input"><i class="fi-x"></i></span>
-            <span translate>Wallet Invitation is not valid!</span>
+      <div class="list">
+
+        <label class="item item-input item-stacked-label">
+          <span class="input-label" translate>Your nickname</span>
+          <input type="text"
+                 placeholder="{{'John'|translate}}"
+                 name="myName"
+                 ng-model="myName"
+                 ng-required="true">
+        </label>
+
+        <label class="item item-input item-stacked-label">
+          <span class="input-label">
+            Wallet Invitation
           </span>
-          <small class="icon-input right" ng-show="joinForm.secret.$valid
-            && !joinForm.secret.$pristine"><i class="fi-check"></i></small>
-        </div>
+          <i class="icon ion-checkmark-circled balanced" ng-show="joinForm.secret.$valid &&
+          !joinForm.secret.$pristine && secret"></i>
+          <i class="icon ion-close-circled assertive" ng-show="joinForm.secret.$invalid &&
+          !joinForm.secret.$pristine && secret"></i>
+          <input id="secret"
+                 type="text"
+                 placeholder="{{'Paste invitation here'|translate}}"
+                 name="secret"
+                 ng-model="secret"
+                 wallet-secret required>
+        </label>
 
-        <div class="input">
-          <input id="secret" type="text" placeholder="{{'Paste invitation here'|translate}}" name="secret" ng-model="secret" wallet-secret required>
-          <div class="qr-scanner-input">
-            <qr-scanner on-scan="join.onQrCodeScanned(data)"></qr-scanner>
-          </div>
-        </div>
+        <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+          <span translate ng-show="!showAdv">Show advanced options</span>
+          <span translate ng-show="showAdv">Hide advanced options</span>
+        </ion-toggle>
 
-        <div class="m10t oh" ng-init="hideAdv=true">
-          <a class="button outline light-gray expand tiny p10i" ng-click="hideAdv=!hideAdv">
-            <i class="fi-widget m3r"></i>
-            <span translate ng-hide="!hideAdv">Show advanced options</span>
-            <span translate ng-hide="hideAdv">Hide advanced options</span>
-            <i ng-if="hideAdv" class="icon-arrow-down4"></i>
-            <i ng-if="!hideAdv" class="icon-arrow-up4"></i>
-          </a>
-        </div>
+        <div ng-show="showAdv">
 
-        <div ng-hide="hideAdv" class="row">
-          <div class="large-12 columns">
-            <div>
-              <label for="bws" class="oh">
-                <span>Wallet Service URL</span>
-                <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
-              </label>
+          <label class="item item-input item-stacked-label">
+            <span class="input-label">Wallet Service URL</span>
+            <input type="text" id="bwsurl" name="bwsurl" ng-model="bwsurl">
+          </label>
+
+          <label class="item item-input item-select">
+            <div class="input-label" translate>
+              Wallet Key
             </div>
+            <select class="m10t"
+                    ng-model="seedSource"
+                    ng-options="seed as seed.label for seed in join.seedOptions"
+                    ng-change="join.setSeedSource()">
+            </select>
+          </label>
 
-            <div>
-              <label><span translate>Wallet Key </span>
-              <select class="m10t" ng-model="seedSource"
-                ng-options="seed as seed.label for seed in join.seedOptions"
-                ng-change="join.setSeedSource()">
-              </select>
-              </label>
-            </div>
+          <label class="item item-input item-stacked-label"
+                 ng-show="join.seedSourceId == 'trezor' || join.seedSourceId == 'ledger'">
+            <span class="input-label" translate>Account Number</span>
+            <input type="number" id="account" ng-model="account" ignore-mouse-wheel>
+          </label>
 
-            <div ng-show="join.seedSourceId == 'trezor' || join.seedSourceId == 'ledger'">
-              <label class="oh"><span translate>Account Number</span>
-                <input type="number" id="account" ng-model="account" ignore-mouse-wheel>
-              </label>
-            </div>
-
-            <div class="box-notification" ng-show="join.seedSourceId=='new' && createPassphrase">
-              <span class="text-warning size-14">
-                <i class="fi-alert"></i>
-                <span translate>
+          <div class="card" ng-show="join.seedSourceId=='new' && createPassphrase">
+            <div class="item item-text-wrap">
+              <span translate>
                 WARNING: The password cannot be recovered. <b>Be sure to write it down</b>. The wallet can not be restored without the password.
-                </span>
               </span>
             </div>
+          </div>
 
-            <div ng-show="join.seedSourceId=='new' ">
-              <label for="createPassphrase"  ><span translate>Add a Password</span>  <small translate>Add an optional password to secure the recovery phrase</small>
-                <div class="input">
-                  <input type="text" class="form-control" autocapitalize="off"
-                  name="createPassphrase" ng-model="createPassphrase">
-                </div>
-              </label>
-            </div>
+          <label class="item item-input item-stacked-label" ng-show="join.seedSourceId=='new'">
+            <span class="input-label" translate>Add a Password</span>
+            <input type="text"
+                   placeholder="{{'Add an optional password to secure the recovery phrase'|translate}}"
+                   autocapitalize="off"
+                   name="createPassphrase"
+                   ng-model="createPassphrase">
+          </label>
 
-            <div ng-show="join.seedSourceId=='set'">
-              <label for="ext-master">
-                <span translate>Wallet Recovery Phrase</span>
-                <small translate>Enter the recovery phrase (BIP39)</small>
-                <input id="ext-master"
-                autocapitalize="off"
-                type="text"
-                name="privateKey" ng-model="privateKey">
-              </label>
-            </div>
+          <label class="item item-input item-stacked-label" ng-show="join.seedSourceId=='set'">
+            <span class="input-label" translate>Wallet Recovery Phrase</span>
+            <input id="ext-master"
+                   placeholder="{{'Enter the recovery phrase (BIP39)'|translate}}"
+                   autocapitalize="off"
+                   type="text"
+                   name="privateKey"
+                   ng-model="privateKey">
+          </label>
+
+          <label class="item item-input item-stacked-label" ng-show="join.seedSourceId=='set'">
+            <span class="input-label" translate>Password</span>
+            <input type="text"
+                   placeholder="{{'The recovery phrase could require a password to be imported'|translate}}"
+                   autocapitalize="off"
+                   name="passphrase"
+                   ng-model="passphrase">
+          </label>
+
+          <label class="item item-input item-stacked-label" ng-show="join.seedSourceId == 'set'">
+            <span class="input-label" translate>Derivation Path</span>
+            <input type="text"
+                   placeholder="{{'BIP32 path for address derivation'|translate}}"
+                   name="derivationPath"
+                   ng-model="derivationPath">
+          </label>
 
-            <div ng-show="join.seedSourceId=='set'">
-              <label for="passphrase"> <span translate>Password</span>  <small translate>The recovery phrase could require a password to be imported</small>
-                <div class="input">
-                  <input type="text" autocapitalize="off" class="form-control" name="passphrase" ng-model="passphrase">
-                </div>
-              </label>
-            </div>
-            <div ng-show="join.seedSourceId == 'set'">
-              <label class="oh"><span translate>Derivation Path</span> <small translate>BIP32 path for address derivation</small>
-                <input type="text" class="form-control" name="derivationPath" ng-model="derivationPath">
-              </label>
-            </div>
-          </div> <!-- columns -->
         </div> <!-- advanced -->
+      </div> <!-- list -->
+
+      <button type="submit" class="button button-block button-positive" ng-disabled="joinForm.$invalid" translate>
+        Join
+      </button>
+    </form>
+  </ion-content>
+</ion-view>
 
-        <button translate type="submit" class="button expand black m0 round"
-          ng-disabled="joinForm.$invalid">Join</button>
-      </div> <!-- large-12 columns -->
-    </div> <!-- row -->
-  </form>
-</div>
-<div class="extra-margin-bottom"></div>
diff --git a/src/js/controllers/import.js b/src/js/controllers/import.js
index 8c9f72295..8b1bedb18 100644
--- a/src/js/controllers/import.js
+++ b/src/js/controllers/import.js
@@ -178,8 +178,8 @@ angular.module('copayApp.controllers').controller('importController',
       }, 100);
     };
 
-    $scope.setDerivationPath = function() {
-      if ($scope.testnetEnabled)
+    $scope.setDerivationPath = function(testnetEnabled) {
+      if (testnetEnabled)
         $scope.derivationPath = derivationPathHelper.defaultTestnet;
       else
         $scope.derivationPath = derivationPathHelper.default;
diff --git a/src/js/directives/qrScanner.js b/src/js/directives/qrScanner.js
index f4fddbc19..09f3b5c61 100644
--- a/src/js/directives/qrScanner.js
+++ b/src/js/directives/qrScanner.js
@@ -70,6 +70,6 @@ angular.module('copayApp.directives')
       },
       controller: controller,
       replace: true,
-      template: '<a id="camera-icon" class="p10" ng-click="openScanner()"><i class="icon-scan size-21"></i></a>'
+      template: '<a ng-click="openScanner()"><i class="icon ion-qr-scanner"></i></a>'
     }
   });
diff --git a/src/sass/main.scss b/src/sass/main.scss
new file mode 100644
index 000000000..be3be54ab
--- /dev/null
+++ b/src/sass/main.scss
@@ -0,0 +1,449 @@
+/*
+ *
+ * Copay main CSS
+ *
+ */
+
+
+// QR Code
+
+#qr-canvas {
+  display: none;
+}
+
+#qrcode-scanner-video {
+  display: block;
+  margin: 0 auto;
+}
+
+// General purpose
+.dn {
+  display: none;
+}
+
+.dni {
+  display: none !important;
+}
+
+.pr {
+  position: relative;
+}
+
+.pa {
+  position: absolute;
+}
+
+.m0 {
+  margin: 0;
+}
+
+.p0i {
+  padding: 0 !important;
+}
+
+.db {
+  display: block;
+}
+
+.dib {
+  display: inline-block;
+}
+
+.size-10 {
+  font-size: 10px;
+}
+
+.size-12 {
+  font-size: 12px;
+}
+
+.size-14 {
+  font-size: 14px;
+}
+
+.size-16 {
+  font-size: 16px;
+}
+
+.size-18 {
+  font-size: 18px;
+}
+
+.size-21 {
+  font-size: 21px;
+}
+
+.size-24 {
+  font-size: 24px;
+}
+
+.size-28 {
+  font-size: 28px;
+}
+
+.size-36 {
+  font-size: 36px;
+}
+
+.size-42 {
+  font-size: 42px;
+}
+
+.size-48 {
+  font-size: 48px;
+}
+
+.size-60 {
+  font-size: 60px;
+}
+
+.size-72 {
+  font-size: 72px;
+}
+
+.m5 {
+  margin: 5px;
+}
+
+.m5t {
+  margin-top: 5px;
+}
+
+.m8t {
+  margin-top: 8px;
+}
+
+.m5b {
+  margin-bottom: 5px;
+}
+
+.m5r {
+  margin-right: 5px;
+}
+
+.m10 {
+  margin: 10px;
+}
+
+.m10b {
+  margin-bottom: 10px;
+}
+
+.m3t {
+  margin-top: 3px;
+}
+
+.m10t {
+  margin-top: 10px;
+}
+
+.m15b {
+  margin-bottom: 15px;
+}
+
+.m15r {
+  margin-right: 15px;
+}
+
+.m20b {
+  margin-bottom: 20px;
+}
+
+.m30b {
+  margin-bottom: 30px;
+}
+
+.m40b {
+  margin-bottom: 40px;
+}
+
+.m50b {
+  margin-bottom: 50px;
+}
+
+.m10r {
+  margin-right: 10px;
+}
+
+.m40r {
+  margin-right: 40px;
+}
+
+.m25r {
+  margin-right: 25px;
+}
+
+.m10l {
+  margin-left: 10px;
+}
+
+.m5l {
+  margin-left: 5px;
+}
+
+.m15l {
+  margin-left: 15px;
+}
+
+.m15t {
+  margin-top: 15px;
+}
+
+.m20r {
+  margin-right: 20px;
+}
+
+.m20t {
+  margin-top: 20px;
+}
+
+.m20ti {
+  margin-top: 20px !important;
+}
+
+.m20tp {
+  margin-top: 20%;
+}
+
+.m30tp {
+  margin-top: 30%;
+}
+
+.m15 {
+  margin: 15px;
+}
+
+.m15h {
+  margin: 0 15px;
+}
+
+.p10t {
+  padding-top: 10px;
+}
+
+.p10h {
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+.p15h {
+  padding: 0 15px;
+}
+
+.p0r {
+  padding-right: 0;
+}
+
+.p70r {
+  padding-right: 70px;
+}
+
+.p70l {
+  padding-left: 70px;
+}
+
+.p5h {
+  padding: 0 5px;
+}
+
+.p20h {
+  padding: 0 20px;
+}
+
+.p20v {
+  padding: 20px 0;
+}
+
+.p20b {
+  padding-bottom: 20px;
+}
+
+.p25b {
+  padding-bottom: 25px;
+}
+
+.p25l {
+  padding-left: 25px;
+}
+
+.p15l {
+  padding-left: 15px;
+}
+
+.p15 {
+  padding: 15px;
+}
+
+.p20 {
+  padding: 20px;
+}
+
+.p15t {
+  padding-top: 15px;
+}
+
+.p20t {
+  padding-top: 20px;
+}
+
+.p50t {
+  padding-top: 50px;
+}
+
+.p10 {
+  padding: 10px;
+}
+
+.p10i {
+  padding: 10px !important;
+}
+
+.p10b {
+  padding-bottom: 10px;
+}
+
+.p45t {
+  padding-top: 45px;
+}
+
+.p60t {
+  padding-top: 60px;
+}
+
+.p60b {
+  padding-bottom: 60px;
+}
+
+.m60t {
+  margin-top: 60px;
+}
+
+.p45li {
+  padding-left: 45px !important;
+}
+
+.m30v {
+  margin: 30px 0;
+}
+
+.m10h {
+  margin: 0 10px;
+}
+
+.m10v {
+  margin: 10px 0;
+}
+
+.m20v {
+  margin: 20px 0;
+}
+
+.m30v {
+  margin: 30px 0;
+}
+
+.m30a {
+  margin: 30px auto;
+}
+
+.m-negative-l {
+  margin-left: -0.9375rem;
+}
+
+.br100 {
+  border-radius: 100% !important;
+}
+
+.lh {
+  line-height: 0;
+}
+
+.lh140 {
+  line-height: 140%;
+}
+
+.oh {
+  overflow: hidden;
+}
+
+.vm {
+  vertical-align: middle;
+}
+
+.vt {
+  vertical-align: top;
+}
+
+.ma {
+  margin: 0 auto;
+}
+
+.tu {
+  text-transform: uppercase;
+}
+
+.tl {
+  text-transform: lowercase;
+}
+
+/*
+ * Calculator
+ */
+
+.calculator .header-calc {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+}
+
+.calculator .button-calc {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
+
+.calculator .button-calc .row {
+  padding: 0 !important;
+}
+
+.calculator .button-calc .columns {
+  cursor: pointer;
+  text-align: center;
+}
+
+.calculator .button-calc .operator {
+  color: #2C3E50;
+  background-color: #eee;
+}
+
+.calculator .button-calc .columns:active {
+  background-color: #eee;
+}
+
+.calculator .button-calc .operator:active {
+  background-color: #f8f8f8;
+}
+
+// No looks likes locked
+input[type="number"] {
+  &[readonly] {
+    background-color: #F6F7F9;
+    padding-left: 0;
+  }
+}
+
+@media all and (max-height: 480px) {
+	.calculator .button-calc .columns { padding: 10px; }
+  .calculator .header-calc { top: 11%; }
+}
+
+@media (min-height: 481px) and (max-height: 670px) {
+	.calculator .button-calc .columns { padding: 15px; }
+  .calculator .header-calc { top: 15%; }
+}
+
+@media all and (min-height: 671px) {
+	.calculator .button-calc .columns { padding: 20px; }
+  .calculator .header-calc { top: 18%; }
+}
+