diff --git a/package.json b/package.json
index 10473940c..056ed81bf 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@babel/register": "^7.0.0",
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "^16.8",
-    "@lbry/components": "^2.8.0",
+    "@lbry/components": "^3.0.0",
     "@reach/menu-button": "^0.1.18",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",
diff --git a/static/app-strings.json b/static/app-strings.json
index 1f436a49e..c74aed14b 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -820,7 +820,6 @@
   "Advanced Editor": "Advanced Editor",
   "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.": "If you bid more than %amount% LBC, when someone navigates to %uri%, it will load your published content. However, you can get a longer version of this URL for any bid.",
   "%nameOrTitle% has been published to lbry://%name%. Click here to view it.": "%nameOrTitle% has been published to lbry://%name%. Click here to view it.",
-  "Discussion": "Discussion",
   "If you don't choose a file, the file from your existing claim %name% will be used": "If you don't choose a file, the file from your existing claim %name% will be used",
   "To enable this feature, check 'Save Password' the next time you start the app.": "To enable this feature, check 'Save Password' the next time you start the app.",
   "for adding a subscription!": "for adding a subscription!",
diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx
index 01f3ee369..e7c286e67 100644
--- a/ui/component/app/view.jsx
+++ b/ui/component/app/view.jsx
@@ -113,7 +113,7 @@ function App(props: Props) {
 
   useEffect(() => {
     // $FlowFixMe
-    document.documentElement.setAttribute('data-mode', theme);
+    document.documentElement.setAttribute('theme', theme);
   }, [theme]);
 
   useEffect(() => {
diff --git a/ui/component/blockButton/view.jsx b/ui/component/blockButton/view.jsx
index 19569f432..ddae5535e 100644
--- a/ui/component/blockButton/view.jsx
+++ b/ui/component/blockButton/view.jsx
@@ -26,7 +26,6 @@ export default function BlockButton(props: Props) {
   return permanentUrl && !claimIsMine ? (
     <Button
       ref={blockRef}
-      iconColor="red"
       icon={ICONS.BLOCK}
       button={'alt'}
       label={blockedOverride || blockLabel}
diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx
index 10aade4b1..8325bbe2d 100644
--- a/ui/component/button/view.jsx
+++ b/ui/component/button/view.jsx
@@ -25,7 +25,6 @@ type Props = {
   button: ?string, // primary, secondary, alt, link
   iconSize?: number,
   iconColor?: string,
-  constrict: ?boolean, // to shorten the button and ellipsis, only use for links
   activeClass?: string,
   innerRef: ?any,
   // Events
@@ -60,7 +59,6 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
     button,
     iconSize,
     iconColor,
-    constrict,
     activeClass,
     emailVerified,
     requiresAuth,
@@ -81,7 +79,6 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
           'button--close': button === 'close',
           'button--disabled': disabled,
           'button--link': button === 'link',
-          'button--constrict': constrict,
         }
       : 'button--no-style',
     className
diff --git a/ui/component/cardMedia/FreezeframeLite/styles.scss b/ui/component/cardMedia/FreezeframeLite/styles.scss
index 730ba7f85..4430db501 100644
--- a/ui/component/cardMedia/FreezeframeLite/styles.scss
+++ b/ui/component/cardMedia/FreezeframeLite/styles.scss
@@ -13,9 +13,11 @@ $transition-duration: 300ms;
     z-index: $base-zindex;
     vertical-align: top;
     opacity: 0;
+    border-radius: var(--border-radius);
   }
 
   .ff-canvas {
+    border-radius: var(--border-radius);
     display: inline-block;
     position: absolute;
     top: 0;
diff --git a/ui/component/channelAbout/view.jsx b/ui/component/channelAbout/view.jsx
index c7eb78825..39e78ab3a 100644
--- a/ui/component/channelAbout/view.jsx
+++ b/ui/component/channelAbout/view.jsx
@@ -27,13 +27,13 @@ function ChannelContent(props: Props) {
       {showAbout && (
         <Fragment>
           {description && (
-            <div className="media__info-text media__info-text--small">
+            <div className="media__info-text media__info-text--constrained">
               <MarkdownPreview content={description} promptLinks />
             </div>
           )}
           {email && (
             <Fragment>
-              <div className="media__info-title">{__('Contact')}</div>
+              <label>{__('Contact')}</label>
               <div className="media__info-text">
                 <MarkdownPreview content={formatEmail(email)} promptLinks />
               </div>
@@ -41,7 +41,7 @@ function ChannelContent(props: Props) {
           )}
           {website && (
             <Fragment>
-              <div className="media__info-title">{__('Site')}</div>
+              <label>{__('Site')}</label>
               <div className="media__info-text">
                 <MarkdownPreview content={website} promptLinks />
               </div>
diff --git a/ui/component/channelContent/view.jsx b/ui/component/channelContent/view.jsx
index f749a5cee..fe8a68274 100644
--- a/ui/component/channelContent/view.jsx
+++ b/ui/component/channelContent/view.jsx
@@ -42,7 +42,7 @@ function ChannelContent(props: Props) {
 
       {!fetching && !hasContent && !channelIsBlocked && !channelIsBlackListed && (
         <div className="card--section">
-          <h2 className="help">{__("This channel hasn't uploaded anything.")}</h2>
+          <h2 className="section__subtitle">{__("This channel hasn't uploaded anything.")}</h2>
         </div>
       )}
 
diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx
index 060775c14..57f9ce816 100644
--- a/ui/component/channelEdit/view.jsx
+++ b/ui/component/channelEdit/view.jsx
@@ -3,9 +3,9 @@ import React, { useState } from 'react';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
 import SelectAsset from 'component/selectAsset';
-import TagsSelect from 'component/tagsSelect';
 import * as PAGES from 'constants/pages';
 import { MINIMUM_PUBLISH_BID } from 'constants/claim';
+import TagsSearch from 'component/tagsSearch';
 
 type Props = {
   claim: ChannelClaim,
@@ -173,13 +173,16 @@ function ChannelForm(props: Props) {
         disabled={false}
         onChange={text => setParams({ ...params, description: text })}
       />
-      <TagsSelect
-        title={__('Add Tags')}
+
+      <TagsSearch
         suggestMature
-        disableAutoFocus
-        help={__('The better your tags are, the easier it will be for people to discover your channel.')}
-        empty={__('No tags added')}
-        placeholder={__('Add a tag')}
+        disabledAutoFocus
+        tagsPassedIn={params.tags || []}
+        label={__('Tags Selected')}
+        onRemove={clickedTag => {
+          const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
+          setParams({ ...params, tags: newTags });
+        }}
         onSelect={newTags => {
           newTags.forEach(newTag => {
             if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
@@ -190,11 +193,6 @@ function ChannelForm(props: Props) {
             }
           });
         }}
-        onRemove={clickedTag => {
-          const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
-          setParams({ ...params, tags: newTags });
-        }}
-        tagsChosen={params.tags || []}
       />
       <div className={'card__actions'}>
         <Button button="primary" label={__('Submit')} onClick={handleSubmit} />
diff --git a/ui/component/channelThumbnail/view.jsx b/ui/component/channelThumbnail/view.jsx
index 75dc316b4..e058aba7b 100644
--- a/ui/component/channelThumbnail/view.jsx
+++ b/ui/component/channelThumbnail/view.jsx
@@ -18,7 +18,7 @@ function ChannelThumbnail(props: Props) {
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
   const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
-  const colorClassName = `channel-thumbnail__default--${initializer % 4}`;
+  const colorClassName = `channel-thumbnail__default--${Math.abs(initializer % 4)}`;
   const showThumb = !obscure && !!thumbnail;
   return (
     <div
diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx
index 60c9fbd6e..832b7fca4 100644
--- a/ui/component/claimList/view.jsx
+++ b/ui/component/claimList/view.jsx
@@ -121,7 +121,13 @@ export default function ClaimList(props: Props) {
       {urisLength > 0 && (
         <ul className="ul--no-style">
           {sortedUris.map((uri, index) => (
-            <ClaimPreview key={uri} uri={uri} type={type} showUserBlocked={showHiddenByUser} />
+            <ClaimPreview
+              key={uri}
+              uri={uri}
+              type={type}
+              properties={type !== 'small' ? undefined : false}
+              showUserBlocked={showHiddenByUser}
+            />
           ))}
         </ul>
       )}
diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx
index 1149910c4..0ebb9605d 100644
--- a/ui/component/claimListDiscover/view.jsx
+++ b/ui/component/claimListDiscover/view.jsx
@@ -234,9 +234,9 @@ function ClaimListDiscover(props: Props) {
       </FormField>
       {!hideCustomization && (
         <Fragment>
-          <span>{__('For')}</span>
+          <span className="claim-list__conjuction">{__('for')}</span>
           {!personalView && tags && tags.length ? (
-            tags.map(tag => <Tag key={tag} name={tag} disabled />)
+            tags.map(tag => <Tag key={tag} name={tag} disabled type="large" />)
           ) : (
             <FormField
               type="select"
diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx
index 8a7372e15..412dfb656 100644
--- a/ui/component/claimPreview/view.jsx
+++ b/ui/component/claimPreview/view.jsx
@@ -49,6 +49,7 @@ type Props = {
   actions: boolean | Node | string | number,
   properties: boolean | Node | string | number,
   onClick?: any => any,
+  hideBlock?: boolean,
 };
 
 const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@@ -77,6 +78,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     actions,
     properties,
     onClick,
+    hideBlock,
   } = props;
   const shouldFetch =
     claim === undefined || (claim !== null && claim.value_type === 'channel' && isEmpty(claim.meta) && !pending);
@@ -184,6 +186,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
         'claim-preview--large': type === 'large',
         'claim-preview--inline': type === 'inline',
         'claim-preview--tooltip': type === 'tooltip',
+        'claim-preview--channel': isChannel,
         'claim-preview--visited': !isChannel && !claimIsMine && hasVisitedUri,
         'claim-preview--pending': pending,
       })}
@@ -203,7 +206,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                   {isChannel && !channelIsBlocked && !claimIsMine && (
                     <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
                   )}
-                  {isChannel && !isSubscribed && !claimIsMine && (
+                  {!hideBlock && isChannel && !isSubscribed && !claimIsMine && (
                     <BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
                   )}
                   {!isChannel && claim && <FileProperties uri={uri} />}
diff --git a/ui/component/claimUri/view.jsx b/ui/component/claimUri/view.jsx
index e48c205d8..3112c2c4b 100644
--- a/ui/component/claimUri/view.jsx
+++ b/ui/component/claimUri/view.jsx
@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import classnames from 'classnames';
 import { clipboard } from 'electron';
 import Button from 'component/button';
 
@@ -7,14 +8,15 @@ type Props = {
   shortUrl: ?string,
   uri: string,
   doToast: ({ message: string }) => void,
+  inline?: boolean,
 };
 
 function ClaimUri(props: Props) {
-  const { shortUrl, uri, doToast } = props;
+  const { shortUrl, uri, doToast, inline = false } = props;
 
   return (
     <Button
-      className="media__uri"
+      className={classnames('media__uri', { 'media__uri--inline': inline })}
       button="alt"
       label={shortUrl || uri}
       onClick={() => {
diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx
index 48ac2bddf..85aa09aba 100644
--- a/ui/component/comment/view.jsx
+++ b/ui/component/comment/view.jsx
@@ -18,11 +18,16 @@ function Comment(props: Props) {
   return (
     <li className="comment">
       <div className="comment__meta">
-        <Button
-          className="button--uri-indicator truncated-text comment__author"
-          navigate={authorUri}
-          label={author || __('Anonymous')}
-        />
+        {!author ? (
+          <span className="comment__author">{__('Anonymous')}</span>
+        ) : (
+          <Button
+            className="button--uri-indicator truncated-text comment__author"
+            navigate={authorUri}
+            label={author}
+          />
+        )}
+
         <time className="comment__time" dateTime={timePosted}>
           {relativeDate(timePosted)}
         </time>
diff --git a/ui/component/common/card.jsx b/ui/component/common/card.jsx
index a60941932..e1159929f 100644
--- a/ui/component/common/card.jsx
+++ b/ui/component/common/card.jsx
@@ -10,19 +10,21 @@ type Props = {
   body?: string | Node,
   actions?: string | Node,
   icon?: string,
+  className?: string,
+  actionIconPadding?: boolean,
 };
 
 export default function Card(props: Props) {
-  const { title, subtitle, body, actions, icon } = props;
+  const { title, subtitle, body, actions, icon, className, actionIconPadding = true } = props;
   return (
-    <section className={classnames('card')}>
+    <section className={classnames(className, 'card')}>
       {title && (
         <div className="card__header">
           <div className="section__flex">
             {icon && <Icon sectionIcon icon={icon} />}
             <div>
               <h2 className="section__title">{title}</h2>
-              <div className="section__subtitle">{subtitle}</div>
+              {subtitle && <div className="section__subtitle">{subtitle}</div>}
             </div>
           </div>
         </div>
@@ -30,7 +32,11 @@ export default function Card(props: Props) {
 
       {body && <div className={classnames('card__body', { 'card__body--with-icon': icon })}>{body}</div>}
       {actions && (
-        <div className={classnames('card__main-actions', { 'card__main-actions--with-icon': icon })}>{actions}</div>
+        <div
+          className={classnames('card__main-actions', { 'card__main-actions--with-icon': icon && actionIconPadding })}
+        >
+          {actions}
+        </div>
       )}
     </section>
   );
diff --git a/ui/component/common/file-selector.jsx b/ui/component/common/file-selector.jsx
index b7e573603..2ebfb256a 100644
--- a/ui/component/common/file-selector.jsx
+++ b/ui/component/common/file-selector.jsx
@@ -66,7 +66,7 @@ class FileSelector extends React.PureComponent<Props> {
           readOnly="readonly"
           value={placeHolder || __('Choose a file')}
           inputButton={
-            <Button button="primary" disabled={disabled} onClick={this.fileInputButton} label={buttonLabel} />
+            <Button button="secondary" disabled={disabled} onClick={this.fileInputButton} label={buttonLabel} />
           }
         />
         <input
diff --git a/ui/component/common/form-components/form-field.jsx b/ui/component/common/form-components/form-field.jsx
index 4dd0864dc..0e44df2c6 100644
--- a/ui/component/common/form-components/form-field.jsx
+++ b/ui/component/common/form-components/form-field.jsx
@@ -80,36 +80,24 @@ export class FormField extends React.PureComponent<Props> {
     const errorMessage = typeof error === 'object' ? error.message : error;
 
     const Wrapper = blockWrap
-      ? ({ children: innerChildren }) => <fieldset-section>{innerChildren}</fieldset-section>
-      : ({ children: innerChildren }) => <React.Fragment>{innerChildren}</React.Fragment>;
+      ? ({ children: innerChildren }) => <fieldset-section class="radio">{innerChildren}</fieldset-section>
+      : ({ children: innerChildren }) => <span className="radio">{innerChildren}</span>;
 
     let input;
     if (type) {
       if (type === 'radio') {
         input = (
           <Wrapper>
-            <radio-element>
-              <input id={name} type="radio" {...inputProps} />
-              <label htmlFor={name}>{label}</label>
-              <radio-toggle onClick={inputProps.onChange} />
-            </radio-element>
+            <input id={name} type="radio" {...inputProps} />
+            <label htmlFor={name}>{label}</label>
           </Wrapper>
         );
       } else if (type === 'checkbox') {
-        // web components treat props weird
-        // we need to fully remove it for proper component:attribute css styling
-        // $FlowFixMe
-        const elementProps = inputProps.disabled ? { disabled: true } : {};
         input = (
-          <Wrapper>
-            <checkbox-element {...elementProps}>
-              <input id={name} type="checkbox" {...inputProps} tabIndex={0} />
-              <label htmlFor={name} tabIndex={-1}>
-                {label}
-              </label>
-              <checkbox-toggle onClick={inputProps.onChange} tabIndex={-1} />
-            </checkbox-element>
-          </Wrapper>
+          <div className="checkbox">
+            <input id={name} type="checkbox" {...inputProps} />
+            <label htmlFor={name}>{label}</label>
+          </div>
         );
       } else if (type === 'select') {
         input = (
@@ -172,7 +160,11 @@ export class FormField extends React.PureComponent<Props> {
         input = (
           <React.Fragment>
             <fieldset-section>
-              <label htmlFor={name}>{errorMessage ? <span className="error-text">{errorMessage}</span> : label}</label>
+              {label && (
+                <label htmlFor={name}>
+                  {errorMessage ? <span className="error-text">{errorMessage}</span> : label}
+                </label>
+              )}
               {prefix && <label htmlFor={name}>{prefix}</label>}
               {inner}
             </fieldset-section>
diff --git a/ui/component/common/unsupported-on-web.jsx b/ui/component/common/unsupported-on-web.jsx
index 2a3d45af5..d3667a0e5 100644
--- a/ui/component/common/unsupported-on-web.jsx
+++ b/ui/component/common/unsupported-on-web.jsx
@@ -11,7 +11,7 @@ export default function UnsupportedOnWeb(props: Props) {
 
   return (
     IS_WEB && (
-      <div className="card__subtitle--status">
+      <div className="section__subtitle--status">
         {type === 'page' && __('This page is not currently supported on the web')}
         {type === 'feature' && __('This feature is not currently supported on the web')}.{' '}
         <Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" /> for full feature
diff --git a/ui/component/copyableText/view.jsx b/ui/component/copyableText/view.jsx
index ea75b9fbc..b45d24b46 100644
--- a/ui/component/copyableText/view.jsx
+++ b/ui/component/copyableText/view.jsx
@@ -9,10 +9,11 @@ type Props = {
   snackMessage: ?string,
   doToast: ({ message: string }) => void,
   label?: string,
+  primaryButton?: boolean,
 };
 
 export default function CopyableText(props: Props) {
-  const { copyable, doToast, snackMessage, label } = props;
+  const { copyable, doToast, snackMessage, label, primaryButton = false } = props;
 
   const input = useRef();
 
@@ -43,7 +44,7 @@ export default function CopyableText(props: Props) {
       onFocus={onFocus}
       inputButton={
         <Button
-          button="inverse"
+          button={primaryButton ? 'primary' : 'secondary'}
           icon={ICONS.COPY}
           onClick={() => {
             copyToClipboard();
diff --git a/ui/component/embedArea/view.jsx b/ui/component/embedArea/view.jsx
index 058b25732..fca7b7493 100644
--- a/ui/component/embedArea/view.jsx
+++ b/ui/component/embedArea/view.jsx
@@ -47,17 +47,18 @@ export default function EmbedArea(props: Props) {
         label={label}
         value={embedText || ''}
         ref={input}
+        helper={
+          <Button
+            icon={ICONS.COPY}
+            button="link"
+            label={__('Copy')}
+            onClick={() => {
+              copyToClipboard();
+            }}
+          />
+        }
         onFocus={onFocus}
       />
-      <div className="card__actions card__actions--center">
-        <Button
-          icon={ICONS.COPY}
-          button="link"
-          onClick={() => {
-            copyToClipboard();
-          }}
-        />
-      </div>
     </fieldset-section>
   );
 }
diff --git a/ui/component/expandable/view.jsx b/ui/component/expandable/view.jsx
index 15b0fe37a..c082f4cab 100644
--- a/ui/component/expandable/view.jsx
+++ b/ui/component/expandable/view.jsx
@@ -23,7 +23,7 @@ export default function Expandable(props: Props) {
   return (
     <div ref={ref}>
       {rect && rect.height > COLLAPSED_HEIGHT ? (
-        <div ref={ref} className="expandable">
+        <div ref={ref}>
           <div
             className={classnames({
               'expandable--open': expanded,
diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx
index 1d4d75d0c..f2da8a280 100644
--- a/ui/component/fileActions/view.jsx
+++ b/ui/component/fileActions/view.jsx
@@ -22,7 +22,7 @@ class FileActions extends React.PureComponent<Props> {
         {showDelete && (
           <Tooltip label={__('Remove from your library')}>
             <Button
-              button="link"
+              button="alt"
               icon={ICONS.DELETE}
               description={__('Delete')}
               onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
@@ -31,7 +31,7 @@ class FileActions extends React.PureComponent<Props> {
         )}
         {!claimIsMine && (
           <Tooltip label={__('Report content')}>
-            <Button button="link" icon={ICONS.REPORT} href={`https://lbry.com/dmca/${claimId}`} />
+            <Button button="alt" icon={ICONS.REPORT} href={`https://lbry.com/dmca/${claimId}`} />
           </Tooltip>
         )}
       </React.Fragment>
diff --git a/ui/component/fileDetails/view.jsx b/ui/component/fileDetails/view.jsx
index 75313dbdb..fab99d581 100644
--- a/ui/component/fileDetails/view.jsx
+++ b/ui/component/fileDetails/view.jsx
@@ -4,8 +4,10 @@ import MarkdownPreview from 'component/common/markdown-preview';
 import Button from 'component/button';
 import Expandable from 'component/expandable';
 import path from 'path';
+import ClaimTags from 'component/claimTags';
 
 type Props = {
+  uri: string,
   claim: StreamClaim,
   fileInfo: FileListItem,
   metadata: StreamMetadata,
@@ -16,7 +18,7 @@ type Props = {
 
 class FileDetails extends PureComponent<Props> {
   render() {
-    const { claim, contentType, fileInfo, metadata, openFolder } = this.props;
+    const { uri, claim, contentType, fileInfo, metadata, openFolder } = this.props;
 
     if (!claim || !metadata) {
       return <span className="empty">{__('Empty claim or metadata info.')}</span>;
@@ -47,47 +49,49 @@ class FileDetails extends PureComponent<Props> {
               </div>
             </Fragment>
           )}
-          <div className="media__info-title">Info</div>
-          <div className="media__info-text">
-            <div>
-              {__('Content-Type')}
-              {': '}
-              {mediaType}
-            </div>
-            {fileSize && (
-              <div>
-                {__('File Size')}
-                {': '}
-                {fileSize}
-              </div>
-            )}
-            <div>
-              {__('Languages')}
-              {': '}
-              {languages ? languages.join(' ') : null}
-            </div>
-            <div>
-              {__('License')}
-              {': '}
-              {license}
-            </div>
-            {downloadPath && (
-              <div>
-                {__('Downloaded to')}
-                {': '}
-                <Button
-                  button="link"
-                  className="button--download-link"
-                  onClick={() => {
-                    if (downloadPath) {
-                      openFolder(downloadPath);
-                    }
-                  }}
-                  label={downloadNote || downloadPath}
-                />
-              </div>
-            )}
-          </div>
+          <ClaimTags uri={uri} type="large" />
+          <table className="table table--condensed table--fixed table--file-details">
+            <tbody>
+              <tr>
+                <td> {__('Content Type')}</td>
+                <td>{mediaType}</td>
+              </tr>
+              {fileSize && (
+                <tr>
+                  <td> {__('File Size')}</td>
+                  <td>{fileSize}</td>
+                </tr>
+              )}
+              {languages && (
+                <tr>
+                  <td>{__('Languages')}</td>
+                  <td>{languages.join(' ')}</td>
+                </tr>
+              )}
+              <tr>
+                <td>{__('License')}</td>
+                <td>{license}</td>
+              </tr>
+              {downloadPath && (
+                <tr>
+                  <td>{__('Downloaded to')}</td>
+                  <td>
+                    {/* {downloadPath.replace(/(.{10})/g, '$1\u200b')} */}
+                    <Button
+                      button="link"
+                      className="button--download-link"
+                      onClick={() => {
+                        if (downloadPath) {
+                          openFolder(downloadPath);
+                        }
+                      }}
+                      label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
+                    />
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
         </Expandable>
       </Fragment>
     );
diff --git a/ui/component/fileDownloadLink/view.jsx b/ui/component/fileDownloadLink/view.jsx
index 226d92a36..e2297ab74 100644
--- a/ui/component/fileDownloadLink/view.jsx
+++ b/ui/component/fileDownloadLink/view.jsx
@@ -32,7 +32,7 @@ function FileDownloadLink(props: Props) {
     return (
       <ToolTip label={__('Open file')}>
         <Button
-          button="link"
+          button="alt"
           icon={ICONS.EXTERNAL}
           onClick={() => {
             pause();
@@ -45,7 +45,7 @@ function FileDownloadLink(props: Props) {
     return (
       <ToolTip label={__('Add to your library')}>
         <Button
-          button="link"
+          button="alt"
           icon={ICONS.DOWNLOAD}
           onClick={() => {
             download(uri);
diff --git a/ui/component/fileProperties/view.jsx b/ui/component/fileProperties/view.jsx
index 5368f5f36..109ef0b3a 100644
--- a/ui/component/fileProperties/view.jsx
+++ b/ui/component/fileProperties/view.jsx
@@ -18,10 +18,10 @@ export default function FileProperties(props: Props) {
 
   return (
     <div className="file-properties">
+      <FilePrice hideFree uri={uri} />
+      <VideoDuration uri={uri} />
       {isSubscribed && <Icon tooltip icon={icons.SUBSCRIBE} />}
       {!claimIsMine && downloaded && <Icon tooltip icon={icons.DOWNLOAD} />}
-      <FilePrice hideFree uri={uri} />
-      <VideoDuration className="media__subtitle" uri={uri} />
     </div>
   );
 }
diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx
index 8db1ad21a..f9d708cae 100644
--- a/ui/component/header/view.jsx
+++ b/ui/component/header/view.jsx
@@ -44,7 +44,7 @@ const Header = (props: Props) => {
   } = props;
   const authenticated = Boolean(email);
 
-  //on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
+  // on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
   const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
 
   // Sign out if they click the "x" when they are on the password prompt
@@ -78,6 +78,9 @@ const Header = (props: Props) => {
     <header
       className={classnames('header', {
         'header--minimal': authHeader,
+        // @if TARGET='web'
+        'header--noauth-web': !authenticated,
+        // @endif
         // @if TARGET='app'
         'header--mac': IS_MAC,
         // @endif
@@ -118,8 +121,8 @@ const Header = (props: Props) => {
         </div>
 
         {!authHeader ? (
-          <div className={classnames('header__menu', { 'header__menu--small': IS_WEB && !authenticated })}>
-            {!IS_WEB || authenticated ? (
+          <div className={classnames('header__menu', { 'header__menu--with-balance': !IS_WEB || authenticated })}>
+            {(!IS_WEB || authenticated) && (
               <Fragment>
                 <Menu>
                   <MenuButton className="header__navigation-item menu__title">{getWalletTitle()}</MenuButton>
@@ -135,7 +138,7 @@ const Header = (props: Props) => {
                   </MenuList>
                 </Menu>
                 <Menu>
-                  <MenuButton className="header__navigation-item menu__title">
+                  <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
                     <Icon size={18} icon={ICONS.ACCOUNT} />
                   </MenuButton>
                   <MenuList className="menu__list--header">
@@ -161,28 +164,28 @@ const Header = (props: Props) => {
                     )}
                   </MenuList>
                 </Menu>
-
-                <Menu>
-                  <MenuButton className="header__navigation-item menu__title">
-                    <Icon size={18} icon={ICONS.SETTINGS} />
-                  </MenuButton>
-                  <MenuList className="menu__list--header">
-                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
-                      <Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
-                      {__('Settings')}
-                    </MenuItem>
-                    <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
-                      <Icon aria-hidden icon={ICONS.HELP} />
-                      {__('Help')}
-                    </MenuItem>
-                    <MenuItem className="menu__link" onSelect={handleThemeToggle}>
-                      <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
-                      {currentTheme === 'light' ? __('Dark') : __('Light')}
-                    </MenuItem>
-                  </MenuList>
-                </Menu>
               </Fragment>
-            ) : (
+            )}
+            <Menu>
+              <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
+                <Icon size={18} icon={ICONS.SETTINGS} />
+              </MenuButton>
+              <MenuList className="menu__list--header">
+                <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
+                  <Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
+                  {__('Settings')}
+                </MenuItem>
+                <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
+                  <Icon aria-hidden icon={ICONS.HELP} />
+                  {__('Help')}
+                </MenuItem>
+                <MenuItem className="menu__link" onSelect={handleThemeToggle}>
+                  <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
+                  {currentTheme === 'light' ? __('Dark') : __('Light')}
+                </MenuItem>
+              </MenuList>
+            </Menu>
+            {IS_WEB && !authenticated && (
               <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign In')} />
             )}
           </div>
@@ -193,7 +196,7 @@ const Header = (props: Props) => {
               {/* This pushes the close button to the right side */}
               <span />
               <Tooltip label={__('Go Back')}>
-                <Button icon={ICONS.REMOVE} {...closeButtonNavigationProps} />
+                <Button button="link" icon={ICONS.REMOVE} {...closeButtonNavigationProps} />
               </Tooltip>
             </div>
           )
diff --git a/ui/component/inviteList/view.jsx b/ui/component/inviteList/view.jsx
index 9bcba2dd4..50610c69a 100644
--- a/ui/component/inviteList/view.jsx
+++ b/ui/component/inviteList/view.jsx
@@ -37,8 +37,12 @@ class InviteList extends React.PureComponent<Props> {
     return (
       <section className="card">
         <div className="table__header">
-          <h2 className="card__title--between">
-            {__('Invite History')}
+          <div className="table__header-text--between">
+            <div>
+              <h2 className="card__title">{__('Invite History')}</h2>
+              <p className="section__subtitle">{rewardHelp}</p>
+            </div>
+
             {referralReward && showClaimable && (
               <RewardLink
                 button
@@ -46,8 +50,7 @@ class InviteList extends React.PureComponent<Props> {
                 reward_type={rewards.TYPE_REFERRAL}
               />
             )}
-          </h2>
-          <p className="section__subtitle">{rewardHelp}</p>
+          </div>
         </div>
 
         <table className="table section">
diff --git a/ui/component/inviteNew/view.jsx b/ui/component/inviteNew/view.jsx
index d35dc1616..c90f569f8 100644
--- a/ui/component/inviteNew/view.jsx
+++ b/ui/component/inviteNew/view.jsx
@@ -5,17 +5,18 @@ import { Form, FormField } from 'component/common/form';
 import CopyableText from 'component/copyableText';
 import Card from 'component/common/card';
 
-type FormProps = {
-  inviteNew: string => void,
-  errorMessage: ?string,
-  isPending: boolean,
-};
-
 type FormState = {
   email: string,
 };
 
-class FormInviteNew extends React.PureComponent<FormProps, FormState> {
+type Props = {
+  errorMessage: ?string,
+  inviteNew: string => void,
+  isPending: boolean,
+  referralLink: string,
+};
+
+class InviteNew extends React.PureComponent<Props, FormState> {
   constructor() {
     super();
 
@@ -26,7 +27,7 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
     (this: any).handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleEmailChanged(event) {
+  handleEmailChanged(event: any) {
     this.setState({
       email: event.target.value,
     });
@@ -38,40 +39,7 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
   }
 
   render() {
-    const { errorMessage, isPending } = this.props;
-
-    return (
-      <Form onSubmit={this.handleSubmit}>
-        <FormField
-          type="text"
-          label="Email"
-          placeholder="youremail@example.org"
-          name="email"
-          value={this.state.email}
-          error={errorMessage}
-          inputButton={
-            <Button button="inverse" type="submit" label="Invite" disabled={isPending || !this.state.email} />
-          }
-          onChange={event => {
-            this.handleEmailChanged(event);
-          }}
-        />
-      </Form>
-    );
-  }
-}
-
-type Props = {
-  errorMessage: ?string,
-  inviteNew: string => void,
-  isPending: boolean,
-  rewardAmount: number,
-  referralLink: string,
-};
-
-class InviteNew extends React.PureComponent<Props> {
-  render() {
-    const { errorMessage, inviteNew, isPending, rewardAmount, referralLink } = this.props;
+    const { errorMessage, isPending, referralLink } = this.props;
 
     return (
       <Card
@@ -79,20 +47,31 @@ class InviteNew extends React.PureComponent<Props> {
         subtitle={__('When your friends start using LBRY, the network gets stronger!')}
         actions={
           <React.Fragment>
-            <FormInviteNew
-              errorMessage={errorMessage}
-              inviteNew={inviteNew}
-              isPending={isPending}
-              rewardAmount={rewardAmount}
-            />
-            <CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
+            <Form onSubmit={this.handleSubmit}>
+              <FormField
+                type="text"
+                label="Email"
+                placeholder="youremail@example.org"
+                name="email"
+                value={this.state.email}
+                error={errorMessage}
+                inputButton={
+                  <Button button="secondary" type="submit" label="Invite" disabled={isPending || !this.state.email} />
+                }
+                onChange={event => {
+                  this.handleEmailChanged(event);
+                }}
+              />
 
-            <p className="help">
-              {__('Earn')} <Button button="link" navigate="/$/rewards" label={__('rewards')} />{' '}
-              {__('for inviting your friends.')} {__('Read our')}{' '}
-              <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />{' '}
-              {__('to learn more about referrals')}.
-            </p>
+              <CopyableText label={__('Or share this link with your friends')} copyable={referralLink} />
+
+              <p className="help">
+                {__('Earn')} <Button button="link" navigate="/$/rewards" label={__('rewards')} />{' '}
+                {__('for inviting your friends.')} {__('Read our')}{' '}
+                <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/referrals" />{' '}
+                {__('to learn more about referrals')}.
+              </p>
+            </Form>
           </React.Fragment>
         }
       />
diff --git a/ui/component/navigationHistory/view.jsx b/ui/component/navigationHistory/view.jsx
index 71a5ca174..24bfb8dac 100644
--- a/ui/component/navigationHistory/view.jsx
+++ b/ui/component/navigationHistory/view.jsx
@@ -106,7 +106,9 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
     ) : (
       <div className="main--empty">
         <section className="card card--section">
-          <h2 className="card__title">{__('Your history is empty, what are you doing here?')}</h2>
+          <h2 className="card__title card__title--deprecated">
+            {__('Your history is empty, what are you doing here?')}
+          </h2>
 
           <div className="card__actions card__actions--center">
             <Button button="primary" navigate="/" label={__('Explore new content')} />
diff --git a/ui/component/navigationHistoryItem/view.jsx b/ui/component/navigationHistoryItem/view.jsx
index b0c3bc2e7..bd519c1f1 100644
--- a/ui/component/navigationHistoryItem/view.jsx
+++ b/ui/component/navigationHistoryItem/view.jsx
@@ -34,10 +34,8 @@ class NavigationHistoryItem extends React.PureComponent<Props> {
   render() {
     const { lastViewed, selected, onSelect, claim, uri, slim, history } = this.props;
 
-    let name;
     let title;
     if (claim && claim.value) {
-      ({ name } = claim);
       ({ title } = claim.value);
     }
 
@@ -58,7 +56,7 @@ class NavigationHistoryItem extends React.PureComponent<Props> {
       >
         {!slim && <FormField checked={selected} type="checkbox" onChange={onSelect} />}
         <span className="time time--ago">{moment(lastViewed).from(moment())}</span>
-        <Button className="item-list__element" constrict button="link" label={uri} navigate={uri} />
+        <Button className="item-list__element" button="link" label={uri} navigate={uri} />
         <span className="item-list__element">{title}</span>
       </div>
     );
diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index b41dcd21a..2e910e915 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -74,6 +74,7 @@ function PublishFile(props: Props) {
   }
   return (
     <Card
+      actionIconPadding={false}
       icon={ICONS.PUBLISH}
       disabled={disabled || balance === 0}
       title={title}
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index 0bd77dc55..dcba1dfe6 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -138,12 +138,12 @@ function PublishForm(props: Props) {
         <Card actions={<SelectThumbnail />} />
 
         <TagsSelect
-          title={__('Add Tags')}
           suggestMature
           disableAutoFocus
-          help={__('The better your tags are, the easier it will be for people to discover your content.')}
+          hideHeader
+          label={__('Selected Tags')}
           empty={__('No tags added')}
-          placeholder={__('Add a tag')}
+          placeholder={__('Add a tag...')}
           onSelect={newTags => {
             const validatedTags = [];
             newTags.forEach(newTag => {
diff --git a/ui/component/rewardAuthIntro/view.jsx b/ui/component/rewardAuthIntro/view.jsx
index 14160a97e..b2d326b1a 100644
--- a/ui/component/rewardAuthIntro/view.jsx
+++ b/ui/component/rewardAuthIntro/view.jsx
@@ -28,13 +28,7 @@ function RewardAuthIntro(props: Props) {
           and security updates.
         </I18nMessage>
       }
-      actions={
-        <Button
-          button="primary"
-          navigate={`/$/${PAGES.AUTH}?redirect=/$/${PAGES.REWARDS}`}
-          label={__('Unlock Rewards')}
-        />
-      }
+      actions={<Button button="primary" requiresAuth label={__('Unlock Rewards')} />}
     />
   );
 }
diff --git a/ui/component/rewardListClaimed/view.jsx b/ui/component/rewardListClaimed/view.jsx
index 8f4874d08..c74f1de19 100644
--- a/ui/component/rewardListClaimed/view.jsx
+++ b/ui/component/rewardListClaimed/view.jsx
@@ -25,14 +25,16 @@ const RewardListClaimed = (props: Props) => {
   return (
     <section className="card">
       <header className="table__header">
-        <h2 className="card__title">{__('Claimed Rewards')}</h2>
+        <div className="table__header-text">
+          <h2 className="card__title card__title--deprecated">{__('Claimed Rewards')}</h2>
 
-        <p className="card__subtitle">
-          {__(
-            'Reward history is tied to your email. In case of lost or multiple wallets, your balance may differ from the amounts claimed'
-          )}
-          .
-        </p>
+          <p className="section__subtitle">
+            {__(
+              'Reward history is tied to your email. In case of lost or multiple wallets, your balance may differ from the amounts claimed'
+            )}
+            .
+          </p>
+        </div>
       </header>
 
       <table className="table table--rewards">
diff --git a/ui/component/rewardSummary/view.jsx b/ui/component/rewardSummary/view.jsx
index 38ffa1c57..8d680fcad 100644
--- a/ui/component/rewardSummary/view.jsx
+++ b/ui/component/rewardSummary/view.jsx
@@ -25,6 +25,7 @@ class RewardSummary extends React.Component<Props> {
                 tokens={{
                   credit_amount: <CreditAmount inheritStyle amount={unclaimedRewardAmount} precision={8} />,
                 }}
+                f
               >
                 You have %credit_amount% in unclaimed rewards.
               </I18nMessage>
@@ -34,14 +35,14 @@ class RewardSummary extends React.Component<Props> {
           </React.Fragment>
         }
         actions={
-          <div className="section__actions">
+          <React.Fragment>
             <Button
               button="primary"
               navigate="/$/rewards"
               label={hasRewards ? __('Claim Rewards') : __('View Rewards')}
             />
-            <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />.
-          </div>
+            <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />
+          </React.Fragment>
         }
       />
     );
diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx
index ad9129b22..1a252d474 100644
--- a/ui/component/router/view.jsx
+++ b/ui/component/router/view.jsx
@@ -1,6 +1,6 @@
 // @flow
 import * as PAGES from 'constants/pages';
-import React, { useEffect, lazy, Suspense } from 'react';
+import React, { useEffect, Suspense } from 'react';
 import { Route, Redirect, Switch, withRouter } from 'react-router-dom';
 import SettingsPage from 'page/settings';
 import HelpPage from 'page/help';
@@ -17,8 +17,6 @@ import InvitePage from 'page/invite';
 import SearchPage from 'page/search';
 import LibraryPage from 'page/library';
 import WalletPage from 'page/wallet';
-import WalletSendPage from 'page/walletSend';
-import WalletReceivePage from 'page/walletReceive';
 import TagsPage from 'page/tags';
 import FollowingPage from 'page/following';
 import ListBlockedPage from 'page/listBlocked';
@@ -80,6 +78,7 @@ function AppRouter(props: Props) {
         <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
         <Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />
         <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
+        <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
 
         <PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
         <PrivateRoute {...props} path={`/$/${PAGES.DOWNLOADED}`} component={FileListDownloaded} />
@@ -87,15 +86,12 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.PUBLISH}`} component={PublishPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} component={RewardsPage} />
-        <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS}`} component={SettingsPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.TRANSACTIONS}`} component={TransactionHistoryPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.ACCOUNT}`} component={AccountPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.FOLLOWING}`} component={FollowingPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
-        <PrivateRoute {...props} path={`/$/${PAGES.WALLET_SEND}`} exact component={WalletSendPage} />
-        <PrivateRoute {...props} path={`/$/${PAGES.WALLET_RECEIVE}`} exact component={WalletReceivePage} />
         <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
 
         {/* Below need to go at the end to make sure we don't match any of our pages first */}
diff --git a/ui/component/searchOptions/view.jsx b/ui/component/searchOptions/view.jsx
index 79a03300a..03500fa43 100644
--- a/ui/component/searchOptions/view.jsx
+++ b/ui/component/searchOptions/view.jsx
@@ -27,7 +27,7 @@ const SearchOptions = (props: Props) => {
       {expanded && (
         <Form className="search__options">
           <fieldset>
-            <legend className="search__legend--1">{__('Search For')}</legend>
+            <legend className="search__legend">{__('Search For')}</legend>
             {[
               {
                 option: SEARCH_OPTIONS.INCLUDE_FILES,
@@ -55,7 +55,7 @@ const SearchOptions = (props: Props) => {
           </fieldset>
 
           <fieldset>
-            <legend className="search__legend--2">{__('File Types')}</legend>
+            <legend className="search__legend">{__('File Types')}</legend>
             {[
               {
                 option: SEARCH_OPTIONS.MEDIA_VIDEO,
@@ -92,7 +92,7 @@ const SearchOptions = (props: Props) => {
           </fieldset>
 
           <fieldset>
-            <legend className="search__legend--3">{__('Other Options')}</legend>
+            <legend className="search__legend">{__('Other Options')}</legend>
             <FormField
               type="select"
               name="result-count"
diff --git a/ui/component/sideBar/view.jsx b/ui/component/sideBar/view.jsx
index 8817e470d..7fd0077ee 100644
--- a/ui/component/sideBar/view.jsx
+++ b/ui/component/sideBar/view.jsx
@@ -31,7 +31,6 @@ function SideBar(props: Props) {
       <div className="card navigation--placeholder">
         <div className="wrap">
           <h2>LBRY</h2>
-
           <p>{__('The best decentralized content platform on the web.')}</p>
         </div>
       </div>
diff --git a/ui/component/socialShare/view.jsx b/ui/component/socialShare/view.jsx
index c6350acc6..4ffac5524 100644
--- a/ui/component/socialShare/view.jsx
+++ b/ui/component/socialShare/view.jsx
@@ -7,7 +7,6 @@ import EmbedArea from 'component/embedArea';
 
 type Props = {
   claim: Claim,
-  onDone: () => void,
   webShareable: boolean,
   isChannel: boolean,
 };
@@ -28,7 +27,7 @@ class SocialShare extends React.PureComponent<Props> {
   render() {
     const { claim, isChannel } = this.props;
     const { canonical_url: canonicalUrl, permanent_url: permanentUrl } = claim;
-    const { webShareable, onDone } = this.props;
+    const { webShareable } = this.props;
     const OPEN_URL = 'https://open.lbry.com/';
     const lbryUrl = canonicalUrl ? canonicalUrl.split('lbry://')[1] : permanentUrl.split('lbry://')[1];
     const lbryWebUrl = lbryUrl.replace(/#/g, ':');
@@ -41,13 +40,13 @@ class SocialShare extends React.PureComponent<Props> {
     return (
       <React.Fragment>
         <CopyableText label={__('LBRY App Link')} copyable={lbryURL} noSnackbar />
-        <div className="card__actions card__actions--center">
+        <div className="">
           <Button
             icon={ICONS.FACEBOOK}
             button="link"
             description={shareOnFb}
             href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
-          />
+          />{' '}
           <Button
             icon={ICONS.TWITTER}
             button="link"
@@ -56,9 +55,6 @@ class SocialShare extends React.PureComponent<Props> {
           />
         </div>
         {webShareable && !isChannel && <EmbedArea label={__('Embedded')} claim={claim} noSnackbar />}
-        <div className="card__actions">
-          <Button button="link" label={__('Done')} onClick={onDone} />
-        </div>
       </React.Fragment>
     );
   }
diff --git a/ui/component/splash/view.jsx b/ui/component/splash/view.jsx
index 0fa4b971a..0cf693c97 100644
--- a/ui/component/splash/view.jsx
+++ b/ui/component/splash/view.jsx
@@ -8,6 +8,8 @@ import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
 import ModalUpgrade from 'modal/modalUpgrade';
 import ModalDownloading from 'modal/modalDownloading';
+import Card from 'component/common/card';
+import I18nMessage from 'component/i18nMessage';
 import 'css-doodle';
 
 const FORTY_FIVE_SECONDS = 45 * 1000;
@@ -227,7 +229,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
         {!animationHidden && (
           <css-doodle class="doodle">
             {`
-            --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
+            --color: @p(var(--color-primary), var(--color-secondary), var(--color-focus), var(--color-nothing));
             :doodle {
               @grid: 30x1 / 18vmin;
               --deg: @p(-180deg, 180deg);
@@ -267,21 +269,28 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
           onClick={() => setClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION, !animationHidden)}
         />
         {error && (
-          <div className="splash__error card card--section">
-            <p className="card__subtitle">
-              {__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}
-            </p>
-            <div className="card__actions--center">
-              <Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
-            </div>
-            <div className="help">
-              <p>{__('If you still have issues, your anti-virus software or firewall may be preventing startup.')}</p>
-              <p>
-                {__('Reach out to hello@lbry.com for help, or check out')}{' '}
-                <Button button="link" href="https://lbry.com/faq/startup-troubleshooting" label="this link" />.
-              </p>
-            </div>
-          </div>
+          <Card
+            className="splash__error"
+            title={__('Error Starting Up')}
+            subtitle={
+              <React.Fragment>
+                <p>
+                  Try refreshing to fix it. If you still have issues, your anti-virus software or firewall may be
+                  preventing startup.
+                </p>
+                <I18nMessage
+                  tokens={{
+                    help_link: (
+                      <Button button="link" href="https://lbry.com/faq/startup-troubleshooting" label="this link" />
+                    ),
+                  }}
+                >
+                  Reach out to hello@lbry.com for help, or check out %help_link%.
+                </I18nMessage>
+              </React.Fragment>
+            }
+            actions={<Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />}
+          />
         )}
         {/* Temp hack: don't show any modals on splash screen daemon is running;
             daemon doesn't let you quit during startup, so the "Quit" buttons
diff --git a/ui/component/tag/view.jsx b/ui/component/tag/view.jsx
index b7030988d..166f4fd38 100644
--- a/ui/component/tag/view.jsx
+++ b/ui/component/tag/view.jsx
@@ -30,6 +30,7 @@ export default function Tag(props: Props) {
       disabled={disabled}
       title={title}
       className={classnames('tag', {
+        'tag--large': type === 'large',
         'tag--remove': type === 'remove',
         // tag--add only adjusts the color, which causes issues with mature tag color clashing
         'tag--add': !isMature && type === 'add',
@@ -37,7 +38,7 @@ export default function Tag(props: Props) {
       })}
       label={name}
       iconSize={12}
-      iconRight={type !== 'link' && (type === 'remove' ? ICONS.REMOVE : ICONS.ADD)}
+      iconRight={type !== 'link' && type !== 'large' && (type === 'remove' ? ICONS.REMOVE : ICONS.ADD)}
     />
   );
 }
diff --git a/ui/component/tagsSearch/view.jsx b/ui/component/tagsSearch/view.jsx
index a48ac0db8..13745c5c0 100644
--- a/ui/component/tagsSearch/view.jsx
+++ b/ui/component/tagsSearch/view.jsx
@@ -15,6 +15,7 @@ type Props = {
   disableAutoFocus?: boolean,
   onRemove: Tag => void,
   placeholder?: string,
+  label?: string,
 };
 
 /*
@@ -36,6 +37,7 @@ export default function TagsSearch(props: Props) {
     suggestMature,
     disableAutoFocus,
     placeholder,
+    label,
   } = props;
   const [newTag, setNewTag] = useState('');
   const doesTagMatch = name => {
@@ -107,6 +109,7 @@ export default function TagsSearch(props: Props) {
   return (
     <React.Fragment>
       <Form className="tags__input-wrapper" onSubmit={handleSubmit}>
+        <label>{label || __('Following')}</label>
         <ul className="tags--remove">
           {tagsPassedIn.map(tag => (
             <Tag
@@ -130,6 +133,7 @@ export default function TagsSearch(props: Props) {
           </li>
         </ul>
       </Form>
+      <label>{__('Suggested')}</label>
       <ul className="tags">
         {suggestedTags.map(tag => (
           <Tag key={`suggested${tag}`} name={tag} type="add" onClick={() => handleTagClick(tag)} />
diff --git a/ui/component/tagsSelect/view.jsx b/ui/component/tagsSelect/view.jsx
index 64dbcc4b5..d3f0911a8 100644
--- a/ui/component/tagsSelect/view.jsx
+++ b/ui/component/tagsSelect/view.jsx
@@ -17,11 +17,13 @@ type Props = {
   // The default component is for following tags
   title?: string | boolean,
   help?: string,
+  label?: string,
   tagsChosen?: Array<Tag>,
   onSelect?: (Array<Tag>) => void,
   onRemove?: Tag => void,
   placeholder?: string,
   disableAutoFocus?: boolean,
+  hideHeader?: boolean,
 };
 
 /*
@@ -40,6 +42,8 @@ export default function TagsSelect(props: Props) {
     suggestMature,
     disableAutoFocus,
     placeholder,
+    hideHeader,
+    label,
   } = props;
   const [hasClosed, setHasClosed] = usePersistedState('tag-select:has-closed', false);
   const tagsToDisplay = tagsChosen || followedTags;
@@ -71,14 +75,17 @@ export default function TagsSelect(props: Props) {
   return (
     ((showClose && !hasClosed) || !showClose) && (
       <Card
+        actionIconPadding={false}
         icon={ICONS.TAG}
         title={
-          <React.Fragment>
-            {title}
-            {showClose && tagsToDisplay.length > 0 && !hasClosed && (
-              <Button button="close" icon={ICONS.REMOVE} onClick={handleClose} />
-            )}
-          </React.Fragment>
+          hideHeader ? null : (
+            <React.Fragment>
+              {title}
+              {showClose && tagsToDisplay.length > 0 && !hasClosed && (
+                <Button button="close" icon={ICONS.REMOVE} onClick={handleClose} />
+              )}
+            </React.Fragment>
+          )
         }
         subtitle={
           help !== false && (
@@ -91,6 +98,7 @@ export default function TagsSelect(props: Props) {
         actions={
           <React.Fragment>
             <TagsSearch
+              label={label}
               onRemove={handleTagClick}
               onSelect={onSelect}
               suggestMature={suggestMature && !hasMatureTag}
diff --git a/ui/component/transactionList/view.jsx b/ui/component/transactionList/view.jsx
index 9a33109b4..96771f175 100644
--- a/ui/component/transactionList/view.jsx
+++ b/ui/component/transactionList/view.jsx
@@ -42,8 +42,8 @@ function TransactionList(props: Props) {
   return (
     <React.Fragment>
       <header className="table__header">
-        <h2 className="card__title--between">
-          {title}
+        <div className="table__header-text--between">
+          <h2 className="card__title">{title}</h2>
           <div className="card__actions--inline">
             <RefreshTransactionButton slim={slim} />
             {/* @if TARGET='app' */}
@@ -82,7 +82,7 @@ function TransactionList(props: Props) {
             )}
             {slim && <Button button="primary" navigate={`/$/${PAGES.TRANSACTIONS}`} label={__('Full History')} />}
           </div>
-        </h2>
+        </div>
       </header>
 
       {((loading && !transactions.length) || !transactions.length) && (
diff --git a/ui/component/transactionListTable/internal/transaction-list-item.jsx b/ui/component/transactionListTable/internal/transaction-list-item.jsx
index 3a09b80f1..51cb60869 100644
--- a/ui/component/transactionListTable/internal/transaction-list-item.jsx
+++ b/ui/component/transactionListTable/internal/transaction-list-item.jsx
@@ -26,9 +26,9 @@ class TransactionListItem extends React.PureComponent<Props> {
 
   getLink(type: string) {
     if (type === TXN_TYPES.TIP) {
-      return <Button icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
+      return <Button button="secondary" icon={ICONS.UNLOCK} onClick={this.abandonClaim} title={__('Unlock Tip')} />;
     }
-    return <Button icon={ICONS.DELETE} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
+    return <Button button="secondary" icon={ICONS.DELETE} onClick={this.abandonClaim} title={__('Abandon Claim')} />;
   }
 
   abandonClaim() {
@@ -65,13 +65,15 @@ class TransactionListItem extends React.PureComponent<Props> {
     return (
       <tr>
         <td>
-          <CreditAmount badge={false} showPlus amount={amount} precision={8} />
-          <br />
-
-          {fee !== 0 && (
-            <span className="table__item-label">
-              <CreditAmount badge={false} fee amount={fee} precision={8} />
-            </span>
+          {date ? (
+            <div>
+              <DateTime date={date} show={DateTime.SHOW_DATE} formatOptions={dateFormat} />
+              <div className="table__item-label">
+                <DateTime date={date} show={DateTime.SHOW_TIME} />
+              </div>
+            </div>
+          ) : (
+            <span className="empty">{__('Pending')}</span>
           )}
         </td>
         <td className="table__item--actionable">
@@ -85,16 +87,14 @@ class TransactionListItem extends React.PureComponent<Props> {
         <td>
           <ButtonTransaction id={txid} />
         </td>
-        <td>
-          {date ? (
-            <div>
-              <DateTime date={date} show={DateTime.SHOW_DATE} formatOptions={dateFormat} />
-              <div className="table__item-label">
-                <DateTime date={date} show={DateTime.SHOW_TIME} />
-              </div>
-            </div>
-          ) : (
-            <span className="empty">{__('Pending')}</span>
+        <td className="table__item--align-right">
+          <CreditAmount badge={false} showPlus amount={amount} precision={8} />
+          <br />
+
+          {fee !== 0 && (
+            <span className="table__item-label">
+              <CreditAmount badge={false} fee amount={fee} precision={8} />
+            </span>
           )}
         </td>
       </tr>
diff --git a/ui/component/transactionListTable/view.jsx b/ui/component/transactionListTable/view.jsx
index 143cfcafb..fbbc15ccd 100644
--- a/ui/component/transactionListTable/view.jsx
+++ b/ui/component/transactionListTable/view.jsx
@@ -36,11 +36,11 @@ function TransactionListTable(props: Props) {
           <table className="table table--transactions">
             <thead>
               <tr>
-                <th>{__('Amount')}</th>
+                <th>{__('Date')}</th>
                 <th>{__('Type')} </th>
                 <th>{__('Details')} </th>
                 <th>{__('Transaction')}</th>
-                <th>{__('Date')}</th>
+                <th className="table__item--align-right">{__('Amount')}</th>
               </tr>
             </thead>
             <tbody>
diff --git a/ui/component/transactionRefreshButton/view.jsx b/ui/component/transactionRefreshButton/view.jsx
index 14bc1e578..2a020fc17 100644
--- a/ui/component/transactionRefreshButton/view.jsx
+++ b/ui/component/transactionRefreshButton/view.jsx
@@ -45,7 +45,7 @@ class TransactionRefreshButton extends PureComponent<Props, State> {
     const { fetchingTransactions } = this.props;
     const { label, disabled } = this.state;
     return (
-      <Button button="link" label={label} onClick={this.handleClick} disabled={disabled || fetchingTransactions} />
+      <Button button="secondary" label={label} onClick={this.handleClick} disabled={disabled || fetchingTransactions} />
     );
   }
 }
diff --git a/ui/component/userEmail/view.jsx b/ui/component/userEmail/view.jsx
index 2bd06c5f0..81b55cd62 100644
--- a/ui/component/userEmail/view.jsx
+++ b/ui/component/userEmail/view.jsx
@@ -59,7 +59,7 @@ function UserEmail(props: Props) {
                 />
               </React.Fragment>
             }
-            inputButton={<UserSignOutButton button="inverse" />}
+            inputButton={<UserSignOutButton button="secondary" />}
             value={email || ''}
           />
         ) : (
diff --git a/ui/component/userEmailNew/view.jsx b/ui/component/userEmailNew/view.jsx
index 033e08d54..adfdac379 100644
--- a/ui/component/userEmailNew/view.jsx
+++ b/ui/component/userEmailNew/view.jsx
@@ -72,7 +72,12 @@ function UserEmailNew(props: Props) {
             <I18nMessage
               tokens={{
                 terms: (
-                  <Button button="link" href="https://www.lbry.com/termsofservice" label={__('Terms of Service')} />
+                  <Button
+                    tabIndex="2"
+                    button="link"
+                    href="https://www.lbry.com/termsofservice"
+                    label={__('Terms of Service')}
+                  />
                 ),
               }}
             >
diff --git a/ui/component/userPhoneNew/view.jsx b/ui/component/userPhoneNew/view.jsx
index 05cdb3c90..8f6e77b87 100644
--- a/ui/component/userPhoneNew/view.jsx
+++ b/ui/component/userPhoneNew/view.jsx
@@ -83,7 +83,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <p className="card__subtitle">
+        <p className="section__subtitle">
           {__(
             'Enter your phone number and we will send you a verification code. We will not share your phone number with third parties.'
           )}
diff --git a/ui/component/walletAddress/view.jsx b/ui/component/walletAddress/view.jsx
index 9fcbe9df3..5e16fc03e 100644
--- a/ui/component/walletAddress/view.jsx
+++ b/ui/component/walletAddress/view.jsx
@@ -1,6 +1,5 @@
 // @flow
 import React from 'react';
-import * as ICONS from 'constants/icons';
 import Button from 'component/button';
 import CopyableText from 'component/copyableText';
 import QRCode from 'component/common/qr-code';
@@ -11,7 +10,6 @@ type Props = {
   receiveAddress: string,
   getNewAddress: () => void,
   gettingNewAddress: boolean,
-  history: { goBack: () => void },
 };
 
 type State = {
@@ -45,26 +43,26 @@ class WalletAddress extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { receiveAddress, getNewAddress, gettingNewAddress, history } = this.props;
+    const { receiveAddress, getNewAddress, gettingNewAddress } = this.props;
     const { showQR } = this.state;
 
     return (
       <Card
-        title={
-          <React.Fragment>
-            {__('Receive Credits')}
-            <Button button="close" icon={ICONS.REMOVE} onClick={() => history.goBack()} />
-          </React.Fragment>
-        }
+        title={__('Receive Credits')}
         subtitle={__('Use this address to receive LBC.')}
         actions={
           <React.Fragment>
-            <CopyableText label={__('Your Address')} copyable={receiveAddress} snackMessage={__('Address copied.')} />
+            <CopyableText
+              primaryButton
+              label={__('Your Address')}
+              copyable={receiveAddress}
+              snackMessage={__('Address copied.')}
+            />
 
             <div className="card__actions">
               {!IS_WEB && (
                 <Button
-                  button="inverse"
+                  button="secondary"
                   label={__('Get New Address')}
                   onClick={getNewAddress}
                   disabled={gettingNewAddress}
diff --git a/ui/component/walletBalance/index.js b/ui/component/walletBalance/index.js
index 268efd644..b427ff8f8 100644
--- a/ui/component/walletBalance/index.js
+++ b/ui/component/walletBalance/index.js
@@ -6,6 +6,7 @@ import {
   selectSupportsBalance,
   selectTipsBalance,
 } from 'lbry-redux';
+import { doOpenModal } from 'redux/actions/app';
 import { selectClaimedRewards } from 'lbryinc';
 import WalletBalance from './view';
 
@@ -18,4 +19,9 @@ const select = state => ({
   rewards: selectClaimedRewards(state),
 });
 
-export default connect(select)(WalletBalance);
+export default connect(
+  select,
+  {
+    doOpenModal,
+  }
+)(WalletBalance);
diff --git a/ui/component/walletBalance/view.jsx b/ui/component/walletBalance/view.jsx
index c6fea1344..fac3f4f87 100644
--- a/ui/component/walletBalance/view.jsx
+++ b/ui/component/walletBalance/view.jsx
@@ -1,6 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import * as PAGES from 'constants/pages';
+import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import CreditAmount from 'component/common/credit-amount';
 import Button from 'component/button';
@@ -12,10 +12,11 @@ type Props = {
   claimsBalance: number,
   supportsBalance: number,
   tipsBalance: number,
+  doOpenModal: string => void,
 };
 
 const WalletBalance = (props: Props) => {
-  const { balance, claimsBalance, supportsBalance, tipsBalance } = props;
+  const { balance, claimsBalance, supportsBalance, tipsBalance, doOpenModal } = props;
 
   return (
     <React.Fragment>
@@ -27,8 +28,13 @@ const WalletBalance = (props: Props) => {
           </span>
 
           <div className="section__actions">
-            <Button button="inverse" icon={ICONS.SEND} label={__('Send Credits')} navigate={`$/${PAGES.WALLET_SEND}`} />
-            <Button button="inverse" label={__('Your Address')} navigate={`$/${PAGES.WALLET_RECEIVE}`} />
+            <Button button="primary" label={__('Your Address')} onClick={() => doOpenModal(MODALS.WALLET_RECEIVE)} />
+            <Button
+              button="secondary"
+              icon={ICONS.SEND}
+              label={__('Send Credits')}
+              onClick={() => doOpenModal(MODALS.WALLET_SEND)}
+            />
           </div>
         </div>
 
diff --git a/ui/component/walletSend/view.jsx b/ui/component/walletSend/view.jsx
index 0d7644045..caa8e27a5 100644
--- a/ui/component/walletSend/view.jsx
+++ b/ui/component/walletSend/view.jsx
@@ -1,6 +1,5 @@
 // @flow
 import * as MODALS from 'constants/modal_types';
-import * as ICONS from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
 import { Form, FormField } from 'component/common/form';
@@ -16,7 +15,6 @@ type DraftTransaction = {
 type Props = {
   openModal: (id: string, { address: string, amount: number }) => void,
   balance: number,
-  history: { goBack: () => void },
 };
 
 class WalletSend extends React.PureComponent<Props> {
@@ -36,16 +34,11 @@ class WalletSend extends React.PureComponent<Props> {
   }
 
   render() {
-    const { balance, history } = this.props;
+    const { balance } = this.props;
 
     return (
       <Card
-        title={
-          <React.Fragment>
-            {__('Send Credits')}
-            <Button button="close" icon={ICONS.REMOVE} onClick={() => history.goBack()} />
-          </React.Fragment>
-        }
+        title={__('Send Credits')}
         subtitle={__('Send LBC to your friends or favorite creators.')}
         actions={
           <Formik
diff --git a/ui/component/wunderbar/internal/autocomplete.jsx b/ui/component/wunderbar/internal/autocomplete.jsx
index 5e3ae242d..af0568c14 100644
--- a/ui/component/wunderbar/internal/autocomplete.jsx
+++ b/ui/component/wunderbar/internal/autocomplete.jsx
@@ -370,11 +370,10 @@ export default class Autocomplete extends React.Component {
     const matchedItem = this.getFilteredItems(props)[index];
     if (value !== '' && matchedItem) {
       const itemValue = getItemValue(matchedItem);
-      const itemValueDoesMatch =
-        itemValue.toLowerCase().includes(
-          value.toLowerCase()
-          // below line is the the only thing that is changed from the real component
-        );
+      const itemValueDoesMatch = itemValue.toLowerCase().includes(
+        value.toLowerCase()
+        // below line is the the only thing that is changed from the real component
+      );
       if (itemValueDoesMatch) {
         return { highlightedIndex: index };
       }
diff --git a/ui/component/yrbl/index.jsx b/ui/component/yrbl/index.jsx
index ac39fc3f2..219f2ad15 100644
--- a/ui/component/yrbl/index.jsx
+++ b/ui/component/yrbl/index.jsx
@@ -31,7 +31,7 @@ export default class extends React.PureComponent<Props> {
         <img alt="Friendly gerbil" className={classnames('yrbl', className)} src={`${image}`} />
         {title && subtitle && (
           <div className="yrbl__content">
-            <h2 className="card__title">{title}</h2>
+            <h2 className="card__title card__title--deprecated">{title}</h2>
             <p>{subtitle}</p>
           </div>
         )}
diff --git a/ui/constants/modal_types.js b/ui/constants/modal_types.js
index a8988a1a0..9c63b9957 100644
--- a/ui/constants/modal_types.js
+++ b/ui/constants/modal_types.js
@@ -29,3 +29,5 @@ export const WALLET_DECRYPT = 'wallet_decrypt';
 export const WALLET_UNLOCK = 'wallet_unlock';
 export const WALLET_SYNC = 'wallet_sync';
 export const WALLET_PASSWORD_UNSAVE = 'wallet_password_unsave';
+export const WALLET_SEND = 'wallet_send';
+export const WALLET_RECEIVE = 'wallet_receive';
diff --git a/ui/constants/pages.js b/ui/constants/pages.js
index 9a21f7f48..f5d89f7ec 100644
--- a/ui/constants/pages.js
+++ b/ui/constants/pages.js
@@ -21,7 +21,5 @@ export const SEARCH = 'search';
 export const TRANSACTIONS = 'transactions';
 export const TAGS = 'tags';
 export const WALLET = 'wallet';
-export const WALLET_SEND = 'wallet/send';
-export const WALLET_RECEIVE = 'wallet/receive';
 export const BLOCKED = 'blocked';
 export const CHANNELS = 'channels';
diff --git a/ui/modal/modal.jsx b/ui/modal/modal.jsx
index d0ca6edae..c1d8a3c0f 100644
--- a/ui/modal/modal.jsx
+++ b/ui/modal/modal.jsx
@@ -1,5 +1,6 @@
 // @flow
 // These should probably just be combined into one modal component
+import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import ReactModal from 'react-modal';
 import Button from 'component/button';
@@ -50,12 +51,15 @@ export class Modal extends React.PureComponent<ModalProps> {
       <ReactModal
         {...modalProps}
         onRequestClose={onAborted || onConfirmed}
-        className={classnames('card modal', className)}
+        className={classnames('modal', className, {
+          'modal--card-internal': type === 'card',
+        })}
         overlayClassName="modal-overlay"
       >
-        {title && <h1 className="card__title">{title}</h1>}
+        {title && <h1 className="card__title card__title--deprecated">{title}</h1>}
+        {type === 'card' && <Button button="close" icon={ICONS.REMOVE} onClick={onAborted} />}
         {children}
-        {type === 'custom' ? null : ( // custom modals define their own buttons
+        {type === 'custom' || type === 'card' ? null : ( // custom modals define their own buttons
           <div className="card__actions">
             <Button
               button="primary"
diff --git a/ui/modal/modalAffirmPurchase/view.jsx b/ui/modal/modalAffirmPurchase/view.jsx
index 07ee6f70b..cedf86d44 100644
--- a/ui/modal/modalAffirmPurchase/view.jsx
+++ b/ui/modal/modalAffirmPurchase/view.jsx
@@ -39,7 +39,7 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
         onConfirmed={this.onAffirmPurchase}
         onAborted={cancelPurchase}
       >
-        <p className="card__subtitle">
+        <p className="section__subtitle">
           {__('This will purchase')} <strong>{title ? `"${title}"` : uri}</strong> {__('for')}{' '}
           <strong>
             <FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />
diff --git a/ui/modal/modalAutoGenerateThumbnail/view.jsx b/ui/modal/modalAutoGenerateThumbnail/view.jsx
index eb5c8a356..4da0dcd1f 100644
--- a/ui/modal/modalAutoGenerateThumbnail/view.jsx
+++ b/ui/modal/modalAutoGenerateThumbnail/view.jsx
@@ -22,8 +22,11 @@ function ModalAutoGenerateThumbnail(props: Props) {
 
   function uploadImage() {
     const imageBuffer = captureSnapshot();
+    // $FlowFixMe
     const file = new File([imageBuffer], 'thumbnail.png', { type: 'image/png' });
+
     if (imageBuffer) {
+      // $FlowFixMe
       upload(file);
       closeModal();
     } else {
@@ -75,7 +78,7 @@ function ModalAutoGenerateThumbnail(props: Props) {
       onConfirmed={uploadImage}
       onAborted={closeModal}
     >
-      <p className="card__subtitle">{__('Pause at any time to select a thumbnail from your video')}.</p>
+      <p className="section__subtitle">{__('Pause at any time to select a thumbnail from your video')}.</p>
       <video ref={playerRef} src={videoSrc} onLoadedMetadata={resize} onError={onError} controls />
     </Modal>
   );
diff --git a/ui/modal/modalRouter/view.jsx b/ui/modal/modalRouter/view.jsx
index 92062219c..0016b72b4 100644
--- a/ui/modal/modalRouter/view.jsx
+++ b/ui/modal/modalRouter/view.jsx
@@ -27,6 +27,8 @@ import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalRewardCode from 'modal/modalRewardCode';
 import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
 import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
+import ModalWalletSend from 'modal/modalWalletSend';
+import ModalWalletReceive from 'modal/modalWalletReceive';
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -99,6 +101,10 @@ function ModalRouter(props: Props) {
       return <ModalRewardCode {...modalProps} />;
     case MODALS.COMMENT_ACKNOWEDGEMENT:
       return <ModalCommentAcknowledgement {...modalProps} />;
+    case MODALS.WALLET_SEND:
+      return <ModalWalletSend {...modalProps} />;
+    case MODALS.WALLET_RECEIVE:
+      return <ModalWalletReceive {...modalProps} />;
     default:
       return null;
   }
diff --git a/ui/modal/modalSocialShare/view.jsx b/ui/modal/modalSocialShare/view.jsx
index a4de27ef5..254ffcb30 100644
--- a/ui/modal/modalSocialShare/view.jsx
+++ b/ui/modal/modalSocialShare/view.jsx
@@ -14,8 +14,8 @@ class ModalSocialShare extends React.PureComponent<Props> {
   render() {
     const { closeModal, uri, webShareable, isChannel } = this.props;
     return (
-      <Modal isOpen onAborted={closeModal} type="custom" title={__('Share')}>
-        <SocialShare uri={uri} onDone={closeModal} webShareable={webShareable} isChannel={isChannel} />
+      <Modal isOpen onAborted={closeModal} onConfirmed={closeModal} title={__('Share')}>
+        <SocialShare uri={uri} webShareable={webShareable} isChannel={isChannel} />
       </Modal>
     );
   }
diff --git a/ui/modal/modalWalletEncrypt/view.jsx b/ui/modal/modalWalletEncrypt/view.jsx
index 6aa72e0fa..53e0fbf1b 100644
--- a/ui/modal/modalWalletEncrypt/view.jsx
+++ b/ui/modal/modalWalletEncrypt/view.jsx
@@ -150,7 +150,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
             />
           </fieldset-section>
 
-          <div className="card__subtitle--status">
+          <div className="section__subtitle--status">
             {__(
               'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
             )}
diff --git a/ui/page/walletReceive/index.js b/ui/modal/modalWalletReceive/index.js
similarity index 66%
rename from ui/page/walletReceive/index.js
rename to ui/modal/modalWalletReceive/index.js
index b4e146c02..9b06eba91 100644
--- a/ui/page/walletReceive/index.js
+++ b/ui/modal/modalWalletReceive/index.js
@@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
 import WalletReceive from './view';
 
 const select = state => ({});
 
-const perform = dispatch => ({});
+const perform = {
+  doHideModal,
+};
 
 export default connect(
   select,
diff --git a/ui/modal/modalWalletReceive/view.jsx b/ui/modal/modalWalletReceive/view.jsx
new file mode 100644
index 000000000..5021bfde6
--- /dev/null
+++ b/ui/modal/modalWalletReceive/view.jsx
@@ -0,0 +1,16 @@
+// @flow
+import React from 'react';
+import WalletAddress from 'component/walletAddress';
+import { Modal } from 'modal/modal';
+
+type Props = { doHideModal: () => void };
+
+const WalletAddressPage = (props: Props) => {
+  const { doHideModal } = props;
+  return (
+    <Modal isOpen type="card" onAborted={doHideModal}>
+      <WalletAddress />
+    </Modal>
+  );
+};
+export default WalletAddressPage;
diff --git a/ui/page/walletSend/index.js b/ui/modal/modalWalletSend/index.js
similarity index 65%
rename from ui/page/walletSend/index.js
rename to ui/modal/modalWalletSend/index.js
index 3b4414ad8..fe7889090 100644
--- a/ui/page/walletSend/index.js
+++ b/ui/modal/modalWalletSend/index.js
@@ -1,9 +1,12 @@
 import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
 import WalletSend from './view';
 
 const select = state => ({});
 
-const perform = dispatch => ({});
+const perform = {
+  doHideModal,
+};
 
 export default connect(
   select,
diff --git a/ui/modal/modalWalletSend/view.jsx b/ui/modal/modalWalletSend/view.jsx
new file mode 100644
index 000000000..247a19a08
--- /dev/null
+++ b/ui/modal/modalWalletSend/view.jsx
@@ -0,0 +1,16 @@
+// @flow
+import React from 'react';
+import WalletSend from 'component/walletSend';
+import { Modal } from 'modal/modal';
+
+type Props = { doHideModal: () => void };
+
+const WalletSendModal = (props: Props) => {
+  const { doHideModal } = props;
+  return (
+    <Modal isOpen type="card" onAborted={doHideModal}>
+      <WalletSend />
+    </Modal>
+  );
+};
+export default WalletSendModal;
diff --git a/ui/page/walletReceive/view.jsx b/ui/modal/walletReceive/view.jsx
similarity index 58%
rename from ui/page/walletReceive/view.jsx
rename to ui/modal/walletReceive/view.jsx
index 85746bff8..56829d5ad 100644
--- a/ui/page/walletReceive/view.jsx
+++ b/ui/modal/walletReceive/view.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import WalletAddress from 'component/walletAddress';
-import Page from 'component/page';
+import WalletAddress from './node_modules/component/walletAddress';
+import Page from './node_modules/component/page';
 
 const WalletAddressPage = () => (
   <Page className="main--contained">
diff --git a/ui/modal/walletSend/view.jsx b/ui/modal/walletSend/view.jsx
new file mode 100644
index 000000000..81f994e61
--- /dev/null
+++ b/ui/modal/walletSend/view.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import WalletSend from './node_modules/component/walletSend';
+
+const WalletSendModal = () => (
+  <div>
+    <WalletSend />
+  </div>
+);
+
+export default WalletSendModal;
diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx
index 54b620db7..7b3a8c21f 100644
--- a/ui/page/channel/view.jsx
+++ b/ui/page/channel/view.jsx
@@ -196,7 +196,7 @@ function ChannelPage(props: Props) {
           )}
           {editing && <img className="channel-cover__custom" src={coverPreview} />}
           {/* component that offers select/upload */}
-          <div className="channel__primary-info ">
+          <div className="channel__primary-info">
             {!editing && (
               <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} obscure={channelIsBlocked} />
             )}
@@ -207,14 +207,12 @@ function ChannelPage(props: Props) {
                 thumbnailPreview={thumbPreview}
               />
             )}
-            <h1 className="channel__title">
-              {title || '@' + channelName}
-              {channelIsMine && !editing && (
-                <Button title={__('Edit')} onClick={() => setEditing(!editing)} icon={ICONS.EDIT} iconSize={49} />
-              )}
-            </h1>
+            <h1 className="channel__title">{title || '@' + channelName}</h1>
+            {channelIsMine && !editing && (
+              <Button button="alt" title={__('Edit')} onClick={() => setEditing(!editing)} icon={ICONS.EDIT} />
+            )}
             <div className="channel__meta">
-              <ClaimUri uri={uri} />
+              <ClaimUri uri={uri} inline />
               <span>
                 {subCount} {subCount !== 1 ? __('Subscribers') : __('Subscriber')}
                 <HelpLink href="https://lbry.com/faq/views" />
@@ -226,7 +224,7 @@ function ChannelPage(props: Props) {
           <TabList className="tabs__list--channel-page">
             <Tab disabled={editing}>{__('Content')}</Tab>
             <Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
-            <Tab disabled={editing}>{__('Discussion')}</Tab>
+            <Tab disabled={editing}>{__('Comments')}</Tab>
             {/* only render searchbar on content page (tab index 0 === content page) */}
             {tabIndex === 0 ? (
               <Form onSubmit={handleSearch} className="wunderbar--inline">
diff --git a/ui/page/file/view.jsx b/ui/page/file/view.jsx
index eb78ed915..5820ec65b 100644
--- a/ui/page/file/view.jsx
+++ b/ui/page/file/view.jsx
@@ -12,7 +12,7 @@ import Button from 'component/button';
 import Page from 'component/page';
 import FileDownloadLink from 'component/fileDownloadLink';
 import RecommendedContent from 'component/recommendedContent';
-import ClaimTags from 'component/claimTags';
+
 import CommentsList from 'component/commentsList';
 import CommentCreate from 'component/commentCreate';
 import ClaimUri from 'component/claimUri';
@@ -137,6 +137,8 @@ class FilePage extends React.Component<Props> {
 
     return (
       <Page className="main--file-page">
+        <ClaimUri uri={uri} />
+
         <div className={`card ${FILE_WRAPPER_CLASS}`}>
           {!fileInfo && insufficientCredits && (
             <div className="media__insufficient-credits help--warning">
@@ -153,82 +155,87 @@ class FilePage extends React.Component<Props> {
           <FileViewerInitiator uri={uri} insufficientCredits={insufficientCredits} />
         </div>
 
+        <div className="media__title">
+          <span className="media__title-price">
+            <FilePrice badge uri={normalizeURI(uri)} />
+          </span>
+          <h1 className="media__title-text">{title}</h1>
+        </div>
+
         <div className="columns">
           <div className="grid-area--info">
-            <h1 className="media__title media__title--large">{title}</h1>
-
-            <div className="media__subtitle">
-              <div className="media__actions media__actions--between">
-                <DateTime uri={uri} show={DateTime.SHOW_DATE} />
-                <span>
-                  {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
-                  <HelpLink href="https://lbry.com/faq/views" />
-                </span>
-              </div>
-
-              <div className="media__actions media__actions--between">
-                <div className="media__action-group--large">
-                  {claimIsMine && (
-                    <Button
-                      button="primary"
-                      icon={icons.EDIT}
-                      label={__('Edit')}
-                      navigate="/$/publish"
-                      onClick={() => {
-                        prepareEdit(claim, editUri, fileInfo);
-                      }}
-                    />
-                  )}
-                  {!claimIsMine && (
-                    <Button
-                      button="alt"
-                      icon={icons.TIP}
-                      label={__('Tip')}
-                      requiresAuth={IS_WEB}
-                      title={__('Send a tip to this creator')}
-                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
-                    />
-                  )}
-                  {(claimIsMine || (!claimIsMine && supportOption)) && (
-                    <Button
-                      button="alt"
-                      icon={icons.SUPPORT}
-                      label={__('Support')}
-                      requiresAuth={IS_WEB}
-                      title={__('Support this claim')}
-                      onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
-                    />
-                  )}
+            <div className="media__subtitle--between">
+              <DateTime uri={uri} show={DateTime.SHOW_DATE} />
+              <span>
+                {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
+                <HelpLink href="https://lbry.com/faq/views" />
+              </span>
+            </div>
+            <div className="media__actions">
+              <div className="section__actions">
+                {claimIsMine && (
                   <Button
                     button="alt"
-                    icon={icons.SHARE}
-                    label={__('Share')}
-                    onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
+                    icon={icons.EDIT}
+                    label={__('Edit')}
+                    navigate="/$/publish"
+                    onClick={() => {
+                      prepareEdit(claim, editUri, fileInfo);
+                    }}
                   />
-                </div>
-
-                <div className="media__action-group--large">
-                  {/* @if TARGET='app' */}
-                  <FileDownloadLink uri={uri} />
-                  {/* @endif */}
-                  <FileActions uri={uri} claimId={claim.claim_id} />
-                </div>
+                )}
+                <Button
+                  button="alt"
+                  icon={icons.SHARE}
+                  label={__('Share')}
+                  onClick={() => openModal(MODALS.SOCIAL_SHARE, { uri, webShareable })}
+                />
+                {!claimIsMine && (
+                  <Button
+                    button="alt"
+                    icon={icons.TIP}
+                    label={__('Tip')}
+                    requiresAuth={IS_WEB}
+                    title={__('Send a tip to this creator')}
+                    onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: false })}
+                  />
+                )}
+                {(claimIsMine || (!claimIsMine && supportOption)) && (
+                  <Button
+                    button="alt"
+                    icon={icons.SUPPORT}
+                    label={__('Support')}
+                    requiresAuth={IS_WEB}
+                    title={__('Support this claim')}
+                    onClick={() => openModal(MODALS.SEND_TIP, { uri, claimIsMine, isSupport: true })}
+                  />
+                )}
+              </div>
+              <div className="section__actions">
+                {/* @if TARGET='app' */}
+                <FileDownloadLink uri={uri} />
+                {/* @endif */}
+                <FileActions uri={uri} claimId={claim.claim_id} />
               </div>
             </div>
 
-            <hr />
+            <div className="section__divider">
+              <hr />
+            </div>
 
             {channelUri ? (
-              <ClaimPreview uri={channelUri} type="inline" properties={false} />
+              <ClaimPreview uri={channelUri} type="inline" properties={false} hideBlock />
             ) : (
               <div className="claim-preview--inline claim-preview-title">{__('Anonymous')}</div>
             )}
 
-            <div className="media__info--large">
-              <FileDetails uri={uri} />
-              <ClaimTags uri={uri} type="large" />
+            <FileDetails uri={uri} />
+
+            <div className="section__divider">
+              <hr />
             </div>
-            <div className="media__info-title">{__('Comments')}</div>
+
+            <div className="section__title--small">{__('Comments')}</div>
             <section className="section">
               <CommentCreate uri={uri} />
             </section>
@@ -237,13 +244,8 @@ class FilePage extends React.Component<Props> {
             </section>
           </div>
           <div className="grid-area--related">
-            <div className="media__actions media__actions--between media__actions--nowrap">
-              <ClaimUri uri={uri} />
-              <div className="file-properties">
-                {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
-                <FilePrice badge uri={normalizeURI(uri)} />
-              </div>
-            </div>
+            {nsfw && <div className="badge badge--mature">{__('Mature')}</div>}
+
             <RecommendedContent uri={uri} />
           </div>
         </div>
diff --git a/ui/page/fileListDownloaded/view.jsx b/ui/page/fileListDownloaded/view.jsx
index b7687625f..e43c402f8 100644
--- a/ui/page/fileListDownloaded/view.jsx
+++ b/ui/page/fileListDownloaded/view.jsx
@@ -65,7 +65,9 @@ function FileListDownloaded(props: Props) {
       ) : (
         <div className="main--empty">
           <section className="card card--section">
-            <h2 className="card__title">{__("You haven't downloaded anything from LBRY yet.")}</h2>
+            <h2 className="card__title card__title--deprecated">
+              {__("You haven't downloaded anything from LBRY yet.")}
+            </h2>
             <div className="card__actions card__actions--center">
               <Button button="primary" navigate="/" label={__('Explore new content')} />
             </div>
diff --git a/ui/page/help/view.jsx b/ui/page/help/view.jsx
index 04abd9a7b..4928655e8 100644
--- a/ui/page/help/view.jsx
+++ b/ui/page/help/view.jsx
@@ -133,9 +133,14 @@ class HelpPage extends React.PureComponent<Props, State> {
                 href="https://lbry.com/faq/lbry-basics"
                 label={__('Read the App Basics FAQ')}
                 icon={icons.HELP}
-                button="inverse"
+                button="secondary"
+              />
+              <Button
+                href="https://lbry.com/faq"
+                label={__('View all LBRY FAQs')}
+                icon={icons.HELP}
+                button="secondary"
               />
-              <Button href="https://lbry.com/faq" label={__('View all LBRY FAQs')} icon={icons.HELP} button="inverse" />
             </div>
           }
         />
@@ -150,8 +155,8 @@ class HelpPage extends React.PureComponent<Props, State> {
           }
           actions={
             <div className="section__actions">
-              <Button button="inverse" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
-              <Button button="inverse" label={__('Email Us')} icon={icons.WEB} href="mailto:help@lbry.com" />
+              <Button button="secondary" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
+              <Button button="secondary" label={__('Email Us')} icon={icons.WEB} href="mailto:help@lbry.com" />
             </div>
           }
         />
@@ -159,14 +164,14 @@ class HelpPage extends React.PureComponent<Props, State> {
         <Card
           title={__('Report a Bug or Suggest a New Feature')}
           subtitle={
-            <p>
+            <React.Fragment>
               {__('Did you find something wrong? Think LBRY could add something useful and cool?')}{' '}
               <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/support" />.
-            </p>
+            </React.Fragment>
           }
           actions={
             <div className="section__actions">
-              <Button navigate="/$/report" label={__('Help Us Out')} button="inverse" />
+              <Button navigate="/$/report" label={__('Submit Feedback')} button="secondary" />
             </div>
           }
         />
@@ -175,15 +180,15 @@ class HelpPage extends React.PureComponent<Props, State> {
         <Card
           title={__('View your Log')}
           subtitle={
-            <p>
+            <React.Fragment>
               {__('Did something go wrong? Have a look in your log file, or send it to')}{' '}
               <Button button="link" label={__('support')} href="https://lbry.com/faq/support" />.
-            </p>
+            </React.Fragment>
           }
           actions={
             <div className="section__actions">
-              <Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
-              <Button button="link" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
+              <Button button="secondary" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
+              <Button button="secondary" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
             </div>
           }
         />
@@ -193,14 +198,16 @@ class HelpPage extends React.PureComponent<Props, State> {
 
         <section className="card">
           <header className="table__header">
-            <h2 className="section__title">{__('About')}</h2>
+            <div className="table__header-text">
+              <h2 className="section__title">{__('About')}</h2>
 
-            {this.state.upgradeAvailable !== null && this.state.upgradeAvailable && (
-              <p className="section__subtitle">
-                {__('A newer version of LBRY is available.')}{' '}
-                <Button button="link" href={newVerLink} label={__('Download now!')} />
-              </p>
-            )}
+              {this.state.upgradeAvailable !== null && this.state.upgradeAvailable && (
+                <p className="section__subtitle">
+                  {__('A newer version of LBRY is available.')}{' '}
+                  <Button button="link" href={newVerLink} label={__('Download now!')} />
+                </p>
+              )}
+            </div>
           </header>
 
           <table className="table table--stretch">
@@ -254,7 +261,7 @@ class HelpPage extends React.PureComponent<Props, State> {
                   {!this.state.accessTokenHidden && accessToken && (
                     <div>
                       <p>{accessToken}</p>
-                      <div className="alert-text">
+                      <div className="help--warning">
                         {__('This is equivalent to a password. Do not post or share this.')}
                       </div>
                     </div>
diff --git a/ui/page/listBlocked/view.jsx b/ui/page/listBlocked/view.jsx
index 2813954d0..b1fb50abc 100644
--- a/ui/page/listBlocked/view.jsx
+++ b/ui/page/listBlocked/view.jsx
@@ -25,8 +25,10 @@ function ListBlocked(props: Props) {
       ) : (
         <div className="main--empty">
           <section className="card card--section">
-            <h2 className="card__title">{__('You aren’t blocking any channels')}</h2>
-            <p className="card__subtitle">{__('When you block a channel, all content from that channel will be hidden.')}</p>
+            <h2 className="card__title card__title--deprecated">{__('You aren’t blocking any channels')}</h2>
+            <p className="section__subtitle">
+              {__('When you block a channel, all content from that channel will be hidden.')}
+            </p>
           </section>
         </div>
       )}
diff --git a/ui/page/report/view.jsx b/ui/page/report/view.jsx
index e2b6c840a..677cec2f5 100644
--- a/ui/page/report/view.jsx
+++ b/ui/page/report/view.jsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import Button from 'component/button';
 import { FormField } from 'component/common/form';
 import { doToast } from 'lbry-redux';
 import { Lbryio } from 'lbryinc';
 import Page from 'component/page';
+import Card from 'component/common/card';
 
 class ReportPage extends React.Component {
   constructor(props) {
@@ -46,58 +47,65 @@ class ReportPage extends React.Component {
   render() {
     return (
       <Page>
-        <section className="card card--section">
-          <h2 className="card__title">{__('Report an Issue/Request a Feature')}</h2>
-          <p className="card__subtitle">
-            {__(
-              'Please describe the problem you experienced or the feature you want to see and any information you think might be useful to us. Links to screenshots are great!'
-            )}
-          </p>
+        <Card
+          title={__('Report an Issue/Request a Feature')}
+          subtitle={__(
+            'Please describe the problem you experienced or the feature you want to see and any information you think might be useful to us. Links to screenshots are great!'
+          )}
+          actions={
+            <Fragment>
+              <FormField
+                type="textarea"
+                rows="10"
+                name="message"
+                stretch
+                value={this.state.message}
+                onChange={event => {
+                  this.onMessageChange(event);
+                }}
+                placeholder={__('Description of your issue or feature request')}
+              />
 
-          <FormField
-            type="textarea"
-            rows="10"
-            name="message"
-            stretch
-            value={this.state.message}
-            onChange={event => {
-              this.onMessageChange(event);
-            }}
-            placeholder={__('Description of your issue or feature request')}
-          />
+              <Button
+                button="primary"
+                onClick={event => {
+                  this.submitMessage(event);
+                }}
+                className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`}
+              >
+                {this.state.submitting ? __('Submitting...') : __('Submit Report')}
+              </Button>
+            </Fragment>
+          }
+        />
 
-          <div className="card__actions">
-            <Button
-              button="primary"
-              onClick={event => {
-                this.submitMessage(event);
-              }}
-              className={`button-block button-primary ${this.state.submitting ? 'disabled' : ''}`}
-            >
-              {this.state.submitting ? __('Submitting...') : __('Submit Report')}
-            </Button>
-          </div>
-        </section>
-
-        <section className="card card--section">
-          <h2 className="card__title">{__('Developer?')}</h2>
-
-          <p>
-            {__('You can also')}{' '}
-            <Button
-              button="link"
-              href="https://github.com/lbryio/lbry-desktop/issues"
-              label={__('submit an issue on GitHub')}
-            />
-            .
-          </p>
-          <p>
-            {__('Explore our')} <Button button="link" href="https://lbry.tech" label={__('technical resources')} />.
-          </p>
-          <p>
-            {__('Join our')} <Button button="link" href="https://discourse.lbry.com/" label={__('tech forum')} />.
-          </p>
-        </section>
+        <Card
+          title={__('Developer?')}
+          actions={
+            <Fragment>
+              <div className="markdown-preview">
+                <p>{__('You can also:')}</p>
+                <ul>
+                  <li>
+                    <Button
+                      button="link"
+                      href="https://github.com/lbryio/lbry-desktop/issues"
+                      label={__('Submit an issue on GitHub')}
+                    />
+                    .
+                  </li>
+                  <li>
+                    {__('Explore our')}{' '}
+                    <Button button="link" href="https://lbry.tech" label={__('technical resources')} />.
+                  </li>
+                  <li>
+                    {__('Join our')} <Button button="link" href="https://forum.lbry.tech" label={__('tech forum')} />.
+                  </li>
+                </ul>
+              </div>
+            </Fragment>
+          }
+        />
       </Page>
     );
   }
diff --git a/ui/page/rewards/view.jsx b/ui/page/rewards/view.jsx
index 21808252c..261a5509c 100644
--- a/ui/page/rewards/view.jsx
+++ b/ui/page/rewards/view.jsx
@@ -1,5 +1,6 @@
 // @flow
-import React, { PureComponent, Fragment } from 'react';
+import * as PAGES from 'constants/pages';
+import React, { PureComponent } from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import RewardListClaimed from 'component/rewardListClaimed';
 import RewardTile from 'component/rewardTile';
@@ -8,6 +9,7 @@ import Page from 'component/page';
 import classnames from 'classnames';
 import { rewards as REWARD_TYPES } from 'lbryinc';
 import RewardAuthIntro from 'component/rewardAuthIntro';
+import Card from 'component/common/card';
 
 type Props = {
   doAuth: () => void,
@@ -82,8 +84,8 @@ class RewardsPage extends PureComponent<Props> {
     if (!IS_WEB && daemonSettings && !daemonSettings.share_usage_data) {
       return (
         <section className="card card--section">
-          <h2 className="card__title">{__('Disabled')}</h2>
-          <p className="card__subtitle">
+          <h2 className="card__title card__title--deprecated">{__('Disabled')}</h2>
+          <p className="section__subtitle">
             {__('Rewards are currently disabled for your account. Turn on diagnostic data sharing, in')}{' '}
             <Button button="link" navigate="/$/settings" label="Settings" />
             {__(', in order to re-enable them.')}
@@ -98,20 +100,17 @@ class RewardsPage extends PureComponent<Props> {
       );
     } else if (!rewards || rewards.length <= 0) {
       return (
-        <Fragment>
-          <section className="card card--section">
-            <h2 className="card__title">{__('No Rewards Available')}</h2>
-            <p>
-              {claimed && claimed.length
-                ? __(
-                    "You have claimed all available rewards! We're regularly adding more so be sure to check back later."
-                  )
-                : __('There are no rewards available at this time, please check back later.')}
-            </p>
-          </section>
-
-          <div className="card__list">{this.renderCustomRewardCode()}</div>
-        </Fragment>
+        <Card
+          title={__('No Rewards Available')}
+          subtitle={
+            claimed && claimed.length
+              ? __(
+                  "You have claimed all available rewards! We're regularly adding more so be sure to check back later."
+                )
+              : __('There are no rewards available at this time, please check back later.')
+          }
+          actions={<Button button="primary" navigate={`/$/${PAGES.DISCOVER}`} label={__('Go Home')} />}
+        />
       );
     }
 
diff --git a/ui/page/search/view.jsx b/ui/page/search/view.jsx
index 3626c5f79..ea069362a 100644
--- a/ui/page/search/view.jsx
+++ b/ui/page/search/view.jsx
@@ -7,6 +7,7 @@ import ClaimList from 'component/claimList';
 import Page from 'component/page';
 import SearchOptions from 'component/searchOptions';
 import Button from 'component/button';
+import ClaimUri from 'component/claimUri';
 
 type Props = {
   search: string => void,
@@ -41,9 +42,7 @@ export default function SearchPage(props: Props) {
           <Fragment>
             {isValid && (
               <header className="search__header">
-                <Button button="alt" navigate={uri} className="media__uri--large">
-                  {uri}
-                </Button>
+                <ClaimUri uri={uri} />
                 <div className="card">
                   <ClaimPreview uri={uri} type="large" placeholder="publish" />
                 </div>
diff --git a/ui/page/settings/index.js b/ui/page/settings/index.js
index 7de1c56b1..248c4bd6b 100644
--- a/ui/page/settings/index.js
+++ b/ui/page/settings/index.js
@@ -6,9 +6,11 @@ import { doSetPlayingUri } from 'redux/actions/content';
 import { makeSelectClientSetting, selectDaemonSettings, selectosNotificationsEnabled } from 'redux/selectors/settings';
 import { doWalletStatus, selectWalletIsEncrypted, selectBlockedChannelsCount } from 'lbry-redux';
 import SettingsPage from './view';
+import { selectUserVerifiedEmail } from 'lbryinc';
 
 const select = state => ({
   daemonSettings: selectDaemonSettings(state),
+  isAuthenticated: selectUserVerifiedEmail(state),
   showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
   instantPurchaseEnabled: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_ENABLED)(state),
   instantPurchaseMax: makeSelectClientSetting(SETTINGS.INSTANT_PURCHASE_MAX)(state),
diff --git a/ui/page/settings/view.jsx b/ui/page/settings/view.jsx
index 65b2f6bcd..dfbcff5e2 100644
--- a/ui/page/settings/view.jsx
+++ b/ui/page/settings/view.jsx
@@ -53,6 +53,7 @@ type Props = {
   clearCache: () => Promise<any>,
   daemonSettings: DaemonSettings,
   showNsfw: boolean,
+  isAuthenticated: boolean,
   instantPurchaseEnabled: boolean,
   instantPurchaseMax: Price,
   currentTheme: string,
@@ -185,6 +186,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
       showNsfw,
       instantPurchaseEnabled,
       instantPurchaseMax,
+      isAuthenticated,
       currentTheme,
       themes,
       automaticDarkModeEnabled,
@@ -217,7 +219,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
       <Page>
         {!IS_WEB && noDaemonSettings ? (
           <section className="card card--section">
-            <div className="card__title">{__('Failed to load settings.')}</div>
+            <div className="card__title card__title--deprecated">{__('Failed to load settings.')}</div>
           </section>
         ) : (
           <div>
@@ -410,17 +412,19 @@ class SettingsPage extends React.PureComponent<Props, State> {
               }
             />
 
-            <Card
-              title={__('Blocked Channels')}
-              actions={
-                <p>
-                  {__('You have')} {userBlockedChannelsCount} {__('blocked')}{' '}
-                  {userBlockedChannelsCount === 1 && __('channel')}
-                  {userBlockedChannelsCount !== 1 && __('channels')}.{' '}
-                  <Button button="link" label={__('Manage')} navigate={`/$/${PAGES.BLOCKED}`} />.
-                </p>
-              }
-            />
+            {isAuthenticated && (
+              <Card
+                title={__('Blocked Channels')}
+                actions={
+                  <p>
+                    {__('You have')} {userBlockedChannelsCount} {__('blocked')}{' '}
+                    {userBlockedChannelsCount === 1 && __('channel')}
+                    {userBlockedChannelsCount !== 1 && __('channels')}.{' '}
+                    <Button button="link" label={__('Manage')} navigate={`/$/${PAGES.BLOCKED}`} />.
+                  </p>
+                }
+              />
+            )}
 
             {/* @if TARGET='app' */}
             <Card
@@ -518,90 +522,98 @@ class SettingsPage extends React.PureComponent<Props, State> {
                 </React.Fragment>
               }
             />
-            <Card
-              title={__('Wallet Security')}
-              actions={
-                <React.Fragment>
-                  {/* @if TARGET='app' */}
-                  <FormField
-                    disabled
-                    type="checkbox"
-                    name="encrypt_wallet"
-                    onChange={() => this.onChangeEncryptWallet()}
-                    checked={walletEncrypted}
-                    label={__('Encrypt my wallet with a custom password')}
-                    helper={
-                      <React.Fragment>
+
+            {(isAuthenticated || !IS_WEB) && (
+              <Card
+                title={__('Wallet Security')}
+                actions={
+                  <React.Fragment>
+                    {/* @if TARGET='app' */}
+                    <FormField
+                      disabled
+                      type="checkbox"
+                      name="encrypt_wallet"
+                      onChange={() => this.onChangeEncryptWallet()}
+                      checked={walletEncrypted}
+                      label={__('Encrypt my wallet with a custom password')}
+                      helper={
+                        <React.Fragment>
+                          <I18nMessage
+                            tokens={{
+                              learn_more: (
+                                <Button
+                                  button="link"
+                                  label={__('Learn more')}
+                                  href="https://lbry.com/faq/account-sync"
+                                />
+                              ),
+                            }}
+                          >
+                            Wallet encryption is currently unavailable until it's supported for synced accounts. It will
+                            be added back soon. %learn_more%.
+                          </I18nMessage>
+                          {/* {__('Secure your local wallet data with a custom password.')}{' '}
+                        <strong>{__('Lost passwords cannot be recovered.')} </strong>
+                        <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
+                        </React.Fragment>
+                      }
+                    />
+
+                    {walletEncrypted && this.state.storedPassword && (
+                      <FormField
+                        type="checkbox"
+                        name="save_password"
+                        onChange={this.onConfirmForgetPassword}
+                        checked={this.state.storedPassword}
+                        label={__('Save Password')}
+                        helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
+                      />
+                    )}
+                    {/* @endif */}
+
+                    <FormField
+                      type="checkbox"
+                      name="hide_balance"
+                      onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
+                      checked={hideBalance}
+                      label={__('Hide wallet balance in header')}
+                    />
+                  </React.Fragment>
+                }
+              />
+            )}
+
+            {(!IS_WEB || isAuthenticated) && (
+              <Card
+                title={__('Experimental Settings')}
+                actions={
+                  <React.Fragment>
+                    <FormField
+                      type="checkbox"
+                      name="support_option"
+                      onChange={() => setClientSetting(SETTINGS.SUPPORT_OPTION, !supportOption)}
+                      checked={supportOption}
+                      label={__('Enable claim support')}
+                      helper={
                         <I18nMessage
                           tokens={{
-                            learn_more: (
-                              <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/account-sync" />
+                            discovery_link: (
+                              <Button button="link" label={__('discovery')} href="https://lbry.com/faq/trending" />
+                            ),
+                            vanity_names_link: (
+                              <Button button="link" label={__('vanity names')} href="https://lbry.com/faq/naming" />
                             ),
                           }}
                         >
-                          Wallet encryption is currently unavailable until it's supported for synced accounts. It will
-                          be added back soon. %learn_more%.
+                          This will add a Support button along side tipping. Similar to tips, supports help
+                          %discovery_link% but the LBC is returned to your wallet if revoked. Both also help secure your
+                          %vanity_names_link%.
                         </I18nMessage>
-                        {/* {__('Secure your local wallet data with a custom password.')}{' '}
-                        <strong>{__('Lost passwords cannot be recovered.')} </strong>
-                        <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />. */}
-                      </React.Fragment>
-                    }
-                  />
-
-                  {walletEncrypted && this.state.storedPassword && (
-                    <FormField
-                      type="checkbox"
-                      name="save_password"
-                      onChange={this.onConfirmForgetPassword}
-                      checked={this.state.storedPassword}
-                      label={__('Save Password')}
-                      helper={<React.Fragment>{__('Automatically unlock your wallet on startup')}</React.Fragment>}
+                      }
                     />
-                  )}
-                  {/* @endif */}
 
-                  <FormField
-                    type="checkbox"
-                    name="hide_balance"
-                    onChange={() => setClientSetting(SETTINGS.HIDE_BALANCE, !hideBalance)}
-                    checked={hideBalance}
-                    label={__('Hide wallet balance in header')}
-                  />
-                </React.Fragment>
-              }
-            />
-
-            <Card
-              title={__('Experimental Settings')}
-              actions={
-                <React.Fragment>
-                  <FormField
-                    type="checkbox"
-                    name="support_option"
-                    onChange={() => setClientSetting(SETTINGS.SUPPORT_OPTION, !supportOption)}
-                    checked={supportOption}
-                    label={__('Enable claim support')}
-                    helper={
-                      <I18nMessage
-                        tokens={{
-                          discovery_link: (
-                            <Button button="link" label={__('discovery')} href="https://lbry.com/faq/trending" />
-                          ),
-                          vanity_names_link: (
-                            <Button button="link" label={__('vanity names')} href="https://lbry.com/faq/naming" />
-                          ),
-                        }}
-                      >
-                        This will add a Support button along side tipping. Similar to tips, supports help
-                        %discovery_link% but the LBC is returned to your wallet if revoked. Both also help secure your
-                        %vanity_names_link%.
-                      </I18nMessage>
-                    }
-                  />
-
-                  {/* @if TARGET='app' */}
-                  {/*
+                    {/* @if TARGET='app' */}
+                    {/*
                   Disabling below until we get downloads to work with shared subscriptions code
                   <FormField
                     type="checkbox"
@@ -613,30 +625,31 @@ class SettingsPage extends React.PureComponent<Props, State> {
                       "The latest file from each of your subscriptions will be downloaded for quick access as soon as it's published."
                     )}
                   /> */}
-                  <fieldset-section>
-                    <FormField
-                      name="max_connections"
-                      type="select"
-                      label={__('Max Connections')}
-                      helper={__(
-                        'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
-                      )}
-                      min={1}
-                      max={100}
-                      onChange={this.onMaxConnectionsChange}
-                      value={daemonSettings.max_connections_per_download}
-                    >
-                      {connectionOptions.map(connectionOption => (
-                        <option key={connectionOption} value={connectionOption}>
-                          {connectionOption}
-                        </option>
-                      ))}
-                    </FormField>
-                  </fieldset-section>
-                  {/* @endif */}
-                </React.Fragment>
-              }
-            />
+                    <fieldset-section>
+                      <FormField
+                        name="max_connections"
+                        type="select"
+                        label={__('Max Connections')}
+                        helper={__(
+                          'For users with good bandwidth, try a higher value to improve streaming and download speeds. Low bandwidth users may benefit from a lower setting. Default is 4.'
+                        )}
+                        min={1}
+                        max={100}
+                        onChange={this.onMaxConnectionsChange}
+                        value={daemonSettings.max_connections_per_download}
+                      >
+                        {connectionOptions.map(connectionOption => (
+                          <option key={connectionOption} value={connectionOption}>
+                            {connectionOption}
+                          </option>
+                        ))}
+                      </FormField>
+                    </fieldset-section>
+                    {/* @endif */}
+                  </React.Fragment>
+                }
+              />
+            )}
 
             {/* @if TARGET='app' */}
             {/* Auto launch in a hidden state doesn't work on mac https://github.com/Teamwork/node-auto-launch/issues/81 */}
@@ -646,15 +659,15 @@ class SettingsPage extends React.PureComponent<Props, State> {
             <Card
               title={__('Application Cache')}
               subtitle={
-                <p className="card__subtitle--status">
+                <p className="section__subtitle">
                   {__(
-                    'This will clear the application cache. Your wallet will not be affected and you will not lose any data.'
+                    'This will clear the application cache, and might fix issues you are having. Your wallet will not be affected. '
                   )}
                 </p>
               }
               actions={
                 <Button
-                  button="inverse"
+                  button="secondary"
                   label={this.state.clearingCache ? __('Clearing') : __('Clear Cache')}
                   onClick={clearCache}
                   disabled={this.state.clearingCache}
diff --git a/ui/page/show/view.jsx b/ui/page/show/view.jsx
index f7f71d049..589cdbeff 100644
--- a/ui/page/show/view.jsx
+++ b/ui/page/show/view.jsx
@@ -90,7 +90,7 @@ function ShowPage(props: Props) {
       innerContent = (
         <Page>
           <section className="card card--section">
-            <div className="card__title">{uri}</div>
+            <div className="card__title card__title--deprecated">{uri}</div>
             <p>
               {__(
                 'In response to a complaint we received under the US Digital Millennium Copyright Act, we have blocked access to this content from our applications.'
diff --git a/ui/page/tags/view.jsx b/ui/page/tags/view.jsx
index 9c632c3f2..e67ab613a 100644
--- a/ui/page/tags/view.jsx
+++ b/ui/page/tags/view.jsx
@@ -1,4 +1,5 @@
 // @flow
+import * as ICONS from 'constants/icons';
 import React, { useRef } from 'react';
 import Page from 'component/page';
 import ClaimListDiscover from 'component/claimListDiscover';
@@ -47,7 +48,17 @@ function TagsPage(props: Props) {
       <ClaimListDiscover
         tags={tags}
         hiddenNsfwMessage={<HiddenNsfw type="page" />}
-        meta={<Button ref={buttonRef} button="link" onClick={handleFollowClick} requiresAuth={IS_WEB} label={label} />}
+        meta={
+          <Button
+            ref={buttonRef}
+            button="alt"
+            icon={ICONS.SUBSCRIBE}
+            iconColor="red"
+            onClick={handleFollowClick}
+            requiresAuth={IS_WEB}
+            label={label}
+          />
+        }
       />
     </Page>
   );
diff --git a/ui/page/walletSend/view.jsx b/ui/page/walletSend/view.jsx
deleted file mode 100644
index 3761cbde4..000000000
--- a/ui/page/walletSend/view.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import WalletSend from 'component/walletSend';
-import Page from 'component/page';
-
-const WalletSendPage = () => (
-  <Page className="main--contained">
-    <WalletSend />
-  </Page>
-);
-
-export default WalletSendPage;
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index c0f094ba7..cdab73748 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -1,15 +1,13 @@
 @charset "utf-8";
 
-@import '~@lbry/components/sass/init/_color.scss';
-@import '~@lbry/components/sass/init/_mixins.scss';
-@import '~@lbry/components/sass/init/_variables.scss';
-@import '~@lbry/components/sass/init/_reset.scss';
+@import '@lbry/components/sass/index.scss';
+@import 'themes/light.scss';
+@import 'themes/dark.scss';
 @import 'init/vars';
 @import 'init/mixins';
 @import 'init/type';
 @import 'init/gui';
 @import 'component/animation';
-@import 'component/badge';
 @import 'component/button';
 @import 'component/card';
 @import 'component/channel';
@@ -23,7 +21,6 @@
 @import 'component/form-field';
 @import 'component/header';
 @import 'component/icon';
-@import 'component/item-list';
 @import 'component/main';
 @import 'component/markdown-editor';
 @import 'component/markdown-preview';
@@ -44,6 +41,5 @@
 @import 'component/tabs';
 @import 'component/tags';
 @import 'component/time';
-@import 'component/tooltip';
 @import 'component/wunderbar';
 @import 'component/yrbl';
diff --git a/ui/scss/component/_badge.scss b/ui/scss/component/_badge.scss
deleted file mode 100644
index 82d06d6f2..000000000
--- a/ui/scss/component/_badge.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@import '~@lbry/components/sass/badge/_index.scss';
-
-.badge {
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.badge--tag {
-  @extend .badge;
-  background-color: lighten($lbry-teal-5, 55%);
-  color: darken($lbry-teal-5, 20%);
-  svg {
-    stroke: $lbry-teal-5;
-  }
-
-  [data-mode='dark'] & {
-    color: var(--dm-color-01);
-    background-color: lighten(mix($lbry-black, $lbry-teal-5, 80%), 10%);
-  }
-}
-
-.badge--alert {
-  @extend .badge;
-  background-color: $lbry-red-2;
-  color: $lbry-white;
-}
-
-.badge--mature {
-  background-color: lighten($lbry-grape-1, 10%);
-  color: $lbry-black;
-
-  svg {
-    stroke: $lbry-black;
-  }
-
-  [data-mode='dark'] & {
-    background-color: darken(mix($lbry-grape-1, $lbry-gray-5, 50%), 20%);
-  }
-}
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 1f0b7afa4..4fc867595 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -1,88 +1,10 @@
-@import '~@lbry/components/sass/button/_index.scss';
-
 .button {
   display: inline-block;
   font-weight: var(--font-weight-base);
-
-  svg {
-    // Buttons that don't have a label
-    &:only-child {
-      color: inherit;
-      width: 1.3rem;
-      height: 1.3rem;
-    }
-  }
-}
-
-.button--primary {
-  background-color: $lbry-teal-5;
-
-  &:hover {
-    background-color: $lbry-teal-4;
-  }
-
-  &:active {
-    background-color: $lbry-teal-3;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-  }
-}
-
-// Play/View button that is overlayed ontop of the video player
-.button--icon {
-  height: 5rem;
-  width: 5rem;
-  border-radius: 2.5rem;
-  &:not(:hover) {
-    background-color: $lbry-teal-4;
-  }
-}
-
-.button--primary,
-.button--inverse {
-  height: var(--button-height);
-  border-radius: var(--button-radius);
-  font-size: var(--font-body);
-  padding-top: 0;
-  padding-bottom: 0;
-  box-sizing: border-box;
-}
-
-.button--inverse {
-  border-color: $lbry-teal-4;
-  color: $lbry-teal-5;
-
-  &:hover {
-    color: $lbry-white;
-    background-color: $lbry-teal-4;
-    .icon {
-      stroke: $lbry-white;
-    }
-  }
-
-  [data-mode='dark'] & {
-    border-color: $lbry-teal-4;
-    color: $lbry-teal-3;
-  }
-}
-
-.button--alt {
-  padding: 0;
-}
-
-.button--link {
-  [data-mode='dark'] & {
-    color: $lbry-teal-4;
-
-    &:hover {
-      color: $lbry-teal-3;
-    }
-  }
 }
 
 .button--uri-indicator {
+  @extend .button--link;
   max-width: 100%;
   height: 1.2em;
   vertical-align: text-top;
@@ -90,50 +12,28 @@
   text-overflow: ellipsis;
   transition: color 0.2s;
 
-  &:hover {
-    color: $lbry-teal-5;
-  }
-
   .markdown-preview & {
     height: initial;
     vertical-align: initial;
-    color: $lbry-teal-5;
-
-    &:hover {
-      color: $lbry-teal-3;
-    }
-
-    [data-mode='dark'] & {
-      color: $lbry-teal-4;
-      &:hover {
-        color: $lbry-teal-3;
-      }
-    }
   }
 }
 
 .button--close {
+  z-index: 1;
   position: absolute;
   top: var(--spacing-miniscule);
   right: var(--spacing-miniscule);
   padding: 0.3rem;
   transition: all var(--transition-duration) var(--transition-style);
   border-radius: var(--card-radius);
+  color: var(--color-text);
 
   &:hover {
-    background-color: $lbry-black;
-    color: $lbry-white;
+    color: var(--color-button-primary-text);
+    background-color: var(--color-button-primary-bg);
   }
 }
 
-.button--subscribe {
-  vertical-align: text-top;
-  align-items: flex-start;
-}
-
-// Quick fix because this is a pain
-// There is something weird with wrapping buttons. Some places we want to wrap and others we want to ellips
-// Probably requires some nested style cleanup
 .button--download-link {
   .button__label {
     white-space: normal;
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index e84894682..0eb63b9af 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -1,15 +1,10 @@
 .card {
-  background-color: $lbry-white;
+  background-color: var(--color-card-background);
   margin-bottom: var(--spacing-large);
   position: relative;
   border-radius: var(--card-radius);
-  box-shadow: var(--card-box-shadow) $lbry-gray-1;
+  box-shadow: var(--card-box-shadow) var(--color-box-shadow);
   overflow: hidden;
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-05);
-    box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
-  }
 }
 
 .card--disabled {
@@ -25,30 +20,26 @@
 .card--wallet-balance {
   background-repeat: no-repeat;
   background-size: cover;
-  color: $lbry-white;
+  color: black; //white;
   justify-content: space-between;
 }
 
 .card--reward-total {
   background-repeat: no-repeat;
   background-size: cover;
-  color: $lbry-white;
-  font-size: var(--font-title);
+  color: var(--color-white); //white;
+  font-size: var(--font-large);
   font-weight: var(--font-weight-bold);
 }
 
 .card--inline {
-  border: 1px solid $lbry-gray-1;
+  border: 1px solid black; //gray-1;
   border-radius: var(--card-radius);
   margin-bottom: var(--spacing-medium);
 
   &:last-of-type {
     margin-bottom: 0;
   }
-
-  [data-mode='dark'] & {
-    border-color: var(--dm-color-03);
-  }
 }
 
 .card--claim-preview-wrap {
@@ -57,14 +48,10 @@
   min-width: 35rem;
 }
 
-//  C A R D
-//  A C T I O N S
-
 .card__actions {
   display: flex;
   align-items: center;
   margin-top: var(--spacing-large);
-  font-size: var(--font-body);
 
   &:only-child {
     margin-top: 0;
@@ -90,9 +77,6 @@
   justify-content: center;
 }
 
-//  C A R D
-//  L I S T
-
 .card__list {
   column-count: 2;
   column-gap: var(--spacing-medium);
@@ -104,68 +88,35 @@
   }
 }
 
-//  C A R D
-//  M E S S A G E
-
 .card__message {
   border-left: 0.5rem solid;
   padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-medium) var(--spacing-large);
 
   &:not(&--error):not(&--failure):not(&--success) {
-    background-color: rgba($lbry-teal-1, 0.1);
-    border-color: $lbry-teal-3;
+    background-color: black; //black; //teal-1, 0.1);
+    border-color: black; //teal-3;
   }
 }
 
 .card__message--error {
-  background-color: rgba($lbry-orange-1, 0.1);
-  border-color: $lbry-orange-3;
+  background-color: black; //black; //orange-1, 0.1);
+  border-color: black; //orange-3;
 }
 
 .card__message--failure {
-  background-color: rgba($lbry-red-1, 0.1);
-  border-color: $lbry-red-3;
+  background-color: black; //black; //red-1, 0.1);
+  border-color: black; //red-3;
 }
 
 .card__message--success {
-  background-color: rgba($lbry-green-1, 0.1);
-  border-color: $lbry-green-3;
+  background-color: black; //black; //green-1, 0.1);
+  border-color: black; //green-3;
 }
 
-//  C A R D
-//  S U B T I T L E
-
-.card__subtitle {
-  margin: var(--spacing-small) 0;
-  padding: var(--spacing-small);
-  border-radius: var(--card-radius);
-  font-size: var(--font-body);
-  background-color: rgba($lbry-blue-1, 0.1);
-  color: darken($lbry-gray-5, 15%);
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-04);
-    color: inherit;
-  }
-}
-
-.card__subtitle--status {
-  @extend .card__subtitle;
-  background-color: $lbry-yellow-1;
-
-  [data-mode='dark'] & {
-    background-color: rgba($lbry-yellow-1, 0.1);
-  }
-}
-
-//  C A R D
-//  T I T L E
-
 .card__title {
   display: flex;
   align-items: center;
-  margin-bottom: var(--spacing-small);
-  font-size: var(--font-section-title);
+  font-size: var(--font-title);
   font-weight: var(--font-weight-light);
 
   & > *:not(:last-child) {
@@ -173,13 +124,17 @@
   }
 }
 
+.card__title.card__title--deprecated {
+  margin-bottom: var(--spacing-small);
+}
+
 .card__title--between {
   @extend .card__title;
   justify-content: space-between;
 }
 
 .card__media--nsfw {
-  background-color: $lbry-grape-3;
+  background-color: black; //grape-3;
 }
 
 .card__media--disabled {
@@ -188,7 +143,11 @@
 }
 
 .card__header {
-  padding: var(--spacing-large);
+  margin: var(--spacing-medium) var(--spacing-large);
+
+  .section__subtitle {
+    margin-bottom: 0;
+  }
 }
 
 .card__body {
@@ -198,14 +157,9 @@
 
 .card__main-actions {
   padding: var(--spacing-large);
-  background-color: var(--color-card-actions);
-  color: darken($lbry-gray-5, 15%);
-  font-size: var(--font-body);
-
-  [data-mode='dark'] & {
-    background-color: var(--color-card-actions--dark);
-    color: inherit;
-  }
+  padding-bottom: 0;
+  margin-bottom: var(--spacing-large);
+  border-top: 1px solid var(--color-border);
 }
 
 .card__body--with-icon,
diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss
index f1ba20822..e9757a99a 100644
--- a/ui/scss/component/_channel.scss
+++ b/ui/scss/component/_channel.scss
@@ -2,13 +2,17 @@ $cover-z-index: 0;
 $metadata-z-index: 1;
 
 .channel-cover {
-  background-image: linear-gradient(to right, $lbry-indigo-4, $lbry-cyan-5 80%);
+  background-image: linear-gradient(to right, #637ad2, #318794 80%);
   display: flex;
   align-items: flex-end;
   box-sizing: content-box;
-  color: $lbry-white;
+  color: #fff;
   border-top-left-radius: var(--card-radius);
   border-top-right-radius: var(--card-radius);
+
+  .button {
+    color: #fff;
+  }
 }
 
 .channel-cover__custom {
@@ -37,8 +41,9 @@ $metadata-z-index: 1;
   position: absolute;
   height: var(--channel-thumbnail-width);
   width: var(--channel-thumbnail-width);
-  box-shadow: 0px 8px 40px -3px $lbry-black;
+  box-shadow: 0px 8px 40px -3px #000;
   left: var(--spacing-medium);
+  top: 4rem;
 }
 
 .channel-thumbnail__custom {
@@ -60,16 +65,19 @@ $metadata-z-index: 1;
 }
 
 .channel-thumbnail__default--0 {
-  background-color: $lbry-indigo-3;
+  background-color: #748ffc;
 }
+
 .channel-thumbnail__default--1 {
-  background-color: $lbry-orange-2;
+  background-color: #ffa855;
 }
+
 .channel-thumbnail__default--2 {
-  background-color: $lbry-blue-3;
+  background-color: #339af0;
 }
+
 .channel-thumbnail__default--3 {
-  background-color: $lbry-red-1;
+  background-color: #ec8383;
 }
 
 .channel__primary-info {
@@ -85,6 +93,7 @@ $metadata-z-index: 1;
 }
 
 .channel__title {
+  display: inline;
   margin-right: var(--spacing-small);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -113,5 +122,6 @@ $metadata-z-index: 1;
   position: absolute;
   top: 0;
   right: var(--spacing-medium);
+  margin-top: var(--spacing-medium);
   z-index: $metadata-z-index;
 }
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index f4dc67416..d1ca06a5d 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -1,9 +1,6 @@
-$border-color: rgba($lbry-teal-5, 0.1);
-$border-color--dark: var(--dm-color-04);
-
 .claim-list {
   .claim-preview {
-    border-top: 1px solid $border-color;
+    border-bottom: 1px solid var(--color-border);
   }
 }
 
@@ -13,9 +10,10 @@ $border-color--dark: var(--dm-color-04);
   min-height: 4.5rem;
   padding: var(--spacing-medium);
   font-size: var(--font-body);
+  border-bottom: 1px solid var(--color-border);
+
   border-top-left-radius: var(--card-radius);
   border-top-right-radius: var(--card-radius);
-  background-color: var(--color-card-actions);
 
   & > *:not(:last-child) {
     margin-right: 0.5rem;
@@ -25,11 +23,6 @@ $border-color--dark: var(--dm-color-04);
     margin-top: 0;
     margin-bottom: 0;
   }
-
-  [data-mode='dark'] & {
-    color: var(--dm-color-01);
-    background-color: var(--color-card-actions--dark);
-  }
 }
 
 .claim-list__header--small {
@@ -41,10 +34,11 @@ $border-color--dark: var(--dm-color-04);
   margin-bottom: 0;
   padding: 0 var(--spacing-medium);
   padding-right: var(--spacing-large);
+}
 
-  [data-mode='dark'] & {
-    color: var(--dm-color-01);
-  }
+.claim-list__conjuction {
+  color: var(--color-text-subtitle);
+  font-size: var(--font-small);
 }
 
 .claim-list__alt-controls {
@@ -73,18 +67,12 @@ $border-color--dark: var(--dm-color-04);
     flex-shrink: 0;
     margin-right: var(--spacing-medium);
   }
-
-  [data-mode='dark'] & {
-    color: $lbry-white;
-    border-color: $border-color--dark;
-  }
 }
 
 .claim-preview--large {
   border: none;
   padding: 0;
   margin: var(--spacing-medium);
-  font-size: var(--font-multiplier-large);
 
   &:hover {
     background-color: transparent;
@@ -98,14 +86,9 @@ $border-color--dark: var(--dm-color-04);
     width: 7.5rem;
     height: 7.5rem;
   }
-
-  [data-mode='dark'] & {
-    border: none;
-  }
 }
 
 .claim-preview--small {
-  font-size: var(--font-multiplier-small);
   padding: var(--spacing-small);
 
   .media__thumb {
@@ -118,14 +101,14 @@ $border-color--dark: var(--dm-color-04);
   }
 }
 
+.claim-preview--channel:not(.claim-preview--inline) {
+  background-color: var(--color-card-background-highlighted);
+}
+
 .claim-preview--visited {
   // Still keep the normal styles on hover regardless of if they have visited the claim
   &:not(:hover) {
-    color: lighten($lbry-black, 35%);
-
-    [data-mode='dark'] & {
-      color: darken($lbry-white, 35%);
-    }
+    // color: lighten(black; //black, 35%);
   }
 }
 
@@ -134,18 +117,14 @@ $border-color--dark: var(--dm-color-04);
   opacity: 0.6;
 
   &:hover {
-    background-color: $lbry-white;
-
-    [data-mode='dark'] & {
-      background-color: lighten($lbry-black, 5%);
-    }
+    background-color: black; //white;
   }
 }
 
 .claim-preview--inline {
   padding: 0;
-  padding-top: var(--spacing-large);
   border-bottom: none;
+  margin-bottom: var(--spacing-medium);
 
   .channel-thumbnail {
     width: var(--channel-thumbnail-width--small);
@@ -153,17 +132,10 @@ $border-color--dark: var(--dm-color-04);
   }
 }
 
-.claim-preview--tooltip {
-  [data-mode='dark'] & {
-    background-color: $lbry-black;
-  }
-}
-
 .claim-preview-title {
   font-weight: var(--font-weight-bold);
+  font-size: var(--font-body);
   margin-right: auto;
-  padding-right: var(--spacing-medium);
-  font-size: larger;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
@@ -196,7 +168,8 @@ $border-color--dark: var(--dm-color-04);
 .claim-preview-properties {
   align-items: flex-end;
   flex: 1;
-  font-size: var(--font-subtext);
+  font-size: var(--font-small);
+  color: var(--color-text-subtitle);
 }
 
 .claim-upload {
@@ -211,11 +184,6 @@ $border-color--dark: var(--dm-color-04);
     flex-shrink: 0;
     margin-right: var(--spacing-medium);
   }
-
-  [data-mode='dark'] & {
-    color: $lbry-white;
-    border-color: $border-color--dark;
-  }
 }
 
 .claim-upload__progress--outer {
@@ -223,11 +191,6 @@ $border-color--dark: var(--dm-color-04);
 }
 
 .claim-upload__progress--inner {
-  background: $lbry-teal-1;
+  background: black; //teal-1;
   padding: var(--spacing-miniscule);
-
-  [data-mode='dark'] & {
-    background: $lbry-teal-4;
-    color: $lbry-white;
-  }
 }
diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss
index 07625533e..9ce3a397e 100644
--- a/ui/scss/component/_comments.scss
+++ b/ui/scss/component/_comments.scss
@@ -5,7 +5,7 @@
 .comment {
   display: flex;
   flex-direction: column;
-  font-size: var(--font-multiplier-small);
+  font-size: var(--font-small);
   padding: var(--spacing-small) 0 var(--spacing-small);
 
   &:first-of-type {
@@ -13,11 +13,7 @@
   }
 
   &:not(:last-of-type) {
-    border-bottom: 1px solid var(--lbry-gray-1);
-
-    [data-mode='dark'] & {
-      border-color: rgba($lbry-gray-5, 0.2);
-    }
+    border-bottom: 1px solid var(--color-border);
   }
 }
 
@@ -50,5 +46,5 @@
 
 .comment__char-count {
   align-self: flex-end;
-  font-size: var(--font-label);
+  font-size: var(--font-small);
 }
diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss
index c57659e06..6725d3bab 100644
--- a/ui/scss/component/_content.scss
+++ b/ui/scss/component/_content.scss
@@ -76,11 +76,6 @@
 
   &:hover {
     cursor: pointer;
-
-    .button--view,
-    .button--play {
-      background-color: $lbry-teal-2;
-    }
   }
 
   &:-webkit-full-screen {
@@ -100,12 +95,7 @@
   background-repeat: no-repeat;
   background-size: 100%;
   margin: auto;
-
-  background-color: $lbry-white;
-  [data-mode='dark'] & {
-    background-color: $lbry-black;
-    color: $lbry-white;
-  }
+  background-color: black; //white;
 
   &:-webkit-full-screen {
     width: 100%;
@@ -124,5 +114,5 @@
 }
 
 .content__loading-text {
-  color: $lbry-white;
+  color: black; //white;
 }
diff --git a/ui/scss/component/_dat-gui.scss b/ui/scss/component/_dat-gui.scss
index 347e0525e..b52e57687 100644
--- a/ui/scss/component/_dat-gui.scss
+++ b/ui/scss/component/_dat-gui.scss
@@ -65,7 +65,7 @@
       .cr {
         &.function:hover,
         &.boolean:hover {
-          background-color: $lbry-white;
+          background-color: black; //white;
         }
       }
 
diff --git a/ui/scss/component/_expandable.scss b/ui/scss/component/_expandable.scss
index f0d41742e..df0a4b549 100644
--- a/ui/scss/component/_expandable.scss
+++ b/ui/scss/component/_expandable.scss
@@ -1,12 +1,3 @@
-.expandable {
-  margin-bottom: var(--spacing-medium);
-  padding-bottom: var(--spacing-medium);
-
-  [data-mode='dark'] & {
-    border-color: var(--dm-color-04);
-  }
-}
-
 .expandable--closed,
 .expandable--open {
   margin-bottom: var(--spacing-small);
@@ -16,22 +7,6 @@
   max-height: 10rem;
   overflow: hidden;
   position: relative;
-
-  &::after {
-    width: 100%;
-    height: 40%;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-
-    background-image: linear-gradient(to bottom, transparent 0%, mix($lbry-white, $lbry-gray-1, 70%) 90%);
-    content: '';
-    position: absolute;
-
-    [data-mode='dark'] & {
-      background-image: linear-gradient(to bottom, transparent 0%, var(--dm-color-08) 90%);
-    }
-  }
 }
 
 .expandable--open {
diff --git a/ui/scss/component/_file-properties.scss b/ui/scss/component/_file-properties.scss
index b755707ff..dbe612578 100644
--- a/ui/scss/component/_file-properties.scss
+++ b/ui/scss/component/_file-properties.scss
@@ -2,14 +2,12 @@
   display: flex;
   position: relative;
   align-items: center;
-  font-size: var(--font-label);
+  font-size: var(--font-small);
+  color: var(--color-text-help);
 
   .icon {
-    stroke: rgba($lbry-black, 0.5);
-
-    [data-mode='dark'] & {
-      stroke: rgba($lbry-white, 0.7);
-    }
+    margin-bottom: -1px;
+    stroke: var(--color-subtitle);
   }
 
   & > *:not(:last-child) {
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 4ab05b693..d5b0c27f5 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -17,16 +17,16 @@
     height: 100%;
     object-fit: contain;
   }
+
+  video {
+    cursor: pointer;
+  }
 }
 
 .file-render__viewer--document {
   @extend .file-render__viewer;
   overflow: auto;
-  background-color: $lbry-white;
-
-  [data-mode='dark'] & {
-    background-color: transparent;
-  }
+  background-color: var(--color-file-viewer-background);
 
   .markdown-preview {
     height: 100%;
@@ -73,8 +73,8 @@
   }
 
   .CodeMirror-gutters {
-    background-color: $lbry-gray-1;
-    border-right: 1px solid $lbry-gray-2;
+    background-color: black; //gray-1;
+    border-right: 1px solid black; //gray-2;
     padding-right: var(--spacing-medium);
   }
 
@@ -83,7 +83,7 @@
   }
 
   .CodeMirror-linenumber {
-    color: $lbry-gray-5;
+    color: black; //gray-5;
   }
 }
 
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index 8de0dd5f2..b24a76352 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -1,23 +1,3 @@
-@import '~@lbry/components/sass/form/_index.scss';
-
-// Reset lbry components style that turns buttons inside of forms black
-form {
-  .button--primary,
-  [type='submit'] {
-    &:not(:hover),
-    &:hover {
-      @extend .button--primary;
-    }
-  }
-
-  .button--inverse {
-    &:not(:hover),
-    &:hover {
-      @extend .button--inverse;
-    }
-  }
-}
-
 // lbry/components overrides and minor styles
 // Some items have very specific styling
 // This is because many styles inside `lbry/components/sass/form/` are very specific
@@ -31,124 +11,10 @@ input[type='number'] {
   width: 8em;
 }
 
-input,
-input[type='text'],
-input[type='number'],
-input[type='email'],
-select,
-textarea {
-  height: var(--input-height);
-  padding-bottom: 0.1em;
-
-  &::placeholder {
-    color: $lbry-gray-5;
-    opacity: 0.4;
-  }
-
-  [data-mode='dark'] & {
-    &::placeholder {
-      color: $lbry-white;
-    }
-  }
-}
-
-// @lbry/components specificityfixme
-checkbox-element input[type='checkbox']:checked + label,
-checkbox-element input[type='checkbox'] + label {
-  color: lighten($lbry-black, 20%);
-
-  [data-mode='dark'] & {
-    color: $lbry-gray-1;
-  }
-}
-
-fieldset-section {
-  margin: 0;
-
-  input,
-  select,
-  textarea {
-    border-color: lighten($lbry-black, 20%);
-    border-radius: var(--input-border-radius);
-    background-color: $lbry-white;
-    border-width: 1px;
-
-    [data-mode='dark'] & {
-      background-color: var(--dm-color-03);
-      border-color: $lbry-black;
-    }
-  }
-
-  label {
-    width: auto;
-    text-transform: none;
-    color: lighten($lbry-black, 20%);
-
-    [data-mode='dark'] & {
-      color: $lbry-gray-3;
-    }
-  }
-
-  &:not(:first-of-type) {
-    checkbox-element,
-    radio-element {
-      margin-top: var(--spacing-small);
-    }
-  }
-
-  + fieldset-section {
-    margin-top: var(--spacing-medium);
-  }
-}
-
-checkbox-element {
-  &[disabled='true'] {
-    opacity: 0.3;
-  }
-}
-
-checkbox-element,
-radio-element,
-fieldset:last-child,
-fieldset-section:last-child {
-  margin-bottom: 0;
-}
-
-checkbox-element,
-radio-element {
-  &:hover {
-    cursor: pointer !important;
-  }
-
-  label {
-    margin-bottom: 0;
-    margin-left: var(--spacing-miniscule);
-    font-size: var(--font-body);
-
-    [data-mode='dark'] & {
-      color: $lbry-gray-1;
-
-      &:hover {
-        color: $lbry-teal-4;
-      }
-    }
-  }
-}
-
-checkbox-toggle {
-  border-width: 1px;
-  border-radius: var(--input-border-radius);
-
-  &:before {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 100%;
-    transition: all 0.2s;
-  }
-}
-
 fieldset-group {
-  margin-top: var(--spacing-small);
+  + fieldset-group {
+    margin-top: var(--spacing-small);
+  }
 
   &.fieldset-group--smushed {
     justify-content: flex-start;
@@ -203,21 +69,17 @@ fieldset-group {
     fieldset-section:first-child {
       .form-field__prefix {
         white-space: nowrap;
-        padding: var(--spacing-miniscule);
-        height: var(--input-height);
-        padding-right: 0;
+        padding: 0.5rem;
+        padding-left: 0.5rem;
+        height: var(--height-input);
+        padding-right: 1rem;
         border: 1px solid;
-        border-top-left-radius: var(--input-border-radius);
-        border-bottom-left-radius: var(--input-border-radius);
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius: var(--border-radius);
         border-right: 0;
-        border-color: $lbry-black;
-        color: $lbry-gray-4;
-        background-color: $lbry-white;
-
-        [data-mode='dark'] & {
-          background-color: var(--dm-color-03);
-          border-color: var(--dm-color-02);
-        }
+        border-color: var(--color-input-border);
+        color: var(--color-input-placeholder);
+        background-color: var(--color-input-bg);
       }
     }
 
@@ -229,119 +91,23 @@ fieldset-group {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         padding-left: var(--spacing-xs);
-
-        &:focus {
-          border-image-slice: 1;
-          border-image-source: linear-gradient(to right, $lbry-black, $lbry-teal-5 5%);
-        }
-
-        [data-mode='dark'] & {
-          &:focus {
-            border-image-source: linear-gradient(to right, var(--dm-color-02), $lbry-teal-5 5%);
-          }
-        }
+        border-color: var(--color-input-border);
       }
     }
   }
 }
 
-// form buttons are black by default
-form {
-  [type='button'],
-  [type='submit'] {
-    &.button--inverse {
-      &:not(:hover) {
-        background-color: transparent;
-        border-color: $lbry-black;
-        color: $lbry-black;
-      }
-
-      &:hover {
-        background-color: $lbry-teal-4;
-      }
-    }
-  }
-}
-
-fieldset-section {
-  input-submit {
-    input {
-      &:first-child {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-right: none;
-      }
-    }
-
-    input[type='email'],
-    input[type='text'] {
-      [data-mode='dark'] & {
-        &:not(:focus) {
-          border-color: $lbry-gray-5;
-        }
-      }
-    }
-
-    .button,
-    // specificity needed because of @lbry/component rules
-    // @lbry/componentfixme
-    .button[type='submit']:not(:hover) {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-color: $lbry-black;
-      opacity: 1;
-
-      [data-mode='dark'] & {
-        border-color: $lbry-gray-5;
-        color: $lbry-white;
-      }
-    }
-  }
-
-  select {
-    max-width: 13em;
-    background-position: 95% center;
-    background-size: 1.2rem;
-
-    [data-mode='dark'] & {
-      option {
-        background-color: $lbry-gray-5;
-      }
-    }
-  }
-
-  [data-mode='dark'] & {
-    input,
-    textarea,
-    select {
-      color: $lbry-white;
-    }
-
-    textarea,
-    select {
-      border-color: $lbry-gray-5;
-    }
-  }
-}
-
 .form-field--copyable {
-  background-color: rgba($lbry-gray-1, 0.5);
-  color: $lbry-gray-5;
   padding: 0.2rem 0.75rem;
   text-overflow: ellipsis;
   user-select: text;
   cursor: default;
-
-  [data-mode='dark'] & {
-    background-color: rgba($lbry-white, 0.3);
-    color: inherit;
-  }
 }
 
 .form-field__help {
   @extend .help;
-  margin-top: var(--spacing-small);
-  margin-bottom: var(--spacing-large);
+  margin-top: var(--spacing-miniscule);
+  margin-bottom: var(--spacing-small);
 }
 
 .form-field--short {
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 1f25c6c30..fec1b8827 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -3,20 +3,12 @@
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: $lbry-white;
-  border-bottom: 1px solid $lbry-gray-1;
-  box-shadow: var(--card-box-shadow) $lbry-gray-1;
+  background-color: var(--color-header-background);
+  box-shadow: var(--card-box-shadow) var(--color-box-shadow);
   font-size: var(--font-body);
   -webkit-user-select: none;
   -webkit-app-region: drag;
 
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-05);
-    color: var(--dm-color-01);
-    border-bottom: none;
-    box-shadow: var(--card-box-shadow) $lbry-black;
-  }
-
   & > * {
     user-select: none;
   }
@@ -32,6 +24,12 @@
   padding-top: var(--mac-titlebar-height);
 }
 
+.header--noauth-web {
+  .header__navigation-item--icon {
+    margin: 0 10px;
+  }
+}
+
 .header__contents {
   max-width: var(--page-max-width);
   height: calc(var(--header-height) - 1px);
@@ -43,6 +41,7 @@
 .header__navigation {
   flex: 1;
   display: flex;
+  align-items: center;
 
   &:last-of-type {
     width: var(--side-nav-width);
@@ -54,7 +53,6 @@
 }
 
 .header__menu {
-  width: var(--side-nav-width);
   margin-left: auto;
   display: flex;
   justify-content: space-between;
@@ -65,8 +63,11 @@
   }
 }
 
-.header__menu--small {
-  width: auto;
+.header__menu--with-balance {
+  button:first-child {
+    margin-left: var(--spacing-large);
+    margin-right: var(--spacing-medium);
+  }
 }
 
 .header__navigation-arrows {
@@ -75,80 +76,29 @@
 }
 
 .header__navigation-item {
-  height: var(--header-height);
+  height: var(--height-button);
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 0;
-
-  &:hover {
-    color: $lbry-teal-5;
-
-    svg {
-      stroke: $lbry-teal-5;
-    }
-  }
-
-  &.header__navigation-item--active {
-    &::after {
-      height: 0.2em;
-      bottom: 0;
-      width: 100%;
-      background-color: $lbry-teal-5;
-      content: '';
-      position: absolute;
-
-      [data-mode='dark'] & {
-        background-color: $lbry-teal-3;
-      }
-    }
-  }
-
-  [data-mode='dark'] & {
-    &:hover {
-      color: $lbry-teal-3;
-
-      svg {
-        stroke: $lbry-teal-3;
-      }
-    }
-
-    svg {
-      stroke: var(--dm-color-01);
-    }
-  }
-}
-.header__banner-background {
-  display: flex;
-  background-color: $lbry-teal-4;
-  [data-mode='dark'] & {
-    background-color: $lbry-teal-5;
-    color: $lbry-white;
-  }
-}
-
-.header__banner-contents {
-  display: flex;
-  max-width: var(--page-max-width);
-  width: 100%;
-  margin: auto;
-  padding: 0 var(--spacing-large);
-  justify-content: space-between;
-  background-color: $lbry-teal-4;
-  color: $lbry-white;
+  border-radius: var(--border-radius);
+  color: var(--color-text);
 
   svg {
-    stroke: $lbry-white;
+    stroke: var(--color-text);
   }
 
-  [data-mode='dark'] & {
-    background-color: $lbry-teal-5;
-    color: $lbry-white;
+  &:hover {
+    color: var(--color-link-active);
+
+    svg {
+      stroke: var(--color-link-active);
+    }
   }
 }
 
 .header__navigation-item--back,
-.header__navigation-item--forward {
+.header__navigation-item--forward,
+.header__navigation-item--icon {
   width: 3rem;
 }
 
@@ -168,13 +118,6 @@
   padding: 0 var(--spacing-small);
 }
 
-.header__navigation-item--upgrade {
-  color: $lbry-teal-5;
-  svg {
-    stroke: $lbry-teal-5;
-  }
-}
-
 @media (max-width: 600px) {
   .header__navigation-item--back,
   .header__navigation-item--forward,
diff --git a/ui/scss/component/_icon.scss b/ui/scss/component/_icon.scss
index 1139c23a7..68810a844 100644
--- a/ui/scss/component/_icon.scss
+++ b/ui/scss/component/_icon.scss
@@ -1,5 +1,5 @@
 .icon__wrapper {
-  background-color: var(--color-card-actions);
+  background-color: var(--color-primary-alt);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13,17 +13,13 @@
 
   .icon {
     position: absolute;
-    stroke: $lbry-gray-5;
-  }
-
-  [data-mode='dark'] & {
-    background-color: var(--color-card-actions--dark);
+    stroke: var(--color-primary);
   }
 }
 
 .icon--help {
   margin-left: var(--spacing-small);
-  bottom: -0.3rem;
+  top: 0.2rem;
   opacity: 0.7;
   height: 1rem;
   width: 1rem;
diff --git a/ui/scss/component/_item-list.scss b/ui/scss/component/_item-list.scss
index dd2f6e73d..45ba2b5b5 100644
--- a/ui/scss/component/_item-list.scss
+++ b/ui/scss/component/_item-list.scss
@@ -1,12 +1,8 @@
 .item-list {
-  background-color: $lbry-white;
+  background-color: black; //white;
   margin-bottom: var(--spacing-large);
   padding: var(--spacing-large);
 
-  [data-mode='dark'] & {
-    background-color: rgba($lbry-white, 0.1);
-  }
-
   .card__actions {
     margin-top: var(--spacing-medium);
     margin-left: var(--spacing-small);
@@ -35,9 +31,5 @@
 
 .item-list__row:hover,
 .item-list__row--selected {
-  background-color: rgba($lbry-black, 0.1);
-
-  [data-mode='dark'] & {
-    background-color: rgba($lbry-black, 0.5);
-  }
+  background-color: black; //black; //black, 0.1);
 }
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 9b8b8748b..859b83e4c 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -1,9 +1,5 @@
 .main-wrapper {
   position: relative;
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-08);
-  }
 }
 
 .main-wrapper--mac {
@@ -37,6 +33,10 @@
 .main--file-page {
   position: relative;
 
+  .grid-area--content {
+    max-height: var(--inline-player-max-height);
+  }
+
   .grid-area--info {
     margin-right: var(--spacing-large);
     width: 52.5%;
@@ -87,20 +87,3 @@
 .main--full-width {
   width: 100%;
 }
-
-.main__status {
-  @extend .card__subtitle;
-  display: flex;
-  justify-content: space-between;
-  background-color: $lbry-teal-4;
-  color: $lbry-white;
-
-  svg {
-    stroke: $lbry-white;
-  }
-
-  [data-mode='dark'] & {
-    background-color: $lbry-teal-5;
-    color: $lbry-white;
-  }
-}
diff --git a/ui/scss/component/_markdown-editor.scss b/ui/scss/component/_markdown-editor.scss
index 93cc08bb6..c7e729c58 100644
--- a/ui/scss/component/_markdown-editor.scss
+++ b/ui/scss/component/_markdown-editor.scss
@@ -1,15 +1,15 @@
 .CodeMirror {
   border-top: none;
-  border-right: 1px solid $lbry-gray-1;
-  border-bottom: 1px solid $lbry-gray-1;
-  border-left: 1px solid $lbry-gray-1;
-  border-bottom-left-radius: var(--input-border-radius);
-  border-bottom-right-radius: var(--input-border-radius);
-  background: $lbry-white;
-  color: $lbry-black;
+  border-right: 1px solid var(--color-input-border);
+  border-bottom: 1px solid var(--color-input-border);
+  border-left: 1px solid var(--color-input-border);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+  background: var(--color-input-bg);
+  color: var(--color-input);
 
   .CodeMirror-cursor {
-    border-color: $lbry-teal-3;
+    border-color: black; //teal-3;
   }
 
   .CodeMirror-placeholder {
@@ -18,40 +18,27 @@
 
   .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
     text-decoration: underline;
-    text-decoration-color: $lbry-red-3;
+    text-decoration-color: black; //red-3;
     text-decoration-style: dotted;
   }
-
-  [data-mode='dark'] & {
-    border-left: 1px solid rgba($lbry-white, 0.2);
-    border-right: 1px solid rgba($lbry-white, 0.2);
-    border-bottom: 1px solid rgba($lbry-white, 0.2);
-    background-color: rgba($lbry-white, 0.1);
-    color: $lbry-white;
-
-    .CodeMirror-selectedtext {
-      color: $lbry-black;
-    }
-
-    .editor-preview.editor-preview-active {
-      background-color: $lbry-black;
-      color: $lbry-white;
-    }
-  }
 }
 
 // Fix selection
 .CodeMirror-line::selection,
 .CodeMirror-line > span::selection,
 .CodeMirror-line > span > span::selection {
-  background-color: $lbry-teal-1;
+  background-color: black; //teal-1;
 }
 
 .editor-toolbar {
-  background-color: $lbry-gray-1;
+  background-color: var(--color-header-background);
   border: none;
-  border-top-left-radius: var(--input-border-radius);
-  border-top-right-radius: var(--input-border-radius);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  border-right: 1px solid var(--color-input-border);
+  border-top: 1px solid var(--color-input-border);
+  border-left: 1px solid var(--color-input-border);
+
   opacity: 1; // ?
 
   &:hover {
@@ -59,13 +46,13 @@
   }
 
   &.disabled-for-preview a:not(.no-disable) {
-    background-color: $lbry-gray-1;
+    background-color: black; //gray-1;
     border-color: transparent;
     opacity: 0.3;
   }
 
   &.fullscreen {
-    background-color: $lbry-gray-1;
+    background-color: black; //gray-1;
 
     &::before,
     &::after {
@@ -74,61 +61,14 @@
   }
 
   button {
-    color: $lbry-black !important;
+    color: var(--color-header-link);
     border-color: transparent;
     transition: opacity 0.3s ease;
-
-    &:not(.active),
-    &:not(:hover) {
-      opacity: 0.6;
-    }
-
-    &.active,
-    &:hover {
-      opacity: 1;
-    }
   }
 
   i.separator {
     border: none;
   }
-
-  [data-mode='dark'] & {
-    background-color: rgba($lbry-white, 0.2);
-
-    button {
-      color: $lbry-white !important; // We need to use !important to override the CodeMirror styles
-
-      &.active {
-        background-color: rgba($lbry-black, 0.4);
-      }
-
-      &:hover {
-        color: $lbry-black !important;
-      }
-    }
-
-    &.disabled-for-preview {
-      button:not(.no-disable) {
-        background-color: transparent;
-      }
-
-      // The markdown preview button is highlighted during preview when the other buttons are disabled
-      button.no-disable {
-        background-color: rgba($lbry-white, 0.3);
-      }
-    }
-  }
-}
-
-.editor-statusbar {
-  color: rgba($lbry-black, 0.5);
-  font-size: var(--font-label);
-  // padding: var(--spacing-medium) 0; // overriding styles from elsewhere
-
-  [data-mode='dark'] & {
-    color: inherit;
-  }
 }
 
 .form-field--SimpleMDE {
@@ -143,7 +83,7 @@
       border: transparent;
 
       &:hover {
-        background-color: $lbry-white !important;
+        color: var(--color-header-link-active);
       }
     }
   }
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index 6eb577e1d..98f5f07fd 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@@ -18,10 +18,6 @@
 
   // Paragraphs
   p {
-    font-size: 1.15rem;
-    margin-bottom: var(--spacing-medium);
-    // word-break: break-all;
-
     svg {
       width: 1rem;
       height: 1rem;
@@ -82,18 +78,13 @@
 
   // Inline code
   code {
-    background-color: $lbry-gray-1;
-    color: $lbry-gray-5;
+    background-color: black; //gray-1;
+    color: black; //gray-5;
     display: inline-block;
     margin: var(--spacing-miniscule);
     border-radius: 0.2rem;
-    font-size: var(--font-label);
+    font-size: var(--font-small);
     padding: calc(var(--spacing-miniscule) - 4px) var(--spacing-miniscule);
-
-    [data-mode='dark'] & {
-      color: darken($lbry-white, 10%);
-      background-color: rgba($lbry-gray-4, 0.25);
-    }
   }
 
   a,
@@ -113,8 +104,8 @@
   .preview-link {
     padding: 0;
     margin: 1rem 0;
-    background-color: rgba($lbry-teal-5, 0.1);
-    border-left: 0.5rem solid $lbry-teal-5;
+    background-color: var(--color-primary-alt);
+    border-left: 0.5rem solid var(--color-primary);
     display: block;
     align-items: center;
     word-break: break-all;
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
index d523a855b..543a667a5 100644
--- a/ui/scss/component/_media.scss
+++ b/ui/scss/component/_media.scss
@@ -7,114 +7,79 @@
   object-fit: cover;
 
   &:not(.media__thumb--nsfw) {
-    background-color: $lbry-gray-2;
+    background-color: var(--color-placeholder-background);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-
-    [data-mode='dark'] & {
-      background-color: var(--dm-color-04);
-    }
   }
 }
 
 .media__thumb--nsfw {
-  background-color: $lbry-grape-5;
-  background-image: linear-gradient(to bottom right, $lbry-teal-3, $lbry-grape-5 100%);
+  background-color: black; //grape-5;
+  // background-image: linear-gradient(to bottom right, black; //teal-3, black; //grape-5 100%);
 }
 
 //  M E D I A
 //  T I T L E
 
 .media__title {
+  margin-bottom: var(--spacing-medium);
+}
+
+.media__title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: var(--font-weight-bold);
   white-space: normal;
   font-size: var(--font-title);
+  display: inline;
 }
 
-.media__title--large {
-  overflow: hidden;
-  width: 100%;
-  text-overflow: ellipsis;
-  margin-right: var(--spacing-small);
+.media__title-price {
+  float: right;
+  margin-left: var(--spacing-small);
+  margin-top: 5px;
 }
 
 .media__uri {
-  min-width: 0;
-  margin-right: var(--spacing-small);
-  max-width: 100%;
+  position: absolute;
+  transform: translateY(-130%);
+  font-size: var(--font-xsmall);
+  color: var(--color-text-subtitle);
+}
+
+.media__uri--inline {
+  @extend .media__uri;
+  position: relative;
+  transform: none;
 }
 
 .media__uri--large {
   margin-bottom: var(--spacing-medium);
-  font-size: var(--font-multiplier-medium);
 }
 
 .media__insufficient-credits {
   padding: 10px;
 }
 
-//  M E D I A
-//  A C T I O N S
-
-.media__actions {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: var(--spacing-small);
-  margin-bottom: var(--spacing-small);
-
-  &:first-child {
-    margin-top: var(--spacing-miniscule);
-  }
-}
-
-.media__actions--between {
-  justify-content: space-between;
-
-  &:last-of-type:not(:only-of-type) {
-    margin: 0;
-  }
-}
-
-.media__actions--nowrap {
-  flex-wrap: nowrap;
-}
-
-.media__action-group {
-  > *:not(:last-child) {
-    margin-right: var(--spacing-medium);
-  }
-}
-
-.media__action-group--large {
-  display: flex;
-  font-size: var(--font-multiplier-medium);
-  margin-bottom: var(--spacing-large);
-  line-height: 1;
-
-  > * {
-    &:not(:last-child) {
-      margin-right: var(--spacing-large);
-    }
-  }
-
-  &:not(:last-child) {
-    margin-right: var(--spacing-large);
-  }
-}
-
 //  M E D I A
 //  S U B T I T L E
 
 .media__subtitle {
   align-self: flex-start;
-  color: rgba($lbry-black, 0.6);
+  color: var(--color-text-subtitle);
 
-  [data-mode='dark'] & {
-    color: rgba($lbry-white, 0.8);
+  svg {
+    stroke: var(--color-text-subtitle);
   }
 }
 
+.media__subtitle--between {
+  @extend .media__subtitle;
+  display: flex;
+  justify-content: space-between;
+}
+
 .media__subtitle--large {
   display: block;
 
@@ -128,39 +93,21 @@
   margin: var(--spacing-small) 0;
 }
 
-//  M E D I A
-//  I N F O
-
-.media__info {
-  word-wrap: break-word;
-
-  [data-mode='dark'] & {
-    border-color: rgba($lbry-gray-5, 0.2);
-  }
-}
-
-.media__info--large {
-  margin-top: var(--spacing-medium);
-  font-size: var(--font-body);
-
-  [data-mode='dark'] & {
-    border-color: rgba($lbry-gray-5, 0.2);
-  }
-}
-
 .media__info-text {
   word-break: break-word;
 
   &:not(:last-of-type) {
-    margin-bottom: var(--spacing-large);
+    margin-bottom: var(--spacing-medium);
   }
 
-  &.media__info-text--small {
+  &.media__info-text--constrained {
     max-width: 50rem;
   }
 }
 
-.media__info-title {
-  font-weight: var(--font-weight-base);
-  margin-bottom: var(--spacing-small);
+.media__actions {
+  @extend .section__actions;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0;
 }
diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss
index a7f3961ed..0846de0fb 100644
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@@ -3,32 +3,40 @@
   left: 0;
   bottom: 0;
   right: 0;
-
   align-items: center;
-  background-color: rgba($lbry-black, 0.7);
+  background-color: var(--color-background-overlay);
   display: flex;
   justify-content: center;
   position: fixed;
   z-index: 9999;
-
-  [data-mode='dark'] & {
-    background-color: rgba($lbry-black, 0.7);
-  }
 }
 
 .modal {
-  background-color: $lbry-white;
+  @extend .card;
+  background-color: var(--color-card-background);
   line-height: 1.55;
   max-width: var(--modal-width);
   overflow: auto;
   padding: var(--spacing-large);
   word-break: break-word;
 
+  &:focus {
+    box-shadow: none;
+  }
+
   @media (min-width: 501px) {
     min-width: 500px;
   }
 }
 
+.modal--card-internal {
+  padding: 0;
+
+  .card {
+    margin: 0;
+  }
+}
+
 .error-modal__content {
   display: flex;
   padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
@@ -46,9 +54,9 @@
   margin-top: var(--spacing-small);
   padding: var(--spacing-small);
 
-  background-color: $lbry-red-1;
-  border-left: 2px solid $lbry-red-5;
-  color: $lbry-red-5;
+  background-color: black; //red-1;
+  border-left: 2px solid black; //red-5;
+  color: black; //red-5;
   list-style: none;
   overflow-y: scroll;
   white-space: pre-wrap;
diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss
index a2849d632..6b125cb1d 100644
--- a/ui/scss/component/_navigation.scss
+++ b/ui/scss/component/_navigation.scss
@@ -11,11 +11,10 @@
   @extend .navigation;
   padding: 2rem 1.5rem;
   border-radius: var(--card-radius);
-  font-size: var(--font-title);
   font-weight: var(--font-weight-bold);
-  color: $lbry-white;
+  color: #fff;
   position: relative;
-  background-color: $lbry-black;
+  background-color: black; //black;
 
   h2 {
     font-size: 2rem;
@@ -23,7 +22,7 @@
   }
 
   p {
-    font-size: 1.5rem;
+    font-size: 1.2rem;
   }
 }
 
@@ -36,7 +35,7 @@
 
 .navigation-links--small {
   @extend .navigation-links;
-  font-size: var(--font-multiplier-small);
+  font-size: var(--font-small);
 }
 
 .navigation-links__inline {
@@ -55,41 +54,22 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: lighten($lbry-black, 20%);
+  color: var(--color-navigation-link);
   margin-top: var(--spacing-small);
 
   .icon {
-    stroke: $lbry-gray-5;
-  }
-
-  &:hover {
-    color: $lbry-teal-4;
-    .icon {
-      color: $lbry-teal-4;
-    }
+    stroke: var(--color-link-icon);
   }
 
+  &:hover,
   &.navigation-link--active {
-    color: $lbry-teal-5;
+    color: var(--color-link-active);
     .icon {
-      color: $lbry-teal-4;
+      stroke: var(--color-link-active);
     }
   }
 
-  [data-mode='dark'] & {
-    color: darken($lbry-white, 30%);
-
-    svg {
-      stroke: darken($lbry-white, 30%);
-    }
-
-    &:hover,
-    &.navigation-link--active {
-      color: $lbry-teal-4;
-
-      .icon {
-        stroke: $lbry-teal-4;
-      }
-    }
+  &:focus {
+    box-shadow: none;
   }
 }
diff --git a/ui/scss/component/_notice.scss b/ui/scss/component/_notice.scss
new file mode 100644
index 000000000..06e123c1b
--- /dev/null
+++ b/ui/scss/component/_notice.scss
@@ -0,0 +1,18 @@
+.notice {
+  border: 1px solid;
+  border-radius: 5px;
+  padding: var(--spacing-medium) var(--spacing-large);
+  text-shadow: 0 1px 0 black; //black; //white, 0.5);
+
+  &:not(.notice--error) {
+    background-color: black; //green-1;
+    border-color: black; //green-2;
+    color: black; //green-3;
+  }
+}
+
+.notice--error {
+  background-color: black; //red-1;
+  border-color: black; //red-2;
+  color: black; //red-3;
+}
diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss
index f1de6c5b6..63207f536 100644
--- a/ui/scss/component/_pagination.scss
+++ b/ui/scss/component/_pagination.scss
@@ -16,11 +16,15 @@
   text-align: center;
 
   &:not(.pagination__item--selected):hover {
-    color: $lbry-black;
+    background-color: var(--color-button-secondary-bg);
   }
 
   &:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover {
-    background-color: $lbry-gray-1;
+    color: var(--color-button-secondary-text);
+
+    &:hover {
+      background-color: var(--color-button-secondary-bg-hover);
+    }
   }
 
   &:not(.pagination__item--previous):not(.pagination__item--next) {
@@ -45,13 +49,11 @@
 
 .pagination__item--previous,
 .pagination__item--next {
-  font-size: var(--font-multiplier-xlarge);
   line-height: 1;
   position: relative;
   padding-top: var(--spacing-small);
 }
 
 .pagination__item--selected {
-  background-color: $lbry-teal-5;
-  color: $lbry-white;
+  background-color: var(--color-button-secondary-bg);
 }
diff --git a/ui/scss/component/_search.scss b/ui/scss/component/_search.scss
index d0ffd92cf..501349463 100644
--- a/ui/scss/component/_search.scss
+++ b/ui/scss/component/_search.scss
@@ -2,25 +2,18 @@
   margin-bottom: var(--spacing-large);
 
   .placeholder {
-    background-color: rgba($lbry-white, 0.1);
+    background-color: var(--color-placeholder-background);
   }
 }
 
 .search__options {
   margin-top: var(--spacing-large);
 
-  legend {
-    &.search__legend--1 {
-      background-color: $lbry-teal-4;
-    }
-
-    &.search__legend--2 {
-      background-color: $lbry-cyan-4;
-    }
-
-    &.search__legend--3 {
-      background-color: $lbry-pink-4;
-    }
+  .search__legend {
+    background-color: var(--color-secondary-alt);
+    color: var(--color-secondary);
+    margin-bottom: var(--spacing-small);
+    padding: var(--spacing-miniscule);
   }
 
   fieldset:not(:first-child) {
diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss
index ae06fc0d0..34eaf7326 100644
--- a/ui/scss/component/_snack-bar.scss
+++ b/ui/scss/component/_snack-bar.scss
@@ -1,9 +1,9 @@
 .snack-bar {
   bottom: 2rem;
   left: 2rem;
-  background-color: $lbry-teal-4;
+  background-color: var(--color-snack-bg);
+  color: var(--color-snack);
   border-radius: 0.5rem;
-  color: $lbry-white;
   padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);
   position: fixed;
   transition: all var(--transition-duration) var(--transition-type);
@@ -14,7 +14,7 @@
   @extend .snack-bar;
   left: auto;
   right: 2rem;
-  background-color: $lbry-grape-4;
+  background-color: var(--color-snack-bg-upgrade);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -22,7 +22,7 @@
 }
 
 .snack-bar--error {
-  background-color: $lbry-red-5;
+  background-color: var(--color-snack-bg-error);
 }
 
 .snack-bar__action {
@@ -43,7 +43,6 @@
 
   div {
     &:nth-of-type(1) {
-      font-size: var(--font-multiplier-large);
       margin-right: var(--spacing-medium);
     }
   }
diff --git a/ui/scss/component/_spinner.scss b/ui/scss/component/_spinner.scss
index d9e3bf3b8..2e136653a 100644
--- a/ui/scss/component/_spinner.scss
+++ b/ui/scss/component/_spinner.scss
@@ -34,17 +34,13 @@
 
 .spinner--dark {
   .rect {
-    background-color: $lbry-black;
+    background-color: var(--color-spinner-dark);
   }
 }
 
 .spinner--light {
   .rect {
-    background-color: $lbry-white;
-
-    [data-mode='dark'] & {
-      background-color: var(--dm-color-01);
-    }
+    background-color: var(--color-spinner-light);
   }
 }
 
@@ -61,6 +57,6 @@
   margin-top: var(--spacing-large);
 
   .rect {
-    background-color: $lbry-white;
+    background-color: black; //white;
   }
 }
diff --git a/ui/scss/component/_splash.scss b/ui/scss/component/_splash.scss
index 3dd2916e1..a25bc1678 100644
--- a/ui/scss/component/_splash.scss
+++ b/ui/scss/component/_splash.scss
@@ -11,13 +11,13 @@
 }
 
 .splash__button {
-  border-bottom: 1px solid $lbry-white;
-  color: $lbry-white;
+  border-bottom: 1px solid black; //white;
+  color: black; //white;
   transition: none;
 
   &:hover {
-    border-bottom: 1px solid $lbry-blue-1;
-    color: $lbry-blue-1;
+    border-bottom: 1px solid black; //blue-1;
+    color: black; //blue-1;
   }
 }
 
@@ -25,7 +25,7 @@
   position: absolute;
   line-height: 1;
   font-weight: var(--font-weight-light);
-  color: $lbry-white;
+  color: #fff;
   margin-top: 2rem;
 }
 
@@ -34,25 +34,24 @@
   font-size: 40px;
   line-height: 1;
   font-weight: var(--font-weight-bold);
-  color: $lbry-white;
+  color: #fff;
   margin-top: -1rem;
 }
 
 .splash__animation-toggle {
   position: fixed;
-  bottom: var(--spacing-large);
+  top: var(--spacing-large);
   right: var(--spacing-large);
   padding: var(--spacing-medium);
-  border-color: $lbry-white;
-  color: $lbry-white;
-  background-color: rgba($lbry-white, 0.2);
-  font-size: var(--font-label);
+  border-color: #fff;
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.205);
+  font-size: var(--font-small);
 
   &:hover {
-    color: $lbry-white;
-    background-color: rgba($lbry-white, 0.5);
+    background-color: rgba(255, 255, 255, 0.5);
     .icon {
-      stroke: $lbry-white;
+      stroke: #fff;
     }
   }
 }
@@ -60,7 +59,7 @@
 .splash__error {
   position: absolute;
   margin-top: 20rem;
-  box-shadow: var(--card-box-shadow) $lbry-gray-5;
+  background-color: #fff;
 }
 
 .doodle {
diff --git a/ui/scss/component/_syntax-highlighter.scss b/ui/scss/component/_syntax-highlighter.scss
index 65bb8b608..76750c355 100644
--- a/ui/scss/component/_syntax-highlighter.scss
+++ b/ui/scss/component/_syntax-highlighter.scss
@@ -42,7 +42,7 @@
 
     // addon: selection/active-line.js
     .CodeMirror-activeline-background {
-      background-color: rgba(153, 187, 255, 0.04);
+      background-color: black; //153, 187, 255, 0.04);
     }
 
     // basic syntax
diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss
index 651b78217..56dafe195 100644
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@@ -1,39 +1,22 @@
-@import '~@lbry/components/sass/table/_index.scss';
-
-table,
-.table {
-  background-color: transparent;
-  margin: var(--spacing-small) 0;
-
-  [data-mode='dark'] & {
-    th {
-      border-bottom: 2px solid $lbry-white;
-    }
-  }
-
-  th,
-  td {
-    padding-left: var(--spacing-large);
-  }
-}
-
-td {
-  overflow: hidden;
-}
-
 .table__header {
-  margin: var(--spacing-large);
-}
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border);
 
-.table__item--actionable {
-  span {
-    vertical-align: top;
+  .section__subtitle {
+    margin-bottom: 0;
   }
 }
 
-.table__item-label {
-  font-size: var(--font-multiplier-small);
-  font-weight: var(--font-weight-light);
+.table__header-text {
+  width: 100%;
+  margin: var(--spacing-medium) var(--spacing-large);
+}
+
+.table__header-text--between {
+  @extend .table__header-text;
+  display: flex;
+  justify-content: space-between;
 }
 
 .table--help {
@@ -47,8 +30,6 @@ td {
 }
 
 .table--transactions {
-  table-layout: fixed;
-
   td:nth-of-type(3) {
     // Only add ellipsis to the links in the table
     // We still want to show the entire message if a TX includes one
@@ -85,3 +66,13 @@ td {
     margin-left: var(--spacing-small);
   }
 }
+
+.table--file-details {
+  td:nth-of-type(1) {
+    width: 30%;
+  }
+
+  td:nth-of-type(2) {
+    width: 70%;
+  }
+}
diff --git a/ui/scss/component/_tags.scss b/ui/scss/component/_tags.scss
index 9f4633a55..43b58d7fd 100644
--- a/ui/scss/component/_tags.scss
+++ b/ui/scss/component/_tags.scss
@@ -1,5 +1,3 @@
-$main: $lbry-teal-5;
-
 .tags {
   @extend .ul--no-style;
   display: flex;
@@ -8,13 +6,14 @@ $main: $lbry-teal-5;
 
   .tag {
     margin-left: 0;
-    margin-top: var(--spacing-small);
+    margin-bottom: var(--spacing-small);
     margin-right: var(--spacing-small);
   }
 }
 
 .tags--remove {
   @extend .tags;
+  margin-bottom: var(--spacing-medium);
 
   .tag {
     margin-top: 0;
@@ -27,6 +26,11 @@ $main: $lbry-teal-5;
   flex-direction: column;
   align-items: flex-start;
   margin: 0;
+  margin-top: var(--spacing-small);
+
+  li:last-child .tag {
+    margin-bottom: 0;
+  }
 }
 
 .tags--selected {
@@ -35,80 +39,29 @@ $main: $lbry-teal-5;
 }
 
 .tags__input-wrapper {
-  display: flex;
-
   // Nested style needed for more specificity
   .tag__input {
     @extend .tag--remove;
-    height: auto;
-    padding: calc(var(--spacing-miniscule) - 1px) var(--spacing-small);
-    background-color: mix($lbry-teal-1, $lbry-white, 10%);
-    border: 1px dashed;
-    border-color: lighten($lbry-teal-5, 10%);
-    margin-top: -2px; // To handle the border height
-
-    [data-mode='dark'] & {
-      background-color: var(--dm-color-03);
-      border-color: $lbry-gray-4;
-    }
+    height: var(--tag-height);
+    padding: calc(var(--spacing-miniscule) + 1px) var(--spacing-small);
+    background-color: var(--color-input-bg);
   }
 }
 
 .tag {
   @extend .badge;
   @extend .badge--tag;
-  user-select: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-transform: lowercase;
-  max-width: 10rem;
-  min-width: 0;
-
-  &:hover {
-    background-color: $lbry-teal-4;
-    color: $lbry-white;
-    svg {
-      stroke: $lbry-white;
-    }
-  }
-
-  &:active {
-    background-color: $main;
-  }
 }
 
 .tag--remove {
   max-width: 20rem;
-  font-size: var(--font-body);
 }
 
-.tag--add {
-  background-color: $lbry-teal-5;
-  color: $lbry-white;
-  .icon {
-    stroke: $lbry-white;
-  }
-
-  &.tag--mature {
-    @extend .badge--mature;
-  }
+.tag--large {
+  height: var(--height-input);
+  padding: 0 var(--spacing-s);
 }
 
 .tag--mature {
-  @extend .badge--mature;
-  // Lighten the color a little so it doesn't stand out as much on claim previews
-}
-
-.tag__action-label {
-  margin-left: 0.5rem;
-  padding-left: 0.5rem;
-  padding-top: 0.7rem;
-
-  [data-mode='dark'] & {
-    border-color: rgba($lbry-white, 0.1);
-  }
+  @extend .badge--tag-mature;
 }
diff --git a/ui/scss/component/_time.scss b/ui/scss/component/_time.scss
index e1bea7726..085bd9d08 100644
--- a/ui/scss/component/_time.scss
+++ b/ui/scss/component/_time.scss
@@ -1,7 +1,7 @@
 // All CSS for date & time ui
 
 .time {
-  color: $lbry-gray-5;
+  color: black; //gray-5;
 }
 
 .time--ago {
diff --git a/ui/scss/component/_tooltip.scss b/ui/scss/component/_tooltip.scss
deleted file mode 100644
index 1d8972b00..000000000
--- a/ui/scss/component/_tooltip.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-[data-reach-tooltip] {
-  [data-mode='dark'] & {
-    color: var(--dm-color-01);
-    background-color: $lbry-black;
-    border-color: $border-color--dark;
-  }
-}
diff --git a/ui/scss/component/_wunderbar.scss b/ui/scss/component/_wunderbar.scss
index 80975d9de..e9533973b 100644
--- a/ui/scss/component/_wunderbar.scss
+++ b/ui/scss/component/_wunderbar.scss
@@ -6,8 +6,7 @@
   align-items: center;
   position: relative;
   z-index: 1;
-  margin-right: var(--spacing-main-padding);
-  font-size: var(--font-label);
+  font-size: var(--font-small);
 
   @media (max-width: 600px) {
     margin-right: 0;
@@ -19,11 +18,7 @@
     height: 100%;
     position: absolute;
     z-index: 1;
-    stroke: $lbry-gray-5;
-
-    [data-mode='dark'] & {
-      stroke: $lbry-gray-3;
-    }
+    stroke: var(--color-input-placeholder);
   }
 }
 
@@ -31,7 +26,7 @@
   @extend .wunderbar;
   flex: 0;
   margin-right: 0;
-  color: $lbry-black;
+  color: black; //black;
 
   fieldset-section {
     width: 15rem;
@@ -39,13 +34,8 @@
 }
 
 .wunderbar__active-suggestion {
-  background-color: lighten($lbry-blue-1, 15%);
-  color: $lbry-black;
-
-  [data-mode='dark'] & {
-    background-color: $lbry-blue-4;
-    color: inherit;
-  }
+  color: var(--color-search-suggestion);
+  background-color: var(--color-search-suggestion-background);
 }
 
 .wunderbar__input {
@@ -55,44 +45,25 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  height: var(--input-height);
-  border-radius: var(--input-height);
-  background-color: $lbry-gray-1;
+  height: var(--height-input);
+  border-radius: var(--height-input);
+  background-color: var(--color-input-bg);
+  color: var(--color-input);
   border: none;
   padding-right: var(--spacing-small);
-
   padding-left: 2.5rem;
   transition: all 0.2s;
 
   &:focus {
-    border-radius: var(--input-border-radius);
-  }
-
-  &::placeholder {
-    color: $lbry-black;
-    opacity: 0.9;
-  }
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-03);
-    color: $lbry-white;
-
-    &::placeholder {
-      color: var(--dm-color-01);
-    }
+    border-radius: var(--border-radius);
   }
 }
 
 .wunderbar__menu {
-  background-color: $lbry-white;
-  box-shadow: 0 1px 5px rgba($lbry-black, 0.15);
   min-width: 100%;
   overflow: hidden;
-
-  [data-mode='dark'] & {
-    background-color: $lbry-gray-5;
-    color: $lbry-white;
-  }
+  background-color: var(--color-input-bg);
+  margin-top: -4px;
 }
 
 .wunderbar__suggestion {
diff --git a/ui/scss/component/menu-button.scss b/ui/scss/component/menu-button.scss
index 06fe51bcf..f42ec84f9 100644
--- a/ui/scss/component/menu-button.scss
+++ b/ui/scss/component/menu-button.scss
@@ -16,15 +16,8 @@
   display: block;
   white-space: nowrap;
   outline: none;
-  background-color: $lbry-white;
-  border: 1px solid $lbry-gray-1;
+  background-color: var(--color-menu-background);
   border-top: none;
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-05);
-    color: $lbry-white;
-    border-color: var(--dm-color-03);
-  }
 }
 
 [data-reach-menu-item] {
@@ -38,43 +31,26 @@
   color: inherit;
   font: inherit;
   text-decoration: initial;
+
+  .icon {
+    stroke: var(--color-menu-icon);
+  }
 }
 
 [data-reach-menu-item][data-selected] {
-  background: lighten($lbry-teal-5, 55%);
-  color: darken($lbry-teal-5, 15%);
-  outline: none;
+  background-color: var(--color-menu-background--active);
+  box-shadow: none;
 
-  &:active {
-    background-color: $lbry-teal-4;
-    color: $lbry-white;
-    .icon {
-      stroke: $lbry-white;
-    }
-  }
-
-  [data-mode='dark'] & {
-    background-color: $lbry-teal-5;
-    color: $lbry-white;
-
-    &:hover,
-    &:focus {
-      .icon {
-        stroke: $lbry-white;
-      }
-    }
+  .icon {
+    stroke: var(--color-menu-icon-active);
   }
 }
 
 .menu__list--header {
-  margin-top: -1px;
+  margin-top: 19px;
   margin-left: calc(var(--spacing-medium) * -1);
-  box-shadow: var(--card-box-shadow--attached) $lbry-gray-1;
+  box-shadow: var(--card-box-shadow--attached) var(--color-box-shadow);
   animation: menu-animate-in var(--animation-duration) var(--animation-style);
-
-  [data-mode='dark'] & {
-    box-shadow: var(--card-box-shadow) $lbry-black;
-  }
 }
 
 .menu__link {
@@ -84,28 +60,10 @@
   padding-right: var(--spacing-large);
 }
 
-.menu__title,
-.menu__link {
-  color: lighten($lbry-black, 20%);
-  color: $lbry-gray-5;
-
-  .icon {
-    stroke: $lbry-gray-5;
-  }
-
-  [data-mode='dark'] & {
-    color: $lbry-gray-2;
-
-    .icon {
-      stroke: $lbry-gray-2;
-    }
-  }
-}
-
 .menu__link {
   .icon {
+    stroke: var(--color-menu-icon);
     margin-right: var(--spacing-small);
-    stroke: $lbry-gray-4;
   }
 }
 
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 0af266355..08d224cfd 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -38,7 +38,7 @@
 
 .section__title {
   text-align: left;
-  font-size: var(--font-section-title);
+  font-size: var(--font-title);
   font-weight: var(--font-weight-light);
 }
 
@@ -56,44 +56,33 @@
   font-size: var(--font-heading);
 }
 
-.section__subtitle {
-  font-size: var(--font-body);
-  color: $lbry-gray-5;
+.section__subtitle--status {
+  @extend .section__subtitle;
+  padding: var(--spacing-small);
+  background-color: var(--color-text-warning);
 }
 
 .section__divider {
-  padding: var(--spacing-large) 0;
   display: flex;
   flex-direction: column;
 
+  hr {
+    margin: var(--spacing-large) 0;
+  }
+
   p {
-    color: $lbry-gray-4;
+    color: var(--color-subtitle);
     text-align: center;
-    font-size: var(--font-title);
+    font-size: var(--font-large);
     font-weight: var(--font-weight-base);
     background-color: var(--color-background);
-    transform: translateY(-50%);
+    transform: translateY(-150%);
     padding: 0 var(--spacing-large);
     display: inline-block;
     margin: auto;
   }
 }
 
-.section__actions {
-  display: flex;
-  align-items: center;
-  margin-top: var(--spacing-medium);
-  font-size: var(--font-body);
-
-  &:only-child {
-    margin-top: 0;
-  }
-
-  > *:not(:last-child) {
-    margin-right: var(--spacing-medium);
-  }
-}
-
 .section__body {
-  margin-top: var(--spacing-large);
+  margin-top: var(--spacing-medium);
 }
diff --git a/ui/scss/component/tabs.scss b/ui/scss/component/tabs.scss
index bc861f1b0..cdaf9a3a0 100644
--- a/ui/scss/component/tabs.scss
+++ b/ui/scss/component/tabs.scss
@@ -5,32 +5,28 @@
 .tabs__list {
   display: flex;
   align-items: center;
-  background-color: $lbry-black;
-  color: $lbry-white;
+  background-color: var(--color-tabs-background);
   padding: var(--spacing-medium) var(--spacing-main-padding);
 
   & > *:not(.tab) {
     // If there is anything after the tabs, render it on the opposite side of the page
     margin-left: auto;
   }
-
-  [data-mode='dark'] & {
-    background-color: darken($lbry-black, 5%);
-  }
 }
 
 .tabs__list--channel-page {
   padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
   padding-right: var(--spacing-medium);
+  height: 4rem;
 }
 
 .tab {
   @extend .button--link;
   margin-right: var(--spacing-large);
   padding: 5px 0;
-  font-size: var(--font-multiplier-large);
-  color: $lbry-white;
+  color: var(--color-tab-text);
   position: relative;
+  font-size: var(--font-body);
 
   &::after {
     position: absolute;
@@ -41,7 +37,11 @@
   }
 
   &[data-selected] {
-    color: $lbry-teal-3;
+    color: var(--color-link-active);
+  }
+
+  &:focus {
+    box-shadow: none;
   }
 }
 
@@ -59,5 +59,5 @@
 .tab:hover::after,
 .tab__divider {
   height: var(--tab-indicator-size);
-  background-color: $lbry-teal-3;
+  background-color: var(--color-tab-divider);
 }
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index fece0a216..ea8748424 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -2,35 +2,18 @@
 // component specific styling should go in the component scss file
 
 *::selection {
-  background-color: $lbry-teal-3;
-  color: $lbry-white;
+  background-color: var(--color-text-selection-bg);
+  color: var(--color-text-selection);
 }
 
 html {
   @include font-sans;
-
-  font-size: 14px;
   height: 100%;
   min-height: 100%;
   overflow-x: hidden;
 
-  &[data-mode='dark'] {
-    background-color: var(--dm-color-08);
-  }
-}
-
-body {
-  color: $lbry-black;
-  cursor: default;
-  font-size: 1rem;
-  font-weight: var(--font-weight-base);
-  line-height: 1.5;
+  color: var(--color-text);
   background-color: var(--color-background);
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-08);
-    color: var(--dm-color-01);
-  }
 }
 
 h1,
@@ -91,10 +74,10 @@ dt,
 dd {
   padding: var(--spacing-medium) var(--spacing-small);
 
-  border-top: 1px solid $lbry-gray-1;
+  border-top: 1px solid var(--color-border);
 
   &:last-of-type {
-    border-bottom: 1px solid $lbry-gray-1;
+    border-bottom: 1px solid var(--color-border);
   }
 }
 
@@ -106,25 +89,20 @@ label {
 blockquote {
   margin-bottom: 1rem;
   padding: 0.8rem;
-
-  background-color: rgba($lbry-cyan-1, 0.1);
-  border-left: 0.5rem solid $lbry-cyan-5;
+  background-color: var(--color-blockquote-bg);
+  border-left: 0.3rem solid var(--color-blockquote);
 }
 
 code {
   @include font-mono;
-  background-color: $lbry-gray-1;
+  background-color: black; //gray-1;
   font-size: 1.5rem;
 }
 
 hr {
   width: 100%;
   height: 1px;
-  background-color: $lbry-gray-1;
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-04);
-  }
+  background-color: var(--color-border);
 }
 
 img,
@@ -151,7 +129,7 @@ a {
 }
 
 .divider__horizontal {
-  border-top: $lbry-gray-2;
+  border-top: black; //gray-2;
   margin: 16px 0;
 }
 
@@ -199,15 +177,6 @@ a {
   }
 }
 
-.alert-text {
-  color: $lbry-red-3;
-  font-weight: var(--font-weight-bold);
-
-  [data-mode='dark'] & {
-    color: $lbry-red-1;
-  }
-}
-
 .card {
   .help:last-child {
     margin-bottom: 0;
@@ -216,36 +185,24 @@ a {
 
 .help {
   display: block;
-  font-size: var(--font-label);
-  color: lighten($lbry-gray-5, 10%);
+  font-size: var(--font-small);
+  color: var(--color-text-help);
   margin-top: var(--spacing-small);
-
-  [data-mode='dark'] & {
-    color: $lbry-gray-5;
-  }
 }
 
 .help--warning {
-  background-color: $lbry-yellow-1;
-
-  [data-mode='dark'] & {
-    color: $lbry-black;
-  }
+  background-color: var(--color-warning);
 }
 
 .empty {
-  color: $lbry-gray-5;
+  color: var(--color-text-empty);
   font-style: italic;
-
-  [data-mode='dark'] & {
-    color: inherit;
-  }
 }
 
 .qr-code {
   width: 134px;
   height: 134px;
-  border: 3px solid $lbry-white;
+  border: 3px solid black; //white;
 
   &.qr-code--right-padding {
     margin-right: $spacing-vertical * 2/3;
@@ -257,11 +214,7 @@ a {
 }
 
 .error-text {
-  color: $lbry-red-5;
-
-  [data-mode='dark'] & {
-    color: $lbry-red-3;
-  }
+  color: var(--color-text-error);
 }
 
 .thumbnail-preview {
@@ -272,16 +225,3 @@ a {
   background-repeat: no-repeat;
   background-size: cover;
 }
-
-fieldset,
-.fieldset {
-  [data-mode='dark'] & {
-    border-top-color: var(--dm-color-04);
-  }
-}
-
-legend {
-  [data-mode='dark'] & {
-    border-color: transparent;
-  }
-}
diff --git a/ui/scss/init/_mixins.scss b/ui/scss/init/_mixins.scss
index 3f57e3975..82a097a90 100644
--- a/ui/scss/init/_mixins.scss
+++ b/ui/scss/init/_mixins.scss
@@ -1,11 +1,7 @@
 @mixin placeholder {
   animation: pulse 2s infinite ease-in-out;
-  background-color: $lbry-gray-1;
+  background-color: var(--color-placeholder-background);
   border-radius: var(--card-radius);
-
-  [data-mode='dark'] & {
-    background-color: var(--dm-color-04);
-  }
 }
 
 @mixin mediaThumbHoverZoom {
@@ -23,5 +19,5 @@
 }
 
 @mixin focus {
-  box-shadow: 0 0 0 2px $lbry-blue-1;
+  box-shadow: 0 0 0 2px black; //blue-1;
 }
diff --git a/ui/scss/init/_reset.scss b/ui/scss/init/_reset.scss
index 597e6ccd7..f9a9195e0 100644
--- a/ui/scss/init/_reset.scss
+++ b/ui/scss/init/_reset.scss
@@ -77,7 +77,7 @@ dl {
 }
 
 textarea {
-  border: 1px solid $lbry-gray-2;
+  border: 1px solid black; //gray-2;
   padding: $spacing-vertical * 1/3;
   width: 100%;
 }
@@ -89,69 +89,3 @@ img {
   max-height: 100%;
   vertical-align: middle;
 }
-
-input {
-  background-color: transparent;
-  line-height: 1;
-
-  &::placeholder {
-    color: inherit;
-    opacity: 0.3;
-  }
-
-  &:not(:disabled) {
-    color: inherit;
-  }
-
-  &:not([type='checkbox']),
-  &:not([type='file']),
-  &:not([type='radio']),
-  &:not([type='select']) {
-    cursor: text;
-  }
-
-  &:not([type='file']):not(:disabled):not(.wunderbar__input):not(.input-copyable) {
-    border-bottom: var(--input-border-size) dotted $lbry-gray-5;
-  }
-
-  &[type='checkbox']:not(:disabled),
-  &[type='file']:not(:disabled),
-  &[type='radio']:not(:disabled),
-  &[type='select']:not(:disabled) {
-    cursor: pointer;
-  }
-
-  &[type='file'] {
-    border-bottom: none;
-  }
-
-  &:disabled {
-    border-bottom: var(--input-border-size) solid $lbry-gray-3;
-    color: $lbry-gray-3;
-    cursor: default;
-  }
-
-  &::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-}
-
-button {
-  background-color: transparent;
-  color: inherit;
-
-  &:not(:disabled) {
-    cursor: pointer;
-  }
-
-  &:disabled {
-    cursor: default;
-    opacity: 0.3;
-    pointer-events: none;
-  }
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index 31b82a4ab..e1bd461ef 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -26,37 +26,6 @@ $large-breakpoint: 1921px;
   --floating-viewer-info-height: 5rem;
   --floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
 
-  // Font
-  --font-multiplier-small: 0.9em;
-  --font-multiplier-medium: 1.1em;
-  --font-multiplier-large: 1.4em;
-  --font-multiplier-xlarge: 1.6rem;
-  --font-body: 1.2rem;
-  --font-label: 0.9em;
-  --font-subtext: 1em;
-  --font-title: 1.6em;
-  --font-section-title: 2rem;
-  --font-heading: 3rem;
-  --font-weight-base: 400;
-  --font-weight-light: 300;
-  --font-weight-bold: 700;
-
-  // Color
-  --color-background: #f7f7f7;
-  --color-background--splash: #270f34;
-  --color-card-actions: #f7fbfe;
-  --color-card-actions--dark: #545454;
-
-  // Dark Mode
-  --dm-color-01: #ddd;
-  --dm-color-02: #90908f;
-  --dm-color-03: #6a6a6a;
-  --dm-color-04: #555254;
-  --dm-color-05: #353434;
-  --dm-color-06: #2e2d2e;
-  --dm-color-07: #252424;
-  --dm-color-08: #1e1e1e;
-
   // Text
   --text-max-width: 660px;
   --text-link-padding: 4px;
@@ -64,18 +33,6 @@ $large-breakpoint: 1921px;
   // Tabs
   --tab-indicator-size: 0.5rem;
 
-  // Input
-  --input-border-size: 1px;
-  --input-border-radius: 2px;
-  --input-height: 2.6rem;
-
-  // Select
-  --select-height: 30px;
-
-  // Button
-  --button-radius: var(--input-border-radius);
-  --button-height: var(--input-height);
-
   // Header
   --header-height: 5rem;
 
@@ -83,7 +40,7 @@ $large-breakpoint: 1921px;
   --inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-large) * 2);
 
   // Card
-  --card-radius: 5px;
+  --card-radius: var(--border-radius);
   --card-max-width: 1000px;
   --card-box-shadow: 0px 2px 6px 0px;
   --card-box-shadow--attached: 0px 4px 6px 0px;
@@ -102,4 +59,6 @@ $large-breakpoint: 1921px;
   --channel-thumbnail-width: 10rem;
   --channel-thumbnail-width--small: 4rem;
   --file-list-thumbnail-width: 10rem;
+
+  --tag-height: 1.5rem;
 }
diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss
new file mode 100644
index 000000000..a561b241a
--- /dev/null
+++ b/ui/scss/themes/dark.scss
@@ -0,0 +1,84 @@
+/* #2c3237 - 5% */
+/* #383f45 - 10% */
+/* #434b53;  - 15% */
+/* #4e5862;  - 20% */
+/* #5a6570;  - 25% */
+
+[theme='dark'] {
+  --color-primary-alt: #30574e;
+  --color-primary: #60e1ba;
+
+  // Button
+  --color-link: #38d9a9;
+  --color-link-hover: #60e1ba;
+  --color-link-active: #60e1ba;
+  --color-link-icon: #89939e;
+  --color-navigation-link: var(--color-link-icon);
+  --color-button-primary-bg: var(--color-primary-alt);
+  --color-button-primary-bg-hover: #44796c;
+  --color-button-primary-text: var(--color-primary);
+  --color-button-primary-hover-text: var(--color-text);
+  --color-button-secondary-bg: #395877;
+  --color-button-secondary-bg-hover: #4b6d8f;
+  --color-button-secondary-text: #a3c1e0;
+
+  // Color
+  --color-focus: #2d69a5;
+  --color-background-overlay: #212529d7;
+  --color-background: #212529;
+  --color-background-overlay: #21252980;
+  --color-border: #4f5b64;
+  --color-card-background: #2c3237;
+  --color-card-background-highlighted: #384046;
+  --color-header-background: #434b53;
+  --color-file-viewer-background: #212529;
+  --color-tab-text: var(--color-white);
+  --color-tabs-background: #434b53;
+  --color-tab-divider: var(--color-white);
+
+  // Text
+  --color-text: #eeeeee;
+  --color-text-error: var(--lbry-red-1);
+  --color-text-empty: #bbbbbb;
+  --color-text-help: #bbbbbb;
+  --color-text-subtitle: #9fafc0;
+  --color-text-warning: #212529;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-blockquote: var(--color-gray-5);
+
+  // Input
+  --color-input: #f4f4f5;
+  --color-input-label: #d4d4d4;
+  --color-input-placeholder: #f4f4f5;
+  --color-input-bg: #7d8894;
+  --color-input-bg-copyable: #434b53;
+  --color-input-border: var(--color-border);
+  --color-input-border-active: var(--color-secondary);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-background--selected: #89939e;
+  --color-menu-background--active: #89939e;
+  --color-menu-icon: var(--color-link-icon);
+  --color-menu-icon-active: #d6d6d6;
+
+  // Table
+  --color-table-highlight: #3a444e;
+
+  // Search
+  --color-search-suggestion: #212529;
+  --color-search-suggestion-background: #cce6fb;
+  --color-box-shadow: #212529;
+  --color-placeholder-background: #4e5862;
+  --color-spinner-light: #5a6570;
+  --color-spinner-dark: #212529;
+
+  // Tags
+  --color-tag: var(--color-primary);
+  --color-tag-bg: var(--color-primary-alt);
+  --color-tag-hover: var(--color-white);
+  --color-tag-bg-hover: var(--color-primary-alt-2);
+
+  // Snack
+  --color-snack-bg: var(--color-primary-alt);
+}
diff --git a/ui/scss/themes/light.scss b/ui/scss/themes/light.scss
new file mode 100644
index 000000000..eb81ba621
--- /dev/null
+++ b/ui/scss/themes/light.scss
@@ -0,0 +1,50 @@
+:root {
+  // Button
+  --color-link-icon: var(--color-gray-5);
+  --color-link-active: var(--color-primary);
+  --color-navigation-link: var(--color-link-icon);
+
+  // Color
+  --color-background: #f7f7f7;
+  --color-background--splash: #212529;
+  --color-border: #ededed;
+  --color-background-overlay: #21252980;
+
+  // Text
+  --color-text-error: var(--color-danger);
+  --color-text-empty: #bbbbbb;
+  --color-text-help: #999999;
+  --color-text-subtitle: #767676;
+  --color-text-warning: #212529;
+  --color-text-warning--background: var(--lbry-yellow-1);
+  --color-blockquote: var(--color-gray-3);
+
+  --color-spinner-light: #5a6570;
+  --color-spinner-dark: #212529;
+  --color-box-shadow: #c4c4c4;
+  --color-placeholder-background: #f0f0f0;
+  --color-header-background: #ffffff;
+  --color-card-background: #ffffff;
+  --color-card-background-highlighted: #f6faff;
+  --color-list-header: #fff;
+  --color-file-viewer-background: #212529;
+  --color-tabs-background: var(--color-secondary-alt);
+  --color-tab-divider: var(--color-secondary);
+
+  // Menu
+  --color-menu-background: var(--color-header-background);
+  --color-menu-background--selected: var(--color-secondary-alt);
+  --color-menu-background--active: var(--color-secondary-alt);
+  --color-menu-icon: var(--color-navigation-link);
+  --color-menu-icon-active: var(--color-navigation-link);
+
+  // Search
+  --color-search-suggestion: #212529;
+  --color-search-suggestion-background: #cce6fb;
+
+  // Snack
+  --color-snack-bg: var(--color-primary);
+  --color-snack: var(--color-white);
+  --color-snack-error: var(--color-danger);
+  --color-snack-upgrade: var(--color-tertiary);
+}
diff --git a/ui/util/saved-passwords.js b/ui/util/saved-passwords.js
index 6247e3bb3..270fbe0b1 100644
--- a/ui/util/saved-passwords.js
+++ b/ui/util/saved-passwords.js
@@ -1,4 +1,5 @@
 // @flow
+import config from 'config';
 import { ipcRenderer } from 'electron';
 import { DOMAIN } from 'config';
 
diff --git a/yarn.lock b/yarn.lock
index 5d6a6d890..1cc7ba0f1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1019,10 +1019,10 @@
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
-"@lbry/components@^2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-2.8.0.tgz#960b013d89992ce32c20cd916267e3962a765487"
-  integrity sha512-WPapGe+8KFdc8A1URvxQ95IdsqmaUECSEREfbFT7ZKT117PUEJfS+ze+B+Hj7/iExibtCF5YIbsO3hrFc7jWZQ==
+"@lbry/components@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@lbry/components/-/components-3.0.0.tgz#6b5850a0dde5247dee6dde13de1e1e29f03846bd"
+  integrity sha512-8PaEXeU7j1md5LZBB9isPwKCiIqrY2/ojcwIwP/a5xy3lL+tl8nLhBCWVI84um76OKZq7f6lzalI/6+r42KqDQ==
 
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"