diff --git a/src/App.js b/src/App.js
index 835ad8ad2..d04d13805 100644
--- a/src/App.js
+++ b/src/App.js
@@ -121,7 +121,7 @@ export default class App extends Component {
       sendKey: "",
       alert: null,
       loadingTitle:'loading...',
-      title: this.props.t,
+      title: props.t('title'),
       extraHeadroom:0,
       balance: 0.00,
       vendors: {},
@@ -931,6 +931,22 @@ export default class App extends Component {
                       )
                     }
 
+                    if (view.includes("loader_")) {
+                      const network = view.replace("loader_");
+                      return (
+                        <div>
+                          <div
+                            style={{zIndex:1,position:"relative",color:"#dddddd"}}>
+    
+                            <NavCard
+                              title={"Sending..."}
+                              goBack={this.goBack.bind(this)} />
+                          </div>
+                          <Loader loaderImage={LOADERIMAGE} network={network} />
+                        </div>
+                      );
+                    }
+
                     const sendByScan = (
                       <SendByScan
                         parseAndCleanPath={this.parseAndCleanPath.bind(this)}
diff --git a/src/components/Bity.js b/src/components/Bity.js
index e71becef7..2f12ae3f5 100644
--- a/src/components/Bity.js
+++ b/src/components/Bity.js
@@ -91,13 +91,13 @@ class Bity extends Component {
   }
 
   async componentDidMount() {
-    const { changeAlert } = this.props;
+    const { changeAlert, t } = this.props;
 
     this.refs.name.focus();
     try {
       await this.getMinAmount();
     } catch (err) {
-      changeAlert("warning", this.props.t("offramp.errors.bity_connection"));
+      changeAlert("warning", t("offramp.errors.bity_connection"));
     }
   }
 
@@ -121,7 +121,8 @@ class Bity extends Component {
       web3,
       changeView,
       setReceipt,
-      changeAlert
+      changeAlert,
+      t
     } = this.props;
     let { amount } = this.state.fields;
 
@@ -141,7 +142,7 @@ class Bity extends Component {
           address
         );
       } catch (err) {
-        changeAlert("warning", this.props.t("offramp.errors.bity_connection"));
+        changeAlert("warning", t("offramp.errors.bity_connection"));
         return;
       }
 
@@ -159,7 +160,7 @@ class Bity extends Component {
         } catch (err) {
           changeAlert(
             "warning",
-            this.props.t("offramp.errors.ethgasstation_connection")
+            t("offramp.errors.ethgasstation_connection")
           );
           return;
         }
@@ -204,7 +205,7 @@ class Bity extends Component {
         from: address,
         amount: amount.value,
         result: receipt,
-        message: this.props.t("offramp.success")
+        message: t("offramp.success")
       };
       setReceipt(receiptObj);
       changeView("receipt");
