diff --git a/e2e/client/specs/helpers/monitoring.ts b/e2e/client/specs/helpers/monitoring.ts
index 74cd30f8d7..f20358ff7c 100644
--- a/e2e/client/specs/helpers/monitoring.ts
+++ b/e2e/client/specs/helpers/monitoring.ts
@@ -344,7 +344,6 @@ class Monitoring {
         };
 
         this.searchAction = function(search) {
-            element(by.css('.flat-searchbar .trigger-icon')).click();
             element(by.model('query')).sendKeys(search);
             browser.actions().sendKeys(protractor.Key.ENTER).perform();
         };
diff --git a/scripts/apps/authoring/metadata/views/metadata-terms.html b/scripts/apps/authoring/metadata/views/metadata-terms.html
index ef7a405c6a..211ea20b01 100644
--- a/scripts/apps/authoring/metadata/views/metadata-terms.html
+++ b/scripts/apps/authoring/metadata/views/metadata-terms.html
@@ -90,7 +90,7 @@
                             <sd-user-avatar data-user="term.user" scroll-container="'#metadata-terms-dropdown-users'"></sd-user-avatar>
                         </span>
                         <span>{{getLocaleName(term, item)}}</span>
-                        <i class="icon-chevron-right-thin sd-margin-l--auto nested-indicator"></i></button>
+                        <i class="icon-chevron-right-thin sd-margin-start--auto nested-indicator"></i></button>
                     <button ng-if="!tree[term[uniqueField]]" ng-click="selectTerm(term, $event)" title="{{getLocaleName(term, item)}}" ng-class="{'greyout': isSelected(term)}" ng-disabled="isSelected(term)">
                         {{getLocaleName(term, item)}}
                     </button>
diff --git a/scripts/apps/authoring/multiedit/views/multiedit.html b/scripts/apps/authoring/multiedit/views/multiedit.html
index 3ed96e1c21..76a67630e8 100644
--- a/scripts/apps/authoring/multiedit/views/multiedit.html
+++ b/scripts/apps/authoring/multiedit/views/multiedit.html
@@ -1,6 +1,6 @@
 <div class="subnav subnav--top">
     <h2 class="page-nav-title" translate>Multiedit</h2>
-    <button class="btn btn--hollow sd-margin-r--1" ng-click="closeMulti()" translate>Exit</button>
+    <button class="btn btn--hollow sd-margin-end--1" ng-click="closeMulti()" translate>Exit</button>
 </div>
 <div class="multiedit-screen main-section">
     <div class="boards-list">
diff --git a/scripts/apps/content-filters/views/manage-filters.html b/scripts/apps/content-filters/views/manage-filters.html
index 97309659e7..5ba47e4b16 100644
--- a/scripts/apps/content-filters/views/manage-filters.html
+++ b/scripts/apps/content-filters/views/manage-filters.html
@@ -142,8 +142,8 @@ <h3 class="modal__heading" translate ng-hide="contentFilter._id">Add New Content
                         ng-class="{'sd-alert--alert': !test.match_results, 'sd-alert--success': test.match_results}"
                         class="sd-alert sd-alert--hollow sd-alert--small sd-alert--no-margin sd-margin-t--2"
                         ng-if="test.content_tested">
-                        <i ng-if="!test.match_results" class="icon-ban-circle sd-margin-r--1"></i>
-                        <i ng-if="test.match_results" class="icon-ok sd-margin-r--1"></i>
+                        <i ng-if="!test.match_results" class="icon-ban-circle sd-margin-end--1"></i>
+                        <i ng-if="test.match_results" class="icon-ok sd-margin-end--1"></i>
                         <span ng-if="test.match_results" translate>Does match</span>
                         <span ng-if="!test.match_results" translate>Doesn't match</span>
                     </div>
diff --git a/scripts/apps/dashboard/user-activity/user-activity.ts b/scripts/apps/dashboard/user-activity/user-activity.ts
index a0e8912400..7abf680d01 100644
--- a/scripts/apps/dashboard/user-activity/user-activity.ts
+++ b/scripts/apps/dashboard/user-activity/user-activity.ts
@@ -17,7 +17,7 @@ angular
         'Upon selection a list of content items is shown categorized as follows:',
     )}
 </p>
-<ul class="simple-list sd-padding-l--2">
+<ul class="simple-list sd-padding-start--2">
   <li class="simple-list__item">
     ${gettext('Items created by the user')}
   </li>
diff --git a/scripts/apps/ingest/views/settings/ingest-sources-content.html b/scripts/apps/ingest/views/settings/ingest-sources-content.html
index d6432206c0..148b74a685 100644
--- a/scripts/apps/ingest/views/settings/ingest-sources-content.html
+++ b/scripts/apps/ingest/views/settings/ingest-sources-content.html
@@ -1,8 +1,8 @@
 <div class="sd-page__flex-helper">
     <div class="sd-page__header">
