diff --git a/features/all-positions/AllPositions.tsx b/features/all-positions/AllPositions.tsx
index 0845cfc5..10ef1f25 100644
--- a/features/all-positions/AllPositions.tsx
+++ b/features/all-positions/AllPositions.tsx
@@ -38,13 +38,11 @@ const AllPositions = () => {
 
   if (tokenSymbol === null || emp === null) {
     return (
-      <Container>
-        <Box py={2}>
-          <Typography>
-            <i>Please first select an EMP from the dropdown above.</i>
-          </Typography>
-        </Box>
-      </Container>
+      <Box>
+        <Typography>
+          <i>Please first connect and select an EMP from the dropdown above.</i>
+        </Typography>
+      </Box>
     );
   }
 
@@ -69,31 +67,35 @@ const AllPositions = () => {
   };
 
   return (
-    <Container>
+    <Box>
       <Box>
         <Typography>
-          <i>
-            Estimated price of{" "}
-            {latestPrice ? Number(latestPrice).toFixed(4) : "N/A"} for{" "}
-            {priceId ? utils.parseBytes32String(priceId) : "N/A"} sourced from{" "}
-          </i>
+          Estimated price of{" "}
+          {latestPrice ? Number(latestPrice).toFixed(4) : "N/A"} for{" "}
+          {priceId ? utils.parseBytes32String(priceId) : "N/A"} sourced from{" "}
           <Link href={sourceUrl} target="_blank" rel="noopener noreferrer">
             Coinbase Pro.
           </Link>
         </Typography>
       </Box>
-      <Box py={4}>
+      <Box pt={4}>
         {activeSponsors && (
           <TableContainer component={Paper}>
             <Table>
               <TableHead>
                 <TableRow>
-                  <TableCell>Sponsor</TableCell>
-                  <TableCell align="right">Collateral ({collSymbol})</TableCell>
+                  <TableCell>
+                    <strong>Sponsor</strong>
+                  </TableCell>
+                  <TableCell align="right">
+                    <strong>Collateral ({collSymbol})</strong>
+                  </TableCell>
+                  <TableCell align="right">
+                    <strong>Synthetics ({tokenSymbol})</strong>
+                  </TableCell>
                   <TableCell align="right">
-                    Synthetics ({tokenSymbol})
+                    <strong>Collateral Ratio</strong>
                   </TableCell>
-                  <TableCell align="right">Collateral Ratio</TableCell>
                 </TableRow>
               </TableHead>
               <TableBody>
@@ -131,7 +133,7 @@ const AllPositions = () => {
           </TableContainer>
         )}
       </Box>
-    </Container>
+    </Box>
   );
 };
 
diff --git a/features/contract-state/Totals.tsx b/features/contract-state/Totals.tsx
index d0261388..628250ae 100644
--- a/features/contract-state/Totals.tsx
+++ b/features/contract-state/Totals.tsx
@@ -62,9 +62,7 @@ const Totals = () => {
             <strong>
               {loading ? "N/A" : Number(totalCollateral).toLocaleString()}
             </strong>
-            <Tooltip title="Etherscan Link">
-              <Small> {collSymbol}</Small>
-            </Tooltip>
+            <Small> {collSymbol}</Small>
           </Typography>
           <Label>
             of <White>collateral</White> supplied
@@ -98,15 +96,12 @@ const Totals = () => {
             <strong>
               {loading ? "N/A" : Number(totalTokens).toLocaleString()}
             </strong>
-            <Tooltip title="Etherscan Link">
-              <Small> {tokenSymbol}</Small>
-            </Tooltip>
+
+            <Small> {tokenSymbol}</Small>
           </Typography>
-          <Tooltip title="This is the total number of tokens minted minus the total number of tokens redeemed.">
-            <Label>
-              of <White>synthetic tokens</White> outstanding
-            </Label>
-          </Tooltip>
+          <Label>
+            of <White>synthetic tokens</White> outstanding
+          </Label>
           <LinksContainer>
             {tokenAddress && (
               <SmallLink
diff --git a/features/core/Header.tsx b/features/core/Header.tsx
index 80db04f4..38ca80a7 100644
--- a/features/core/Header.tsx
+++ b/features/core/Header.tsx
@@ -49,9 +49,7 @@ const Header = () => {
   return (
     <Box display="flex" justifyContent="space-between" alignItems="center">
       <Box>
-        <Typography variant="h4">
-          <i>EMP Tools</i>
-        </Typography>
+        <Typography variant="h4">⚒️⚡️EMP Tools</Typography>
       </Box>
       <Box display="flex" alignItems="center">
         {address && (
diff --git a/features/manage-position/Create.tsx b/features/manage-position/Create.tsx
index c5d18bdd..59bb7f4e 100644
--- a/features/manage-position/Create.tsx
+++ b/features/manage-position/Create.tsx
@@ -1,6 +1,6 @@
 import { ethers } from "ethers";
 import styled from "styled-components";
-import { Box, Button, TextField, Typography } from "@material-ui/core";
+import { Box, Button, TextField, Typography, Grid } from "@material-ui/core";
 
 import EmpContract from "../../containers/EmpContract";
 import { useState } from "react";
@@ -12,10 +12,6 @@ import Position from "../../containers/Position";
 import PriceFeed from "../../containers/PriceFeed";
 import Etherscan from "../../containers/Etherscan";
 
-const Container = styled(Box)`
-  max-width: 720px;
-`;
-
 const Important = styled(Typography)`
   color: red;
   background: black;
@@ -136,34 +132,30 @@ const Create = () => {
   // User has not selected an EMP yet. We can detect this by checking if any properties in `empState` are `null`.
   if (collReq === null) {
     return (
-      <Container>
-        <Box py={2}>
-          <Typography>
-            <i>Please first select an EMP from the dropdown above.</i>
-          </Typography>
-        </Box>
-      </Container>
+      <Box py={2}>
+        <Typography>
+          <i>Please first select an EMP from the dropdown above.</i>
+        </Typography>
+      </Box>
     );
   }
 
   if (pendingWithdraw === null || pendingWithdraw === "Yes") {
     return (
-      <Container>
-        <Box py={2}>
-          <Typography>
-            <i>
-              You need to cancel or execute your pending withdrawal request
-              before creating additional tokens.
-            </i>
-          </Typography>
-        </Box>
-      </Container>
+      <Box py={2}>
+        <Typography>
+          <i>
+            You need to cancel or execute your pending withdrawal request before
+            creating additional tokens.
+          </i>
+        </Typography>
+      </Box>
     );
   }
 
   // User has no pending withdrawal requests so they can create tokens.
   return (
-    <Container>
+    <Box>
       <Box py={2}>
         <Typography>
           <i>
@@ -172,11 +164,10 @@ const Create = () => {
         </Typography>
       </Box>
       <Box pb={2}>
-        <Box py={2}>
-          <Important>
-            IMPORTANT! Please read this carefully or you may lose money.
-          </Important>
-        </Box>
+        <Important>
+          IMPORTANT! Please read this carefully or you may lose money.
+        </Important>
+
         <Box pt={2}>
           <Typography>
             When minting, your resulting collateralization ratio (collateral /
@@ -194,68 +185,76 @@ const Create = () => {
             them if you want to short the underlying.
           </Typography>
         </Box>
-        <Box py={2}>
+        <Box pb={2}>
           <Typography>
-            When you're ready, fill in the desired amount of collateral and
-            tokens below and click the "Create" button.
+            When you're ready, fill in the amount of collateral and tokens below
+            and click Create.
           </Typography>
         </Box>
       </Box>
 
-      <Box py={2}>
-        <TextField
-          type="number"
-          label={`Collateral (${collSymbol})`}
-          placeholder="1234"
-          inputProps={{ min: "0" }}
-          value={collateral}
-          error={balanceTooLow}
-          helperText={balanceTooLow ? "Balance too low" : null}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setCollateral(e.target.value)
-          }
-        />
-      </Box>
-      <Box py={2}>
-        <TextField
-          type="number"
-          label={`Tokens (${tokenSymbol})`}
-          placeholder="1234"
-          inputProps={{ min: "0" }}
-          value={tokens}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setTokens(e.target.value)
-          }
-        />
-      </Box>
-      <Box py={2}>
-        {needAllowance() && (
-          <Button
-            variant="contained"
-            onClick={setMaxAllowance}
-            style={{ marginRight: `12px` }}
-          >
-            Approve
-          </Button>
-        )}
-        {tokens &&
-        collateral &&
-        gcr &&
-        !needAllowance() &&
-        computedCR > gcr &&
-        !balanceTooLow ? (
-          <Button
-            variant="contained"
-            onClick={handleCreateClick}
-          >{`Create ${tokens} ${tokenSymbol} with ${collateral} ${collSymbol}`}</Button>
-        ) : (
-          <Button variant="contained" disabled>
-            Create
-          </Button>
-        )}
-      </Box>
+      <Grid container spacing={3}>
+        <Grid item xs={4}>
+          <TextField
+            fullWidth
+            type="number"
+            variant="outlined"
+            label={`Collateral (${collSymbol})`}
+            placeholder="1234"
+            inputProps={{ min: "0" }}
+            value={collateral}
+            error={balanceTooLow}
+            helperText={balanceTooLow ? "Balance too low" : null}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setCollateral(e.target.value)
+            }
+          />
+        </Grid>
+        <Grid item xs={4}>
+          <TextField
+            fullWidth
+            type="number"
+            variant="outlined"
+            label={`Tokens (${tokenSymbol})`}
+            placeholder="1234"
+            inputProps={{ min: "0" }}
+            value={tokens}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setTokens(e.target.value)
+            }
+          />
+        </Grid>
+        <Grid item xs={4}>
+          <Box py={1}>
+            {needAllowance() && (
+              <Button
+                variant="contained"
+                onClick={setMaxAllowance}
+                style={{ marginRight: `12px` }}
+              >
+                Approve
+              </Button>
+            )}
+            {tokens &&
+            collateral &&
+            gcr &&
+            !needAllowance() &&
+            computedCR > gcr &&
+            !balanceTooLow ? (
+              <Button
+                variant="contained"
+                onClick={handleCreateClick}
+              >{`Create ${tokens} ${tokenSymbol} with ${collateral} ${collSymbol}`}</Button>
+            ) : (
+              <Button variant="contained" disabled>
+                Create
+              </Button>
+            )}
+          </Box>
+        </Grid>
+      </Grid>
 
-      <Box py={2}>
+      <Box py={4}>
         {tokens && collateral && gcr ? (
           <Typography>
             Resulting CR:{" "}
@@ -301,7 +300,7 @@ const Create = () => {
           </Typography>
         </Box>
       )}
-    </Container>
+    </Box>
   );
 };
 
diff --git a/features/manage-position/Deposit.tsx b/features/manage-position/Deposit.tsx
index adba89cb..822f7c72 100644
--- a/features/manage-position/Deposit.tsx
+++ b/features/manage-position/Deposit.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import styled from "styled-components";
-import { Box, Button, TextField, Typography } from "@material-ui/core";
+import { Box, Button, TextField, Typography, Grid } from "@material-ui/core";
 import { ethers } from "ethers";
 
 import EmpContract from "../../containers/EmpContract";
@@ -10,10 +10,6 @@ import PriceFeed from "../../containers/PriceFeed";
 import Etherscan from "../../containers/Etherscan";
 import { hashMessage } from "ethers/lib/utils";
 
-const Container = styled(Box)`
-  max-width: 720px;
-`;
-
 const Link = styled.a`
   color: white;
   font-size: 14px;
@@ -71,19 +67,19 @@ const Deposit = () => {
   // User does not have a position yet.
   if (collateral === null || collateral.toString() === "0") {
     return (
-      <Container>
+      <Box>
         <Box py={2}>
           <Typography>
             <i>Create a position before depositing more collateral.</i>
           </Typography>
         </Box>
-      </Container>
+      </Box>
     );
   }
 
   if (pendingWithdraw === null || pendingWithdraw === "Yes") {
     return (
-      <Container>
+      <Box>
         <Box py={2}>
           <Typography>
             <i>
@@ -92,49 +88,60 @@ const Deposit = () => {
             </i>
           </Typography>
         </Box>
-      </Container>
+      </Box>
     );
   }
 
   // User has a position and no pending withdrawal requests so can deposit more collateral.
   return (
-    <Container>
-      <Box pt={4} pb={2}>
+    <Box>
+      <Box pt={2} pb={4}>
         <Typography>
-          By depositing additional collateral into your position you will
-          increase your collateralization ratio.
+          Adding additional collateral into your position will increase your
+          collateralization ratio.
         </Typography>
       </Box>
 
-      <Box py={2}>
-        <TextField
-          type="number"
-          inputProps={{ min: "0" }}
-          label={`Collateral (${collSymbol})`}
-          placeholder="1234"
-          error={balanceTooLow}
-          helperText={balanceTooLow ? `${collSymbol} balance too low` : null}
-          value={collateralToDeposit}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setCollateralToDeposit(e.target.value)
-          }
-        />
-      </Box>
-
-      <Box py={2}>
-        {collateralToDeposit && collateralToDeposit != "0" && !balanceTooLow ? (
-          <Button
-            variant="contained"
-            onClick={handleDepositClick}
-          >{`Deposit ${collateralToDeposit} ${collSymbol} into your position`}</Button>
-        ) : (
-          <Button variant="contained" disabled>
-            Deposit
-          </Button>
-        )}
-      </Box>
+      <Grid container spacing={3}>
+        <Grid item xs={4}>
+          <Box py={0}>
+            <TextField
+              fullWidth
+              type="number"
+              variant="outlined"
+              inputProps={{ min: "0" }}
+              label={`Collateral (${collSymbol})`}
+              placeholder="1234"
+              error={balanceTooLow}
+              helperText={
+                balanceTooLow ? `${collSymbol} balance too low` : null
+              }
+              value={collateralToDeposit}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setCollateralToDeposit(e.target.value)
+              }
+            />
+          </Box>
+        </Grid>
+        <Grid item xs={4}>
+          <Box py={1}>
+            {collateralToDeposit &&
+            collateralToDeposit != "0" &&
+            !balanceTooLow ? (
+              <Button
+                variant="contained"
+                onClick={handleDepositClick}
+              >{`Deposit ${collateralToDeposit} ${collSymbol} into your position`}</Button>
+            ) : (
+              <Button variant="contained" disabled>
+                Deposit
+              </Button>
+            )}
+          </Box>
+        </Grid>
+      </Grid>
 
-      <Box py={2}>
+      <Box py={4}>
         <Typography>
           Current CR: {pricedStartingCR?.toFixed(4) || "N/A"}
         </Typography>
@@ -175,7 +182,7 @@ const Deposit = () => {
           </Typography>
         </Box>
       )}
-    </Container>
+    </Box>
   );
 };
 
diff --git a/features/manage-position/ManagePosition.tsx b/features/manage-position/ManagePosition.tsx
index b3a19cf6..07419645 100644
--- a/features/manage-position/ManagePosition.tsx
+++ b/features/manage-position/ManagePosition.tsx
@@ -26,7 +26,7 @@ const Manager = () => {
     return (
       <Box>
         <Typography>
-          <i>Please connect first.</i>
+          <i>Please first connect and select an EMP from the dropdown above.</i>
         </Typography>
       </Box>
     );
@@ -42,6 +42,7 @@ const Manager = () => {
       {method === "deposit" && <Deposit />}
       {method === "withdraw" && <Withdraw />}
       {method === "redeem" && <Redeem />}
+      {method === "transfer" && <FalseDoor />}
     </Box>
   );
 };
diff --git a/features/manage-position/Redeem.tsx b/features/manage-position/Redeem.tsx
index a2d022ee..d8f18d3c 100644
--- a/features/manage-position/Redeem.tsx
+++ b/features/manage-position/Redeem.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import styled from "styled-components";
-import { Box, Button, TextField, Typography } from "@material-ui/core";
+import { Box, Button, TextField, Typography, Grid } from "@material-ui/core";
 import { ethers, BigNumberish } from "ethers";
 
 import EmpContract from "../../containers/EmpContract";
@@ -10,10 +10,6 @@ import Position from "../../containers/Position";
 import Token from "../../containers/Token";
 import Etherscan from "../../containers/Etherscan";
 
-const Container = styled(Box)`
-  max-width: 720px;
-`;
-
 const Link = styled.a`
   color: white;
   font-size: 14px;
@@ -104,19 +100,19 @@ const Redeem = () => {
     collateral.toString() === "0"
   ) {
     return (
-      <Container>
+      <Box>
         <Box py={2}>
           <Typography>
             <i>You need to borrow tokens before redeeming.</i>
           </Typography>
         </Box>
-      </Container>
+      </Box>
     );
   }
 
   if (pendingWithdraw === null || pendingWithdraw === "Yes") {
     return (
-      <Container>
+      <Box>
         <Box py={2}>
           <Typography>
             <i>
@@ -125,63 +121,71 @@ const Redeem = () => {
             </i>
           </Typography>
         </Box>
-      </Container>
+      </Box>
     );
   }
 
   // User has a position and no withdraw requests, so they can redeem tokens.
   return (
-    <Container>
-      <Box pt={4} pb={2}>
+    <Box>
+      <Box pt={2} pb={4}>
         <Typography>
           By redeeming your synthetic tokens, you will pay back a portion of
-          your debt and receive a proportional part of your collateral. Note:
-          this will not change the collateralization ratio of your position.
+          your debt and receive a proportional part of your collateral.
+          <br></br>
+          <br></br>
+          <strong>Note:</strong> this will not change the collateralization
+          ratio of your position.
         </Typography>
       </Box>
 
-      <Box py={2}>
-        <TextField
-          type="number"
-          label={`Redeeem (${syntheticSymbol})`}
-          placeholder="1234"
-          inputProps={{ min: "0" }}
-          error={!isEmpty && !canSendTxn}
-          helperText={
-            !isEmpty && !canSendTxn
-              ? `Input must be between 0 and ${maxRedeem} or the entire position`
-              : null
-          }
-          value={tokensToRedeem}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setTokensToRedeem(e.target.value)
-          }
-        />
-      </Box>
-
-      <Box py={2}>
-        {needAllowance() && (
-          <Button
-            variant="contained"
-            onClick={setMaxAllowance}
-            style={{ marginRight: `12px` }}
-          >
-            Approve
-          </Button>
-        )}
-        {canSendTxn && !needAllowance() ? (
-          <Button
-            variant="contained"
-            onClick={handleRedemptionClick}
-          >{`Redeem ${tokensToRedeem} ${syntheticSymbol}`}</Button>
-        ) : (
-          <Button variant="contained" disabled>
-            Redeem
-          </Button>
-        )}
-      </Box>
+      <Grid container spacing={3}>
+        <Grid item xs={4}>
+          <TextField
+            fullWidth
+            variant="outlined"
+            type="number"
+            label={`Redeeem (${syntheticSymbol})`}
+            placeholder="1234"
+            inputProps={{ min: "0" }}
+            error={!isEmpty && !canSendTxn}
+            helperText={
+              !isEmpty && !canSendTxn
+                ? `Input must be between 0 and ${maxRedeem} or the entire position`
+                : null
+            }
+            value={tokensToRedeem}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setTokensToRedeem(e.target.value)
+            }
+          />
+        </Grid>
+        <Grid item xs={4}>
+          <Box py={1}>
+            {needAllowance() && (
+              <Button
+                variant="contained"
+                onClick={setMaxAllowance}
+                style={{ marginRight: `12px` }}
+              >
+                Approve
+              </Button>
+            )}
+            {canSendTxn && !needAllowance() ? (
+              <Button
+                variant="contained"
+                onClick={handleRedemptionClick}
+              >{`Redeem ${tokensToRedeem} ${syntheticSymbol}`}</Button>
+            ) : (
+              <Button variant="contained" disabled>
+                Redeem
+              </Button>
+            )}
+          </Box>
+        </Grid>
+      </Grid>
 
-      <Box py={2}>
+      <Box py={4}>
         <Typography>{`Current borrowed ${syntheticSymbol}: ${borrowedTokens}`}</Typography>
         <Typography>{`Remaining debt after redemption: ${
           borrowedTokens - tokensToRedeemFloat
@@ -223,7 +227,7 @@ const Redeem = () => {
           </Typography>
         </Box>
       )}
-    </Container>
+    </Box>
   );
 };
 
diff --git a/features/manage-position/Withdraw.tsx b/features/manage-position/Withdraw.tsx
index edfef90c..f3b86a91 100644
--- a/features/manage-position/Withdraw.tsx
+++ b/features/manage-position/Withdraw.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import styled from "styled-components";
-import { Box, Button, TextField, Typography } from "@material-ui/core";
+import { Box, Button, TextField, Typography, Grid } from "@material-ui/core";
 import { ethers } from "ethers";
 
 import EmpState from "../../containers/EmpState";
@@ -11,9 +11,7 @@ import Totals from "../../containers/Totals";
 import PriceFeed from "../../containers/PriceFeed";
 import Etherscan from "../../containers/Etherscan";
 
-const Container = styled(Box)`
-  max-width: 720px;
-`;
+import { DOCS_MAP } from "../../utils/getDocLinks";
 
 const Important = styled(Typography)`
   color: red;
@@ -129,8 +127,16 @@ const Deposit = () => {
       ? (collateral - parseFloat(collateralToWithdraw)) / tokens
       : startingCR;
   const resultingCRBelowGCR = resultingCR && gcr ? resultingCR < gcr : null;
-  const fastWithdrawableCollateral =
-    collateral && tokens && gcr ? (collateral - gcr * tokens).toFixed(2) : null;
+  const fastWithdrawableCollateral = () => {
+    if (collateral && tokens && gcr) {
+      const withdrawableCollat = collateral - gcr * tokens;
+      // Only if there is more than 0 fast withdrawable collateral should we return a value.
+      // Else, there is nothing that can be fast withdrawn.
+      if (withdrawableCollat > 0) return withdrawableCollat.toFixed(2);
+      else return "0";
+    }
+    return null;
+  };
 
   // Calculations of collateral ratios using same units as price feed:
   const pricedStartingCR =
@@ -158,20 +164,20 @@ const Deposit = () => {
   // User does not have a position yet.
   if (collateral === null || collateral.toString() === "0") {
     return (
-      <Container>
+      <Box>
         <Box py={2}>
           <Typography>
             <i>Create a position before withdrawing collateral.</i>
           </Typography>
         </Box>
-      </Container>
+      </Box>
     );
   }
 
   // User has a position and a pending withdrawal.
   if (collateral !== null && pendingWithdraw === "Yes") {
     return (
-      <Container>
+      <Box>
         <Box pt={4} pb={2}>
           <Typography>
             <i>You have a pending withdraw on your position!</i>
@@ -218,17 +224,17 @@ const Deposit = () => {
             >{`Cancel withdraw request`}</Button>
           </Box>
         </Box>
-      </Container>
+      </Box>
     );
   }
   // User has a position and no pending withdrawal.
   return (
-    <Container>
-      <Box pt={4} pb={2}>
+    <Box>
+      <Box pt={2} pb={2}>
         <Typography>
           <i>
-            By withdrawing excess collateral from your position you will
-            decrease your collateralization ratio.
+            By withdrawing collateral from your position you will decrease your
+            collateralization ratio.
           </i>
         </Typography>
       </Box>
@@ -245,13 +251,13 @@ const Deposit = () => {
           </Typography>
           <ul style={{ fontSize: 16 }}>
             <li>
-              <strong>"Fast" withdrawal: </strong>Instantly withdraw collateral
-              until your positions collateralization ratio is equal to the
-              global collateralization ratio. For your position you can
-              instantly withdraw {fastWithdrawableCollateral} {collSymbol}.
+              <strong>"Fast" withdraw: </strong>Instantly withdraw collateral
+              until your collateralization ratio equals the global
+              collateralization ratio. For your position you can withdraw{" "}
+              {fastWithdrawableCollateral()} {collSymbol}.
             </li>
             <li>
-              <strong>"Slow" withdrawal: </strong> To withdraw past the global
+              <strong>"Slow" withdraw: </strong> To withdraw past the global
               collateralization ratio, you will need to wait a liveness period
               before completing your withdrawal. For this EMP this is{" "}
               {withdrawalLiveness &&
@@ -262,11 +268,11 @@ const Deposit = () => {
             </li>
           </ul>
         </Box>
-        <Box pt={2}>
+        <Box pt={2} pb={2}>
           <Typography>
             For more info on the different kinds of withdrawals see the{" "}
             <a
-              href="https://docs.umaproject.org/uma/synthetic_tokens/explainer.html#_managing_token_sponsor_positions"
+              href={DOCS_MAP.MANAGING_POSITION}
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -277,32 +283,37 @@ const Deposit = () => {
         </Box>
       </Box>
 
-      <Box py={2}>
-        <TextField
-          type="number"
-          inputProps={{ min: "0" }}
-          label={`Collateral (${collSymbol})`}
-          placeholder="1234"
-          value={collateralToWithdraw}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            setCollateralToWithdraw(e.target.value)
-          }
-        />
-      </Box>
-
-      <Box py={2}>
-        {collateralToWithdraw && collateralToWithdraw != "0" ? (
-          <Button variant="contained" onClick={handleWithdrawClick}>{`${
-            resultingCRBelowGCR ? "Request Withdrawal of" : "Withdraw"
-          } ${collateralToWithdraw} ${collSymbol} from your position`}</Button>
-        ) : (
-          <Button variant="contained" disabled>
-            Withdraw
-          </Button>
-        )}
-      </Box>
+      <Grid container spacing={3}>
+        <Grid item xs={4}>
+          <TextField
+            fullWidth
+            type="number"
+            variant="outlined"
+            inputProps={{ min: "0" }}
+            label={`Collateral (${collSymbol})`}
+            placeholder="1234"
+            value={collateralToWithdraw}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setCollateralToWithdraw(e.target.value)
+            }
+          />
+        </Grid>
+        <Grid item xs={4}>
+          <Box py={1}>
+            {collateralToWithdraw && collateralToWithdraw != "0" ? (
+              <Button variant="contained" onClick={handleWithdrawClick}>{`${
+                resultingCRBelowGCR ? "Request Withdrawal of" : "Withdraw"
+              } ${collateralToWithdraw} ${collSymbol}`}</Button>
+            ) : (
+              <Button variant="contained" disabled>
+                Withdraw
+              </Button>
+            )}
+          </Box>
+        </Grid>
+      </Grid>
 
-      <Box py={2}>
+      <Box py={4}>
         <Typography>
           Current global CR: {pricedGcr?.toFixed(4) || "N/A"}
         </Typography>
@@ -361,7 +372,7 @@ const Deposit = () => {
           </Typography>
         </Box>
       )}
-    </Container>
+    </Box>
   );
 };
 
diff --git a/features/weth/Weth.tsx b/features/weth/Weth.tsx
index a7cc8176..568583d4 100644
--- a/features/weth/Weth.tsx
+++ b/features/weth/Weth.tsx
@@ -4,6 +4,7 @@ import {
   Button,
   InputAdornment,
   Typography,
+  Grid,
 } from "@material-ui/core";
 import { FormEvent, useState } from "react";
 import { BigNumberish, utils } from "ethers";
@@ -59,12 +60,13 @@ const BalanceElement = styled.div`
   flex-direction: row;
   justify-content: space-between;
   margin-top: 20px;
+  font-size: 16px;
 `;
 
 const InputElement = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   margin-top: 20px;
 `;
 
@@ -142,99 +144,126 @@ const Weth = () => {
     return (
       <Box>
         <Typography>
-          <i>Please connect first.</i>
+          <i>Please first connect and select an EMP from the dropdown above.</i>
         </Typography>
       </Box>
     );
   }
 
   return (
-    <Box py={4}>
-      <Box pt={4}>
-        <Container>
-          <Typography variant="h5">My Wallet</Typography>
-          <BalanceElement>
-            <IconAndNameContainer>
-              <TokenIcon src={ETHEREUM_LOGO_URL} />
-              <TokenName>ETH</TokenName>
-            </IconAndNameContainer>
-            <TokenBalance>{ethBalance}</TokenBalance>
-          </BalanceElement>
-          <BalanceElement>
-            <IconAndNameContainer>
-              <TokenIcon src={ETHEREUM_LOGO_URL} />
-              <TokenName>WETH</TokenName>
-            </IconAndNameContainer>
-            <TokenBalance>{wethBalance}</TokenBalance>
-          </BalanceElement>
-        </Container>
-      </Box>
-      <Box pt={4}>
-        <Container>
-          <InputElement>
-            <form
-              noValidate
-              autoComplete="off"
-              onSubmit={(e) => handleClick(e, ACTION_TYPE.WRAP)}
-            >
-              <TextField
-                type="number"
-                label="ETH"
-                value={ethAmount ? ethAmount : ""}
-                onChange={(e) => setEthAmount(e.target.value)}
-                variant="outlined"
-                helperText="Keep some ETH unwrapped for transaction fees"
-                InputLabelProps={{
-                  shrink: true,
-                }}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <Button type="submit" variant="contained">
-                        Wrap
-                      </Button>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </form>
-          </InputElement>
-          <InputElement>
-            <form
-              noValidate
-              autoComplete="off"
-              onSubmit={(e) => handleClick(e, ACTION_TYPE.UNWRAP)}
-            >
-              <TextField
-                type="number"
-                label="WETH"
-                value={wethAmount ? wethAmount : ""}
-                onChange={(e) => setWethAmount(e.target.value)}
-                variant="outlined"
-                InputLabelProps={{
-                  shrink: true,
-                }}
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <Button onClick={() => handleMax()}>
-                        <MaxLink>Max</MaxLink>
-                      </Button>
-                    </InputAdornment>
-                  ),
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <Button type="submit" variant="contained">
-                        Unwrap
-                      </Button>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </form>
-          </InputElement>
-        </Container>
+    <Box>
+      <Box pb={4}>
+        <Typography>
+          Convert your ETH into WETH to be used as contract collateral. This is
+          needed for yUSD. To learn more about WETH see{" "}
+          <a href="https://weth.io/" target="_blank" rel="noopener noreferrer">
+            weth.io
+          </a>
+          . Be sure to keep some ETH unwrapped for transaction fees.
+        </Typography>
       </Box>
+      <Grid container spacing={3}>
+        <Grid item xs={6}>
+          <Box style={{ height: "100%" }}>
+            <Container style={{ height: "100%" }}>
+              <Typography variant="h5">Your Wallet</Typography>
+              <BalanceElement>
+                <IconAndNameContainer>
+                  <TokenIcon src={ETHEREUM_LOGO_URL} />
+                  <TokenName>ETH</TokenName>
+                </IconAndNameContainer>
+                <TokenBalance>
+                  Ξ {ethBalance && Number(ethBalance).toFixed(4)}
+                </TokenBalance>
+              </BalanceElement>
+              <BalanceElement>
+                <IconAndNameContainer>
+                  <TokenIcon src={ETHEREUM_LOGO_URL} />
+                  <TokenName>WETH</TokenName>
+                </IconAndNameContainer>
+                <TokenBalance>
+                  Ξ {wethBalance && Number(wethBalance).toFixed(4)}
+                </TokenBalance>
+              </BalanceElement>
+            </Container>
+          </Box>
+        </Grid>
+        <Grid item xs={6}>
+          <Box>
+            <Container>
+              <Typography variant="h5">Wrap and Unwrap</Typography>
+              <InputElement>
+                <form
+                  style={{ width: "100%" }}
+                  noValidate
+                  autoComplete="off"
+                  onSubmit={(e) => handleClick(e, ACTION_TYPE.WRAP)}
+                >
+                  <TextField
+                    fullWidth
+                    type="number"
+                    label="ETH"
+                    value={ethAmount ? ethAmount : ""}
+                    onChange={(e) => setEthAmount(e.target.value)}
+                    variant="outlined"
+                    inputProps={{ min: "0" }}
+                    InputLabelProps={{
+                      shrink: true,
+                    }}
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <Button type="submit" variant="contained">
+                            Wrap
+                          </Button>
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                </form>
+              </InputElement>
+              <InputElement>
+                <form
+                  style={{ width: "100%" }}
+                  noValidate
+                  autoComplete="off"
+                  onSubmit={(e) => handleClick(e, ACTION_TYPE.UNWRAP)}
+                >
+                  <TextField
+                    fullWidth
+                    type="number"
+                    label="WETH"
+                    value={wethAmount ? wethAmount : ""}
+                    onChange={(e) => setWethAmount(e.target.value)}
+                    variant="outlined"
+                    inputProps={{ min: "0" }}
+                    InputLabelProps={{
+                      shrink: true,
+                    }}
+                    InputProps={{
+                      startAdornment: (
+                        <InputAdornment position="start">
+                          <Button onClick={() => handleMax()}>
+                            <MaxLink>Max</MaxLink>
+                          </Button>
+                        </InputAdornment>
+                      ),
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <Button type="submit" variant="contained">
+                            Unwrap
+                          </Button>
+                        </InputAdornment>
+                      ),
+                    }}
+                  />
+                </form>
+              </InputElement>
+            </Container>
+          </Box>
+        </Grid>
+      </Grid>
+
       {hash && (
         <Box py={4}>
           <Typography>
diff --git a/features/yield-calculator/YieldCalculator.tsx b/features/yield-calculator/YieldCalculator.tsx
index c02fb9b2..23764c43 100644
--- a/features/yield-calculator/YieldCalculator.tsx
+++ b/features/yield-calculator/YieldCalculator.tsx
@@ -1,4 +1,4 @@
-import { Box, TextField, Typography } from "@material-ui/core";
+import { Box, TextField, Typography, Grid } from "@material-ui/core";
 import { useState, useEffect } from "react";
 import styled from "styled-components";
 import EmpState from "../../containers/EmpState";
@@ -80,48 +80,73 @@ const YieldCalculator = () => {
   }, [tokenPrice, daysToExpiry]);
 
   return (
-    <Box pt={4}>
+    <Box>
+      <Box pb={4}>
+        <Typography>
+          yUSD is a fixed yielding, expiring token that will be redeemable for
+          exactly 1 USD worth of ETH at expiry. To use this calculator enter in
+          the current yUSD price and the Days to expiry. An implied yearly APR
+          is shown. To learn more about yUSD see the UMA Medium post{" "}
+          <a
+            href="https://medium.com/uma-project/the-yield-dollar-on-uma-3a492e79069f"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            here
+          </a>
+          .
+        </Typography>
+      </Box>
       <Container>
+        <Typography variant="h5">yUSD Yield Calculator</Typography>
         <form noValidate autoComplete="off">
-          <Typography variant="h5">yUSD Yield Calculator</Typography>
-          <FormInput></FormInput>
-          <FormInput>
-            <TextField
-              type="number"
-              label="Current yUSD Price (USD)"
-              value={tokenPrice?.toString() || ""}
-              onChange={(e) => setTokenPrice(e.target.value)}
-              variant="outlined"
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
-          </FormInput>
-          <FormInput>
-            <TextField
-              type="string"
-              label="Days to Expiry"
-              value={daysToExpiry?.toString() || ""}
-              onChange={(e) => setDaysToExpiry(e.target.value)}
-              helperText={`Days to expiry for selected EMP: ${calculateDaysToExpiry()}`}
-              variant="outlined"
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
-          </FormInput>
-          <FormInput>
-            <TextField
-              disabled
-              type="string"
-              label="APY (%)"
-              value={prettyPercentage(yieldAmount)}
-              variant="outlined"
-              InputLabelProps={{
-                shrink: true,
-              }}
-            />
-          </FormInput>
+          <Grid container spacing={3}>
+            <Grid item xs={4}>
+              <FormInput>
+                <TextField
+                  fullWidth
+                  type="number"
+                  label="Current yUSD Price (USD)"
+                  value={tokenPrice?.toString() || ""}
+                  onChange={(e) => setTokenPrice(e.target.value)}
+                  variant="outlined"
+                  inputProps={{ min: "0", max: "10", step: "0.01" }}
+                  helperText={`Enter the market observable price`}
+                  InputLabelProps={{
+                    shrink: true,
+                  }}
+                />
+              </FormInput>
+            </Grid>
+            <Grid item xs={4}>
+              <FormInput>
+                <TextField
+                  fullWidth
+                  type="number"
+                  label="Days to Expiry"
+                  value={daysToExpiry?.toString() || ""}
+                  onChange={(e) => setDaysToExpiry(e.target.value)}
+                  inputProps={{ min: "0", max: "10", step: "1" }}
+                  helperText={
+                    calculateDaysToExpiry()
+                      ? `Days to expiry for chosen EMP: ${calculateDaysToExpiry()}`
+                      : ""
+                  }
+                  variant="outlined"
+                  InputLabelProps={{
+                    shrink: true,
+                  }}
+                />
+              </FormInput>
+            </Grid>
+            <Grid item xs={4}>
+              <Box pt={4}>
+                <Typography variant="h6">
+                  Yearly APR: {prettyPercentage(yieldAmount)}%
+                </Typography>
+              </Box>
+            </Grid>
+          </Grid>
         </form>
       </Container>
     </Box>
diff --git a/pages/_document.tsx b/pages/_document.tsx
index bdc7314b..e75883e5 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,4 +1,5 @@
 import Document from "next/document";
+import Head from "next/head";
 import { ServerStyleSheet } from "styled-components";
 import { ServerStyleSheets } from "@material-ui/styles";
 
@@ -22,6 +23,13 @@ export default class MyDocument extends Document {
         ...initialProps,
         styles: (
           <>
+            <Head>
+              <link
+                rel="icon"
+                type="image/x-icon"
+                href="../public/favicon.ico"
+              />
+            </Head>
             {initialProps.styles}
             {materialSheets.getStyleElement()}
             {styledComponentsSheet.getStyleElement()}
diff --git a/pages/index.tsx b/pages/index.tsx
index c00d90d8..e2d4cdf8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -56,7 +56,15 @@ export default function Index() {
                 easier, please use at your own risk. The source code can be
                 viewed{" "}
                 <a
-                  href="https://github.com/adrianmcli/emp-tools"
+                  href="https://github.com/UMAprotocol/emp-tools"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  here
+                </a>
+                . UMA's main Github can be viewed{" "}
+                <a
+                  href="https://github.com/UMAprotocol/protocol"
                   target="_blank"
                   rel="noopener noreferrer"
                 >
@@ -77,7 +85,7 @@ export default function Index() {
 
         {tabIndex === 4 && <YieldCalculator />}
       </Box>
-      <Box py={4} textAlign="center">
+      <Box py={2} textAlign="center">
         <a
           href="https://vercel.com/?utm_source=uma%2Femp-tools"
           target="_blank"
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 00000000..a160ddf0
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/utils/getDocLinks.ts b/utils/getDocLinks.ts
index e244f376..784f20db 100644
--- a/utils/getDocLinks.ts
+++ b/utils/getDocLinks.ts
@@ -3,6 +3,8 @@ interface DocLinkMap {
 }
 
 export const DOCS_MAP: DocLinkMap = {
+  MANAGING_POSITION:
+    "https://docs.umaproject.org/synthetic-tokens/explainer#managing-token-sponsor-positions",
   SLOW_WITHDRAW:
     "https://docs.umaproject.org/synthetic-tokens/explainer#slow-withdrawal",
 };