@@ -280,7 +281,7 @@ class Bity extends Component {
   }
 
   validate(input) {
-    const { address } = this.props;
+    const { address, t } = this.props;
     return () => {
       const { fields } = this.state;
       let newFields;
@@ -290,7 +291,7 @@ class Bity extends Component {
           name: {
             value: name,
             valid: name !== "",
-            message: name === "" ? this.props.t("offramp.required") : null
+            message: name === "" ? t("offramp.required") : null
           }
         });
       } else if (input === "IBAN") {
@@ -302,10 +303,10 @@ class Bity extends Component {
           valid = true;
         } else if (validReason === "country") {
           valid = false;
-          message = this.props.t("offramp.country_not_supported");
+          message = t("offramp.country_not_supported");
         } else {
           valid = false;
-          message = this.props.t("offramp.iban_incorrect");
+          message = t("offramp.iban_incorrect");
         }
         newFields = Object.assign(fields, {
           IBAN: {
@@ -334,12 +335,12 @@ class Bity extends Component {
         let valid, message;
         if (amount < min) {
           valid = false;
-          message = `${this.props.t(
+          message = `${t(
             "offramp.amount_too_small"
           )} $${MIN_AMOUNT_DOLLARS}.`;
         } else if (amount > max) {
           valid = false;
-          message = this.props.t("offramp.amount_too_big");
+          message = t("offramp.amount_too_big");
         } else {
           valid = true;
         }
diff --git a/src/components/Exchange.js b/src/components/Exchange.js
index 3652f1ecd..c70c2107a 100644
--- a/src/components/Exchange.js
+++ b/src/components/Exchange.js
@@ -74,13 +74,13 @@ class Exchange extends React.Component {
       xdaiMetaAccount: xdaiMetaAccount,
       daiToXdaiMode: false,
       ethToDaiMode: false,
-      loaderBarStatusText: this.props.t('loading'),
+      loaderBarStatusText: props.t('loading'),
       loaderBarStartTime:Date.now(),
       loaderBarPercent: 2,
       loaderBarColor: "#aaaaaa",
       gwei: 5,
       maxWithdrawlAmount: 0.00,
-      withdrawalExplanation: this.props.t('exchange.withdrawal_explanation'),
+      withdrawalExplanation: props.t('exchange.withdrawal_explanation'),
       gettingGas:false,
     }
 
@@ -723,9 +723,8 @@ class Exchange extends React.Component {
     }
   }
   render() {
-    const { address } = this.props;
+    const { address, t } = this.props;
     let {daiToXdaiMode,ethToDaiMode } = this.state
-    const { t } = this.props
 
     let ethCancelButton = <BorderButton className="btn-cancel" onClick={()=>{
           this.setState({ethToDaiAmount:"",ethToDaiMode:false})
@@ -748,7 +747,7 @@ class Exchange extends React.Component {
     let adjustedFontSize = Math.round((Math.min(document.documentElement.clientWidth,600)/600)*24)
     let adjustedTop = Math.round((Math.min(document.documentElement.clientWidth,600)/600)*-20)+9
 
-    let daiToXdaiDisplay =  this.props.t('loading')
+    let daiToXdaiDisplay =  t('loading')
 
     //console.log("daiToXdaiMode",daiToXdaiMode)
     if(daiToXdaiMode==="sending" || daiToXdaiMode==="withdrawing" || daiToXdaiMode==="depositing"){
@@ -821,7 +820,7 @@ class Exchange extends React.Component {
                   loaderBarPercent:0,
                   loaderBarStartTime: Date.now(),
                   loaderBarClick:()=>{
-                    alert(this.props.t('exchange.go_to_etherscan'))
+                    alert(t('exchange.go_to_etherscan'))
                   }
                 })
 
@@ -835,7 +834,7 @@ class Exchange extends React.Component {
                     loaderBarColor:"#4ab3f5",
                     loaderBarStatusText:"Waiting for bridge...",
                     loaderBarClick:()=>{
-                      alert(this.props.t('exchange.idk'))
+                      alert(t('exchange.idk'))
                     }
                   })
                 })
@@ -1011,7 +1010,7 @@ class Exchange extends React.Component {
       )
     }
 
-    let ethToDaiDisplay =  this.props.t('loading')
+    let ethToDaiDisplay =  t('loading')
 
     if(ethToDaiMode==="sending" || ethToDaiMode==="depositing" || ethToDaiMode==="withdrawing"){
       ethToDaiDisplay = (
@@ -1097,11 +1096,11 @@ class Exchange extends React.Component {
               this.setState({
                 ethToDaiMode:"depositing",
                 loaderBarColor:"#3efff8",
-                loaderBarStatusText: this.props.t('exchange.calculate_gas_price'),
+                loaderBarStatusText: t('exchange.calculate_gas_price'),
                 loaderBarPercent:0,
                 loaderBarStartTime: Date.now(),
                 loaderBarClick:()=>{
-                  alert(this.props.t('exchange.go_to_etherscan'))
+                  alert(t('exchange.go_to_etherscan'))
                 }
               })
 
@@ -1123,7 +1122,7 @@ class Exchange extends React.Component {
                     loaderBarColor:"#4ab3f5",
                     loaderBarStatusText:"Waiting for 🦄 exchange...",
                     loaderBarClick:()=>{
-                      alert(this.props.t('exchange.idk'))
+                      alert(t('exchange.idk'))
                     }
                   })
                 }
@@ -1207,11 +1206,11 @@ class Exchange extends React.Component {
               this.setState({
                 ethToDaiMode:"withdrawing",
                 loaderBarColor:"#3efff8",
-                loaderBarStatusText: this.props.t('exchange.calculate_gas_price'),
+                loaderBarStatusText: t('exchange.calculate_gas_price'),
                 loaderBarPercent:0,
                 loaderBarStartTime: Date.now(),
                 loaderBarClick:()=>{
-                  alert(this.props.t('exchange.go_to_etherscan'))
+                  alert(t('exchange.go_to_etherscan'))
                 }
               })
 
@@ -1350,7 +1349,7 @@ class Exchange extends React.Component {
                     loaderBarColor:"#42ceb2",
                     loaderBarStatusText:"Approving 🦄 exchange...",
                     loaderBarClick:()=>{
-                      alert(this.props.t('exchange.idk'))
+                      alert(t('exchange.idk'))
                     }
                   })
 
@@ -1368,7 +1367,7 @@ class Exchange extends React.Component {
                           loaderBarColor:"#4ab3f5",
                           loaderBarStatusText:"Sending funds to 🦄 Exchange...",
                           loaderBarClick:()=>{
-                            alert(this.props.t('exchange.idk'))
+                            alert(t('exchange.idk'))
                           }
                         })
 
@@ -1391,7 +1390,7 @@ class Exchange extends React.Component {
                     loaderBarColor:"#4ab3f5",
                     loaderBarStatusText:"Sending funds to 🦄 Exchange...",
                     loaderBarClick:()=>{
-                      alert(this.props.t('exchange.idk'))
+                      alert(t('exchange.idk'))
                     }
                   })
 
diff --git a/src/components/MainCard.js b/src/components/MainCard.js
index 06f892a7f..4dd67399a 100644
--- a/src/components/MainCard.js
+++ b/src/components/MainCard.js
@@ -1,39 +1,29 @@
 import React from "react";
 import { Flex, Icon, Box } from "rimble-ui";
-import { Translation } from "react-i18next";
+import { withTranslation } from "react-i18next";
 import { PrimaryButton } from "./Buttons";
 
-export default ({ changeView }) => {
-  let sendButtons = (
-    <Translation>
-      {(t, { i18n }) => (
-        // eslint-disable-next-line no-unused-expressions
-        <Box>
-          <Flex mx={-2}>
-            <Box width={[1, 1 / 2, 1 / 2]} m={2}>
-              <PrimaryButton width={1} onClick={() => changeView("receive")}>
-                <Flex alignItems="center">
-                  <Icon name="CenterFocusWeak" mr={2} />
-                  {t("main_card.receive")}
-                </Flex>
-              </PrimaryButton>
-            </Box>
-            <Box width={[1, 1 / 2, 1 / 2]} m={2}>
-              <PrimaryButton
-                width={1}
-                onClick={() => changeView("send_to_address")}
-              >
-                <Flex alignItems="center">
-                  <Icon name="Send" mr={2} />
-                  {t("main_card.send")}
-                </Flex>
-              </PrimaryButton>
-            </Box>
+const MainCard = ({ changeView, t }) => (
+  <Box>
+    <Flex mx={-2}>
+      <Box width={[1, 1 / 2, 1 / 2]} m={2}>
+        <PrimaryButton width={1} onClick={() => changeView("receive")}>
+          <Flex alignItems="center">
+            <Icon name="CenterFocusWeak" mr={2} />
+            {t("main_card.receive")}
           </Flex>
-        </Box>
-      )}
-    </Translation>
-  );
+        </PrimaryButton>
+      </Box>
+      <Box width={[1, 1 / 2, 1 / 2]} m={2}>
+        <PrimaryButton width={1} onClick={() => changeView("send_to_address")}>
+          <Flex alignItems="center">
+            <Icon name="Send" mr={2} />
+            {t("main_card.send")}
+          </Flex>
+        </PrimaryButton>
+      </Box>
+    </Flex>
+  </Box>
+);
 
-  return sendButtons;
-};
+export default withTranslation()(MainCard);
diff --git a/src/components/MoreButtons.js b/src/components/MoreButtons.js
index de1bc2ff0..11f0a28bf 100644
--- a/src/components/MoreButtons.js
+++ b/src/components/MoreButtons.js
@@ -3,12 +3,12 @@ import { Flex, Icon, Box } from "rimble-ui";
 import { BorderButton } from "./Buttons";
 import { withTranslation } from "react-i18next";
 
-function MoreButtons ({
+const MoreButtons = ({
   isVendor,
   changeView,
   expertMode,
   t
-}) {
+}) => {
   let exchangeButton;
 
   if (!isVendor) {
diff --git a/src/components/Receive.js b/src/components/Receive.js
index d11f320e9..fc5316dad 100644
--- a/src/components/Receive.js
+++ b/src/components/Receive.js
@@ -24,13 +24,14 @@ class Receive extends React.Component {
       changeAlert,
       changeView,
       currencyDisplay,
+      t
     } = this.props
 
     return (
       <div>
         <div>
           <CopyToClipboard text={address} onCopy={() => {
-            changeAlert({type: 'success', message: this.props.t('receive.address_copied')})
+            changeAlert({type: 'success', message: t('receive.address_copied')})
           }}>
             <Box>
               <Flex flexDirection={'column'} alignItems={'center'} p={3} border={1} borderColor={'grey'} borderRadius={1}>
@@ -64,7 +65,7 @@ class Receive extends React.Component {
         <div name="theVeryBottom" className="text-center bottom-text">
           <span style={{padding:10}}>
             <a href="#" style={{color:"#FFFFFF"}} onClick={()=>{this.props.goBack()}}>
-              <i className="fas fa-times"/> {this.props.t('cancel')}
+              <i className="fas fa-times"/> {t('cancel')}
             </a>
           </span>
         </div>
diff --git a/src/components/RequestFunds.js b/src/components/RequestFunds.js
index d9e4f8abe..7bf7581f4 100644
--- a/src/components/RequestFunds.js
+++ b/src/components/RequestFunds.js
@@ -46,7 +46,7 @@ class RequestFunds extends React.Component {
 
   render() {
     let { canRequest, message, amount, requested } = this.state;
-    let {currencyDisplay,view,buttonStyle,ERC20TOKEN,address, changeView, t} = this.props
+    let {currencyDisplay, view, buttonStyle, ERC20TOKEN, address, changeView, t} = this.props
     if(requested){
 
       let url = window.location.protocol+"//"+window.location.hostname
diff --git a/src/components/SendToAddress.js b/src/components/SendToAddress.js
index 7b8275d36..9e348cddb 100644
--- a/src/components/SendToAddress.js
+++ b/src/components/SendToAddress.js
@@ -161,7 +161,7 @@ class SendToAddress extends React.Component {
 
   send = async () => {
     let { toAddress, amount } = this.state;
-    let { address, convertCurrency, currencyDisplay } = this.props
+    let { address, convertCurrency, currencyDisplay, t } = this.props
 
     const displayCurrency = getStoredValue("currency", address);
     amount = convertCurrency(amount, `USD/${displayCurrency}`);
@@ -238,7 +238,7 @@ class SendToAddress extends React.Component {
         })
       }
     }else{
-      this.props.changeAlert({type: 'warning', message: this.props.t('send_to_address.error')})
+      this.props.changeAlert({type: 'warning', message: t('send_to_address.error')})
     }
   };
 
diff --git a/src/components/WithdrawFromPrivate.js b/src/components/WithdrawFromPrivate.js
index 283738658..2fc59aac8 100644
--- a/src/components/WithdrawFromPrivate.js
+++ b/src/components/WithdrawFromPrivate.js
@@ -169,41 +169,41 @@ class SendToAddress extends React.Component {
 
     return (
       <div>
-          <div className="content row">
-            <div className="form-group w-100">
-              <div className="form-group w-100">
-                <label htmlFor="amount_input">{t('withdraw_from_private.from_address')}</label>
-                <Input
-                  width={1}
-                  type="text"
-                  placeholder="0x..."
-                  value={fromAddress} />
-              </div>
+        <Box mb={4}>
 
           <Flex justifyContent="space-between" alignItems="center" mb={3}>
             <Blockies seed={fromAddress} scale={10} />
             <Text fontSize={5} fontWeight="bold">{currencyDisplay(this.state.fromBalance)}</Text>
           </Flex>
 
-              <label htmlFor="amount_input">{t('withdraw_from_private.amount')}</label>
-              <div className="input-group">
-                <Input
-                  width={1}
-                  type="number"
-                  placeholder={currencyDisplay(0)}
-                  value={this.state.amount}
-                  onChange={event => this.updateState('amount', event.target.value)} />
-              </div>
-              {products}
-            </div>
-            <PrimaryButton
-              size={'large'}
+          <Field mb={3} label={t('withdraw_from_private.from_address')}>
+            <Input
               width={1}
-              disabled={!canWithdraw}
-              onClick={this.withdraw}>
-              {t('withdraw_from_private.withdraw')}
-            </PrimaryButton>
-          </div>
+              type="text"
+              placeholder="0x..."
+              spellcheck="false"
+              value={fromAddress}
+            />
+          </Field>
+
+          <Field mb={3} label={t('withdraw_from_private.amount')}>
+            <Input
+              width={1}
+              type="number"
+              placeholder={currencyDisplay(0)}
+              value={this.state.amount}
+              onChange={event => this.updateState('amount', event.target.value)}
+            />
+          </Field>
+          {products}
+        </Box>
+        <PrimaryButton
+          size={'large'}
+          width={1}
+          disabled={!canWithdraw}
+          onClick={this.withdraw}>
+          {t('withdraw_from_private.withdraw')}
+        </PrimaryButton>
       </div>
     )
   }