-        <div class="flat-searchbar" ng-class="{extended: queueSearch}">
+        <div class="flat-searchbar extended">
             <div class="search-handler" >
-                <label for="search-input" class="trigger-icon" ng-click="queueSearch = !queueSearch"><i class="icon-search"></i></label>
+                <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
                 <input id="search-input" type="text" placeholder="{{ :: 'Search' | translate }}" ng-model="query" ng-model-options="{debounce: 500}" ng-change="search(query)">
             </div>
         </div>
diff --git a/scripts/apps/internal-destinations/views/settings.html b/scripts/apps/internal-destinations/views/settings.html
index c3c1be10c1..ae04e2a44c 100644
--- a/scripts/apps/internal-destinations/views/settings.html
+++ b/scripts/apps/internal-destinations/views/settings.html
@@ -1,6 +1,6 @@
 <sd-settings-view>
     <div class="sd-page__main-content">
-        <div className="sd-page__content" style="height: 100%; display: flex;flex-direction: column;">
+        <div class="sd-page__content sd-padding--0">
             <div class="sd-page__header">
                 <h2 class="sd-page__page-heading" translate>Internal Destinations</h2>
             </div>
diff --git a/scripts/apps/master-desk/components/CardListComponent.tsx b/scripts/apps/master-desk/components/CardListComponent.tsx
index 16b8015e49..a632ee7cf6 100644
--- a/scripts/apps/master-desk/components/CardListComponent.tsx
+++ b/scripts/apps/master-desk/components/CardListComponent.tsx
@@ -11,7 +11,7 @@ export class CardListComponent extends React.Component<IProps> {
         return (
             <li className="sd-board__list-item">
                 <h6 className="sd-board__list-item-title">{this.props.name}</h6>
-                <span className="badge sd-margin-r--0-5" style={{'background': this.props.color}}>
+                <span className="badge sd-margin-end--0-5" style={{'background': this.props.color}}>
                     {this.props.total || 0}
                 </span>
             </li>
diff --git a/scripts/apps/master-desk/components/FilterBarComponent.tsx b/scripts/apps/master-desk/components/FilterBarComponent.tsx
index 2232fbd9b2..aa50bef827 100644
--- a/scripts/apps/master-desk/components/FilterBarComponent.tsx
+++ b/scripts/apps/master-desk/components/FilterBarComponent.tsx
@@ -30,7 +30,7 @@ export class FilterBarComponent extends React.Component<IProps, {}> {
                             ) : null,
                         )}
                     </ul>
-                    <a className="text-link sd-margin-l--auto" onClick={() => this.props.removeAllFilters()}>
+                    <a className="text-link sd-margin-start--auto" onClick={() => this.props.removeAllFilters()}>
                         {gettext('Clear all filters')}
                     </a>
                 </div>
diff --git a/scripts/apps/monitoring/views/monitoring-view.html b/scripts/apps/monitoring/views/monitoring-view.html
index dcf3277be2..6ac95ca858 100644
--- a/scripts/apps/monitoring/views/monitoring-view.html
+++ b/scripts/apps/monitoring/views/monitoring-view.html
@@ -6,7 +6,7 @@ <h2 id="monitoring-heading" class="a11y-only" ng-if="type === 'spike'" translate
             <div class="content-list monitoring__content" ng-class="{'sd-loader': aggregate.loading}">
                 <div class="monitoring__toolbar-container" ng-if="hideMonitoringToolbar1 !== true || hideMonitoringToolbar2 !== true">
                     <div class="subnav" ng-if="hideMonitoringToolbar1 !== true">
-                        <div class="flat-searchbar monitoring-backlink" ng-if="monitoring.singleGroup">
+                        <div class="monitoring-backlink" ng-if="monitoring.singleGroup">
                             <button sd-tooltip="{{ 'Back to original view' | translate }}" flow="right" class="navbtn navbtn--left" ng-click="monitoring.viewMonitoringHome()">
                                 <i class="icon-arrow-left"></i>
                             </button>
@@ -91,9 +91,9 @@ <h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.sing
                         </div>
 
                         <!-- search not implemented for usage with custom data source -->
-                        <div ng-if="customDataSource == null" class="flat-searchbar monitoring-flat-searchbar" ng-class="{extended: aggregate.monitoringSearch}">
+                        <div ng-if="customDataSource == null" class="flat-searchbar extended monitoring-flat-searchbar">
                             <div class="search-handler" ng-class="{'search-handler--left-border': !monitoring.singleGroup}">
-                                <label for="search-input" class="trigger-icon" ng-click="aggregate.monitoringSearch = !aggregate.monitoringSearch"><i class="icon-search"></i></label>
+                                <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
                                 <input id="search-input" type="text" placeholder="{{ 'Search' | translate }}" ng-model="query"
                                        ng-keyup="aggregate.searchOnEnter($event, query)">
                                 <button class="search-close" ng-click="aggregate.search(query = null)" ng-class="{visible: query}" aria-label="{{ 'Clear search' | translate }}"><i class="icon-remove-sign"></i></button>
