diff --git a/package-lock.json b/package-lock.json
index a99eb626a2..a53570dd90 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13560,9 +13560,9 @@
       }
     },
     "superdesk-ui-framework": {
-      "version": "3.1.14",
-      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.1.14.tgz",
-      "integrity": "sha512-pVgFlzvt5dHv2LVgAHA9WSn5W0RhhlmemHt11gJNker+bOz5NtyDMBSfQHwBPCEjSaGS++jty6vfdzlGHrf8Ew==",
+      "version": "3.1.15",
+      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.1.15.tgz",
+      "integrity": "sha512-izv4Psj1NcGnOzQDAD1dSkR38oA1eTGVV5/zgnig8hI2Z9v9eKKKWkpFLCeqiRNLm2lopoibp4VI7VYyhmewmg==",
       "requires": {
         "@popperjs/core": "^2.4.0",
         "@superdesk/common": "0.0.28",
diff --git a/package.json b/package.json
index 9c53ca2488..413993b88c 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.1.14",
+    "superdesk-ui-framework": "^3.1.15",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",
diff --git a/scripts/apps/content-filters/views/manage-filter-conditions.html b/scripts/apps/content-filters/views/manage-filter-conditions.html
index 9b427c44d2..10ed95bab0 100644
--- a/scripts/apps/content-filters/views/manage-filter-conditions.html
+++ b/scripts/apps/content-filters/views/manage-filter-conditions.html
@@ -26,9 +26,10 @@ <h6>{{ filterCondition.name }}</h6>
     </div>
     <!-- Modal - -->
     <div sd-modal data-model="filterCondition" class="filter-condition-modal modal--large">
-        <div class="modal__header"> <a href="" class="close" ng-click="cancel()"><i class="icon-close-small"></i></a>
+        <div class="modal__header modal__header--flex"> 
             <h3 class="modal__heading" ng-show="filterCondition._id"><span translate>Edit Filter Condition</span> "{{ origFilterCondition.name }}"</h3>
             <h3 class="modal__heading" translate ng-hide="filterCondition._id" translate>Add New Filter Condition</h3>
+            <a href="" class="icn-btn" ng-click="cancel()"><i class="icon-close-small"></i></a>
         </div>
         <div class="modal__body">
             <form name="editForm">
diff --git a/scripts/apps/dashboard/views/workspace.html b/scripts/apps/dashboard/views/workspace.html
index d7416fa241..50ae119f8e 100644
--- a/scripts/apps/dashboard/views/workspace.html
+++ b/scripts/apps/dashboard/views/workspace.html
@@ -79,7 +79,7 @@ <h3 class="modal__heading" translate>Add new widget</h3>
                 </li>
             </ul>
         </div>
-        <div class="modal__body-footer" ng-if="!dashboard.selectedWidget">
+        <div class="modal__footer" ng-if="!dashboard.selectedWidget">
             <button class="btn btn--primary btn--large" ng-click="dashboard.add = false" translate>Done</button>
         </div>
     </div>
@@ -102,6 +102,6 @@ <h3 class="modal__heading" translate>Add new widget</h3>
                     translate>Add This Widget</button>
             </div>
         </div>
-        <div class="modal__body-footer" ng-if="dashboard.selectedWidget"></div>
+        <div class="modal__footer" ng-if="dashboard.selectedWidget"></div>
     </div>
 </div>
diff --git a/scripts/apps/dictionaries/views/dictionary-config-modal.html b/scripts/apps/dictionaries/views/dictionary-config-modal.html
index b25e768933..8fa9f0c218 100644
--- a/scripts/apps/dictionaries/views/dictionary-config-modal.html
+++ b/scripts/apps/dictionaries/views/dictionary-config-modal.html
@@ -129,10 +129,10 @@ <h3 class="modal__heading" ng-show="dictionary._id && !isAbbreviations()" transl
         </div>
 
         <div class="modal__footer">
+            <button id="cancel-edit-btn" type="button" class="btn pull-right" ng-click="cancel()" translate>Cancel</button>
             <button id="save-edit-btn" type="submit" class="btn btn--primary pull-right"
                     ng-click="save()"
                     ng-disabled="editForm.$invalid || progress.width" translate>Save</button>
-            <button id="cancel-edit-btn" type="button" class="btn pull-right" ng-click="cancel()" translate>Cancel</button>
         </div>
     </div>
 </form>
diff --git a/scripts/apps/ingest/views/settings/ingest-routing-content.html b/scripts/apps/ingest/views/settings/ingest-routing-content.html
index 9f4160f0bc..62c8589e59 100644
--- a/scripts/apps/ingest/views/settings/ingest-routing-content.html
+++ b/scripts/apps/ingest/views/settings/ingest-routing-content.html
@@ -81,7 +81,7 @@ <h3 class="modal__heading" translate ng-hide="editScheme._id" translate>Add New
                                                 ng-if="!rule"
                                                 ng-disabled="!editScheme.name"
                                         >
-                                            <button class="btn btn--primary btn--icon-only-circle" sd-tooltip="{{ :: 'Add Rule' | translate }}" flow="right" dropdown__toggle data-test-id="add-routing-rule-button">
+                                            <button class="btn btn--primary btn--icon-only btn--icon-only-circle" sd-tooltip="{{ :: 'Add Rule' | translate }}" flow="right" dropdown__toggle data-test-id="add-routing-rule-button">
                                                 <i class="icon-plus-large"></i>
                                             </button>
                                             <ul class="dropdown__menu nested-menu">
diff --git a/scripts/apps/ingest/views/settings/ingest-rules-content.html b/scripts/apps/ingest/views/settings/ingest-rules-content.html
index de1c7f7528..d8f06068cf 100644
--- a/scripts/apps/ingest/views/settings/ingest-rules-content.html
+++ b/scripts/apps/ingest/views/settings/ingest-rules-content.html
@@ -66,8 +66,10 @@ <h3 class="modal__heading" translate ng-hide="editRuleset._id" translate>Add New
             </div>
         </div>
         <div class="modal__body-footer">
-            <button class="btn" ng-click="cancel()" translate>Cancel</button>
-            <button class="btn btn--primary" ng-click="save(editRuleset)" ng-disabled="!rulesetForm.$valid || !rulesetForm.$dirty" translate>Save</button>
+            <div class="button-group button-group--end button-group--comfort" role="group">
+                <button class="btn" ng-click="cancel()" translate>Cancel</button>
+                <button class="btn btn--primary" ng-click="save(editRuleset)" ng-disabled="!rulesetForm.$valid || !rulesetForm.$dirty" translate>Save</button>
+            </div>
         </div>
     </form>
 </div>
diff --git a/scripts/apps/products/views/products-config-modal.html b/scripts/apps/products/views/products-config-modal.html
index 91ac0422a8..e274668107 100644
--- a/scripts/apps/products/views/products-config-modal.html
+++ b/scripts/apps/products/views/products-config-modal.html
@@ -5,7 +5,7 @@ <h3 class="modal__heading" ng-show="product.edit._id" translate translate-params
         <a href="" class="icn-btn close" ng-click="cancel()"><i class="icon-close-small"></i></a>
     </div>
     <div class="modal__body">
-        <form name="editForm">
+        <form name="editForm" class="d-contents">
             <div class="modal__body-header">
                 <ul class="nav-tabs">
                     <li ng-class="{'nav-tabs__tab--active': modalTab === 'details'}" class="nav-tabs__tab">
@@ -89,7 +89,7 @@ <h3 class="modal__heading" ng-show="product.edit._id" translate translate-params
                 </div>
             </div>
         </form>
-        <div class="modal__body-footer">
+        <div class="modal__footer">
             <button class="btn" ng-click="cancel()" translate>Cancel</button>
             <button class="btn btn--primary" ng-click="save()" ng-disabled="editForm.$invalid || !editForm.$dirty" translate>Save</button>
         </div>
diff --git a/scripts/apps/publish/views/subscribers.html b/scripts/apps/publish/views/subscribers.html
index 5ac07a8bbc..3d4f796ba5 100644
--- a/scripts/apps/publish/views/subscribers.html
+++ b/scripts/apps/publish/views/subscribers.html
@@ -178,7 +178,7 @@ <h3 class="modal__heading" translate ng-hide="subscriber._id">Add New Subscriber
 
                         <fieldset class="separated">
                             <legend translate>Destinations</legend>
-                            <div class="sd-alert sd-alert--hollow sd-alert--primary sd-alert--small">
+                            <div class="sd-alert sd-alert--hollow sd-alert--primary sd-alert--small mb-1-5">
                                 <span translate>For Content API only subscriber destinations are not required.</i>
                             </div>
                             <div sd-destination ng-repeat="destination in destinations" data-destination="destination"
diff --git a/scripts/apps/search/views/multi-action-bar.html b/scripts/apps/search/views/multi-action-bar.html
index 9e516c729d..a61de446d6 100644
--- a/scripts/apps/search/views/multi-action-bar.html
+++ b/scripts/apps/search/views/multi-action-bar.html
@@ -1,5 +1,5 @@
 <div class="multi-action-bar" ng-if="multi.count && display" data-test-id="multi-action-bar">
-    <button class="toggle" ng-click="toggleDisplay()"><i class="icon-chevron-up-thin"></i></button>
+    <button class="btn btn--hollow btn--icon-only btn--icon-only-circle me-1" ng-click="toggleDisplay()"><i class="icon-chevron-up-thin"></i></button>
     <button class="btn" ng-click="multi.reset()">cancel</button>
     <span id="multi-select-count"
           translate
diff --git a/scripts/apps/users/views/edit-form.html b/scripts/apps/users/views/edit-form.html
index a7cca24a76..e56e98ba4f 100644
--- a/scripts/apps/users/views/edit-form.html
+++ b/scripts/apps/users/views/edit-form.html
@@ -369,9 +369,9 @@ <h3 class="modal__heading">Reset password</h3>
 </div>
 
 <div sd-modal data-model="features.reset_user_password && show.change_password && user._id" class="modal--tabs">
-    <div class="modal__header">
-        <button class="modal__close pull-right" ng-click="show.change_password = false"><i class="icon-close-small"></i></button>
+    <div class="modal__header modal__header--flex">
         <h3 class="modal__heading">Change password</h3>
+        <button class="icn-btn" ng-click="show.change_password = false"><i class="icon-close-small"></i></button>
     </div>
     <div class="modal__body" sd-change-password>
         <div class="modal__body-content">
@@ -397,14 +397,14 @@ <h3 class="modal__heading">Change password</h3>
                 </div>
             </form>
         </div>
-        <div class="modal__body-footer">
-            <button class="btn" ng-click="show.change_password = false" translate>Cancel</button>
-            <button class="btn btn--primary"
-                    ng-click="changePasswordForm.$valid && changePassword(oldPwd, newPwd)"
-                    ng-disabled="changePasswordForm.$invalid"
-                    translate>
-                Save password
-            </button>
-        </div>
+    </div>
+    <div class="modal__footer">
+        <button class="btn" ng-click="show.change_password = false" translate>Cancel</button>
+        <button class="btn btn--primary"
+                ng-click="changePasswordForm.$valid && changePassword(oldPwd, newPwd)"
+                ng-disabled="changePasswordForm.$invalid"
+                translate>
+            Save password
+        </button>
     </div>
 </div>
diff --git a/scripts/apps/users/views/settings-roles.html b/scripts/apps/users/views/settings-roles.html
index 3c87c1cc5d..e4ef43862b 100644
--- a/scripts/apps/users/views/settings-roles.html
+++ b/scripts/apps/users/views/settings-roles.html
@@ -24,10 +24,11 @@ <h6>{{role.name}}</h6>
     </div>
 
     <div sd-modal data-model="editRole">
-        <div class="modal__header">
-            <button class="modal__close pull-right" ng-click="cancel()"><i class="icon-close-small"></i></button>
+        <div class="modal__header modal__header--flex">
+            
             <h3 class="modal__heading" ng-show="editRole._id" translate>Edit Role</h3>
-            <h3 class="modal__heading" ng-show="!editRole._id" translate>New Role</h3>                        
+            <h3 class="modal__heading" ng-show="!editRole._id" translate>New Role</h3>
+            <button class="icn-btn" ng-click="cancel()"><i class="icon-close-small"></i></button>                        
         </div>
         <div class="modal__body">
             <form name="roleForm">
diff --git a/scripts/apps/workspace/content/views/profile-settings.html b/scripts/apps/workspace/content/views/profile-settings.html
index 350f3c2625..f3026041b2 100644
--- a/scripts/apps/workspace/content/views/profile-settings.html
+++ b/scripts/apps/workspace/content/views/profile-settings.html
@@ -74,8 +74,9 @@ <h4 translate>Updated</h4>
 
 <!-- Create profile modal -->
 <div sd-modal class="modal--large" data-model="creating" data-close="ctrl.toggleCreate()">
-    <div class="modal__header"> <a href="" class="close" ng-click="ctrl.toggleCreate()"><i class="icon-close-small"></i></a>
+    <div class="modal__header modal__header--flex">
         <h3 class="modal__heading" translate>Add New Content Profile</h3>
+        <a href="" class="icn-btn" ng-click="ctrl.toggleCreate()"><i class="icon-close-small"></i></a>
     </div>
     <div class="modal__body">
         <form name="createForm">
@@ -125,8 +126,8 @@ <h3 class="modal__heading" translate>Add New Content Profile</h3>
         </form>
     </div>
     <div class="modal__footer">
-        <button id="profile-save" class="btn btn--primary" ng-disabled="createForm.$invalid || new.type == null" ng-click="ctrl.save()" translate>Save &amp; Continue</button>
         <button class="btn" ng-click="ctrl.toggleCreate()" translate>Cancel</button>
+        <button id="profile-save" class="btn btn--primary" ng-disabled="createForm.$invalid || new.type == null" ng-click="ctrl.save()" translate>Save &amp; Continue</button>
     </div>
 </div>
 <!-- END Create profile modal -->
@@ -185,8 +186,8 @@ <h3 class="modal__heading">{{ :: 'Editing' | translate }} "{{ editing.form.label
         </form>
     </div>
     <div class="modal__footer" data-test-id="content-profile-edit-view--footer">
-        <button id="profile-update" class="btn btn--primary" ng-disabled="editForm.$invalid || !editForm.$dirty || ctrl.savingInProgress" ng-click="ctrl.update()" translate>Save</button>
         <button class="btn" ng-click="ctrl.toggleEdit()" translate>Cancel</button>
+        <button id="profile-update" class="btn btn--primary" ng-disabled="editForm.$invalid || !editForm.$dirty || ctrl.savingInProgress" ng-click="ctrl.update()" translate>Save</button>
     </div>
     <!-- END Edit profile modal -->
 </div>