diff --git a/.eslintrc.json b/.eslintrc.json
index 69a674b7a..56319633d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -33,6 +33,7 @@
       "printWidth": 100,
       "singleQuote": true
     }],
-    "func-names": ["warn", "as-needed"]
+    "func-names": ["warn", "as-needed"],
+    "jsx-a11y/label-has-for": 0
   }
 }
diff --git a/src/renderer/component/common/form-components/form-field.jsx b/src/renderer/component/common/form-components/form-field.jsx
index 39f57dc9a..212982299 100644
--- a/src/renderer/component/common/form-components/form-field.jsx
+++ b/src/renderer/component/common/form-components/form-field.jsx
@@ -74,7 +74,11 @@ export class FormField extends React.PureComponent<Props> {
             {error}
           </label>
         )}
-        <div className="form-field__input">
+        <div
+          className={classnames('form-field__input', {
+            'form-field--auto-height': type === 'markdown',
+          })}
+        >
           {prefix && (
             <label htmlFor={name} className="form-field__prefix">
               {prefix}
diff --git a/src/renderer/component/publishForm/view.jsx b/src/renderer/component/publishForm/view.jsx
index af38738e7..0a7ab7523 100644
--- a/src/renderer/component/publishForm/view.jsx
+++ b/src/renderer/component/publishForm/view.jsx
@@ -1,21 +1,17 @@
 // @flow
 import * as React from 'react';
-import lbry from 'lbry';
-import { isNameValid, buildURI, regexInvalidURI, parseURI } from 'lbryURI';
+import { isNameValid, buildURI, regexInvalidURI } from 'lbryURI';
 import { Form, FormField, FormRow, FormFieldPrice, Submit } from 'component/common/form';
 import Button from 'component/button';
-import Modal from 'modal/modal';
 import ChannelSection from 'component/selectChannel';
-import Icon from 'component/common/icon';
 import classnames from 'classnames';
 import type { PublishParams, UpdatePublishFormData } from 'redux/reducers/publish';
 import FileSelector from 'component/common/file-selector';
+import { COPYRIGHT, OTHER } from 'constants/licenses';
+import { CHANNEL_NEW, CHANNEL_ANONYMOUS, MINIMUM_PUBLISH_BID } from 'constants/claim';
+import * as icons from 'constants/icons';
 import BidHelpText from './internal/bid-help-text';
 import LicenseType from './internal/license-type';
-import { COPYRIGHT, OTHER } from 'constants/licenses';
-import { MINIMUM_PUBLISH_BID } from 'constants/claim';
-import { CHANNEL_NEW, CHANNEL_ANONYMOUS } from 'constants/claim';
-import * as icons from 'constants/icons';
 
 type Props = {
   publish: PublishParams => void,
@@ -292,7 +288,6 @@ class PublishForm extends React.PureComponent<Props> {
       submitLabel = !publishing ? __('Publish') : __('Publishing...');
     }
 
-    console.log('this.props', this.props);
     return (
       <Form onSubmit={this.handlePublish}>
         <section className={classnames('card card--section')}>
diff --git a/src/renderer/component/userEmailNew/view.jsx b/src/renderer/component/userEmailNew/view.jsx
index 16760dc6d..e6485811f 100644
--- a/src/renderer/component/userEmailNew/view.jsx
+++ b/src/renderer/component/userEmailNew/view.jsx
@@ -1,18 +1,31 @@
-// I'll come back to this
-/* eslint-disable */
-import React from 'react';
-import { Form, FormRow, Submit } from 'component/common/form';
+// @flow
+import * as React from 'react';
+import { FormField, Form, FormRow, Submit } from 'component/common/form';
 
-class UserEmailNew extends React.PureComponent {
-  constructor(props) {
-    super(props);
+type Props = {
+  cancelButton: React.Node,
+  errorMessage: ?string,
+  isPending: boolean,
+  addUserEmail: string => void,
+};
+
+type State = {
+  email: string,
+};
+
+class UserEmailNew extends React.PureComponent<Props, State> {
+  constructor() {
+    super();
 
     this.state = {
       email: '',
     };
+
+    (this: any).handleSubmit = this.handleSubmit.bind(this);
+    (this: any).handleEmailChanged = this.handleEmailChanged.bind(this);
   }
 
-  handleEmailChanged(event) {
+  handleEmailChanged(event: SyntheticInputEvent<*>) {
     this.setState({
       email: event.target.value,
     });
@@ -20,7 +33,8 @@ class UserEmailNew extends React.PureComponent {
 
   handleSubmit() {
     const { email } = this.state;
-    this.props.addUserEmail(email);
+    const { addUserEmail } = this.props;
+    addUserEmail(email);
   }
 
   render() {
@@ -32,19 +46,20 @@ class UserEmailNew extends React.PureComponent {
           {__("We'll let you know about LBRY updates, security issues, and great new content.")}
         </p>
         <p>{__("We'll never sell your email, and you can unsubscribe at any time.")}</p>
-        <Form onSubmit={this.handleSubmit.bind(this)}>
-          <FormRow
-            type="text"
-            label="Email"
-            placeholder="youremail@example.org"
-            name="email"
-            value={this.state.email}
-            errorMessage={errorMessage}
-            onChange={event => {
-              this.handleEmailChanged(event);
-            }}
-          />
-          <div className="form-row-submit">
+        <Form onSubmit={this.handleSubmit}>
+          <FormRow>
+            <FormField
+              stretch
+              type="email"
+              label="Email"
+              placeholder="youremail@example.org"
+              name="email"
+              value={this.state.email}
+              error={errorMessage}
+              onChange={this.handleEmailChanged}
+            />
+          </FormRow>
+          <div className="card__actions">
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}
           </div>
@@ -55,4 +70,3 @@ class UserEmailNew extends React.PureComponent {
 }
 
 export default UserEmailNew;
-/* eslint-enable */
diff --git a/src/renderer/component/wunderbar/view.jsx b/src/renderer/component/wunderbar/view.jsx
index 31b7fdee8..583ed54e6 100644
--- a/src/renderer/component/wunderbar/view.jsx
+++ b/src/renderer/component/wunderbar/view.jsx
@@ -1,10 +1,11 @@
 // @flow
 import React from 'react';
 import classnames from 'classnames';
+import { normalizeURI } from 'lbryURI';
 import Icon from 'component/common/icon';
-import Autocomplete from './internal/autocomplete';
 import { parseQueryParams } from 'util/query_params';
 import * as icons from 'constants/icons';
+import Autocomplete from './internal/autocomplete';
 
 type Props = {
   updateSearchQuery: string => void,
diff --git a/src/renderer/modal/modal.jsx b/src/renderer/modal/modal.jsx
index eeed95ef0..c32e817ca 100644
--- a/src/renderer/modal/modal.jsx
+++ b/src/renderer/modal/modal.jsx
@@ -76,7 +76,7 @@ export class Modal extends React.PureComponent<ModalProps> {
             />
             {type === 'confirm' ? (
               <Button
-                button="alt"
+                button="link"
                 label={abortButtonLabel}
                 disabled={abortButtonDisabled}
                 onClick={onAborted}
diff --git a/src/renderer/modal/modalEmailCollection/view.jsx b/src/renderer/modal/modalEmailCollection/view.jsx
index 38e1a1d07..e74591c07 100644
--- a/src/renderer/modal/modalEmailCollection/view.jsx
+++ b/src/renderer/modal/modalEmailCollection/view.jsx
@@ -1,21 +1,29 @@
+// @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
 import Button from 'component/button';
 import UserEmailNew from 'component/userEmailNew';
 import UserEmailVerify from 'component/userEmailVerify';
 
-class ModalEmailCollection extends React.PureComponent {
+type Props = {
+  closeModal: () => void,
+  email: string,
+  user: ?{ has_verified_email: boolean },
+};
+
+class ModalEmailCollection extends React.PureComponent<Props> {
   renderInner() {
     const { closeModal, email, user } = this.props;
 
-    const cancelButton = <Button button="text" onClick={closeModal} label={__('Not Now')} />;
+    const cancelButton = <Button button="link" onClick={closeModal} label={__('Not Now')} />;
 
-    if (!user.has_verified_email && !email) {
+    if (user && !user.has_verified_email && !email) {
       return <UserEmailNew cancelButton={cancelButton} />;
-    } else if (!user.has_verified_email) {
+    } else if (user && !user.has_verified_email) {
       return <UserEmailVerify cancelButton={cancelButton} />;
     }
-    closeModal();
+
+    return closeModal();
   }
 
   render() {
diff --git a/src/renderer/modal/modalPublish/view.jsx b/src/renderer/modal/modalPublish/view.jsx
index 6b1af68dd..65ed5580f 100644
--- a/src/renderer/modal/modalPublish/view.jsx
+++ b/src/renderer/modal/modalPublish/view.jsx
@@ -23,9 +23,8 @@ class ModalSendTip extends React.PureComponent<Props> {
           closeModal();
         }}
       >
-        <p>
-          {__('Your file has been published to LBRY at the address')} <code>{uri}</code>!
-        </p>
+        <p>{__('Your file has been published to LBRY at the address')}</p>
+        <p className="card__success-msg">{uri}</p>
         <p>
           {__(
             'The file will take a few minutes to appear for other LBRY users. Until then it will be listed as "pending" under your published files.'
diff --git a/src/renderer/page/auth/view.jsx b/src/renderer/page/auth/view.jsx
index b3379af54..f7e045241 100644
--- a/src/renderer/page/auth/view.jsx
+++ b/src/renderer/page/auth/view.jsx
@@ -1,3 +1,4 @@
+// @flow
 import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import Button from 'component/button';
@@ -6,29 +7,31 @@ import UserEmailVerify from 'component/userEmailVerify';
 import UserVerify from 'component/userVerify';
 import Page from 'component/page';
 
-export class AuthPage extends React.PureComponent {
+type Props = {
+  isPending: boolean,
+  email: string,
+  // Not sure why it isn't recognizing that we are using this prop type
+  // Something to do with how we are passing all the props through probably
+  pathAfterAuth: string, // eslint-disable-line react/no-unused-prop-types
+  user: ?{
+    has_verified_email: boolean,
+    is_reward_approved: boolean,
+    is_identity_verified: boolean,
+  },
+  navigate: (string, ?{}) => void,
+};
+
+export class AuthPage extends React.PureComponent<Props> {
   componentWillMount() {
     this.navigateIfAuthenticated(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props) {
     this.navigateIfAuthenticated(nextProps);
   }
 
-  navigateIfAuthenticated(props) {
-    const { isPending, user } = props;
-    if (
-      !isPending &&
-      user &&
-      user.has_verified_email &&
-      (user.is_reward_approved || user.is_identity_verified)
-    ) {
-      props.navigate(props.pathAfterAuth);
-    }
-  }
-
   getTitle() {
-    const { email, isPending, isVerificationCandidate, user } = this.props;
+    const { email, isPending, user } = this.props;
 
     if (isPending || (user && !user.has_verified_email && !email)) {
       return __('Human Proofing');
@@ -40,8 +43,20 @@ export class AuthPage extends React.PureComponent {
     return __('Welcome to LBRY');
   }
 
+  navigateIfAuthenticated = (props: Props) => {
+    const { isPending, user, pathAfterAuth, navigate } = props;
+    if (
+      !isPending &&
+      user &&
+      user.has_verified_email &&
+      (user.is_reward_approved || user.is_identity_verified)
+    ) {
+      navigate(pathAfterAuth);
+    }
+  };
+
   renderMain() {
-    const { email, isPending, isVerificationCandidate, user } = this.props;
+    const { email, isPending, user } = this.props;
 
     if (isPending) {
       return [<BusyIndicator message={__('Authenticating')} />, true];
@@ -56,7 +71,7 @@ export class AuthPage extends React.PureComponent {
   }
 
   render() {
-    const { email, user, isPending, navigate } = this.props;
+    const { navigate } = this.props;
     const [innerContent, useTemplate] = this.renderMain();
 
     return (
@@ -72,7 +87,11 @@ export class AuthPage extends React.PureComponent {
                 {`${__(
                   'This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards and may be used to sync usage data across devices.'
                 )} `}
-                <Button onClick={() => navigate('/discover')} label={__('Return home')} />.
+                <Button
+                  button="link"
+                  onClick={() => navigate('/discover')}
+                  label={__('Return home.')}
+                />
               </div>
             </div>
           </section>
diff --git a/src/renderer/page/backup/view.jsx b/src/renderer/page/backup/view.jsx
index 3163c0d29..5fee3c0d4 100644
--- a/src/renderer/page/backup/view.jsx
+++ b/src/renderer/page/backup/view.jsx
@@ -12,7 +12,7 @@ type Props = {
 class BackupPage extends React.PureComponent<Props> {
   render() {
     const { daemonSettings } = this.props;
-    const { lbryum_wallet_dir } = daemonSettings;
+    const { lbryum_wallet_dir: lbryumWalletDir } = daemonSettings;
 
     const noDaemonSettings = Object.keys(daemonSettings).length === 0;
 
@@ -35,24 +35,16 @@ class BackupPage extends React.PureComponent<Props> {
                     'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
                   )}
                 </p>
-              </div>
-              <div className="card__content">
                 <p>
                   {__(
                     'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
                   )}
                 </p>
-                <div className="card__content">
-                  <code>{lbryum_wallet_dir}</code>
-                </div>
-              </div>
-              <div className="card__content">
+                <p className="card__success-msg">{lbryumWalletDir}</p>
                 <p>
-                  <strong>
-                    {__(
-                      'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
-                    )}
-                  </strong>
+                  {__(
+                    'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
+                  )}
                 </p>
                 <p>
                   For more details on backing up and best practices,{' '}
diff --git a/src/renderer/page/discover/view.jsx b/src/renderer/page/discover/view.jsx
index abe0c0f56..28adf330c 100644
--- a/src/renderer/page/discover/view.jsx
+++ b/src/renderer/page/discover/view.jsx
@@ -18,7 +18,7 @@ class DiscoverPage extends React.PureComponent<Props> {
     const { featuredUris, fetchingFeaturedUris } = this.props;
     const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length;
     const failedToLoad = !fetchingFeaturedUris && !hasContent;
-    // lbry://fortnite-top-stream-moments-nickatnydte#27395875d68e9d3e53be46edf36d622aa8284441
+
     return (
       <Page noPadding isLoading={!hasContent && fetchingFeaturedUris}>
         {hasContent &&
diff --git a/src/renderer/page/rewards/view.jsx b/src/renderer/page/rewards/view.jsx
index a25b06ec4..f79e806e8 100644
--- a/src/renderer/page/rewards/view.jsx
+++ b/src/renderer/page/rewards/view.jsx
@@ -81,12 +81,13 @@ class RewardsPage extends React.PureComponent {
 
     if (!daemonSettings.share_usage_data) {
       return (
-        <div className="card__content empty">
+        <div className="card card--section">
+          <div className="card__title">{__('Disabled')}</div>
           <p>
             {__(
               'Rewards are currently disabled for your account. Turn on diagnostic data sharing, in'
             )}{' '}
-            <Button onClick={() => navigate('/settings')} label="Settings" />
+            <Button button="link" onClick={() => navigate('/settings')} label="Settings" />
             {__(', in order to re-enable them.')}
           </p>
         </div>
diff --git a/src/renderer/scss/_gui.scss b/src/renderer/scss/_gui.scss
index 3a6bdae70..70e31aead 100644
--- a/src/renderer/scss/_gui.scss
+++ b/src/renderer/scss/_gui.scss
@@ -138,6 +138,7 @@ dd {
 
 p {
   font-family: 'metropolis-medium';
+  padding: $spacing-vertical * 1/3 0;
 }
 
 .page {
diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index 0f0b4e797..246104151 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -31,6 +31,9 @@ $large-breakpoint: 1760px;
   --color-light-blue: #49b2e2;
   --color-red: #e2495e;
   --color-yellow: #fbd55e;
+  --color-green: #399483;
+  --color-green-light: #effbe4;
+  --color-green-blue: #2ec1a8;
   --color-divider: #e3e3e3;
 
   --text-color: var(--color-black);
@@ -123,6 +126,9 @@ $large-breakpoint: 1760px;
   --card-radius: 2px;
   --card-margin: $spacing-vertical * 2/3;
   --card-wallet-color: var(--text-color-inverse);
+  --success-msg-color: var(--color-green);
+  --success-msg-border: var(--color-green-blue);
+  --success-msg-bg: var(--color-green-light);
 
   /* File Tile Card */
   --file-tile--media-size: 60px;
diff --git a/src/renderer/scss/component/_button.scss b/src/renderer/scss/component/_button.scss
index 8b19a4be9..e4e08977d 100644
--- a/src/renderer/scss/component/_button.scss
+++ b/src/renderer/scss/component/_button.scss
@@ -114,7 +114,7 @@ button:disabled {
   text-transform: uppercase;
 }
 
-.btn:not(.btn--no-padding):not(.btn--link) {
+.btn:not(.btn--no-padding):not(.btn--link):not(.btn--no-style) {
   .btn__content {
     padding: 0 8px;
     display: flex;
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index 5cb1baae9..eacc25491 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -282,7 +282,7 @@
   }
 
   .card:last-of-type {
-    margin-right: $spacing-vertical * 2/3;
+    margin-right: $spacing-width;
   }
 }
 
@@ -336,12 +336,8 @@
     display: inline-block;
     vertical-align: top;
     overflow: visible;
-    // -- three cards on a screen
-    // -- minus 12px for 1/3 of the page padding (36px)
-    // -- minus 20px for the card's margin
-    // Ideally we should be able to use $spacing-width / 3, but I'm not sure
-    // how inside the calc function
-    width: calc((100% / 3) - 12px - 20px);
+    // 35 px to handle to padding between cards
+    width: calc((100% / 3) - 35px);
   }
 
   .card:not(:first-of-type) {
@@ -354,11 +350,20 @@
 
   @media only screen and (min-width: $medium-breakpoint) {
     .card {
-      width: calc((100% / 4) - 12px - 20px);
+      // 31 px to handle to padding between cards
+      width: calc((100% / 4) - 31px);
     }
   }
 }
 
+.card__success-msg {
+  border-left: 2px solid var(--success-msg-border);
+  color: var(--success-msg-color);
+  background-color: var(--success-msg-bg);
+  padding: $spacing-vertical * 1/3;
+  margin: $spacing-vertical * 1/3 0;
+}
+
 .card__media--autothumb {
   color: red !important;
 }
diff --git a/src/renderer/scss/component/_form-field.scss b/src/renderer/scss/component/_form-field.scss
index b00ca1c30..f05b802df 100644
--- a/src/renderer/scss/component/_form-field.scss
+++ b/src/renderer/scss/component/_form-field.scss
@@ -51,6 +51,10 @@
   input.paginate-channel {
     width: 35px;
   }
+    
+  &.form-field--auto-height {
+    height: auto;
+  }
 }
 
 .form-field__help,