@@ -104,7 +104,7 @@ <h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.sing
                         </div>
 
                         <div sd-multi-action-bar></div>
-                        <div class="subnav__button-stack--square-buttons sd-margin-l--auto">
+                        <div class="subnav__button-stack--square-buttons sd-margin-start--auto">
                             <div class="refresh-box">
                                 <button ng-if="monitoring.showRefresh && (monitoring.singleGroup || monitoring.viewColumn)"
                                         ng-click="refreshGroup(monitoring.singleGroup)"
@@ -206,7 +206,7 @@ <h2 class="subnav__page-title sd-flex-no-grow sd-empty" ng-hide="monitoring.sing
 
                         <div ng-if="type === 'monitoring' && monitoring.viewColumn === true" class="subnav__button-stack subnav__button-stack--padded">
                             <span class="sd-overflow-ellipsis" translate>Columns:</span>
-                            <input class="line-input line-input--inline-mini sd-margin-l--1" type="number" min="2" max="{{aggregate.groups.length}}" ng-model="monitoring.columnsLimit">
+                            <input class="line-input line-input--inline-mini sd-margin-start--1" type="number" min="2" max="{{aggregate.groups.length}}" ng-model="monitoring.columnsLimit">
                         </div>
 
                         <div class="dropdown dropdown--align-right dropdown--compact-state" dropdown  ng-if="type === 'monitoring'">
diff --git a/scripts/apps/publish/views/publish-queue.html b/scripts/apps/publish/views/publish-queue.html
index 9bed9448b3..0c9db45218 100644
--- a/scripts/apps/publish/views/publish-queue.html
+++ b/scripts/apps/publish/views/publish-queue.html
@@ -2,9 +2,9 @@
     <div class="preview-layout" ng-class="{closed: !selected.preview}">
 
         <header class="subnav">
-                <div class="flat-searchbar" ng-class="{extended: queueSearch}">
+                <div class="flat-searchbar extended">
                     <div class="search-handler" role="search">
-                        <label for="search-input" class="trigger-icon" ng-click="queueSearch = !queueSearch"><i class="icon-search"></i></label>
+                        <label for="search-input" class="trigger-icon"><i class="icon-search"></i></label>
                         <input id="search-input" type="text" placeholder="{{ :: 'Search' | translate }}" ng-model="query" ng-model-options="{debounce: 500}" ng-change="search(query)">
                         <button class="search-close" ng-click="search(query = null)" ng-class="{visible: query}" aria-label="{{ :: 'Clear search' | translate }}"><i class="icon-remove-sign"></i></button>
                     </div>
diff --git a/scripts/apps/search/styles/search.scss b/scripts/apps/search/styles/search.scss
index 393db8d7de..f635a96418 100644
--- a/scripts/apps/search/styles/search.scss
+++ b/scripts/apps/search/styles/search.scss
@@ -158,36 +158,43 @@
     border-left: 1px solid var(--sd-colour-line--light);
     border-right: 1px solid var(--sd-colour-line--light);
     position: relative;
