diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js
index 9e8328d2..3841ea85 100644
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -3,7 +3,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { debounce } from 'lodash'
 import classNames from 'classnames/bind'
 import { openPopover, closePopover } from '../actions/popover'
-import Badge from './badge'
 import Icon from './icon'
 
 const cx = classNames.bind(_s)
diff --git a/app/javascript/gabsocial/components/input.js b/app/javascript/gabsocial/components/input.js
index 2dd0a039..65d7d456 100644
--- a/app/javascript/gabsocial/components/input.js
+++ b/app/javascript/gabsocial/components/input.js
@@ -18,6 +18,7 @@ export default class Input extends PureComponent {
     onClear: PropTypes.func,
     title: PropTypes.string,
     small: PropTypes.bool,
+    readOnly: PropTypes.string,
   }
 
   render() {
@@ -32,7 +33,8 @@ export default class Input extends PureComponent {
       onBlur,
       onClear,
       title,
-      small
+      small,
+      readOnly
     } = this.props
 
     const inputClasses = cx({
@@ -42,9 +44,12 @@ export default class Input extends PureComponent {
       lineHeight125: 1,
       displayBlock: 1,
       py10: 1,
-      backgroundTransparent: 1,
+      backgroundTransparent: !readOnly,
+      backgroundSubtle2: readOnly,
+      colorSecondary: readOnly,
       fontSize15PX: 1,
       flexGrow1: 1,
+      circle: 1,
       px5: !!prependIcon,
       pl15: !prependIcon,
       pr15: !hasClear,
@@ -75,6 +80,7 @@ export default class Input extends PureComponent {
             onKeyUp={onKeyUp}
             onFocus={onFocus}
             onBlur={onBlur}
+            readOnly={readOnly}
           />
 
           {
diff --git a/app/javascript/gabsocial/components/modal/actions_modal/actions_modal.scss b/app/javascript/gabsocial/components/modal/actions_modal/actions_modal.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/javascript/gabsocial/components/modal/boost_modal/boost_modal.scss b/app/javascript/gabsocial/components/modal/boost_modal/boost_modal.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/javascript/gabsocial/components/modal/compose_modal.js b/app/javascript/gabsocial/components/modal/compose_modal.js
index aa5d1f7f..72db8453 100644
--- a/app/javascript/gabsocial/components/modal/compose_modal.js
+++ b/app/javascript/gabsocial/components/modal/compose_modal.js
@@ -51,7 +51,8 @@ class ComposeModal extends ImmutablePureComponent {
     return (
       <ModalLayout
         noPadding
-        title={intl.formatMessage(messages.title)} onClose={this.onClickClose}
+        title={intl.formatMessage(messages.title)}
+        onClose={this.onClickClose}
       >
         <TimelineComposeBlock modal />
       </ModalLayout>
diff --git a/app/javascript/gabsocial/components/modal/compose_modal/compose_modal.scss b/app/javascript/gabsocial/components/modal/compose_modal/compose_modal.scss
deleted file mode 100644
index f4c6f54d..00000000
--- a/app/javascript/gabsocial/components/modal/compose_modal/compose_modal.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.compose-modal {
-  width: 600px;
-
-  &__content {
-    .timeline-compose-block {
-      background: transparent !important;
-      width: 100%;
-      padding: 10px 5px;
-      margin-bottom: 0;
-
-      .compose-form {
-        display: flex;
-        flex-direction: column;
-        max-height: 100%;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/modal/confirmation_modal/confirmation_modal.scss b/app/javascript/gabsocial/components/modal/confirmation_modal/confirmation_modal.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/javascript/gabsocial/components/modal/embed_modal.js b/app/javascript/gabsocial/components/modal/embed_modal.js
index 3cc75c34..e4d2f727 100644
--- a/app/javascript/gabsocial/components/modal/embed_modal.js
+++ b/app/javascript/gabsocial/components/modal/embed_modal.js
@@ -1,12 +1,17 @@
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { defineMessages, injectIntl } from 'react-intl'
 import api from '../../api'
+import ModalLayout from './modal_layout'
+import Divider from '../divider'
+import Icon from '../icon'
+import Input from '../input'
+import Text from '../text'
 
 const messages = defineMessages({
   embed: { id: 'status.embed', defaultMessage: 'Embed' },
   instructions: { id: 'embed.instructions', defaultMessage: 'Embed this status on your website by copying the code below.' },
   preview: { id: 'embed.preview', defaultMessage: 'Here is what it will look like:' },
-});
+})
 
 export default
 @injectIntl
@@ -22,72 +27,82 @@ class EmbedModal extends ImmutablePureComponent {
   state = {
     loading: false,
     oembed: null,
-  };
-
-  componentDidMount () {
-    const { url } = this.props;
-
-    this.setState({ loading: true });
-
-    api().post('/api/web/embed', { url }).then(res => {
-      this.setState({ loading: false, oembed: res.data });
-
-      const iframeDocument = this.iframe.contentWindow.document;
-
-      iframeDocument.open();
-      iframeDocument.write(res.data.html);
-      iframeDocument.close();
-
-      iframeDocument.body.style.margin = 0;
-      this.iframe.width  = iframeDocument.body.scrollWidth;
-      this.iframe.height = iframeDocument.body.scrollHeight;
-    }).catch(error => {
-      this.props.onError(error);
-    });
   }
 
-  setIframeRef = c =>  {
-    this.iframe = c;
+  componentDidMount() {
+    const { url } = this.props
+
+    this.setState({ loading: true })
+
+    api().post('/api/web/embed', { url }).then(res => {
+      this.setState({ loading: false, oembed: res.data })
+
+      const iframeDocument = this.iframe.contentWindow.document
+
+      iframeDocument.open()
+      iframeDocument.write(res.data.html)
+      iframeDocument.close()
+
+      iframeDocument.body.style.margin = 0
+      this.iframe.width = iframeDocument.body.scrollWidth
+      this.iframe.height = iframeDocument.body.scrollHeight
+    }).catch(error => {
+      this.props.onError(error)
+    })
+  }
+
+  setIframeRef = c => {
+    this.iframe = c
   }
 
   handleTextareaClick = (e) => {
-    e.target.select();
+    e.target.select()
   }
 
-  render () {
-    const { oembed, intl } = this.state;
+  render() {
+    const { intl } = this.props
+    const { oembed } = this.state
 
     return (
-      <div className='modal-root__modal embed-modal'>
-        <h4>{intl.formatMessage(messages.embed)}</h4>
-
-        <div className='embed-modal__container'>
-          <p className='hint'>
+      <ModalLayout title={intl.formatMessage(messages.embed)}>
+        <div className={_s.default}>
+          <Text className={_s.my10}>
             {intl.formatMessage(messages.instructions)}
-          </p>
+          </Text>
 
-          <input
-            type='text'
-            className='embed-modal__html'
-            readOnly
-            value={oembed && oembed.html || ''}
-            onClick={this.handleTextareaClick}
-          />
+          <div className={[_s.default, _s.mb10].join(' ')}>
+            <Input
+              readOnly
+              type='text'
+              className='embed-modal__html'
+              value={oembed && oembed.html || ''}
+              onClick={this.handleTextareaClick}
+            />
+          </div>
 
-          <p className='hint'>
+          <Divider />
+
+          <Text className={_s.mb10}>
             {intl.formatMessage(messages.preview)}
-          </p>
+          </Text>
+
+          <div className={[_s.default, _s.width100PC, _s.backgroundSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+            <iframe
+              className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
+              frameBorder='0'
+              ref={this.setIframeRef}
+              sandbox='allow-same-origin'
+              title='preview'
+            />
+            {
+              !oembed && 
+              <Icon id='loading' height='34px' width='34px' className={[_s.positionAbsolute, _s.z3].join(' ')} />
+            }
+          </div>
 
-          <iframe
-            className='embed-modal__iframe'
-            frameBorder='0'
-            ref={this.setIframeRef}
-            sandbox='allow-same-origin'
-            title='preview'
-          />
         </div>
-      </div>
-    );
+      </ModalLayout>
+    )
   }
 
 }
diff --git a/app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss b/app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss
deleted file mode 100644
index 08111325..00000000
--- a/app/javascript/gabsocial/components/modal/embed_modal/embed_modal.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.embed-modal {
-  @include max-size(80vw, 80vh);
-
-  h4 {
-    padding: 30px;
-
-    @include text-sizing(16px, 500, 1, center);
-  }
-
-  .embed-modal__container {
-    padding: 10px;
-
-    .hint {
-      margin-bottom: 15px;
-    }
-
-    .embed-modal__html {
-      outline: 0;
-      box-sizing: border-box;
-      display: block;
-      width: 100%;
-      border: none;
-      padding: 10px;
-      font-family: $font-monospace, monospace;
-      background: $ui-base-color;
-      color: $primary-text-color;
-      font-size: 14px;
-      margin: 0;
-      margin-bottom: 15px;
-
-      &::-moz-focus-inner {
-        border: 0;
-      }
-
-      &::-moz-focus-inner,
-      &:focus,
-      &:active {
-        outline: 0 !important;
-      }
-
-      &:focus {
-        background: lighten($ui-base-color, 4%);
-      }
-
-      @include breakpoint(sm) {
-        font-size: 16px;
-      }
-    }
-
-    .embed-modal__iframe {
-      width: 400px;
-      max-width: 100%;
-      overflow: hidden;
-      border: 0;
-    }
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/modal/mute_modal.js b/app/javascript/gabsocial/components/modal/mute_modal.js
index e5ec0c3b..c5fffd51 100644
--- a/app/javascript/gabsocial/components/modal/mute_modal.js
+++ b/app/javascript/gabsocial/components/modal/mute_modal.js
@@ -73,7 +73,7 @@ class MuteModal extends PureComponent {
   }
 
   render () {
-    const { account, notifications } = this.props;
+    const { account, notifications, intl } = this.props;
 
     return (
       <div className='modal-root__modal mute-modal'>
diff --git a/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.scss b/app/javascript/gabsocial/components/modal/mute_modal/mute_modal.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/javascript/gabsocial/components/modal/report_modal/report_modal.scss b/app/javascript/gabsocial/components/modal/report_modal/report_modal.scss
deleted file mode 100644
index b6fdc904..00000000
--- a/app/javascript/gabsocial/components/modal/report_modal/report_modal.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.setting-text {
-  color: $darker-text-color;
-  background: transparent;
-  border: none;
-  border-bottom: 2px solid $ui-primary-color;
-  box-sizing: border-box;
-  display: block;
-  font-family: inherit;
-  margin-bottom: 10px;
-  padding: 7px 0;
-  width: 100%;
-
-  &:focus,
-  &:active {
-    color: $primary-text-color;
-    border-bottom-color: $highlight-text-color;
-  }
-
-  @include breakpoint(sm) {
-    font-size: 16px;
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/modal/status_revision_modal.js b/app/javascript/gabsocial/components/modal/status_revision_modal.js
index 64baef54..e5caa03b 100644
--- a/app/javascript/gabsocial/components/modal/status_revision_modal.js
+++ b/app/javascript/gabsocial/components/modal/status_revision_modal.js
@@ -1,39 +1,40 @@
-
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import StatusRevisionListContainer from '../../containers/status_revision_list_container';
-import IconButton from '../icon_button';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import StatusRevisionListContainer from '../../containers/status_revision_list_container'
+import IconButton from '../icon_button'
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
-});
+})
 
 export default
 @injectIntl
 class StatusRevisionModal extends ImmutablePureComponent {
 
-    static propTypes = {
-        intl: PropTypes.object.isRequired,
-        onClose: PropTypes.func.isRequired,
-        status: ImmutablePropTypes.map.isRequired
-    };
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map.isRequired
+  }
 
-    render () {
-        const { intl, onClose, status } = this.props;
+  render() {
+    const { intl, onClose, status } = this.props
 
-        return (
-            <div className='modal-root__modal status-revisions-root'>
-                <div className='status-revisions'>
-                    <div className='status-revisions__header'>
-                        <h3 className='status-revisions__header__title'><FormattedMessage id='status_revisions.heading' defaultMessage='Revision History' /></h3>
-                        <IconButton className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
-                    </div>
-                    <div className='status-revisions__content'>
-                        <StatusRevisionListContainer id={status.get('id')} />
-                    </div>
-                </div>
-            </div>
-        );
-    }
+    return (
+      <div className='modal-root__modal status-revisions-root'>
+        <div className='status-revisions'>
+          <div className='status-revisions__header'>
+            <h3 className='status-revisions__header__title'>
+              <FormattedMessage id='status_revisions.heading' defaultMessage='Revision History' />
+            </h3>
+            <IconButton className='status-revisions__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          </div>
+          <div className='status-revisions__content'>
+            <StatusRevisionListContainer id={status.get('id')} />
+          </div>
+        </div>
+      </div>
+    )
+  }
 }
diff --git a/app/javascript/gabsocial/components/modal/video_modal/video_modal.scss b/app/javascript/gabsocial/components/modal/video_modal/video_modal.scss
deleted file mode 100644
index 03b09380..00000000
--- a/app/javascript/gabsocial/components/modal/video_modal/video_modal.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.video-modal {
-  position: relative;
-
-  @include max-size(100vw, 100vh);
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/sidebar.js b/app/javascript/gabsocial/components/sidebar.js
index 57e6a15f..7c10e47f 100644
--- a/app/javascript/gabsocial/components/sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar.js
@@ -45,7 +45,7 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(closeSidebar())
   },
   onOpenComposeModal() {
-    dispatch(openModal('PRO_UPGRADE'))
+    dispatch(openModal('COMPOSE'))
   },
 })
 
diff --git a/app/javascript/gabsocial/pages/group_page.js b/app/javascript/gabsocial/pages/group_page.js
index 24c08d30..efb7dcc5 100644
--- a/app/javascript/gabsocial/pages/group_page.js
+++ b/app/javascript/gabsocial/pages/group_page.js
@@ -25,6 +25,12 @@ class GroupPage extends ImmutablePureComponent {
 		dispatch: PropTypes.func.isRequired,
 	}
 
+	componentDidMount() {
+		const { group } = this.props
+		const groupTitle = !group ? '...' : group.get('title')
+    document.title = `Group / ${groupTitle} - Gab`
+	}
+	
 	componentWillMount() {
 		const { params: { id }, dispatch } = this.props
 
diff --git a/app/javascript/gabsocial/pages/groups_page.js b/app/javascript/gabsocial/pages/groups_page.js
index 1841ef2f..b84cdc30 100644
--- a/app/javascript/gabsocial/pages/groups_page.js
+++ b/app/javascript/gabsocial/pages/groups_page.js
@@ -5,6 +5,10 @@ import DefaultLayout from '../layouts/default_layout'
 
 export default class GroupsPage extends PureComponent {
 
+  componentDidMount() {
+    document.title = 'Groups - Gab'
+  }
+  
   handleClickNewList () {
     console.log("handleClickNewList")
   }
diff --git a/app/javascript/gabsocial/pages/home_page.js b/app/javascript/gabsocial/pages/home_page.js
index d297a660..52f2f82c 100644
--- a/app/javascript/gabsocial/pages/home_page.js
+++ b/app/javascript/gabsocial/pages/home_page.js
@@ -12,6 +12,10 @@ import Divider from '../components/divider'
 
 export default class HomePage extends PureComponent {
 
+  componentDidMount() {
+    document.title = '(1) Home - Gab'
+  }
+
   handleEditHomeTimeline () {
     console.log("handleEditHomeTimeline")
   }
diff --git a/app/javascript/gabsocial/pages/list_page.js b/app/javascript/gabsocial/pages/list_page.js
index e646744f..21935164 100644
--- a/app/javascript/gabsocial/pages/list_page.js
+++ b/app/javascript/gabsocial/pages/list_page.js
@@ -17,6 +17,12 @@ class ListPage extends ImmutablePureComponent {
     list: ImmutablePropTypes.map,
   };
 
+  componentDidMount() {
+		const { list } = this.props
+		const listTitle = !list ? '...' : list.get('title')
+    document.title = `List / ${listTitle} - Gab`
+  }
+  
   handleEditListTimeline () {
     console.log("handleEditListTimeline")
   }
diff --git a/app/javascript/gabsocial/pages/lists_page.js b/app/javascript/gabsocial/pages/lists_page.js
index 32c1a918..fa780953 100644
--- a/app/javascript/gabsocial/pages/lists_page.js
+++ b/app/javascript/gabsocial/pages/lists_page.js
@@ -6,6 +6,10 @@ import DefaultLayout from '../layouts/default_layout'
 
 export default class ListsPage extends PureComponent {
 
+  componentDidMount() {
+    document.title = 'Lists - Gab'
+  }
+  
   handleClickNewList () {
     console.log("handleClickNewList")
   }
diff --git a/app/javascript/gabsocial/pages/notifications_page.js b/app/javascript/gabsocial/pages/notifications_page.js
index 11822a1b..ff3ca3bb 100644
--- a/app/javascript/gabsocial/pages/notifications_page.js
+++ b/app/javascript/gabsocial/pages/notifications_page.js
@@ -6,6 +6,11 @@ import TrendsPanel from '../components/panel/trends_panel'
 import DefaultLayout from '../layouts/default_layout'
 
 export default class NotificationsPage extends PureComponent {
+
+  componentDidMount() {
+    document.title = 'Notifications - Gab'
+  }
+
   render() {
     const { children } = this.props
 
diff --git a/app/javascript/gabsocial/pages/profile_page.js b/app/javascript/gabsocial/pages/profile_page.js
index 4a481ccb..4a7e1955 100644
--- a/app/javascript/gabsocial/pages/profile_page.js
+++ b/app/javascript/gabsocial/pages/profile_page.js
@@ -41,6 +41,15 @@ class ProfilePage extends ImmutablePureComponent {
     unavailable: PropTypes.bool.isRequired,
   }
 
+  componentDidMount() {
+    const { account, params: { username } } = this.props
+    if (!!account) {
+      document.title = `${account.get('display_name')} (@${username}) - Gab`
+    } else {
+      document.title = `@${username} - Gab`
+    }
+  }
+
   componentWillMount() {
     const { dispatch, params: { username } } = this.props
     dispatch(fetchAccountByUsername(username))
diff --git a/app/javascript/gabsocial/pages/search_page.js b/app/javascript/gabsocial/pages/search_page.js
index 3427d0dc..f21d0ede 100644
--- a/app/javascript/gabsocial/pages/search_page.js
+++ b/app/javascript/gabsocial/pages/search_page.js
@@ -4,6 +4,10 @@ import SearchFilterPanel from '../components/panel/search_filter_panel'
 import SearchLayout from '../layouts/search_layout'
 
 export default class SearchPage extends PureComponent {
+  componentDidMount() {
+    document.title = `Search - Gab`
+  }
+
   render() {
     const { children } = this.props