diff --git a/cypress/e2e/submission.cy.ts b/cypress/e2e/submission.cy.ts
index ebdabbde2e0..d46bb9fc0d6 100644
--- a/cypress/e2e/submission.cy.ts
+++ b/cypress/e2e/submission.cy.ts
@@ -217,7 +217,7 @@ describe('New Submission page', () => {
     });
 
     // Close popup window
-    cy.get('ds-dynamic-lookup-relation-modal button.close').click();
+    cy.get('ds-dynamic-lookup-relation-modal button.btn-close').click();
 
     // Back on the form, click the discard button to remove new submission
     // Clicking it will display a confirmation, which we will confirm with another click
diff --git a/package-lock.json b/package-lock.json
index 79455f7256c..9efed533479 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@angular/ssr": "^17.3.11",
         "@babel/runtime": "7.26.0",
         "@kolkov/ngx-gallery": "^2.0.1",
-        "@ng-bootstrap/ng-bootstrap": "^11.0.0",
+        "@ng-bootstrap/ng-bootstrap": "^12.0.0",
         "@ng-dynamic-forms/core": "^16.0.0",
         "@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
         "@ngrx/effects": "^17.1.1",
@@ -33,7 +33,7 @@
         "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
         "angulartics2": "^12.2.0",
         "axios": "^1.7.4",
-        "bootstrap": "^4.6.1",
+        "bootstrap": "^5.3",
         "cerialize": "0.1.18",
         "cli-progress": "^3.12.0",
         "colors": "^1.4.0",
@@ -5494,9 +5494,9 @@
       }
     },
     "node_modules/@ng-bootstrap/ng-bootstrap": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-11.0.1.tgz",
-      "integrity": "sha512-xpXpW2x2S9ZQhEu5kCmEAFf8WvkVD+rcKb1NLQiLuiZgAQR7GXVexXy5Y+RIvTjAQmPEVyxaSgYiJA6sWNJLNw==",
+      "version": "12.1.2",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz",
+      "integrity": "sha512-p27c+mYVdHiJMYrj5hwClVJxLdiZxafAqlbw1sdJh2xJ1rGOe+H/kCf5YDRbhlHqRN+34Gr0RQqIUeD1I2V8hg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -5505,6 +5505,7 @@
         "@angular/core": "^13.0.0",
         "@angular/forms": "^13.0.0",
         "@angular/localize": "^13.0.0",
+        "@popperjs/core": "^2.10.2",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
@@ -6248,6 +6249,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-dnd/asap": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz",
@@ -8677,9 +8688,9 @@
       "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw=="
     },
     "node_modules/bootstrap": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
       "funding": [
         {
           "type": "github",
@@ -8691,8 +8702,7 @@
         }
       ],
       "peerDependencies": {
-        "jquery": "1.9.1 - 3",
-        "popper.js": "^1.16.1"
+        "@popperjs/core": "^2.11.8"
       }
     },
     "node_modules/brace-expansion": {
@@ -14845,13 +14855,6 @@
         "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/js-cookie": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
@@ -18337,18 +18340,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-      "license": "MIT",
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/portscanner": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
diff --git a/package.json b/package.json
index 206b025da36..b019c094e56 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,9 @@
       "@angular/forms": "^17.3.11"
     },
     "@ng-dynamic-forms/ui-ng-bootstrap": {
-      "ngx-mask": "14.2.4"
+      "ngx-mask": "14.2.4",
+      "@ng-bootstrap/ng-bootstrap": "^12.0.0",
+      "bootstrap": "^5.3"
     },
     "@ngtools/webpack": {
       "@angular/compiler-cli": "^17.3.11",
@@ -110,7 +112,7 @@
     "@angular/ssr": "^17.3.11",
     "@babel/runtime": "7.26.0",
     "@kolkov/ngx-gallery": "^2.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@ng-dynamic-forms/core": "^16.0.0",
     "@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
     "@ngrx/effects": "^17.1.1",
@@ -120,7 +122,7 @@
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "angulartics2": "^12.2.0",
     "axios": "^1.7.4",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.3",
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
     "colors": "^1.4.0",
diff --git a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
index f96ddf4a235..6c748ca2e78 100644
--- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
+++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
@@ -1,19 +1,13 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'browse'">
   <ngb-panel [id]="'browse'">
-    <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
+    <ng-template ngbPanelTitle>
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle('browse')"
            data-test="browse">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
                 [attr.aria-expanded]="acc.isExpanded('browse')"
                 aria-controls="bulk-access-browse-panel-content">
           {{ 'admin.access-control.bulk-access-browse.header' | translate }}
         </button>
-        <div class="text-right d-flex gap-2">
-          <div class="d-flex my-auto">
-            <span *ngIf="acc.isExpanded('browse')" class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!acc.isExpanded('browse')" class="fas fa-chevron-down fa-fw"></span>
-          </div>
-        </div>
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
@@ -22,7 +16,7 @@
           <li [ngbNavItem]="'search'" role="presentation">
             <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
             <ng-template ngbNavContent>
-              <div class="mx-n3">
+              <div class="bulk-access-search">
                 <ds-search [configuration]="'administrativeBulkAccess'"
                                   [selectable]="true"
                                   [selectionConfig]="{ repeatable: true, listId: listId }"
@@ -42,7 +36,7 @@
                 [showPaginator]="false"
                 (prev)="pagePrev()"
                 (next)="pageNext()">
-                <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
+              <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ms-4">
                   <li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
                               currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
                       class="mt-4 mb-4 d-flex"
diff --git a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.scss b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.scss
index e69de29bb2d..0fb077b979c 100644
--- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.scss
+++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.scss
@@ -0,0 +1,4 @@
+.bulk-access-search {
+    margin-right: calc(var(--bs-gutter-x, 1.5rem) / -2);
+    margin-left: calc(var(--bs-gutter-x, 1.5rem) / -2);
+}
diff --git a/src/app/access-control/bulk-access/bulk-access.component.html b/src/app/access-control/bulk-access/bulk-access.component.html
index c164cc5c319..fca6ff52949 100644
--- a/src/app/access-control/bulk-access/bulk-access.component.html
+++ b/src/app/access-control/bulk-access/bulk-access.component.html
@@ -7,7 +7,7 @@ <h1>{{ 'admin.access-control.bulk-access.title' | translate }}</h1>
   <hr>
 
   <div class="d-flex justify-content-end">
-    <button class="btn btn-outline-primary mr-3" (click)="reset()">
+    <button class="btn btn-outline-primary me-3" (click)="reset()">
       {{ 'access-control-cancel' | translate }}
     </button>
     <button class="btn btn-primary" [disabled]="!canExport()" (click)="submit()">
diff --git a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html
index c41053874e7..0b5c872affc 100644
--- a/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html
+++ b/src/app/access-control/bulk-access/settings/bulk-access-settings.component.html
@@ -1,17 +1,11 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'settings'">
   <ngb-panel [id]="'settings'">
-    <ng-template ngbPanelHeader>
+    <ng-template ngbPanelTitle>
       <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded('settings')"
                 aria-controls="bulk-access-settings-panel-content">
           {{ 'admin.access-control.bulk-access-settings.header' | translate }}
         </button>
-        <div class="text-right d-flex gap-2">
-          <div class="d-flex my-auto">
-            <span *ngIf="acc.isExpanded('settings')" class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!acc.isExpanded('settings')" class="fas fa-chevron-down fa-fw"></span>
-          </div>
-        </div>
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.html b/src/app/access-control/epeople-registry/epeople-registry.component.html
index b5a26533cfa..8c462daf6ba 100644
--- a/src/app/access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -5,10 +5,10 @@
         <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
 
         <div>
-          <button class="mr-auto btn btn-success addEPerson-button"
+          <button class="me-auto btn btn-success addEPerson-button"
                   [routerLink]="'create'">
             <i class="fas fa-plus"></i>
-            <span class="d-none d-sm-inline ml-1">{{labelPrefix + 'button.add' | translate}}</span>
+            <span class="d-none d-sm-inline ms-1">{{labelPrefix + 'button.add' | translate}}</span>
           </button>
         </div>
       </div>
@@ -18,17 +18,17 @@ <h2 id="search" class="border-bottom pb-2">
       </h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div>
-          <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
+            <select name="scope" id="scope" formControlName="scope" class="form-select" aria-label="Search scope">
             <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
             <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
           </select>
         </div>
-        <div class="flex-grow-1 mr-3 ml-3">
-          <div class="form-group input-group">
+          <div class="flex-grow-1 me-3 ms-3">
+            <div class="mb-3 input-group">
             <input type="text" name="query" id="query" formControlName="query"
                    class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
                    [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
-            <span class="input-group-append">
+              <span class="input-group-append">
                 <button type="submit" class="search-button btn btn-primary">
                   <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
                 </button>
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
index ae1046be452..5093f80f143 100644
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -29,7 +29,7 @@ <h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
             <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
           </button>
         </div>
-        <div *ngIf="canImpersonate$ | async" between class="btn-group">
+        <div *ngIf="canImpersonate$ | async" between class="btn-group ms-1">
           <button *ngIf="!isImpersonated" class="btn btn-primary" type="button" (click)="impersonate()">
             <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
           </button>
diff --git a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
index 591d80bdd59..b0cf0fa1253 100644
--- a/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.html
@@ -75,8 +75,8 @@ <h3 id="search" class="border-bottom pb-2">
   </h3>
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-    <div class="flex-grow-1 mr-3">
-      <div class="form-group input-group mr-3">
+    <div class="flex-grow-1 me-3">
+      <div class="form-group input-group me-3">
         <input type="text" name="query" id="query" formControlName="query"
                class="form-control" aria-label="Search input">
         <span class="input-group-append">
diff --git a/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
index 66404bde0d1..32525fb2b50 100644
--- a/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
+++ b/src/app/access-control/group-registry/group-form/subgroup-list/subgroups-list.component.html
@@ -62,8 +62,8 @@ <h4 id="search" class="border-bottom pb-2">
 
   </h4>
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-    <div class="flex-grow-1 mr-3">
-      <div class="form-group input-group mr-3">
+    <div class="flex-grow-1 me-3">
+      <div class="mb-3 input-group me-3">
         <input type="text" name="query" id="query" formControlName="query"
                class="form-control" aria-label="Search input">
         <span class="input-group-append">
@@ -75,7 +75,7 @@ <h4 id="search" class="border-bottom pb-2">
       </div>
     </div>
     <div>
-      <button (click)="clearFormAndResetResult();" class="btn btn-secondary float-right">
+      <button (click)="clearFormAndResetResult();" class="btn btn-secondary float-end">
         {{messagePrefix + '.button.see-all' | translate}}
       </button>
     </div>
diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
index c2d998d9541..3d134b3f7eb 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -4,18 +4,18 @@
       <div class="d-flex justify-content-between border-bottom mb-3">
         <h1 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h1>
         <div>
-          <button class="mr-auto btn btn-success"
+          <button class="me-auto btn btn-success"
                   [routerLink]="'create'">
             <i class="fas fa-plus"></i>
-            <span class="d-none d-sm-inline ml-1">{{messagePrefix + 'button.add' | translate}}</span>
+            <span class="d-none d-sm-inline ms-1">{{messagePrefix + 'button.add' | translate}}</span>
           </button>
         </div>
       </div>
 
       <h2 id="search" class="border-bottom pb-2">{{messagePrefix + 'search.head' | translate}}</h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-        <div class="flex-grow-1 mr-3">
-          <div class="form-group input-group">
+        <div class="flex-grow-1 me-3">
+          <div class="mb-3 input-group">
             <input type="text" name="query" id="query" formControlName="query"
                    class="form-control" [attr.aria-label]="messagePrefix + 'search.placeholder' | translate"
                    [placeholder]="(messagePrefix + 'search.placeholder' | translate)" >
diff --git a/src/app/admin/admin-import-batch-page/batch-import-page.component.html b/src/app/admin/admin-import-batch-page/batch-import-page.component.html
index c51ee7597c5..c321fb235d8 100644
--- a/src/app/admin/admin-import-batch-page/batch-import-page.component.html
+++ b/src/app/admin/admin-import-batch-page/batch-import-page.component.html
@@ -8,7 +8,7 @@ <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
   <p>
     <button class="btn btn-primary" (click)="this.selectCollection();">{{'admin.metadata-import.page.button.select-collection' | translate}}</button>
   </p>
-  <div class="form-group">
+  <div class="mb-3">
     <div class="form-check">
       <input class="form-check-input" type="checkbox" id="validateOnly" [(ngModel)]="validateOnly">
       <label class="form-check-label" for="validateOnly">
@@ -25,7 +25,7 @@ <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
              [uncheckedLabel]="'admin.metadata-import.page.toggle.url' | translate"
              [checked]="isUpload"
              (change)="toggleUpload()" ></ui-switch>
-  <small class="form-text text-muted">
+  <small class="form-text text-muted d-block">
     {{'admin.batch-import.page.toggle.help' | translate}}
   </small>
 
@@ -38,7 +38,7 @@ <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
     [dropMessageLabelReplacement]="'admin.batch-import.page.dropMsgReplace'">
   </ds-file-dropzone-no-uploader>
 
-  <div class="form-group mt-2" *ngIf="!isUpload">
+  <div class="mb-3 mt-2" *ngIf="!isUpload">
     <input class="form-control" type="text" placeholder="{{'admin.metadata-import.page.urlMsg' | translate}}"
            data-test="file-url-input" [(ngModel)]="fileURL">
   </div>
diff --git a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
index 73e69737ca8..154e69d2c9b 100644
--- a/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
+++ b/src/app/admin/admin-import-metadata-page/metadata-import-page.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <h1 id="header">{{'admin.metadata-import.page.header' | translate}}</h1>
   <p>{{'admin.metadata-import.page.help' | translate}}</p>
-  <div class="form-group">
+  <div class="mb-3">
     <div class="form-check">
       <input class="form-check-input" type="checkbox" id="validateOnly" [(ngModel)]="validateOnly">
       <label class="form-check-label" for="validateOnly">
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
index a9801828820..3a42eb7825f 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
@@ -37,7 +37,7 @@ <h1 class="flex-grow-1">{{ isNewService ? ('ldn-create-service.title' | translat
     <div class="mb-5 mt-5">
       <!-- In the url section -->
       <div class="d-flex align-items-center">
-        <div class="d-flex flex-column w-50 mr-2">
+        <div class="d-flex flex-column w-50 me-2">
           <label for="url" class="font-weight-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
           <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
                  [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
@@ -73,7 +73,7 @@ <h1 class="flex-grow-1">{{ isNewService ? ('ldn-create-service.title' | translat
       <label for="lowerIp" class="font-weight-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
       <div class="d-flex">
         <input [class.invalid-field]="formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched"
-               [placeholder]="'ldn-new-service.form.placeholder.lowerIp' | translate" class="form-control mr-2"
+               [placeholder]="'ldn-new-service.form.placeholder.lowerIp' | translate" class="form-control me-2"
                formControlName="lowerIp"
                id="lowerIp"
                name="lowerIp"
@@ -298,7 +298,7 @@ <h4 *ngIf="isNewService">{{'service.overview.create.modal' | translate }}</h4>
     </div>
       <div class="modal-footer">
         <div *ngIf="!isNewService">
-          <button (click)="closeModal()" class="btn btn-outline-secondary mr-2"
+          <button (click)="closeModal()" class="btn btn-outline-secondary me-2"
                   id="delete-confirm-edit">{{ 'service.detail.return' | translate }}
           </button>
           <button *ngIf="!isNewService" (click)="patchService()"
@@ -306,7 +306,7 @@ <h4 *ngIf="isNewService">{{'service.overview.create.modal' | translate }}</h4>
           </button>
         </div>
         <div *ngIf="isNewService">
-          <button (click)="closeModal()" class="btn btn-outline-secondary mr-2 "
+          <button (click)="closeModal()" class="btn btn-outline-secondary me-2 "
                   id="delete-confirm-new">{{ 'service.refuse.create' | translate }}
           </button>
           <button (click)="createService()"
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
index 1c3dbe91f2b..1e43cfad5d7 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
@@ -4,7 +4,7 @@ <h1 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h1>
   </div>
   <div class="d-flex justify-content-end">
     <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
-      class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
+      class="fas fa-plus pe-2"></i>{{ 'process.overview.new' | translate }}</button>
   </div>
   <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
                  [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
@@ -85,7 +85,7 @@ <h4>{{'service.overview.delete.header' | translate }}</h4>
       <div class="mt-4 text-right">
         <button (click)="closeModal()"
                 [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
-                class="btn btn-outline-secondary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
+                class="btn btn-outline-secondary me-2">{{ 'service.detail.delete.cancel' | translate }}</button>
         <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
                 class="btn btn-danger"
                 [attr.aria-label]="'ldn-service-overview-select-delete' | translate"
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
index 57ce83934cf..48e2a42fe20 100644
--- a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
@@ -3,7 +3,7 @@
     <div class="col-12 col-md-3 text-left h4">{{((isInbound$ | async) ? 'admin.notify.dashboard.inbound'  : 'admin.notify.dashboard.outbound') | translate}}</div>
     <div class="col-md-9">
       <div class="h4">
-        <button (click)="resetDefaultConfiguration()" *ngIf="(selectedSearchConfig$ | async) !== defaultConfiguration" class="badge badge-primary mr-1 mb-1">
+        <button (click)="resetDefaultConfiguration()" *ngIf="(selectedSearchConfig$ | async) !== defaultConfiguration" class="badge bg-primary me-1 mb-1">
           {{ 'admin-notify-logs.' + (selectedSearchConfig$ | async) | translate}}
           <span> ×</span>
         </button>
diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
index ccdfd3dfec2..cc544476cc5 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
@@ -28,7 +28,7 @@ <h1 id="header" class="border-bottom pb-2">{{'admin.registries.bitstream-formats
             <tbody>
             <tr *ngFor="let bitstreamFormat of (bitstreamFormats$ | async)?.payload?.page">
               <td>
-                <label class="mb-0">
+                <label class="form-label mb-0">
                   <input type="checkbox"
                          [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"
                          [checked]="(selectedBitstreamFormatIDs$ | async)?.includes(bitstreamFormat.id)"
@@ -52,7 +52,7 @@ <h1 id="header" class="border-bottom pb-2">{{'admin.registries.bitstream-formats
 
       <div>
         <button *ngIf="(bitstreamFormats$ | async)?.payload?.page?.length > 0" class="btn btn-primary deselect" (click)="deselectAll()">{{'admin.registries.bitstream-formats.table.deselect-all' | translate}}</button>
-        <button *ngIf="(bitstreamFormats$ | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-right" (click)="deleteFormats()">{{'admin.registries.bitstream-formats.table.delete' | translate}}</button>
+        <button *ngIf="(bitstreamFormats$ | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-end" (click)="deleteFormats()">{{'admin.registries.bitstream-formats.table.delete' | translate}}</button>
       </div>
     </div>
   </div>
diff --git a/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts b/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
index 37ae0d1dc0d..08c3343aa87 100644
--- a/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
+++ b/src/app/admin/admin-registries/bitstream-formats/format-form/format-form.component.ts
@@ -64,7 +64,7 @@ export class FormatFormComponent implements OnInit {
    */
   arrayElementLayout: DynamicFormControlLayout = {
     grid: {
-      group: 'form-row',
+      group: 'row',
     },
   };
 
diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
index 8b3c6fe972e..ff70c04d11f 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
@@ -29,7 +29,7 @@ <h1 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' |
                         <tr *ngFor="let schema of (metadataSchemas | async)?.payload?.page"
                             [ngClass]="{'table-primary' : (activeMetadataSchema$ | async)?.id === schema.id}">
                             <td>
-                                <label class="mb-0">
+                                <label class="form-label mb-0">
                                     <input type="checkbox"
                                            [checked]="(selectedMetadataSchemaIDs$ | async)?.includes(schema.id)"
                                            (change)="selectMetadataSchema(schema, $event)"
@@ -52,7 +52,7 @@ <h1 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' |
             </div>
 
             <div>
-              <button *ngIf="(metadataSchemas | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-right" (click)="deleteSchemas()">{{'admin.registries.metadata.schemas.table.delete' | translate}}</button>
+              <button *ngIf="(metadataSchemas | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-end" (click)="deleteSchemas()">{{'admin.registries.metadata.schemas.table.delete' | translate}}</button>
             </div>
 
         </div>
diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
index 288266fb75e..19c5370a9c6 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -53,7 +53,7 @@ <h2>{{'admin.registries.schema.fields.head' | translate}}</h2>
 
         <div>
           <button [routerLink]="['/admin/registries/metadata']" class="btn btn-primary">{{'admin.registries.schema.return' | translate}}</button>
-          <button *ngIf="fields?.page?.length > 0" type="submit" class="btn btn-danger float-right" (click)="deleteFields()">{{'admin.registries.schema.fields.table.delete' | translate}}</button>
+          <button *ngIf="fields?.page?.length > 0" type="submit" class="btn btn-danger float-end" (click)="deleteFields()">{{'admin.registries.schema.fields.table.delete' | translate}}</button>
         </div>
       </ng-container>
 
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html
index 3ad1dce0b8b..200286e08f1 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html
@@ -1,14 +1,13 @@
 <div>
     <div class="modal-header">{{'supervision-group-selector.header' | translate}}
-        <button type="button" class="close" (click)="close()" aria-label="Close">
-            <span aria-hidden="true">×</span>
+        <button type="button" class="btn-close" (click)="close()" aria-label="Close">
         </button>
     </div>
     <div class="modal-body">
         <div class="row">
             <div class="control-group col-sm-12">
-                <label for="supervisionOrder">{{'supervision-group-selector.select.type-of-order.label' | translate}}</label>
-                <select name="supervisionOrder" id="supervisionOrder" class="form-control"
+                <label for="supervisionOrder" class="form-label">{{'supervision-group-selector.select.type-of-order.label' | translate}}</label>
+                <select name="supervisionOrder" id="supervisionOrder" class="form-select"
                         [(ngModel)]="selectedOrderType"
                         attr.aria-label="{{'supervision-group-selector.select.type-of-order.label' | translate}}">
                     <option value="EDITOR">{{'supervision-group-selector.select.type-of-order.option.editor' | translate}}</option>
@@ -20,7 +19,7 @@
         </div>
         <div class="row">
             <div class="control-group col-sm-12">
-                <label for="supervisionGroup">{{'supervision-group-selector.select.group.label' | translate}}</label>
+                <label for="supervisionGroup" class="form-label">{{'supervision-group-selector.select.group.label' | translate}}</label>
                 <ng-container class="mb-3">
                     <input id="supervisionGroup" class="form-control" type="text" [value]="selectedGroup ? dsoNameService.getName(selectedGroup) : ''" disabled>
                     <ds-error *ngIf="isSubmitted && !selectedGroup" message="{{'supervision-group-selector.select.group.error' | translate}}"></ds-error>
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html
index 84d8c052cd4..75e10a10dfa 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html
@@ -4,7 +4,7 @@
       <span>{{'workflow-item.search.result.list.element.supervised-by' | translate}} </span>
     </div>
     <div>
-      <a class="badge badge-primary mr-1 mb-1 text-capitalize mw-100 text-truncate" *ngFor="let supervisionOrder of supervisionOrders" data-test="soBadge"
+      <a class="badge bg-primary me-1 mb-1 text-capitalize mw-100 text-truncate" *ngFor="let supervisionOrder of supervisionOrders" data-test="soBadge"
          [ngbTooltip]="'workflow-item.search.result.list.element.supervised.remove-tooltip' | translate"
          (click)="$event.preventDefault(); $event.stopImmediatePropagation(); deleteSupervisionOrder(supervisionOrder)" aria-label="Close">
         {{ dsoNameService.getName(supervisionOrder.group) }}
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
index c5c2a5331ad..70fbc6f667b 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
@@ -1,8 +1,8 @@
 <ng-template dsDynamicComponentLoader>
 </ng-template>
-<div #badges class="position-absolute ml-1">
+<div #badges class="position-absolute ms-1">
     <div class="workflow-badge">
-        <span class="badge badge-info">{{ "admin.workflow.item.workflow" | translate }}</span>
+        <span class="badge bg-info">{{ "admin.workflow.item.workflow" | translate }}</span>
     </div>
 </div>
 <ul #buttons class="list-group list-group-flush">
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html
index f78a0a3ca43..3af6264322f 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workspace-item/workspace-item-search-result-admin-workflow-grid-element.component.html
@@ -1,8 +1,8 @@
 <ng-template dsDynamicComponentLoader>
 </ng-template>
-<div #badges class="position-absolute ml-1">
+<div #badges class="position-absolute ms-1">
     <div class="workflow-badge">
-        <span class="badge badge-info">{{ "admin.workflow.item.workspace" | translate }}</span>
+        <span class="badge bg-info">{{ "admin.workflow.item.workspace" | translate }}</span>
     </div>
 </div>
 <ul #buttons class="list-group list-group-flush">
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html
index 192cc751f2c..f34d17da51e 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html
@@ -1,5 +1,5 @@
 <div class="workflow-badge">
-    <span class="badge badge-info">{{ "admin.workflow.item.workflow" | translate }}</span>
+    <span class="badge bg-info">{{ "admin.workflow.item.workflow" | translate }}</span>
 </div>
 <ds-listable-object-component-loader *ngIf="item$ | async"
                                      [object]="item$ | async"
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html
index ed877706c60..15e0699f28b 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html
@@ -1,4 +1,4 @@
-<span class="badge badge-info">{{ "admin.workflow.item.workspace" | translate }}</span>
+<span class="badge bg-info">{{ "admin.workflow.item.workspace" | translate }}</span>
 <ds-listable-object-component-loader *ngIf="item$ | async"
                                      [object]="item$ | async"
                                      [viewMode]="viewModes.ListElement"
diff --git a/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.html b/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.html
index 804bb4f8910..b749b3b2130 100644
--- a/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.html
+++ b/src/app/bitstream-page/bitstream-authorizations/bitstream-authorizations.component.html
@@ -1,8 +1,8 @@
 <div class="container">
   <ds-resource-policies [resourceType]="'bitstream'" [resourceUUID]="(dsoRD$ | async)?.payload?.id"></ds-resource-policies>
   <div class="button-row bottom">
-    <div class="text-right">
-      <a [routerLink]="['/bitstreams', (dsoRD$ | async)?.payload?.id, 'edit']" role="button" class="btn btn-outline-secondary mr-1">
+    <div class="text-end">
+      <a [routerLink]="['/bitstreams', (dsoRD$ | async)?.payload?.id, 'edit']" role="button" class="btn btn-outline-secondary me-1">
         <i class="fas fa-arrow-left"></i> {{'bitstream.edit.return' | translate}}
       </a>
     </div>
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
index 36b0816ade1..a4cb1f1826a 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts
@@ -249,7 +249,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     group: [this.iiifLabelModel],
   }, {
     grid: {
-      host: 'form-row',
+      host: 'row',
     },
   });
 
@@ -267,7 +267,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     group: [this.iiifTocModel],
   }, {
     grid: {
-      host: 'form-row',
+      host: 'row',
     },
   });
 
@@ -285,7 +285,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     group: [this.iiifWidthModel],
   }, {
     grid: {
-      host: 'form-row',
+      host: 'row',
     },
   });
 
@@ -303,7 +303,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     group: [this.iiifHeightModel],
   }, {
     grid: {
-      host: 'form-row',
+      host: 'row',
     },
   });
 
@@ -326,7 +326,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       ],
     }, {
       grid: {
-        host: 'form-row',
+        host: 'row',
       },
     }),
     new DynamicFormGroupModel({
diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
index ac9cb42ce52..d938dad1a60 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -7,6 +7,8 @@
   padding-bottom: calc(var(--ds-content-spacing) / 2);
   padding-top: calc(var(--ds-content-spacing) / 2);
   background-color: var(--ds-breadcrumb-bg);
+  padding-left: calc(var(--bs-spacer) *.75);
+  padding-right: calc(var(--bs-spacer) *.75);
 }
 
 li.breadcrumb-item {
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
new file mode 100644
index 00000000000..8b875e7d1a2
--- /dev/null
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -0,0 +1,67 @@
+<div class="container">
+    <ng-container *ngVar="(parent$ | async) as parent">
+    <ng-container *ngIf="parent?.payload as parentContext">
+        <div class="d-flex flex-row border-bottom mb-4 pb-4">
+
+            <header class="comcol-header me-auto">
+        <!-- Parent Name -->
+        <ds-comcol-page-header [name]="dsoNameService.getName(parentContext)">
+        </ds-comcol-page-header>
+      <!-- Collection logo -->
+        <ds-comcol-page-logo *ngIf="logo$"
+                             [logo]="(logo$ | async)?.payload"
+                             [alternateText]="'Community or Collection Logo'">
+        </ds-comcol-page-logo>
+        <!-- Handle -->
+        <ds-comcol-page-handle
+            [content]="parentContext.handle"
+            [title]="parentContext.type+'.page.handle'" >
+        </ds-comcol-page-handle>
+        <!-- Introductory text -->
+        <ds-comcol-page-content [content]="parentContext.introductoryText" [hasInnerHtml]="true">
+        </ds-comcol-page-content>
+        <!-- News -->
+        <ds-comcol-page-content [content]="parentContext.sidebarText" [hasInnerHtml]="true" [title]="'community.page.news'">
+        </ds-comcol-page-content>
+      </header>
+        <ds-dso-edit-menu></ds-dso-edit-menu>
+        </div>
+      <!-- Browse-By Links -->
+      <ds-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-comcol-page-browse-by>
+      </ng-container></ng-container>
+
+    <section class="comcol-page-browse-section">
+    <div class="browse-by-metadata w-100">
+    <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
+      title="{{'browse.title' | translate:
+      {
+        collection: dsoNameService.getName((parent$ | async)?.payload),
+        field: 'browse.metadata.' + browseId | translate,
+        startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
+        value: (value)? '&quot;' + value + '&quot;': ''
+      } }}"
+      parentname="{{dsoNameService.getName((parent$ | async)?.payload)}}"
+      [objects$]="(items$ !== undefined)? items$ : browseEntries$"
+      [paginationConfig]="(currentPagination$ |async)"
+      [sortConfig]="(currentSort$ |async)"
+      [type]="startsWithType"
+      [startsWithOptions]="startsWithOptions"
+      (prev)="goPrev()"
+      (next)="goNext()">
+    </ds-browse-by>
+    <ds-loading *ngIf="!startsWithOptions" message="{{'loading.browse-by-page' | translate}}"></ds-loading>
+  </div>
+  </section>
+  <ng-container *ngVar="(parent$ | async) as parent">
+    <ng-container *ngIf="parent?.payload as parentContext">
+  <footer *ngIf="parentContext.copyrightText" class="border-top my-5 pt-4">
+    <div >
+
+      <!-- Copyright -->
+      <ds-comcol-page-content [content]="parentContext.copyrightText" [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+    </div>
+  </footer>
+</ng-container>
+</ng-container>
+</div>
diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
index 4a3e28c6aad..e5b8bd69453 100644
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -5,7 +5,7 @@
       <div *ngIf="collectionRD?.payload as collection">
         <ds-view-tracker [object]="collection"></ds-view-tracker>
         <div class="d-flex flex-row border-bottom mb-4 pb-4">
-          <header class="comcol-header mr-auto">
+                <header class="comcol-header me-auto">
             <!-- Collection Name -->
             <ds-comcol-page-header
                 [name]="dsoNameService.getName(collection)">
diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
index 53c3b45cfab..2e7cd3a2c8e 100644
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
@@ -4,8 +4,8 @@
             <div class="col-12 pb-4">
                 <h1 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h1>
                 <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
-                <div class="form-group row">
-                  <div class="col text-right space-children-mr">
+                <div class="mb-3 row">
+                  <div class="col text-end space-children-mr">
                     <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                       <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                     </button>
diff --git a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html
index 9c5020fc7f0..7cd3d6a342f 100644
--- a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html
@@ -1,6 +1,8 @@
-<ds-comcol-role
-  *ngFor="let comcolRole of comcolRoles$ | async"
-  [dso]="collection$ | async"
-  [comcolRole]="comcolRole"
->
-</ds-comcol-role>
+<div class="custom-alignment">
+  <ds-comcol-role
+    *ngFor="let comcolRole of comcolRoles$ | async"
+    [dso]="collection$ | async"
+    [comcolRole]="comcolRole"
+  >
+  </ds-comcol-role>
+</div>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
index 7edaadb0a1d..445c1540a44 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
@@ -2,19 +2,19 @@
     <div class="container-fluid space-children-mr" *ngIf="shouldShow">
         <h3>{{ 'collection.source.controls.head' | translate }}</h3>
         <div>
-            <span class="font-weight-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
+            <span class="fw-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
             <span>{{contentSource?.harvestStatus}}</span>
         </div>
         <div>
-            <span class="font-weight-bold">{{'collection.source.controls.harvest.start' | translate}}</span>
+            <span class="fw-bold">{{'collection.source.controls.harvest.start' | translate}}</span>
             <span>{{contentSource?.harvestStartTime ? contentSource?.harvestStartTime : 'collection.source.controls.harvest.no-information'|translate }}</span>
         </div>
         <div>
-            <span class="font-weight-bold">{{'collection.source.controls.harvest.last' | translate}}</span>
+            <span class="fw-bold">{{'collection.source.controls.harvest.last' | translate}}</span>
             <span>{{contentSource?.lastHarvested ? contentSource?.lastHarvested : 'collection.source.controls.harvest.no-information'|translate }}</span>
         </div>
         <div>
-            <span class="font-weight-bold">{{'collection.source.controls.harvest.message' | translate}}</span>
+            <span class="fw-bold">{{'collection.source.controls.harvest.message' | translate}}</span>
             <span>{{contentSource?.message ? contentSource?.message: 'collection.source.controls.harvest.no-information'|translate }}</span>
         </div>
 
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
index 8f807c1aee8..a200ab8aa9b 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <div class="d-inline-block float-right space-children-mr">
+    <div class="d-inline-block float-end space-children-mr">
         <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
                 [disabled]="(hasChanges$ | async) !== true"
                 (click)="discard()"><i
@@ -43,7 +43,7 @@ <h3 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{
 <div class="container mt-2" *ngIf="(contentSource?.harvestType !== harvestTypeNone)">
     <div class="row">
         <div class="col-12">
-            <div class="d-inline-block float-right ml-1 space-children-mr">
+            <div class="d-inline-block float-end ms-1 space-children-mr">
                 <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
                         [disabled]="(hasChanges$ | async) !== true"
                         (click)="discard()"><i
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index 82238ddd0d1..6f3fc66705c 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -24,7 +24,7 @@
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                  class="example-tree-node expandable-node">
     <div class="btn-group">
-      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
+      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default btn-transparent" cdkTreeNodeToggle
               [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
               (click)="toggleExpanded(node)"
               data-test="expand-button">
@@ -39,8 +39,8 @@
       <div class="d-flex flex-row">
         <span class="d-flex align-middle my-auto">
           <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
-          <span class="pr-2">&nbsp;</span>
-          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead my-auto">{{node.payload.archivedItemsCount}}</span>
+          <span class="pe-2">&nbsp;</span>
+          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-top archived-items-lead my-auto ps-2 pe-2">{{node.payload.archivedItemsCount}}</span>
         </span>
       </div>
     </div>
diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
index a695e2019a3..c04575841e4 100644
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -3,7 +3,7 @@
     <div *ngIf="communityRD?.payload; let communityPayload">
       <ds-view-tracker [object]="communityPayload"></ds-view-tracker>
       <div class="d-flex flex-row border-bottom mb-4 pb-4">
-        <header class="comcol-header mr-auto">
+        <header class="comcol-header me-auto">
           <!-- Community name -->
           <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
           <!-- Community logo -->
diff --git a/src/app/community-page/delete-community-page/delete-community-page.component.html b/src/app/community-page/delete-community-page/delete-community-page.component.html
index b241a7027c5..70c12824046 100644
--- a/src/app/community-page/delete-community-page/delete-community-page.component.html
+++ b/src/app/community-page/delete-community-page/delete-community-page.component.html
@@ -4,8 +4,8 @@
             <div class="col-12 pb-4">
                 <h1 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h1>
                 <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
-                <div class="form-group row">
-                    <div class="col text-right space-children-mr">
+                <div class="mb-3 row">
+                    <div class="col text-end space-children-mr">
                         <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
                             <i class="fas fa-times" aria-hidden="true"></i> {{'community.delete.cancel' | translate}}
                         </button>
diff --git a/src/app/community-page/edit-community-page/community-roles/community-roles.component.html b/src/app/community-page/edit-community-page/community-roles/community-roles.component.html
index 37a70ff403d..7a048cf9231 100644
--- a/src/app/community-page/edit-community-page/community-roles/community-roles.component.html
+++ b/src/app/community-page/edit-community-page/community-roles/community-roles.component.html
@@ -1,6 +1,8 @@
-<ds-comcol-role
-  *ngFor="let comcolRole of comcolRoles$ | async"
-  [dso]="community$ | async"
-  [comcolRole]="comcolRole"
->
-</ds-comcol-role>
+<div class="custom-alignment">
+  <ds-comcol-role
+    *ngFor="let comcolRole of comcolRoles$ | async"
+    [dso]="community$ | async"
+    [comcolRole]="comcolRole"
+  >
+  </ds-comcol-role>
+</div>
diff --git a/src/app/curation-form/curation-form.component.html b/src/app/curation-form/curation-form.component.html
index c940494016b..93c89499f31 100644
--- a/src/app/curation-form/curation-form.component.html
+++ b/src/app/curation-form/curation-form.component.html
@@ -1,16 +1,16 @@
 <form [formGroup]="form" (ngSubmit)="submit()">
-    <div class="form-group">
+    <div class="mb-3">
         <div class="row mb-2">
             <div class="col-12 col-sm-6">
-                <label class="font-weight-bold" for="task">{{'curation.form.task-select.label' |translate }}</label>
-                <select id="task" formControlName="task" class="form-control">
+                <label class="fw-bold form-label" for="task">{{'curation.form.task-select.label' |translate }}</label>
+                <select id="task" formControlName="task" class="form-select">
                     <option *ngFor="let task of tasks" [value]="task">
                         {{ 'curation-task.task.' + task + '.label' | translate }}
                     </option>
                 </select>
             </div>
             <div *ngIf="!hasHandleValue()" class="col-12 col-sm-6">
-                <label class="font-weight-bold" for="handle">{{'curation.form.handle.label' |translate }}</label>
+                <label class="fw-bold form-label" for="handle">{{'curation.form.handle.label' |translate }}</label>
                 <input id="handle" class="form-control" formControlName="handle">
                 <small class="text-muted">{{'curation.form.handle.hint' |translate }}</small>
             </div>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss
index 29b93f31506..d83bacecb21 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss
@@ -24,26 +24,26 @@
   }
 
   &.ds-warning {
-    background-color: var(--ds-warning-bg);
+    background-color: var(--ds-warning-bg-subtle);
 
     .ds-flex-cell {
-      border: 1px solid var(--bs-warning);
+      border: 1px solid var(--bs-warning-border-subtle);
     }
   }
 
   &.ds-danger {
-    background-color: var(--ds-danger-bg);
+    background-color: var(--ds-danger-bg-subtle);
 
     .ds-flex-cell {
-      border: 1px solid var(--bs-danger);
+      border: 1px solid var(--bs-danger-border-subtle);
     }
   }
 
   &.ds-success {
-    background-color: var(--ds-success-bg);
+    background-color: var(--ds-success-bg-subtle);
 
     .ds-flex-cell {
-      border: 1px solid var(--bs-success);
+      border: 1px solid var(--bs-success-border-subtle);
     }
   }
 }
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
index 25b82b9b437..90b187ed989 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
@@ -18,7 +18,7 @@
                       (change)="onChangeAuthorityField($event)">
     </ds-dynamic-onebox>
     <div *ngIf="!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE">
-      <span class="badge badge-light border" >
+      <span class="badge bg-light border" >
         <i dsAuthorityConfidenceState
            class="fas fa-fw p-0"
            aria-hidden="true"
@@ -31,7 +31,7 @@
     <div class="mt-2" *ngIf=" mdValue.editing && (isAuthorityControlled() | async) && (isSuggesterVocabulary() | async)">
       <div class="btn-group w-75">
         <i dsAuthorityConfidenceState
-          class="fas fa-fw p-0 mr-1 mt-auto mb-auto"
+          class="fas fa-fw p-0 me-1 mt-auto mb-auto"
           aria-hidden="true"
           [authorityValue]="mdValue.newValue.confidence"
           [iconMode]="true"
@@ -54,7 +54,7 @@
       </div>
     </div>
     <div class="d-flex" *ngIf="mdRepresentation">
-      <a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
+      <a class="me-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
       <ds-type-badge [object]="mdRepresentation"></ds-type-badge>
     </div>
   </div>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
index e5551913005..b57e6005b7e 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss
@@ -14,3 +14,6 @@
 .cdk-drag-placeholder {
   opacity: 0;
 }
+.badge.bg-light {
+  color: var(--bs-gray-900);
+}
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
index f8b193f4a05..a0b91c1517e 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
@@ -1,24 +1,24 @@
 <div class="item-metadata" *ngIf="form">
-  <div class="button-row top d-flex my-2 space-children-mr ml-gap">
-    <button class="mr-auto btn btn-success" id="dso-add-btn" [disabled]="form.newValue || (saving$ | async)"
+  <div class="button-row top d-flex my-2 space-children-mr ms-gap">
+    <button class="me-auto btn btn-success" id="dso-add-btn" [disabled]="form.newValue || (saving$ | async)"
             [attr.aria-label]="dsoType + '.edit.metadata.add-button' | translate"
             [title]="dsoType + '.edit.metadata.add-button' | translate"
             (click)="add()"><i class="fas fa-plus" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
     </button>
-    <button class="btn btn-warning ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
+    <button class="btn btn-warning ms-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
             [attr.aria-label]="dsoType + '.edit.metadata.reinstate-button' | translate"
             [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
             (click)="reinstate()"><i class="fas fa-undo-alt" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
     </button>
-    <button class="btn btn-primary ml-1" id="dso-save-btn" [disabled]="!hasChanges || (saving$ | async)"
+    <button class="btn btn-primary ms-1" id="dso-save-btn" [disabled]="!hasChanges || (saving$ | async)"
             [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
             [title]="dsoType + '.edit.metadata.save-button' | translate"
             (click)="submit()"><i class="fas fa-save" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
     </button>
-    <button class="btn btn-danger ml-1" id="dso-discard-btn" *ngIf="!isReinstatable"
+    <button class="btn btn-danger ms-1" id="dso-discard-btn" *ngIf="!isReinstatable"
             [attr.aria-label]="dsoType + '.edit.metadata.discard-button' | translate"
             [title]="dsoType + '.edit.metadata.discard-button' | translate"
             [disabled]="!hasChanges || (saving$ | async)"
@@ -76,7 +76,7 @@
     <ds-alert [content]="dsoType + '.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
   </div>
   <div class="button-row bottom d-inline-block w-100">
-    <div class="mt-2 float-right space-children-mr ml-gap">
+    <div class="mt-2 float-end space-children-mr ms-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
               [attr.aria-label]="dsoType + '.edit.metadata.reinstate-button' | translate"
               [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
index bca1a1b3b34..e62da869221 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
   <ds-truncatable [id]="dso.id">
-    <div class="position-absolute ml-1">
+    <div class="position-absolute ms-1">
       <ng-content></ng-content>
     </div>
     <a *ngIf="linkType !== linkTypes.None"
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
index 3b14a1d8b0f..7e0ab3f9e3d 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
   <ds-truncatable [id]="dso.id">
-    <div class="position-absolute ml-1">
+    <div class="position-absolute ms-1">
       <ng-content></ng-content>
     </div>
     <a *ngIf="linkType !== linkTypes.None"
diff --git a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
index 20084f21ba3..a157089b027 100644
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
   <ds-truncatable [id]="dso.id">
-    <div class="position-absolute ml-1">
+    <div class="position-absolute ms-1">
       <ng-content></ng-content>
     </div>
     <a *ngIf="linkType !== linkTypes.None"
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index e3dec92c52e..9469dcc7b5e 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -1,6 +1,6 @@
 <ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="me-auto">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index de1ee4a27d3..ff8811b4a66 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -1,6 +1,6 @@
 <ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="me-auto">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index 70411589234..b5a09a842f6 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -1,6 +1,6 @@
 <ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="me-auto">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
@@ -38,7 +38,7 @@
       </a>
     </div>
   </div>
-  <div class="mt-5 w-100">
+  <div class="mt-5 w-100 px-0">
     <ds-tabbed-related-entities-search  [item]="object"
                                         [relationTypes]="[{
                                           label: 'isJournalOfPublication',
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
index 56c518a09c2..95c3ae70f20 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
   <ds-truncatable [id]="dso.id">
-    <div class="position-absolute ml-1">
+    <div class="position-absolute ms-1">
       <ng-content></ng-content>
     </div>
     <a *ngIf="linkType !== linkTypes.None"
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
index 7b444d261c7..7d8ea40f38d 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
   <ds-truncatable [id]="dso.id">
-    <div class="position-absolute ml-1">
+    <div class="position-absolute ms-1">
       <ng-content></ng-content>
     </div>
     <a *ngIf="linkType !== linkTypes.None"
diff --git a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
index 2181a4eb07d..cc9c7f6f35a 100644
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
   <ds-truncatable [id]="dso.id">
-    <div class="position-absolute ml-1">
+    <div class="position-absolute ms-1">
       <ng-content></ng-content>
     </div>
     <a *ngIf="linkType !== linkTypes.None"
diff --git a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
index 21acce9f095..80cf2c11bea 100644
--- a/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html
@@ -1,6 +1,6 @@
 <ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="me-auto">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
@@ -59,7 +59,7 @@
       </a>
     </div>
   </div>
-  <div class="mt-5 w-100">
+  <div class="mt-5 w-100 px-0">
     <ds-tabbed-related-entities-search  [item]="object"
                                         [relationTypes]="[{
                                           label: 'isOrgUnitOfPerson',
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index fb93da4265f..da0d5e6c470 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -1,6 +1,6 @@
 <ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-item-page-title-field class="mr-auto" [item]="object">
+  <ds-item-page-title-field class="me-auto" [item]="object">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
@@ -55,7 +55,7 @@
       </a>
     </div>
   </div>
-  <div class="mt-5 w-100">
+  <div class="mt-5 w-100 px-0">
     <ds-tabbed-related-entities-search  [item]="object"
                                         [relationTypes]="[{
                                           label: 'isAuthorOfPublication',
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 340650506b1..73dc9b4e093 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -1,6 +1,6 @@
 <ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="me-auto">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
index e2649587382..d42d3af55dc 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex">
-<!--    <div class="person-thumbnail pr-2">-->
+<!--    <div class="person-thumbnail pe-2">-->
 <!--        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-themed-thumbnail>-->
 <!--    </div>-->
     <div class="flex-grow-1">
diff --git a/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.html b/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.html
index 13ae884ccb4..2129aec11ab 100644
--- a/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.html
+++ b/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.html
@@ -1,7 +1,6 @@
 <div class="modal-header">
     <h4 class="modal-title">New name variant</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
-        <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
     </button>
 </div>
 <div class="modal-body">
diff --git a/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.spec.ts b/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.spec.ts
index ef20ec3a5c6..e63e920784f 100644
--- a/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.spec.ts
+++ b/src/app/entity-groups/research-entities/submission/name-variant-modal/name-variant-modal.component.spec.ts
@@ -43,7 +43,7 @@ describe('NameVariantModalComponent', () => {
   });
 
   it('when close button is clicked, dismiss should be called on the modal', () => {
-    debugElement.query(By.css('button.close')).triggerEventHandler('click', {});
+    debugElement.query(By.css('button.btn-close')).triggerEventHandler('click', {});
     expect(modal.dismiss).toHaveBeenCalled();
   });
 
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 4841674852b..5bac8744796 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,4 +1,4 @@
-<footer class="text-lg-start">
+<footer>
   <div *ngIf="showTopFooter" class="top-footer">
     <!-- Grid container -->
     <div class=" container p-4">
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 5f86137b445..7b6c6ae2398 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -68,6 +68,10 @@
         }
       }
     }
+
+    .btn {
+      box-shadow: none;
+    }
   }
 }
 
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
index 189d0bee40c..5c8647d6bfb 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
@@ -5,7 +5,7 @@ <h1 class="mb-4">{{'forgot-password.form.head' | translate}}</h1>
         <div class="card-body">
             <div class="row">
                 <div class="col-12">
-                    <span class="font-weight-bold">{{'forgot-password.form.identification.email' | translate}} </span>
+                    <span class="fw-bold form-label">{{'forgot-password.form.identification.email' | translate}} </span>
                     <span [attr.data-test]="'email' | dsBrowserOnly">{{(registration$ |async).email}}</span>
                 </div>
             </div>
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index e59086134a7..80873e7ede1 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -11,7 +11,7 @@
         <ds-context-help-toggle></ds-context-help-toggle>
         <ds-auth-nav-menu></ds-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
-        <div *ngIf="isMobile$ | async" class="pl-2">
+        <div *ngIf="isMobile$ | async" class="ps-2">
           <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
                   aria-controls="collapsingNav"
                   aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
diff --git a/src/app/health-page/health-info/health-info-component/health-info-component.component.html b/src/app/health-page/health-info/health-info-component/health-info-component.component.html
index 84cba4d92f3..073f194f7b9 100644
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.html
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.html
@@ -22,6 +22,6 @@
     </div>
   </div>
   <ng-container *ngIf="entry && isPlainProperty(entry.value)">
-    <p data-test="property"> <span class="font-weight-bold">{{ getPropertyLabel(entry.key) | titlecase }}</span> : {{entry.value}}</p>
+    <p data-test="property"> <span class="fw-bold">{{ getPropertyLabel(entry.key) | titlecase }}</span> : {{entry.value}}</p>
   </ng-container>
 </div>
diff --git a/src/app/health-page/health-info/health-info.component.html b/src/app/health-page/health-info/health-info.component.html
index b590695b0b0..e8d1bfb56cb 100644
--- a/src/app/health-page/health-info/health-info.component.html
+++ b/src/app/health-page/health-info/health-info.component.html
@@ -1,18 +1,14 @@
 <ng-container *ngIf="healthInfoResponse">
   <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
     <ngb-panel [id]="entry.key" *ngFor="let entry of healthInfoResponse | dsObjNgFor">
-      <ng-template ngbPanelHeader>
-        <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="info-component">
+      <ng-template ngbPanelTitle>
+        <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle(entry.key)" data-test="info-component">
           <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
                   [attr.aria-controls]="'health-info-' + entry.key + '-content'">
             {{ getPanelLabel(entry.key) | titlecase }}
           </button>
-          <div class="text-right d-flex gap-2">
-            <ds-health-status [status]="entry.value?.status"></ds-health-status>
-            <div class="d-flex my-auto">
-              <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
-              <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
-            </div>
+          <div class="text-end d-flex gap-2">
+            <ds-health-status class="me-2" [status]="entry.value?.status"></ds-health-status>
           </div>
         </div>
       </ng-template>
diff --git a/src/app/health-page/health-panel/health-component/health-component.component.html b/src/app/health-page/health-panel/health-component/health-component.component.html
index f962e66052e..55e11ed6ada 100644
--- a/src/app/health-page/health-panel/health-component/health-component.component.html
+++ b/src/app/health-page/health-panel/health-component/health-component.component.html
@@ -22,7 +22,7 @@
 </ng-container>
 <ng-container *ngIf="healthComponent?.details">
   <div *ngFor="let item of healthComponent?.details | dsObjNgFor" data-test="details">
-    <p data-test="property"><span class="font-weight-bold">{{ getPropertyLabel(item.key) | titlecase }}</span> : {{item.value}}</p>
+    <p data-test="property"><span class="fw-bold">{{ getPropertyLabel(item.key) | titlecase }}</span> : {{item.value}}</p>
   </div>
 </ng-container>
 <ng-container *ngIf="!healthComponent?.details && !healthComponent?.components">
diff --git a/src/app/health-page/health-panel/health-panel.component.html b/src/app/health-page/health-panel/health-panel.component.html
index ec2a27ce408..169cb055756 100644
--- a/src/app/health-page/health-panel/health-panel.component.html
+++ b/src/app/health-page/health-panel/health-panel.component.html
@@ -4,18 +4,14 @@
 </p>
 <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
   <ngb-panel [id]="entry.key" *ngFor="let entry of healthResponse.components | dsObjNgFor">
-    <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle(entry.key)" data-test="component">
+    <ng-template ngbPanelTitle>
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle(entry.key)" data-test="component">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
                 [attr.aria-controls]="'health-panel-' + entry.key + '-content'">
           {{ getPanelLabel(entry.key) | titlecase }}
         </button>
-        <div class="text-right d-flex gap-2">
-          <ds-health-status [status]="entry.value?.status"></ds-health-status>
-          <div class="d-flex my-auto">
-            <span *ngIf="acc.isExpanded(entry.key)" class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!acc.isExpanded(entry.key)" class="fas fa-chevron-down fa-fw"></span>
-          </div>
+        <div class="text-end d-flex gap-2">
+          <ds-health-status class="me-2" [status]="entry.value?.status"></ds-health-status>
         </div>
       </div>
     </ng-template>
diff --git a/src/app/health-page/health-panel/health-status/health-status.component.html b/src/app/health-page/health-panel/health-status/health-status.component.html
index e8710a07600..ee1dabc2de5 100644
--- a/src/app/health-page/health-panel/health-status/health-status.component.html
+++ b/src/app/health-page/health-panel/health-status/health-status.component.html
@@ -1,12 +1,12 @@
 <ng-container [ngSwitch]="status">
   <i *ngSwitchCase="HealthStatus.UP"
-     class="fa fa-check-circle text-success my-auto"
+     class="fa fa-check-circle text-success ms-2 mt-1"
      ngbTooltip="{{'health-page.status.ok.info' | translate}}" container="body" ></i>
   <i *ngSwitchCase="HealthStatus.UP_WITH_ISSUES"
-     class="fa fa-exclamation-triangle text-warning my-auto"
+     class="fa fa-exclamation-triangle text-warning ms-2 mt-1"
      ngbTooltip="{{'health-page.status.warning.info' | translate}}" container="body"></i>
   <i *ngSwitchCase="HealthStatus.DOWN"
-     class="fa fa-times-circle text-danger my-auto"
+     class="fa fa-times-circle text-danger ms-2 mt-1"
      ngbTooltip="{{'health-page.status.error.info' | translate}}" container="body"></i>
 
 </ng-container>
diff --git a/src/app/home-page/home-news/home-news.component.html b/src/app/home-page/home-news/home-news.component.html
index 9bb2e9857a9..972c8cc293c 100644
--- a/src/app/home-page/home-news/home-news.component.html
+++ b/src/app/home-page/home-news/home-news.component.html
@@ -1,8 +1,8 @@
-<div class="jumbotron jumbotron-fluid mt-ncs">
+<div class="jumbotron py-4 px-2 py-sm-5 px-sm-0 mt-0 mb-4">
   <div class="container">
     <div class="d-flex flex-wrap">
       <div>
-        <h1 class="display-3">DSpace 9</h1>
+        <h1 class="display-2">DSpace 9</h1>
         <p class="lead">DSpace is the world leading open source repository platform that enables organisations to:</p>
       </div>
     </div>
diff --git a/src/app/home-page/home-news/home-news.component.scss b/src/app/home-page/home-news/home-news.component.scss
index 911a2fafc5d..03065555227 100644
--- a/src/app/home-page/home-news/home-news.component.scss
+++ b/src/app/home-page/home-news/home-news.component.scss
@@ -13,7 +13,7 @@
 a {
   color: var(--ds-home-news-link-color);
 
-  @include hover {
+  &:hover {
     color: var(--ds-home-news-link-hover-color);
   }
 }
diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.html b/src/app/home-page/recent-item-list/recent-item-list.component.html
index 82262be1b34..7bf89b232f7 100644
--- a/src/app/home-page/recent-item-list/recent-item-list.component.html
+++ b/src/app/home-page/recent-item-list/recent-item-list.component.html
@@ -6,7 +6,7 @@ <h2> {{'home.recent-submissions.head' | translate}}</h2>
                         <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
                         </ds-listable-object-component-loader>
                 </div>
-                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-start ng-tns-c290-40"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
         </div>
         <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
         <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">
diff --git a/src/app/info/end-user-agreement/end-user-agreement.component.html b/src/app/info/end-user-agreement/end-user-agreement.component.html
index 2ab0005c69f..2702bff45bf 100644
--- a/src/app/info/end-user-agreement/end-user-agreement.component.html
+++ b/src/app/info/end-user-agreement/end-user-agreement.component.html
@@ -2,11 +2,11 @@
   <ds-end-user-agreement-content></ds-end-user-agreement-content>
 
   <form class="form-user-agreement-accept mt-4" (ngSubmit)="submit()" novalidate>
-    <input class="ml-1 mr-2" type="checkbox" id="user-agreement-accept" [(ngModel)]="accepted" [ngModelOptions]="{standalone: true}">
+    <input class="ms-1 me-2" type="checkbox" id="user-agreement-accept" [(ngModel)]="accepted" [ngModelOptions]="{standalone: true}">
     <label class="col-form-label-lg" for="user-agreement-accept">{{ 'info.end-user-agreement.accept' | translate }}</label>
 
     <div class="d-flex mt-4">
-      <button id="button-cancel" type="button" (click)="cancel()" class="btn btn-outline-secondary mr-auto">{{ 'info.end-user-agreement.buttons.cancel' | translate }}</button>
+      <button id="button-cancel" type="button" (click)="cancel()" class="btn btn-outline-secondary me-auto">{{ 'info.end-user-agreement.buttons.cancel' | translate }}</button>
       <button id="button-save" type="submit" class="btn btn-primary" [disabled]="!accepted">{{ 'info.end-user-agreement.buttons.save' | translate }}</button>
     </div>
   </form>
diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.html b/src/app/info/feedback/feedback-form/feedback-form.component.html
index a3437d1f0e4..9930375f514 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.html
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.html
@@ -5,7 +5,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
     <form [formGroup]="feedbackForm" (ngSubmit)="createFeedback()" class="col p-0">
       <div class="row mt-3">
         <div class="control-group col-sm-12">
-          <label class="control-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
+            <label class="control-label form-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
           <input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
           <small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
         </div>
@@ -20,7 +20,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
 
       <div class="row mt-3">
         <div class="control-group col-sm-12">
-          <label class="control-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
+            <label class="control-label form-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
           <textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
         </div>
       </div>
@@ -33,14 +33,14 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
 
       <div class="row mt-3">
         <div class="control-group col-sm-12">
-          <label class="control-label" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
+            <label class="control-label form-labe" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
           <input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
           <small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
         </div>
       </div>
 
       <div class="row mt-3">
-        <div class="control-group col-sm-12 text-right">
+        <div class="control-group col-sm-12 text-end">
           <button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
         </div>
       </div>
diff --git a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
index 3c08c2fb655..04485a03e39 100644
--- a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
+++ b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
@@ -11,10 +11,10 @@ <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
     </div>
     <form [class]="'ng-invalid'" [formGroup]="requestCopyForm" (ngSubmit)="onSubmit()">
 
-        <div class="form-group">
+        <div class="mb-3">
             <div class="row mb-4">
                 <div class="col-12">
-                    <label for="name">{{'bitstream-request-a-copy.name.label' | translate}}</label>
+                    <label for="name" class="form-label">{{'bitstream-request-a-copy.name.label' | translate}}</label>
                     <input [className]="(name.invalid) && (name.dirty || name.touched) ? 'form-control is-invalid' :'form-control'"
                            type="text" id="name" formControlName="name"/>
                     <div *ngIf="name.invalid && (name.dirty || name.touched)"
@@ -28,7 +28,7 @@ <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
             <div class="row mb-4">
                 <div class="col-12">
                     <label
-                            for="email">{{'bitstream-request-a-copy.email.label' | translate}}</label>
+                            for="email" class="form-label">{{'bitstream-request-a-copy.email.label' | translate}}</label>
                     <input
                             [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
                             id="email" formControlName="email">
@@ -44,13 +44,13 @@ <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
             <div class="row mb-4">
                 <div class="col-12">
                     <div>{{'bitstream-request-a-copy.allfiles.label' |translate}}</div>
-                    <div class="ml-4">
+                    <div class="ms-4 form-check">
                         <input [className]="'form-check-input'" type="radio"
                                id="allfiles-true" formControlName="allfiles" value="true">
                         <label class="form-check-label"
                                for="allfiles-true">{{'bitstream-request-a-copy.files-all-true.label' | translate}}</label>
                     </div>
-                    <div class="ml-4">
+                    <div class="ms-4">
                         <input [className]="'form-check-input'" type="radio"
                                id="allfiles-false" formControlName="allfiles" value="false" [attr.disabled]="bitstream === undefined ? true : null ">
                         <label class="form-check-label"
@@ -61,7 +61,7 @@ <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
             <div class="row mb-4">
                 <div class="col-12">
                     <label
-                            for="message">{{'bitstream-request-a-copy.message.label' | translate}}</label>
+                            for="message" class="form-label">{{'bitstream-request-a-copy.message.label' | translate}}</label>
                     <textarea rows="5"
                               [className]="'form-control'"
                               id="message" formControlName="message"></textarea>
@@ -72,9 +72,9 @@ <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
 
     <hr>
     <div class="row">
-        <div class="col-12 text-right">
+        <div class="col-12 text-end">
 
-            <a (click)="navigateBack()" role="button" class="btn btn-outline-secondary mr-1">
+            <a (click)="navigateBack()" role="button" class="btn btn-outline-secondary me-1">
                 <i class="fas fa-arrow-left"></i> {{'bitstream-request-a-copy.return' | translate}}
             </a>
 
diff --git a/src/app/item-page/bitstreams/upload/upload-bitstream.component.html b/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
index 530471135c0..c055fdde687 100644
--- a/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
+++ b/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
@@ -5,13 +5,13 @@
         <h1>{{'item.bitstreams.upload.title' | translate}}</h1>
         <ng-container *ngVar="(itemRD$ | async)?.payload as item">
           <div *ngIf="item">
-            <span class="font-weight-bold">{{'item.bitstreams.upload.item' | translate}}</span>
+            <span class="fw-bold">{{'item.bitstreams.upload.item' | translate}}</span>
             <span>{{ dsoNameService.getName(item) }}</span>
           </div>
         </ng-container>
       </div>
       <div class="col-12">
-        <label class="font-weight-bold">{{'item.bitstreams.upload.bundle' | translate}}</label>
+        <label class="fw-bold form-label">{{'item.bitstreams.upload.bundle' | translate}}</label>
         <ds-dso-input-suggestions #f id="search-form"
                                   [suggestions]="bundles"
                                   [placeholder]="'item.bitstreams.upload.bundle.placeholder' | translate"
@@ -24,7 +24,7 @@ <h1>{{'item.bitstreams.upload.title' | translate}}</h1>
                                   (click)="f.open()"
                                   ngDefaultControl>
         </ds-dso-input-suggestions>
-        <button *ngIf="!selectedBundleId && selectedBundleName?.length > 0" class="btn btn-success mr-2" (click)="createBundle()">
+        <button *ngIf="!selectedBundleId && selectedBundleName?.length > 0" class="btn btn-success me-2" (click)="createBundle()">
           <i class="fa fa-plus"></i> {{ 'item.bitstreams.upload.bundle.new' | translate }}
         </button>
         <ds-uploader  class="w-100" *ngIf="selectedBundleId"
diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
index cac114ef283..ecba9052976 100644
--- a/src/app/item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -27,7 +27,7 @@ <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
                         <router-outlet></router-outlet>
                     </div>
                     <div class="button-row bottom">
-                      <div class="text-right">
+                      <div class="text-end">
                         <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
                       </div>
                     </div>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index 88d984c19f1..5a6c0e62784 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -1,6 +1,6 @@
 <div class="item-bitstreams" *ngVar="(bundles$ | async) as bundles">
   <div class="button-row top d-flex mt-2 space-children-mr">
-    <button class="mr-auto btn btn-success"
+    <button class="me-auto btn btn-success"
             [attr.aria-label]="'item.edit.bitstreams.upload-button' | translate"
             [routerLink]="[itemPageRoute, 'bitstreams', 'new']"><i
             class="fas fa-upload"></i>
@@ -27,8 +27,8 @@
     </button>
   </div>
 
-  <div *ngIf="item && bundles?.length > 0" class="container table-bordered mt-4">
-    <div class="row header-row font-weight-bold">
+  <div *ngIf="item && bundles?.length > 0" class="container border mt-4">
+    <div class="row header-row fw-bold">
       <div class="{{columnSizes.columns[0].buildClasses()}} row-element">
         <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
         {{'item.edit.bitstreams.headers.name' | translate}}
@@ -51,7 +51,7 @@
   <ds-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-loading>
 
   <div class="button-row bottom">
-    <div class="mt-4 float-right space-children-mr ml-gap">
+    <div class="mt-4 float-end space-children-mr ms-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable$ | async"
               [attr.aria-label]="'item.edit.bitstreams.reinstate-button' | translate"
               (click)="reinstate()"><i
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
index 7de575b7855..ccd7eae39e2 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
@@ -1,12 +1,12 @@
 .header-row {
-  color: var(--bs-table-dark-color);
-  background-color: var(--bs-table-dark-bg);
-  border-color: var(--bs-table-dark-border-color);
+  color: var(--bs-white);
+  background-color: var(--bs-gray-800);
+  border-color: var(--bs-gray-700);
 }
 
 .bundle-row {
-  color: var(--bs-table-head-color);
-  background-color: var(--bs-table-head-bg);
+  color: var(--bs-gray-700);
+  background-color: var(--bs-gray-200);
   border-color: var(--bs-table-border-color);
 }
 
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
index 42b9b9eb647..e5445460cab 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
@@ -1,8 +1,8 @@
 <ng-template #bundleView>
   <div class="row bundle-row">
-    <div class="{{bundleNameColumn.buildClasses()}} font-weight-bold row-element d-flex">
+    <div class="{{bundleNameColumn.buildClasses()}} fw-bold row-element d-flex">
       <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
-      <div class="float-left d-flex align-items-center">
+      <div class="float-start d-flex align-items-center">
         {{'item.edit.bitstreams.bundle.name' | translate:{ name: dsoNameService.getName(bundle) } }}
       </div>
     </div>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.html
index 1bce8667ee1..001e8670ac5 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.html
@@ -1,5 +1,5 @@
 <ng-template #handleView>
-  <div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0">
+  <div class="drag-handle text-muted float-start p-1 me-2" tabindex="0">
     <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
   </div>
 </ng-template>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
index 7d52ab220f1..238cc6433d6 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
@@ -1,7 +1,7 @@
 <ng-template #bitstreamView>
   <div class="{{columnSizes.columns[0].buildClasses()}} row-element d-flex">
     <ng-content select="[slot=drag-handle]"></ng-content>
-    <div class="float-left d-flex align-items-center overflow-hidden">
+    <div class="float-start d-flex align-items-center overflow-hidden">
       <span class="text-truncate">
         {{ bitstreamName }}
       </span>
diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
index ed6ba3eabcf..c90a5438882 100644
--- a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
+++ b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
@@ -35,7 +35,7 @@ <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
                                                 [object]="relatedItem"
                                                 [viewMode]="viewMode">
                                         </ds-listable-object-component-loader>
-                                        <div class="ml-auto">
+                                        <div class="ms-auto">
                                             <div class="btn-group">
                                                 <button class="btn btn-outline-info btn-sm"
                                                         (click)="openVirtualMetadataModal(virtualMetadataModal)">
@@ -48,9 +48,8 @@ <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
                                             <div class="thumb-font-1">
                                                 <div class="modal-header">
                                                     {{'virtual-metadata.delete-item.modal-head' | translate}}
-                                                    <button type="button" class="close"
+                                                    <button type="button" class="btn-close"
                                                             (click)="closeVirtualMetadataModal()" aria-label="Close">
-                                                        <span aria-hidden="true">×</span>
                                                     </button>
                                                 </div>
                                                 <div class="modal-body">
@@ -61,7 +60,7 @@ <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
                                                     </ds-listable-object-component-loader>
                                                     <div *ngFor="let metadata of (relationshipDto.virtualMetadata$ | async)">
                                                         <div>
-                                                            <div class="font-weight-bold">
+                                                            <div class="fw-bold">
                                                                 {{metadata.metadataField}}
                                                             </div>
                                                             <div>
diff --git a/src/app/item-page/edit-item-page/item-move/item-move.component.html b/src/app/item-page/edit-item-page/item-move/item-move.component.html
index 8c47d4f781a..7cfc6f3f97b 100644
--- a/src/app/item-page/edit-item-page/item-move/item-move.component.html
+++ b/src/app/item-page/edit-item-page/item-move/item-move.component.html
@@ -20,7 +20,7 @@ <h1>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle
             <div class="row">
                 <div class="col-12">
                     <p>
-                      <label for="inheritPoliciesCheckbox">
+                      <label class="form-label" for="inheritPoliciesCheckbox">
                         <ng-template #tooltipContent>
                           {{ 'item.edit.move.inheritpolicies.tooltip' | translate }}
                         </ng-template>
@@ -36,7 +36,7 @@ <h1>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle
             </div>
 
           <div class="button-row bottom">
-            <div class="float-right space-children-mr">
+            <div class="float-end space-children-mr">
               <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
               </button>
diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html
index 0977876a195..58a5fbe6e16 100644
--- a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html
+++ b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html
@@ -1,9 +1,9 @@
-<div class="col-12 col-md-3 h-auto float-left d-flex action-label">
+<div class="col-12 col-md-3 h-auto float-start d-flex action-label">
       <span class="justify-content-center align-self-center font-weight-bold">
         {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.label' | translate}}
       </span>
 </div>
-<div class="col-12 col-md-9 float-left action-button">
+<div class="col-12 col-md-9 float-start action-button">
   <span *ngIf="operation.authorized">
     <button class="btn btn-outline-primary" [disabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
       {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
diff --git a/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html b/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html
index 97aa40c7b00..4cb5db3f1ea 100644
--- a/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html
+++ b/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html
@@ -5,7 +5,7 @@ <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
       <p>{{descriptionMessage | translate}}</p>
       <div *ngFor="let identifier of (identifiers$ | async)" class="w-100 p">
         <div *ngIf="(identifier.identifierType === 'doi')">
-          <p class="float-left">{{doiToUpdateMessage | translate}}: {{identifier.value}}
+          <p class="float-start">{{doiToUpdateMessage | translate}}: {{identifier.value}}
             ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})
           </p>
         </div>
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
index e32938590f2..768fbb18885 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
@@ -1,6 +1,6 @@
 <h2 class="h4">
     {{relationshipMessageKey$ | async | translate}}
-    <button class="ml-2 btn btn-success" [disabled]="(hasChanges | async)" (click)="openLookup()">
+    <button class="ms-2 btn btn-success" [disabled]="(hasChanges | async)" (click)="openLookup()">
         <i class="fas fa-plus"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.relationships.edit.buttons.add" | translate}}</span>
     </button>
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html
index e65cd237a34..69ca1b9448f 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html
@@ -7,7 +7,7 @@
     >
     </ds-listable-object-component-loader>
   </div>
-  <div class="col-2">
+  <div class="col-2 position-relative">
     <div class="btn-group relationship-action-buttons">
       <button [disabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
               class="btn btn-outline-danger btn-sm"
diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
index 4c8ea49f993..0e447cfe4b3 100644
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.html
@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="button-row bottom">
-      <div class="float-right ml-gap">
+      <div class="float-end ms-gap">
         <ng-container *ngTemplateOutlet="buttons"></ng-container>
       </div>
     </div>
diff --git a/src/app/item-page/edit-item-page/item-status/item-status.component.html b/src/app/item-page/edit-item-page/item-status/item-status.component.html
index 7d6e2e95599..a640bc72cc4 100644
--- a/src/app/item-page/edit-item-page/item-status/item-status.component.html
+++ b/src/app/item-page/edit-item-page/item-status/item-status.component.html
@@ -1,28 +1,28 @@
 <p class="mt-2">{{'item.edit.tabs.status.description' | translate}}</p>
 <div class="row">
   <div *ngFor="let statusKey of statusDataKeys" class="w-100 pt-1">
-    <div class="col-12 col-md-3 float-left status-label font-weight-bold">
+    <div class="col-12 col-md-3 float-start status-label font-weight-bold">
       {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
     </div>
-    <div class="col-12 col-md-9 float-left status-data" id="status-{{statusKey}}">
+    <div class="col-12 col-md-9 float-start status-data" id="status-{{statusKey}}">
       {{statusData[statusKey]}}
     </div>
   </div>
 
   <div *ngFor="let identifier of (identifiers$ | async)" class="w-100 pt-1">
     <div *ngIf="(identifier.identifierType==='doi')">
-      <div class="col-12 col-md-3 float-left status-label font-weight-bold">
+      <div class="col-12 col-md-3 float-start status-label font-weight-bold">
         {{identifier.identifierType.toLocaleUpperCase()}}
       </div>
-      <div class="col-12 col-md-9 float-left status-label font-weight-bold">{{identifier.value}}
+      <div class="col-12 col-md-9 float-start status-label font-weight-bold">{{identifier.value}}
         ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})</div>
     </div>
   </div>
 
-  <div class="col-12 col-md-3 float-left status-label font-weight-bold">
+  <div class="col-12 col-md-3 float-start status-label font-weight-bold">
     {{'item.edit.tabs.status.labels.itemPage' | translate}}:
   </div>
-  <div class="col-12 col-md-9 float-left status-data" id="status-itemPage">
+  <div class="col-12 col-md-9 float-start status-data" id="status-itemPage">
     <a [routerLink]="itemPageRoute$ | async">{{itemPageRoute$ | async}}</a>
   </div>
 
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
index 927f7dbb48d..f86ab8c288a 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
@@ -1,7 +1,6 @@
 <div [ngClass]="showThumbnails ? 'hide-modal-thumbnail-column' : ''">
     <div class="modal-header">{{'virtual-metadata.delete-relationship.modal-head' | translate}}
-        <button type="button" class="close" (click)="close.emit()" aria-label="Close">
-            <span aria-hidden="true">×</span>
+        <button type="button" class="btn-close" (click)="close.emit()" aria-label="Close">
         </button>
     </div>
     <div class="modal-body">
@@ -18,7 +17,7 @@
                     <ds-listable-object-component-loader [object]="itemDTO.item">
                     </ds-listable-object-component-loader>
                     <div *ngFor="let metadata of virtualMetadata.get(itemDTO.item.uuid)">
-                        <div class="font-weight-bold">
+                        <div class="fw-bold">
                             {{metadata.metadataField}}
                         </div>
                         <div>
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
index e02df167f50..3d0f520d3da 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.spec.ts
@@ -99,7 +99,7 @@ describe('VirtualMetadataComponent', () => {
 
       spyOn(comp.close, 'emit');
       fixture.debugElement
-        .query(By.css('button.close'))
+        .query(By.css('button.btn-close'))
         .triggerEventHandler('click', null);
       expect(comp.close.emit).toHaveBeenCalled();
     });
diff --git a/src/app/item-page/full/full-item-page.component.html b/src/app/item-page/full/full-item-page.component.html
index b6e1d1e6edb..e9b6436d2f2 100644
--- a/src/app/item-page/full/full-item-page.component.html
+++ b/src/app/item-page/full/full-item-page.component.html
@@ -6,7 +6,7 @@
       <ds-view-tracker [object]="item"></ds-view-tracker>
       <div *ngIf="!item.isWithdrawn || (isAdmin$|async)" class="full-item-info">
         <div class="d-flex flex-row">
-          <ds-item-page-title-field class="mr-auto" [item]="item"></ds-item-page-title-field>
+          <ds-item-page-title-field class="me-auto" [item]="item"></ds-item-page-title-field>
           <ds-dso-edit-menu></ds-dso-edit-menu>
         </div>
         <div class="simple-view-link my-3" *ngIf="!fromSubmissionObject">
@@ -31,8 +31,8 @@
         <ds-item-page-collections [item]="item"></ds-item-page-collections>
         <ds-item-versions class="mt-2" [item]="item"></ds-item-versions>
         <div class="button-row bottom" *ngIf="fromSubmissionObject">
-          <div class="text-right">
-            <button class="btn btn-outline-secondary mr-1" (click)="back()"><i
+          <div class="text-end">
+            <button class="btn btn-outline-secondary me-1" (click)="back()"><i
                     class="fas fa-arrow-left"></i> {{'item.page.return' | translate}}</button>
           </div>
         </div>
diff --git a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
index b53c4003853..104e54c3151 100644
--- a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
+++ b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
@@ -47,7 +47,7 @@ <h1>{{'person.orcid.registry.auth' | translate}}</h1>
     </ds-alert>
     <div class="row" *ngIf="(ownerCanDisconnectProfileFromOrcid() | async)" data-test="unlinkOwner">
       <div class="col">
-        <button type="submit" class="btn btn-danger float-right" (click)="unlinkOrcid()"
+        <button type="submit" class="btn btn-danger float-end" (click)="unlinkOrcid()"
                 [disabled]="(unlinkProcessing | async)">
           <span *ngIf="(unlinkProcessing | async) !== true"><i
             class="fas fa-unlink"></i> {{ 'person.page.orcid.unlink' | translate }}</span>
@@ -55,7 +55,7 @@ <h1>{{'person.orcid.registry.auth' | translate}}</h1>
             class='fas fa-circle-notch fa-spin'></i> {{'person.page.orcid.unlink.processing' | translate}}</span>
         </button>
         <button *ngIf="(hasMissingOrcidAuthorizations() | async)" type="submit"
-                class="btn btn-primary float-right" (click)="linkOrcid()">
+                class="btn btn-primary float-end" (click)="linkOrcid()">
           <span><i class="fas fa-check"></i> {{ 'person.page.orcid.grant-authorizations' | translate }}</span>
         </button>
       </div>
@@ -73,7 +73,7 @@ <h1>{{'person.orcid.registry.auth' | translate}}</h1>
     </div>
     <div class="row">
       <div class="col">
-        <button class="btn btn-primary float-right" (click)="linkOrcid()">
+        <button class="btn btn-primary float-end" (click)="linkOrcid()">
           <i class="fas fa-link"></i>
           {{'person.page.orcid.link' | translate}}
         </button>
diff --git a/src/app/item-page/orcid-page/orcid-page.component.html b/src/app/item-page/orcid-page/orcid-page.component.html
index 7c5ab4a276e..472dc517fa9 100644
--- a/src/app/item-page/orcid-page/orcid-page.component.html
+++ b/src/app/item-page/orcid-page/orcid-page.component.html
@@ -10,7 +10,7 @@
 
 <div *ngIf="(processingConnection | async) !== true && (item | async)" class="container">
   <div class="button-row bottom mb-3">
-    <div class="text-right">
+    <div class="text-end">
       <a [routerLink]="getItemPage()" role="button" class="btn btn-outline-secondary" data-test="back-button">
         <i class="fas fa-arrow-left"></i> {{'item.orcid.return' | translate}}
       </a>
diff --git a/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html b/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html
index 19044e5a70f..bfba8eb75dd 100644
--- a/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html
+++ b/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html
@@ -12,9 +12,9 @@ <h2>{{'person.orcid.sync.setting' | translate}}</h2>
                   {{ 'person.page.orcid.synchronization-mode-message' | translate}}
                 </ds-alert>
               </div>
-              <div class="form-group row">
-                <label for="syncMode">{{ 'person.page.orcid.synchronization-mode.label'| translate }}</label>
-                <select class="form-control" [(ngModel)]="currentSyncMode" name="syncMode" id="syncMode"
+              <div class="mb-3 row">
+                <label class="form-label" for="syncMode">{{ 'person.page.orcid.synchronization-mode.label'| translate }}</label>
+                <select class="form-select" [(ngModel)]="currentSyncMode" name="syncMode" id="syncMode"
                         required>
                   <option *ngFor="let syncMode of syncModes"
                           [value]="syncMode.value">{{ syncMode.label | translate }}</option>
@@ -36,13 +36,13 @@ <h2>{{'person.orcid.sync.setting' | translate}}</h2>
                   {{ 'person.page.orcid.synchronization-mode-publication-message' | translate}}
                 </ds-alert>
               </div>
-              <div class="form-group">
+              <div class="mb-3">
                 <div *ngFor="let option of syncPublicationOptions" class="row form-check">
                   <input type="radio" [(ngModel)]="currentSyncPublications"
                          name="syncPublications" id="publicationOption_{{option.value}}" [value]="option.value"
                          required>
                   <label for="publicationOption_{{option.value}}"
-                         class="ml-2">{{option.label | translate}}</label>
+                         class="ms-2 form-label">{{option.label | translate}}</label>
                 </div>
               </div>
             </div>
@@ -59,12 +59,12 @@ <h2>{{'person.orcid.sync.setting' | translate}}</h2>
                   {{ 'person.page.orcid.synchronization-mode-funding-message' | translate}}
                 </ds-alert>
               </div>
-              <div class="form-group">
+              <div class="mb-3">
                 <div *ngFor="let option of syncFundingOptions" class="row form-check">
                   <input type="radio" [(ngModel)]="currentSyncFunding"
                          name="syncFundings" id="fundingOption_{{option.value}}" [value]="option.value"
                          required>
-                  <label for="fundingOption_{{option.value}}" class="ml-2">{{option.label | translate}}</label>
+                  <label for="fundingOption_{{option.value}}" class="ms-2 form-label">{{option.label | translate}}</label>
                 </div>
               </div>
             </div>
@@ -81,12 +81,12 @@ <h2>{{'person.orcid.sync.setting' | translate}}</h2>
                   {{ 'person.page.orcid.synchronization-mode-profile-message' | translate}}
                 </ds-alert>
               </div>
-              <div class="form-group">
+              <div class="mb-3">
                 <div *ngFor="let option of syncProfileOptions" class="row form-check">
                   <input type="checkbox" [(ngModel)]="option.checked"
                          name="syncProfile_{{option.value}}" id="profileOption_{{option.value}}"
                          [value]="option.value">
-                  <label for="profileOption_{{option.value}}" class="ml-2">{{option.label | translate}}</label>
+                  <label for="profileOption_{{option.value}}" class="ms-2 form-label">{{option.label | translate}}</label>
                 </div>
               </div>
             </div>
@@ -96,7 +96,7 @@ <h2>{{'person.orcid.sync.setting' | translate}}</h2>
     </div>
     <div class="row">
       <div class="col">
-        <button type="submit" class="btn btn-primary float-right">
+        <button type="submit" class="btn btn-primary float-end">
           <i class="fas fa-edit"></i>
           {{ 'person.page.orcid.save.preference.changes' | translate }}
         </button>
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.html b/src/app/item-page/simple/field-components/file-section/file-section.component.html
index 44c83b86267..3348f551629 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.html
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.html
@@ -3,7 +3,7 @@
     <div class="file-section">
       <ds-file-download-link *ngFor="let file of bitstreams; let last=last;" [bitstream]="file" [item]="item">
         <span>
-          <span *ngIf="primaryBitsreamId === file.id" class="badge badge-primary">{{ 'item.page.bitstreams.primary' | translate }}</span> 
+          <span *ngIf="primaryBitsreamId === file.id" class="badge bg-primary">{{ 'item.page.bitstreams.primary' | translate }}</span>
           {{ dsoNameService.getName(file) }}
         </span>
         <span> ({{(file?.sizeBytes) | dsFileSize }})</span>
diff --git a/src/app/item-page/simple/item-page.component.scss b/src/app/item-page/simple/item-page.component.scss
index a99cbd688fe..2501fc92ca4 100644
--- a/src/app/item-page/simple/item-page.component.scss
+++ b/src/app/item-page/simple/item-page.component.scss
@@ -1,4 +1,4 @@
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .container {
     width: 100%;
     max-width: none;
diff --git a/src/app/item-page/simple/item-types/publication/publication.component.html b/src/app/item-page/simple/item-types/publication/publication.component.html
index 86f203deca2..cfd4c818fc2 100644
--- a/src/app/item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/item-page/simple/item-types/publication/publication.component.html
@@ -9,7 +9,7 @@
   </div>
 </div>
 <div class="d-flex flex-row">
-  <ds-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="me-auto">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
diff --git a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
index 962cc2fcad8..5d1b2c6715a 100644
--- a/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
+++ b/src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html
@@ -10,7 +10,7 @@
 </div>
 
 <div class="d-flex flex-row">
-  <ds-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="me-auto">
   </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
index 424c2324fa3..c845deb4504 100644
--- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
+++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
@@ -6,11 +6,11 @@
       </ds-metadata-representation-loader>
       <ds-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
-        <div *ngIf="(objects.length * incrementBy) < total" class="float-left">
+        <div *ngIf="(objects.length * incrementBy) < total" class="float-start">
           <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
             translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
         </div>
-        <div *ngIf="objects.length > 1" class="float-right">
+        <div *ngIf="objects.length > 1" class="float-end">
           <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
             translate:{ amount: representations?.length } }}</button>
         </div>
diff --git a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
index 77370f462d8..16a1532fc0c 100644
--- a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
+++ b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
@@ -8,7 +8,7 @@
              onerror="this.src='assets/images/dspace-logo.svg'">
       </div>
       <div class="w-100 d-flex justify-content-between">
-        <div class="pl-4 align-self-center">
+        <div class="ps-4 align-self-center">
           {{'item.qa-event-notification.check.notification-info' | translate : {num: source.totalEvents } }}
         </div>
         <button [routerLink]="[ getQualityAssuranceRoute(), (source.id | dsSplit: ':')[0], 'target', item.id]"
diff --git a/src/app/item-page/simple/related-items/related-items.component.html b/src/app/item-page/simple/related-items/related-items.component.html
index 02c207b3327..b43b9f38885 100644
--- a/src/app/item-page/simple/related-items/related-items.component.html
+++ b/src/app/item-page/simple/related-items/related-items.component.html
@@ -6,11 +6,11 @@
       </ds-listable-object-component-loader>
       <ds-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
-        <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">
+        <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-start" id="view-more">
           <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
             translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }}</button>
         </div>
-        <div *ngIf="objects.length > 1" class="float-right" id="view-less">
+        <div *ngIf="objects.length > 1" class="float-end" id="view-less">
           <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
             translate:{ amount: itemsRD?.payload?.page?.length } }}</button>
         </div>
diff --git a/src/app/item-page/versions/item-versions-delete-modal/item-versions-delete-modal.component.html b/src/app/item-page/versions/item-versions-delete-modal/item-versions-delete-modal.component.html
index 6c54a15162b..b65883775b9 100644
--- a/src/app/item-page/versions/item-versions-delete-modal/item-versions-delete-modal.component.html
+++ b/src/app/item-page/versions/item-versions-delete-modal/item-versions-delete-modal.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'item.version.delete.modal.header' | translate}}
-    <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html b/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html
index a6642456682..73cb1bc8b24 100644
--- a/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html
+++ b/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html
@@ -8,11 +8,11 @@
       </ng-template>
       <span *ngIf="version?.id === itemVersion?.id">*</span>
 
-      <span *ngIf="workspaceId$ | async" class="text-light badge badge-primary ml-3">
+      <span *ngIf="workspaceId$ | async" class="text-light badge bg-primary ms-3">
                       {{ "item.version.history.table.workspaceItem" | translate }}
                     </span>
 
-      <span *ngIf="workflowId$ | async" class="text-light badge badge-info ml-3">
+      <span *ngIf="workflowId$ | async" class="text-light badge bg-info ms-3">
                       {{ "item.version.history.table.workflowItem" | translate }}
                     </span>
 
diff --git a/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html b/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html
index c0e5e83b333..7b622744e20 100644
--- a/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html
+++ b/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html
@@ -1,7 +1,6 @@
 <div *ngIf="(this.submitted$ | async) !== true; else waiting">
   <div class="modal-header">{{'item.version.create.modal.header' | translate}}
-    <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
@@ -11,8 +10,8 @@
         {{ "item.version.create.modal.text.startingFrom" | translate : {version: versionNumber} }}
       </span>
     </p>
-    <div class="form-group">
-      <label for="summary">{{'item.version.create.modal.form.summary.label' | translate }}:</label>
+    <div class="mb-3">
+      <label for="summary" class="form-label">{{'item.version.create.modal.form.summary.label' | translate }}:</label>
       <input type="text" id="summary" class="form-control" [(ngModel)]="newVersionSummary"
              (keyup.enter)="onModalSubmit()"
              placeholder="{{'item.version.create.modal.form.summary.placeholder' | translate }}"/>
@@ -20,13 +19,13 @@
     </div>
   </div>
   <div class="modal-footer space-children-mr">
-      <button class="btn btn-outline-secondary btn-sm ml-0"
+      <button class="btn btn-outline-secondary btn-sm ms-0"
               type="button"
               (click)="onModalClose()"
               title="{{'item.version.create.modal.button.cancel.tooltip' | translate}}">
         <i class="fas fa-times fa-fw"></i> {{'item.version.create.modal.button.cancel' | translate}}
       </button>
-      <button class="btn btn-success btn-sm ml-0"
+      <button class="btn btn-success btn-sm ms-0"
               type="submit"
               (click)="onModalSubmit()"
               title="{{'item.version.create.modal.button.confirm.tooltip' | translate}}">
diff --git a/src/app/item-page/versions/item-versions.component.html b/src/app/item-page/versions/item-versions.component.html
index ce5107aaa25..e5decb9c871 100644
--- a/src/app/item-page/versions/item-versions.component.html
+++ b/src/app/item-page/versions/item-versions.component.html
@@ -39,7 +39,7 @@ <h2 *ngIf="displayTitle" class="h4">{{"item.version.history.head" | translate}}<
               {{versionDTO.version.created | date : 'yyyy-MM-dd HH:mm:ss'}}
             </td>
             <td class="version-row-element-summary">
-              <div class="float-left">
+              <div class="float-start">
                 <ng-container *ngIf="isThisBeingEdited(versionDTO.version); then editSummary else showSummary"></ng-container>
                 <ng-template #showSummary>{{versionDTO.version.summary}}</ng-template>
                 <ng-template #editSummary>
@@ -49,7 +49,7 @@ <h2 *ngIf="displayTitle" class="h4">{{"item.version.history.head" | translate}}<
                 </ng-template>
               </div>
 
-              <div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions && versionDTO.canEditVersion | async">
+              <div class="float-end btn-group edit-field space-children-mr" *ngIf="displayActions && versionDTO.canEditVersion | async">
                 <ng-container *ngIf="isThisBeingEdited(versionDTO.version); else notThisBeingEdited">
                   <!--DISCARD EDIT-->
                   <button class="btn btn-sm btn-outline-warning"
diff --git a/src/app/login-page/login-page.component.html b/src/app/login-page/login-page.component.html
index e32840ead8d..cde54f8fd7d 100644
--- a/src/app/login-page/login-page.component.html
+++ b/src/app/login-page/login-page.component.html
@@ -2,7 +2,7 @@
   <div class="text-center mt-5 row justify-content-center">
     <div>
       <img class="mb-4 login-logo" src="assets/images/dspace-logo.svg" [alt]="'repository.image.logo' | translate">
-      <h1 class="h3 mb-0 font-weight-normal">{{"login.form.header" | translate}}</h1>
+      <h1 class="h3 mb-0 fw-normal">{{"login.form.header" | translate}}</h1>
       <ds-log-in
       [isStandalonePage]="true"></ds-log-in>
     </div>
diff --git a/src/app/logout-page/logout-page.component.html b/src/app/logout-page/logout-page.component.html
index edb86583fd6..78074b30e8b 100644
--- a/src/app/logout-page/logout-page.component.html
+++ b/src/app/logout-page/logout-page.component.html
@@ -2,7 +2,7 @@
   <div class="text-center mt-5 row justify-content-md-center">
     <div class="mx-auto">
       <img class="mb-4 login-logo" src="assets/images/dspace-logo.svg" [alt]="'repository.image.logo' | translate">
-      <h1 class="h3 mb-0 font-weight-normal">{{"logout.form.header" | translate}}</h1>
+      <h1 class="h3 mb-0 fw-normal">{{"logout.form.header" | translate}}</h1>
       <ds-log-out></ds-log-out>
     </div>
   </div>
diff --git a/src/app/my-dspace-page/collection-selector/collection-selector.component.html b/src/app/my-dspace-page/collection-selector/collection-selector.component.html
index a87118fc4e1..2e6d3b03bf6 100644
--- a/src/app/my-dspace-page/collection-selector/collection-selector.component.html
+++ b/src/app/my-dspace-page/collection-selector/collection-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.create.submission.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
index 01571100354..0ca332a5bae 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
@@ -1,5 +1,5 @@
   <div class="add" *ngIf="(moreThanOne$ | async) !== true">
-    <button class="btn btn-lg btn-outline-primary mt-1 ml-2"
+    <button class="btn btn-lg btn-outline-primary mt-1 ms-2"
             [attr.aria-label]="'mydspace.new-submission-external' | translate" [disabled]="(initialized$ | async) !== true"
             (click)="openPage(singleEntity)" role="button"
             title="{{'mydspace.new-submission-external' | translate}}">
@@ -9,7 +9,7 @@
   <div class="add w-100" display="dynamic" placement="bottom-right"
        ngbDropdown
        *ngIf="(moreThanOne$ | async)">
-    <button class="btn btn-lg btn-outline-primary mt-1 ml-2" id="dropdownImport" ngbDropdownToggle
+    <button class="btn btn-lg btn-outline-primary mt-1 ms-2" id="dropdownImport" ngbDropdownToggle
             type="button" [disabled]="(initialized$ | async) !== true"
             [attr.aria-label]="'mydspace.new-submission-external' | translate"
             [attr.data-test]="'import-dropdown' | dsBrowserOnly"
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
index 730b1db1c76..c9e2d4d421d 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
@@ -1,5 +1,5 @@
   <div class="add" *ngIf="(moreThanOne$ | async) !== true">
-    <button class="btn btn-lg btn-primary mt-1 ml-2" [attr.aria-label]="'mydspace.new-submission' | translate"
+    <button class="btn btn-lg btn-primary mt-1 ms-2" [attr.aria-label]="'mydspace.new-submission' | translate"
             [disabled]="(initialized$ | async) !== true" (click)="openDialog(singleEntity)" role="button">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
     </button>
@@ -7,7 +7,7 @@
   <div class="add w-100" display="dynamic" placement="bottom-right"
        ngbDropdown
        *ngIf="(moreThanOne$ | async)">
-    <button class="btn btn-lg btn-primary mt-1 ml-2" id="dropdownSubmission" ngbDropdownToggle
+    <button class="btn btn-lg btn-primary mt-1 ms-2" id="dropdownSubmission" ngbDropdownToggle
             type="button"  [disabled]="(initialized$ | async) !== true"
             [attr.aria-label]="'mydspace.new-submission' | translate"
             [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
diff --git a/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html b/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html
index e44d2c6e489..c29412e0044 100644
--- a/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html
+++ b/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html
@@ -13,7 +13,7 @@
       />
     </div>
       <div class="w-100 d-flex justify-content-between">
-        <div class="pl-4 align-self-center">
+        <div class="ps-4 align-self-center">
           {{ "mydspace.qa-event-notification.check.notification-info" | translate : { num: source.totalEvents } }}
         </div>
         <button
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 8849fbd8094..2fedec1c90a 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -5,6 +5,8 @@
 
   .dropdown-menu {
     overflow: hidden;
+    min-width: 100%;
+    top: 100%;
     @include media-breakpoint-down(sm) {
       border: 0;
       background-color: var(--ds-expandable-navbar-bg);
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 90cf07caa42..abad320fe0e 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -9,7 +9,7 @@
         <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
           <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
         </ng-container>
-        <div class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
+        <div class="navbar-nav align-items-md-center me-auto shadow-none gapx-3">
           <ng-container *ngFor="let section of (sections | async)">
             <ng-container
               *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts
new file mode 100644
index 00000000000..45fec20167a
--- /dev/null
+++ b/src/app/navbar/navbar.module.ts
@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { EffectsModule } from '@ngrx/effects';
+
+import { CoreModule } from '../core/core.module';
+import { MenuModule } from '../shared/menu/menu.module';
+import { SharedModule } from '../shared/shared.module';
+import { ExpandableNavbarSectionComponent } from './expandable-navbar-section/expandable-navbar-section.component';
+import { ThemedExpandableNavbarSectionComponent } from './expandable-navbar-section/themed-expandable-navbar-section.component';
+import { NavbarComponent } from './navbar.component';
+import { NavbarEffects } from './navbar.effects';
+import { NavbarSectionComponent } from './navbar-section/navbar-section.component';
+import { ThemedNavbarComponent } from './themed-navbar.component';
+
+const effects = [
+  NavbarEffects,
+];
+
+const ENTRY_COMPONENTS = [
+  // put only entry components that use custom decorator
+  NavbarSectionComponent,
+  ExpandableNavbarSectionComponent,
+  ThemedExpandableNavbarSectionComponent,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    MenuModule,
+    FormsModule,
+    EffectsModule.forFeature(effects),
+    CoreModule.forRoot(),
+    NgbDropdownModule,
+  ],
+  declarations: [
+    ...ENTRY_COMPONENTS,
+    NavbarComponent,
+    ThemedNavbarComponent,
+  ],
+  providers: [],
+  exports: [
+    ThemedNavbarComponent,
+    NavbarSectionComponent,
+    ThemedExpandableNavbarSectionComponent,
+  ],
+})
+
+/**
+ * This module handles all components and pipes that are necessary for the horizontal navigation bar
+ */
+export class NavbarModule {
+  /**
+   * NOTE: this method allows to resolve issue with components that using a custom decorator
+   * which are not loaded during SSR otherwise
+   */
+  static withEntryComponents() {
+    return {
+      ngModule: NavbarModule,
+      providers: ENTRY_COMPONENTS.map((component) => ({ provide: component })),
+    };
+  }
+
+}
diff --git a/src/app/notifications/qa/events/quality-assurance-events.component.html b/src/app/notifications/qa/events/quality-assurance-events.component.html
index 8a9f40e2b2e..51e0f3177d4 100644
--- a/src/app/notifications/qa/events/quality-assurance-events.component.html
+++ b/src/app/notifications/qa/events/quality-assurance-events.component.html
@@ -63,30 +63,30 @@ <h2 class="border-bottom pb-2">
                          [routerLink]="['/items', eventElement?.target?.id]">{{eventElement.title}}</a>
                     <span *ngIf="!eventElement?.target">{{eventElement.title}}</span>
                     <div *ngIf="eventElement?.event?.message?.serviceId">
-                      <span class="small pr-1">{{'quality-assurance.event.table.event.message.serviceUrl' | translate}}</span>
+                      <span class="small pe-1">{{'quality-assurance.event.table.event.message.serviceUrl' | translate}}</span>
                       <span [title]="eventElement.event.message.serviceId">
                         <a [href]="eventElement.event.message.serviceId" target="_blank">{{eventElement.event.message.serviceId}}</a>
                       </span>
                     </div>
                     <div *ngIf="eventElement?.event?.message?.href" class="d-flex align-items-center">
-                      <span class="small pr-1">{{'quality-assurance.event.table.event.message.link' | translate}}</span>
+                      <span class="small pe-1">{{'quality-assurance.event.table.event.message.link' | translate}}</span>
                       <span [title]="eventElement.event.message.href" class="text-truncate d-inline-block w-75">
                         <a [href]="eventElement.event.message.href" target="_blank">{{eventElement.event.message.href}}</a>
                       </span>
                     </div>
                   </td>
                   <td *ngIf="showTopic.indexOf('/PID') !== -1">
-                    <p><span class="small">{{'quality-assurance.event.table.pidtype' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.type}}</span></p>
+                    <p><span class="small">{{'quality-assurance.event.table.pidtype' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.type}}</span></p>
                     <p><span class="small">{{'quality-assurance.event.table.pidvalue' | translate}}</span><br>
                       <a *ngIf="hasPIDHref(eventElement.event.message); else noPID" href="{{getPIDHref(eventElement.event.message)}}" rel="noopener noreferrer" target="_blank">
                         {{eventElement.event.message.value}}
                       </a>
-                      <ng-template #noPID><span class="badge badge-info">{{eventElement.event.message.value}}</span></ng-template>
+                      <ng-template #noPID><span class="badge bg-info">{{eventElement.event.message.value}}</span></ng-template>
                     </p>
                   </td>
                   <td *ngIf="showTopic.indexOf('/SUBJECT') !== -1">
                     <p><span class="small">{{'quality-assurance.event.table.subjectValue' | translate}}
-                       </span><br><span class="badge badge-info">{{eventElement.event.message.value}}</span></p>
+                       </span><br><span class="badge bg-info">{{eventElement.event.message.value}}</span></p>
                   </td>
                   <td *ngIf="showTopic.indexOf('/ABSTRACT') !== -1">
                     <p class="abstract-container" [class.show]="showMore">
@@ -125,11 +125,11 @@ <h2 class="border-bottom pb-2">
                       <a href="{{sourceUrlForProjectSearch}}{{ eventElement.event.message.sourceId}}" rel="noopener noreferrer" target="_blank">{{eventElement.event.message.title}}</a>
                     </p>
                     <p>
-                      <span *ngIf="eventElement.event.message.acronym"><span class="small">{{'quality-assurance.event.table.acronym' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.acronym}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.code"><span class="small">{{'quality-assurance.event.table.code' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.code}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.funder"><span class="small">{{'quality-assurance.event.table.funder' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.funder}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.fundingProgram"><span class="small">{{'quality-assurance.event.table.fundingProgram' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.fundingProgram}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.jurisdiction"><span class="small">{{'quality-assurance.event.table.jurisdiction' | translate}}</span>&nbsp;<span class="badge badge-info">{{eventElement.event.message.jurisdiction}}</span></span>
+                      <span *ngIf="eventElement.event.message.acronym"><span class="small">{{'quality-assurance.event.table.acronym' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.acronym}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.code"><span class="small">{{'quality-assurance.event.table.code' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.code}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.funder"><span class="small">{{'quality-assurance.event.table.funder' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.funder}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.fundingProgram"><span class="small">{{'quality-assurance.event.table.fundingProgram' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.fundingProgram}}</span><br></span>
+                      <span *ngIf="eventElement.event.message.jurisdiction"><span class="small">{{'quality-assurance.event.table.jurisdiction' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.jurisdiction}}</span></span>
                     </p>
                     <hr>
                     <div>
diff --git a/src/app/notifications/qa/source/quality-assurance-source.component.html b/src/app/notifications/qa/source/quality-assurance-source.component.html
index 7d24452c9ba..3a1ccbe7dc9 100644
--- a/src/app/notifications/qa/source/quality-assurance-source.component.html
+++ b/src/app/notifications/qa/source/quality-assurance-source.component.html
@@ -41,7 +41,7 @@ <h2 class="h4 border-bottom pb-2">{{'quality-assurance.source'| translate}}</h2>
                                 class="btn btn-outline-primary btn-sm"
                                 title="{{'quality-assurance.source-list.button.detail' | translate : { param: sourceElement.id } }}"
                                 [routerLink]="[sourceElement.id]">
-                          <span class="badge badge-info">{{sourceElement.totalEvents}}</span>
+                          <span class="badge bg-info">{{sourceElement.totalEvents}}</span>
                           <i class="fas fa-info fa-fw"></i>
                         </button>
                       </div>
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.component.html b/src/app/notifications/qa/topics/quality-assurance-topics.component.html
index c2882f94eff..4afc5e21853 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.component.html
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.component.html
@@ -45,7 +45,7 @@ <h2 class="border-bottom pb-2">{{'quality-assurance.topics'| translate}}</h2>
                               class="btn btn-outline-primary btn-sm"
                               title="{{'quality-assurance.topics-list.button.detail' | translate : { param: topicElement.name } }}"
                               [routerLink]="[getQualityAssuranceRoute(), sourceId, topicElement.id]">
-                        <span class="badge badge-info">{{topicElement.totalEvents}}</span>
+                        <span class="badge bg-info">{{topicElement.totalEvents}}</span>
                         <i class="fas fa-info fa-fw"></i>
                       </button>
                     </div>
diff --git a/src/app/notifications/suggestion-actions/suggestion-actions.component.html b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
index 2a46191deea..baad402364c 100644
--- a/src/app/notifications/suggestion-actions/suggestion-actions.component.html
+++ b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
@@ -19,9 +19,9 @@
     </ng-template>
 
   </div>
-  <button (click)="ignoreSuggestion()" class="btn btn-danger ml-2"><i class="fa fa-ban"></i>
+  <button (click)="ignoreSuggestion()" class="btn btn-danger ms-2"><i class="fa fa-ban"></i>
     {{ ignoreSuggestionLabel() | translate}}</button>
-  <button *ngIf="!isBulk" (click)="toggleSeeEvidences()" [disabled]="!hasEvidence" class="btn btn-info ml-2">
+  <button *ngIf="!isBulk" (click)="toggleSeeEvidences()" [disabled]="!hasEvidence" class="btn btn-info ms-2">
     <i class="fa fa-eye"></i>
     <ng-container *ngIf="!seeEvidence"> {{ 'suggestion.seeEvidence' | translate}}</ng-container>
     <ng-container *ngIf="seeEvidence"> {{ 'suggestion.hideEvidence' | translate}}</ng-container>
diff --git a/src/app/notifications/suggestions-popup/suggestions-popup.component.html b/src/app/notifications/suggestions-popup/suggestions-popup.component.html
index 474dfa329e7..f21b469ccff 100644
--- a/src/app/notifications/suggestions-popup/suggestions-popup.component.html
+++ b/src/app/notifications/suggestions-popup/suggestions-popup.component.html
@@ -1,7 +1,7 @@
 <div class="notifications-wrapper position-fixed top right" *ngIf="suggestionsRD$ | async">
   <div class="notification alert alert-success alert-dismissible m-3 shadow" role="alert">
     <button (click)="removePopup()"
-            type="button" class="close pt-0 pr-1 pl-0 pb-0" data-dismiss="alert" aria-label="Close">
+            type="button" class="close pt-0 pe-1 pe-0 pb-0" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">&times;</span>
     </button>
 
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index 7558939ef36..a60ba59ec43 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -53,7 +53,7 @@ <h1 class="flex-grow-1">
         </button>
         <ds-loading *ngIf="retrievingOutputLogs$ | async" class="ds-themed-loading"
                            message="{{ 'process.detail.logs.loading' | translate }}"></ds-loading>
-        <pre class="font-weight-bold text-secondary bg-light p-3" tabindex="0"
+        <pre class="fw-bold text-secondary bg-light p-3" tabindex="0"
              *ngIf="showOutputLogs && (outputLogs$ | async)?.length > 0">{{ (outputLogs$ | async) }}</pre>
         <p id="no-output-logs-message" *ngIf="((retrievingOutputLogs$ | async) !== true && showOutputLogs)
       && (outputLogs$ | async | dsHasNoValue) || (outputLogs$ | async)?.length === 0 || !process._links.output">
@@ -62,11 +62,11 @@ <h1 class="flex-grow-1">
     </ds-process-detail-field>
 
     <ds-process-detail-field id="process-actions" [title]="'process.detail.actions'">
-        <button class="btn btn-success mr-2" routerLink="/processes/new" [queryParams]="{id: process?.processId}"><i
-                class="fas fa-plus pr-2"></i>{{'process.detail.create' | translate}}</button>
+        <button class="btn btn-success me-2" routerLink="/processes/new" [queryParams]="{id: process?.processId}"><i
+                class="fas fa-plus pe-2"></i>{{'process.detail.create' | translate}}</button>
         <button *ngIf="isProcessFinished(process)" id="delete" class="btn btn-danger"
                 (click)="openDeleteModal(deleteModal)">
-            <i class="fas fa-trash pr-2"></i>{{ 'process.detail.delete.button' | translate }}
+            <i class="fas fa-trash pe-2"></i>{{ 'process.detail.delete.button' | translate }}
         </button>
     </ds-process-detail-field>
 
@@ -83,7 +83,7 @@ <h1 class="flex-grow-1">
             <div>
                 <h4>{{'process.detail.delete.header' | translate }}</h4>
             </div>
-            <button type="button" class="close"
+            <button type="button" class="btn-close"
                     (click)="closeModal()" aria-label="Close">
                 <span aria-hidden="true">×</span>
             </button>
@@ -92,7 +92,7 @@ <h4>{{'process.detail.delete.header' | translate }}</h4>
         <div class="modal-body">
             <div>{{'process.detail.delete.body' | translate }}</div>
             <div class="mt-4">
-                <button class="btn btn-primary mr-2" (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
+                <button class="btn btn-primary me-2" (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
                 <button id="delete-confirm" class="btn btn-danger"
                         (click)="deleteProcess(process)">{{ 'process.detail.delete.confirm' | translate }}
                 </button>
diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html
index 211129489e5..c1d1c3a61c0 100644
--- a/src/app/process-page/form/process-form.component.html
+++ b/src/app/process-page/form/process-form.component.html
@@ -7,8 +7,8 @@ <h1 class="col-12">
             <form #form="ngForm" (ngSubmit)="submitForm(form)">
                 <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
                 <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
-                <a [routerLink]="['/processes']" class="btn btn-danger float-left">{{ 'process.new.cancel' | translate }}</a>
-                <button type="submit" class="btn btn-primary float-right">{{ 'process.new.submit' | translate }}</button>
+                <a [routerLink]="['/processes']" class="btn btn-danger float-start">{{ 'process.new.cancel' | translate }}</a>
+                <button type="submit" class="btn btn-primary float-end">{{ 'process.new.submit' | translate }}</button>
             </form>
         </div>
         <div class="col-12 col-md-6">
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
index 1f1559b50bd..ee4714806cd 100644
--- a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
@@ -1,6 +1,6 @@
-<div class="form-row gap-2 mb-2 mx-0">
+<div class="row gap-2 mb-2 mx-0">
     <select id="process-parameters"
-            class="form-control col"
+            class="form-select col"
             name="parameter-{{index}}"
             [attr.aria-label]="'process.new.select-parameter' | translate"
             [(ngModel)]="selectedParameter"
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
index a741eacc867..85372acce05 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -1,8 +1,8 @@
-<label for="file-upload-{{index}}" class="d-flex align-items-center m-0">
+<label for="file-upload-{{index}}" class="form-label d-flex align-items-center m-0">
     <span class="btn btn-primary">
         {{'process.new.parameter.file.upload-button' | translate}}
     </span>
-    <span class="file-name ml-1">{{fileObject?.name}}</span>
+    <span class="file-name ms-1">{{fileObject?.name}}</span>
 </label>
 <input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control-file d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
 <div *ngIf="file.invalid && (file.dirty || file.touched)"
diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.html b/src/app/process-page/form/process-parameters/process-parameters.component.html
index a937524e88a..5676da2a12b 100644
--- a/src/app/process-page/form/process-parameters/process-parameters.component.html
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.html
@@ -1,5 +1,5 @@
-<div class="form-group" *ngIf="script?.parameters?.length" data-testID="parameters-select-container">
-  <label>{{'process.new.select-parameters' | translate}}</label>
+<div class="mb-3" *ngIf="script?.parameters?.length" data-testID="parameters-select-container">
+  <label class="form-label">{{'process.new.select-parameters' | translate}}</label>
   <ds-parameter-select
     *ngFor="let value of parameterValues; let i = index; let last = last"
     [parameters]="script.parameters"
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html
index 9cd86d1a6d0..28a10fb16d0 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.html
@@ -1,7 +1,7 @@
-<div class="form-group" *ngIf="scripts$ | async">
-    <label for="process-script">{{'process.new.select-script' | translate}}</label>
+<div class="mb-3" *ngIf="scripts$ | async">
+    <label for="process-script" class="form-label">{{'process.new.select-script' | translate}}</label>
     <select required id="process-script"
-            class="form-control"
+            class="form-select"
             name="script"
             [(ngModel)]="selectedScript"
             #script="ngModel">
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index cc4b39572b4..76aa1fd8cfb 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -30,16 +30,16 @@ <h1 class="flex-grow-1">{{'process.overview.title' | translate}}</h1>
 
 <ng-template #buttons>
     <div class="d-flex justify-content-end mb-2">
-        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-primary mr-2"
+        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-primary me-2"
                 (click)="processBulkDeleteService.clearAllProcesses()"><i
-            class="fas fa-undo pr-2"></i>{{'process.overview.delete.clear' | translate }}
+                class="fas fa-undo pe-2"></i>{{'process.overview.delete.clear' | translate }}
         </button>
-        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-danger mr-2"
+        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-danger me-2"
                 (click)="openDeleteModal(deleteModal)"><i
-            class="fas fa-trash pr-2"></i>{{'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}
+                class="fas fa-trash pe-2"></i>{{'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}
         </button>
         <button class="btn btn-success" routerLink="/processes/new"><i
-            class="fas fa-plus pr-2"></i>{{'process.overview.new' | translate}}</button>
+            class="fas fa-plus pe-2"></i>{{'process.overview.new' | translate}}</button>
     </div>
 </ng-template>
 
@@ -51,7 +51,7 @@ <h1 class="flex-grow-1">{{'process.overview.title' | translate}}</h1>
             <div>
                 <h4>{{'process.overview.delete.header' | translate }}</h4>
             </div>
-            <button type="button" class="close"
+            <button type="button" class="btn-close"
                     (click)="closeModal()" aria-label="Close">
                 <span aria-hidden="true">×</span>
             </button>
@@ -64,7 +64,7 @@ <h4>{{'process.overview.delete.header' | translate }}</h4>
                 <span> {{ 'process.overview.delete.processing' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</span>
             </div>
             <div class="mt-4">
-                <button class="btn btn-primary mr-2" [disabled]="processBulkDeleteService.isProcessing$() |async"
+                <button class="btn btn-primary me-2" [disabled]="processBulkDeleteService.isProcessing$() |async"
                         (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
                 <button id="delete-confirm" class="btn btn-danger"
                         [disabled]="processBulkDeleteService.isProcessing$() |async"
diff --git a/src/app/process-page/overview/table/process-overview-table.component.html b/src/app/process-page/overview/table/process-overview-table.component.html
index 0d699d9f38b..69b3deea6f3 100644
--- a/src/app/process-page/overview/table/process-overview-table.component.html
+++ b/src/app/process-page/overview/table/process-overview-table.component.html
@@ -2,11 +2,11 @@
   <div class="d-flex" (click)="collapse.toggle()" [attr.aria-expanded]="!collapse.collapsed" role="button">
     <h2 class="flex-grow-1">
       {{'process.overview.table.' + processStatus.toLowerCase() + '.title' | translate}}
-      <span class="badge badge-pill badge-primary badge-nb-processes"
+      <span class="badge rounded-pill bg-primary badge-nb-processes ps-2 pe-2"
             *ngIf="(processesRD$ | async) as processesRD">
         {{processesRD?.payload?.totalElements}}
       </span>
-      <span class="ml-2 toggle-icon">
+      <span class="ms-2 toggle-icon">
         <i class="fas" [ngClass]="collapse.collapsed ? 'fa-angle-right' : 'fa-angle-down'"></i>
       </span>
     </h2>
diff --git a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html
index a5bbb38d025..47c3c3dd53d 100644
--- a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html
+++ b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header"><h4>{{'dso-selector.claim.item.head' | translate}}</h4>
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
@@ -25,11 +24,11 @@
     </div>
   </div>
   <div class="modal-footer">
-    <div class="mr-5">
+    <div class="me-5">
       <input type="checkbox" [checked]="checked" (change)="toggleCheckbox()"/>
       {{ 'dso-selector.claim.item.not-mine-label' | translate }}
     </div>
-    <button type="submit" class="btn btn-primary ml-5 mr-2" (click)="createFromScratch()" [disabled]="!checked">
+    <button type="submit" class="btn btn-primary ms-5 me-2" (click)="createFromScratch()" [disabled]="!checked">
       <i class="fas fa-plus"></i>
       {{ 'dso-selector.claim.item.create-from-scratch' | translate }}
     </button>
diff --git a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
index 8d48da08d98..0bae402bf5e 100644
--- a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
+++ b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
@@ -2,7 +2,7 @@
   <div *ngIf="researcherProfile">
     <p>{{'researcher.profile.associated' | translate}}</p>
     <p class="align-items-center researcher-profile-switch" >
-      <span class="mr-3">{{'researcher.profile.status' | translate}}</span>
+      <span class="me-3">{{'researcher.profile.status' | translate}}</span>
       <ui-switch [checkedLabel]="'researcher.profile.public.visibility' | translate"
                  [uncheckedLabel]="'researcher.profile.private.visibility' | translate"
                  [checked]="researcherProfile.visible"
@@ -12,7 +12,7 @@
   <div *ngIf="!researcherProfile">
     <p>{{'researcher.profile.not.associated' | translate}}</p>
   </div>
-  <button *ngIf="!researcherProfile" class="btn btn-primary mr-2"
+  <button *ngIf="!researcherProfile" class="btn btn-primary me-2"
           [disabled]="(isProcessingCreate() | async)"
           (click)="createProfile()">
     <span *ngIf="(isProcessingCreate() | async)">
@@ -23,7 +23,7 @@
     </span>
   </button>
   <ng-container *ngIf="researcherProfile">
-    <button class="btn btn-primary mr-2" [disabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
+    <button class="btn btn-primary me-2" [disabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
       <i class="fas fa-info-circle"></i> {{'researcher.profile.view' | translate}}
     </button>
     <button class="btn btn-danger" [disabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index 3dc7c9d4891..8b3509d8beb 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -29,7 +29,7 @@ <h1>{{'profile.title' | translate}}</h1>
         ></ds-profile-page-security-form>
       </div>
     </div>
-    <div class="col-12 text-right pr-0">
+    <div class="col-12 text-end pe-0">
       <button class="btn btn-primary" (click)="updateProfile()"><i class="fas fa-edit"></i> {{'profile.form.submit' | translate}}</button>
     </div>
 
diff --git a/src/app/register-email-form/register-email-form.component.html b/src/app/register-email-form/register-email-form.component.html
index d90638bb119..00b577ff752 100644
--- a/src/app/register-email-form/register-email-form.component.html
+++ b/src/app/register-email-form/register-email-form.component.html
@@ -8,10 +8,10 @@ <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
 
     <form [class]="'ng-invalid'" [formGroup]="form">
 
-        <div class="form-group">
+        <div class="mb-3">
             <div class="row">
                 <div class="col-12">
-                    <label class="font-weight-bold"
+                    <label class="fw-bold form-label"
                            for="email">{{MESSAGE_PREFIX + '.email' | translate}}</label>
                     <input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
                            type="text" id="email" formControlName="email"
diff --git a/src/app/register-page/create-profile/create-profile.component.html b/src/app/register-page/create-profile/create-profile.component.html
index dd9528925a7..aba2fc3a749 100644
--- a/src/app/register-page/create-profile/create-profile.component.html
+++ b/src/app/register-page/create-profile/create-profile.component.html
@@ -5,16 +5,16 @@ <h3 class="mb-4">{{'register-page.create-profile.header' | translate}}</h3>
         <div class="card-body">
             <div class="row">
                 <div class="col-12">
-                    <label class="font-weight-bold mr-4"
+                    <label class="fw-bold form-label me-4"
                            for="email">{{'register-page.create-profile.identification.email' | translate}}</label>
                     <span id="email">{{(registration$ |async).email}}</span></div>
             </div>
             <form [class]="'ng-invalid'" [formGroup]="userInfoForm" (ngSubmit)="submitEperson()">
 
-                <div class="form-group">
+                <div class="mb-3">
                     <div class="row">
                         <div class="col-12">
-                            <label for="firstName">{{'register-page.create-profile.identification.first-name' | translate}}</label>
+                            <label for="firstName" class="form-label">{{'register-page.create-profile.identification.first-name' | translate}}</label>
                             <input [className]="(firstName.invalid) && (firstName.dirty || firstName.touched) ? 'form-control is-invalid' :'form-control'"
                                    type="text" id="firstName" formControlName="firstName"/>
                             <div *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"
@@ -29,7 +29,7 @@ <h3 class="mb-4">{{'register-page.create-profile.header' | translate}}</h3>
                     <div class="row">
                         <div class="col-12">
                             <label
-                                    for="lastName">{{'register-page.create-profile.identification.last-name' | translate}}</label>
+                                    for="lastName" class="form-label">{{'register-page.create-profile.identification.last-name' | translate}}</label>
                             <input
                                     [className]="(lastName.invalid) && (lastName.dirty || lastName.touched) ? 'form-control is-invalid' :'form-control'"
                                     id="lastName" formControlName="lastName">
@@ -43,17 +43,17 @@ <h3 class="mb-4">{{'register-page.create-profile.header' | translate}}</h3>
                     </div>
                     <div class="row">
                         <div class="col-12">
-                            <label
+                            <label class="form-label"
                                     for="contactPhone">{{'register-page.create-profile.identification.contact' | translate}}</label>
                             <input class="form-control" id="contactPhone" formControlName="contactPhone">
                         </div>
                     </div>
                     <div class="row">
                         <div class="col-12">
-                            <label
+                            <label class="form-label"
                                     for="language">{{'register-page.create-profile.identification.language' |translate}}</label>
 
-                            <select id="language" formControlName="language" class="form-control">
+                            <select id="language" formControlName="language" class="form-select">
                                 <option [value]="''"></option>
                                 <option *ngFor="let lang of activeLangs" [value]="lang.code">{{lang.label}}</option>
                             </select>
diff --git a/src/app/request-copy/email-request-copy/email-request-copy.component.html b/src/app/request-copy/email-request-copy/email-request-copy.component.html
index 286e87554b8..0698592e3ea 100644
--- a/src/app/request-copy/email-request-copy/email-request-copy.component.html
+++ b/src/app/request-copy/email-request-copy/email-request-copy.component.html
@@ -1,13 +1,13 @@
 <form>
-  <div class="form-group">
-    <label for="subject">{{ 'grant-deny-request-copy.email.subject' | translate }}</label>
+  <div class="mb-3">
+    <label for="subject" class="form-label">{{ 'grant-deny-request-copy.email.subject' | translate }}</label>
     <input type="text" class="form-control" id="subject" [ngClass]="{'is-invalid': !subject || subject.length === 0}" [(ngModel)]="subject" name="subject">
     <div *ngIf="!subject || subject.length === 0" class="invalid-feedback">
       {{ 'grant-deny-request-copy.email.subject.empty' | translate }}
     </div>
   </div>
-  <div class="form-group">
-    <label for="message">{{ 'grant-deny-request-copy.email.message' | translate }}</label>
+  <div class="mb-3">
+    <label for="message" class="form-label">{{ 'grant-deny-request-copy.email.message' | translate }}</label>
     <textarea class="form-control" id="message" rows="8" [(ngModel)]="message" name="message"></textarea>
   </div>
   <ng-content></ng-content>
@@ -19,7 +19,7 @@
       <i class="fas fa-envelope"></i> {{'grant-deny-request-copy.email.send' | translate }}
     </button>
     <button (click)="return()"
-            class="btn btn-outline-secondary mr-1"
+            class="btn btn-outline-secondary me-1"
             title="{{'grant-deny-request-copy.email.back' | translate }}">
       <i class="fas fa-arrow-left"></i> {{'grant-deny-request-copy.email.back' | translate }}
     </button>
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index e9b5f285fbc..a13abcdf532 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -3,7 +3,7 @@
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="bg-transparent position-absolute form-control dropdown-menu-right pl-1 pr-4"
+             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p1"
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -1"
              [attr.data-test]="'header-search-box' | dsBrowserOnly">
diff --git a/src/app/search-navbar/search-navbar.component.scss b/src/app/search-navbar/search-navbar.component.scss
index a276482b535..965cebfb3c9 100644
--- a/src/app/search-navbar/search-navbar.component.scss
+++ b/src/app/search-navbar/search-navbar.component.scss
@@ -1,7 +1,8 @@
 input[type="text"] {
-  margin-top: calc(-0.5 * var(--bs-font-size-base));
+  margin-top: calc(-0.3 * var(--bs-font-size-base));
   background-color: #fff !important;
   border-color: var(--ds-header-icon-color);
+  right: 0;
 
   &.collapsed {
     opacity: 0;
diff --git a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
index 2ec3b512197..59ef8faf811 100644
--- a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
+++ b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
@@ -8,7 +8,7 @@
 
       <div class="d-flex flex-column">
         <div>
-          <label for="accesscontroloption-{{control.id}}">
+          <label class="form-label" for="accesscontroloption-{{control.id}}">
             {{'access-control-option-label' | translate}}
           </label>
           <select
@@ -17,7 +17,7 @@
             [(ngModel)]="control.itemName"
             (ngModelChange)="accessControlChanged(control, $event)"
             name="itemName-{{control.id}}"
-            class="form-control">
+            class="form-select">
             <option value=""></option>
             <option *ngFor="let option of dropdownOptions" [value]="option.name">
               {{ option.name }}
@@ -29,7 +29,7 @@
         </div>
 
         <div *ngIf="control.hasStartDate" class="mt-3">
-          <label for="accesscontrolstartdate-{{control.id}}">
+          <label class="form-label" for="accesscontrolstartdate-{{control.id}}">
             {{'access-control-option-start-date' | translate}}
           </label>
           <div class="input-group">
@@ -58,7 +58,7 @@
         </div>
 
         <div *ngIf="control.hasEndDate" class="mt-3">
-          <label for="accesscontrolenddate-{{control.id}}">
+          <label class="form-label" for="accesscontrolenddate-{{control.id}}">
             {{'access-control-option-end-date' | translate}}
           </label>
           <div class="input-group">
diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.html b/src/app/shared/access-control-form-container/access-control-form-container.component.html
index ce0f5845c6c..acd51bbc9e2 100644
--- a/src/app/shared/access-control-form-container/access-control-form-container.component.html
+++ b/src/app/shared/access-control-form-container/access-control-form-container.component.html
@@ -8,12 +8,12 @@
         class="d-block pb-3">
       </ds-alert>
 
-      <div class="row">
-        <div class="col-12 col-md-6 border-right d-flex flex-column justify-content-between">
+      <div class="row mt-5">
+        <div class="col-12 col-md-6 border-end d-flex flex-column justify-content-between">
 
           <div>
             <div class="d-flex align-items-center">
-              <h2 class="h3 mb-0 mr-4">
+              <h2 class="h3 mb-0 me-4">
                 {{ 'access-control-item-header-toggle' | translate }}
               </h2>
               <ui-switch
@@ -60,14 +60,12 @@ <h3 class="h4 mt-3">{{'access-control-access-conditions' | translate}}</h3>
               [dropdownOptions]="(dropdownData$ | async)?.itemAccessConditionOptions || []">
             </ds-access-control-array-form>
           </div>
-
         </div>
 
         <div class="col-12 col-md-6 d-flex flex-column justify-content-between">
-
           <div>
             <div class="d-flex align-items-center">
-              <h2 class="h3 mb-0 mr-4">
+              <h2 class="h3 mb-0 me-4">
                 {{'access-control-bitstream-header-toggle' | translate}}
               </h2>
               <ui-switch
@@ -157,7 +155,7 @@ <h3 class="h4 mt-3">{{'access-control-access-conditions' | translate}}</h3>
       <hr *ngIf="showSubmit">
 
       <div *ngIf="showSubmit" class="d-flex justify-content-end">
-        <button class="btn btn-outline-primary mr-3" (click)="reset()" type="button">
+        <button class="btn btn-outline-primary me-3" (click)="reset()" type="button">
           {{ 'access-control-cancel' | translate }}
         </button>
         <button class="btn btn-primary"
diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.scss b/src/app/shared/access-control-form-container/access-control-form-container.component.scss
index e69de29bb2d..ee06dd3e3f3 100644
--- a/src/app/shared/access-control-form-container/access-control-form-container.component.scss
+++ b/src/app/shared/access-control-form-container/access-control-form-container.component.scss
@@ -0,0 +1,5 @@
+
+
+fieldset > legend.col-12.col-md-3 {
+  width: 100%;
+}
diff --git a/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html b/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html
index 8cf0ecea382..4aed6fe128b 100644
--- a/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html
+++ b/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html
@@ -2,9 +2,8 @@
   <h4 class="modal-title">
     {{'access-control-select-bitstreams-modal.title' | translate}}
   </h4>
-  <button type="button" class="close" aria-label="Close"
+  <button type="button" class="btn-close" aria-label="Close"
           (click)="activeModal.dismiss('Cross click')">
-    <span aria-hidden="true">&times;</span>
   </button>
 </div>
 <div class="modal-body">
diff --git a/src/app/shared/alert/alert.component.html b/src/app/shared/alert/alert.component.html
index 3bc4782a779..560dfa07943 100644
--- a/src/app/shared/alert/alert.component.html
+++ b/src/app/shared/alert/alert.component.html
@@ -3,7 +3,6 @@
 
   <ng-content></ng-content>
 
-  <button *ngIf="dismissible" type="button" class="close" data-dismiss="alert" aria-label="Close" (click)="dismiss()">
-    <span aria-hidden="true">&times;</span>
+  <button *ngIf="dismissible" type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="dismiss()">
   </button>
 </div>
diff --git a/src/app/shared/alert/alert.component.scss b/src/app/shared/alert/alert.component.scss
index 907edae24bf..aa843c8e0c4 100644
--- a/src/app/shared/alert/alert.component.scss
+++ b/src/app/shared/alert/alert.component.scss
@@ -1,4 +1,4 @@
-.close {
+.btn-close {
   opacity: 0.75;
   &:focus {
     outline: none !important;
diff --git a/src/app/shared/alert/alert.component.spec.ts b/src/app/shared/alert/alert.component.spec.ts
index 264f1101379..244fe3ad996 100644
--- a/src/app/shared/alert/alert.component.spec.ts
+++ b/src/app/shared/alert/alert.component.spec.ts
@@ -91,7 +91,7 @@ describe('AlertComponent test suite', () => {
 
     it('should dismiss alert when click on close icon', () => {
       spyOn(comp, 'dismiss');
-      const btn = fixture.debugElement.query(By.css('.close'));
+      const btn = fixture.debugElement.query(By.css('.btn-close'));
 
       btn.nativeElement.click();
 
diff --git a/src/app/shared/animations/slide.ts b/src/app/shared/animations/slide.ts
index 92e5084d812..59fc6821451 100644
--- a/src/app/shared/animations/slide.ts
+++ b/src/app/shared/animations/slide.ts
@@ -22,7 +22,6 @@ export const slideMobileNav = trigger('slideMobileNav', [
   state('expanded', style({ height: '*', minHeight: '*' })),
 
   state('collapsed', style({ height: 0, minHeight: 0 })),
-
   transition('expanded <=> collapsed', animate('300ms')),
 ]);
 
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 74ae8216349..7dac4d05324 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -1,4 +1,4 @@
-<div class="navbar-nav mr-auto" *ngIf="(isMobile$ | async) !== true; else mobileButtons" data-test="auth-nav">
+<div class="navbar-nav me-auto" *ngIf="(isMobile$ | async) !== true; else mobileButtons" data-test="auth-nav">
   <div *ngIf="(isAuthenticated | async) !== true && (showAuth | async)"
       class="nav-item"
       (click)="$event.stopPropagation();">
@@ -10,7 +10,7 @@
          aria-controls="loginDropdownMenu"
          [attr.aria-expanded]="loginDrop.isOpen()"
          ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
-      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+      <div id="loginDropdownMenu" [ngClass]="{'ps-3 pe-3': (loading | async)}" ngbDropdownMenu
            role="menu"
            [attr.aria-label]="'nav.login' | translate">
         <ds-log-in
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html
index 64aa6f2f6bc..751f91fb7b7 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.html
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="searchField" class="form-group w-100 pr-2 pl-2 my-2">
+<div *ngIf="searchField" class="mb-3 w-100 pe-2 ps-2 my-2">
   <input type="search"
          class="form-control w-100"
          (click)="$event.stopPropagation();"
@@ -31,7 +31,7 @@
         <div class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
           {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
         </div>
-        <div class="list-item text-truncate text-primary font-weight-bold">{{ listItem.collection.name}}</div>
+        <div class="list-item text-truncate text-primary fw-bold">{{ listItem.collection.name}}</div>
       </div>
     </li>
   </ng-container>
diff --git a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
index 1d752869e5e..d99e740b073 100644
--- a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
@@ -1,7 +1,7 @@
 <div class="container-fluid">
   <div class="row">
-    <div class="col-12 d-inline-block mb-1">
-      <span>{{type.value + '.edit.logo.label' | translate}}</span>
+    <div class="col-12 d-inline-block">
+      <label class="form-label">{{type.value + '.edit.logo.label' | translate}}</label>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
       <div class="col-12 d-inline-block alert" id="logo-section" *ngIf="logo">
@@ -10,7 +10,7 @@
             <ds-comcol-page-logo [alternateText]="type.value + '.logo.alt'" [logo]="logo"></ds-comcol-page-logo>
           </div>
           <div class="col-4 d-inline-block">
-            <div *ngIf="logo" class="float-right">
+            <div *ngIf="logo" class="float-end">
               <button
                 (click)="confirmLogoDeleteWithModal()"
                 class="btn btn-danger"
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
index 2639a4c099f..32985c5d3d3 100644
--- a/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
+++ b/src/app/shared/comcol/comcol-forms/edit-comcol-page/comcol-role/comcol-role.component.html
@@ -1,4 +1,4 @@
-<div class="card p-2 m-3 {{(comcolRole$ | async)?.name}}">
+<div class="card p-2 mb-3 mt-3 custom-alignment {{(comcolRole$ | async)?.name}}">
 
   <div class="card-body d-flex flex-column"
        *ngVar="group$ | async as group">
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
index 7797ba13c91..ac58bf79c7c 100644
--- a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
+++ b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
@@ -26,7 +26,7 @@ <h1>{{ type + '.edit.head' | translate }}</h1>
           <div class="mb-4">
             <router-outlet></router-outlet>
           </div>
-          <div class="col-12 text-right">
+          <div class="col-12 text-end custom-alignment">
             <a *ngIf="!hideReturnButton" [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">
               <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type + '.edit.return' | translate }}
             </a>
diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
index b0d72f4a721..0ad94480995 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -17,7 +17,7 @@ <h2 class="comcol-browse-label">{{'browse.comcol.head' | translate}}</h2>
 
   <div class="d-block d-sm-none">
     <select name="browse-type"
-            class="form-control"
+            class="form-select"
             aria-label="Browse Community or Collection"
             (change)="onSelectChange($event)">
       <option *ngFor="let option of allOptions"
diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.html b/src/app/shared/confirmation-modal/confirmation-modal.component.html
index ff82f5bc83d..d0ce0179659 100644
--- a/src/app/shared/confirmation-modal/confirmation-modal.component.html
+++ b/src/app/shared/confirmation-modal/confirmation-modal.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{ headerLabel | translate:{ dsoName: name } }}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.spec.ts b/src/app/shared/confirmation-modal/confirmation-modal.component.spec.ts
index af589716de3..e08bf8d54e9 100644
--- a/src/app/shared/confirmation-modal/confirmation-modal.component.spec.ts
+++ b/src/app/shared/confirmation-modal/confirmation-modal.component.spec.ts
@@ -82,7 +82,7 @@ describe('ConfirmationModalComponent', () => {
   describe('when the click method emits on close button', () => {
     beforeEach(fakeAsync(() => {
       spyOn(component, 'close');
-      debugElement.query(By.css('button.close')).triggerEventHandler('click', {
+      debugElement.query(By.css('button.btn-close')).triggerEventHandler('click', {
         preventDefault: () => {/**/
         },
       });
diff --git a/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html b/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html
index b1056cdf183..8f770b915ab 100644
--- a/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html
+++ b/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html
@@ -20,13 +20,13 @@
     </div>
   </div>
   <div class="modal-footer space-children-mr">
-    <button class="btn btn-outline-secondary btn-sm ml-0"
+    <button class="btn btn-outline-secondary btn-sm ms-0"
             type="button"
             (click)="onModalClose()"
             title="{{'item.qa.withdrawn-reinstate.create.modal.button.cancel.tooltip' | translate}}">
       <i class="fas fa-times fa-fw"></i> {{'item.qa.withdrawn-reinstate.create.modal.button.cancel' | translate}}
     </button>
-    <button class="btn btn-success btn-sm ml-0"
+    <button class="btn btn-success btn-sm ms-0"
             type="submit"
             (click)="onModalSubmit()"
             title="{{'item.qa.withdrawn-reinstate.modal.button.confirm.tooltip' | translate}}">
diff --git a/src/app/shared/ds-select/ds-select.component.html b/src/app/shared/ds-select/ds-select.component.html
index c12ea613472..90182d9251b 100644
--- a/src/app/shared/ds-select/ds-select.component.html
+++ b/src/app/shared/ds-select/ds-select.component.html
@@ -2,11 +2,9 @@
 
   <div ngbDropdown class="btn-group" (openChange)="toggled.emit($event)">
 
-    <div class="input-group-prepend" *ngIf="label">
-      <span id="dsSelectMenuLabel" class="input-group-text">
-        {{ label | translate }}
-      </span>
-    </div>
+  <span  *ngIf="label" id="dsSelectMenuLabel" class="input-group-text">
+    {{ label | translate }}
+  </span>
 
     <button aria-describedby="dsSelectMenuLabel"
             id="dsSelectMenuButton"
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
index 6e427400eec..6b57e877e7d 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
@@ -6,7 +6,7 @@
         </button>
         <ul ngbDropdownMenu class="dso-edit-menu-dropdown">
             <li class="nav-item nav-link d-flex flex-row" *ngFor="let subSection of (subSections$ | async)">
-                <div *ngIf="renderIcons$ | async" class="mr-2">
+                <div *ngIf="renderIcons$ | async" class="me-2">
                     <i *ngIf="subSection.icon; else spacer" class="fas fa-{{subSection.icon}} fa-fw"></i>
                     <ng-template #spacer><i class="fas fa-fw"></i></ng-template>
                 </div>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html
index 000da1678e9..b5c51d48554 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html
@@ -1,5 +1,5 @@
 <div class="dso-edit-menu d-flex">
-    <div *ngFor="let section of (sections | async)" class="ml-1">
+    <div *ngFor="let section of (sections | async)" class="ms-1">
         <ng-container
                 *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
     </div>
diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
index 24f579cbba4..f13d7f70ca7 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
@@ -1,4 +1,4 @@
-<div class="form-group w-100 pr-2 pl-2">
+<div class="mb-3 w-100 pe-2 ps-2">
     <input type="search"
            class="form-control"
            (click)="$event.stopPropagation();"
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
index a8ec02239d3..2f04098e8bf 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
@@ -1,13 +1,12 @@
 <div>
     <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-        <button type="button" class="close" (click)="close()" aria-label="Close">
-            <span aria-hidden="true">×</span>
+        <button type="button" class="btn-close" (click)="close()" aria-label="Close">
         </button>
     </div>
     <div class="modal-body">
       <div data-test="admin-div" *ngIf="(isAdmin$ | async)">
-        <button class="btn btn-outline-primary btn-lg btn-block" (click)="selectObject(undefined)">{{'dso-selector.create.community.top-level' | translate}}</button>
-        <div class="h3 position-relative py-1 my-3 font-weight-normal">
+        <button class="btn btn-outline-primary btn-lg btn-block w-100" (click)="selectObject(undefined)">{{'dso-selector.create.community.top-level' | translate}}</button>
+        <div class="h3 position-relative py-1 my-3 fw-normal">
             <hr>
             <div id="create-community-or-separator" class="text-center position-absolute w-100">
                 <span class="px-4 bg-white">{{'dso-selector.create.community.or-divider' | translate}}</span>
@@ -18,3 +17,4 @@
         <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
     </div>
 </div>
+
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
index 5288f08e02b..70f4d0302ce 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
index 6d3d45cb3d8..dab24d8aa3a 100644
--- a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
index 80ec88f02f0..4bbdd11a04a 100644
--- a/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component.spec.ts
@@ -137,7 +137,7 @@ describe('DSOSelectorModalWrapperComponent', () => {
   describe('when the click method emits on close button', () => {
     beforeEach(() => {
       spyOn(component, 'close');
-      debugElement.query(By.css('button.close')).triggerEventHandler('click', {});
+      debugElement.query(By.css('button.btn-close')).triggerEventHandler('click', {});
       fixture.detectChanges();
     });
     it('should call the close method on the component', () => {
diff --git a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
index 999a96e7301..1fbdd9ca9af 100644
--- a/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.html b/src/app/shared/entity-dropdown/entity-dropdown.component.html
index 049f5c81bed..dd73e82584b 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.html
+++ b/src/app/shared/entity-dropdown/entity-dropdown.component.html
@@ -18,7 +18,9 @@
             role="menuitem"
             title="{{ listItem.label }}"
             (click)="onSelect(listItem)">
-      <span class="text-truncate font-weight-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</span>
+      <ul class="list-unstyled mb-0">
+        <li class="list-item text-truncate text-primary fw-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</li>
+      </ul>
     </button>
   </li>
   <li *ngIf="(isLoadingList | async)">
diff --git a/src/app/shared/eperson-group-list/eperson-search-box/eperson-search-box.component.html b/src/app/shared/eperson-group-list/eperson-search-box/eperson-search-box.component.html
index fb330a536a1..214f90cf279 100644
--- a/src/app/shared/eperson-group-list/eperson-search-box/eperson-search-box.component.html
+++ b/src/app/shared/eperson-group-list/eperson-search-box/eperson-search-box.component.html
@@ -2,20 +2,18 @@
       [formGroup]="searchForm"
       (ngSubmit)="submit(searchForm.value); $event.stopImmediatePropagation();" >
   <div>
-    <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
+    <select name="scope" id="scope" formControlName="scope" class="form-select" aria-label="Search scope">
       <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
       <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
     </select>
   </div>
-  <div class="flex-grow-1 mr-3 ml-3">
-    <div class="form-group input-group">
+  <div class="flex-grow-1 me-3 ms-3">
+    <div class="mb-3 input-group">
       <input type="text" name="query" id="query" formControlName="query"
              class="form-control" aria-label="Search input">
-      <span class="input-group-append">
-        <button type="submit" class="search-button btn btn-primary">
-          <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
-        </button>
-      </span>
+    <button type="submit" class="search-button btn btn-primary">
+      <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
+    </button>
     </div>
   </div>
   <div>
diff --git a/src/app/shared/eperson-group-list/group-search-box/group-search-box.component.html b/src/app/shared/eperson-group-list/group-search-box/group-search-box.component.html
index e5a3e1a8767..efb01625911 100644
--- a/src/app/shared/eperson-group-list/group-search-box/group-search-box.component.html
+++ b/src/app/shared/eperson-group-list/group-search-box/group-search-box.component.html
@@ -1,15 +1,13 @@
 <form class="d-flex justify-content-between"
       [formGroup]="searchForm"
       (ngSubmit)="submit(searchForm.value); $event.stopImmediatePropagation();" >
-  <div class="flex-grow-1 mr-3">
-    <div class="form-group input-group">
+  <div class="flex-grow-1 me-3">
+    <div class="mb-3 input-group">
       <input type="text" name="query" id="query" formControlName="query"
              class="form-control" aria-label="Search input">
-      <span class="input-group-append">
         <button type="submit" class="search-button btn btn-primary">
           <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
         </button>
-      </span>
     </div>
   </div>
   <div>
diff --git a/src/app/shared/file-download-link/file-download-link.component.html b/src/app/shared/file-download-link/file-download-link.component.html
index d649c0ad4e2..0afa8666c43 100644
--- a/src/app/shared/file-download-link/file-download-link.component.html
+++ b/src/app/shared/file-download-link/file-download-link.component.html
@@ -1,5 +1,5 @@
 <a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
-  <span role="img" *ngIf="(canDownload$ |async) !== true" [attr.aria-label]="'file-download-link.restricted' | translate" class="pr-1"><i class="fas fa-lock"></i></span>
+  <span role="img" *ngIf="(canDownload$ |async) !== true" [attr.aria-label]="'file-download-link.restricted' | translate" class="pe-1"><i class="fas fa-lock"></i></span>
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
index 7224f1843dd..195c1b561eb 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -1,15 +1,16 @@
-<div [class.form-group]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('form-group')"
+<div [class.mb-3]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('mb-3')"
      [class.d-none]="model.hidden"
      [formGroup]="group"
      [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
   <label *ngIf="!isCheckbox && hasLabel"
          [id]="'label_' + model.id"
          [for]="id"
+         class="form-label"
          [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
          [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
   <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: { $implicit: model };"></ng-container>
   <!--    Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
-  <div [ngClass]="{'form-row': model.hasLanguages || isRelationship,
+  <div [ngClass]="{'row': model.hasLanguages || isRelationship,
                       'd-none': this.metadataService.isVirtual(value) && (model.hasSelectableMetadata || context?.index > 0)}">
     <div [ngClass]="getClass('grid', 'control')">
       <div>
@@ -33,7 +34,7 @@
         #language="ngModel"
         [disabled]="model.readOnly"
         [(ngModel)]="model.language"
-        class="form-control"
+        class="form-select"
         (blur)="onBlur($event)"
         (change)="onChangeLanguage($event)"
         [ngModelOptions]="{standalone: true}"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
index 944e4650abd..4daf1762a74 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex">
-    <span class="mr-auto text-contents">
+    <span class="me-auto text-contents">
         <ng-container *ngIf="(metadataRepresentation$ | async) === undefined">
             <ds-loading [showMessage]="false"></ds-loading>
         </ng-container>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
index 08efff42197..e24144fbad4 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex">
-    <div class="flex-grow-1 mr-auto">
+    <div class="flex-grow-1 me-auto">
         <ng-container *ngIf="(relatedItem$ | async) === undefined">
             <ds-loading [showMessage]="false"></ds-loading>
         </ng-container>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
index dd19e6158df..1d3901851ea 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -8,6 +8,7 @@
       <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
         <!-- Draggable Items -->
         <div *ngFor="let groupModel of model.groups; let idx = index"
+             class="drag-item-container"
              role="group"
              [formGroupName]="idx"
              [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
index ce4a89226ad..727577ab172 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss
@@ -1,65 +1,78 @@
 @import './../../../../../../../styles/variables';
 
 :host {
-  display: block;
+    display: block;
 }
+
 .drag-disable {
-  visibility: hidden !important;
-  &:hover, &:focus {
-    cursor: default;
-    .drag-icon {
-      visibility: hidden !important;
+    visibility: hidden !important;
+
+    &:hover, &:focus {
+        cursor: default;
+
+        .drag-icon {
+            visibility: hidden !important;
+        }
     }
-  }
 }
+
 .cdk-drag {
-  margin-left: calc(-2.3 * var(--bs-spacer));
-  margin-right: calc(-0.5 * var(--bs-spacer));
-  padding-right: calc(0.5 * var(--bs-spacer));
-  .drag-icon {
-    visibility: hidden;
-    width: calc(2 * var(--bs-spacer));
-    color: var(--bs-gray-600);
-    margin: var(--bs-btn-padding-y) 0;
-    line-height: var(--bs-btn-line-height);
-    text-indent: calc(0.5 * var(--bs-spacer))
-  }
+    margin-left: calc(-2.3 * var(--bs-spacer));
+    margin-right: calc(-0.5 * var(--bs-spacer));
+    padding-right: calc(0.5 * var(--bs-spacer));
+    > .col {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    .cdk-drag-handle {
+        width: calc(2 * var(--bs-spacer));
+    }
 
-  &:hover, &:focus {
-    cursor: grab;
     .drag-icon {
-      visibility: visible;
+        visibility: hidden;
+        color: var(--bs-gray-600);
+        margin: var(--bs-btn-padding-y) 0;
+        line-height: var(--bs-btn-line-height);
+        text-indent: calc(0.5 * var(--bs-spacer))
+    }
+
+    &:hover, &:focus {
+        cursor: grab;
+
+        .drag-icon {
+            visibility: visible;
+        }
     }
-  }
 
 }
 
 .drag-handle {
-  &:hover {
-    cursor: move;
-  }
+    &:hover {
+        cursor: move;
+    }
 
-  &:focus {
-    .drag-icon {
-      visibility: visible;
+    &:focus {
+        .drag-icon {
+            visibility: visible;
+        }
     }
-  }
 }
 
 .cdk-drop-list-dragging {
-  .drag-handle {
-    cursor: grabbing;
-    .drag-icon {
-      visibility: hidden;
+    .drag-handle {
+        cursor: grabbing;
+
+        .drag-icon {
+            visibility: hidden;
+        }
     }
-  }
 }
 
 .cdk-drag-preview {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 .cdk-drag-placeholder {
-  opacity: 0;
+    opacity: 0;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
index 5beb8d52dab..90e8ff30603 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component.html
@@ -1,4 +1,4 @@
-<div [formGroup]="group" [ngClass]="getClass('element', 'container')" class="form-check custom-control custom-switch" [class.disabled]="model.disabled">
+<div [formGroup]="group" [ngClass]="getClass('element', 'container')" class="form-check custom-control form-switch" [class.disabled]="model.disabled">
   <input type="checkbox" class="form-check-input custom-control-input"
          [checked]="model.checked"
          [class.is-invalid]="showErrorMessages"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
index 656c350dbbe..f8fe296bc12 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
@@ -23,20 +23,18 @@
            (change)="onChange($event)"
            (focus)="onFocus($event)">
 
-    <div class="input-group-append">
 
-        <button class="btn btn-outline-secondary"
-                type="button"
-                [attr.aria-labelledby]="'label_' + model.id"
-                [class.disabled]="model.disabled"
-                [disabled]="model.disabled"
-                (click)="datepicker.toggle()">
+    <button class="btn btn-outline-secondary"
+            type="button"
+            [attr.aria-labelledby]="'label_' + model.id"
+            [class.disabled]="model.disabled"
+            [disabled]="model.disabled"
+            (click)="datepicker.toggle()">
 
-            <i *ngIf="model.toggleIcon" class="{{model.toggleIcon}}" aria-hidden="true"></i>
-            <span *ngIf="model.toggleLabel">{{ model.toggleLabel }}</span>
+        <i *ngIf="model.toggleIcon" class="{{model.toggleIcon}}" aria-hidden="true"></i>
+        <span *ngIf="model.toggleLabel">{{ model.toggleLabel }}</span>
 
-        </button>
+    </button>
 
-    </div>
 
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
index 97698b2102e..e8a63ce135a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.scss
@@ -4,4 +4,7 @@
 
 legend {
   font-size: initial;
+
+  /* Changed from Bootstrap 5's legend to ensure that the date issues label is on a different line as it's input */
+  float: none;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.html
index 5b58352214a..5ba40f64ec9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.html
@@ -1,5 +1,5 @@
 <div>
-    <div class="form-row align-items-center">
+    <div class="row align-items-center">
         <div class="col">
           <input class="form-control"
                  [class.is-invalid]="showErrorMessages"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index 728c59aa460..a686c1a379a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -1,12 +1,12 @@
 <div [formGroup]="group">
   <div *ngIf="model.repeatable"
-       class="form-row"
+       class="row"
        [attr.tabindex]="model.tabIndex"
        [id]="id"
        [formGroupName]="model.id"
        [ngClass]="model.layout.element?.control">
 
-    <div *ngFor="let columnItems of items" class="col-sm ml-3">
+    <div *ngFor="let columnItems of items" class="col-sm ms-3">
 
       <div  *ngFor="let item of columnItems" class="custom-control custom-checkbox">
 
@@ -34,14 +34,14 @@
   </div>
 
   <div *ngIf="!model.repeatable"
-       class="form-row"
+       class="row"
        ngbRadioGroup
        [attr.tabindex]="model.tabIndex"
        [id]="id"
        [ngClass]="model.layout.element?.control"
        (change)="onChange($event)">
 
-    <div *ngFor="let columnItems of items" class="col-sm ml-3">
+    <div *ngFor="let columnItems of items" class="col-sm ms-3">
 
       <div  *ngFor="let item of columnItems" class="custom-control custom-radio">
         <input type="radio" class="custom-control-input"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index 89e7af9aa67..0f1d5ee2854 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -2,11 +2,11 @@
      (click)="$event.stopPropagation();"
      (openChange)="openChange($event);">
 
-  <div class="form-row align-items-center">
+  <div class="row align-items-center">
     <!--Simple lookup, first field -->
     <div class="col right-addon">
       <i dsAuthorityConfidenceState
-         class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0 pr-2"
+         class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0 pe-2"
          aria-hidden="true"
          [authorityValue]="model.value"
          (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted(sdRef, $event)"></i>
@@ -114,7 +114,7 @@
 
 <ng-template #hasInfo let-entry="entry">
   <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + model.id">
-    <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
+    <li class="list-item text-truncate text-primary fw-bold">{{entry.value}}</li>
     <li class="list-item text-truncate text-secondary" *ngFor="let item of entry.otherInformation | dsObjNgFor" >
       {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
     </li>
@@ -123,6 +123,6 @@
 
 <ng-template #noInfo let-entry="entry">
   <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + model.id">
-    <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
+    <li class="list-item text-truncate text-primary fw-bold">{{entry.value}}</li>
   </ul>
 </ng-template>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
index dee03647de4..10907e4cca7 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -25,3 +25,12 @@ div {
 .lookup-item {
   border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
 }
+
+div.col {
+  position: relative;
+}
+
+.row > div {
+  padding-right: 5px;
+  padding-left: 5px;
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
index 5463b068276..81b28ea5dda 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
@@ -7,7 +7,7 @@
 
 <ng-template #hasInfo let-entry="entry">
   <ul class="list-unstyled mb-0">
-    <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
+    <li class="list-item text-truncate text-primary fw-bold">{{entry.value}}</li>
     <li class="list-item text-truncate text-secondary" *ngFor="let item of entry.otherInformation | dsObjNgFor" >
       {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
     </li>
@@ -16,7 +16,7 @@
 
 <ng-template #noInfo let-entry="entry">
   <ul class="list-unstyled mb-0">
-    <li class="list-item text-truncate text-primary font-weight-bold">{{entry.value}}</li>
+    <li class="list-item text-truncate text-primary fw-bold">{{entry.value}}</li>
   </ul>
 </ng-template>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
index 38f15a5ed1c..2d0ab33a6cf 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
@@ -16,9 +16,9 @@
 </a>
 
 <div class="pt-2" [ngClass]="{'border-top': !showErrorMessages, 'border border-danger': showErrorMessages}">
-  <div *ngIf="(formCollapsed | async) !== true" class="pl-2 row"  @shrinkInOut>
+  <div *ngIf="(formCollapsed | async) !== true" class="ps-2 row"  @shrinkInOut>
     <ds-form #formRef="formComponent"
-             class="col-sm-12 col-md-8 col-lg-9 col-xl-10 pl-0"
+             class="col-sm-12 col-md-8 col-lg-9 col-xl-10 ps-0"
              [formId]="formId"
              [formModel]="formModel"
              [displaySubmit]="false"
@@ -34,14 +34,14 @@
                 class="btn btn-link"
                 [disabled]="isMandatoryFieldEmpty()"
                 (click)="save()">
-          <i class="fas fa-save text-primary fa-2x"
+          <i class="fas fa-save link-primary fa-2x"
              aria-hidden="true"></i>
         </button>
         <button type="button"
                 class="btn btn-link"
                 [disabled]="!editMode"
                 (click)="delete()">
-          <i class="fas fa-trash text-danger fa-2x"
+          <i class="fas fa-trash link-danger fa-2x"
              aria-hidden="true"></i>
         </button>
         <button type="button"
@@ -60,7 +60,7 @@
     <ds-loading *ngIf="!chips" [showMessage]="false"></ds-loading>
     <div *ngIf="chips && !chips.hasItems()">
       <input type="text"
-             class="border-0 form-control-plaintext tag-input mt-1 mb-1 pl-2 text-muted"
+             class="border-0 form-control-plaintext tag-input mt-1 mb-1 ps-2 text-muted"
              readonly
              tabindex="-1"
              value="{{'form.no-value' | translate}}">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index 0cbd5185957..7a45c190075 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -12,7 +12,7 @@
          class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
          type="text"
          role="textbox"
-         [class.pl-3]="chips.hasItems()"
+         [class.ps-3]="chips.hasItems()"
          [placeholder]="model.placeholder"
          [readonly]="model.readOnly"
          [(ngModel)]="currentValue"
@@ -29,7 +29,7 @@
            [(ngModel)]="currentValue"
            [attr.autoComplete]="model.autoComplete"
            [class.is-invalid]="showErrorMessages"
-           [class.pl-3]="chips.hasItems()"
+           [class.ps-3]="chips.hasItems()"
            [id]="id"
            [inputFormatter]="formatter"
            [name]="model.name"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
index cef8516b847..ebba1e01516 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -1,8 +1,7 @@
 <div class="modal-header">
     <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relationship-lookup.title.' + relationshipOptions.relationshipType) | translate }}</h4>
-    <button type="button" [disabled]="isPending" class="close" aria-label="Close button" aria-describedby="modal-title"
+    <button type="button" [disabled]="isPending" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
             (click)="close()">
-        <span aria-hidden="true">&times;</span>
     </button>
 </div>
 <div class="modal-body">
@@ -71,7 +70,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
 </div>
 <div class="modal-footer">
   <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
-  <div class="d-flex float-right space-children-mr">
+  <div class="d-flex float-end space-children-mr">
     <div class="close-button">
         <button type="button" [disabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
             {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
@@ -86,7 +85,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
       <button class="btn btn-primary submit"
             [disabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
               (click)="submitEv()">
-              <span *ngIf="isPending" class="spinner-border spinner-border-sm mr-1" role="status"
+              <span *ngIf="isPending" class="spinner-border spinner-border-sm me-1" role="status"
                               aria-hidden="true"></span>
               <i *ngIf="!isPending" class="fas fa-save"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
index 4f7c7be5c26..d0cdb900045 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.spec.ts
@@ -266,7 +266,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
       expect(debugElement.queryAll(By.css('.spinner-border')).length).toEqual(1);
       expect(debugElement.query(By.css('.submit')).nativeElement?.disabled).toBeTrue();
       expect(debugElement.query(By.css('.discard')).nativeElement?.disabled).toBeTrue();
-      expect(debugElement.query(By.css('.close')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.btn-close')).nativeElement?.disabled).toBeTrue();
     });
 
   });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html
index 44f21fb4b44..24f56238ea9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html
@@ -1,8 +1,7 @@
 <div class="modal-header">
   <h4 class="modal-title" id="modal-title">{{ (labelPrefix + label + '.title') | translate }}</h4>
-  <button type="button" class="close" aria-label="Close button" aria-describedby="modal-title"
+  <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
           (click)="modal.dismiss()">
-    <span aria-hidden="true">&times;</span>
   </button>
 </div>
 <div class="modal-body">
@@ -15,7 +14,7 @@ <h4>{{ (labelPrefix + 'head.' + externalSourceEntry.externalSource | translate)
   <h4>{{ (labelPrefix + 'select' | translate) }}</h4>
 
   <div id="external-source-entry-entities" class="mb-3">
-    <h5 class="font-weight-bold">{{ (labelPrefix + 'entities' | translate) }}</h5>
+    <h5 class="fw-bold">{{ (labelPrefix + 'entities' | translate) }}</h5>
 
     <ds-search-results *ngIf="(localEntitiesRD$ | async)?.payload?.page?.length > 0"
                        [searchResults]="(localEntitiesRD$ | async)"
@@ -30,15 +29,15 @@ <h5 class="font-weight-bold">{{ (labelPrefix + 'entities' | translate) }}</h5>
                        (deselectObject)="deselectEntity()"
                        (selectObject)="selectEntity($event)">
     </ds-search-results>
-    <div class="ml-4">
+    <div class="ms-4 form-check">
       <input class="form-check-input" type="radio" name="new-entity" id="new-entity" value="new-entity" (click)="selectNewEntity()" [checked]="selectedImportType === importType.NewEntity" />
       <label class="form-check-label" for="new-entity">{{ (labelPrefix + 'entities.new' | translate) }}</label>
     </div>
   </div>
   <div id="external-source-entry-authority" *ngIf="authorityEnabled">
-    <h5 class="font-weight-bold">{{ (labelPrefix + 'authority' | translate) }}</h5>
+    <h5 class="fw-bold">{{ (labelPrefix + 'authority' | translate) }}</h5>
 
-    <div class="ml-4">
+    <div class="ms-4 form-check">
       <input class="form-check-input" type="radio" name="new-authority" id="new-authority" value="new-authority" (click)="selectNewAuthority()" [checked]="selectedImportType === importType.NewAuthority" />
       <label class="form-check-label" for="new-authority">{{ (labelPrefix + 'authority.new' | translate) }}</label>
     </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
index 02dec72baa4..0f83692e01e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
@@ -15,10 +15,27 @@
            (deselectObject)="deselectObject.emit($event)"
            (selectObject)="selectObject.emit($event)">
   <div additionalSearchOptions *ngIf="repeatable" class="position-absolute">
-    <div class="input-group mb-3">
-      <div ngbDropdown class="input-group dropdown-button">
+    <div ngbDropdown class="input-group mb-3">
+        <div class="input-group-text">
+          <!-- In theory we don't need separate checkboxes for this,
+               but I wasn't able to get this to work correctly without them.
+               Checkboxes that are in the indeterminate state always switch to checked when clicked
+               This seemed like the cleanest and clearest solution to solve this issue for now. -->
+
+          <input *ngIf="!allSelected && (someSelected$ | async) === false"
+                 type="checkbox"
+                 [indeterminate]="false"
+                 (change)="selectAll()">
+          <input *ngIf="!allSelected && (someSelected$ | async)"
+                 type="checkbox"
+                 [indeterminate]="true"
+                 (change)="deselectAll()">
+          <input *ngIf="allSelected" type="checkbox"
+                 [checked]="true"
+                 (change)="deselectAll()">
+        </div>
         <button *ngIf="selectAllLoading" type="button"
-                class="btn btn-outline-secondary rounded-right">
+                class="btn btn-outline-secondary rounded-end">
                             <span class="spinner-border spinner-border-sm" role="status"
                                   aria-hidden="true"></span>
           <span class="sr-only">{{ ('submission.sections.describe.relationship-lookup.search-tab.loading' | translate) }}</span>
@@ -39,6 +56,4 @@
         </div>
       </div>
     </div>
-  </div>
-
 </ds-search>
diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts
index 40711c188d1..751128446bd 100644
--- a/src/app/shared/form/builder/parsers/concat-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts
@@ -113,7 +113,7 @@ export class ConcatFieldParser extends FieldParser {
 
     const clsGroup = {
       element: {
-        control: 'form-row',
+        control: 'row',
       },
     };
     const concatModel = new DynamicConcatModel(concatGroup, clsGroup);
diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts
index 590d5f564e9..c634c7d8766 100644
--- a/src/app/shared/form/builder/parsers/field-parser.ts
+++ b/src/app/shared/form/builder/parsers/field-parser.ts
@@ -127,7 +127,7 @@ export abstract class FieldParser {
 
       const layout: DynamicFormControlLayout = {
         grid: {
-          group: 'form-row',
+          group: 'row',
         },
       };
 
diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
index 9c5ef7423e5..50fc585abf9 100644
--- a/src/app/shared/form/builder/parsers/onebox-field-parser.ts
+++ b/src/app/shared/form/builder/parsers/onebox-field-parser.ts
@@ -29,7 +29,7 @@ export class OneboxFieldParser extends FieldParser {
       // Case Qualdrop Model
       const clsGroup = {
         element: {
-          control: 'form-row',
+          control: 'row',
           hint: 'ds-form-qualdrop-hint',
         },
       };
@@ -39,7 +39,7 @@ export class OneboxFieldParser extends FieldParser {
           control: 'ds-form-input-addon custom-select',
         },
         grid: {
-          host: 'col-sm-4 pr-0',
+          host: 'col-sm-4 pe-0',
         },
       };
 
@@ -48,7 +48,7 @@ export class OneboxFieldParser extends FieldParser {
           control: 'ds-form-input-value',
         },
         grid: {
-          host: 'col-sm-8 pl-0',
+          host: 'col-sm-8 ps-0',
         },
       };
 
diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts
index b4febfc47ff..5de43bb9189 100644
--- a/src/app/shared/form/builder/parsers/row-parser.ts
+++ b/src/app/shared/form/builder/parsers/row-parser.ts
@@ -122,7 +122,7 @@ export class RowParser {
     if (config && !isEmpty(config.group)) {
       const clsGroup = {
         element: {
-          control: 'form-row',
+          control: 'row',
         },
       };
       const groupModel = new DynamicRowGroupModel(config, clsGroup);
diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html
index 927ca426ef3..f3c0e0d4b5b 100644
--- a/src/app/shared/form/chips/chips.component.html
+++ b/src/app/shared/form/chips/chips.component.html
@@ -1,11 +1,11 @@
-<div [className]="'float-left w-100 ' + wrapperClass">
+<div [className]="'float-start w-100 ' + wrapperClass">
   <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
     <ng-template #tipContent>
-      <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
+        <p class="text-start p-0 m-0" *ngFor="let tip of tipText">
         {{tip}}
       </p>
     </ng-template>
-    <div role="listitem" class="nav-item mr-2 mb-1"
+    <div role="listitem" class="nav-item me-2 mb-1"
            *ngFor="let c of chips.getChips(); let i = index"
            #t="ngbTooltip"
            triggers="manual"
@@ -26,8 +26,8 @@
                  triggers="manual"
                  #t="ngbTooltip"
                  class="{{icon.style}}"
-                 [class.mr-1]="!l"
-                 [class.mr-2]="l"
+                 [class.me-1]="!l"
+                 [class.me-2]="l"
                  dsAuthorityConfidenceState
                  [authorityValue]="c.item[icon.metadata] || c.item"
                  [visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty"
@@ -35,7 +35,7 @@
                  (mouseover)="showTooltip(t, i, icon.metadata)"
                  (mouseout)="t.close()"></i>
             </ng-container>
-            <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fas fa-times ml-2" (click)="removeChips($event, i)" [title]="'chips.remove' | translate"></i>
+            <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fas fa-times ms-2" (click)="removeChips($event, i)" [title]="'chips.remove' | translate"></i>
           </span>
         </a>
       </div>
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index ef75f34b9b1..e9440f16ad5 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -22,7 +22,7 @@
               <span><i class="fas fa-trash" aria-hidden="true"></i></span>
             </button>
         </div>
-        <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1) && !isItemReadOnly(context, index)" class="clearfix pl-4 w-100">
+        <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1) && !isItemReadOnly(context, index)" class="clearfix ps-4 w-100">
           <div class="btn-group" role="group">
             <button type="button" role="button" class="ds-form-add-more btn btn-link"
                     title="{{'form.add' | translate}}"
@@ -54,8 +54,8 @@
 
     <div *ngIf="displaySubmit || displayCancel">
       <hr>
-      <div class="form-group row">
-        <div class="col text-right space-children-mr">
+      <div class="mb-3 row">
+        <div class="col text-end space-children-mr">
           <ng-content select="[before]"></ng-content>
             <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
               <i class="fa fa-times" aria-hidden="true"></i> {{cancelLabel | translate}}
diff --git a/src/app/shared/form/form.component.scss b/src/app/shared/form/form.component.scss
index f537e8d1933..6483553b5a8 100644
--- a/src/app/shared/form/form.component.scss
+++ b/src/app/shared/form/form.component.scss
@@ -47,3 +47,12 @@ button.ds-form-add-more:focus {
 .right-addon input {
   padding-right: calc(var(--bs-spacer) * 2.25);
 }
+
+select.form-control {
+  appearance: auto;
+}
+
+.col-sm-6, .col-sm-12 {
+  padding-left: 15px;
+  padding-right: 15px;
+}
diff --git a/src/app/shared/form/number-picker/number-picker.component.html b/src/app/shared/form/number-picker/number-picker.component.html
index 12e29fa70e4..61bda0e15db 100644
--- a/src/app/shared/form/number-picker/number-picker.component.html
+++ b/src/app/shared/form/number-picker/number-picker.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex flex-column align-items-center justify-content-around mr-3">
+<div class="d-flex flex-column align-items-center justify-content-around me-3">
     <button
       class="btn btn-link-focus"
       type="button"
diff --git a/src/app/shared/form/number-picker/number-picker.component.scss b/src/app/shared/form/number-picker/number-picker.component.scss
index 94f7f38ef01..fa033d6a16d 100644
--- a/src/app/shared/form/number-picker/number-picker.component.scss
+++ b/src/app/shared/form/number-picker/number-picker.component.scss
@@ -29,13 +29,14 @@ input {
   font-weight: $font-weight-normal;
   color: $link-color;
   text-decoration: $link-decoration;
-  @include hover {
+  &:hover {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
   &:disabled,
   &.disabled {
     color: $btn-link-disabled-color;
+    border: transparent;
     pointer-events: none;
   }
 
diff --git a/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html b/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html
index 851ccaf880d..62ea1e445e5 100644
--- a/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html
+++ b/src/app/shared/form/vocabulary-treeview-modal/vocabulary-treeview-modal.component.html
@@ -1,7 +1,6 @@
 <div class="modal-header">
   <h4 class="modal-title">{{'vocabulary-treeview.header' | translate}}</h4>
-  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
-    <span aria-hidden="true">&times;</span>
+  <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
   </button>
 </div>
 <div class="modal-body">
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
index 758d1426e06..752cf79cad4 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -30,16 +30,16 @@ <h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4
   <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
     <!-- Leaf node -->
     <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
-      <span aria-hidden="true" type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle>
-        <i class="fas fa-fw fa-angle-right invisible"></i>
-      </span>
-          <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
+            <span aria-hidden="true" type="button" class="btn btn-default px-2 me-1" cdkTreeNodeToggle>
+                <i class="fas fa-fw fa-angle-right invisible"></i>
+            </span>
+            <label *ngIf="multiSelect" class="form-label d-flex align-items-center m-0 p-0 form-check"
                  [class.text-success]="node.isSelected"
                  [ngbTooltip]="node.item?.otherInformation?.note"
                  [openDelay]="500"
                  container="body"
           >
-            <input class="mr-2" type="checkbox"
+                <input class="me-2" type="checkbox"
                    [disabled]="!node.item?.selectable"
                    [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
@@ -47,7 +47,7 @@ <h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4
             >
             <span>{{node.item.display}}</span>
           </label>
-          <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
+            <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-start"
                   [class.text-success]="node.isSelected"
                   [disabled]="!node.item?.selectable"
                   [ngbTooltip]="node.item?.otherInformation?.note"
@@ -60,18 +60,18 @@ <h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4
 
     <!-- expandable node -->
     <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
-        <button type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle
+        <button type="button" class="btn btn-default px-2 me-1" cdkTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.name"
                 (click)="loadChildren(node)">
           <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
         </button>
 
-          <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
+            <label *ngIf="multiSelect" class="form-label d-flex align-items-center m-0 p-0 form-check"
                 [class.text-success]="node.isSelected"
                 [ngbTooltip]="node.item?.otherInformation?.note"
                 [openDelay]="500"
                 container="body">
-            <input class="mr-2" type="checkbox"
+                <input class="me-2" type="checkbox"
                    [disabled]="!node.item?.selectable"
                    [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
@@ -79,7 +79,7 @@ <h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4
             >
             <span>{{node.item.display}}</span>
           </label>
-          <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
+            <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-start"
                   [class.text-success]="node.isSelected"
                   [disabled]="!node.item?.selectable"
                   [ngbTooltip]="node.item?.otherInformation?.note"
diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts
index 7b3723c1a0a..3801a4ef062 100644
--- a/src/app/shared/host-window.service.ts
+++ b/src/app/shared/host-window.service.ts
@@ -43,10 +43,10 @@ export class HostWindowService {
     /* See _exposed_variables.scss */
     variableService.getAllVariables()
       .subscribe((variables) => {
-        this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
-        this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
-        this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
-        this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
+        this.breakPoints.XL_MIN = parseInt(variables['--bs-xl'], 10);
+        this.breakPoints.LG_MIN = parseInt(variables['--bs-lg'], 10);
+        this.breakPoints.MD_MIN = parseInt(variables['--bs-md'], 10);
+        this.breakPoints.SM_MIN = parseInt(variables['--bs-sm'], 10);
       });
   }
 
diff --git a/src/app/shared/idle-modal/idle-modal.component.html b/src/app/shared/idle-modal/idle-modal.component.html
index a69c4d7e76d..91ca7cd67bf 100644
--- a/src/app/shared/idle-modal/idle-modal.component.html
+++ b/src/app/shared/idle-modal/idle-modal.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header" id="idle-modal.header">{{ "idle-modal.header" | translate }}
-    <button type="button" class="close" (click)="closePressed()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="closePressed()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/shared/idle-modal/idle-modal.component.spec.ts b/src/app/shared/idle-modal/idle-modal.component.spec.ts
index 29c13cba5fc..41801175763 100644
--- a/src/app/shared/idle-modal/idle-modal.component.spec.ts
+++ b/src/app/shared/idle-modal/idle-modal.component.spec.ts
@@ -130,7 +130,7 @@ describe('IdleModalComponent', () => {
   describe('when the click method emits on close button', () => {
     beforeEach(fakeAsync(() => {
       spyOn(component, 'closePressed');
-      debugElement.query(By.css('.close')).triggerEventHandler('click', {
+      debugElement.query(By.css('.btn-close')).triggerEventHandler('click', {
         preventDefault: () => {/**/
         },
       });
diff --git a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
index 633c7b3e452..719e76b30f7 100644
--- a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
@@ -3,9 +3,9 @@
       (keydown.arrowdown)="shiftFocusDown($event)"
       (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
       (dsClickOutside)="close();">
-  <div class="form-group mb-0">
-    <label *ngIf="label; else searchInput" class="mb-0 w-100">
-      <span class="font-weight-bold">
+  <div class="mb-3 mb-0">
+    <label class="form-label" *ngIf="label; else searchInput" class="mb-0 w-100">
+      <span class="fw-bold">
         {{label}}
       </span>
       <ng-container *ngTemplateOutlet="searchInput"></ng-container>
diff --git a/src/app/shared/loading/loading.component.html b/src/app/shared/loading/loading.component.html
index e391cedbea7..e12a0d94441 100644
--- a/src/app/shared/loading/loading.component.html
+++ b/src/app/shared/loading/loading.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="!spinner">
-  <label *ngIf="showMessage && message" aria-live="polite">{{ message }}</label>
+  <label class="form-label" *ngIf="showMessage && message" aria-live="polite">{{ message }}</label>
   <div class="loader" aria-hidden="true">
     <span class="l-1"></span>
     <span class="l-2"></span>
diff --git a/src/app/shared/log-in/methods/log-in-external-provider/log-in-external-provider.component.html b/src/app/shared/log-in/methods/log-in-external-provider/log-in-external-provider.component.html
index 378bb6ed67f..a8d511a3f5c 100644
--- a/src/app/shared/log-in/methods/log-in-external-provider/log-in-external-provider.component.html
+++ b/src/app/shared/log-in/methods/log-in-external-provider/log-in-external-provider.component.html
@@ -1,3 +1,3 @@
-<button class="btn btn-lg btn-primary btn-block text-white" (click)="redirectToExternalProvider()">
+<button class="btn btn-lg btn-primary w-100 text-white" (click)="redirectToExternalProvider()">
   <i class="fas fa-sign-in-alt"></i> {{getButtonLabel() | translate}}
 </button>
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.html b/src/app/shared/log-in/methods/password/log-in-password.component.html
index 567a05f5444..d51dff9bdf2 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.html
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.html
@@ -23,7 +23,7 @@
   <div *ngIf="(message | async) && hasMessage" class="alert alert-info" role="alert"
        @fadeOut>{{ (message | async) | translate }}</div>
 
-  <button class="btn btn-lg btn-primary btn-block mt-3" type="submit" [attr.data-test]="'login-button' | dsBrowserOnly"
+  <button class="btn btn-lg btn-primary w-100" type="submit" [attr.data-test]="'login-button' | dsBrowserOnly"
           [disabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
 </form>
 
diff --git a/src/app/shared/log-out/log-out.component.html b/src/app/shared/log-out/log-out.component.html
index 26f03b95a4d..de029622c09 100644
--- a/src/app/shared/log-out/log-out.component.html
+++ b/src/app/shared/log-out/log-out.component.html
@@ -2,5 +2,5 @@
 
   <div *ngIf="(error | async)" class="alert alert-danger" role="alert" @fadeOut>{{ error | async }}</div>
 
-  <button role="menuitem" class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()" [attr.data-test]="'logout-button' | dsBrowserOnly"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
+  <button role="menuitem" class="btn btn-lg btn-primary w-100" (click)="logOut()" [attr.data-test]="'logout-button' | dsBrowserOnly"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
 </div>
diff --git a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
index 2f96c16f080..49542827250 100644
--- a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
+++ b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
@@ -11,10 +11,9 @@
   <div class="modal-header">
     <h4 class="modal-title">{{'submission.workflow.tasks.claimed.reject.reason.title' | translate}}</h4>
     <button type="button"
-            class="close"
+            class="btn-close"
             aria-label="Close"
             (click)="d('Cross click')">
-      <span aria-hidden="true">&times;</span>
     </button>
   </div>
   <div class="modal-body">
@@ -27,7 +26,7 @@ <h4 class="modal-title">{{'submission.workflow.tasks.claimed.reject.reason.title
                 rows="4"
                 placeholder="{{'submission.workflow.tasks.claimed.reject.reason.placeholder' | translate}}"></textarea>
       <button id="btn-chat"
-              class="btn btn-danger btn-lg btn-block mt-3"
+              class="btn btn-danger btn-lg btn-block w-100 mt-3"
               [disabled]="!rejectForm.valid || (processing$ | async)"
               type="submit">
         <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
diff --git a/src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.html b/src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.html
index 1d989340111..9e6cea9e0f0 100644
--- a/src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.html
+++ b/src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.html
@@ -6,7 +6,7 @@
   <span *ngIf="(processing$ | async) !== true"><i class="fas fa-hand-paper"></i> {{'submission.workflow.tasks.pool.claim' |
     translate}}</span>
 </button>
-<button class="btn btn-primary workflow-view ml-1 mt-1 mb-3" data-test="view-btn"
+<button class="btn btn-primary workflow-view ms-1 mt-1 mb-3" data-test="view-btn"
   ngbTooltip="{{'submission.workflow.generic.view-help' | translate}}"
   [routerLink]="[getWorkflowItemViewRoute(workflowitem)]">
   <i class="fa fa-info-circle"></i> {{"submission.workflow.generic.view" | translate}}
diff --git a/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html b/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
index daefc75fd37..9f8999f3331 100644
--- a/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
+++ b/src/app/shared/mydspace-actions/workspaceitem/workspaceitem-actions.component.html
@@ -31,8 +31,7 @@
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
     <div class="modal-title text-danger h4">{{'submission.general.discard.confirm.title' | translate}}</div>
-    <button type="button" id="delete_close" class="close" aria-label="Close" (click)="d('cancel')">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" id="delete_close" class="btn-close" aria-label="Close" (click)="d('cancel')">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index dae02074938..ce6297904ad 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -2,13 +2,12 @@
      [@enterLeave]="animate">
 
   <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">
-    <span [ngStyle]="{'width': progressWidth + '%'}" class="h-100 float-left"></span>
+    <span [ngStyle]="{'width': progressWidth + '%'}" class="h-100 float-start"></span>
   </div>
 
     <button *ngIf="notification.options.clickToClose"
             (click)="remove()"
-            type="button" class="close pt-0 pr-1 pl-0 pb-0" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
+            type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-dismiss="alert" aria-label="Close">
     </button>
 
 
@@ -23,32 +22,32 @@
       }"></i></div>
     </div>
     <div class="d-flex flex-column justify-content-center align-content-stretch">
-      <div class="p-2 mr-3"  *ngIf="title">
+      <div class="p-2 me-3"  *ngIf="title">
         <strong>
-          <div class="notification-title pl-1" *ngIf="titleIsTemplate; else regularTitle">
+          <div class="notification-title ps-1" *ngIf="titleIsTemplate; else regularTitle">
             <ng-container *ngTemplateOutlet="title"></ng-container>
           </div>
           <ng-template #regularTitle>
-            <div class="notification-title pl-1">{{(title | async)}}</div>
+            <div class="notification-title ps-1">{{(title | async)}}</div>
           </ng-template>
         </strong>
       </div>
 
-      <div class="p-2 mr-3"  *ngIf="content && !html">
-        <div class="notification-content pl-1" *ngIf="contentIsTemplate; else regularContent">
+      <div class="p-2 me-3"  *ngIf="content && !html">
+        <div class="notification-content ps-1" *ngIf="contentIsTemplate; else regularContent">
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </div>
         <ng-template #regularContent>
-          <div class="notification-content pl-1">{{(content | async)}}</div>
+          <div class="notification-content ps-1">{{(content | async)}}</div>
         </ng-template>
       </div>
 
-      <div class="p-2 mr-3" *ngIf="content && html">
-        <div class="notification-html pl-1" *ngIf="contentIsTemplate; else regularHtml">
+      <div class="p-2 me-3" *ngIf="content && html">
+        <div class="notification-html ps-1" *ngIf="contentIsTemplate; else regularHtml">
           <ng-container *ngTemplateOutlet="content"></ng-container>
         </div>
         <ng-template #regularHtml>
-          <div class="notification-html pl-1" [innerHTML]="content"></div>
+          <div class="notification-html ps-1" [innerHTML]="content"></div>
         </ng-template>
       </div>
     </div>
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index ecfc25fee06..e6beffb94e2 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -4,7 +4,7 @@
   text-align: left;
 }
 
-.close {
+.btn-close {
   outline: none !important;
   opacity: 0.8;
 }
diff --git a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
index 5b20860684b..32adab29c7d 100644
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="showAccessStatus">
   <span *ngIf="accessStatus$ | async as accessStatus">
-    <span [class]="'badge badge-secondary access-status-list-element-badge ' + accessStatusClass">{{ accessStatus | translate }}</span>
+    <span [class]="'badge bg-secondary access-status-list-element-badge ' + accessStatusClass">{{ accessStatus | translate }}</span>
   </span>
 </ng-container>
diff --git a/src/app/shared/object-collection/shared/badges/badges.component.html b/src/app/shared/object-collection/shared/badges/badges.component.html
index aade4503a4a..46e2555a9a8 100644
--- a/src/app/shared/object-collection/shared/badges/badges.component.html
+++ b/src/app/shared/object-collection/shared/badges/badges.component.html
@@ -3,7 +3,7 @@
     <ds-my-dspace-status-badge [context]="context"></ds-my-dspace-status-badge>
 </ng-container>
 <div>
-    <ds-type-badge class="pr-1" [object]="object"></ds-type-badge>
+    <ds-type-badge class="pe-1" [object]="object"></ds-type-badge>
     <ng-container *ngIf="showAccessStatus">
         <ds-access-status-badge [object]="object"></ds-access-status-badge>
     </ng-container>
diff --git a/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html b/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
index c864f22afa6..5175848f8d3 100644
--- a/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="privateBadge" class="private-badge">
-    <span class="badge badge-danger">{{ "item.badge.private" | translate }}</span>
+    <span class="badge bg-danger">{{ "item.badge.private" | translate }}</span>
 </div>
 <div *ngIf="withdrawnBadge" class="withdrawn-badge">
-    <span class="badge badge-warning">{{ "item.badge.withdrawn" | translate }}</span>
+    <span class="badge bg-warning">{{ "item.badge.withdrawn" | translate }}</span>
 </div>
diff --git a/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html b/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
index 119702c3755..c0a173dfe8c 100644
--- a/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
@@ -1,3 +1,3 @@
 <span *ngIf="typeMessage">
-  <span class="badge badge-info">{{ typeMessage | translate }}</span>
+  <span class="badge bg-info">{{ typeMessage | translate }}</span>
 </span>
diff --git a/src/app/shared/object-collection/shared/importable-list-item-control/importable-list-item-control.component.html b/src/app/shared/object-collection/shared/importable-list-item-control/importable-list-item-control.component.html
index 921999b5404..3d2ade646ec 100644
--- a/src/app/shared/object-collection/shared/importable-list-item-control/importable-list-item-control.component.html
+++ b/src/app/shared/object-collection/shared/importable-list-item-control/importable-list-item-control.component.html
@@ -1,6 +1,6 @@
-<div class="mr-2">
+<div class="me-2">
   <button (click)="importObject.emit(object)"
-          class="btn btn-outline-primary btn-sm float-left"
+          class="btn btn-outline-primary btn-sm float-start"
           title="{{importConfig?.buttonLabel | translate}}">
     <i class="fas fa-cloud-download-alt fa-fw"></i>
   </button>
diff --git a/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html b/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html
index 513c1324321..5256b87cc11 100644
--- a/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html
+++ b/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html
@@ -1,5 +1,5 @@
 <div class="mt-2 mb-2" *ngIf="(collection$ | async)">
-  <span class="text-muted">{{'collection.listelement.badge' | translate}}:
+  <span class="link-muted">{{'collection.listelement.badge' | translate}}:
     <a [routerLink]="['/collections', (collection$ | async)?.id]">
       {{ dsoNameService.getName(collection$ | async) }}
     </a>
diff --git a/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html b/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
index 0f9cdf846e3..c1154be7235 100644
--- a/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
+++ b/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
@@ -1,7 +1,7 @@
 <div class="mt-2 mb-2">
   <span class="text-muted">
     {{'submission.workflow.tasks.generic.submitter' | translate}}:
-    <span class="badge badge-info">
+    <span class="badge bg-info">
       <ng-container *ngIf="submitter$ | async as submitter; else noSubmitter">
         {{ dsoNameService.getName(submitter) }}
       </ng-container>
diff --git a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
index a90f375c6a1..58de45d81c3 100644
--- a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
+++ b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
@@ -1,5 +1,6 @@
 <ng-container *ngVar="selectionService?.isObjectSelected(selectionConfig?.listId, object) | async as checked">
-    <input #selectListItemCheckbox *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
+    <span class="form-check">
+        <input #selectListItemCheckbox *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
            [attr.aria-label]="(selectListItemCheckbox.checked ? 'selectable-list-item-control.deselect' : 'selectable-list-item-control.select') | translate"
            [name]="'checkbox' + index"
            [id]="'object' + index"
@@ -11,4 +12,5 @@
            [id]="'object' + index"
            [checked]="selected$ | async"
            (click)="selectRadio(!checked)">
+    </span>
 </ng-container>
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
index 8d42c8536ae..374c7f2acbc 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
@@ -1,5 +1,5 @@
   <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
-    <div class="position-absolute ml-1">
+    <div class="position-absolute ms-1">
         <ng-content></ng-content>
     </div>
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
diff --git a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
index 757135d8092..b6349fd83c5 100644
--- a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
+++ b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
@@ -5,6 +5,6 @@
     <span *ngIf="linkType === linkTypes.None" class="lead">
         {{object.value}}
     </span>
-    <span class="pr-2">&nbsp;</span>
-    <span class="badge badge-pill badge-secondary align-self-center">{{object.count}}</span>
+    <span class="pe-2">&nbsp;</span>
+    <span class="badge rounded-pill bg-secondary align-self-center ps-2 pe-2">{{object.count}}</span>
 </div>
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
index 1c4f68fbcce..5d965ca47d1 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
@@ -5,8 +5,8 @@
   <span *ngIf="linkType === linkTypes.None" class="lead">
     {{ dsoNameService.getName(object) }}
   </span>
-  <span class="pr-2">&nbsp;</span>
-  <span *ngIf="object.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-self-center archived-items-lead">{{object.archivedItemsCount}}</span>
+  <span class="pe-2">&nbsp;</span>
+  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
 </div>
 <div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
index d63abd96725..234dc4f859b 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.html
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.html
@@ -5,8 +5,8 @@
   <span *ngIf="linkType === linkTypes.None" class="lead">
     {{ dsoNameService.getName(object) }}
   </span>
-  <span class="pr-2">&nbsp;</span>
-  <span *ngIf="object.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-self-center archived-items-lead">{{object.archivedItemsCount}}</span>
+  <span class="pe-2">&nbsp;</span>
+  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
 </div>
 <div *ngIf="object.shortDescription" class="text-muted abstract-text">
     {{object.shortDescription}}
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.html
index 8f85b5491c9..5fc4bb6f400 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.html
@@ -16,7 +16,7 @@
     </div>
   </ng-container>
   <div class="row">
-    <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 pl-3' : ''">
+    <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 col-9 col-md-10 ps-3' : ''">
       <ds-claimed-task-actions [item]="item$.value"
                                [object]="dso"
                                [workflowitem]="workflowitem$.value"
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.html b/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.html
index 5600ccd9208..9d6070c2874 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/item-search-result/item-search-result-list-element-submission.component.html
@@ -3,7 +3,7 @@
                       [badgeContext]="badgeContext"></ds-item-list-preview>
 
 <div class="row">
-  <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 pl-3' : ''">
+  <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 col-9 col-md-10 ps-3' : ''">
     <ds-item-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-item-actions>
   </div>
 </div>
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.html
index d17bebe2d90..77dd7d56bcf 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.html
@@ -18,7 +18,7 @@
   </ng-container>
 
   <div class="row">
-    <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 pl-3' : ''">
+    <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 col-9 col-md-10 ps-3' : ''">
       <ds-pool-task-actions id="actions"
                             [item]="item$.value"
                             [object]="dso"
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
index c2b030c7347..cdd650ce657 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
@@ -4,7 +4,7 @@
             [object]="derivedSearchResult$ | async" [linkType]="LinkTypes.None"
             [context]="badgeContext"></ds-listable-object-component-loader>
     <div class="row">
-        <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2  pl-3' : ''">
+        <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2  col-9 col-md-10 ps-3' : ''">
             <ds-workflowitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workflowitem-actions>
         </div>
     </div>
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
index 240706c91b7..91e8d92f291 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
@@ -4,7 +4,7 @@
             [object]="derivedSearchResult$ | async" [linkType]="LinkTypes.None"
             [context]="badgeContext"></ds-listable-object-component-loader>
     <div class="row">
-        <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2  pl-3' : ''">
+        <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 col-9 col-md-10 ps-3' : ''">
             <ds-workspaceitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workspaceitem-actions>
         </div>
     </div>
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
index 17b5d50d90f..2447366d00c 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
@@ -1,6 +1,5 @@
 <div class="row">
-  <div *ngIf="showThumbnails" class="offset-3 offset-md-2 "></div>
-  <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
+  <div [ngClass]="showThumbnails ? 'col-9 offset-3 offset-md-2' : 'col-md-12'">
     <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType === linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
index f5d68031599..8547f2b8487 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
@@ -1,6 +1,5 @@
 <div class="row">
-  <div *ngIf="showThumbnails" class="offset-3 offset-md-2"></div>
-  <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
+  <div [ngClass]="showThumbnails ? 'col-9 offset-3 offset-md-2' : 'col-md-12'">
     <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
     <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType === linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
diff --git a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html
index 040f528768d..64a063ae4f9 100644
--- a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html
+++ b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html
@@ -3,7 +3,7 @@
        [innerHTML]="(parentTitle$ && parentTitle$ | async) ? (parentTitle$ | async) : ('home.breadcrumbs' | translate)"></div>
 </ds-truncatable-part>
 <ds-truncatable-part [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
-  <div class="font-weight-bold"
+  <div class="fw-bold"
        [ngClass]="isCurrent() ? 'text-light' : 'text-primary'"
        [innerHTML]="dsoTitle"></div>
 </ds-truncatable-part>
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.html b/src/app/shared/object-select/collection-select/collection-select.component.html
index f5f8b9d1cc1..7c72e7747ff 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -28,7 +28,7 @@
   </div>
   <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
   <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
-  <div class="space-children-mr float-right" *ngVar="(selectedIds$ | async) as selectedIds">
+  <div class="space-children-mr float-end" *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn btn-outline-secondary collection-cancel" (click)="onCancel()">
       <i class="fas fa-times"></i> {{cancelButton | translate}}
     </button>
diff --git a/src/app/shared/object-select/item-select/item-select.component.html b/src/app/shared/object-select/item-select/item-select.component.html
index e0e71fb9392..6b0210b3817 100644
--- a/src/app/shared/object-select/item-select/item-select.component.html
+++ b/src/app/shared/object-select/item-select/item-select.component.html
@@ -39,8 +39,8 @@
   <ds-error *ngIf="itemsRD?.hasFailed" message="{{'error.items' | translate}}"></ds-error>
   <ds-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-loading>
   <div *ngVar="(selectedIds$ | async) as selectedIds">
-    <button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
-    <button class="btn item-confirm float-right"
+    <button class="btn btn-outline-secondary item-cancel float-start" (click)="onCancel()">{{cancelButton | translate}}</button>
+    <button class="btn item-confirm float-end"
             [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
             [disabled]="selectedIds?.length === 0"
             (click)="confirmSelected()">
diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html
index 87d312f9ece..8075e0be25b 100644
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -6,7 +6,7 @@
           <span class="align-middle">{{ 'pagination.showing.detail' | translate:(showingDetails$ | async)}}</span>
       </div>
       <div class="col">
-        <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
+        <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-end">
           <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog" aria-hidden="true"></i></button>
           <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
             <li role="menuitem">
@@ -54,12 +54,12 @@
     </div>
 
     <div *ngIf="!showPaginator" class="d-flex justify-content-between">
-        <button id="nav-prev" type="button" class="btn btn-outline-primary float-left"
+        <button id="nav-prev" type="button" class="btn btn-outline-primary float-start"
                 (click)="goPrev()"
                 [disabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
           <i class="fas fa-angle-left"></i> {{'pagination.previous.button' |translate}}
         </button>
-      <button id="nav-next" type="button" class="btn btn-outline-primary float-right"
+      <button id="nav-next" type="button" class="btn btn-outline-primary float-end"
               (click)="goNext()"
               [disabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)">
           <span [ngbTooltip]="objects?.payload?.currentPage >= objects?.payload?.totalPages ? ('pagination.next.button.disabled.tooltip' |translate) : null">
diff --git a/src/app/shared/resource-policies/form/resource-policy-form.component.html b/src/app/shared/resource-policies/form/resource-policy-form.component.html
index 3d5465f0e69..cab95df61d9 100644
--- a/src/app/shared/resource-policies/form/resource-policy-form.component.html
+++ b/src/app/shared/resource-policies/form/resource-policy-form.component.html
@@ -26,9 +26,9 @@
     <div [ngbNavOutlet]="nav"></div>
     <div>
       <hr>
-      <div class="form-group row">
+      <div class="mb-3 row">
 
-        <div class="col text-right">
+        <div class="col text-end">
           <button type="reset"
                   class="btn btn-default"
                   [disabled]="(isProcessing | async)"
@@ -54,18 +54,17 @@
 <ng-template #content let-modal>
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{ 'resource-policies.form.eperson-group-list.modal.header' | translate }}</h4>
-    <button type="button" class="close" aria-label="Close" (click)="modal.close()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.close()">
     </button>
   </div>
   <div class="modal-body">
     <div class="d-flex flex-row">
-      <div class="mr-3">
+      <div class="me-3">
         <i class="fas fa-info-circle fa-2x text-info"></i>
       </div>
       <div>
       <p [innerHTML]="(navActiveId === 'eperson' ? 'resource-policies.form.eperson-group-list.modal.text1.toGroup' :
-       'resource-policies.form.eperson-group-list.modal.text1.toEPerson') | translate" class="font-weight-bold"></p>
+       'resource-policies.form.eperson-group-list.modal.text1.toEPerson') | translate" class="fw-bold"></p>
       <p [innerHTML]="'resource-policies.form.eperson-group-list.modal.text2' | translate"></p>
       </div>
     </div>
diff --git a/src/app/shared/resource-policies/form/resource-policy-form.model.ts b/src/app/shared/resource-policies/form/resource-policy-form.model.ts
index 98ecd678278..2902f22a2d2 100644
--- a/src/app/shared/resource-policies/form/resource-policy-form.model.ts
+++ b/src/app/shared/resource-policies/form/resource-policy-form.model.ts
@@ -118,7 +118,7 @@ export const RESOURCE_POLICY_FORM_DATE_GROUP_CONFIG: DynamicFormGroupModelConfig
 };
 export const RESOURCE_POLICY_FORM_DATE_GROUP_LAYOUT: DynamicFormControlLayout = {
   element: {
-    control: 'form-row',
+    control: 'row',
   },
 };
 
diff --git a/src/app/shared/rss-feed/rss.component.html b/src/app/shared/rss-feed/rss.component.html
index 91140c50c5a..207e62f6cca 100644
--- a/src/app/shared/rss-feed/rss.component.html
+++ b/src/app/shared/rss-feed/rss.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="(isEnabled$ | async) && (hasRoute('home') || hasRoute('collections') || hasRoute('communities'))">
-  <div *ngIf="route$ | async as route" class="d-inline-block float-right margin-right">
+  <div *ngIf="route$ | async as route" class="d-inline-block float-end margin-right">
     <a [href]="route" class="btn btn-secondary" [title]="'feed.description' | translate" [attr.aria-label]="'feed.description' | translate"><i class="fas fa-rss-square"></i></a>
   </div>
 </ng-container>
diff --git a/src/app/shared/search-form/scope-selector-modal/scope-selector-modal.component.html b/src/app/shared/search-form/scope-selector-modal/scope-selector-modal.component.html
index 74c71b1d127..edc2a7439bf 100644
--- a/src/app/shared/search-form/scope-selector-modal/scope-selector-modal.component.html
+++ b/src/app/shared/search-form/scope-selector-modal/scope-selector-modal.component.html
@@ -1,12 +1,11 @@
 <div>
     <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-        <button type="button" class="close" (click)="selectObject(undefined)" aria-label="Close">
-            <span aria-hidden="true">×</span>
+        <button type="button" class="btn-close" (click)="selectObject(undefined)" aria-label="Close">
         </button>
     </div>
     <div class="modal-body">
-        <button class="btn btn-outline-primary btn-lg btn-block" (click)="selectObject(undefined)">{{'dso-selector.' + action + '.' + objectType.toString().toLowerCase() + '.button'| translate }}</button>
-        <div class="position-relative py-1 my-3 font-weight-normal h3">
+        <button class="btn btn-outline-primary btn-lg btn-block w-100" (click)="selectObject(undefined)">{{'dso-selector.' + action + '.' + objectType.toString().toLowerCase() + '.button'| translate }}</button>
+        <div class="position-relative py-1 my-3 fw-normal h3">
             <hr>
             <div id="create-community-or-separator" class="text-center position-absolute w-100">
                 <span class="px-4 bg-white">{{'dso-selector.' + action + '.' + objectType.toString().toLowerCase() + '.or-divider' | translate}}</span>
diff --git a/src/app/shared/search-form/search-form.component.html b/src/app/shared/search-form/search-form.component.html
index 96e45240a15..f1c882dbe28 100644
--- a/src/app/shared/search-form/search-form.component.html
+++ b/src/app/shared/search-form/search-form.component.html
@@ -1,19 +1,15 @@
 <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" action="/search">
     <div>
-        <div class="form-group input-group">
-            <div *ngIf="showScopeSelector" class="input-group-prepend">
-                <button class="scope-button btn btn-outline-secondary text-truncate"
+        <div class="mb-3 input-group">
+                <button *ngIf="showScopeSelector" class="scope-button btn btn-outline-secondary text-truncate"
                         [ngbTooltip]="dsoNameService.getName(selectedScope | async)" type="button"
                         (click)="openScopeModal()">
                   {{dsoNameService.getName(selectedScope | async) || ('search.form.scope.all' | translate)}}
                 </button>
-            </div>
             <input type="text" [(ngModel)]="query" name="query" class="form-control"
                    [attr.aria-label]="searchPlaceholder" [attr.data-test]="'search-box' | dsBrowserOnly"
                    [placeholder]="searchPlaceholder">
-            <span class="input-group-append">
             <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
-        </span>
         </div>
     </div>
 </form>
diff --git a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
index 1a95d68b2cf..716de88eef5 100644
--- a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
@@ -7,11 +7,11 @@
           </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">
-            <a class="float-left" *ngIf="(isLastPage$ | async) !== true"
+            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
                (click)="showMore()" href="javascript:void(0);">
               {{"search.filters.filter.show-more" | translate}}
             </a>
-            <a class="float-right" *ngIf="(currentPage | async) > 1"
+            <a class="float-end" *ngIf="(currentPage | async) > 1"
                (click)="showFirstPageOnly()" href="javascript:void(0);">
               {{"search.filters.filter.show-less" | translate}}
             </a>
diff --git a/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
index 6c26198e65d..92e6e0631fd 100644
--- a/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
@@ -7,11 +7,11 @@
         </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">
-            <a class="float-left" *ngIf="(isLastPage$ | async) !== true"
+            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
                (click)="showMore()" href="javascript:void(0);">
               {{"search.filters.filter.show-more" | translate}}
             </a>
-            <a class="float-right" *ngIf="(currentPage | async) > 1"
+            <a class="float-end" *ngIf="(currentPage | async) > 1"
                (click)="showFirstPageOnly()" href="javascript:void(0);">
               {{"search.filters.filter.show-less" | translate}}
             </a>
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
index f0e6120725b..d5108e03b62 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
@@ -5,8 +5,8 @@
    (click)="filterService.minimizeAll()">
   <label class="mb-0 d-flex w-100">
     <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox"/>
-    <span class="w-100 pl-1 break-facet">
-      <span class="float-right badge badge-secondary badge-pill mt-1 ml-1">{{filterValue.count | dsShortNumber}}</span>
+    <span class="w-100 ps-1 break-facet">
+      <span class="float-end badge bg-secondary rounded-pill mt-1 ms-1">{{filterValue.count | dsShortNumber}}</span>
       {{ 'search.filters.' + filterConfig.name + '.' + filterValue.value | translate: {default: filterValue.value} }}
     </span>
   </label>
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
index 068c9bc7756..30ab17b7db9 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
@@ -3,7 +3,7 @@
    [routerLink]="[searchLink]"
    [queryParams]="changeQueryParams" queryParamsHandling="merge">
   <span class="filter-value px-1">{{filterValue.label}}</span>
-  <span class="float-right filter-value-count ml-auto">
-    <span class="badge badge-secondary badge-pill">{{filterValue.count | dsShortNumber}}</span>
+  <span class="float-end filter-value-count ms-auto">
+    <span class="badge bg-secondary rounded-pill">{{filterValue.count | dsShortNumber}}</span>
   </span>
 </a>
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html
index 0887e4d6a52..b1045a854a7 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html
@@ -5,7 +5,7 @@
    (click)="searchFilterService.minimizeAll()">
   <label class="mb-0 d-flex w-100">
     <input type="checkbox" [checked]="true" class="my-1 align-self-stretch filter-checkbox"/>
-    <span class="filter-value pl-1 break-facet">
+    <span class="filter-value ps-1 break-facet">
         {{ 'search.filters.' + filterConfig.name + '.' + selectedValue.value | translate: {default: selectedValue.label} }}
     </span>
   </label>
diff --git a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
index 51200571bd6..a4fe34b50e1 100644
--- a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
@@ -7,11 +7,11 @@
           </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">
-            <a class="float-left" *ngIf="(isLastPage$ | async) !== true"
+            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
                (click)="showMore()" href="javascript:void(0);">
               {{"search.filters.filter.show-more" | translate}}
             </a>
-            <a class="float-right" *ngIf="(currentPage | async) > 1"
+            <a class="float-end" *ngIf="(currentPage | async) > 1"
                (click)="showFirstPageOnly()" href="javascript:void(0);">
               {{"search.filters.filter.show-less" | translate}}
             </a>
diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
index 6f1f95738ce..67c2be4e4ff 100644
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
@@ -2,9 +2,9 @@
     <div class="filters py-2">
         <form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
               [action]="currentUrl">
-            <div class="col-6 form-group mb-0">
-                <label>
-                  <span class="font-weight-bold">
+            <div class="col-6 mb-3 mb-0">
+                <label class="form-label">
+                  <span class="fw-bold">
                     {{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
                   </span>
                   <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
@@ -15,8 +15,8 @@
                 </label>
             </div>
             <div class="col-6">
-                <label>
-                    <span class="font-weight-bold">
+                <label class="form-label">
+                    <span class="fw-bold">
                       {{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
                     </span>
                     <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
diff --git a/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
index 037964c63f3..776680c2cd2 100644
--- a/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
@@ -7,11 +7,11 @@
           </div>
         </ng-container>
         <div class="clearfix toggle-more-filters">
-            <a class="float-left" *ngIf="(isLastPage$ | async) !== true"
+            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
                (click)="showMore()" href="javascript:void(0);">
               {{"search.filters.filter.show-more" | translate}}
             </a>
-            <a class="float-right" *ngIf="(currentPage | async) > 1"
+            <a class="float-end" *ngIf="(currentPage | async) > 1"
                (click)="showFirstPageOnly()" href="javascript:void(0);">
               {{"search.filters.filter.show-less" | translate}}
             </a>
diff --git a/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html b/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html
index 609d9ad7850..ea8fbc392bd 100644
--- a/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html
+++ b/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html
@@ -3,10 +3,10 @@
    [routerLink]="searchLink"
    [queryParams]="(removeParametersMin$ | async)"
    (click)="searchFilterService.minimizeAll()"
-   class="badge badge-primary">
+   class="badge bg-primary">
   <span class="d-flex">
     <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}</span>
-    <span class="pl-1" aria-hidden="true">×</span>
+    <span class="ps-1" aria-hidden="true">×</span>
   </span>
 </a>
 <a *ngIf="max !== '*'"
@@ -14,9 +14,9 @@
    [routerLink]="searchLink"
    [queryParams]="(removeParametersMax$ | async)"
    (click)="searchFilterService.minimizeAll()"
-   class="badge badge-primary">
+   class="badge bg-primary">
   <span class="d-flex">
     <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}</span>
-    <span class="pl-1" aria-hidden="true">×</span>
+    <span class="ps-1" aria-hidden="true">×</span>
   </span>
 </a>
diff --git a/src/app/shared/search/search-labels/search-label/search-label.component.html b/src/app/shared/search/search-labels/search-label/search-label.component.html
index 58308d49280..2d54b49b226 100644
--- a/src/app/shared/search/search-labels/search-label/search-label.component.html
+++ b/src/app/shared/search/search-labels/search-label/search-label.component.html
@@ -1,10 +1,10 @@
-<a class="badge badge-primary"
+<a class="badge bg me-1 mb-1 text-capitalize"
    [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter) | translate, value: appliedFilter.label }"
    [routerLink]="searchLink"
    [queryParams]="(removeParameters$ | async)"
    (click)="searchFilterService.minimizeAll()">
   <span class="d-flex">
     <span class="flex-grow-1 text-left">{{ ('search.filters.applied.f.' + appliedFilter.filter) | translate}}{{'search.filters.applied.operator.' + appliedFilter.operator | translate}}: {{'search.filters.' + appliedFilter.filter + '.' + appliedFilter.label | translate: { default: appliedFilter.label } }}</span>
-    <span class="pl-1" aria-hidden="true">×</span>
+    <span class="ps-1" aria-hidden="true">×</span>
   </span>
 </a>
diff --git a/src/app/shared/search/search-sidebar/search-sidebar.component.html b/src/app/shared/search/search-sidebar/search-sidebar.component.html
index 43fdc993919..c52d8b1d4a0 100644
--- a/src/app/shared/search/search-sidebar/search-sidebar.component.html
+++ b/src/app/shared/search/search-sidebar/search-sidebar.component.html
@@ -4,7 +4,7 @@
         <button (click)="toggleSidebar.emit()"
                 [attr.aria-label]="'search.sidebar.close' | translate"
                 aria-controls="search-content"
-                class="btn btn-outline-primary float-right close-sidebar"><i
+                class="btn btn-outline-primary float-end close-sidebar"><i
                 class="fas fa-arrow-right"></i> {{'search.sidebar.close' | translate}}
         </button>
     </div>
diff --git a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
index 64c0cd50085..87546b6c767 100644
--- a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
+++ b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="configurationList?.length > 1" class="search-switch-configuration">
   <h3 id="configuration-switch">{{ 'search.switch-configuration.title' | translate}}</h3>
 
-  <select class="form-control"
+  <select class="form-select"
           aria-labelledby="configuration-switch"
           [compareWith]="compare"
           [(ngModel)]="selectedOption"
diff --git a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.spec.ts b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.spec.ts
index d1562b3734f..913b9cba0b8 100644
--- a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.spec.ts
+++ b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.spec.ts
@@ -87,7 +87,7 @@ describe('SearchSwitchConfigurationComponent', () => {
   });
 
   it('should display select field properly', () => {
-    const selectField = fixture.debugElement.query(By.css('.form-control'));
+    const selectField = fixture.debugElement.query(By.css('.form-select'));
     expect(selectField).not.toBeNull();
 
     const childElements = selectField.children;
diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html
index e0902806920..07b9ea5cf2d 100644
--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -28,7 +28,7 @@
                 <ds-view-mode-switch *ngIf="inPlaceSearch && showViewModes" [viewModeList]="viewModeList"
                     [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
                 <button (click)="openSidebar()" aria-controls="#search-body"
-                        class="btn btn-outline-primary float-right open-sidebar"><i
+                        class="btn btn-outline-primary float-end open-sidebar"><i
                         class="fas fa-sliders"></i> {{"search.sidebar.open"
                        | translate}}
                 </button>
diff --git a/src/app/shared/search/search.component.scss b/src/app/shared/search/search.component.scss
index 82de1f47729..bea773455d8 100644
--- a/src/app/shared/search/search.component.scss
+++ b/src/app/shared/search/search.component.scss
@@ -1,10 +1,14 @@
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .container {
     width: 100%;
     max-width: none;
   }
 }
 
+:host {
+    --bs-gutter-x: .75rem;
+}
+
 ::ng-deep .search-controls {
     margin-bottom: var(--bs-spacer);
 }
diff --git a/src/app/shared/sidebar/page-with-sidebar.component.html b/src/app/shared/sidebar/page-with-sidebar.component.html
index 42f1b538193..c558d97f1f8 100644
--- a/src/app/shared/sidebar/page-with-sidebar.component.html
+++ b/src/app/shared/sidebar/page-with-sidebar.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div class="row">
-    <div class="row-with-sidebar row-offcanvas row-offcanvas-left"
+    <div class="row-with-sidebar row-offcanvas row-offcanvas-left px-0"
          [@pushInOut]="(isSidebarCollapsed$ | async) ? 'collapsed' : 'expanded'">
       <div *ngIf="sideBarWidth > 0" id="{{id}}-sidebar-content"
            [class.invisible]="(isSidebarCollapsed$ | async) === true && (isXsOrSm$ | async) === true"
diff --git a/src/app/shared/sidebar/page-with-sidebar.component.scss b/src/app/shared/sidebar/page-with-sidebar.component.scss
index 4949694313f..df87cdf0543 100644
--- a/src/app/shared/sidebar/page-with-sidebar.component.scss
+++ b/src/app/shared/sidebar/page-with-sidebar.component.scss
@@ -1,4 +1,4 @@
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(lg) {
   .container {
     width: 100%;
     max-width: none;
@@ -6,16 +6,19 @@
 }
 
 .row-with-sidebar {
-
   &.row-offcanvas {
     width: 100%;
+    > * {
+      padding-right: calc(var(--bs-gutter-x) / 2);
+      padding-left: calc(var(--bs-gutter-x) / 2);
+    }
   }
 
   @include media-breakpoint-up(md) {
     display: flex;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     position: relative;
 
     &.row-offcanvas {
diff --git a/src/app/shared/sidebar/sidebar-dropdown.component.html b/src/app/shared/sidebar/sidebar-dropdown.component.html
index 644e1e0d270..101276de827 100644
--- a/src/app/shared/sidebar/sidebar-dropdown.component.html
+++ b/src/app/shared/sidebar/sidebar-dropdown.component.html
@@ -1,6 +1,6 @@
 <div class="setting-option mb-3 p-3">
-  <h4><label for="{{id}}">{{label | translate}}</label></h4>
-  <select id="{{id}}" class="form-control" (change)="changed.emit($event)">
+  <h4><label class="form-label" for="{{id}}">{{label | translate}}</label></h4>
+  <select id="{{id}}" class="form-select" (change)="changed.emit($event)">
     <ng-content></ng-content>
   </select>
 </div>
diff --git a/src/app/shared/starts-with/date/starts-with-date.component.html b/src/app/shared/starts-with/date/starts-with-date.component.html
index b350d9896c6..fcc0986003d 100644
--- a/src/app/shared/starts-with/date/starts-with-date.component.html
+++ b/src/app/shared/starts-with/date/starts-with-date.component.html
@@ -1,34 +1,35 @@
 <form class="w-100" [formGroup]="formData" (ngSubmit)="submitForm(formData.value)">
-  <div class="row">
-    <span class="col-12 font-weight-bold mb-1">
-      {{'browse.startsWith.jump' | translate}}
+    <div class="row">
+    <span class="col-12 fw-bold mb-1">
+      {{ 'browse.startsWith.jump' | translate }}
     </span>
-    <div class="col-6 col-md-2">
-      <select id="year-select" class="form-control" (change)="setStartsWithYearEvent($event)" [attr.aria-label]="'browse.startsWith.choose_year.label' |translate">
-        <option [value]="-1" [selected]="!startsWithYear">
-          {{'browse.startsWith.choose_year' | translate}}
-        </option>
-        <option *ngFor="let option of startsWithOptions"
-                [value]="option"
-                [selected]="option === startsWithYear ? 'selected': null">
-          {{option}}
-        </option>
-      </select>
+        <div class="col-6 col-md-2">
+            <select id="year-select" class="form-select" (change)="setStartsWithYearEvent($event)" [attr.aria-label]="'browse.startsWith.choose_year.label' |translate">
+                <option [value]="-1" [selected]="!startsWithYear">
+                    {{ 'browse.startsWith.choose_year' | translate }}
+                </option>
+                <option *ngFor="let option of startsWithOptions"
+                        [value]="option"
+                        [selected]="option === startsWithYear ? 'selected': null">
+                    {{ option }}
+                </option>
+            </select>
+        </div>
+        <div class="col-6 col-md-2">
+            <select id="month-select" class="form-select" (change)="setStartsWithMonthEvent($event)" [attr.aria-label]="'browse.startsWith.months.none.label' |translate">
+                <option *ngFor="let option of monthOptions"
+                        [value]="option"
+                        [selected]="option === startsWithMonth ? 'selected': null">
+                    {{ 'browse.startsWith.months.' + option | translate }}
+                </option>
+            </select>
+        </div>
+        <div class="col-12 col-md-6">
+            <div class="mb-3 input-group pt-1 pt-md-0">
+                <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" [attr.aria-label]="'browse.startsWith.type_date.label' |translate" type="text" name="startsWith"
+                       formControlName="startsWith" [value]="getStartsWith() ? getStartsWith() : ''"/>
+                <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{ 'browse.startsWith.submit' | translate }}</button>
+            </div>
+        </div>
     </div>
-    <div class="col-6 col-md-2">
-      <select id="month-select" class="form-control" (change)="setStartsWithMonthEvent($event)" [attr.aria-label]="'browse.startsWith.months.none.label' |translate">
-        <option *ngFor="let option of monthOptions"
-                [value]="option"
-                [selected]="option === startsWithMonth ? 'selected': null">
-          {{'browse.startsWith.months.' + option | translate}}
-        </option>
-      </select>
-    </div>
-    <div class="form-group input-group col-12 col-md-6 pt-1 pt-md-0">
-      <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" [attr.aria-label]="'browse.startsWith.type_date.label' |translate" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith() ? getStartsWith() : ''" />
-      <span class="input-group-append">
-        <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
-      </span>
-    </div>
-  </div>
 </form>
diff --git a/src/app/shared/starts-with/text/starts-with-text.component.html b/src/app/shared/starts-with/text/starts-with-text.component.html
index edbd1f1960d..5208427f34c 100644
--- a/src/app/shared/starts-with/text/starts-with-text.component.html
+++ b/src/app/shared/starts-with/text/starts-with-text.component.html
@@ -1,11 +1,9 @@
 <form class="w-100" [formGroup]="formData" (ngSubmit)="submitForm(formData.value)">
 <div class="mb-3">
   <div class="row">
-    <div class="form-group input-group col-sm-12 col-md-6 col-auto">
+    <div class="mb-3 input-group col-sm-12 col-md-6 col-auto">
       <input class="form-control" [attr.aria-label]="'browse.startsWith.input' | translate" placeholder="{{'browse.search-form.placeholder' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith()" />
-      <span class="input-group-append">
         <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
-      </span>
     </div>
   </div>
   <small class="text-muted">{{'browse.startsWith.type_text' | translate}}</small>
diff --git a/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html b/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
index e0bbc1a6095..e34741d68a6 100644
--- a/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
+++ b/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
@@ -1,16 +1,15 @@
 <form *ngIf="subscriptionForm" [formGroup]="subscriptionForm" (ngSubmit)="submit()" data-test="subscription-form">
   <div class="modal-header">
     <h4 class="modal-title">{{'subscriptions.modal.title' | translate}}</h4>
-    <button type="button" class="close" aria-label="Close" (click)="activeModal.close()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.close()">
     </button>
   </div>
   <div class="modal-body">
     <p class="mb-3"><strong>{{ dsoNameService.getName(dso) }}</strong>
-      <span *ngIf="!!dso" class="float-right"><ds-type-badge *ngIf="!!dso" [object]="dso"></ds-type-badge></span>
+      <span *ngIf="!!dso" class="float-end"><ds-type-badge *ngIf="!!dso" [object]="dso"></ds-type-badge></span>
     </p>
     <div>
-      <fieldset *ngFor="let subscriptionType of subscriptionForm?.controls | keyvalue" formGroupName="{{subscriptionType.key}}" class="form-group form-row">
+      <fieldset *ngFor="let subscriptionType of subscriptionForm?.controls | keyvalue" formGroupName="{{subscriptionType.key}}" class="mb-3 row">
         <legend class="col-md-4 col-form-label float-md-left pt-0">
           {{ 'subscriptions.modal.new-subscription-form.type.' + subscriptionType.key | translate }}:
         </legend>
diff --git a/src/app/shared/testing/css-variable-service.stub.ts b/src/app/shared/testing/css-variable-service.stub.ts
index b1f1ba6ee22..554bfaf1792 100644
--- a/src/app/shared/testing/css-variable-service.stub.ts
+++ b/src/app/shared/testing/css-variable-service.stub.ts
@@ -6,10 +6,10 @@ import {
 import { KeyValuePair } from '../key-value-pair.model';
 
 const variables = {
-  '--bs-sm-min': '576px,',
-  '--bs-md-min': '768px,',
-  '--bs-lg-min': '992px',
-  '--bs-xl-min': '1200px',
+  '--bs-sm': '576px,',
+  '--bs-md': '768px,',
+  '--bs-lg': '992px',
+  '--bs-xl': '1200px',
 } as any;
 
 export class CSSVariableServiceStub {
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
index 32a2a213493..805f3d08528 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -4,10 +4,10 @@
   </div>
   <button class="btn btn-link p-0 expandButton" dsDragClick (actualClick)="toggle()">
     <i class="fas fa-angle-down"></i>
-    <span class="ml-1">{{ 'item.truncatable-part.show-more' | translate }}</span>
+    <span class="ms-1">{{ 'item.truncatable-part.show-more' | translate }}</span>
   </button>
   <button class="btn btn-link p-0 collapseButton" dsDragClick (actualClick)="toggle()" *ngIf="expand && expandable">
     <i class="fas fa-angle-up"></i>
-    <span class="ml-1">{{ 'item.truncatable-part.show-less' | translate }}</span>
+    <span class="ms-1">{{ 'item.truncatable-part.show-less' | translate }}</span>
   </button>
 </div>
diff --git a/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html b/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html
index 38c2af97fc2..95b00acdbdd 100644
--- a/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html
+++ b/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html
@@ -18,7 +18,7 @@
   <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center">
       <span><i class="fas fa-cloud-upload"
                aria-hidden="true"></i> {{ ((fileObject === null || fileObject === undefined) ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span>
-    <label class="btn btn-link m-0 p-0 ml-1">
+    <label class="btn btn-link m-0 p-0 ms-1">
       <input class="form-control-file d-none" type="file" name="file-upload"
              id="file-upload"
              (change)="handleFileInput($event)">
diff --git a/src/app/shared/upload/uploader/uploader.component.html b/src/app/shared/upload/uploader/uploader.component.html
index 4c1db13d133..fffff988daa 100644
--- a/src/app/shared/upload/uploader/uploader.component.html
+++ b/src/app/shared/upload/uploader/uploader.component.html
@@ -22,7 +22,7 @@
         <span class="d-flex align-items-center">
           <i class="fas fa-upload pr-1" aria-hidden="true"></i>
           {{dropMsg | translate}}{{'uploader.or' | translate}}
-          <label for="inputFileUploader-{{uploaderId}}" class="btn btn-link m-0 p-0 ml-1" tabindex="0" (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()">
+          <label for="inputFileUploader-{{uploaderId}}" class="btn btn-link m-0 p-0 ms-1" tabindex="0" (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()">
             <span role="button" [attr.aria-label]="ariaLabel | translate">{{'uploader.browse' | translate}}</span>
           </label>
           <input #fileInput id="inputFileUploader-{{uploaderId}}" class="d-none" type="file" ng2FileSelect [uploader]="uploader" multiple tabindex="0" />
@@ -34,13 +34,13 @@
             <span class="filename">
               <span *ngIf="!uploader.options.disableMultipart">{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | </span>{{ uploader?.queue[0]?.file.name }}
             </span>
-            <div class="btn-group btn-group-sm float-right" role="group">
+            <div class="btn-group btn-group-sm float-end" role="group">
               <button type="button" class="btn btn-danger" title="{{'uploader.delete.btn-title' | translate}}" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                 <i class="fas fa-trash" aria-hidden="true"></i>
               </button>
             </div>
-            <span *ngIf="uploader.progress < 100 && !(uploader.progress === 0 && !uploader.options.autoUpload)" class="float-right mr-3">{{ uploader.progress }}%</span>
-            <span *ngIf="uploader.progress === 100" class="float-right mr-3">{{'uploader.processing' | translate}}</span>
+            <span *ngIf="uploader.progress < 100 && !(uploader.progress === 0 && !uploader.options.autoUpload)" class="float-end me-3">{{ uploader.progress }}%</span>
+            <span *ngIf="uploader.progress === 100" class="float-end me-3">{{'uploader.processing' | translate}}</span>
           </div>
           <div class="ds-base-drop-zone-progress clearfix mt-2">
             <div role="progressbar"
diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html
index 16370a5873b..51abdc95265 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.html
+++ b/src/app/submission/form/collection/submission-form-collection.component.html
@@ -2,12 +2,8 @@
   <div
     *ngIf="(available$ | async) !== true"
     class="input-group mb-3">
-    <div class="input-group-prepend">
-      <span class="input-group-text">{{ 'submission.sections.general.collection' | translate }}</span>
-    </div>
-    <div class="input-group-append">
-      <span class="input-group-text">{{ selectedCollectionName$ | async }}</span>
-    </div>
+  <span class="input-group-text">{{ 'submission.sections.general.collection' | translate }}</span>
+  <span class="input-group-text">{{ selectedCollectionName$ | async }}</span>
   </div>
   <div
     ngbDropdown
@@ -15,11 +11,9 @@
     *ngIf="(available$ | async)"
     class="btn-group input-group"
     (openChange)="toggled($event)">
-    <div class="input-group-prepend">
-      <span id="collectionControlsMenuLabel" class="input-group-text">
-        {{ 'submission.sections.general.collection' | translate }}
-      </span>
-    </div>
+  <span id="collectionControlsMenuLabel" class="input-group-text">
+    {{ 'submission.sections.general.collection' | translate }}
+  </span>
     <button aria-describedby="collectionControlsMenuLabel"
             id="collectionControlsMenuButton"
             class="btn btn-outline-primary"
diff --git a/src/app/submission/form/footer/submission-form-footer.component.html b/src/app/submission/form/footer/submission-form-footer.component.html
index f1162cea4de..78ca2ece4f4 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.html
+++ b/src/app/submission/form/footer/submission-form-footer.component.html
@@ -10,7 +10,7 @@
       <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
     </button>
   </div>
-  <div class="col text-right d-flex justify-content-end align-items-center">
+  <div class="col text-end d-flex justify-content-end align-items-center">
     <span *ngIf="(hasUnsavedModification | async) !== true && (processingSaveStatus | async) !== true && (processingDepositStatus | async) !== true">
       <i class="fas fa-check-circle"></i> {{'submission.general.info.saved' | translate}}
     </span>
@@ -23,7 +23,7 @@
         <div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
       </div>
     </div>
-    <div class="ml-2 space-children-mr">
+    <div class="ms-2 space-children-mr">
       <button type="button"
               class="btn btn-secondary"
               id="save"
@@ -58,8 +58,7 @@
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
     <h4 class="modal-title text-danger">{{'submission.general.discard.confirm.title' | translate}}</h4>
-    <button type="button" class="close" aria-label="Close" (click)="d('cancel')">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close" aria-label="Close" (click)="d('cancel')">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/submission/form/submission-form.component.html b/src/app/submission/form/submission-form.component.html
index 17e863d4350..27b1c0c545d 100644
--- a/src/app/submission/form/submission-form.component.html
+++ b/src/app/submission/form/submission-form.component.html
@@ -19,7 +19,7 @@
             </ds-submission-form-collection>
           </ng-container>
         </div>
-        <div class="submission-form-header-item text-right">
+        <div class="submission-form-header-item text-end">
             <ds-submission-form-section-add [collectionId]="collectionId"
                                             [submissionId]="submissionId">
             </ds-submission-form-section-add>
diff --git a/src/app/submission/form/submission-form.component.scss b/src/app/submission/form/submission-form.component.scss
index c5e142b89c1..772849791ca 100644
--- a/src/app/submission/form/submission-form.component.scss
+++ b/src/app/submission/form/submission-form.component.scss
@@ -22,7 +22,7 @@
   font-weight: $font-weight-normal;
   color: $link-color;
   text-decoration: $link-decoration;
-  @include hover {
+  &:hover {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
diff --git a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
index e2b769295a9..234fbe92338 100644
--- a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
+++ b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.select.collection.head' | translate}}
-    <button type="button" class="close" (click)="closeCollectionModal()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="closeCollectionModal()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.scss b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.scss
index 1a70081367a..5a3c2bd9c69 100644
--- a/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.scss
+++ b/src/app/submission/import-external/import-external-collection/submission-import-external-collection.component.scss
@@ -1,3 +1,3 @@
-.close:focus {
+.btn-close:focus {
   outline: none !important;
 }
diff --git a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
index beecd68d700..b386f3c8cbe 100644
--- a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
+++ b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
@@ -1,8 +1,7 @@
 <div class="modal-header">
   <h2>{{'submission.import-external.preview.title.' + labelPrefix | translate}}</h2>
-  <button type="button" class="close"
+  <button type="button" class="btn-close"
           (click)="closeMetadataModal()" aria-label="Close">
-      <span aria-hidden="true">×</span>
   </button>
 </div>
 <div class="modal-body">
@@ -31,7 +30,7 @@ <h2>{{'submission.import-external.preview.title.' + labelPrefix | translate}}</h
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12 text-right">
+      <div class="col-md-12 text-end">
         <button class="btn btn-success" (click)="import()" role="button">
           <i class="fa fa-file-import" aria-hidden="true"></i> {{'submission.import-external.preview.button.import' | translate}}
         </button>
diff --git a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.scss b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.scss
index 1a70081367a..5a3c2bd9c69 100644
--- a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.scss
+++ b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.scss
@@ -1,3 +1,3 @@
-.close:focus {
+.btn-close:focus {
   outline: none !important;
 }
diff --git a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
index 7b5a2004d71..57c17c4c2a0 100644
--- a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
+++ b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
@@ -1,5 +1,6 @@
 <div *ngIf="(isXsOrSm$ | async)" class="input-group mb-2">
-  <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
+    <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}"
+           [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
 </div>
 <div class="input-group mb-5">
   <input *ngIf="(isXsOrSm$ | async) !== true" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
@@ -19,10 +20,13 @@
         [infiniteScrollThrottle]="50"
         (scrolled)="onScroll()"
         [scrollWindow]="false">
-        <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)" *ngFor="let source of sourceList">{{'submission.import-external.source.' + source?.name | translate}}</button>
+            <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)"
+                    *ngFor="let source of sourceList">{{ 'submission.import-external.source.' + source?.name | translate }}
+            </button>
         <div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
-      </li>
+        </li>
     </ul>
-    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''" [disabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
-  </div>
+    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''"
+            [disabled]="searchString === ''" (click)="search()">{{ 'submission.import-external.search.button' | translate }}
+    </button>
 </div>
diff --git a/src/app/submission/sections/accesses/section-accesses.model.ts b/src/app/submission/sections/accesses/section-accesses.model.ts
index 6b4732b881d..2967971b834 100644
--- a/src/app/submission/sections/accesses/section-accesses.model.ts
+++ b/src/app/submission/sections/accesses/section-accesses.model.ts
@@ -18,7 +18,7 @@ export const ACCESS_FORM_CHECKBOX_CONFIG: DynamicCheckboxModelConfig = {
 export const ACCESS_FORM_CHECKBOX_LAYOUT = {
 
   element: {
-    container: 'custom-control custom-checkbox pl-1',
+    container: 'custom-control custom-checkbox ps-1',
     control: 'custom-control-input',
     label: 'custom-control-label pt-1',
   },
@@ -31,9 +31,9 @@ export const ACCESS_CONDITION_GROUP_CONFIG: DynamicFormGroupModelConfig = {
 
 export const ACCESS_CONDITION_GROUP_LAYOUT: DynamicFormControlLayout = {
   element: {
-    host: 'form-group access-condition-group col',
-    container: 'pl-1 pr-1',
-    control: 'form-row ',
+    host: 'mb-3 access-condition-group col',
+    container: 'ps-1 pe-1',
+    control: 'row ',
   },
 };
 
@@ -43,7 +43,7 @@ export const ACCESS_CONDITIONS_FORM_ARRAY_CONFIG: DynamicFormArrayModelConfig =
 };
 export const ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT: DynamicFormControlLayout = {
   grid: {
-    group: 'form-row pt-4',
+    group: 'row pt-4',
   },
 };
 
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
index 0c8c1abeeb2..3ee981b2fff 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -40,11 +40,11 @@
        class="mb-4">
 
     <div class="d-flex flex-row">
-      <div class="font-weight-bold {{ field.id }}">
+      <div class="fw-bold {{ field.id }}">
         {{ field.label }}
       </div>
       <button
-        class="btn btn-outline-info btn-sm ml-2"
+        class="btn btn-outline-info btn-sm ms-2"
         (click)="openInfoModal(infoModal)">
         <i class="fas fa-question"></i>
       </button>
@@ -61,9 +61,8 @@ <h4>
             </h4>
             <div [innerHTML]="field.description"></div>
           </div>
-          <button type="button" class="close"
+          <button type="button" class="btn-close"
                   (click)="closeInfoModal()" aria-label="Close">
-            <span aria-hidden="true">×</span>
           </button>
         </div>
 
@@ -73,7 +72,7 @@ <h4>
             <h5>
               {{ value.label }}
             </h5>
-            <div [innerHTML]="value.description" class="font-weight-light"></div>
+            <div [innerHTML]="value.description" class="fw-light"></div>
           </div>
         </div>
 
@@ -107,7 +106,7 @@ <h5>
         <div (click)="selectOption(getSelectedCcLicense(), field, option)">
           <input type="radio"
                  title="{{ option.label }}"
-                 class="mr-1"
+                 class="me-1"
                  [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
           <span>{{ option.label }}</span>
         </div>
@@ -134,7 +133,7 @@ <h5>
       <div class="m-2">
         <div (click)="setAccepted(!accepted)">
           <input type="checkbox"
-                 class="mr-2"
+                 class="me-2"
                  title="accepted"
                  [checked]="accepted">
           <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
diff --git a/src/app/submission/sections/container/section-container.component.html b/src/app/submission/sections/container/section-container.component.html
index 3f0050ea51a..4f76af8c4c5 100644
--- a/src/app/submission/sections/container/section-container.component.html
+++ b/src/app/submission/sections/container/section-container.component.html
@@ -1,37 +1,31 @@
 <div dsSection #sectionRef="sectionRef" [attr.id]="'section_' + sectionData.id"
+  class="mb-2"
   [ngClass]="{ 'section-focus' : sectionRef.isSectionActive() }" [mandatory]="sectionData.mandatory"
   [submissionId]="submissionId" [sectionType]="sectionData.sectionType" [sectionId]="sectionData.id">
   <ngb-accordion #acc="ngbAccordion" *ngIf="(sectionRef.isEnabled() | async)"
     (panelChange)="sectionRef.sectionChange($event)" activeIds="{{ sectionData.id }}" [destroyOnHide]="false">
     <ngb-panel id="{{ sectionData.id }}" [type]="sectionRef.isInfo() ? 'info' : ''">
-      <ng-template ngbPanelTitle>
-        <span [ngClass]="{ 'text-white' : sectionRef.isInfo()}" class="float-left section-title" tabindex="0">{{
+      <ng-template ngbPanelTitle class="d-flex">
+        <span [ngClass]="{ 'text-white' : sectionRef.isInfo()}" class="flex-grow-1 section-title" tabindex="0">{{
           'submission.sections.'+sectionData.header | translate
           }}</span>
-        <div class="d-inline-block float-right">
+        <div class="d-inline-block">
           <i *ngIf="(sectionRef.isValid() | async) !== true && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
-            class="fas fa-exclamation-circle text-warning mr-3"
+            class="fas fa-exclamation-circle text-warning me-3"
             title="{{'submission.sections.status.warnings.title' | translate}}" role="img"
             [attr.aria-label]="'submission.sections.status.warnings.aria' | translate"></i>
           <i *ngIf="(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
-            class="fas fa-exclamation-circle text-danger mr-3"
+            class="fas fa-exclamation-circle text-danger me-3"
             title="{{'submission.sections.status.errors.title' | translate}}" role="img"
             [attr.aria-label]="'submission.sections.status.errors.aria' | translate"></i>
           <i *ngIf="(sectionRef.isValid() | async) && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
-            class="fas fa-check-circle text-success mr-3"
+            class="fas fa-check-circle text-success me-3"
             title="{{'submission.sections.status.valid.title' | translate}}" role="img"
             [attr.aria-label]="'submission.sections.status.valid.aria' | translate"></i>
-          <i *ngIf="sectionRef.isInfo()" class="fas fa-info-circle mr-3 text-white"
+          <i *ngIf="sectionRef.isInfo()" class="fas fa-info-circle me-3 text-white"
             title="{{'submission.sections.status.info.title' | translate}}" role="img"
             [attr.aria-label]="'submission.sections.status.info.aria' | translate"></i>
-          <a class="close" tabindex="0" role="button"
-            [attr.aria-label]="(sectionRef.isOpen() ? 'submission.sections.toggle.aria.close' : 'submission.sections.toggle.aria.open') | translate: {sectionHeader: ('submission.sections.'+sectionData.header | translate)}"
-            [title]="(sectionRef.isOpen() ? 'submission.sections.toggle.close' : 'submission.sections.toggle.open') | translate">
-            <span *ngIf="sectionRef.isOpen()" [ngClass]="{ 'text-white' : sectionRef.isInfo()}"
-              class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!sectionRef.isOpen()" class="fas fa-chevron-down fa-fw"></span>
-          </a>
-          <a href="javascript:void(0);" class="close mr-3" *ngIf="!sectionRef.isMandatory()"
+          <a href="javascript:void(0);" class="me-3" *ngIf="!sectionRef.isMandatory()"
             (click)="removeSection($event)">
             <i class="fas fa-trash-o" aria-hidden="true" tabindex="0"></i>
           </a>
diff --git a/src/app/submission/sections/license/section-license.model.ts b/src/app/submission/sections/license/section-license.model.ts
index 33f7721ac3d..43ed56d1fd9 100644
--- a/src/app/submission/sections/license/section-license.model.ts
+++ b/src/app/submission/sections/license/section-license.model.ts
@@ -3,7 +3,7 @@ export const SECTION_LICENSE_FORM_LAYOUT = {
 
   granted: {
     element: {
-      container: 'custom-control custom-checkbox pl-1',
+      container: 'custom-control custom-checkbox ps-1',
       control: 'custom-control-input',
       label: 'custom-control-label pt-1',
     },
diff --git a/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html b/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html
index 49742892caa..9f3110d9654 100644
--- a/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html
+++ b/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html
@@ -73,7 +73,7 @@
               </div>
               <button *ngIf="ldnServiceByPattern[ldnPattern.pattern].services.length > 1"
                       type="button" [class.mt-2]="serviceIndex > 0"
-                      class="btn btn-secondary ml-2"
+                      class="btn btn-secondary ms-2"
                       role="button"
                       title="{{'form.remove' | translate}}"
                       [attr.aria-label]="'form.remove' | translate"
@@ -102,8 +102,8 @@
               <div
                 class="alert alert-info w-100 d-flex align-items-center flex-row"
               >
-                <i class="fa-solid fa-circle-info fa-xl ml-2"></i>
-                <div class="ml-4">
+                <i class="fa-solid fa-circle-info fa-xl ms-2"></i>
+                <div class="ms-4">
                   <div>{{ 'submission.section.section-coar-notify.selection.description' | translate }}</div>
                   <div *ngIf="ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex]?.description; else noDesc">
                     {{ ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex].description }}
@@ -120,7 +120,7 @@
               <div
                 class="alert alert-danger w-100 d-flex align-items-center flex-row"
               >
-                <div class="ml-4">
+                <div class="ms-4">
               <span>
                 {{ 'submission.section.section-coar-notify.notification.error' | translate }}
               </span>
@@ -130,7 +130,7 @@
             <div class="row">
               <div *ngIf="ldnPattern.multipleRequest && (serviceIndex === ldnServiceByPattern[ldnPattern.pattern].services.length - 1)"
                    (click)="addNewService(ldnPattern)"
-                   class="btn btn-link mt-2 pl-0"
+                   class="btn btn-link mt-2 ps-0"
               >
                 <i class="fas fa-plus"></i>
                 {{ 'submission.sections.general.add-more' | translate }}
diff --git a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
index 3d4fba5cea0..74d69dfaf8a 100644
--- a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
+++ b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
@@ -1,7 +1,7 @@
 <div class="mb-3 border-bottom" data-test="collapse">
     <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
         <div class="d-flex">
-            <button type="button" class="btn btn-link p-0 mr-4" (click)="$event.preventDefault()"
+            <button type="button" class="btn btn-link p-0 me-4" (click)="$event.preventDefault()"
                 [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
                 {{version.articleVersion | titlecase}} {{ 'submission.sections.sherpa.publisher.policy.version' |
                 translate
@@ -16,7 +16,7 @@
                         'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</span>
                 </ng-template>
 
-                <span class="m-1 ml-4">
+                <span class="m-1 ms-4">
                     <i class="far fa-folder-open"></i>
                     <span *ngIf="!!version?.locations && version.locations.length > 0; else noLocations">
                         {{version.locations[0]}} <span
@@ -35,7 +35,7 @@
         </div>
     </div>
     <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
-        <div *ngIf="!!version" class="ml-4">
+        <div *ngIf="!!version" class="ms-4">
             <div class="row" *ngIf="!!version?.embargo && !!version?.embargo.amount">
                 <div class="col-4">
                     <p class="m-1"><i class="fas fa-hourglass-half"></i> {{
@@ -87,4 +87,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
index 15dd4d72867..36b9581182b 100644
--- a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
+++ b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
@@ -1,4 +1,4 @@
-<div class="ml-4">
+<div class="ms-4">
     <div class="row" *ngIf="!!metadata?.id">
         <div class="col-4">
             <p class="m-1">{{ 'submission.sections.sherpa.record.information.id' | translate }}</p>
@@ -36,4 +36,4 @@
             </p>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
index 534b95397e9..26da914ead8 100644
--- a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
+++ b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
@@ -1,4 +1,4 @@
-<div class="ml-4">
+<div class="ms-4">
     <div class="row" *ngIf="!!journal?.titles && journal.titles.length > 0">
         <div class="col-4">
             <p class="m-1">{{'submission.sections.sherpa.publication.information.title' | translate}}</p>
@@ -61,4 +61,4 @@
             </p>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
index 96e42202b3f..4e89a98aab6 100644
--- a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
+++ b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
@@ -1,4 +1,4 @@
-<div class="ml-4">
+<div class="ms-4">
     <ds-content-accordion *ngFor="let permittedVersions of policy.permittedVersions" [version]="permittedVersions">
     </ds-content-accordion>
     <div class="row" *ngIf="!!policy?.urls">
@@ -13,4 +13,4 @@
             </ul>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
index 4b636ee46eb..7b3da2d0207 100644
--- a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
+++ b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
@@ -6,7 +6,7 @@
     {{'submission.sections.sherpa.publisher.policy.description' | translate}}
   </ds-alert>
   <div>
-    <button type="button" class="btn btn-secondary float-right" (click)="refresh()" data-test="refresh-btn">
+    <button type="button" class="btn btn-secondary float-end" (click)="refresh()" data-test="refresh-btn">
       <span><i class="fas fa-sync"></i> {{'submission.sections.sherpa.publisher.policy.refresh' | translate}} </span>
     </button>
   </div>
diff --git a/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html b/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html
index f217abf88e3..ddfe3e27ce4 100644
--- a/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html
+++ b/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html
@@ -1,8 +1,8 @@
 <ng-container *ngFor="let accessCondition of accessConditionsList">
-  <span *ngIf="accessCondition.action === 'DEFAULT_BITSTREAM_READ'" class="badge badge-primary mt-3 mr-2">
+  <span *ngIf="accessCondition.action === 'DEFAULT_BITSTREAM_READ'" class="badge bg-primary mt-3 me-2">
     {{accessCondition.name}} {{accessCondition.startDate}} {{accessCondition.endDate}}
   </span>
-  <span *ngIf="accessCondition.name === 'lease'" class="badge badge-primary mt-3 mr-2">{{accessCondition.name}} from {{accessCondition.endDate}}</span>
-  <span *ngIf="accessCondition.name === 'embargo'" class="badge badge-dark mt-3 mr-2">{{accessCondition.name}} until {{accessCondition.startDate}}</span>
+  <span *ngIf="accessCondition.name === 'lease'" class="badge bg-primary mt-3 me-2">{{accessCondition.name}} from {{accessCondition.endDate}}</span>
+  <span *ngIf="accessCondition.name === 'embargo'" class="badge bg-dark mt-3 me-2">{{accessCondition.name}} until {{accessCondition.startDate}}</span>
   <br>
 </ng-container>
diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
index 0cb79e51cb0..e5275cd9bef 100644
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.html
@@ -1,8 +1,7 @@
 <div>
   <div class="modal-header">
     <h4 class="modal-title">{{'submission.sections.upload.edit.title' | translate}}</h4>
-    <button type="button" class="close" (click)="onModalClose()" aria-label="Close" [disabled]="isSaving">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close" [disabled]="isSaving">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts
index 4a39dfcfc8e..65d233081ca 100644
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.model.ts
@@ -15,7 +15,7 @@ export const BITSTREAM_METADATA_FORM_GROUP_CONFIG: DynamicFormGroupModelConfig =
 };
 export const BITSTREAM_METADATA_FORM_GROUP_LAYOUT: DynamicFormControlLayout = {
   element: {
-    container: 'form-group',
+    container: 'mb-3',
     label: 'col-form-label',
   },
   grid: {
@@ -29,9 +29,9 @@ export const BITSTREAM_ACCESS_CONDITION_GROUP_CONFIG: DynamicFormGroupModelConfi
 
 export const BITSTREAM_ACCESS_CONDITION_GROUP_LAYOUT: DynamicFormControlLayout = {
   element: {
-    host: 'form-group access-condition-group col',
-    container: 'pl-1 pr-1',
-    control: 'form-row ',
+    host: 'mb-3 access-condition-group col',
+    container: 'ps-1 pe-1',
+    control: 'row ',
   },
 };
 
@@ -41,7 +41,7 @@ export const BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_CONFIG: DynamicFormArrayMode
 };
 export const BITSTREAM_ACCESS_CONDITIONS_FORM_ARRAY_LAYOUT: DynamicFormControlLayout = {
   grid: {
-    group: 'form-row pt-4',
+    group: 'row pt-4',
   },
 };
 
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.html b/src/app/submission/sections/upload/file/section-upload-file.component.html
index 4698fdf68a6..d23de68a7a0 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.html
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.html
@@ -17,10 +17,10 @@
       </div>
     </div>
     <div class="col-md-10">
-      <div class="float-left w-75">
+      <div class="float-start w-75">
         <ds-submission-section-upload-file-view [fileData]="fileData"></ds-submission-section-upload-file-view>
       </div>
-      <div class="float-right w-15">
+      <div class="float-end w-15">
         <ng-container>
           <ds-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true"
                                         [bitstream]="getBitstream()" [enableRequestACopy]="false">
@@ -37,8 +37,8 @@
                   title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
                   [disabled]="(processingDelete$ | async)"
                   (click)="$event.preventDefault();confirmDelete(content);">
-            <i *ngIf="(processingDelete$ | async)" class="fas fa-circle-notch fa-spin fa-2x text-danger"></i>
-            <i *ngIf="(processingDelete$ | async) !== true" class="fa fa-trash fa-2x text-danger"></i>
+            <i *ngIf="(processingDelete$ | async)" class="fas fa-circle-notch fa-spin fa-2x link-danger"></i>
+            <i *ngIf="(processingDelete$ | async) !== true" class="fa fa-trash fa-2x link-danger"></i>
           </button>
         </ng-container>
       </div>
@@ -50,8 +50,7 @@
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
     <h4 class="modal-title text-danger">{{ 'submission.sections.upload.delete.confirm.title' | translate }}</h4>
-    <button type="button" class="close" aria-label="Close" (click)="d('cancel')">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close" aria-label="Close" (click)="d('cancel')">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/app/suggestions-page/suggestions-page.component.html b/src/app/suggestions-page/suggestions-page.component.html
index 45bdff32bf5..1fe3ffb4cea 100644
--- a/src/app/suggestions-page/suggestions-page.component.html
+++ b/src/app/suggestions-page/suggestions-page.component.html
@@ -12,7 +12,7 @@ <h1>
             </h1>
 
             <div class="mb-3 mt-3">
-              <button class="btn mr-2 btn-light" (click)="onToggleSelectAll(suggestionsRD.page)">Select / Deselect All</button>
+              <button class="btn me-2 btn-light" (click)="onToggleSelectAll(suggestionsRD.page)">Select / Deselect All</button>
               <em>({{ getSelectedSuggestionsCount() }})</em>
               <ds-suggestion-actions *ngIf="getSelectedSuggestionsCount() > 0"
                                       class="m-2"
diff --git a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
index c2c1942cdd3..102987a9dd2 100644
--- a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
+++ b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="(systemWideAlert$ |async)?.active">
     <div class="rounded-0 alert alert-warning w100 m-0 px-1">
         <div class="container">
-            <span class="font-weight-bold">
+            <span class="fw-bold">
                 <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
                     {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
                 </span>
@@ -18,4 +18,4 @@
             <span [innerHTML]="(systemWideAlert$ |async)?.message"></span>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
index 770f465a4bc..0256d9f9680 100644
--- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
+++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
@@ -1,7 +1,7 @@
 <div class="container">
     <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
     <div [formGroup]="alertForm" [class]="'ng-invalid'">
-        <div class="form-group">
+        <div class="mb-3">
             <div class="row mb-2">
                 <div class="col">
                     <ui-switch [checkedLabel]="'system-wide-alert.form.label.active' | translate"
@@ -11,7 +11,7 @@ <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
             </div>
             <div class="row">
                 <div class="col">
-                    <label for="formMessage">{{ 'system-wide-alert.form.label.message' | translate }}</label>
+                    <label class="form-label" for="formMessage">{{ 'system-wide-alert.form.label.message' | translate }}</label>
                     <textarea id="formMessage" rows="5"
                         [className]="(formMessage.invalid) && (formMessage.dirty || formMessage.touched) ? 'form-control is-invalid' :'form-control'"
                         formControlName="formMessage">
@@ -30,7 +30,7 @@ <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
         <div class="col mb-2 d-flex align-items-end">
             <ui-switch size="small" [ariaLabel]="'system-wide-alert.form.label.countdownTo.enable' | translate"
                 [checked]="counterEnabled$ |async" (change)="setCounterEnabled($event)"></ui-switch>
-            <span class="ml-2">{{ 'system-wide-alert.form.label.countdownTo.enable' | translate }}</span>
+            <span class="ms-2">{{ 'system-wide-alert.form.label.countdownTo.enable' | translate }}</span>
         </div>
     </div>
     <div *ngIf="counterEnabled$ |async">
@@ -62,11 +62,11 @@ <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
     <div *ngIf="formMessage.value">
         <div class="row">
             <div class="col">
-                <label>{{ 'system-wide-alert.form.label.preview' | translate}}</label>
+                <label class="form-label">{{ 'system-wide-alert.form.label.preview' | translate }}</label>
             </div>
         </div>
         <div class="rounded-0 alert alert-warning">
-            <span class="font-weight-bold">
+            <span class="fw-bold">
                 <span *ngIf="previewDays > 0 || previewHours > 0 || previewMinutes > 0 ">
                     {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
                 </span>
@@ -83,7 +83,7 @@ <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
             <span [innerHTML]="formMessage.value"></span>
         </div>
     </div>
-    <div class="btn-row float-right space-children-mr mt-2">
+    <div class="btn-row float-end space-children-mr mt-2">
         <button (click)="back()" class="btn btn-outline-secondary">
             <i class="fas fa-arrow-left"></i> {{ 'system-wide-alert.form.cancel' | translate }}
         </button>
@@ -91,4 +91,4 @@ <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
             <i class="fa fa-save"></i> {{ 'system-wide-alert.form.save' | translate }}
         </button>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html b/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html
index aca9b4da73b..bd2ec5115b7 100644
--- a/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html
+++ b/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html
@@ -7,7 +7,7 @@
   </p>
 
   <form (ngSubmit)="performAction()" *ngIf="ratingForm" [formGroup]="ratingForm">
-    <div class="form-group">
+    <div class="mb-3">
       <label class="control-label">
         <span>{{ 'advanced-workflow-action.rating.form.review.label' | translate }}</span>
         <span *ngIf="advancedInfo?.descriptionRequired">*</span>
@@ -20,7 +20,7 @@
       </small>
     </div>
 
-    <div class="form-group">
+    <div class="mb-3">
       <label class="control-label mb-1">
         {{ 'advanced-workflow-action.rating.form.rating.label' | translate }}*
       </label>
diff --git a/src/app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component.html b/src/app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component.html
index 75c265b4200..059d3b7e3bc 100644
--- a/src/app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component.html
+++ b/src/app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component.html
@@ -8,8 +8,7 @@ <h1>{{ 'workspace-item.delete.header' | translate }}</h1>
 <ng-template #content let-c="close" let-d="dismiss" id="delete-modal">
   <div class="modal-header">
     <div class="modal-title text-danger h4">{{ 'workspace-item.delete.header' | translate }}</div>
-    <button type="button" id="delete_close" class="close" aria-label="Close" (click)="d('cancel')">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" id="delete_close" class="btn-close" aria-label="Close" (click)="d('cancel')">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 386b4b47fe3..fc470e44909 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -26,8 +26,6 @@ $h6-font-size: $font-size-base !default;
 
 /*** BOOTSTRAP OPTIONS ***/
 
-// enable-responsive-font-sizes allows text to scale more naturally across device and viewport sizes
-$enable-responsive-font-sizes: true !default;
 $enable-shadows: true !default;
 
 
@@ -43,20 +41,38 @@ $danger:    #cf4444 !default;               // Red
 $light:     #f8f9fa !default;               // As Bootstrap $gray-100
 $dark:      darken(#2b4e72, 17%) !default;  // Blue gray (darker)
 
+// Add new semantic colors here (you don't need to add existing semantic colors)
+$global-custom-semantic-colors: (
+);
 
 /*** OTHER BOOTSTRAP VARIABLES ***/
 
-$link-color: #1F7293 !default;
+$link-color: $info !default;
 $link-hover-color: darken($link-color, 15%) !default;
 
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold: 165 !default;
 
 $navbar-dark-color: rgba(white, .5) !default;
 $navbar-light-color: rgba(black, .5) !default;
 $navbar-dark-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox='0+0+30+30'+xmlns='http://www.w3.org/2000/svg'><path+stroke='#{$navbar-dark-color}'+stroke-width='2'+stroke-linecap='round'+stroke-miterlimit='10'+d='M4+7h22M4+15h22M4+23h22'/></svg>") !default;
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,<svg+viewBox='0+0+30+30'+xmlns='http://www.w3.org/2000/svg'><path+stroke='#{$navbar-light-color}'+stroke-width='2'+stroke-linecap='round'+stroke-miterlimit='10'+d='M4+7h22M4+15h22M4+23h22'/></svg>") !default;
 
+$min-contrast-ratio: 2 !default;
+
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+$pagination-disabled-bg: white;
+
+$icon-font-family: "Font Awesome 6 Free"; /* Define the font-family for icons */
+
+$border-radius: 0.25em;
+
+$bs-border-radius-lg: 0.3rem;
+
+$badge-padding-x: 0.4em;
+$badge-padding-y: 0.25em;
+
+$primary-bg-subtle: $light !default;
 
 /*** CUSTOM DSPACE VARIABLES ***/
 
@@ -101,3 +117,4 @@ $ds-danger-bg: #{lighten($danger, 30%)} !default;
 // Starting this url with a caret (^) allows it to be a relative path based on UI's deployment path
 // See https://github.com/angular/angular-cli/issues/12797#issuecomment-598534241
 $fa-font-path: "^assets/fonts" !default;
+
diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
index 5a64be7e2a5..c028c307f86 100644
--- a/src/styles/_bootstrap_variables_mapping.scss
+++ b/src/styles/_bootstrap_variables_mapping.scss
@@ -6,821 +6,58 @@
   // Variables should follow the `$component-state-property-size` formula for
   // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
-  // Color system
-  --bs-white: #{$white};
-  --bs-gray-100: #{$gray-100};
-  --bs-gray-200: #{$gray-200};
-  --bs-gray-300: #{$gray-300};
-  --bs-gray-400: #{$gray-400};
-  --bs-gray-500: #{$gray-500};
-  --bs-gray-600: #{$gray-600};
-  --bs-gray-700: #{$gray-700};
-  --bs-gray-800: #{$gray-800};
-  --bs-gray-900: #{$gray-900};
-  --bs-black: #{$black};
-  --bs-blue: #{$blue};
-  --bs-indigo: #{$indigo};
-  --bs-purple: #{$purple};
-  --bs-pink: #{$pink};
-  --bs-red: #{$red};
-  --bs-orange: #{$orange};
-  --bs-yellow: #{$yellow};
-  --bs-green: #{$green};
-  --bs-teal: #{$teal};
-  --bs-cyan: #{$cyan};
-  --bs-primary: #{$primary};
-  --bs-secondary: #{$secondary};
-  --bs-success: #{$success};
-  --bs-info: #{$info};
-  --bs-warning: #{$warning};
-  --bs-danger: #{$danger};
-  --bs-light: #{$light};
-  --bs-dark: #{$dark};
+  // Bootstrap already maps many SCSS variables to CSS variables (for example the color system)
 
+  --bs-xl: #{map-get($grid-breakpoints, xl)};
+  --bs-md: #{map-get($grid-breakpoints, md)};
+  --bs-lg: #{map-get($grid-breakpoints, lg)};
+  --bs-sm: #{map-get($grid-breakpoints, sm)};
 
-  // Set a specific jump point for requesting color jumps
-  --bs-theme-color-interval: #{$theme-color-interval};
-
-  // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-  --bs-yiq-contrasted-threshold: #{$yiq-contrasted-threshold};
-
-  // Customize the light and dark text colors for use in our YIQ color contrast function.
-  --bs-yiq-text-dark: #{$yiq-text-dark};
-  --bs-yiq-text-light: #{$yiq-text-light};
-
-
-  // Options
-  //
-  // Quickly modify global styling by enabling or disabling optional features.
-  --bs-enable-caret: #{$enable-caret};
-  --bs-enable-rounded: #{$enable-rounded};
-  --bs-enable-shadows: #{$enable-shadows};
-  --bs-enable-gradients: #{$enable-gradients};
-  --bs-enable-transitions: #{$enable-transitions};
-  --bs-enable-prefers-reduced-motion-media-query: #{$enable-prefers-reduced-motion-media-query};
-  --bs-enable-grid-classes: #{$enable-grid-classes};
-  --bs-enable-pointer-cursor-for-buttons: #{$enable-pointer-cursor-for-buttons};
-  --bs-enable-print-styles: #{$enable-print-styles};
-  --bs-enable-responsive-font-sizes: #{$enable-responsive-font-sizes};
-  --bs-enable-validation-icons: #{$enable-validation-icons};
-  --bs-enable-deprecation-messages: #{$enable-deprecation-messages};
   --bs-spacer: #{$spacer};
-  --bs-spacer-0: #{map-get($spacers, 0)};
-  --bs-spacer-1: #{map-get($spacers, 1)};
-  --bs-spacer-2: #{map-get($spacers, 2)};
-  --bs-spacer-3: #{map-get($spacers, 3)};
-  --bs-spacer-4: #{map-get($spacers, 4)};
-  --bs-spacer-5: #{map-get($spacers, 5)};
-  --bs-sizes-25: #{map-get($sizes, 25)};
-  --bs-sizes-50: #{map-get($sizes, 50)};
-  --bs-sizes-75: #{map-get($sizes, 75)};
-  --bs-sizes-100: #{map-get($sizes, 100)};
-  --bs-sizes-auto: #{map-get($sizes, auto)};
-
-  // Body
-  //
-  // Settings for the `<body>` element.
-  --bsbody-bg: #{$body-bg};
-  --bs-body-color: #{$body-color};
-
-
-  // Links
-  //
-  // Style anchor elements.
-  --bs-link-color: #{$link-color};
-  --bs-link-decoration: #{$link-decoration};
-  --bs-link-hover-color: #{$link-hover-color};
-  --bs-link-hover-decoration: #{$link-hover-decoration};
-  // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
-  --bs-emphasized-link-hover-darken-percentage: #{$emphasized-link-hover-darken-percentage};
-
-  // Paragraphs
-  //
-  // Style p element.
-  --bs-paragraph-margin-bottom: #{$paragraph-margin-bottom};
-
-
-  // Grid breakpoints
-  //
-  // Define the minimum dimensions at which your layout will change,
-  // adapting to different screen sizes, for use in media queries.
-
-  --bs-xs-min: #{map-get($grid-breakpoints, xs)};
-  --bs-sm-min: #{map-get($grid-breakpoints, sm)};
-  --bs-md-min: #{map-get($grid-breakpoints, md)};
-  --bs-lg-min: #{map-get($grid-breakpoints, lg)};
-  --bs-xl-min: #{map-get($grid-breakpoints, xl)};
-
-  --bs-xs-max: #{map-get($container-max-widths, xs)};
-  --bs-sm-max: #{map-get($container-max-widths, sm)};
-  --bs-md-max: #{map-get($container-max-widths, md)};
-  --bs-lg-max: #{map-get($container-max-widths, lg)};
-  --bs-xl-max: #{map-get($container-max-widths, xl)};
-
-  // Grid columns
-  //
-  // Set the number of columns and specify the width of the gutters.
-  --bs-grid-columns: #{$grid-columns};
-  --bs-grid-gutter-width: #{$grid-gutter-width};
 
+  --bs-navbar-dark-active-color: #{$navbar-dark-active-color};
+  --bs-navbar-dark-color: #{$navbar-dark-color};
 
-  // Components
-  //
-  // Define common padding and border radius sizes and more.
-  --bs-line-height-lg: #{$line-height-lg};
-  --bs-line-height-sm: #{$line-height-sm};
-  --bs-border-width: #{$border-width};
-  --bs-border-color: #{$border-color};
-  --bs-border-radius: #{$border-radius};
-  --bs-border-radius-lg: #{$border-radius-lg};
-  --bs-border-radius-sm: #{$border-radius-sm};
-  --bs-rounded-pill: #{$rounded-pill};
-  --bs-box-shadow-sm: #{$box-shadow-sm};
-  --bs-box-shadow: #{$box-shadow};
-  --bs-box-shadow-lg: #{$box-shadow-lg};
-  --bs-component-active-color: #{$component-active-color};
-  --bs-component-active-bg: #{$component-active-bg};
-  --bs-caret-width: #{$caret-width};
-  --bs-caret-vertical-align: #{$caret-vertical-align};
-  --bs-caret-spacing: #{$caret-spacing};
-  --bs-transition-base: #{$transition-base};
-  --bs-transition-fade: #{$transition-fade};
-  --bs-transition-collapse: #{$transition-collapse};
+  --bs-line-height-base: #{$line-height-base};
 
-  --bs-font-family-sans-serif: #{$font-family-sans-serif};
-  --bs-font-family-monospace: #{$font-family-monospace};
-  --bs-font-family-base: #{$font-family-base};
-  // stylelint-enable value-keyword-case
   --bs-font-size-base: #{$font-size-base};
   --bs-font-size-lg: #{$font-size-lg};
-  --bs-font-size-sm: #{$font-size-sm};
-  --bs-font-weight-lighter: #{$font-weight-lighter};
-  --bs-font-weight-light: #{$font-weight-light};
-  --bs-font-weight-normal: #{$font-weight-normal};
-  --bs-font-weight-bold: #{$font-weight-bold};
-  --bs-font-weight-bolder: #{$font-weight-bolder};
-  --bs-font-weight-base: #{$font-weight-base};
-  --bs-line-height-base: #{$line-height-base};
-  --bs-h1-font-size: #{$h1-font-size};
-  --bs-h2-font-size: #{$h2-font-size};
-  --bs-h3-font-size: #{$h3-font-size};
-  --bs-h4-font-size: #{$h4-font-size};
-  --bs-h5-font-size: #{$h5-font-size};
-  --bs-h6-font-size: #{$h6-font-size};
-  --bs-headings-margin-bottom: #{$headings-margin-bottom};
-  --bs-headings-font-family: #{$headings-font-family};
-  --bs-headings-font-weight: #{$headings-font-weight};
-  --bs-headings-line-height: #{$headings-line-height};
-  --bs-headings-color: #{$headings-color};
-  --bs-display1-size: #{$display1-size};
-  --bs-display2-size: #{$display2-size};
-  --bs-display3-size: #{$display3-size};
-  --bs-display4-size: #{$display4-size};
-  --bs-display1-weight: #{$display1-weight};
-  --bs-display2-weight: #{$display2-weight};
-  --bs-display3-weight: #{$display3-weight};
-  --bs-display4-weight: #{$display4-weight};
-  --bs-display-line-height: #{$display-line-height};
-  --bs-lead-font-size: #{$lead-font-size};
-  --bs-lead-font-weight: #{$lead-font-weight};
-  --bs-small-font-size: #{$small-font-size};
-  --bs-text-muted: #{$text-muted};
-  --bs-blockquote-small-color: #{$blockquote-small-color};
-  --bs-blockquote-small-font-size: #{$blockquote-small-font-size};
-  --bs-blockquote-font-size: #{$blockquote-font-size};
-  --bs-hr-border-color: #{$hr-border-color};
-  --bs-hr-border-width: #{$hr-border-width};
-  --bs-mark-padding: #{$mark-padding};
-  --bs-dt-font-weight: #{$dt-font-weight};
-  --bs-kbd-box-shadow: #{$kbd-box-shadow};
-  --bs-nested-kbd-font-weight: #{$nested-kbd-font-weight};
-  --bs-list-inline-padding: #{$list-inline-padding};
-  --bs-mark-bg: #{$mark-bg};
-  --bs-hr-margin-y: #{$hr-margin-y};
 
-
-  // Tables
-  //
-  // Customizes the `.table` component with basic values, each used across all table variations.
-  --bs-table-cell-padding: #{$table-cell-padding};
-  --bs-table-cell-padding-sm: #{$table-cell-padding-sm};
-  --bs-table-color: #{$table-color};
-  --bs-table-bg: #{$table-bg};
-  --bs-table-accent-bg: #{$table-accent-bg};
-  --bs-table-hover-color: #{$table-hover-color};
-  --bs-table-hover-bg: #{$table-hover-bg};
-  --bs-table-active-bg: #{$table-active-bg};
-  --bs-table-border-width: #{$table-border-width};
-  --bs-table-border-color: #{$table-border-color};
-  --bs-table-head-bg: #{$table-head-bg};
-  --bs-table-head-color: #{$table-head-color};
-  --bs-table-dark-color: #{$table-dark-color};
-  --bs-table-dark-bg: #{$table-dark-bg};
-  --bs-table-dark-accent-bg: #{$table-dark-accent-bg};
-  --bs-table-dark-hover-color: #{$table-dark-hover-color};
-  --bs-table-dark-hover-bg: #{$table-dark-hover-bg};
-  --bs-table-dark-border-color: #{$table-dark-border-color};
-  --bs-table-dark-color: #{$table-dark-color};
-  --bs-table-striped-order: #{$table-striped-order};
-  --bs-table-caption-color: #{$table-caption-color};
-  --bs-table-bg-level: #{$table-bg-level};
-  --bs-table-border-level: #{$table-border-level};
-
-
-  // Buttons + Forms
-  //
-  // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-  --bs-input-btn-padding-y: #{$input-btn-padding-y};
-  --bs-input-btn-padding-x: #{$input-btn-padding-x};
-  --bs-input-btn-font-family: #{$input-btn-font-family};
-  --bs-input-btn-font-size: #{$input-btn-font-size};
-  --bs-input-btn-line-height: #{$input-btn-line-height};
-  --bs-input-btn-focus-width: #{$input-btn-focus-width};
-  --bs-input-btn-focus-color: #{$input-btn-focus-color};
-  --bs-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
-  --bs-input-btn-padding-y-sm: #{$input-btn-padding-y-sm};
-  --bs-input-btn-padding-x-sm: #{$input-btn-padding-x-sm};
-  --bs-input-btn-font-size-sm: #{$input-btn-font-size-sm};
-  --bs-input-btn-line-height-sm: #{$input-btn-line-height-sm};
-  --bs-input-btn-padding-y-lg: #{$input-btn-padding-y-lg};
-  --bs-input-btn-padding-x-lg: #{$input-btn-padding-x-lg};
-  --bs-input-btn-font-size-lg: #{$input-btn-font-size-lg};
-  --bs-input-btn-line-height-lg: #{$input-btn-line-height-lg};
-  --bs-input-btn-border-width: #{$input-btn-border-width};
-
-
-  // Buttons
-  //
-  // For each of Bootstrap's buttons, define text, background, and border color.
-  --bs-btn-padding-y: #{$btn-padding-y};
-  --bs-btn-padding-x: #{$btn-padding-x};
-  --bs-btn-font-family: #{$btn-font-family};
-  --bs-btn-font-size: #{$btn-font-size};
-  --bs-btn-line-height: #{$btn-line-height};
-  --bs-btn-padding-y-sm: #{$btn-padding-y-sm};
-  --bs-btn-padding-x-sm: #{$btn-padding-x-sm};
-  --bs-btn-font-size-sm: #{$btn-font-size-sm};
-  --bs-btn-line-height-sm: #{$btn-line-height-sm};
-  --bs-btn-padding-y-lg: #{$btn-padding-y-lg};
-  --bs-btn-padding-x-lg: #{$btn-padding-x-lg};
-  --bs-btn-font-size-lg: #{$btn-font-size-lg};
-  --bs-btn-line-height-lg: #{$btn-line-height-lg};
-  --bs-btn-border-width: #{$btn-border-width};
-  --bs-btn-font-weight: #{$btn-font-weight};
-  --bs-btn-box-shadow: #{$btn-box-shadow};
-  --bs-btn-focus-width: #{$btn-focus-width};
-  --bs-btn-focus-box-shadow: #{$btn-focus-box-shadow};
-  --bs-btn-disabled-opacity: #{$btn-disabled-opacity};
-  --bs-btn-active-box-shadow: #{$btn-active-box-shadow};
   --bs-btn-link-disabled-color: #{$btn-link-disabled-color};
-  --bs-btn-block-spacing-y: #{$btn-block-spacing-y};
-
-  // Allows for customizing button radius independently from global border radius
-  --bs-btn-border-radius: #{$btn-border-radius};
-  --bs-btn-border-radius-lg: #{$btn-border-radius-lg};
-  --bs-btn-border-radius-sm: #{$btn-border-radius-sm};
-  --bs-btn-transition: #{$btn-transition};
 
-
-  // Forms
-  --bs-label-margin-bottom: #{$label-margin-bottom};
+  --bs-input-btn-border-width: #{$input-btn-border-width};
+  --bs-input-border-color: #{$input-border-color};
   --bs-input-padding-y: #{$input-padding-y};
   --bs-input-padding-x: #{$input-padding-x};
-  --bs-input-font-family: #{$input-font-family};
-  --bs-input-font-size: #{$input-font-size};
-  --bs-input-font-weight: #{$input-font-weight};
-  --bs-input-line-height: #{$input-line-height};
-  --bs-input-padding-y-sm: #{$input-padding-y-sm};
-  --bs-input-padding-x-sm: #{$input-padding-x-sm};
-  --bs-input-font-size-sm: #{$input-font-size-sm};
-  --bs-input-line-height-sm: #{$input-line-height-sm};
-  --bs-input-padding-y-lg: #{$input-padding-y-lg};
-  --bs-input-padding-x-lg: #{$input-padding-x-lg};
-  --bs-input-font-size-lg: #{$input-font-size-lg};
-  --bs-input-line-height-lg: #{$input-line-height-lg};
+  --bs-input-btn-focus-box-shadow: #{$input-btn-focus-box-shadow};
   --bs-input-bg: #{$input-bg};
-  --bs-input-disabled-bg: #{$input-disabled-bg};
   --bs-input-color: #{$input-color};
-  --bs-input-border-color: #{$input-border-color};
-  --bs-input-border-width: #{$input-border-width};
-  --bs-input-box-shadow: #{$input-box-shadow};
-  --bs-input-border-radius: #{$input-border-radius};
-  --bs-input-border-radius-lg: #{$input-border-radius-lg};
-  --bs-input-border-radius-sm: #{$input-border-radius-sm};
-  --bs-input-focus-bg: #{$input-focus-bg};
-  --bs-input-focus-border-color: #{$input-focus-border-color};
-  --bs-input-focus-color: #{$input-focus-color};
-  --bs-input-focus-width: #{$input-focus-width};
-  --bs-input-focus-box-shadow: #{$input-focus-box-shadow};
-  --bs-input-placeholder-color: #{$input-placeholder-color};
-  --bs-input-plaintext-color: #{$input-plaintext-color};
-  --bs-input-height-border: #{$input-height-border};
-  --bs-input-height-inner: #{$input-height-inner};
-  --bs-input-height-inner-half: #{$input-height-inner-half};
-  --bs-input-height-inner-quarter: #{$input-height-inner-quarter};
-  --bs-input-height: #{$input-height};
-  --bs-input-height-sm: #{$input-height-sm};
-  --bs-input-height-lg: #{$input-height-lg};
-  --bs-input-transition: #{$input-transition};
-  --bs-form-text-margin-top: #{$form-text-margin-top};
-  --bs-form-check-input-gutter: #{$form-check-input-gutter};
-  --bs-form-check-input-margin-y: #{$form-check-input-margin-y};
-  --bs-form-check-input-margin-x: #{$form-check-input-margin-x};
-  --bs-form-check-inline-margin-x: #{$form-check-inline-margin-x};
-  --bs-form-check-inline-input-margin-x: #{$form-check-inline-input-margin-x};
-  --bs-form-grid-gutter-width: #{$form-grid-gutter-width};
-  --bs-form-group-margin-bottom: #{$form-group-margin-bottom};
-  --bs-input-group-addon-color: #{$input-group-addon-color};
-  --bs-input-group-addon-bg: #{$input-group-addon-bg};
-  --bs-input-group-addon-border-color: #{$input-group-addon-border-color};
-  --bs-custom-forms-transition: #{$custom-forms-transition};
-  --bs-custom-control-gutter: #{$custom-control-gutter};
-  --bs-custom-control-spacer-x: #{$custom-control-spacer-x};
-  --bs-custom-control-indicator-size: #{$custom-control-indicator-size};
-  --bs-custom-control-indicator-bg: #{$custom-control-indicator-bg};
-  --bs-custom-control-indicator-bg-size: #{$custom-control-indicator-bg-size};
-  --bs-custom-control-indicator-box-shadow: #{$custom-control-indicator-box-shadow};
-  --bs-custom-control-indicator-border-color: #{$custom-control-indicator-border-color};
-  --bs-custom-control-indicator-border-width: #{$custom-control-indicator-border-width};
-  --bs-custom-control-indicator-disabled-bg: #{$custom-control-indicator-disabled-bg};
-  --bs-custom-control-label-disabled-color: #{$custom-control-label-disabled-color};
-  --bs-custom-control-indicator-checked-color: #{$custom-control-indicator-checked-color};
-  --bs-custom-control-indicator-checked-bg: #{$custom-control-indicator-checked-bg};
-  --bs-custom-control-indicator-checked-disabled-bg: #{$custom-control-indicator-checked-disabled-bg};
-  --bs-custom-control-indicator-checked-box-shadow: #{$custom-control-indicator-checked-box-shadow};
-  --bs-custom-control-indicator-checked-border-color: #{$custom-control-indicator-checked-border-color};
-  --bs-custom-control-indicator-focus-box-shadow: #{$custom-control-indicator-focus-box-shadow};
-  --bs-custom-control-indicator-focus-border-color: #{$custom-control-indicator-focus-border-color};
-  --bs-custom-control-indicator-active-color: #{$custom-control-indicator-active-color};
-  --bs-custom-control-indicator-active-bg: #{$custom-control-indicator-active-bg};
-  --bs-custom-control-indicator-active-box-shadow: #{$custom-control-indicator-active-box-shadow};
-  --bs-custom-control-indicator-active-border-color: #{$custom-control-indicator-active-border-color};
-  --bs-custom-checkbox-indicator-border-radius: #{$custom-checkbox-indicator-border-radius};
-  --bs-custom-checkbox-indicator-icon-checked: #{$custom-checkbox-indicator-icon-checked};
-  --bs-custom-checkbox-indicator-indeterminate-bg: #{$custom-checkbox-indicator-indeterminate-bg};
-  --bs-custom-checkbox-indicator-indeterminate-color: #{$custom-checkbox-indicator-indeterminate-color};
-  --bs-custom-checkbox-indicator-icon-indeterminate: #{$custom-checkbox-indicator-icon-indeterminate};
-  --bs-custom-checkbox-indicator-indeterminate-box-shadow: #{$custom-checkbox-indicator-indeterminate-box-shadow};
-  --bs-custom-checkbox-indicator-indeterminate-border-color: #{$custom-checkbox-indicator-indeterminate-border-color};
-  --bs-custom-radio-indicator-border-radius: #{$custom-radio-indicator-border-radius};
-  --bs-custom-radio-indicator-icon-checked: #{$custom-radio-indicator-icon-checked};
-  --bs-custom-switch-width: #{$custom-switch-width};
-  --bs-custom-switch-indicator-border-radius: #{$custom-switch-indicator-border-radius};
-  --bs-custom-switch-indicator-size: #{$custom-switch-indicator-size};
-  --bs-custom-select-padding-y: #{$custom-select-padding-y};
-  --bs-custom-select-padding-x: #{$custom-select-padding-x};
-  --bs-custom-select-font-family: #{$custom-select-font-family};
-  --bs-custom-select-font-size: #{$custom-select-font-size};
-  --bs-custom-select-height: #{$custom-select-height};
-  --bs-custom-select-indicator-padding: #{$custom-select-indicator-padding};
-  --bs-custom-select-font-weight: #{$custom-select-font-weight};
-  --bs-custom-select-line-height: #{$custom-select-line-height};
-  --bs-custom-select-color: #{$custom-select-color};
-  --bs-custom-select-disabled-color: #{$custom-select-disabled-color};
-  --bs-custom-select-bg: #{$custom-select-bg};
-  --bs-custom-select-disabled-bg: #{$custom-select-disabled-bg};
-  --bs-custom-select-bg-size: #{$custom-select-bg-size};
-  --bs-custom-select-indicator-color: #{$custom-select-indicator-color};
-  --bs-custom-select-indicator: #{$custom-select-indicator};
-  --bs-custom-select-background: #{$custom-select-background};
-  --bs-custom-select-feedback-icon-padding-right: #{$custom-select-feedback-icon-padding-right};
-  --bs-custom-select-feedback-icon-position: #{$custom-select-feedback-icon-position};
-  --bs-custom-select-feedback-icon-size: #{$custom-select-feedback-icon-size};
-  --bs-custom-select-border-width: #{$custom-select-border-width};
-  --bs-custom-select-border-color: #{$custom-select-border-color};
-  --bs-custom-select-border-radius: #{$custom-select-border-radius};
-  --bs-custom-select-box-shadow: #{$custom-select-box-shadow};
-  --bs-custom-select-focus-border-color: #{$custom-select-focus-border-color};
-  --bs-custom-select-focus-width: #{$custom-select-focus-width};
-  --bs-custom-select-focus-box-shadow: #{$custom-select-focus-box-shadow};
-  --bs-custom-select-padding-y-sm: #{$custom-select-padding-y-sm};
-  --bs-custom-select-padding-x-sm: #{$custom-select-padding-x-sm};
-  --bs-custom-select-font-size-sm: #{$custom-select-font-size-sm};
-  --bs-custom-select-height-sm: #{$custom-select-height-sm};
-  --bs-custom-select-padding-y-lg: #{$custom-select-padding-y-lg};
-  --bs-custom-select-padding-x-lg: #{$custom-select-padding-x-lg};
-  --bs-custom-select-font-size-lg: #{$custom-select-font-size-lg};
-  --bs-custom-select-height-lg: #{$custom-select-height-lg};
-  --bs-custom-range-track-width: #{$custom-range-track-width};
-  --bs-custom-range-track-height: #{$custom-range-track-height};
-  --bs-custom-range-track-cursor: #{$custom-range-track-cursor};
-  --bs-custom-range-track-bg: #{$custom-range-track-bg};
-  --bs-custom-range-track-border-radius: #{$custom-range-track-border-radius};
-  --bs-custom-range-track-box-shadow: #{$custom-range-track-box-shadow};
-  --bs-custom-range-thumb-width: #{$custom-range-thumb-width};
-  --bs-custom-range-thumb-height: #{$custom-range-thumb-height};
-  --bs-custom-range-thumb-bg: #{$custom-range-thumb-bg};
-  --bs-custom-range-thumb-border: #{$custom-range-thumb-border};
-  --bs-custom-range-thumb-border-radius: #{$custom-range-thumb-border-radius};
-  --bs-custom-range-thumb-box-shadow: #{$custom-range-thumb-box-shadow};
-  --bs-custom-range-thumb-focus-box-shadow: #{$custom-range-thumb-focus-box-shadow};
-  --bs-custom-range-thumb-focus-box-shadow-width: #{$custom-range-thumb-focus-box-shadow-width};
-  --bs-custom-range-thumb-active-bg: #{$custom-range-thumb-active-bg};
-  --bs-custom-range-thumb-disabled-bg: #{$custom-range-thumb-disabled-bg};
-  --bs-custom-file-height: #{$custom-file-height};
-  --bs-custom-file-height-inner: #{$custom-file-height-inner};
-  --bs-custom-file-focus-border-color: #{$custom-file-focus-border-color};
-  --bs-custom-file-focus-box-shadow: #{$custom-file-focus-box-shadow};
-  --bs-custom-file-disabled-bg: #{$custom-file-disabled-bg};
-  --bs-custom-file-padding-y: #{$custom-file-padding-y};
-  --bs-custom-file-padding-x: #{$custom-file-padding-x};
-  --bs-custom-file-line-height: #{$custom-file-line-height};
-  --bs-custom-file-font-family: #{$custom-file-font-family};
-  --bs-custom-file-font-weight: #{$custom-file-font-weight};
-  --bs-custom-file-color: #{$custom-file-color};
-  --bs-custom-file-bg: #{$custom-file-bg};
-  --bs-custom-file-border-width: #{$custom-file-border-width};
-  --bs-custom-file-border-color: #{$custom-file-border-color};
-  --bs-custom-file-border-radius: #{$custom-file-border-radius};
-  --bs-custom-file-box-shadow: #{$custom-file-box-shadow};
-  --bs-custom-file-button-color: #{$custom-file-button-color};
-  --bs-custom-file-button-bg: #{$custom-file-button-bg};
-  //--bs-custom-file-text: #{$custom-file-text}; //mapping doesn't work
-
-
-  // Form validation
-  --bs-form-feedback-margin-top: #{$form-feedback-margin-top};
-  --bs-form-feedback-font-size: #{$form-feedback-font-size};
-  --bs-form-feedback-valid-color: #{$form-feedback-valid-color};
-  --bs-form-feedback-invalid-color: #{$form-feedback-invalid-color};
-  --bs-form-feedback-icon-valid-color: #{$form-feedback-icon-valid-color};
-  --bs-form-feedback-icon-valid: #{$form-feedback-icon-valid};
-  --bs-form-feedback-icon-invalid-color: #{$form-feedback-icon-invalid-color};
-  --bs-form-feedback-icon-invalid: #{$form-feedback-icon-invalid};
-  // Z-index master list
-  //
-  // Warning: Avoid customizing these values. They're used for a bird's eye view
-  // of components dependent on the z-axis and are designed to all work together.
-  --bs-zindex-dropdown: #{$zindex-dropdown};
-  --bs-zindex-sticky: #{$zindex-sticky};
-  --bs-zindex-fixed: #{$zindex-fixed};
-  --bs-zindex-modal-backdrop: #{$zindex-modal-backdrop};
-  --bs-zindex-modal: #{$zindex-modal};
-  --bs-zindex-popover: #{$zindex-popover};
-  --bs-zindex-tooltip: #{$zindex-tooltip};
-
-
-  // Navs
-  --bs-nav-link-padding-y: #{$nav-link-padding-y};
-  --bs-nav-link-padding-x: #{$nav-link-padding-x};
-  --bs-nav-link-disabled-color: #{$nav-link-disabled-color};
-  --bs-nav-tabs-border-color: #{$nav-tabs-border-color};
-  --bs-nav-tabs-border-width: #{$nav-tabs-border-width};
-  --bs-nav-tabs-border-radius: #{$nav-tabs-border-radius};
-  --bs-nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
-  --bs-nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
-  --bs-nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
-  --bs-nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
-  --bs-nav-pills-border-radius: #{$nav-pills-border-radius};
-  --bs-nav-pills-link-active-color: #{$nav-pills-link-active-color};
-  --bs-nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
-  --bs-nav-divider-color: #{$nav-divider-color};
-  --bs-nav-divider-margin-y: #{$nav-divider-margin-y};
 
+  --bs-table-border-width: #{$table-border-width};
 
-  // Navbar
-  --bs-navbar-padding-y: #{$navbar-padding-y};
-  --bs-navbar-padding-x: #{$navbar-padding-x};
-  --bs-navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
-  --bs-navbar-brand-font-size: #{$navbar-brand-font-size};
-  // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-  --bs-nav-link-height: #{$nav-link-height};
-  --bs-navbar-brand-height: #{$navbar-brand-height};
-  --bs-navbar-brand-padding-y: #{$navbar-brand-padding-y};
-  --bs-navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
-  --bs-navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
-  --bs-navbar-toggler-font-size: #{$navbar-toggler-font-size};
-  --bs-navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
-  --bs-navbar-dark-color: #{$navbar-dark-color};
-  --bs-navbar-dark-hover-color: #{$navbar-dark-hover-color};
-  --bs-navbar-dark-active-color: #{$navbar-dark-active-color};
-  --bs-navbar-dark-disabled-color: #{$navbar-dark-disabled-color};
-  --bs-navbar-dark-toggler-icon-bg: #{$navbar-dark-toggler-icon-bg};
-  --bs-navbar-dark-toggler-border-color: #{$navbar-dark-toggler-border-color};
-  --bs-navbar-light-color: #{$navbar-light-color};
-  --bs-navbar-light-hover-color: #{$navbar-light-hover-color};
-  --bs-navbar-light-active-color: #{$navbar-light-active-color};
-  --bs-navbar-light-disabled-color: #{$navbar-light-disabled-color};
-  --bs-navbar-light-toggler-icon-bg: #{$navbar-light-toggler-icon-bg};
-  --bs-navbar-light-toggler-border-color: #{$navbar-light-toggler-border-color};
-  --bs-navbar-light-brand-color: #{$navbar-light-brand-color};
-  --bs-navbar-light-brand-hover-color: #{$navbar-light-brand-hover-color};
-  --bs-navbar-dark-brand-color: #{$navbar-dark-brand-color};
-  --bs-navbar-dark-brand-hover-color: #{$navbar-dark-brand-hover-color};
-
-
-  // Dropdowns
-  //
-  // Dropdown menu container and contents.
-  --bs-dropdown-min-width: #{$dropdown-min-width};
-  --bs-dropdown-padding-y: #{$dropdown-padding-y};
-  --bs-dropdown-spacer: #{$dropdown-spacer};
-  --bs-dropdown-font-size: #{$dropdown-font-size};
-  --bs-dropdown-color: #{$dropdown-color};
-  --bs-dropdown-bg: #{$dropdown-bg};
-  --bs-dropdown-border-color: #{$dropdown-border-color};
-  --bs-dropdown-border-radius: #{$dropdown-border-radius};
-  --bs-dropdown-border-width: #{$dropdown-border-width};
-  --bs-dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
-  --bs-dropdown-divider-bg: #{$dropdown-divider-bg};
-  --bs-dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
-  --bs-dropdown-box-shadow: #{$dropdown-box-shadow};
-  --bs-dropdown-link-color: #{$dropdown-link-color};
-  --bs-dropdown-link-hover-color: #{$dropdown-link-hover-color};
-  --bs-dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
-  --bs-dropdown-link-active-color: #{$dropdown-link-active-color};
-  --bs-dropdown-link-active-bg: #{$dropdown-link-active-bg};
-  --bs-dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
-  --bs-dropdown-item-padding-y: #{$dropdown-item-padding-y};
-  --bs-dropdown-item-padding-x: #{$dropdown-item-padding-x};
-  --bs-dropdown-header-color: #{$dropdown-header-color};
-
-
-  // Pagination
-  --bs-pagination-padding-y: #{$pagination-padding-y};
-  --bs-pagination-padding-x: #{$pagination-padding-x};
-  --bs-pagination-padding-y-sm: #{$pagination-padding-y-sm};
-  --bs-pagination-padding-x-sm: #{$pagination-padding-x-sm};
-  --bs-pagination-padding-y-lg: #{$pagination-padding-y-lg};
-  --bs-pagination-padding-x-lg: #{$pagination-padding-x-lg};
-  --bs-pagination-line-height: #{$pagination-line-height};
-  --bs-pagination-color: #{$pagination-color};
-  --bs-pagination-bg: #{$pagination-bg};
-  --bs-pagination-border-width: #{$pagination-border-width};
-  --bs-pagination-border-color: #{$pagination-border-color};
-  --bs-pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
-  --bs-pagination-focus-outline: #{$pagination-focus-outline};
-  --bs-pagination-hover-color: #{$pagination-hover-color};
-  --bs-pagination-hover-bg: #{$pagination-hover-bg};
-  --bs-pagination-hover-border-color: #{$pagination-hover-border-color};
-  --bs-pagination-active-color: #{$pagination-active-color};
-  --bs-pagination-active-bg: #{$pagination-active-bg};
-  --bs-pagination-active-border-color: #{$pagination-active-border-color};
-  --bs-pagination-disabled-color: #{$pagination-disabled-color};
-  --bs-pagination-disabled-bg: #{$pagination-disabled-bg};
-  --bs-pagination-disabled-border-color: #{$pagination-disabled-border-color};
-
-
-  // Jumbotron
-  --bs-jumbotron-padding: #{$jumbotron-padding};
-  --bs-jumbotron-color: #{$jumbotron-color};
-  --bs-jumbotron-bg: #{$jumbotron-bg};
-
-
-  // Cards
-  --bs-card-spacer-y: #{$card-spacer-y};
-  --bs-card-spacer-x: #{$card-spacer-x};
-  --bs-card-border-width: #{$card-border-width};
-  --bs-card-border-radius: #{$card-border-radius};
-  --bs-card-border-color: #{$card-border-color};
-  --bs-card-inner-border-radius: #{$card-inner-border-radius};
-  --bs-card-cap-bg: #{$card-cap-bg};
-  --bs-card-cap-color: #{$card-cap-color};
-  --bs-card-color: #{$card-color};
-  --bs-card-bg: #{$card-bg};
-  --bs-card-img-overlay-padding: #{$card-img-overlay-padding};
-  --bs-card-group-margin: #{$card-group-margin};
-  --bs-card-deck-margin: #{$card-deck-margin};
-  --bs-card-columns-count: #{$card-columns-count};
-  --bs-card-columns-gap: #{$card-columns-gap};
-  --bs-card-columns-margin: #{$card-columns-margin};
-
-
-  // Tooltips
-  --bs-tooltip-font-size: #{$tooltip-font-size};
-  --bs-tooltip-max-width: #{$tooltip-max-width};
-  --bs-tooltip-color: #{$tooltip-color};
-  --bs-tooltip-bg: #{$tooltip-bg};
-  --bs-tooltip-border-radius: #{$tooltip-border-radius};
-  --bs-tooltip-opacity: #{$tooltip-opacity};
-  --bs-tooltip-padding-y: #{$tooltip-padding-y};
-  --bs-tooltip-padding-x: #{$tooltip-padding-x};
-  --bs-tooltip-margin: #{$tooltip-margin};
-  --bs-tooltip-arrow-width: #{$tooltip-arrow-width};
-  --bs-tooltip-arrow-height: #{$tooltip-arrow-height};
-  --bs-tooltip-arrow-color: #{$tooltip-arrow-color};
-
-  // Form tooltips must come after regular tooltips
-  --bs-form-feedback-tooltip-padding-y: #{$form-feedback-tooltip-padding-y};
-  --bs-form-feedback-tooltip-padding-x: #{$form-feedback-tooltip-padding-x};
-  --bs-form-feedback-tooltip-font-size: #{$form-feedback-tooltip-font-size};
-  --bs-form-feedback-tooltip-line-height: #{$form-feedback-tooltip-line-height};
-  --bs-form-feedback-tooltip-opacity: #{$form-feedback-tooltip-opacity};
-  --bs-form-feedback-tooltip-border-radius: #{$form-feedback-tooltip-border-radius};
-
-
-  // Popovers
-  --bs-popover-font-size: #{$popover-font-size};
-  --bs-popover-bg: #{$popover-bg};
-  --bs-popover-max-width: #{$popover-max-width};
-  --bs-popover-border-width: #{$popover-border-width};
-  --bs-popover-border-color: #{$popover-border-color};
-  --bs-popover-border-radius: #{$popover-border-radius};
-  --bs-popover-box-shadow: #{$popover-box-shadow};
-  --bs-popover-header-bg: #{$popover-header-bg};
-  --bs-popover-header-color: #{$popover-header-color};
-  --bs-popover-header-padding-y: #{$popover-header-padding-y};
-  --bs-popover-header-padding-x: #{$popover-header-padding-x};
-  --bs-popover-body-color: #{$popover-body-color};
-  --bs-popover-body-padding-y: #{$popover-body-padding-y};
-  --bs-popover-body-padding-x: #{$popover-body-padding-x};
-  --bs-popover-arrow-width: #{$popover-arrow-width};
-  --bs-popover-arrow-height: #{$popover-arrow-height};
-  --bs-popover-arrow-color: #{$popover-arrow-color};
-  --bs-popover-arrow-outer-color: #{$popover-arrow-outer-color};
-
-
-  // Toasts
-  --bs-toast-max-width: #{$toast-max-width};
-  --bs-toast-padding-x: #{$toast-padding-x};
-  --bs-toast-padding-y: #{$toast-padding-y};
-  --bs-toast-font-size: #{$toast-font-size};
-  --bs-toast-color: #{$toast-color};
-  --bs-toast-background-color: #{$toast-background-color};
-  --bs-toast-border-width: #{$toast-border-width};
-  --bs-toast-border-color: #{$toast-border-color};
-  --bs-toast-border-radius: #{$toast-border-radius};
-  --bs-toast-box-shadow: #{$toast-box-shadow};
-  --bs-toast-header-color: #{$toast-header-color};
-  --bs-toast-header-background-color: #{$toast-header-background-color};
-  --bs-toast-header-border-color: #{$toast-header-border-color};
-
-
-  // Badges
-  --bs-badge-font-size: #{$badge-font-size};
-  --bs-badge-font-weight: #{$badge-font-weight};
-  --bs-badge-padding-y: #{$badge-padding-y};
-  --bs-badge-padding-x: #{$badge-padding-x};
-  --bs-badge-border-radius: #{$badge-border-radius};
-  --bs-badge-transition: #{$badge-transition};
-  --bs-badge-focus-width: #{$badge-focus-width};
-  --bs-badge-pill-padding-x: #{$badge-pill-padding-x};
-  // Use a higher than normal value to ensure completely rounded edges when
-  // customizing padding or font-size on labels.
-  --bs-badge-pill-border-radius: #{$badge-pill-border-radius};
-
-
-  // Modals
-
-  // Padding applied to the modal body
-  --bs-modal-inner-padding: #{$modal-inner-padding};
-  --bs-modal-dialog-margin: #{$modal-dialog-margin};
-  --bs-modal-dialog-margin-y-sm-up: #{$modal-dialog-margin-y-sm-up};
-  --bs-modal-title-line-height: #{$modal-title-line-height};
-  --bs-modal-content-color: #{$modal-content-color};
-  --bs-modal-content-bg: #{$modal-content-bg};
-  --bs-modal-content-border-color: #{$modal-content-border-color};
-  --bs-modal-content-border-width: #{$modal-content-border-width};
-  --bs-modal-content-border-radius: #{$modal-content-border-radius};
-  --bs-modal-content-box-shadow-xs: #{$modal-content-box-shadow-xs};
-  --bs-modal-content-box-shadow-sm-up: #{$modal-content-box-shadow-sm-up};
-  --bs-modal-backdrop-bg: #{$modal-backdrop-bg};
-  --bs-modal-backdrop-opacity: #{$modal-backdrop-opacity};
-  --bs-modal-header-border-color: #{$modal-header-border-color};
-  --bs-modal-footer-border-color: #{$modal-footer-border-color};
-  --bs-modal-header-border-width: #{$modal-header-border-width};
-  --bs-modal-footer-border-width: #{$modal-footer-border-width};
-  --bs-modal-header-padding-y: #{$modal-header-padding-y};
-  --bs-modal-header-padding-x: #{$modal-header-padding-x};
-  --bs-modal-header-padding: #{$modal-header-padding};
-  --bs-modal-xl: #{$modal-xl};
-  --bs-modal-lg: #{$modal-lg};
-  --bs-modal-md: #{$modal-md};
   --bs-modal-sm: #{$modal-sm};
-  --bs-modal-fade-transform: #{$modal-fade-transform};
-  --bs-modal-show-transform: #{$modal-show-transform};
-  --bs-modal-transition: #{$modal-transition};
-
-
-  // Alerts
-  //
-  // Define alert colors, border radius, and padding.
-  --bs-alert-padding-y: #{$alert-padding-y};
-  --bs-alert-padding-x: #{$alert-padding-x};
-  --bs-alert-margin-bottom: #{$alert-margin-bottom};
-  --bs-alert-border-radius: #{$alert-border-radius};
-  --bs-alert-link-font-weight: #{$alert-link-font-weight};
-  --bs-alert-border-width: #{$alert-border-width};
-  --bs-alert-bg-level: #{$alert-bg-level};
-  --bs-alert-border-level: #{$alert-border-level};
-  --bs-alert-color-level: #{$alert-color-level};
-
-
-  // Progress bars
-  --bs-progress-height: #{$progress-height};
-  --bs-progress-font-size: #{$progress-font-size};
-  --bs-progress-bg: #{$progress-bg};
-  --bs-progress-border-radius: #{$progress-border-radius};
-  --bs-progress-box-shadow: #{$progress-box-shadow};
-  --bs-progress-bar-color: #{$progress-bar-color};
-  --bs-progress-bar-bg: #{$progress-bar-bg};
-  --bs-progress-bar-animation-timing: #{$progress-bar-animation-timing};
-  --bs-progress-bar-transition: #{$progress-bar-transition};
-
-
-  // List group
-  --bs-list-group-color: #{$list-group-color};
-  --bs-list-group-bg: #{$list-group-bg};
-  --bs-list-group-border-color: #{$list-group-border-color};
-  --bs-list-group-border-width: #{$list-group-border-width};
-  --bs-list-group-border-radius: #{$list-group-border-radius};
-  --bs-list-group-item-padding-y: #{$list-group-item-padding-y};
-  --bs-list-group-item-padding-x: #{$list-group-item-padding-x};
-  --bs-list-group-hover-bg: #{$list-group-hover-bg};
-  --bs-list-group-active-color: #{$list-group-active-color};
-  --bs-list-group-active-bg: #{$list-group-active-bg};
-  --bs-list-group-active-border-color: #{$list-group-active-border-color};
-  --bs-list-group-disabled-color: #{$list-group-disabled-color};
-  --bs-list-group-disabled-bg: #{$list-group-disabled-bg};
-  --bs-list-group-action-color: #{$list-group-action-color};
-  --bs-list-group-action-hover-color: #{$list-group-action-hover-color};
-  --bs-list-group-action-active-color: #{$list-group-action-active-color};
-  --bs-list-group-action-active-bg: #{$list-group-action-active-bg};
-
-
-  // Image thumbnails
-  --bs-thumbnail-padding: #{$thumbnail-padding};
-  --bs-thumbnail-bg: #{$thumbnail-bg};
-  --bs-thumbnail-border-width: #{$thumbnail-border-width};
-  --bs-thumbnail-border-color: #{$thumbnail-border-color};
-  --bs-thumbnail-border-radius: #{$thumbnail-border-radius};
-  --bs-thumbnail-box-shadow: #{$thumbnail-box-shadow};
-
-
-  // Figures
-  --bs-figure-caption-font-size: #{$figure-caption-font-size};
-  --bs-figure-caption-color: #{$figure-caption-color};
-
-
-  // Breadcrumbs
-  --bs-breadcrumb-padding-y: #{$breadcrumb-padding-y};
-  --bs-breadcrumb-padding-x: #{$breadcrumb-padding-x};
-  --bs-breadcrumb-item-padding: #{$breadcrumb-item-padding};
-  --bs-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
-  --bs-breadcrumb-bg: #{$breadcrumb-bg};
-  --bs-breadcrumb-divider-color: #{$breadcrumb-divider-color};
-  --bs-breadcrumb-active-color: #{$breadcrumb-active-color};
-  --bs-breadcrumb-divider: #{$breadcrumb-divider};
-  --bs-breadcrumb-border-radius: #{$breadcrumb-border-radius};
-
-
-  // Carousel
-  --bs-carousel-control-color: #{$carousel-control-color};
-  --bs-carousel-control-width: #{$carousel-control-width};
-  --bs-carousel-control-opacity: #{$carousel-control-opacity};
-  --bs-carousel-control-hover-opacity: #{$carousel-control-hover-opacity};
-  --bs-carousel-control-transition: #{$carousel-control-transition};
-  --bs-carousel-indicator-width: #{$carousel-indicator-width};
-  --bs-carousel-indicator-height: #{$carousel-indicator-height};
-  --bs-carousel-indicator-hit-area-height: #{$carousel-indicator-hit-area-height};
-  --bs-carousel-indicator-spacer: #{$carousel-indicator-spacer};
-  --bs-carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
-  --bs-carousel-indicator-transition: #{$carousel-indicator-transition};
-  --bs-carousel-caption-width: #{$carousel-caption-width};
-  --bs-carousel-caption-color: #{$carousel-caption-color};
-  --bs-carousel-control-icon-width: #{$carousel-control-icon-width};
-  --bs-carousel-control-prev-icon-bg: #{$carousel-control-prev-icon-bg};
-  --bs-carousel-control-next-icon-bg: #{$carousel-control-next-icon-bg};
-  --bs-carousel-transition-duration: #{$carousel-transition-duration};
-  --bs-carousel-transition: #{$carousel-transition};
-
-
-  // Spinners
-  --bs-spinner-width: #{$spinner-width};
-  --bs-spinner-height: #{$spinner-height};
-  --bs-spinner-border-width: #{$spinner-border-width};
-  --bs-spinner-width-sm: #{$spinner-width-sm};
-  --bs-spinner-height-sm: #{$spinner-height-sm};
-  --bs-spinner-border-width-sm: #{$spinner-border-width-sm};
-
-
-  // Close
-  --bs-close-font-size: #{$close-font-size};
-  --bs-close-font-weight: #{$close-font-weight};
-  --bs-close-color: #{$close-color};
-  --bs-close-text-shadow: #{$close-text-shadow};
 
+  --bs-zindex-popover: #{$zindex-popover};
+  --bs-zindex-sticky: #{$zindex-sticky};
 
-  // Code
-  --bs-code-font-size: #{$code-font-size};
-  --bs-code-color: #{$code-color};
-  --bs-kbd-padding-y: #{$kbd-padding-y};
-  --bs-kbd-padding-x: #{$kbd-padding-x};
-  --bs-kbd-font-size: #{$kbd-font-size};
-  --bs-kbd-color: #{$kbd-color};
-  --bs-kbd-bg: #{$kbd-bg};
-  --bs-pre-color: #{$pre-color};
-  --bs-pre-scrollable-max-height: #{$pre-scrollable-max-height};
+  --bs-border-radius-lg: #{$bs-border-radius-lg};
 
+  --bs-table-border-color: #{$gray-300};
+}
 
-  // Utilities
-  --bs-displays: #{$displays};
-  --bs-overflows: #{$overflows};
-  --bs-positions: #{$positions};
+// Some Bootstrap CSS variables are tied to classes
 
+.accordion {
+  --bs-accordion-btn-bg: #{$light};
+}
 
-  // Printing
-  --bs-print-page-size: #{$print-page-size};
-  --bs-print-body-min-width: #{$print-body-min-width};
+.table {
+  --bs-table-striped-bg: #{$light};
+}
 
+.btn-transparent
+{
+  --bs-btn-box-shadow: none;
+  --bs-btn-focus-box-shadow: none;
+  --bs-btn-active-border-color: transparent;
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 6bddfd58e94..933fd691879 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -1,7 +1,7 @@
 :root {
   --ds-content-spacing: #{$spacer}; // equivalent to Bootstrap spaces of size 3
 
-  --ds-button-height: #{$input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2)};
+    --ds-button-height: #{$input-btn-padding-y * 2 + $input-btn-line-height + calculateRem(calc($input-btn-border-width*2))};
 
   --ds-card-height-percentage:98%;
   --ds-card-thumbnail-height:240px;
@@ -92,7 +92,7 @@
   --ds-notification-bg-warning: #{darken(adjust-hue($warning, -10), 10%)};
 
   --ds-top-footer-bg: #{$gray-200};
-  --ds-footer-bg: #{theme-color('primary')};
+    --ds-footer-bg: #{$primary};
   --ds-footer-border: 1px solid var(--bs-gray-400);
   --ds-footer-padding: 0;
   --ds-footer-padding-bottom: 0;
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 4934ec3d350..5d6b8c63f57 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -125,11 +125,11 @@ ngb-modal-backdrop {
 }
 
 /* Complement .space-children-mr when spaced elements are not on the same level */
-.mr-gap {
+.me-gap {
     margin-right: var(--ds-gap);
 }
 
-.ml-gap {
+.ms-gap {
     margin-left: var(--ds-gap);
 }
 
@@ -238,27 +238,27 @@ ds-dynamic-form-control-container.d-none {
 }
 
 .badge-validation {
-    background-color: #{map-get($theme-colors, warning)};
+  background-color: #{$warning};
 }
 
 .badge-waiting-controller {
-    background-color: #{map-get($theme-colors, info)};
+  background-color: #{$info};
 }
 
 .badge-workspace {
-    background-color: #{map-get($theme-colors, primary)};
+  background-color: #{$primary};
 }
 
 .badge-archived {
-    background-color: darken($green, 25);
+  background-color: #{$success};
 }
 
 .badge-workflow {
-    background-color: #{map-get($theme-colors, info)};
+  background-color: #{$info};
 }
 
 .badge-item-type {
-    background-color: #{map-get($theme-colors, info)};
+  background-color: #{$info};
 }
 
 .visually-hidden {
@@ -471,6 +471,57 @@ ngb-accordion {
 .mb-ncs { margin-bottom: calc(var(--ds-content-spacing) * -1); }
 .my-ncs { margin-top: calc(var(--ds-content-spacing) * -1); margin-bottom: calc(var(--ds-content-spacing) * -1); }
 
+/* form-check-input Changed from Bootstrap 5's form-check-input to ensure that we keep the default checkboxes */
+.form-check-input {
+  border-color: unset;
+  appearance: auto; /* Reset to browser's default appearance */
+}
+
+/* Custom fas font-family; Makes it so that BootStrap classes don't override it (Typically used for icons) */
+.btn.fas {
+  font-family: $icon-font-family;
+}
+
+/* btn-close Changed from Bootstrap 5's .btn-close to ensure the button close button has the original size */
+.btn-close {
+  transform: scale(0.6);
+}
+
+/* Make sure every element of a single drag-item is on the same line */
+.drag-item-container > * {
+  width: auto;
+}
+
+
+.btn.btn-success {
+  color: #fff;
+}
+
+.btn.btn-success:hover {
+  color: #fff;
+}
+
+.table {
+  --bs-table-accent-bg: #fff;
+}
+
+ngb-tooltip-window {
+  margin-bottom: 0.25rem !important;
+}
+
+.table thead th {
+  border-bottom: 2px solid #{$gray-300};
+  border-top: 1px solid #{$gray-300};
+}
+
+.custom-alignment {
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+}
+
 
 .link-contrast {
   // Rules for accessibility to meet minimum contrast and have an identifiable link between other texts
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index badc159747a..7a321c93648 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,5 +1,7 @@
-@import '_functions.scss';
+@import './functions.scss';
 @import '../../node_modules/bootstrap/scss/functions.scss';
 
-@import '_bootstrap_variables.scss';
+@import './bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
+
+$theme-colors: map-merge($theme-colors, $global-custom-semantic-colors);
diff --git a/src/themes/custom/app/login-page/login-page.component.html b/src/themes/custom/app/login-page/login-page.component.html
index e69de29bb2d..294a360d2fa 100644
--- a/src/themes/custom/app/login-page/login-page.component.html
+++ b/src/themes/custom/app/login-page/login-page.component.html
@@ -0,0 +1,10 @@
+<div class="container w-100 h-100">
+  <div class="text-center mt-5 row justify-content-center">
+    <div>
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <h1 class="h3 mb-0 fw-normal">{{"login.form.header" | translate}}</h1>
+      <ds-log-in
+      [isStandalonePage]="true"></ds-log-in>
+    </div>
+  </div>
+</div>
diff --git a/src/themes/custom/app/logout-page/logout-page.component.html b/src/themes/custom/app/logout-page/logout-page.component.html
index e69de29bb2d..8ec2905212c 100644
--- a/src/themes/custom/app/logout-page/logout-page.component.html
+++ b/src/themes/custom/app/logout-page/logout-page.component.html
@@ -0,0 +1,9 @@
+<div class="container w-100 h-100">
+  <div class="text-center mt-5 row justify-content-md-center">
+    <div class="mx-auto">
+      <img class="mb-4 login-logo" src="assets/images/dspace-logo.png">
+      <h1 class="h3 mb-0 fw-normal">{{"logout.form.header" | translate}}</h1>
+      <ds-log-out></ds-log-out>
+    </div>
+  </div>
+</div>
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component.html b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component.html
index 54044f5d796..b2831d5c337 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component.html
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-collection-parent-selector/create-collection-parent-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
index a13be638803..e75cf05c5a2 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
@@ -1,12 +1,11 @@
 <div>
     <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-        <button type="button" class="close" (click)="close()" aria-label="Close">
-            <span aria-hidden="true">×</span>
+        <button type="button" class="btn-close" (click)="close()" aria-label="Close">
         </button>
     </div>
     <div class="modal-body">
-        <button class="btn btn-outline-primary btn-lg btn-block" (click)="selectObject(undefined)">{{'dso-selector.create.community.top-level' | translate}}</button>
-        <h3 class="position-relative py-1 my-3 font-weight-normal">
+        <button class="btn btn-outline-primary btn-lg btn-block w-100" (click)="selectObject(undefined)">{{'dso-selector.create.community.top-level' | translate}}</button>
+        <h3 class="position-relative py-1 my-3 fw-normal">
             <hr>
             <div id="create-community-or-separator" class="text-center position-absolute w-100">
                 <span class="px-4 bg-white">{{'dso-selector.create.community.or-divider' | translate}}</span>
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
index 664aef95c01..6fc90cbf2d6 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-item-parent-selector/create-item-parent-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component.html b/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component.html
index 54044f5d796..b2831d5c337 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component.html
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-collection-selector/edit-collection-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component.html b/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component.html
index 54044f5d796..b2831d5c337 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component.html
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-community-selector/edit-community-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html b/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
index 85d8797e660..6dafc18209b 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/edit-item-selector/edit-item-selector.component.html
@@ -1,7 +1,6 @@
 <div>
   <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-    <button type="button" class="close" (click)="close()" aria-label="Close">
-      <span aria-hidden="true">×</span>
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
     </button>
   </div>
   <div class="modal-body">
diff --git a/src/themes/custom/styles/_theme_sass_variable_overrides.scss b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
index f1387aa619b..1f367890bd1 100644
--- a/src/themes/custom/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/custom/styles/_theme_sass_variable_overrides.scss
@@ -15,15 +15,17 @@
 // $red:    #CF4444 !default;
 // $dark:   darken($blue, 17%) !default;
 //
-// $theme-colors: (
-//   primary: $blue,
-//   secondary: $gray-700,
-//   success: $green,
-//   info: $cyan,
-//   warning: $yellow,
-//   danger: $red,
-//   light: $gray-100,
-//   dark: $dark
-// ) !default;
+// $primary: $blue !default;
+// $secondary: $gray-700 !default;
+// $success: $green !default;
+// $info: $cyan !default;
+// $warning: $yellow !default;
+// $danger: $red !default;
+// $light: $gray-100 !default;
+// $dark: $dark !default;
 //
-// $link-color: map-get($theme-colors, info) !default;
+// $link-color: $info !default;
+
+// Add new semantic colors here (you don't need to add existing semantic colors)
+$theme-custom-semantic-colors: (
+);
diff --git a/src/themes/custom/styles/theme.scss b/src/themes/custom/styles/theme.scss
index 05c96f33728..dfa8274cf60 100644
--- a/src/themes/custom/styles/theme.scss
+++ b/src/themes/custom/styles/theme.scss
@@ -2,6 +2,9 @@
 
 @import './_theme_sass_variable_overrides.scss';
 @import '../../../styles/_variables.scss';
+
+$theme-colors: map-merge($theme-colors, $theme-custom-semantic-colors);
+
 @import '../../../styles/_mixins.scss';
 @import '../../../styles/helpers/font_awesome_imports.scss';
 @import '../../../styles/_vendor.scss';
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index e78d19053d4..27a506eb195 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -13,7 +13,7 @@
       </nav>
     </div>
     <!-- Search bar and other menus -->
-    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ml-auto">
+    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ms-auto">
       <ds-search-navbar></ds-search-navbar>
       <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
         <ds-lang-switch></ds-lang-switch>
@@ -22,13 +22,12 @@
         <ds-auth-nav-menu></ds-auth-nav-menu>
       </div>
 
-      <div id="mobile-navbar-toggler" class="d-block d-lg-none ml-3" *ngIf="(isMobile$ | async)">
-        <button id="navbar-toggler" class="btn" type="button" (click)="toggleNavbar()"
+      <div id="mobile-navbar-toggler" class="d-block d-lg-none ms-3" *ngIf="(isMobile$ | async)">
+        <button id="navbar-toggler" class="btn btn-transparent" type="button" (click)="toggleNavbar()"
                 [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="(isNavBarCollapsed$ | async) !== true">
           <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
         </button>
       </div>
-
     </div>
   </div>
 </header>
diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.html b/src/themes/dspace/app/home-page/home-news/home-news.component.html
index ca053fc6623..a29239dff17 100644
--- a/src/themes/dspace/app/home-page/home-news/home-news.component.html
+++ b/src/themes/dspace/app/home-page/home-news/home-news.component.html
@@ -1,9 +1,9 @@
 <div class="background-image-container mt-ncs">
   <div class="container">
-    <div class="jumbotron jumbotron-fluid">
+    <div class="jumbotron py-4 px-2 py-sm-5 px-sm-0 mt-0 mb-4">
       <div class="d-flex flex-wrap">
         <div>
-          <h1 class="display-3">DSpace 9</h1>
+          <h1 class="display-2">DSpace 9</h1>
           <p class="lead">DSpace is the world leading open source repository platform that enables
             organisations to:</p>
         </div>
diff --git a/src/themes/dspace/app/home-page/home-news/home-news.component.scss b/src/themes/dspace/app/home-page/home-news/home-news.component.scss
index 3c3aa8b4450..36511819a3d 100644
--- a/src/themes/dspace/app/home-page/home-news/home-news.component.scss
+++ b/src/themes/dspace/app/home-page/home-news/home-news.component.scss
@@ -64,7 +64,7 @@
   a {
     color: var(--ds-home-news-link-color);
 
-    @include hover {
+    &:hover {
       color: var(--ds-home-news-link-hover-color);
     }
   }
diff --git a/src/themes/dspace/styles/_global-styles.scss b/src/themes/dspace/styles/_global-styles.scss
index d2258193269..ffca3cda13c 100644
--- a/src/themes/dspace/styles/_global-styles.scss
+++ b/src/themes/dspace/styles/_global-styles.scss
@@ -13,7 +13,7 @@
     padding-bottom: 0.5rem !important;
   }
 
-  .badge-secondary {
+  .bg-secondary {
     background-color: var(--bs-primary);
   }
 
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index 63a5535d958..1e6ad4efff5 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -2,7 +2,7 @@
 
 :root {
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
     --ds-header-logo-height: 40px;
     --ds-header-height: 80px;
   }
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index a9231d37e52..a5d4ea2ae22 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -44,29 +44,23 @@ $font-family-sans-serif: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI"
 //$teal:    #20c997 !default;
 //$cyan:    #17a2b8 !default;
 
-// Define or override other colors here
-// ...
-
 // Override semantic colors here
 $primary:   #43515f;  // Gray
 $secondary: #495057;  // As Bootstrap $gray-700
 $success:   #92c642;  // Lime
-$info:      #1e6f90;  // Light blue
+$info:      #207698;  // Light blue
 $warning:   #ec9433;  // Orange
 $danger:    #cf4444;  // Red
 $light:     #f8f9fa;  // As Bootstrap $gray-100
-$dark:      #43515f;  // Gray
+$dark:      #43515f;  // Dark blue
 
 // Add new semantic colors here (you don't need to add existing semantic colors)
-$theme-colors: (
-  // ...
+$theme-custom-semantic-colors: (
 );
 
-
 /*** OTHER BOOTSTRAP VARIABLES ***/
 
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold: 170;
+$min-contrast-ratio: 2.06 !default;
 
 $body-color: #343a40;       // As Bootstrap $gray-800
 
diff --git a/src/themes/dspace/styles/theme.scss b/src/themes/dspace/styles/theme.scss
index 05c96f33728..dfa8274cf60 100644
--- a/src/themes/dspace/styles/theme.scss
+++ b/src/themes/dspace/styles/theme.scss
@@ -2,6 +2,9 @@
 
 @import './_theme_sass_variable_overrides.scss';
 @import '../../../styles/_variables.scss';
+
+$theme-colors: map-merge($theme-colors, $theme-custom-semantic-colors);
+
 @import '../../../styles/_mixins.scss';
 @import '../../../styles/helpers/font_awesome_imports.scss';
 @import '../../../styles/_vendor.scss';
diff --git a/webpack/webpack.common.ts b/webpack/webpack.common.ts
index 8d433edf393..b1c42df8ad2 100644
--- a/webpack/webpack.common.ts
+++ b/webpack/webpack.common.ts
@@ -66,10 +66,6 @@ const SCSS_LOADERS = [
     loader: 'sass-loader',
     options: {
       sourceMap: true,
-      // sass >1.33 complains about deprecation warnings in Bootstrap 4
-      // After upgrading to Angular 12 we need to explicitly use an older version here
-      // todo: remove after upgrading to Bootstrap 5
-      implementation: sass,
       sassOptions: {
         includePaths: [projectRoot('./')]
       }