diff --git a/webapp/components/backstage/add_incoming_webhook.jsx b/webapp/components/backstage/add_incoming_webhook.jsx
index fa7531fc62..83027c6b3b 100644
--- a/webapp/components/backstage/add_incoming_webhook.jsx
+++ b/webapp/components/backstage/add_incoming_webhook.jsx
@@ -96,10 +96,10 @@ export default class AddIncomingWebhook extends React.Component {
 
     render() {
         return (
-            <div className='backstage row'>
+            <div className='backstage-content row'>
                 <div className='add-incoming-webhook'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
+                    <div className='backstage-header'>
+                        <h1>
                             <FormattedMessage
                                 id='add_incoming_webhook.header'
                                 defaultMessage='Add Incoming Webhook'
@@ -107,81 +107,91 @@ export default class AddIncomingWebhook extends React.Component {
                         </h1>
                     </div>
                 </div>
-                <form className='add-incoming-webhook__body'>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='name'
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.name'
-                                defaultMessage='Name'
-                            />
-                        </label>
-                        <input
-                            id='name'
-                            type='text'
-                            value={this.state.name}
-                            onChange={this.updateName}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='description'
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.description'
-                                defaultMessage='Description'
-                            />
-                        </label>
-                        <input
-                            id='description'
-                            type='text'
-                            value={this.state.description}
-                            onChange={this.updateDescription}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='channelId'
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.channel'
-                                defaultMessage='Channel'
-                            />
-                        </label>
-                        <ChannelSelect
-                            id='channelId'
-                            value={this.state.channelId}
-                            onChange={this.updateChannelId}
-                        />
-                    </div>
-                    <div className='add-integration__submit-row'>
-                        <Link
-                            className='btn btn-sm'
-                            to={'/settings/integrations/add'}
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.cancel'
-                                defaultMessage='Cancel'
-                            />
-                        </Link>
-                        <SpinnerButton
-                            className='btn btn-primary'
-                            type='submit'
-                            spinning={this.state.saving}
-                            onClick={this.handleSubmit}
-                        >
-                            <FormattedMessage
-                                id='add_incoming_webhook.save'
-                                defaultMessage='Save'
-                            />
-                        </SpinnerButton>
-                    </div>
-                    <FormError errors={[this.state.serverError, this.state.clientError]}/>
-                </form>
+                <div className='backstage-form'>
+                    <form className='form-horizontal'>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='name'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.name'
+                                    defaultMessage='Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='name'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.name}
+                                    onChange={this.updateName}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='channelId'
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.channel'
+                                    defaultMessage='Channel'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <ChannelSelect
+                                    id='channelId'
+                                    value={this.state.channelId}
+                                    onChange={this.updateChannelId}
+                                />
+                            </div>
+                        </div>
+                        <div className='backstage-form__footer'>
+                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <Link
+                                className='btn btn-sm'
+                                to={'/settings/integrations/add'}
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id='add_incoming_webhook.save'
+                                    defaultMessage='Save'
+                                />
+                            </SpinnerButton>
+                        </div>
+                    </form>
+                </div>
             </div>
         );
     }
diff --git a/webapp/components/backstage/add_integration.jsx b/webapp/components/backstage/add_integration.jsx
index cebc1e8b00..5f4a69bfe3 100644
--- a/webapp/components/backstage/add_integration.jsx
+++ b/webapp/components/backstage/add_integration.jsx
@@ -57,18 +57,16 @@ export default class AddIntegration extends React.Component {
         }
 
         return (
-            <div className='backstage row'>
-                <div className='add-integration'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
-                            <FormattedMessage
-                                id='add_integration.header'
-                                defaultMessage='Add Integration'
-                            />
-                        </h1>
-                    </div>
+            <div className='backstage-content row'>
+                <div className='backstage-header'>
+                    <h1>
+                        <FormattedMessage
+                            id='add_integration.header'
+                            defaultMessage='Add Integration'
+                        />
+                    </h1>
                 </div>
-                <div className='add-integration__options'>
+                <div>
                     {options}
                 </div>
             </div>
diff --git a/webapp/components/backstage/add_integration_option.jsx b/webapp/components/backstage/add_integration_option.jsx
index 3c3caf2f44..b17ebb1859 100644
--- a/webapp/components/backstage/add_integration_option.jsx
+++ b/webapp/components/backstage/add_integration_option.jsx
@@ -21,16 +21,16 @@ export default class AddIntegrationOption extends React.Component {
         return (
             <Link
                 to={link}
-                className='add-integration-option'
+                className='add-integration'
             >
                 <img
-                    className='add-integration-option__image'
+                    className='add-integration__image'
                     src={image}
                 />
-                <div className='add-integration-option__title'>
+                <div className='add-integration__title'>
                     {title}
                 </div>
-                <div className='add-integration-option__description'>
+                <div className='add-integration__description'>
                     {description}
                 </div>
             </Link>
diff --git a/webapp/components/backstage/add_outgoing_webhook.jsx b/webapp/components/backstage/add_outgoing_webhook.jsx
index 3ae2f86060..5d98138df5 100644
--- a/webapp/components/backstage/add_outgoing_webhook.jsx
+++ b/webapp/components/backstage/add_outgoing_webhook.jsx
@@ -128,10 +128,10 @@ export default class AddOutgoingWebhook extends React.Component {
 
     render() {
         return (
-            <div className='backstage row'>
+            <div className='backstage-content row'>
                 <div className='add-outgoing-webhook'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
+                    <div className='backstage-header'>
+                        <h1>
                             <FormattedMessage
                                 id='add_outgoing_webhook.header'
                                 defaultMessage='Add Outgoing Webhook'
@@ -139,115 +139,131 @@ export default class AddOutgoingWebhook extends React.Component {
                         </h1>
                     </div>
                 </div>
-                <form className='add-outgoing-webhook__body'>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='name'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.name'
-                                defaultMessage='Name'
-                            />
-                        </label>
-                        <input
-                            id='name'
-                            type='text'
-                            value={this.state.name}
-                            onChange={this.updateName}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='description'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.description'
-                                defaultMessage='Description'
-                            />
-                        </label>
-                        <input
-                            id='description'
-                            type='text'
-                            value={this.state.description}
-                            onChange={this.updateDescription}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='channelId'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.channel'
-                                defaultMessage='Channel'
-                            />
-                        </label>
-                        <ChannelSelect
-                            id='channelId'
-                            value={this.state.channelId}
-                            onChange={this.updateChannelId}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='triggerWords'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.triggerWords'
-                                defaultMessage='Trigger Words (One Per Line)'
-                            />
-                        </label>
-                        <textarea
-                            id='triggerWords'
-                            rows='3'
-                            value={this.state.triggerWords}
-                            onChange={this.updateTriggerWords}
-                        />
-                    </div>
-                    <div className='add-integration__row'>
-                        <label
-                            className='add-integration__label'
-                            htmlFor='callbackUrls'
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.callbackUrls'
-                                defaultMessage='Callback URLs (One Per Line)'
-                            />
-                        </label>
-                        <textarea
-                            id='callbackUrls'
-                            rows='3'
-                            value={this.state.callbackUrls}
-                            onChange={this.updateCallbackUrls}
-                        />
-                    </div>
-                    <div className='add-integration__submit-row'>
-                        <Link
-                            className='btn btn-sm'
-                            to={'/settings/integrations/add'}
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.cancel'
-                                defaultMessage='Cancel'
-                            />
-                        </Link>
-                        <SpinnerButton
-                            className='btn btn-primary'
-                            type='submit'
-                            spinning={this.state.saving}
-                            onClick={this.handleSubmit}
-                        >
-                            <FormattedMessage
-                                id='add_outgoing_webhook.save'
-                                defaultMessage='Save'
-                            />
-                        </SpinnerButton>
-                    </div>
-                    <FormError errors={[this.state.serverError, this.state.clientError]}/>
-                </form>
+                <div className='backstage-form'>
+                    <form className='form-horizontal'>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='name'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.name'
+                                    defaultMessage='Name'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='name'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.name}
+                                    onChange={this.updateName}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='description'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.description'
+                                    defaultMessage='Description'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <input
+                                    id='description'
+                                    type='text'
+                                    className='form-control'
+                                    value={this.state.description}
+                                    onChange={this.updateDescription}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='channelId'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.channel'
+                                    defaultMessage='Channel'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <ChannelSelect
+                                    id='channelId'
+                                    value={this.state.channelId}
+                                    onChange={this.updateChannelId}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='triggerWords'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.triggerWords'
+                                    defaultMessage='Trigger Words (One Per Line)'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <textarea
+                                    id='triggerWords'
+                                    rows='3'
+                                    className='form-control'
+                                    value={this.state.triggerWords}
+                                    onChange={this.updateTriggerWords}
+                                />
+                            </div>
+                        </div>
+                        <div className='form-group'>
+                            <label
+                                className='control-label col-sm-3'
+                                htmlFor='callbackUrls'
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.callbackUrls'
+                                    defaultMessage='Callback URLs (One Per Line)'
+                                />
+                            </label>
+                            <div className='col-md-5 col-sm-9'>
+                                <textarea
+                                    id='callbackUrls'
+                                    rows='3'
+                                    className='form-control'
+                                    value={this.state.callbackUrls}
+                                    onChange={this.updateCallbackUrls}
+                                />
+                            </div>
+                        </div>
+                        <div className='backstage-form__footer'>
+                            <FormError errors={[this.state.serverError, this.state.clientError]}/>
+                            <Link
+                                className='btn btn-sm'
+                                to={'/settings/integrations/add'}
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.cancel'
+                                    defaultMessage='Cancel'
+                                />
+                            </Link>
+                            <SpinnerButton
+                                className='btn btn-primary'
+                                type='submit'
+                                spinning={this.state.saving}
+                                onClick={this.handleSubmit}
+                            >
+                                <FormattedMessage
+                                    id='add_outgoing_webhook.save'
+                                    defaultMessage='Save'
+                                />
+                            </SpinnerButton>
+                        </div>
+                    </form>
+                </div>
             </div>
         );
     }
diff --git a/webapp/components/backstage/backstage_category.jsx b/webapp/components/backstage/backstage_category.jsx
index e8b0b57ae8..913c7562c6 100644
--- a/webapp/components/backstage/backstage_category.jsx
+++ b/webapp/components/backstage/backstage_category.jsx
@@ -50,7 +50,7 @@ export default class BackstageCategory extends React.Component {
         }
 
         return (
-            <li className='backstage__sidebar__category'>
+            <li className='backstage-sidebar__category'>
                 <Link
                     to={link}
                     className='category-title'
diff --git a/webapp/components/backstage/backstage_navbar.jsx b/webapp/components/backstage/backstage_navbar.jsx
index 5551657917..d1dac6043b 100644
--- a/webapp/components/backstage/backstage_navbar.jsx
+++ b/webapp/components/backstage/backstage_navbar.jsx
@@ -39,9 +39,9 @@ export default class BackstageNavbar extends React.Component {
         }
 
         return (
-            <div className='backstage__navbar row'>
+            <div className='backstage-navbar row'>
                 <Link
-                    className='backstage__navbar__back'
+                    className='backstage-navbar__back'
                     to={`/${this.state.team.display_name}/channels/town-square`}
                 >
                     <i className='fa fa-angle-left'/>
diff --git a/webapp/components/backstage/backstage_sidebar.jsx b/webapp/components/backstage/backstage_sidebar.jsx
index 63a0df5cb4..13c4f8b50c 100644
--- a/webapp/components/backstage/backstage_sidebar.jsx
+++ b/webapp/components/backstage/backstage_sidebar.jsx
@@ -10,7 +10,7 @@ import {FormattedMessage} from 'react-intl';
 export default class BackstageSidebar extends React.Component {
     render() {
         return (
-            <div className='backstage__sidebar'>
+            <div className='backstage-sidebar'>
                 <ul>
                     <BackstageCategory
                         name='integrations'
diff --git a/webapp/components/backstage/installed_incoming_webhook.jsx b/webapp/components/backstage/installed_incoming_webhook.jsx
index 4ca421a024..f65cf6327d 100644
--- a/webapp/components/backstage/installed_incoming_webhook.jsx
+++ b/webapp/components/backstage/installed_incoming_webhook.jsx
@@ -35,26 +35,26 @@ export default class InstalledIncomingWebhook extends React.Component {
         const channelName = channel ? channel.display_name : 'cannot find channel';
 
         return (
-            <div className='installed-integrations__item installed-integrations__incoming-webhook'>
-                <div className='details'>
-                    <div className='details-row'>
-                        <span className='name'>
+            <div className='backstage-list__item'>
+                <div className='item-details'>
+                    <div className='item-details__row'>
+                        <span className='item-details__name'>
                             {channelName}
                         </span>
-                        <span className='type'>
+                        <span className='item-details__type'>
                             <FormattedMessage
                                 id='installed_integrations.incomingWebhookType'
                                 defaultMessage='(Incoming Webhook)'
                             />
                         </span>
                     </div>
-                    <div className='details-row'>
-                        <span className='description'>
+                    <div className='item-details__row'>
+                        <span className='item-details__description'>
                             {Utils.getWindowLocationOrigin() + '/hooks/' + incomingWebhook.id}
                         </span>
                     </div>
                 </div>
-                <div className='actions'>
+                <div className='item-actions'>
                     <a
                         href='#'
                         onClick={this.handleDeleteClick}
diff --git a/webapp/components/backstage/installed_integrations.jsx b/webapp/components/backstage/installed_integrations.jsx
index ff0b6e4ecb..fe84ae81a0 100644
--- a/webapp/components/backstage/installed_integrations.jsx
+++ b/webapp/components/backstage/installed_integrations.jsx
@@ -98,9 +98,9 @@ export default class InstalledIntegrations extends React.Component {
         const fields = [];
 
         if (incomingWebhooks.length > 0 || outgoingWebhooks.length > 0) {
-            let filterClassName = 'type-filter';
+            let filterClassName = 'filter-sort';
             if (this.state.typeFilter === '') {
-                filterClassName += ' type-filter--selected';
+                filterClassName += ' filter-sort--active';
             }
 
             fields.push(
@@ -131,9 +131,9 @@ export default class InstalledIntegrations extends React.Component {
                 </span>
             );
 
-            let filterClassName = 'type-filter';
+            let filterClassName = 'filter-sort';
             if (this.state.typeFilter === 'incomingWebhooks') {
-                filterClassName += ' type-filter--selected';
+                filterClassName += ' filter-sort--active';
             }
 
             fields.push(
@@ -164,9 +164,9 @@ export default class InstalledIntegrations extends React.Component {
                 </span>
             );
 
-            let filterClassName = 'type-filter';
+            let filterClassName = 'filter-sort';
             if (this.state.typeFilter === 'outgoingWebhooks') {
-                filterClassName += ' type-filter--selected';
+                filterClassName += ' filter-sort--active';
             }
 
             fields.push(
@@ -188,7 +188,7 @@ export default class InstalledIntegrations extends React.Component {
         }
 
         return (
-            <div className='type-filters'>
+            <div className='backstage-filters__sort'>
                 {fields}
             </div>
         );
@@ -243,10 +243,10 @@ export default class InstalledIntegrations extends React.Component {
         }
 
         return (
-            <div className='backstage row'>
+            <div className='backstage-content row'>
                 <div className='installed-integrations'>
-                    <div className='backstage__header'>
-                        <h1 className='text'>
+                    <div className='backstage-header'>
+                        <h1>
                             <FormattedMessage
                                 id='installed_integrations.header'
                                 defaultMessage='Installed Integrations'
@@ -269,17 +269,21 @@ export default class InstalledIntegrations extends React.Component {
                             </button>
                         </Link>
                     </div>
-                    <div className='installed-integrations__filters'>
+                    <div className='backstage-filters'>
                         {this.renderTypeFilters(this.state.incomingWebhooks, this.state.outgoingWebhooks)}
-                        <input
-                            type='search'
-                            placeholder={Utils.localizeMessage('installed_integrations.search', 'Search Integrations')}
-                            value={this.state.filter}
-                            onChange={this.updateFilter}
-                            style={{flexGrow: 0, flexShrink: 0}}
-                        />
+                        <div className='backstage-filter__search'>
+                            <i className='fa fa-search'></i>
+                            <input
+                                type='search'
+                                className='form-control'
+                                placeholder={Utils.localizeMessage('installed_integrations.search', 'Search Integrations')}
+                                value={this.state.filter}
+                                onChange={this.updateFilter}
+                                style={{flexGrow: 0, flexShrink: 0}}
+                            />
+                        </div>
                     </div>
-                    <div className='installed-integrations__list'>
+                    <div className='backstage-list'>
                         {integrations}
                     </div>
                 </div>
diff --git a/webapp/components/backstage/installed_outgoing_webhook.jsx b/webapp/components/backstage/installed_outgoing_webhook.jsx
index 12e1a5c81d..fee4272602 100644
--- a/webapp/components/backstage/installed_outgoing_webhook.jsx
+++ b/webapp/components/backstage/installed_outgoing_webhook.jsx
@@ -43,21 +43,21 @@ export default class InstalledOutgoingWebhook extends React.Component {
         const channelName = channel ? channel.display_name : 'cannot find channel';
 
         return (
-            <div className='installed-integrations__item installed-integrations__outgoing-webhook'>
-                <div className='details'>
-                    <div className='details-row'>
-                        <span className='name'>
+            <div className='backstage-list__item'>
+                <div className='item-details'>
+                    <div className='item-details__row'>
+                        <span className='item-details__name'>
                             {channelName}
                         </span>
-                        <span className='type'>
+                        <span className='item-details__type'>
                             <FormattedMessage
                                 id='installed_integrations.outgoingWebhookType'
                                 defaultMessage='(Outgoing Webhook)'
                             />
                         </span>
                     </div>
-                    <div className='details-row'>
-                        <span className='description'>
+                    <div className='item-details__row'>
+                        <span className='item-details__description'>
                             {Utils.getWindowLocationOrigin() + '/hooks/' + outgoingWebhook.id}
                             {' - '}
                             {outgoingWebhook.token}
diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss
index 1ae4b6b701..3b36fb75f8 100644
--- a/webapp/sass/responsive/_desktop.scss
+++ b/webapp/sass/responsive/_desktop.scss
@@ -48,6 +48,11 @@
         }
     }
 
+    .backstage-content {
+        margin: 46px 46px 46px 150px;
+    }
+
+
     .inner-wrap {
         &.move--left {
             .file-overlay {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 4e77849ce7..38476485dc 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1,6 +1,16 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .backstage-filters {
+        display: block;
+
+        .backstage-filter__search {
+            border-bottom: 1px solid $light-gray;
+            margin: 10px 0;
+            width: 100%;
+        }
+    }
+
     .signup-team__container {
         font-size: 1em;
     }
@@ -675,9 +685,9 @@
     }
 
     .sidebar--right {
-        width: 100%;
-        right: 0;
         @include translate3d(100%, 0, 0);
+        right: 0;
+        width: 100%;
         z-index: 5;
 
         &.move--left {
@@ -853,6 +863,30 @@
 }
 
 @media screen and (max-width: 480px) {
+    .backstage-header {
+        h1 {
+            float: none;
+            margin-bottom: 15px;
+        }
+
+        .add-integrations-link {
+            float: none;
+        }
+    }
+
+    .add-integration {
+        width: 100%;
+    }
+
+    .backstage-list__item {
+        display: block;
+
+        .actions {
+            margin-top: 10px;
+            padding: 0;
+        }
+    }
+
     .modal {
         .settings-modal {
             .settings-table {
diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss
index 6863e660ba..db2a8d7b98 100644
--- a/webapp/sass/responsive/_tablet.scss
+++ b/webapp/sass/responsive/_tablet.scss
@@ -15,6 +15,19 @@
         }
     }
 
+    .backstage-content {
+        margin: 30px;
+        max-width: 100%;
+        padding: 0;
+    }
+
+    .backstage-sidebar {
+        height: auto;
+        padding: 30px 15px 0;
+        position: relative;
+        width: 100%;
+    }
+
     .help__format-text {
         display: none;
     }
diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss
index 70bab99cb6..729c8c912a 100644
--- a/webapp/sass/routes/_backstage.scss
+++ b/webapp/sass/routes/_backstage.scss
@@ -1,103 +1,106 @@
-.backstage {
-    background-color: #f2f2f2;
+.backstage-content {
+    background-color: $bg--gray;
     height: 100%;
-    padding-left: 260px;
-    padding-top: 45px;
+    margin: 46px auto;
+    max-width: 960px;
+    padding-left: 135px;
 }
 
-.backstage__navbar {
-    background: white;
-    border-bottom: lightgray 1px solid;
-    margin: 0 -15px;
-    padding: 10px;
+.backstage-navbar {
+    background: $white;
+    border-bottom: 1px solid $light-gray;
+    padding: 10px 20px;
     z-index: 10;
 }
 
-.backstage__navbar__back {
-    color: black;
+.backstage-navbar__back {
+    color: inherit;
+    text-decoration: none;
 
     .fa {
+        font-size: 1.1em;
         font-weight: bold;
-        margin-right: 5px;
+        margin-right: 7px;
+    }
+
+    &:hover,
+    &:active {
+        color: inherit;
     }
 }
 
-.backstage__sidebar {
-    position: absolute;
-    left: 0;
-    width: 260px;
+.backstage-sidebar {
     height: 100%;
-    background-color: #f2f2f2;
-    padding-bottom: 20px;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-top: 45px;
+    left: 0;
+    padding: 50px 20px;
+    position: absolute;
+    width: 260px;
     z-index: 5;
 
     ul {
-        padding: 0px;
         list-style: none;
+        padding: 0;
     }
 }
 
-.backstage__sidebar__category {
-    border: lightgray 1px solid;
+.backstage-sidebar__category {
+    border: 1px solid $light-gray;
 
     .category-title {
-        color: gray;
         display: block;
-        padding: 5px 10px;
+        line-height: 36px;
+        padding: 0 10px;
         position: relative;
     }
 
     .category-title--active {
-        color: black;
+        color: $black;
     }
 
     .category-title__text {
-        position: absolute;
         left: 2em;
+        position: absolute;
     }
 
     .sections {
-        background: white;
-        border-top: lightgray 1px solid;
+        background: $white;
+        border-top: 1px solid $light-gray;
     }
 
-    .section-title {
+    .section-title,
+    .subsection-title {
         display: block;
+        font-size: .95em;
+        line-height: 29px;
         padding-left: 2em;
-    }
-
-    .subsection {
+        text-decoration: none;
     }
 
     .subsection-title {
-        display: block;
         padding-left: 3em;
     }
 
-    .section-title--active, .subsection-title--active {
-        background-color:#2388d6;
-        color: white;
+    .section-title--active,
+    .subsection-title--active {
+        background-color: $primary-color;
+        color: $white;
+        font-weight: 600;
     }
 }
 
 .backstage__sidebar__category + .backstage__sidebar__category {
-    border-top-width: 0px;
+    border-top-width: 0;
 }
 
-.installed-integrations {
-    height: 100%;
-    max-width: 958px;
-}
-
-.backstage__header {
+.backstage-header {
+    @include clearfix;
     margin-bottom: 20px;
     width: 100%;
 
-    .text {
-        display: inline;
+    h1 {
+        float: left;
+        font-size: 20px;
+        margin: 5px 0;
     }
 
     .add-integrations-link {
@@ -105,21 +108,22 @@
     }
 }
 
-.installed-integrations__filters {
+.backstage-filters {
     display: flex;
     flex-direction: row;
-    margin-bottom: 8px;
     width: 100%;
 
-    .type-filters {
+    .backstage-filters__sort {
         flex-grow: 1;
         flex-shrink: 0;
+        line-height: 30px;
 
-        .type-filter {
-            &--selected {
-                color: black;
+        .filter-sort {
+            text-decoration: none;
+
+            &.filter-sort--active {
+                color: inherit;
                 cursor: default;
-                font-weight: bold;
             }
         }
 
@@ -129,84 +133,135 @@
         }
     }
 
-    .filter-box {
+    .backstage-filter__search {
         flex-grow: 0;
         flex-shrink: 0;
+        position: relative;
+        width: 270px;
+
+        .fa {
+            @include opacity(.4);
+            left: 11px;
+            position: absolute;
+            top: 11px;
+        }
+
+        input {
+            background: $white;
+            border-bottom: none;
+            padding-left: 30px;
+        }
     }
 }
 
-.installed-integrations__list {
-    background-color: white;
-    border: lightgray 1px solid;
-    padding-bottom: 30px;
-    padding-left: 30px;
-    padding-right: 30px;
-    padding-top: 10px;
+.backstage-list {
+    background-color: $white;
+    border: 1px solid $light-gray;
+    padding: 5px 15px;
 }
 
-.installed-integrations__item {
-    border-bottom: lightgray 1px solid;
+.backstage-list__item {
+    border-bottom: 1px solid $light-gray;
     display: flex;
-    padding: 20px;
+    padding: 20px 15px;
 
-    .details {
+    &:last-child {
+        border: none;
+    }
+
+    .item-details {
         flex-grow: 1;
         flex-shrink: 1;
         overflow: hidden;
         text-overflow: ellipsis;
-
-        .details-row + .details-row {
-            margin-top: 15px;
-        }
-
-        .name {
-            font-weight: bold;
-            margin-bottom: 1em;
-        }
-
-        .type {
-            margin-left: 6px;
-        }
-
-        .description {
-            color: gray;
-            margin-bottom: 1em;
-        }
     }
 
-    .actions {
+    .item-details__row + .item-details__row {
+        @include clearfix;
+        margin-top: 10px;
+        text-overflow: ellipsis;
+    }
+
+    .item-details__name {
+        font-weight: 600;
+        margin-bottom: 1em;
+    }
+
+    .item-details__type {
+        margin-left: 6px;
+    }
+
+    .item-details__description {
+        color: $dark-gray;
+        margin-bottom: 1em;
+    }
+
+    .list-item__actions {
         flex-grow: 0;
         flex-shrink: 0;
         padding-left: 20px;
     }
 }
 
-.add-integration-option {
-    background-color: white;
-    border: lightgray 1px solid;
+// Backstage Form
+
+.backstage-form {
+    background-color: $white;
+    border: 1px solid $light-gray;
+    padding: 40px 30px 30px;
+
+    label {
+        font-weight: normal;
+    }
+
+    .form-control {
+        background: $white;
+
+        &:focus {
+            border-color: $primary-color;
+        }
+    }
+}
+
+.backstage-form__footer {
+    border-top: 1px solid $light-gray;
+    margin-top: 2.5em;
+    padding-top: 1.8em;
+    text-align: right;
+
+    .has-error {
+        float: left;
+        margin: 0;
+    }
+}
+
+.add-integration {
+    background-color: $white;
+    border: 1px solid $light-gray;
     display: inline-block;
     height: 210px;
-    margin-right: 30px;
+    margin: 0 30px 20px 0;
     padding: 20px;
     text-align: center;
+    vertical-align: top;
     width: 250px;
 
     &:hover {
         color: default;
         text-decoration: none;
     }
-
-    &__image {
-        width: 80px;
-        height: 80px;
-    }
-
-    &__title {
-        color: black;
-        margin-bottom: 10px;
-    }
-
-    &__description {
-        color: gray;
-    }
+}
+
+.add-integration__image {
+    height: 80px;
+    width: 80px;
+}
+
+.add-integration__title {
+    color: $black;
+    margin-bottom: 10px;
+}
+
+.add-integration__description {
+    color: $dark-gray;
 }
diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss
index 345ab11e87..53004520ee 100644
--- a/webapp/sass/utils/_variables.scss
+++ b/webapp/sass/utils/_variables.scss
@@ -8,7 +8,7 @@ $white: rgb(255, 255, 255);
 $black: rgb(0, 0, 0);
 $red: rgb(229, 101, 101);
 $yellow: rgb(255, 255, 0);
-$light-gray: rgba(0, 0, 0, .06);
+$light-gray: rgba(0, 0, 0, .15);
 $gray: rgba(0, 0, 0, .3);
 $dark-gray: rgba(0, 0, 0, .5);