+    transition: all 0.2s ease;
+    &:hover {
+        background-color: var(--sd-colour-bg__searchbar);
+    }
 
     &.focused {
         background: var(--sd-colour-bg__searchbar);
         box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
+        background-color: var(--sd-colour-bg__searchbar);
     }
     .search-icon {
         @include user-select(none);
         width: 28px;
         height: 28px;
         display: inline-block;
-        background: url(~images/search-icon.png) no-repeat 5px 5px;
-        opacity: 0.6;
-        &:hover {
-            cursor: pointer;
-            opacity: 1;
+        opacity: 0.5;
+        position: absolute;
+        width: $nav-height;
+        height: $nav-height;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        i {
+            color: var(--color-icon-default);
+            margin-inline-start: 4px;
         }
     }
 
-    .button {
+    .search-start {
         position: absolute;
-        width: $nav-height;
-        height: $nav-height;
-        background-position: center;
-        top: 0;
-        border: 0;
+        opacity: 1;
+        display: flex;
+        inset-block-start: 10px;
+        inset-inline-end: 16px;
         margin: 0;
-        .svg-icon-right {
-            width: 18px;
-            margin-top: 3px;
-        }
     }
 
     input {
@@ -215,7 +222,8 @@
 
     .search-cancel {
         position: absolute;
-        top: 12px; right: 55px;
+        top: 12px;
+        right: 55px;
         background: transparent;
         border: 0;
         padding: 0;
diff --git a/scripts/apps/search/views/item-searchbar.html b/scripts/apps/search/views/item-searchbar.html
index 6379cdf7b1..33594d799b 100644
--- a/scripts/apps/search/views/item-searchbar.html
+++ b/scripts/apps/search/views/item-searchbar.html
@@ -1,6 +1,8 @@
 <div class="item-searchbar" ng-class="{focused: focused}" ng-click="$event.stopPropagation();">
 
-    <label for="search-input" class="button search-icon"></label>
+    <label for="search-input" class="search-icon">
+        <i class="icon-search"></i>
+    </label>
 
     <input id="search-input"
         type="text"
@@ -14,8 +16,8 @@
         <i class="icon-remove-sign"></i>
     </button>
 
-    <button id="search-button" ng-click="search();" class="button trigger" ng-if="focused" tabindex="2">
-        <i class="svg-icon-right"></i>
+    <button id="search-button" ng-click="search();" class="search-start" aria-label="{{ 'Start search' | translate }}" ng-if="focused" tabindex="2">
+        <i class="icon-chevron-right-thin"></i>
     </button>
 
 </div>
\ No newline at end of file
diff --git a/scripts/apps/users/views/list.html b/scripts/apps/users/views/list.html
index 32631c7784..e7ce368df9 100644
--- a/scripts/apps/users/views/list.html
+++ b/scripts/apps/users/views/list.html
@@ -64,7 +64,7 @@ <h3 class="subnav__page-title" translate>Users</h3>
 
             <div class="preview-pane" ng-if="selected.user">
                 <header>
-                    <button ng-click="intent('detail', 'user', selected.user)" class="btn btn--small btn--hollow sd-margin-l--2" ng-show="selected.user._id" id="open-user-profile" translate>View full profile</button>
+                    <button ng-click="intent('detail', 'user', selected.user)" class="btn btn--small btn--hollow sd-margin-start--2" ng-show="selected.user._id" id="open-user-profile" translate>View full profile</button>
                     <button ng-click="selected.user = null" class="icn-btn close-preview"><i class="icon-close-small"></i></button>
                 </header>
                 <div sd-user-details-pane ng-if="selected.user">
diff --git a/scripts/apps/vocabularies/components/VocabularyItemsViewEdit.tsx b/scripts/apps/vocabularies/components/VocabularyItemsViewEdit.tsx
index 01b884751a..15cb17d54b 100644
--- a/scripts/apps/vocabularies/components/VocabularyItemsViewEdit.tsx
+++ b/scripts/apps/vocabularies/components/VocabularyItemsViewEdit.tsx
@@ -185,7 +185,6 @@ interface IState {
     items: Array<IVocabularyItemWithId>;
     page: number;
     searchTerm: string;
-    searchExtended: boolean;
     sortDropdownOpen: boolean;
     sort: ISortOption | null;
     errorMessage: string | null;
@@ -220,7 +219,6 @@ export class VocabularyItemsViewEdit extends React.Component<IProps, IState> {
             ),
             page: 1,
             searchTerm: '',
-            searchExtended: false,
             sortDropdownOpen: false,
             sort: initialSortOption,
             errorMessage: null,
@@ -330,15 +328,12 @@ export class VocabularyItemsViewEdit extends React.Component<IProps, IState> {
         return (
             <React.Fragment>
                 <div className="subnav">
-                    <div className={'flat-searchbar' + (this.state.searchExtended ? ' extended' : '')}>
+                    <div className="flat-searchbar extended">
                         <div className="search-handler" role="search">
                             <label
                                 className="trigger-icon"
                                 htmlFor="vocabulary-search"
                                 aria-label={gettext('Toggle search')}
-                                onClick={() => {
-                                    this.setState({searchExtended: !this.state.searchExtended});
-                                }}
                             >
                                 <i className="icon-search" />
                             </label>
@@ -357,7 +352,7 @@ export class VocabularyItemsViewEdit extends React.Component<IProps, IState> {
                         </div>
                     </div>
 
-                    <div className="sortbar sd-margin-l--auto">
+                    <div className="sortbar sd-margin-start--auto">
                         {this.state.sort == null ? null : (
                             <Dropdown
                                 isOpen={this.state.sortDropdownOpen}
diff --git a/scripts/apps/workspace/content/views/profile-settings.html b/scripts/apps/workspace/content/views/profile-settings.html
index 9f1d8068b3..1d45104c1b 100644
--- a/scripts/apps/workspace/content/views/profile-settings.html
+++ b/scripts/apps/workspace/content/views/profile-settings.html
@@ -3,11 +3,13 @@
         <div class="sd-page__header sd-page__header--white">
             <h2 class="sd-page__page-heading" translate>Content Profiles</h2>
         </div>
-        <div class="sd-page__header">
+        <div class="sd-page__header">         
             <sd-search-handler ng-model="query.label" data-debounce="200"></sd-search-handler>
-    
-            <sd-check ng-model="active_only" label-position="inside" type="radio" style="margin-left: 0;">{{:: 'All'| translate}}</sd-check>
-            <sd-check ng-model="active_only" ng-value="true" label-position="inside" type="radio" ng-checked="true">{{:: 'Active only'| translate}}</sd-check>
+            <div class="button-group button-group--start button-group--comfort">
+                <sd-check ng-model="active_only" label-position="inside" type="radio" style="margin-left: 0;">{{:: 'All'| translate}}</sd-check>
+                <sd-check ng-model="active_only" ng-value="true" label-position="inside" type="radio" ng-checked="true">{{:: 'Active only'| translate}}</sd-check>
+            </div>
+
             <span class="sd-page__element-grow"></span>
             <button id="add-new-content-profile" class="btn btn--primary" ng-click="ctrl.toggleCreate()" data-close="cancel()">
                 <i class="icon-plus-sign icon--white"></i>{{ :: 'Add New' | translate }}
diff --git a/scripts/core/ArticlesListByQueryWithFilters.tsx b/scripts/core/ArticlesListByQueryWithFilters.tsx
index 777eeb1e12..5c26d710ec 100644
--- a/scripts/core/ArticlesListByQueryWithFilters.tsx
+++ b/scripts/core/ArticlesListByQueryWithFilters.tsx
@@ -350,7 +350,14 @@ export class ArticlesListByQueryWithFilters extends React.PureComponent<IProps,
                                         </h3>
                                         <Badge type="default">{itemsCount}</Badge>
                                     </div>
-                                    <div style={{marginLeft: 10, flexGrow: 1}}>
+                                    <div
+                                        className={classNames(
+                                            'sd-display--flex',
+                                            'sd-flex--grow',
+                                            'sd-flex--align-self-stretch',
+                                            'sd-margin-start--2',
+                                        )}
+                                    >
                                         <SearchBar
                                             allowCollapsed={false}
                                             extendOnOpen={false}
diff --git a/scripts/core/itemList/views/relatedItem-list-widget.html b/scripts/core/itemList/views/relatedItem-list-widget.html
index 8f880db29a..8dc67f10df 100644
--- a/scripts/core/itemList/views/relatedItem-list-widget.html
+++ b/scripts/core/itemList/views/relatedItem-list-widget.html
@@ -16,8 +16,8 @@
                     </div>
                     <div class="boxed-list__item-content" ng-click="view(item)">
                         <div class="boxed-list__item-content-row boxed-list__item-content-row--fixed">
-                            <span class="badge badge--square green--600 sd-margin-r--1" ng-if="options.searchEnabled && actions.update && actions.update.condition(item)" title="{{ :: 'Can be associated as an update' | translate }}">U</span>
-                            <span class="badge badge--square indigo--600 sd-margin-r--1" ng-if="options.searchEnabled && actions.addTake && actions.addTake.condition(item)" title="{{ :: 'Can be associated as a take' | translate }}">T</span>
+                            <span class="badge badge--square green--600 sd-margin-end--1" ng-if="options.searchEnabled && actions.update && actions.update.condition(item)" title="{{ :: 'Can be associated as an update' | translate }}">U</span>
+                            <span class="badge badge--square indigo--600 sd-margin-end--1" ng-if="options.searchEnabled && actions.addTake && actions.addTake.condition(item)" title="{{ :: 'Can be associated as a take' | translate }}">T</span>
                             <span class="sd-text__slugline sd-overflow-ellipsis" title="{{ item.slugline }}">{{ item.slugline }}</span>
                             <time class="sd-text__date-time sd-text__date-time--small ml-auto" sd-datetime data-date="item.versioncreated">25.04.2019</time>
                         </div>
diff --git a/scripts/core/ui/components/ListPage/generic-list-page.tsx b/scripts/core/ui/components/ListPage/generic-list-page.tsx
index ab817c4d95..a909241308 100644
--- a/scripts/core/ui/components/ListPage/generic-list-page.tsx
+++ b/scripts/core/ui/components/ListPage/generic-list-page.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import {noop} from 'lodash';
 import ReactPaginate from 'react-paginate';
-
+import classNames from 'classnames';
 import {ListItem, ListItemColumn} from 'core/components/ListItem';
 import {PageContainer, PageContainerItem} from 'core/components/PageLayout';
 import {GenericListPageItemViewEdit} from './generic-list-page-item-view-edit';
@@ -375,57 +375,54 @@ export class GenericListPageComponent<T>
         };
 
         return (
-            <div style={{display: 'flex', flexDirection: 'column', width: '100%', height: '100%'}}>
+            <div className="sd-page__flex-helper">
                 <SubNav>
                     <div
-                        style={{
-                            display: 'flex',
-                            width: '100%',
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                        }}
+                        className="sd-display--contents"
                     >
                         {
                             this.props.disallowFiltering ? null : (
-                                <div>
-                                    <Button
-                                        icon="icon-filter-large"
-                                        onClick={() => this.setFiltersVisibility(!this.state.filtersOpen)}
-                                        active={this.state.filtersOpen}
-                                        darker={true}
-                                        data-test-id="toggle-filters"
-                                    />
-                                </div>
+                                <Button
+                                    icon="icon-filter-large"
+                                    onClick={() => this.setFiltersVisibility(!this.state.filtersOpen)}
+                                    active={this.state.filtersOpen}
+                                    darker={true}
+                                    data-test-id="toggle-filters"
+                                />
                             )
                         }
 
                         {
                             this.props.fieldForSearch == null ? null : (
-                                <div style={{flexGrow: 1}}>
-                                    <SearchBar
-                                        ref={(instance) => {
-                                            this.searchBarRef = instance;
-                                        }}
-                                        value=""
-                                        allowCollapsed={false}
-                                        onSearch={(value) => {
-                                            this.handleFilterFieldChange(
-                                                this.props.fieldForSearch.field,
-                                                value,
-                                                this.filter,
-                                            );
-                                        }}
-                                    />
-                                </div>
+                                <SearchBar
+                                    ref={(instance) => {
+                                        this.searchBarRef = instance;
+                                    }}
+                                    value=""
+                                    allowCollapsed={false}
+                                    onSearch={(value) => {
+                                        this.handleFilterFieldChange(
+                                            this.props.fieldForSearch.field,
+                                            value,
+                                            this.filter,
+                                        );
+                                    }}
+                                />
                             )
                         }
 
-                        <div style={{display: 'flex', marginLeft: 'auto', gap: '10px', paddingLeft: 10}}>
+                        <div
+                            className={classNames(
+                                'sd-display--flex',
+                                'sd-padding-s--2',
+                                'sd-margin-start--auto',
+                                'sd-gap--small',
+                            )}
+                        >
                             {this.props.crudManager._meta.total == null ? null : (
-                                <span style={{display: 'flex', alignItems: 'center'}}>
+                                <span className="sd-display--flex sd-flex--items-center sd-gap--small">
                                     <span>{gettext('Total:')}</span>
-                                    &nbsp;
-                                    <span><span className="badge">{this.props.crudManager._meta.total}</span></span>
+                                    <span className="badge">{this.props.crudManager._meta.total}</span>
                                 </span>
                             )}
 
diff --git a/scripts/core/ui/components/SearchBar/index.tsx b/scripts/core/ui/components/SearchBar/index.tsx
index afe8fc46f5..dd3f7af65a 100644
--- a/scripts/core/ui/components/SearchBar/index.tsx
+++ b/scripts/core/ui/components/SearchBar/index.tsx
@@ -39,7 +39,6 @@ export default class SearchBar extends React.Component<IProps, IState> {
         };
 
         this.dom = {searchIcon: null};
-        this.toggleSearchBar = this.toggleSearchBar.bind(this);
         this.onSearchChange = this.onSearchChange.bind(this);
         this.resetSearch = this.resetSearch.bind(this);
         this.resetSearchValue = this.resetSearchValue.bind(this);
@@ -54,14 +53,6 @@ export default class SearchBar extends React.Component<IProps, IState> {
         }
     }
 
-    toggleSearchBar() {
-        if (this.props.allowCollapsed === false) {
-            return;
-        }
-
-        this.setState({searchBarExtended: !this.state.searchBarExtended});
-    }
-
     /** Reset the field value, close the search bar and load events */
     resetSearch() {
         this.setState({
@@ -112,13 +103,13 @@ export default class SearchBar extends React.Component<IProps, IState> {
                             <>
                                 {removeButton}
 
-                                <IconButton
-                                    style="outline"
-                                    size="small"
-                                    ariaValue={gettext('Search')}
-                                    icon="chevron-right-thin"
+                                <button
+                                    className="search-start visible"
                                     onClick={() => this.props.onSearch(this.state.searchInputValue)}
-                                />
+                                    aria-label="Start search"
+                                >
+                                    <i className="icon-chevron-right-thin" />
+                                </button>
                             </>
                         )
                         : null
@@ -126,12 +117,11 @@ export default class SearchBar extends React.Component<IProps, IState> {
         );
 
         return (
-            <div className={'SearchBar flat-searchbar' + (searchBarExtended ? ' extended' : '')}>
-                <div className="search-handler" style={{alignItems: 'center'}}>
+            <div className="SearchBar flat-searchbar extended">
+                <div className="search-handler">
                     <label
                         htmlFor={_uniqueId}
                         className="trigger-icon"
-                        onClick={this.toggleSearchBar}
                         ref={(node) => this.dom.searchIcon = node}
                     >
                         <i className="icon-search" />
diff --git a/scripts/core/ui/components/SearchBar/manual.tsx b/scripts/core/ui/components/SearchBar/manual.tsx
index 4a778d1963..c49956a7d1 100644
--- a/scripts/core/ui/components/SearchBar/manual.tsx
+++ b/scripts/core/ui/components/SearchBar/manual.tsx
@@ -11,14 +11,7 @@ export class ManualSearch extends React.PureComponent<IProps> {
     render(): React.ReactNode {
         return (
             <div
-                style={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    height: '100%',
-                    width: '100%',
-                }}
+                className="sd-display--flex sd-flex--grow sd-flex--items-center sd-flex--align-self-stretch"
             >
                 <input
                     onKeyUp={(e) => {
diff --git a/scripts/extensions/sams/src/components/workspaceSubnav.tsx b/scripts/extensions/sams/src/components/workspaceSubnav.tsx
index dbaf07fd4f..effd76d188 100644
--- a/scripts/extensions/sams/src/components/workspaceSubnav.tsx
+++ b/scripts/extensions/sams/src/components/workspaceSubnav.tsx
@@ -397,8 +397,8 @@ export class WorkspaceSubnavComponent extends React.PureComponent<IProps> {
                                 )}
                                 flow="down"
                             >
-                                <span className="sd-margin-r--1">
-                                    <span className="sd-margin-r--1">
+                                <span className="sd-margin-end--1">
+                                    <span className="sd-margin-end--1">
                                         {gettext('Total:')}
                                     </span>
                                     <Badge text={numberToString(this.props.totalAssets)} />
diff --git a/scripts/extensions/videoEditor/src/VideoEditorThumbnail.tsx b/scripts/extensions/videoEditor/src/VideoEditorThumbnail.tsx
index 0076285b29..d2444bda95 100644
--- a/scripts/extensions/videoEditor/src/VideoEditorThumbnail.tsx
+++ b/scripts/extensions/videoEditor/src/VideoEditorThumbnail.tsx
@@ -331,7 +331,7 @@ export class VideoEditorThumbnail extends React.Component<IProps, IState> {
                                 >
                                     <i className="icon-photo" />
                                 </a>
-                                <form className="sd-margin-l--1">
+                                <form className="sd-margin-start--1">
                                     <label>
                                         <input
                                             type="file"
diff --git a/styles/sass/sf-additional.scss b/styles/sass/sf-additional.scss
index 99792c7d9a..0effae9abc 100644
--- a/styles/sass/sf-additional.scss
+++ b/styles/sass/sf-additional.scss
@@ -196,30 +196,37 @@
 }
 
 .flat-searchbar {
-    flex-grow: 0;
+    display: flex;
+    align-items: stretch;
+    align-self: stretch;
+    display: flex;
+    flex-grow: 1;
+    transition: all ease 0.2s;
     .search-handler {
+        flex-grow: 1;
         min-width: 48px;
-        padding: 8px 10px 8px 14px;
+        padding: 4px 10px 4px 14px;
         background: none;
-        display: flex;
+        display: flex !important;
+        align-items: center;
         white-space: nowrap;
         border-right: 1px solid var(--sd-colour-line--light) !important;
         transition: all 0.3s ease;
+        gap: 4px;
         input {
-            height: 28px;
-            line-height: 100%;
             font-size: 14px;
             border: 0 !important;
             width: auto;
             padding: 0;
-            color: $sd-text;
+            color: var(--color-text);
             background-color: transparent;
             transition: all 0.3s ease;
+            flex-grow: 1;
             &:focus {
                 box-shadow: none;
             }
             &::placeholder {
-                color: $sd-text-light;
+                color: var(--color-text-lighter);
                 font-weight: 300;
                 letter-spacing: 0.03rem;
             }
@@ -230,10 +237,9 @@
             height: 28px;
             display: block;
             opacity: 0.5;
-            &:hover {
-                cursor: pointer;
-                opacity: 0.8;
-            }
+            margin: 0;
+            flex-shrink: 0;
+            flex-grow: 0;
             i {
                 padding: 7px 3px 4px 6px;
                 color: var(--color-icon-default);
@@ -280,65 +286,15 @@
         }
     }
 
-    .search-start {
-        height: 2.8rem;
-        width: 2.8rem;
-        flex-grow: 0;
-        flex-shrink: 0;
-        align-self: center;
-        margin: 0 0.8rem 0 0;
-        padding: 0;
-        transition: all 0.2s ease-out;
-        background-color: var(--sd-colour-interactive--alpha-40);
-        border-radius: 9999px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        display: none;
-        i {
-            transition: color 0.2s ease-out;
-            color: var(--sd-colour-interactive--alpha-80);
-        }
-        &.visible {
-            opacity: 1;
-            display: flex;
-            &:hover {
-                background-color: var(--sd-colour-interactive--alpha-80);
-                i {
-                    color: $white;
-                }
-            }
-            &:active {
-                background-color: var(--sd-colour-interactive);
-                i {
-                    color: $white;
-                }
-            }
-        }
-        &:hover {
-            background-color: var(--sd-colour-interactive--alpha-80);
-            i {
-                color: $white;
-            }
-        }
-        &:active {
-            background-color: var(--sd-colour-interactive);
-            i {
-                color: $white;
-            }
-        }
-    }
     &.extended {
         flex-grow: 1;
         .search-handler {
             box-shadow: none !important;
+            min-width: 320px;
             input {
                 flex-grow: 1;
                 flex-shrink: 1;
+
                 font-size: 1.4rem;
                 padding: 0;
                 padding-right: 0px;
@@ -359,6 +315,75 @@
         }
         &:focus-within {
             box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
+            background-color: var(--sd-colour-bg__searchbar);
+        }
+        .trigger-icon,
+        .trigger-icon:hover {
+            opacity: 0.5;
+            margin: 0;
+            pointer-events: none;
+        }
+    }
+    
+    &:focus-within {
+        box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), inset 0 0 0 6px var(--sd-colour-interactive--alpha-20);
+        background-color: var(--sd-colour-bg__searchbar);
+        outline: none;
+    }
+    &:hover {
+        background-color: var(--sd-colour-bg__searchbar);
+    }
+}
+
+.search-start {
+    height: 2.8rem;
+    width: 2.8rem;
+    flex-grow: 0;
+    flex-shrink: 0;
+    align-self: center;
+    margin: 0 0.8rem 0 0;
+    padding: 0;
+    transition: all 0.2s ease-out;
+    background-color: var(--sd-colour-interactive--alpha-40);
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    display: none;
+    i {
+        transition: color 0.2s ease-out;
+        color: var(--sd-colour-interactive--alpha-80);
+    }
+    &.visible {
+        opacity: 1;
+        display: flex;
+        &:hover {
+            background-color: var(--sd-colour-interactive--alpha-80);
+            i {
+                color: $white;
+            }
+        }
+        &:active {
+            background-color: var(--sd-colour-interactive);
+            i {
+                color: $white;
+            }
+        }
+    }
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-80);
+        i {
+            color: $white;
+        }
+    }
+    &:active {
+        background-color: var(--sd-colour-interactive);
+        i {
+            color: $white;
         }
     }
 }
@@ -2353,3 +2378,121 @@ sd-multi-image-edit {
         border-radius: 0 !important;
     }
 }
+.sd-flex--align-self-stretch {
+    align-self: stretch !important;
+}
+.subnav {
+    [sd-searchbar] {
+        display: contents;
+    }
+}
+
+.publish-queue {
+    .flat-searchbar.extended {
+        max-width: 380px;
+    }
+}
+
+
+// Logical Properties & Values for margins and paddings
+// Margin
+.sd-margin-start {
+    &--0-5 {
+        margin-inline-start: $sd-base-increment / 2;
+    }
+    &--1 {
+        margin-inline-start: $sd-base-increment * 1;
+    }
+    &--1-5 {
+        margin-inline-start: $sd-base-increment * 1.5;
+    }
+    &--2 {
+        margin-inline-start: $sd-base-increment * 2;
+    }
+    &--3 {
+        margin-inline-start: $sd-base-increment * 3;
+    }
+    &--4 {
+        margin-inline-start: $sd-base-increment * 4;
+    }
+    &--5 {
+        margin-inline-start: $sd-base-increment * 5;
+    }
+    &--auto {
+        margin-inline-start: auto;
+    }
+}
+.sd-margin-end {
+    &--0-5 {
+        margin-inline-end: $sd-base-increment / 2;
+    }
+    &--1 {
+        margin-inline-end: $sd-base-increment * 1;
+    }
+    &--1-5 {
+        margin-inline-end: $sd-base-increment * 1.5;
+    }
+    &--2 {
+        margin-inline-end: $sd-base-increment * 2;
+    }
+    &--3 {
+        margin-inline-end: $sd-base-increment * 3;
+    }
+    &--4 {
+        margin-inline-end: $sd-base-increment * 4;
+    }
+    &--5 {
+        margin-inline-end: $sd-base-increment * 5;
+    }
+    &--auto {
+        margin-inline-end: auto;
+    }
+}
+
+// Padding
+.sd-padding-start {
+    &--0-5 {
+        padding-inline-start: $sd-base-increment / 2;
+    }
+    &--1 {
+        padding-inline-start: $sd-base-increment * 1;
+    }
+    &--1-5 {
+        padding-inline-start: $sd-base-increment * 1.5;
+    }
+    &--2 {
+        padding-inline-start: $sd-base-increment * 2;
+    }
+    &--3 {
+        padding-inline-start: $sd-base-increment * 3;
+    }
+    &--4 {
+        padding-inline-start: $sd-base-increment * 4;
+    }
+    &--5 {
+        padding-inline-start: $sd-base-increment * 5;
+    }
+}
+.sd-padding-end {
+    &--0-5 {
+        padding-inline-end: $sd-base-increment / 2;
+    }
+    &--1 {
+        padding-inline-end: $sd-base-increment * 1;
+    }
+    &--1-5 {
+        padding-inline-end: $sd-base-increment * 1.5;
+    }
+    &--2 {
+        padding-inline-end: $sd-base-increment * 2;
+    }
+    &--3 {
+        padding-inline-end: $sd-base-increment * 3;
+    }
+    &--4 {
+        padding-inline-end: $sd-base-increment * 4;
+    }
+    &--5 {
+        padding-inline-end: $sd-base-increment * 5;
+    }
+}