diff --git a/.eslintrc.json b/.eslintrc.json
index 5fb4c12171..888c968b5c 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -293,7 +293,8 @@
       ],
       "rules": {
         // Custom DSpace Angular rules
-        "dspace-angular-html/themed-component-usages": "error"
+        "dspace-angular-html/themed-component-usages": "error",
+        "dspace-angular-html/no-disabled-attribute-on-button": "error"
       }
     },
     {
diff --git a/config/config.example.yml b/config/config.example.yml
index d1a40e6b1f..8639dc0010 100644
--- a/config/config.example.yml
+++ b/config/config.example.yml
@@ -23,6 +23,31 @@ ssr:
   # Determining which styles are critical is a relatively expensive operation; this option is
   # disabled (false) by default to boost server performance at the expense of loading smoothness.
   inlineCriticalCss: false
+  # Path prefixes to enable SSR for. By default these are limited to paths of primary DSpace objects.
+  # NOTE: The "/handle/" path ensures Handle redirects work via SSR.  The "/reload/" path ensures
+  # hard refreshes (e.g. after login) trigger SSR while fully reloading the page.
+  paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/', '/reload/' ]
+  # Whether to enable rendering of Search component on SSR.
+  # If set to true the component will be included in the HTML returned from the server side rendering.
+  # If set to false the component will not be included in the HTML returned from the server side rendering.
+  enableSearchComponent: false
+  # Whether to enable rendering of Browse component on SSR.
+  # If set to true the component will be included in the HTML returned from the server side rendering.
+  # If set to false the component will not be included in the HTML returned from the server side rendering.
+  enableBrowseComponent: false
+  # Enable state transfer from the server-side application to the client-side application.
+  # Defaults to true.
+  # Note: When using an external application cache layer, it's recommended not to transfer the state to avoid caching it.
+  # Disabling it ensures that dynamic state information is not inadvertently cached, which can improve security and
+  # ensure that users always use the most up-to-date state.
+  transferState: true
+  # When a different REST base URL is used for the server-side application, the generated state contains references to
+  # REST resources with the internal URL configured. By default, these internal URLs are replaced with public URLs.
+  # Disable this setting to avoid URL replacement during SSR. In this the state is not transferred to avoid security issues.
+  replaceRestUrl: true
+  # Enable request performance profiling data collection and printing the results in the server console.
+  # Defaults to false. Enabling in production is NOT recommended
+  #enablePerformanceProfiler: false
 
 # The REST API server settings
 # NOTE: these settings define which (publicly available) REST API to use. They are usually
@@ -33,6 +58,9 @@ rest:
   port: 443
   # NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
   nameSpace: /server
+  # Provide a different REST url to be used during SSR execution. It must contain the whole url including protocol, server port and
+  # server namespace (uncomment to use it).
+  #ssrBaseUrl: http://localhost:8080/server
 
 # Caching settings
 cache:
@@ -448,6 +476,12 @@ search:
     enabled: false
     # List of filters to enable in "Advanced Search" dropdown
     filter: [ 'title', 'author', 'subject', 'entityType' ]
+  #
+  # Number used to render n UI elements called loading skeletons that act as placeholders.
+  # These elements indicate that some content will be loaded in their stead.
+  # Since we don't know how many filters will be loaded before we receive a response from the server we use this parameter for the skeletons count.
+  # e.g. If we set 5 then 5 loading skeletons will be visualized before the actual filters are retrieved.
+  defaultFiltersCount: 5
 
 
 # Notify metrics
diff --git a/docs/lint/html/index.md b/docs/lint/html/index.md
index 15d693843c..e134e1070f 100644
--- a/docs/lint/html/index.md
+++ b/docs/lint/html/index.md
@@ -2,3 +2,4 @@
 _______
 
 - [`dspace-angular-html/themed-component-usages`](./rules/themed-component-usages.md): Themeable components should be used via the selector of their `ThemedComponent` wrapper class
+- [`dspace-angular-html/no-disabled-attribute-on-button`](./rules/no-disabled-attribute-on-button.md): Buttons should use the `dsBtnDisabled` directive instead of the HTML `disabled` attribute.
diff --git a/docs/lint/html/rules/no-disabled-attribute-on-button.md b/docs/lint/html/rules/no-disabled-attribute-on-button.md
new file mode 100644
index 0000000000..d9d39ce82c
--- /dev/null
+++ b/docs/lint/html/rules/no-disabled-attribute-on-button.md
@@ -0,0 +1,78 @@
+[DSpace ESLint plugins](../../../../lint/README.md) > [HTML rules](../index.md) > `dspace-angular-html/no-disabled-attribute-on-button`
+_______
+
+Buttons should use the `dsBtnDisabled` directive instead of the HTML `disabled` attribute.
+      This should be done to ensure that users with a screen reader are able to understand that the a button button is present, and that it is disabled.
+      The native html disabled attribute does not allow users to navigate to the button by keyboard, and thus they have no way of knowing that the button is present.
+
+_______
+
+[Source code](../../../../lint/src/rules/html/no-disabled-attribute-on-button.ts)
+
+### Examples
+
+
+#### Valid code
+    
+##### should use [dsBtnDisabled] in HTML templates
+        
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+    
+##### disabled attribute is still valid on non-button elements
+        
+```html
+<input disabled>
+```
+    
+##### [disabled] attribute is still valid on non-button elements
+        
+```html
+<input [disabled]="true">
+```
+    
+##### angular dynamic attributes that use disabled are still valid
+        
+```html
+<button [class.disabled]="isDisabled">Submit</button>
+```
+    
+
+
+
+#### Invalid code  &amp; automatic fixes
+    
+##### should not use disabled attribute in HTML templates
+        
+```html
+<button disabled>Submit</button>
+```
+Will produce the following error(s):
+```
+Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.
+```
+        
+Result of `yarn lint --fix`:
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+        
+    
+##### should not use [disabled] attribute in HTML templates
+        
+```html
+<button [disabled]="true">Submit</button>
+```
+Will produce the following error(s):
+```
+Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.
+```
+        
+Result of `yarn lint --fix`:
+```html
+<button [dsBtnDisabled]="true">Submit</button>
+```
+        
+    
+
diff --git a/lint/src/rules/html/index.ts b/lint/src/rules/html/index.ts
index 7c1370ae2d..3d425c3ad4 100644
--- a/lint/src/rules/html/index.ts
+++ b/lint/src/rules/html/index.ts
@@ -10,10 +10,13 @@ import {
   bundle,
   RuleExports,
 } from '../../util/structure';
+import * as noDisabledAttributeOnButton from './no-disabled-attribute-on-button';
 import * as themedComponentUsages from './themed-component-usages';
 
 const index = [
   themedComponentUsages,
+  noDisabledAttributeOnButton,
+
 ] as unknown as RuleExports[];
 
 export = {
diff --git a/lint/src/rules/html/no-disabled-attribute-on-button.ts b/lint/src/rules/html/no-disabled-attribute-on-button.ts
new file mode 100644
index 0000000000..bf1a72d70d
--- /dev/null
+++ b/lint/src/rules/html/no-disabled-attribute-on-button.ts
@@ -0,0 +1,147 @@
+import {
+  TmplAstBoundAttribute,
+  TmplAstTextAttribute,
+} from '@angular-eslint/bundled-angular-compiler';
+import { TemplateParserServices } from '@angular-eslint/utils';
+import {
+  ESLintUtils,
+  TSESLint,
+} from '@typescript-eslint/utils';
+
+import {
+  DSpaceESLintRuleInfo,
+  NamedTests,
+} from '../../util/structure';
+import { getSourceCode } from '../../util/typescript';
+
+export enum Message {
+  USE_DSBTN_DISABLED = 'mustUseDsBtnDisabled',
+}
+
+export const info = {
+  name: 'no-disabled-attribute-on-button',
+  meta: {
+    docs: {
+      description: `Buttons should use the \`dsBtnDisabled\` directive instead of the HTML \`disabled\` attribute.
+      This should be done to ensure that users with a screen reader are able to understand that the a button button is present, and that it is disabled.
+      The native html disabled attribute does not allow users to navigate to the button by keyboard, and thus they have no way of knowing that the button is present.`,
+    },
+    type: 'problem',
+    fixable: 'code',
+    schema: [],
+    messages: {
+      [Message.USE_DSBTN_DISABLED]: 'Buttons should use the `dsBtnDisabled` directive instead of the `disabled` attribute.',
+    },
+  },
+  defaultOptions: [],
+} as DSpaceESLintRuleInfo;
+
+export const rule = ESLintUtils.RuleCreator.withoutDocs({
+  ...info,
+  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+    const parserServices = getSourceCode(context).parserServices as TemplateParserServices;
+
+    /**
+     * Some dynamic angular inputs will have disabled as name because of how Angular handles this internally (e.g [class.disabled]="isDisabled")
+     * But these aren't actually the disabled attribute we're looking for, we can determine this by checking the details of the keySpan
+     */
+    function isOtherAttributeDisabled(node: TmplAstBoundAttribute | TmplAstTextAttribute): boolean {
+      // if the details are not null, and the details are not 'disabled', then it's not the disabled attribute we're looking for
+      return node.keySpan?.details !== null && node.keySpan?.details !== 'disabled';
+    }
+
+    /**
+     * Replace the disabled text with [dsBtnDisabled] in the template
+     */
+    function replaceDisabledText(text: string ): string {
+      const hasBrackets = text.includes('[') && text.includes(']');
+      const newDisabledText = hasBrackets ? 'dsBtnDisabled' : '[dsBtnDisabled]="true"';
+      return text.replace('disabled', newDisabledText);
+    }
+
+    function inputIsChildOfButton(node: any): boolean {
+      return (node.parent?.tagName === 'button' || node.parent?.name === 'button');
+    }
+
+    function reportAndFix(node: TmplAstBoundAttribute | TmplAstTextAttribute) {
+      if (!inputIsChildOfButton(node) || isOtherAttributeDisabled(node)) {
+        return;
+      }
+
+      const sourceSpan = node.sourceSpan;
+      context.report({
+        messageId: Message.USE_DSBTN_DISABLED,
+        loc: parserServices.convertNodeSourceSpanToLoc(sourceSpan),
+        fix(fixer) {
+          const templateText = sourceSpan.start.file.content;
+          const disabledText = templateText.slice(sourceSpan.start.offset, sourceSpan.end.offset);
+          const newText = replaceDisabledText(disabledText);
+          return fixer.replaceTextRange([sourceSpan.start.offset, sourceSpan.end.offset], newText);
+        },
+      });
+    }
+
+    return {
+      'BoundAttribute[name="disabled"]'(node: TmplAstBoundAttribute) {
+        reportAndFix(node);
+      },
+      'TextAttribute[name="disabled"]'(node: TmplAstTextAttribute) {
+        reportAndFix(node);
+      },
+    };
+  },
+});
+
+export const tests = {
+  plugin: info.name,
+  valid: [
+    {
+      name: 'should use [dsBtnDisabled] in HTML templates',
+      code: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+    {
+      name: 'disabled attribute is still valid on non-button elements',
+      code: `
+<input disabled>
+      `,
+    },
+    {
+      name: '[disabled] attribute is still valid on non-button elements',
+      code: `
+<input [disabled]="true">
+      `,
+    },
+    {
+      name: 'angular dynamic attributes that use disabled are still valid',
+      code: `
+<button [class.disabled]="isDisabled">Submit</button>
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'should not use disabled attribute in HTML templates',
+      code: `
+<button disabled>Submit</button>
+      `,
+      errors: [{ messageId: Message.USE_DSBTN_DISABLED }],
+      output: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+    {
+      name: 'should not use [disabled] attribute in HTML templates',
+      code: `
+<button [disabled]="true">Submit</button>
+      `,
+      errors: [{ messageId: Message.USE_DSBTN_DISABLED }],
+      output: `
+<button [dsBtnDisabled]="true">Submit</button>
+      `,
+    },
+  ],
+} as NamedTests;
+
+export default rule;
diff --git a/package.json b/package.json
index f1fb80645d..408eb0e134 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dspace-angular",
-  "version": "8.1.0-next",
+  "version": "8.2.0-next",
   "scripts": {
     "ng": "ng",
     "config:watch": "nodemon",
@@ -67,7 +67,7 @@
     "@angular/platform-server": "^17.3.11",
     "@angular/router": "^17.3.11",
     "@angular/ssr": "^17.3.11",
-    "@babel/runtime": "7.26.0",
+    "@babel/runtime": "7.26.7",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
     "@ng-dynamic-forms/core": "^16.0.0",
@@ -85,7 +85,7 @@
     "colors": "^1.4.0",
     "compression": "^1.7.5",
     "cookie-parser": "1.4.7",
-    "core-js": "^3.39.0",
+    "core-js": "^3.40.0",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
     "deepmerge": "^4.3.1",
@@ -96,7 +96,7 @@
     "filesize": "^6.1.0",
     "http-proxy-middleware": "^2.0.7",
     "http-terminator": "^3.2.0",
-    "isbot": "^5.1.17",
+    "isbot": "^5.1.22",
     "js-cookie": "2.2.1",
     "js-yaml": "^4.1.0",
     "json5": "^2.2.3",
@@ -106,7 +106,7 @@
     "lodash": "^4.17.21",
     "lru-cache": "^7.14.1",
     "markdown-it": "^13.0.1",
-    "mirador": "^3.4.2",
+    "mirador": "^3.4.3",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.16.0",
     "morgan": "^1.10.0",
@@ -114,6 +114,7 @@
     "ng2-nouislider": "^2.0.0",
     "ngx-infinite-scroll": "^16.0.0",
     "ngx-pagination": "6.0.3",
+    "ngx-skeleton-loader": "^9.0.0",
     "ngx-ui-switch": "^14.1.0",
     "nouislider": "^15.7.1",
     "pem": "1.14.8",
@@ -146,7 +147,7 @@
     "@types/grecaptcha": "^3.0.9",
     "@types/jasmine": "~3.6.0",
     "@types/js-cookie": "2.2.6",
-    "@types/lodash": "^4.17.14",
+    "@types/lodash": "^4.17.15",
     "@types/node": "^14.14.9",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
@@ -158,7 +159,7 @@
     "cross-env": "^7.0.3",
     "csstype": "^3.1.3",
     "cypress": "^13.17.0",
-    "cypress-axe": "^1.5.0",
+    "cypress-axe": "^1.6.0",
     "deep-freeze": "0.0.1",
     "eslint": "^8.39.0",
     "eslint-plugin-deprecation": "^1.4.1",
@@ -167,7 +168,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-import-newlines": "^1.3.1",
     "eslint-plugin-jsdoc": "^45.0.0",
-    "eslint-plugin-jsonc": "^2.18.2",
+    "eslint-plugin-jsonc": "^2.19.1",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-rxjs": "^5.0.3",
     "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -182,10 +183,10 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "ng-mocks": "^14.13.1",
+    "ng-mocks": "^14.13.2",
     "ngx-mask": "14.2.4",
     "nodemon": "^2.0.22",
-    "postcss": "^8.4",
+    "postcss": "^8.5",
     "postcss-import": "^14.0.0",
     "postcss-loader": "^4.0.3",
     "postcss-preset-env": "^7.4.2",
@@ -194,7 +195,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "sass": "~1.83.1",
+    "sass": "~1.84.0",
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
diff --git a/server.ts b/server.ts
index 032b79b8f2..4544a7c3ba 100644
--- a/server.ts
+++ b/server.ts
@@ -81,6 +81,9 @@ let anonymousCache: LRU<string, any>;
 // extend environment with app config for server
 extendEnvironmentWithAppConfig(environment, appConfig);
 
+// The REST server base URL
+const REST_BASE_URL = environment.rest.ssrBaseUrl || environment.rest.baseUrl;
+
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
 
@@ -156,7 +159,7 @@ export function app() {
    * Proxy the sitemaps
    */
   router.use('/sitemap**', createProxyMiddleware({
-    target: `${environment.rest.baseUrl}/sitemaps`,
+    target: `${REST_BASE_URL}/sitemaps`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
     changeOrigin: true,
   }));
@@ -165,7 +168,7 @@ export function app() {
    * Proxy the linksets
    */
   router.use('/signposting**', createProxyMiddleware({
-    target: `${environment.rest.baseUrl}`,
+    target: `${REST_BASE_URL}`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
     changeOrigin: true,
   }));
@@ -218,7 +221,7 @@ export function app() {
  * The callback function to serve server side angular
  */
 function ngApp(req, res, next) {
-  if (environment.ssr.enabled) {
+  if (environment.ssr.enabled && req.method === 'GET' && (req.path === '/' || environment.ssr.paths.some(pathPrefix => req.path.startsWith(pathPrefix)))) {
     // Render the page to user via SSR (server side rendering)
     serverSideRender(req, res, next);
   } else {
@@ -266,6 +269,11 @@ function serverSideRender(req, res, next, sendToUser: boolean = true) {
     })
     .then((html) => {
       if (hasValue(html)) {
+        // Replace REST URL with UI URL
+        if (environment.ssr.replaceRestUrl && REST_BASE_URL !== environment.rest.baseUrl) {
+          html = html.replace(new RegExp(REST_BASE_URL, 'g'), environment.rest.baseUrl);
+        }
+
         // save server side rendered page to cache (if any are enabled)
         saveToCache(req, html);
         if (sendToUser) {
@@ -623,7 +631,7 @@ function start() {
  * The callback function to serve health check requests
  */
 function healthCheck(req, res) {
-  const baseUrl = `${environment.rest.baseUrl}${environment.actuators.endpointPath}`;
+  const baseUrl = `${REST_BASE_URL}${environment.actuators.endpointPath}`;
   axios.get(baseUrl)
     .then((response) => {
       res.status(response.status).send(response.data);
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 c164cc5c31..cda6b805bc 100644
--- a/src/app/access-control/bulk-access/bulk-access.component.html
+++ b/src/app/access-control/bulk-access/bulk-access.component.html
@@ -10,7 +10,7 @@
     <button class="btn btn-outline-primary mr-3" (click)="reset()">
       {{ 'access-control-cancel' | translate }}
     </button>
-    <button class="btn btn-primary" [disabled]="!canExport()" (click)="submit()">
+    <button class="btn btn-primary" [dsBtnDisabled]="!canExport()" (click)="submit()">
       {{ 'access-control-execute' | translate }}
     </button>
   </div>
diff --git a/src/app/access-control/bulk-access/bulk-access.component.ts b/src/app/access-control/bulk-access/bulk-access.component.ts
index bd8e893b59..a1608d27d0 100644
--- a/src/app/access-control/bulk-access/bulk-access.component.ts
+++ b/src/app/access-control/bulk-access/bulk-access.component.ts
@@ -14,6 +14,7 @@ import {
 } from 'rxjs/operators';
 
 import { BulkAccessControlService } from '../../shared/access-control-form-container/bulk-access-control.service';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { SelectableListState } from '../../shared/object-list/selectable-list/selectable-list.reducer';
 import { SelectableListService } from '../../shared/object-list/selectable-list/selectable-list.service';
 import { BulkAccessBrowseComponent } from './browse/bulk-access-browse.component';
@@ -27,6 +28,7 @@ import { BulkAccessSettingsComponent } from './settings/bulk-access-settings.com
     TranslateModule,
     BulkAccessSettingsComponent,
     BulkAccessBrowseComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
index c636b72d56..cd7441022c 100644
--- a/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.spec.ts
@@ -42,6 +42,7 @@ import { EPersonDataService } from '../../core/eperson/eperson-data.service';
 import { EPerson } from '../../core/eperson/models/eperson.model';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { FormBuilderService } from '../../shared/form/builder/form-builder.service';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { getMockFormBuilderService } from '../../shared/mocks/form-builder-service.mock';
@@ -151,7 +152,7 @@ describe('EPeopleRegistryComponent', () => {
     paginationService = new PaginationServiceStub();
     TestBed.configureTestingModule({
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule.withRoutes([]),
-        TranslateModule.forRoot(), EPeopleRegistryComponent],
+        TranslateModule.forRoot(), EPeopleRegistryComponent, BtnDisabledDirective],
       providers: [
         { provide: EPersonDataService, useValue: ePersonDataServiceStub },
         { provide: NotificationsService, useValue: new NotificationsServiceStub() },
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 ae1046be45..3aa4d66b05 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
@@ -25,7 +25,7 @@
           </button>
         </div>
         <div *ngIf="displayResetPassword" between class="btn-group">
-          <button class="btn btn-primary" [disabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
+          <button class="btn btn-primary" [dsBtnDisabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
             <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
           </button>
         </div>
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
index e61f95d6e5..c5c9407377 100644
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.spec.ts
@@ -43,6 +43,7 @@ import { GroupDataService } from '../../../core/eperson/group-data.service';
 import { EPerson } from '../../../core/eperson/models/eperson.model';
 import { PaginationService } from '../../../core/pagination/pagination.service';
 import { PageInfo } from '../../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
 import { FormComponent } from '../../../shared/form/form.component';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
@@ -221,7 +222,7 @@ describe('EPersonFormComponent', () => {
     route = new ActivatedRouteStub();
     router = new RouterStub();
     TestBed.configureTestingModule({
-      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
+      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BtnDisabledDirective, BrowserModule,
         RouterModule.forRoot([]),
         TranslateModule.forRoot(),
         EPersonFormComponent,
@@ -516,7 +517,8 @@ describe('EPersonFormComponent', () => {
       // ePersonDataServiceStub.activeEPerson = eperson;
       spyOn(component.epersonService, 'deleteEPerson').and.returnValue(createSuccessfulRemoteDataObject$('No Content', 204));
       const deleteButton = fixture.debugElement.query(By.css('.delete-button'));
-      expect(deleteButton.nativeElement.disabled).toBe(false);
+      expect(deleteButton.nativeElement.getAttribute('aria-disabled')).toBeNull();
+      expect(deleteButton.nativeElement.classList.contains('disabled')).toBeFalse();
       deleteButton.triggerEventHandler('click', null);
       fixture.detectChanges();
       expect(component.epersonService.deleteEPerson).toHaveBeenCalledWith(eperson);
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
index 942481c4fd..c7b57c986d 100644
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.ts
@@ -65,6 +65,7 @@ import {
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { Registration } from '../../../core/shared/registration.model';
 import { TYPE_REQUEST_FORGOT } from '../../../register-email-form/register-email-form.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ConfirmationModalComponent } from '../../../shared/confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../../shared/empty.util';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
@@ -92,6 +93,7 @@ import { ValidateEmailNotTaken } from './validators/email-taken.validator';
     PaginationComponent,
     RouterLink,
     HasNoValuePipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 591d80bdd5..d289d036bb 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
@@ -35,14 +35,14 @@
             <div class="btn-group edit-field">
               <button (click)="deleteMemberFromGroup(epersonDTO.eperson)"
                       *ngIf="epersonDTO.ableToDelete"
-                      [disabled]="actionConfig.remove.disabled"
+                      [dsBtnDisabled]="actionConfig.remove.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.remove.css]"
                       title="{{messagePrefix + '.table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                 <i [ngClass]="actionConfig.remove.icon"></i>
               </button>
               <button *ngIf="!epersonDTO.ableToDelete"
                       (click)="addMemberToGroup(epersonDTO.eperson)"
-                      [disabled]="actionConfig.add.disabled"
+                      [dsBtnDisabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(epersonDTO.eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>
@@ -122,7 +122,7 @@
           <td class="align-middle">
             <div class="btn-group edit-field">
               <button (click)="addMemberToGroup(eperson)"
-                      [disabled]="actionConfig.add.disabled"
+                      [dsBtnDisabled]="actionConfig.add.disabled"
                       [ngClass]="['btn btn-sm', actionConfig.add.css]"
                       title="{{messagePrefix + '.table.edit.buttons.add' | translate: { name: dsoNameService.getName(eperson) } }}">
                 <i [ngClass]="actionConfig.add.icon"></i>
diff --git a/src/app/access-control/group-registry/group-form/members-list/members-list.component.ts b/src/app/access-control/group-registry/group-form/members-list/members-list.component.ts
index 9b123ae447..22934394c8 100644
--- a/src/app/access-control/group-registry/group-form/members-list/members-list.component.ts
+++ b/src/app/access-control/group-registry/group-form/members-list/members-list.component.ts
@@ -54,6 +54,7 @@ import {
   getFirstCompletedRemoteData,
   getRemoteDataPayload,
 } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { ContextHelpDirective } from '../../../../shared/context-help.directive';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
@@ -113,6 +114,7 @@ export interface EPersonListActionConfig {
     RouterLink,
     NgClass,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 c2d998d954..4150e2560c 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -69,7 +69,7 @@
                       <i class="fas fa-edit fa-fw"></i>
                     </button>
                     <button *ngSwitchCase="false"
-                      [disabled]="true"
+                      [dsBtnDisabled]="true"
                       class="btn btn-outline-primary btn-sm btn-edit"
                       placement="left"
                       [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
diff --git a/src/app/access-control/group-registry/groups-registry.component.spec.ts b/src/app/access-control/group-registry/groups-registry.component.spec.ts
index 43c72843e5..aaea59cead 100644
--- a/src/app/access-control/group-registry/groups-registry.component.spec.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.spec.ts
@@ -50,6 +50,7 @@ import { RouteService } from '../../core/services/route.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { NoContent } from '../../core/shared/NoContent.model';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   DSONameServiceMock,
   UNDEFINED_NAME,
@@ -208,6 +209,7 @@ describe('GroupsRegistryComponent', () => {
       imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule,
         TranslateModule.forRoot(),
         GroupsRegistryComponent,
+        BtnDisabledDirective,
       ],
       providers: [GroupsRegistryComponent,
         { provide: DSONameService, useValue: new DSONameServiceMock() },
@@ -278,7 +280,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
 
@@ -312,7 +315,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeFalse();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBeNull();
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeFalse();
         });
       });
     });
@@ -331,7 +335,8 @@ describe('GroupsRegistryComponent', () => {
         const editButtonsFound = fixture.debugElement.queryAll(By.css('#groups tr td:nth-child(5) button.btn-edit'));
         expect(editButtonsFound.length).toEqual(2);
         editButtonsFound.forEach((editButtonFound) => {
-          expect(editButtonFound.nativeElement.disabled).toBeTrue();
+          expect(editButtonFound.nativeElement.getAttribute('aria-disabled')).toBe('true');
+          expect(editButtonFound.nativeElement.classList.contains('disabled')).toBeTrue();
         });
       });
     });
diff --git a/src/app/access-control/group-registry/groups-registry.component.ts b/src/app/access-control/group-registry/groups-registry.component.ts
index dec3dc955d..07b7317a1e 100644
--- a/src/app/access-control/group-registry/groups-registry.component.ts
+++ b/src/app/access-control/group-registry/groups-registry.component.ts
@@ -62,6 +62,7 @@ import {
   getRemoteDataPayload,
 } from '../../core/shared/operators';
 import { PageInfo } from '../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { hasValue } from '../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -84,6 +85,7 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
     NgSwitchCase,
     NgbTooltipModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/admin/admin-reports/filtered-items/filtered-items.component.html b/src/app/admin/admin-reports/filtered-items/filtered-items.component.html
index 4b6679bdbc..a765c4a190 100644
--- a/src/app/admin/admin-reports/filtered-items/filtered-items.component.html
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items.component.html
@@ -54,7 +54,7 @@
                                             <div class="col-auto">
                                                 <button class="btn btn-light" (click)="addQueryPredicate()">+</button>
                                                 &nbsp;
-                                                <button class="btn btn-light" [disabled]="deleteQueryPredicateDisabled()" (click)="deleteQueryPredicate(i)">–</button>
+                                                <button class="btn btn-light" [dsBtnDisabled]="deleteQueryPredicateDisabled()" (click)="deleteQueryPredicate(i)">–</button>
                                             </div>
                                         </div>
                                     </div>
@@ -158,8 +158,8 @@
                                 {{'admin.reports.commons.page' | translate}} {{ currentPage + 1 }} {{'admin.reports.commons.of' | translate}} {{ pageCount() }}
                             </div>
                             <div>
-                                <button id="prev" class="btn btn-light" (click)="prevPage()" [disabled]="!canNavigatePrevious()">{{'admin.reports.commons.previous-page' | translate}}</button>
-                                <button id="next" class="btn btn-light" (click)="nextPage()" [disabled]="!canNavigateNext()">{{'admin.reports.commons.next-page' | translate}}</button>
+                                <button id="prev" class="btn btn-light" (click)="prevPage()" [dsBtnDisabled]="!canNavigatePrevious()">{{'admin.reports.commons.previous-page' | translate}}</button>
+                                <button id="next" class="btn btn-light" (click)="nextPage()" [dsBtnDisabled]="!canNavigateNext()">{{'admin.reports.commons.next-page' | translate}}</button>
 <!--
                                 <button id="export">{{'admin.reports.commons.export' | translate}}</button>
 -->
diff --git a/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts b/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
index 4cb93aa9be..04ee4894ec 100644
--- a/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
@@ -43,6 +43,7 @@ import { getFirstSucceededRemoteListPayload } from 'src/app/core/shared/operator
 import { isEmpty } from 'src/app/shared/empty.util';
 import { environment } from 'src/environments/environment';
 
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { FiltersComponent } from '../filters-section/filters-section.component';
 import { FilteredItems } from './filtered-items-model';
 import { OptionVO } from './option-vo.model';
@@ -64,6 +65,7 @@ import { QueryPredicate } from './query-predicate.model';
     NgIf,
     NgForOf,
     FiltersComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index 1b09d330c2..43d314ecdd 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -84,7 +84,7 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
     this.sidebarActiveBg$ = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
     this.isSidebarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
     this.isSidebarPreviewCollapsed$ = this.menuService.isMenuPreviewCollapsed(this.menuID);
-    this.isExpanded$ = combineLatestObservable([this.active, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
+    this.isExpanded$ = combineLatestObservable([this.active$, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
       map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))),
     );
   }
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 61a04c8adb..77b29206cb 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -54,6 +54,7 @@ import {
 } from './app-routes';
 import { BROWSE_BY_DECORATOR_MAP } from './browse-by/browse-by-switcher/browse-by-decorator';
 import { AuthInterceptor } from './core/auth/auth.interceptor';
+import { DspaceRestInterceptor } from './core/dspace-rest/dspace-rest.interceptor';
 import { LocaleInterceptor } from './core/locale/locale.interceptor';
 import { LogInterceptor } from './core/log/log.interceptor';
 import {
@@ -148,6 +149,11 @@ export const commonAppConfig: ApplicationConfig = {
       useClass: LogInterceptor,
       multi: true,
     },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: DspaceRestInterceptor,
+      multi: true,
+    },
     // register the dynamic matcher used by form. MUST be provided by the app module
     ...DYNAMIC_MATCHER_PROVIDERS,
     provideCore(),
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
index f7d2c60832..259ab599cb 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngVar="(bitstreamRD$ | async) as bitstreamRD">
-  <div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
-    <div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
+  <div class="container">
+    <div class="row" *ngIf="bitstreamRD?.hasSucceeded">
       <div class="col-md-2">
         <ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
       </div>
@@ -27,7 +27,7 @@
       </div>
     </div>
     <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
-    <ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
+    <ds-loading *ngIf="!bitstreamRD || bitstreamRD?.isLoading"
                 message="{{'loading.bitstream' | translate}}"></ds-loading>
   </div>
 </ng-container>
diff --git a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
index 9243a36491..7da9e040ce 100644
--- a/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
+++ b/src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.spec.ts
@@ -261,7 +261,7 @@ describe('EditBitstreamPageComponent', () => {
       });
 
       it('should select the correct format', () => {
-        expect(rawForm.formatContainer.selectedFormat).toEqual(selectedFormat.id);
+        expect(rawForm.formatContainer.selectedFormat).toEqual(selectedFormat.shortDescription);
       });
 
       it('should put the \"New Format\" input on invisible', () => {
@@ -292,7 +292,13 @@ describe('EditBitstreamPageComponent', () => {
 
     describe('when an unknown format is selected', () => {
       beforeEach(() => {
-        comp.updateNewFormatLayout(allFormats[0].id);
+        comp.onChange({
+          model: {
+            id: 'selectedFormat',
+            value: allFormats[0],
+          },
+        });
+        comp.updateNewFormatLayout();
       });
 
       it('should remove the invisible class from the \"New Format\" input', () => {
@@ -394,9 +400,10 @@ describe('EditBitstreamPageComponent', () => {
 
       describe('when selected format has changed', () => {
         beforeEach(() => {
-          comp.formGroup.patchValue({
-            formatContainer: {
-              selectedFormat: allFormats[2].id,
+          comp.onChange({
+            model: {
+              id: 'selectedFormat',
+              value: allFormats[2],
             },
           });
           fixture.detectChanges();
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 36b0816ade..9f1a84c19d 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
@@ -21,7 +21,6 @@ import {
   DynamicFormLayout,
   DynamicFormService,
   DynamicInputModel,
-  DynamicSelectModel,
 } from '@ng-dynamic-forms/core';
 import {
   TranslateModule,
@@ -39,23 +38,24 @@ import {
   filter,
   map,
   switchMap,
+  take,
   tap,
 } from 'rxjs/operators';
 
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { FindAllDataImpl } from '../../core/data/base/find-all-data';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
 import { BitstreamFormatDataService } from '../../core/data/bitstream-format-data.service';
-import { PaginatedList } from '../../core/data/paginated-list.model';
 import { PrimaryBitstreamService } from '../../core/data/primary-bitstream.service';
 import { RemoteData } from '../../core/data/remote-data';
 import { Bitstream } from '../../core/shared/bitstream.model';
 import { BitstreamFormat } from '../../core/shared/bitstream-format.model';
+import { BITSTREAM_FORMAT } from '../../core/shared/bitstream-format.resource-type';
 import { BitstreamFormatSupportLevel } from '../../core/shared/bitstream-format-support-level';
 import { Bundle } from '../../core/shared/bundle.model';
 import { Item } from '../../core/shared/item.model';
 import { Metadata } from '../../core/shared/metadata.utils';
 import {
-  getAllSucceededRemoteDataPayload,
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
   getFirstSucceededRemoteDataPayload,
@@ -72,6 +72,7 @@ import { ErrorComponent } from '../../shared/error/error.component';
 import { DynamicCustomSwitchModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.model';
 import { DsDynamicInputModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-input.model';
 import { DsDynamicTextAreaModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/ds-dynamic-textarea.model';
+import { DynamicScrollableDropdownModel } from '../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model';
 import { FormComponent } from '../../shared/form/form.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -109,12 +110,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   bitstreamRD$: Observable<RemoteData<Bitstream>>;
 
-  /**
-   * The formats their remote data observable
-   * Tracks changes and updates the view
-   */
-  bitstreamFormatsRD$: Observable<RemoteData<PaginatedList<BitstreamFormat>>>;
-
   /**
    * The UUID of the primary bitstream for this bundle
    */
@@ -130,11 +125,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   originalFormat: BitstreamFormat;
 
-  /**
-   * A list of all available bitstream formats
-   */
-  formats: BitstreamFormat[];
-
   /**
    * @type {string} Key prefix used to generate form messages
    */
@@ -178,7 +168,10 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   /**
    * Options for fetching all bitstream formats
    */
-  findAllOptions = { elementsPerPage: 9999 };
+  findAllOptions = {
+    elementsPerPage: 20,
+    currentPage: 1,
+  };
 
   /**
    * The Dynamic Input Model for the file's name
@@ -218,9 +211,22 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   /**
    * The Dynamic Input Model for the selected format
    */
-  selectedFormatModel = new DynamicSelectModel({
+  selectedFormatModel = new DynamicScrollableDropdownModel({
     id: 'selectedFormat',
     name: 'selectedFormat',
+    displayKey: 'shortDescription',
+    repeatable: false,
+    metadataFields: [],
+    submissionId: '',
+    hasSelectableMetadata: false,
+    resourceType: BITSTREAM_FORMAT,
+    formatFunction: (format: BitstreamFormat | string) => {
+      if (format instanceof  BitstreamFormat) {
+        return hasValue(format) && format.supportLevel === BitstreamFormatSupportLevel.Unknown ? this.translate.instant(this.KEY_PREFIX + 'selectedFormat.unknown') : format.shortDescription;
+      } else {
+        return format;
+      }
+    },
   });
 
   /**
@@ -438,6 +444,11 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    * @private
    */
   private bundle: Bundle;
+  /**
+   * The currently selected format
+   * @private
+   */
+  private selectedFormat: BitstreamFormat;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -463,18 +474,12 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
     this.itemId = this.route.snapshot.queryParams.itemId;
     this.entityType = this.route.snapshot.queryParams.entityType;
     this.bitstreamRD$ = this.route.data.pipe(map((data: any) => data.bitstream));
-    this.bitstreamFormatsRD$ = this.bitstreamFormatService.findAll(this.findAllOptions);
 
     const bitstream$ = this.bitstreamRD$.pipe(
       getFirstSucceededRemoteData(),
       getRemoteDataPayload(),
     );
 
-    const allFormats$ = this.bitstreamFormatsRD$.pipe(
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
-    );
-
     const bundle$ = bitstream$.pipe(
       switchMap((bitstream: Bitstream) => bitstream.bundle),
       getFirstSucceededRemoteDataPayload(),
@@ -490,24 +495,31 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       switchMap((bundle: Bundle) => bundle.item),
       getFirstSucceededRemoteDataPayload(),
     );
+    const format$ = bitstream$.pipe(
+      switchMap(bitstream => bitstream.format),
+      getFirstSucceededRemoteDataPayload(),
+    );
+
     this.subs.push(
       observableCombineLatest(
         bitstream$,
-        allFormats$,
         bundle$,
         primaryBitstream$,
         item$,
-      ).pipe()
-        .subscribe(([bitstream, allFormats, bundle, primaryBitstream, item]) => {
-          this.bitstream = bitstream as Bitstream;
-          this.formats = allFormats.page;
-          this.bundle = bundle;
-          // hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
-          // be a success response, but empty
-          this.primaryBitstreamUUID = hasValue(primaryBitstream) ? primaryBitstream.uuid : null;
-          this.itemId = item.uuid;
-          this.setIiifStatus(this.bitstream);
-        }),
+        format$,
+      ).subscribe(([bitstream, bundle, primaryBitstream, item, format]) => {
+        this.bitstream = bitstream as Bitstream;
+        this.bundle = bundle;
+        this.selectedFormat = format;
+        // hasValue(primaryBitstream) because if there's no primaryBitstream on the bundle it will
+        // be a success response, but empty
+        this.primaryBitstreamUUID = hasValue(primaryBitstream) ? primaryBitstream.uuid : null;
+        this.itemId = item.uuid;
+        this.setIiifStatus(this.bitstream);
+      }),
+      format$.pipe(take(1)).subscribe(
+        (format) => this.originalFormat = format,
+      ),
     );
 
     this.subs.push(
@@ -523,7 +535,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    */
   setForm() {
     this.formGroup = this.formService.createFormGroup(this.formModel);
-    this.updateFormatModel();
     this.updateForm(this.bitstream);
     this.updateFieldTranslations();
   }
@@ -542,6 +553,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
         description: bitstream.firstMetadataValue('dc.description'),
       },
       formatContainer: {
+        selectedFormat: this.selectedFormat.shortDescription,
         newFormat: hasValue(bitstream.firstMetadata('dc.format')) ? bitstream.firstMetadata('dc.format').value : undefined,
       },
     });
@@ -561,36 +573,16 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
         },
       });
     }
-    this.bitstream.format.pipe(
-      getAllSucceededRemoteDataPayload(),
-    ).subscribe((format: BitstreamFormat) => {
-      this.originalFormat = format;
-      this.formGroup.patchValue({
-        formatContainer: {
-          selectedFormat: format.id,
-        },
-      });
-      this.updateNewFormatLayout(format.id);
-    });
+    this.updateNewFormatLayout();
   }
 
-  /**
-   * Create the list of unknown format IDs an add options to the selectedFormatModel
-   */
-  updateFormatModel() {
-    this.selectedFormatModel.options = this.formats.map((format: BitstreamFormat) =>
-      Object.assign({
-        value: format.id,
-        label: this.isUnknownFormat(format.id) ? this.translate.instant(this.KEY_PREFIX + 'selectedFormat.unknown') : format.shortDescription,
-      }));
-  }
 
   /**
    * Update the layout of the "Other Format" input depending on the selected format
    * @param selectedId
    */
-  updateNewFormatLayout(selectedId: string) {
-    if (this.isUnknownFormat(selectedId)) {
+  updateNewFormatLayout() {
+    if (this.isUnknownFormat()) {
       this.formLayout.newFormat.grid.host = this.newFormatBaseLayout;
     } else {
       this.formLayout.newFormat.grid.host = this.newFormatBaseLayout + ' invisible';
@@ -601,9 +593,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
    * Is the provided format (id) part of the list of unknown formats?
    * @param id
    */
-  isUnknownFormat(id: string): boolean {
-    const format = this.formats.find((f: BitstreamFormat) => f.id === id);
-    return hasValue(format) && format.supportLevel === BitstreamFormatSupportLevel.Unknown;
+  isUnknownFormat(): boolean {
+    return hasValue(this.selectedFormat) &&  this.selectedFormat.supportLevel === BitstreamFormatSupportLevel.Unknown;
   }
 
   /**
@@ -635,7 +626,8 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   onChange(event) {
     const model = event.model;
     if (model.id === this.selectedFormatModel.id) {
-      this.updateNewFormatLayout(model.value);
+      this.selectedFormat = model.value;
+      this.updateNewFormatLayout();
     }
   }
 
@@ -645,8 +637,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
   onSubmit() {
     const updatedValues = this.formGroup.getRawValue();
     const updatedBitstream = this.formToBitstream(updatedValues);
-    const selectedFormat = this.formats.find((f: BitstreamFormat) => f.id === updatedValues.formatContainer.selectedFormat);
-    const isNewFormat = selectedFormat.id !== this.originalFormat.id;
+    const isNewFormat = this.selectedFormat.id !== this.originalFormat.id;
     const isPrimary = updatedValues.fileNamePrimaryContainer.primaryBitstream;
     const wasPrimary = this.primaryBitstreamUUID === this.bitstream.uuid;
 
@@ -698,7 +689,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       bundle$ = observableOf(this.bundle);
     }
     if (isNewFormat) {
-      bitstream$ = this.bitstreamService.updateFormat(this.bitstream, selectedFormat).pipe(
+      bitstream$ = this.bitstreamService.updateFormat(this.bitstream, this.selectedFormat).pipe(
         getFirstCompletedRemoteData(),
         map((formatResponse: RemoteData<Bitstream>) => {
           if (hasValue(formatResponse) && formatResponse.hasFailed) {
@@ -856,4 +847,7 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
       .forEach((subscription) => subscription.unsubscribe());
   }
 
+  findAllFormatsServiceFactory() {
+    return () => this.bitstreamFormatService as any as FindAllDataImpl<BitstreamFormat>;
+  }
 }
diff --git a/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
index edd7cd951a..fad573705c 100644
--- a/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.spec.ts
@@ -2,10 +2,13 @@ import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   NO_ERRORS_SCHEMA,
+  PLATFORM_ID,
 } from '@angular/core';
 import {
   ComponentFixture,
+  fakeAsync,
   TestBed,
+  tick,
   waitForAsync,
 } from '@angular/core/testing';
 import {
@@ -26,6 +29,7 @@ import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-
 import { SortDirection } from '../../core/cache/models/sort-options.model';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { PaginationService } from '../../core/pagination/pagination.service';
+import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { Community } from '../../core/shared/community.model';
 import { Item } from '../../core/shared/item.model';
 import { ThemedBrowseByComponent } from '../../shared/browse-by/themed-browse-by.component';
@@ -123,6 +127,7 @@ describe('BrowseByDateComponent', () => {
         { provide: ChangeDetectorRef, useValue: mockCdRef },
         { provide: Store, useValue: {} },
         { provide: APP_CONFIG, useValue: environment },
+        { provide: PLATFORM_ID, useValue: 'browser' },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     })
@@ -172,4 +177,33 @@ describe('BrowseByDateComponent', () => {
     //expect(comp.startsWithOptions[0]).toEqual(new Date().getUTCFullYear());
     expect(comp.startsWithOptions[0]).toEqual(1960);
   });
+
+  describe('when rendered in SSR', () => {
+    beforeEach(() => {
+      comp.platformId = 'server';
+      spyOn((comp as any).browseService, 'getBrowseItemsFor');
+    });
+
+    it('should not call getBrowseItemsFor on init', (done) => {
+      comp.ngOnInit();
+      expect((comp as any).browseService.getBrowseItemsFor).not.toHaveBeenCalled();
+      comp.loading$.subscribe((res) => {
+        expect(res).toBeFalsy();
+        done();
+      });
+    });
+  });
+
+  describe('when rendered in CSR', () => {
+    beforeEach(() => {
+      comp.platformId = 'browser';
+      spyOn((comp as any).browseService, 'getBrowseItemsFor').and.returnValue(createSuccessfulRemoteDataObject$(new BrowseEntry()));
+    });
+
+    it('should call getBrowseItemsFor on init', fakeAsync(() => {
+      comp.ngOnInit();
+      tick(100);
+      expect((comp as any).browseService.getBrowseItemsFor).toHaveBeenCalled();
+    }));
+  });
 });
diff --git a/src/app/browse-by/browse-by-date/browse-by-date.component.ts b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
index 11818ff5f1..1ebdcc838e 100644
--- a/src/app/browse-by/browse-by-date/browse-by-date.component.ts
+++ b/src/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -1,5 +1,6 @@
 import {
   AsyncPipe,
+  isPlatformServer,
   NgIf,
 } from '@angular/common';
 import {
@@ -7,6 +8,7 @@ import {
   Component,
   Inject,
   OnInit,
+  PLATFORM_ID,
 } from '@angular/core';
 import {
   ActivatedRoute,
@@ -17,10 +19,11 @@ import { TranslateModule } from '@ngx-translate/core';
 import {
   combineLatest as observableCombineLatest,
   Observable,
+  of as observableOf,
 } from 'rxjs';
 import {
+  distinctUntilChanged,
   map,
-  take,
 } from 'rxjs/operators';
 import { ThemedBrowseByComponent } from 'src/app/shared/browse-by/themed-browse-by.component';
 
@@ -28,6 +31,7 @@ import {
   APP_CONFIG,
   AppConfig,
 } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import {
@@ -38,13 +42,7 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { Item } from '../../core/shared/item.model';
-import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../shared/comcol/comcol-page-logo/comcol-page-logo.component';
 import { isValidDate } from '../../shared/date.util';
-import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import {
   hasValue,
   isNotEmpty,
@@ -52,7 +50,6 @@ import {
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-type';
-import { VarDirective } from '../../shared/utils/var.directive';
 import {
   BrowseByMetadataComponent,
   browseParamsToOptions,
@@ -64,15 +61,8 @@ import {
   templateUrl: '../browse-by-metadata/browse-by-metadata.component.html',
   standalone: true,
   imports: [
-    VarDirective,
     AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
     NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
@@ -99,27 +89,34 @@ export class BrowseByDateComponent extends BrowseByMetadataComponent implements
     @Inject(APP_CONFIG) public appConfig: AppConfig,
     public dsoNameService: DSONameService,
     protected cdRef: ChangeDetectorRef,
+    @Inject(PLATFORM_ID) public platformId: any,
   ) {
-    super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService);
+    super(route, browseService, dsoService, paginationService, router, appConfig, dsoNameService, platformId);
   }
 
   ngOnInit(): void {
+    if (!this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId)) {
+      this.loading$ = observableOf(false);
+      return;
+    }
     const sortConfig = new SortOptions('default', SortDirection.ASC);
     this.startsWithType = StartsWithType.date;
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
+    const routeParams$: Observable<Params> = observableCombineLatest([
+      this.route.params,
+      this.route.queryParams,
+    ]).pipe(
+      map(([params, queryParams]: [Params, Params]) => Object.assign({}, params, queryParams)),
+      distinctUntilChanged((prev: Params, curr: Params) => prev.id === curr.id && prev.startsWith === curr.startsWith),
+    );
     this.subs.push(
-      observableCombineLatest(
-        [ this.route.params.pipe(take(1)),
-          this.route.queryParams,
-          this.scope$,
-          this.currentPagination$,
-          this.currentSort$,
-        ]).pipe(
-        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
-        }),
-      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+      observableCombineLatest([
+        routeParams$,
+        this.scope$,
+        this.currentPagination$,
+        this.currentSort$,
+      ]).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
         const metadataKeys = params.browseDefinition ? params.browseDefinition.metadataKeys : this.defaultMetadataKeys;
         this.browseId = params.id || this.defaultBrowseId;
         this.startsWith = +params.startsWith || params.startsWith;
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
index 22e564ac27..6642b724bb 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.html
@@ -1,4 +1,4 @@
-<section class="comcol-page-browse-section">
+<section class="comcol-page-browse-section" *ngIf="(!ssrRenderingDisabled)">
   <div class="browse-by-metadata w-100">
     <ds-browse-by *ngIf="(loading$ | async) !== true" class="col-xs-12 w-100"
                          title="{{'browse.title' | translate:{
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
index b6babc97cf..623f1af8aa 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.spec.ts
@@ -1,8 +1,13 @@
 import { CommonModule } from '@angular/common';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  NO_ERRORS_SCHEMA,
+  PLATFORM_ID,
+} from '@angular/core';
 import {
   ComponentFixture,
+  fakeAsync,
   TestBed,
+  tick,
   waitForAsync,
 } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -147,6 +152,7 @@ describe('BrowseByMetadataComponent', () => {
         { provide: ThemeService, useValue: getMockThemeService() },
         { provide: SelectableListService, useValue: {} },
         { provide: HostWindowService, useValue: {} },
+        { provide: PLATFORM_ID, useValue: 'browser' },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     })
@@ -259,6 +265,35 @@ describe('BrowseByMetadataComponent', () => {
       expect(result.fetchThumbnail).toBeTrue();
     });
   });
+
+  describe('when rendered in SSR', () => {
+    beforeEach(() => {
+      comp.ssrRenderingDisabled = true;
+      spyOn((comp as any).browseService, 'getBrowseEntriesFor').and.returnValue(createSuccessfulRemoteDataObject$(null));
+    });
+
+    it('should not call getBrowseEntriesFor on init', (done) => {
+      comp.ngOnInit();
+      expect((comp as any).browseService.getBrowseEntriesFor).not.toHaveBeenCalled();
+      comp.loading$.subscribe((res) => {
+        expect(res).toBeFalsy();
+        done();
+      });
+    });
+  });
+
+  describe('when rendered in CSR', () => {
+    beforeEach(() => {
+      comp.ssrRenderingDisabled = false;
+      spyOn((comp as any).browseService, 'getBrowseEntriesFor').and.returnValue(createSuccessfulRemoteDataObject$(new BrowseEntry()));
+    });
+
+    it('should call getBrowseEntriesFor on init', fakeAsync(() => {
+      comp.ngOnInit();
+      tick(100);
+      expect((comp as any).browseService.getBrowseEntriesFor).toHaveBeenCalled();
+    }));
+  });
 });
 
 export function toRemoteData(objects: any[]): Observable<RemoteData<PaginatedList<any>>> {
diff --git a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index d17c2a1a7b..4cb07abd87 100644
--- a/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -1,5 +1,6 @@
 import {
   AsyncPipe,
+  isPlatformServer,
   NgIf,
 } from '@angular/common';
 import {
@@ -9,6 +10,8 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
+  PLATFORM_ID,
+  SimpleChanges,
 } from '@angular/core';
 import {
   ActivatedRoute,
@@ -24,8 +27,8 @@ import {
   Subscription,
 } from 'rxjs';
 import {
+  distinctUntilChanged,
   map,
-  take,
 } from 'rxjs/operators';
 import { ThemedBrowseByComponent } from 'src/app/shared/browse-by/themed-browse-by.component';
 
@@ -33,6 +36,7 @@ import {
   APP_CONFIG,
   AppConfig,
 } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-options.model';
@@ -48,12 +52,6 @@ import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { Context } from '../../core/shared/context.model';
 import { Item } from '../../core/shared/item.model';
 import { getFirstSucceededRemoteData } from '../../core/shared/operators';
-import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../shared/comcol/comcol-page-logo/comcol-page-logo.component';
-import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import {
   hasValue,
   isNotEmpty,
@@ -61,7 +59,6 @@ import {
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-type';
-import { VarDirective } from '../../shared/utils/var.directive';
 import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
 
 export const BBM_PAGINATION_ID = 'bbm';
@@ -71,15 +68,8 @@ export const BBM_PAGINATION_ID = 'bbm';
   styleUrls: ['./browse-by-metadata.component.scss'],
   templateUrl: './browse-by-metadata.component.html',
   imports: [
-    VarDirective,
     AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
     NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
@@ -114,6 +104,11 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    */
   @Input() displayTitle = true;
 
+  /**
+   * Defines whether to fetch search results during SSR execution
+   */
+  @Input() renderOnServerSide: boolean;
+
   scope$: BehaviorSubject<string> = new BehaviorSubject(undefined);
 
   /**
@@ -194,6 +189,10 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
    * Observable determining if the loading animation needs to be shown
    */
   loading$ = observableOf(true);
+  /**
+   * Whether this component should be rendered or not in SSR
+   */
+  ssrRenderingDisabled = false;
 
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
@@ -202,6 +201,7 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
                      protected router: Router,
                      @Inject(APP_CONFIG) public appConfig: AppConfig,
                      public dsoNameService: DSONameService,
+                     @Inject(PLATFORM_ID) public platformId: any,
   ) {
     this.fetchThumbnails = this.appConfig.browseBy.showThumbnails;
     this.paginationConfig = Object.assign(new PaginationComponentOptions(), {
@@ -209,27 +209,32 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
       currentPage: 1,
       pageSize: this.appConfig.browseBy.pageSize,
     });
+    this.ssrRenderingDisabled = !this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId);
   }
 
 
   ngOnInit(): void {
-
+    if (this.ssrRenderingDisabled) {
+      this.loading$ = observableOf(false);
+      return;
+    }
     const sortConfig = new SortOptions('default', SortDirection.ASC);
-    this.updatePage(getBrowseSearchOptions(this.defaultBrowseId, this.paginationConfig, sortConfig));
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
+    const routeParams$: Observable<Params> = observableCombineLatest([
+      this.route.params,
+      this.route.queryParams,
+    ]).pipe(
+      map(([params, queryParams]: [Params, Params]) => Object.assign({}, params, queryParams)),
+      distinctUntilChanged((prev: Params, curr: Params) => prev.id === curr.id && prev.authority === curr.authority && prev.value === curr.value && prev.startsWith === curr.startsWith),
+    );
     this.subs.push(
-      observableCombineLatest(
-        [ this.route.params.pipe(take(1)),
-          this.route.queryParams,
-          this.scope$,
-          this.currentPagination$,
-          this.currentSort$,
-        ]).pipe(
-        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
-        }),
-      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+      observableCombineLatest([
+        routeParams$,
+        this.scope$,
+        this.currentPagination$,
+        this.currentSort$,
+      ]).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
         this.browseId = params.id || this.defaultBrowseId;
         this.authority = params.authority;
 
@@ -257,8 +262,10 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
 
   }
 
-  ngOnChanges(): void {
-    this.scope$.next(this.scope);
+  ngOnChanges(changes: SimpleChanges): void {
+    if (hasValue(changes.scope)) {
+      this.scope$.next(this.scope);
+    }
   }
 
   /**
@@ -336,7 +343,6 @@ export class BrowseByMetadataComponent implements OnInit, OnChanges, OnDestroy {
     this.paginationService.clearPagination(this.paginationConfig.id);
   }
 
-
 }
 
 /**
diff --git a/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts b/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
index e2e022391a..1b6d96d3f8 100644
--- a/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.spec.ts
@@ -5,7 +5,9 @@ import {
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import {
   ComponentFixture,
+  fakeAsync,
   TestBed,
+  tick,
   waitForAsync,
 } from '@angular/core/testing';
 import {
@@ -23,6 +25,7 @@ import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { ItemDataService } from '../../core/data/item-data.service';
 import { PaginationService } from '../../core/pagination/pagination.service';
+import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { Community } from '../../core/shared/community.model';
 import { Item } from '../../core/shared/item.model';
 import { ThemedBrowseByComponent } from '../../shared/browse-by/themed-browse-by.component';
@@ -81,6 +84,7 @@ describe('BrowseByTitleComponent', () => {
 
   const activatedRouteStub = Object.assign(new ActivatedRouteStub(), {
     params: observableOf({}),
+    queryParams: observableOf({}),
     data: observableOf({ metadata: 'title' }),
   });
 
@@ -127,4 +131,35 @@ describe('BrowseByTitleComponent', () => {
       expect(result.payload.page).toEqual(mockItems);
     });
   });
+
+  describe('when rendered in SSR', () => {
+    beforeEach(() => {
+      comp.platformId = 'server';
+      spyOn((comp as any).browseService, 'getBrowseItemsFor');
+      fixture.detectChanges();
+    });
+
+    it('should not call getBrowseItemsFor on init', (done) => {
+      comp.ngOnInit();
+      expect((comp as any).browseService.getBrowseItemsFor).not.toHaveBeenCalled();
+      comp.loading$.subscribe((res) => {
+        expect(res).toBeFalsy();
+        done();
+      });
+    });
+  });
+
+  describe('when rendered in CSR', () => {
+    beforeEach(() => {
+      comp.platformId = 'browser';
+      fixture.detectChanges();
+      spyOn((comp as any).browseService, 'getBrowseItemsFor').and.returnValue(createSuccessfulRemoteDataObject$(new BrowseEntry()));
+    });
+
+    it('should call getBrowseItemsFor on init', fakeAsync(() => {
+      comp.ngOnInit();
+      tick(100);
+      expect((comp as any).browseService.getBrowseItemsFor).toHaveBeenCalled();
+    }));
+  });
 });
diff --git a/src/app/browse-by/browse-by-title/browse-by-title.component.ts b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
index 296386d9d9..7d6e3ce716 100644
--- a/src/app/browse-by/browse-by-title/browse-by-title.component.ts
+++ b/src/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -1,5 +1,6 @@
 import {
   AsyncPipe,
+  isPlatformServer,
   NgIf,
 } from '@angular/common';
 import {
@@ -8,26 +9,24 @@ import {
 } from '@angular/core';
 import { Params } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { combineLatest as observableCombineLatest } from 'rxjs';
 import {
+  combineLatest as observableCombineLatest,
+  Observable,
+  of as observableOf,
+} from 'rxjs';
+import {
+  distinctUntilChanged,
   map,
-  take,
 } from 'rxjs/operators';
 
+import { environment } from '../../../environments/environment';
 import {
   SortDirection,
   SortOptions,
 } from '../../core/cache/models/sort-options.model';
 import { ThemedBrowseByComponent } from '../../shared/browse-by/themed-browse-by.component';
-import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../shared/comcol/comcol-page-logo/comcol-page-logo.component';
-import { DsoEditMenuComponent } from '../../shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { VarDirective } from '../../shared/utils/var.directive';
 import {
   BrowseByMetadataComponent,
   browseParamsToOptions,
@@ -39,15 +38,8 @@ import {
   templateUrl: '../browse-by-metadata/browse-by-metadata.component.html',
   standalone: true,
   imports: [
-    VarDirective,
     AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
     NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
@@ -59,21 +51,27 @@ import {
 export class BrowseByTitleComponent extends BrowseByMetadataComponent implements OnInit {
 
   ngOnInit(): void {
+    if (!this.renderOnServerSide && !environment.ssr.enableBrowseComponent && isPlatformServer(this.platformId)) {
+      this.loading$ = observableOf(false);
+      return;
+    }
     const sortConfig = new SortOptions('dc.title', SortDirection.ASC);
     this.currentPagination$ = this.paginationService.getCurrentPagination(this.paginationConfig.id, this.paginationConfig);
     this.currentSort$ = this.paginationService.getCurrentSort(this.paginationConfig.id, sortConfig);
+    const routeParams$: Observable<Params> = observableCombineLatest([
+      this.route.params,
+      this.route.queryParams,
+    ]).pipe(
+      map(([params, queryParams]: [Params, Params]) => Object.assign({}, params, queryParams)),
+      distinctUntilChanged((prev: Params, curr: Params) => prev.id === curr.id && prev.startsWith === curr.startsWith),
+    );
     this.subs.push(
-      observableCombineLatest(
-        [ this.route.params.pipe(take(1)),
-          this.route.queryParams,
-          this.scope$,
-          this.currentPagination$,
-          this.currentSort$,
-        ]).pipe(
-        map(([routeParams, queryParams, scope, currentPage, currentSort]) => {
-          return [Object.assign({}, routeParams, queryParams), scope, currentPage, currentSort];
-        }),
-      ).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
+      observableCombineLatest([
+        routeParams$,
+        this.scope$,
+        this.currentPagination$,
+        this.currentSort$,
+      ]).subscribe(([params, scope, currentPage, currentSort]: [Params, string, PaginationComponentOptions, SortOptions]) => {
         this.startsWith = +params.startsWith || params.startsWith;
         this.browseId = params.id || this.defaultBrowseId;
         this.updatePageWithItems(browseParamsToOptions(params, scope, currentPage, currentSort, this.browseId, this.fetchThumbnails), undefined, undefined);
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 53c3b45cfa..0cdba00f03 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
@@ -6,10 +6,10 @@
                 <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">
-                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
                       <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
                     </button>
-                    <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                    <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
                       <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
                       <span *ngIf="(processing$ | async) !== true"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
                     </button>
diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts b/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
index dbb5f8846f..acc716b52a 100644
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.ts
@@ -15,6 +15,7 @@ import {
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { CollectionDataService } from '../../core/data/collection-data.service';
 import { Collection } from '../../core/shared/collection.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { DeleteComColPageComponent } from '../../shared/comcol/comcol-forms/delete-comcol-page/delete-comcol-page.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { VarDirective } from '../../shared/utils/var.directive';
@@ -31,6 +32,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
     AsyncPipe,
     NgIf,
     VarDirective,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 7edaadb0a1..1e09758bd1 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
@@ -19,32 +19,32 @@
         </div>
 
         <button *ngIf="(testConfigRunning$ |async) !== true" class="btn btn-secondary"
-                [disabled]="!(isEnabled)"
+                [dsBtnDisabled]="!(isEnabled)"
                 (click)="testConfiguration(contentSource)">
             <span>{{'collection.source.controls.test.submit' | translate}}</span>
         </button>
         <button *ngIf="(testConfigRunning$ |async)" class="btn btn-secondary"
-                [disabled]="true">
+                [dsBtnDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span>{{'collection.source.controls.test.running' | translate}}</span>
         </button>
         <button *ngIf="(importRunning$ |async) !== true" class="btn btn-primary"
-                [disabled]="!(isEnabled)"
+                [dsBtnDisabled]="!(isEnabled)"
                 (click)="importNow()">
             <span class="d-none d-sm-inline">{{'collection.source.controls.import.submit' | translate}}</span>
         </button>
         <button *ngIf="(importRunning$ |async)" class="btn btn-primary"
-                [disabled]="true">
+                [dsBtnDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span class="d-none d-sm-inline">{{'collection.source.controls.import.running' | translate}}</span>
         </button>
         <button *ngIf="(reImportRunning$ |async) !== true" class="btn btn-primary"
-                [disabled]="!(isEnabled)"
+                [dsBtnDisabled]="!(isEnabled)"
                 (click)="resetAndReimport()">
             <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.submit' | translate}}</span>
         </button>
         <button *ngIf="(reImportRunning$ |async)" class="btn btn-primary"
-                [disabled]="true">
+                [dsBtnDisabled]="true">
             <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
             <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.running' | translate}}</span>
         </button>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts
index 0caf9b0418..cbe3de1483 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.spec.ts
@@ -22,6 +22,7 @@ import { Collection } from '../../../../core/shared/collection.model';
 import { ContentSource } from '../../../../core/shared/content-source.model';
 import { ContentSourceSetSerializer } from '../../../../core/shared/content-source-set-serializer';
 import { Process } from '../../../../process-page/processes/process.model';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
 import { NotificationsServiceStub } from '../../../../shared/testing/notifications-service.stub';
@@ -104,7 +105,7 @@ describe('CollectionSourceControlsComponent', () => {
     requestService = jasmine.createSpyObj('requestService', ['removeByHrefSubstring', 'setStaleByHrefSubstring']);
 
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule, CollectionSourceControlsComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterTestingModule, CollectionSourceControlsComponent, VarDirective, BtnDisabledDirective],
       providers: [
         { provide: ScriptDataService, useValue: scriptDataService },
         { provide: ProcessDataService, useValue: processDataService },
@@ -193,9 +194,10 @@ describe('CollectionSourceControlsComponent', () => {
 
       const buttons = fixture.debugElement.queryAll(By.css('button'));
 
-      expect(buttons[0].nativeElement.disabled).toBeTrue();
-      expect(buttons[1].nativeElement.disabled).toBeTrue();
-      expect(buttons[2].nativeElement.disabled).toBeTrue();
+      buttons.forEach(button => {
+        expect(button.nativeElement.getAttribute('aria-disabled')).toBe('true');
+        expect(button.nativeElement.classList.contains('disabled')).toBeTrue();
+      });
     });
     it('should be enabled when isEnabled is true', () => {
       comp.shouldShow = true;
@@ -205,9 +207,10 @@ describe('CollectionSourceControlsComponent', () => {
 
       const buttons = fixture.debugElement.queryAll(By.css('button'));
 
-      expect(buttons[0].nativeElement.disabled).toBeFalse();
-      expect(buttons[1].nativeElement.disabled).toBeFalse();
-      expect(buttons[2].nativeElement.disabled).toBeFalse();
+      buttons.forEach(button => {
+        expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false');
+        expect(button.nativeElement.classList.contains('disabled')).toBeFalse();
+      });
     });
     it('should call the corresponding button when clicked', () => {
       spyOn(comp, 'testConfiguration');
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
index fdd65a43c7..e35a64af16 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
@@ -40,6 +40,7 @@ import {
 } from '../../../../core/shared/operators';
 import { Process } from '../../../../process-page/processes/process.model';
 import { ProcessStatus } from '../../../../process-page/processes/process-status.model';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { hasValue } from '../../../../shared/empty.util';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
 import { VarDirective } from '../../../../shared/utils/var.directive';
@@ -56,6 +57,7 @@ import { VarDirective } from '../../../../shared/utils/var.directive';
     AsyncPipe,
     NgIf,
     VarDirective,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 8f807c1aee..7aa1f1a8b7 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,7 +1,7 @@
 <div class="container-fluid">
     <div class="d-inline-block float-right space-children-mr">
         <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-                [disabled]="(hasChanges$ | async) !== true"
+                [dsBtnDisabled]="(hasChanges$ | async) !== true"
                 (click)="discard()"><i
                 class="fas fa-times"></i>
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
@@ -12,7 +12,7 @@
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
         </button>
         <button class="btn btn-primary"
-                [disabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
+                [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
                 (click)="onSubmit()"><i
                 class="fas fa-save"></i>
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
@@ -45,7 +45,7 @@
         <div class="col-12">
             <div class="d-inline-block float-right ml-1 space-children-mr">
                 <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-                        [disabled]="(hasChanges$ | async) !== true"
+                        [dsBtnDisabled]="(hasChanges$ | async) !== true"
                         (click)="discard()"><i
                         class="fas fa-times"></i>
                     <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
@@ -56,7 +56,7 @@
                     <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
                 </button>
                 <button class="btn btn-primary"
-                        [disabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
+                        [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
                         (click)="onSubmit()"><i
                         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/collection-page/edit-collection-page/collection-source/collection-source.component.ts b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
index 43614e43a6..afeb2e2352 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.ts
@@ -56,6 +56,7 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteData,
 } from '../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -81,6 +82,7 @@ import { CollectionSourceControlsComponent } from './collection-source-controls/
     ThemedLoadingComponent,
     FormComponent,
     CollectionSourceControlsComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 b241a7027c..b5d215e3b6 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
@@ -6,10 +6,10 @@
                 <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">
-                        <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [disabled]="(processing$ | async)">
+                        <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
                             <i class="fas fa-times" aria-hidden="true"></i> {{'community.delete.cancel' | translate}}
                         </button>
-                        <button class="btn btn-danger" (click)="onConfirm(dso)" [disabled]="(processing$ | async)">
+                        <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
                             <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin' aria-hidden="true"></i> {{'community.delete.processing' | translate}}</span>
                             <span *ngIf="(processing$ | async) !== true"><i class="fas fa-trash" aria-hidden="true"></i> {{'community.delete.confirm' | translate}}</span>
                         </button>
diff --git a/src/app/community-page/delete-community-page/delete-community-page.component.ts b/src/app/community-page/delete-community-page/delete-community-page.component.ts
index f35e2d6bd2..9c19a5eb47 100644
--- a/src/app/community-page/delete-community-page/delete-community-page.component.ts
+++ b/src/app/community-page/delete-community-page/delete-community-page.component.ts
@@ -15,6 +15,7 @@ import {
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
 import { CommunityDataService } from '../../core/data/community-data.service';
 import { Community } from '../../core/shared/community.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { DeleteComColPageComponent } from '../../shared/comcol/comcol-forms/delete-comcol-page/delete-comcol-page.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { VarDirective } from '../../shared/utils/var.directive';
@@ -31,6 +32,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
     AsyncPipe,
     VarDirective,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/core/auth/auth.interceptor.ts b/src/app/core/auth/auth.interceptor.ts
index 84d4c53210..d011d27059 100644
--- a/src/app/core/auth/auth.interceptor.ts
+++ b/src/app/core/auth/auth.interceptor.ts
@@ -129,12 +129,24 @@ export class AuthInterceptor implements HttpInterceptor {
    */
   private sortAuthMethods(authMethodModels: AuthMethod[]): AuthMethod[] {
     const sortedAuthMethodModels: AuthMethod[] = [];
+    let passwordAuthFound = false;
+    let ldapAuthFound = false;
+
     authMethodModels.forEach((method) => {
       if (method.authMethodType === AuthMethodType.Password) {
         sortedAuthMethodModels.push(method);
+        passwordAuthFound = true;
+      }
+      if (method.authMethodType === AuthMethodType.Ldap) {
+        ldapAuthFound = true;
       }
     });
 
+    // Using password authentication method to provide UI for LDAP authentication even if password auth is not present in server
+    if (ldapAuthFound && !(passwordAuthFound)) {
+      sortedAuthMethodModels.push(new AuthMethod(AuthMethodType.Password,0));
+    }
+
     authMethodModels.forEach((method) => {
       if (method.authMethodType !== AuthMethodType.Password) {
         sortedAuthMethodModels.push(method);
diff --git a/src/app/core/data/base/base-data.service.ts b/src/app/core/data/base/base-data.service.ts
index 979379e95b..aec9e83b1e 100644
--- a/src/app/core/data/base/base-data.service.ts
+++ b/src/app/core/data/base/base-data.service.ts
@@ -11,6 +11,7 @@ import {
   from as observableFrom,
   Observable,
   of as observableOf,
+  shareReplay,
 } from 'rxjs';
 import {
   map,
@@ -283,6 +284,10 @@ export class BaseDataService<T extends CacheableObject> implements HALDataServic
       isNotEmptyOperator(),
       take(1),
       map((href: string) => this.buildHrefFromFindOptions(href, {}, [], ...linksToFollow)),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      }),
     );
 
     const startTime: number = new Date().getTime();
@@ -337,6 +342,10 @@ export class BaseDataService<T extends CacheableObject> implements HALDataServic
       isNotEmptyOperator(),
       take(1),
       map((href: string) => this.buildHrefFromFindOptions(href, options, [], ...linksToFollow)),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
+      }),
     );
 
     const startTime: number = new Date().getTime();
diff --git a/src/app/core/data/bitstream-data.service.spec.ts b/src/app/core/data/bitstream-data.service.spec.ts
index 95fe5f593f..35fb398980 100644
--- a/src/app/core/data/bitstream-data.service.spec.ts
+++ b/src/app/core/data/bitstream-data.service.spec.ts
@@ -16,6 +16,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { RequestParam } from '../cache/models/request-param.model';
 import { ObjectCacheService } from '../cache/object-cache.service';
 import { Bitstream } from '../shared/bitstream.model';
 import { BitstreamFormat } from '../shared/bitstream-format.model';
@@ -176,4 +177,30 @@ describe('BitstreamDataService', () => {
       expect(service.invalidateByHref).toHaveBeenCalledWith('fake-bitstream2-self');
     });
   });
+
+  describe('findByItemHandle', () => {
+    it('should encode the filename correctly in the search parameters', () => {
+      const handle = '123456789/1234';
+      const sequenceId = '5';
+      const filename = 'file with spaces.pdf';
+      const searchParams = [
+        new RequestParam('handle', handle),
+        new RequestParam('sequenceId', sequenceId),
+        new RequestParam('filename', filename),
+      ];
+      const linksToFollow: FollowLinkConfig<Bitstream>[] = [];
+
+      spyOn(service as any, 'getSearchByHref').and.callThrough();
+
+      service.getSearchByHref('byItemHandle', { searchParams }, ...linksToFollow).subscribe((href) => {
+        expect(service.getSearchByHref).toHaveBeenCalledWith(
+          'byItemHandle',
+          { searchParams },
+          ...linksToFollow,
+        );
+
+        expect(href).toBe(`${url}/bitstreams/search/byItemHandle?handle=123456789%2F1234&sequenceId=5&filename=file%20with%20spaces.pdf`);
+      });
+    });
+  });
 });
diff --git a/src/app/core/data/bitstream-data.service.ts b/src/app/core/data/bitstream-data.service.ts
index 81d1d74535..cb9d487020 100644
--- a/src/app/core/data/bitstream-data.service.ts
+++ b/src/app/core/data/bitstream-data.service.ts
@@ -241,11 +241,12 @@ export class BitstreamDataService extends IdentifiableDataService<Bitstream> imp
    *                                    no valid cached version. Defaults to true
    * @param reRequestOnStale            Whether or not the request should automatically be re-
    *                                    requested after the response becomes stale
+   * @param options                     the {@link FindListOptions} for the request
    * @return {Observable<Bitstream | null>}
    *    Return an observable that constains primary bitstream information or null
    */
-  public findPrimaryBitstreamByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true): Observable<Bitstream | null> {
-    return this.bundleService.findByItemAndName(item, bundleName, useCachedVersionIfAvailable, reRequestOnStale, followLink('primaryBitstream')).pipe(
+  public findPrimaryBitstreamByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, options?: FindListOptions): Observable<Bitstream | null> {
+    return this.bundleService.findByItemAndName(item, bundleName, useCachedVersionIfAvailable, reRequestOnStale, options, followLink('primaryBitstream')).pipe(
       getFirstCompletedRemoteData(),
       switchMap((rd: RemoteData<Bundle>) => {
         if (!rd.hasSucceeded) {
diff --git a/src/app/core/data/bundle-data.service.ts b/src/app/core/data/bundle-data.service.ts
index 5d552c9bf0..79f877fadd 100644
--- a/src/app/core/data/bundle-data.service.ts
+++ b/src/app/core/data/bundle-data.service.ts
@@ -78,10 +78,14 @@ export class BundleDataService extends IdentifiableDataService<Bundle> implement
    *                                    requested after the response becomes stale
    * @param linksToFollow               List of {@link FollowLinkConfig} that indicate which
    *                                    {@link HALLink}s should be automatically resolved
+   * @param options                     the {@link FindListOptions} for the request
    */
   // TODO should be implemented rest side
-  findByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<Bundle>[]): Observable<RemoteData<Bundle>> {
-    return this.findAllByItem(item, { elementsPerPage: 9999 }, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
+  findByItemAndName(item: Item, bundleName: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, options?: FindListOptions, ...linksToFollow: FollowLinkConfig<Bundle>[]): Observable<RemoteData<Bundle>> {
+    //Since we filter by bundleName where the pagination options are not indicated we need to load all the possible bundles.
+    // This is a workaround, in substitution of the previously recursive call with expand
+    const paginationOptions = options ?? { elementsPerPage: 9999 };
+    return this.findAllByItem(item, paginationOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow).pipe(
       map((rd: RemoteData<PaginatedList<Bundle>>) => {
         if (hasValue(rd.payload) && hasValue(rd.payload.page)) {
           const matchingBundle = rd.payload.page.find((bundle: Bundle) =>
diff --git a/src/app/core/dspace-rest/dspace-rest.interceptor.spec.ts b/src/app/core/dspace-rest/dspace-rest.interceptor.spec.ts
new file mode 100644
index 0000000000..4a47ffe9fd
--- /dev/null
+++ b/src/app/core/dspace-rest/dspace-rest.interceptor.spec.ts
@@ -0,0 +1,194 @@
+import {
+  HTTP_INTERCEPTORS,
+  HttpClient,
+} from '@angular/common/http';
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
+import { PLATFORM_ID } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../config/app-config.interface';
+import { DspaceRestInterceptor } from './dspace-rest.interceptor';
+import { DspaceRestService } from './dspace-rest.service';
+
+describe('DspaceRestInterceptor', () => {
+  let httpMock: HttpTestingController;
+  let httpClient: HttpClient;
+  const appConfig: Partial<AppConfig> = {
+    rest: {
+      ssl: false,
+      host: 'localhost',
+      port: 8080,
+      nameSpace: '/server',
+      baseUrl: 'http://api.example.com/server',
+    },
+  };
+  const appConfigWithSSR: Partial<AppConfig> = {
+    rest: {
+      ssl: false,
+      host: 'localhost',
+      port: 8080,
+      nameSpace: '/server',
+      baseUrl: 'http://api.example.com/server',
+      ssrBaseUrl: 'http://ssr.example.com/server',
+    },
+  };
+
+  describe('When SSR base URL is not set ', () => {
+    describe('and it\'s in the browser', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          imports: [HttpClientTestingModule],
+          providers: [
+            DspaceRestService,
+            {
+              provide: HTTP_INTERCEPTORS,
+              useClass: DspaceRestInterceptor,
+              multi: true,
+            },
+            { provide: APP_CONFIG, useValue: appConfig },
+            { provide: PLATFORM_ID, useValue: 'browser' },
+          ],
+        });
+
+        httpMock = TestBed.inject(HttpTestingController);
+        httpClient = TestBed.inject(HttpClient);
+      });
+
+      it('should not modify the request', () => {
+        const url = 'http://api.example.com/server/items';
+        httpClient.get(url).subscribe((response) => {
+          expect(response).toBeTruthy();
+        });
+
+        const req = httpMock.expectOne(url);
+        expect(req.request.url).toBe(url);
+        req.flush({});
+        httpMock.verify();
+      });
+    });
+
+    describe('and it\'s in SSR mode', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          imports: [HttpClientTestingModule],
+          providers: [
+            DspaceRestService,
+            {
+              provide: HTTP_INTERCEPTORS,
+              useClass: DspaceRestInterceptor,
+              multi: true,
+            },
+            { provide: APP_CONFIG, useValue: appConfig },
+            { provide: PLATFORM_ID, useValue: 'server' },
+          ],
+        });
+
+        httpMock = TestBed.inject(HttpTestingController);
+        httpClient = TestBed.inject(HttpClient);
+      });
+
+      it('should not replace the base URL', () => {
+        const url = 'http://api.example.com/server/items';
+
+        httpClient.get(url).subscribe((response) => {
+          expect(response).toBeTruthy();
+        });
+
+        const req = httpMock.expectOne(url);
+        expect(req.request.url).toBe(url);
+        req.flush({});
+        httpMock.verify();
+      });
+    });
+  });
+
+  describe('When SSR base URL is set ', () => {
+    describe('and it\'s in the browser', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          imports: [HttpClientTestingModule],
+          providers: [
+            DspaceRestService,
+            {
+              provide: HTTP_INTERCEPTORS,
+              useClass: DspaceRestInterceptor,
+              multi: true,
+            },
+            { provide: APP_CONFIG, useValue: appConfigWithSSR },
+            { provide: PLATFORM_ID, useValue: 'browser' },
+          ],
+        });
+
+        httpMock = TestBed.inject(HttpTestingController);
+        httpClient = TestBed.inject(HttpClient);
+      });
+
+      it('should not modify the request', () => {
+        const url = 'http://api.example.com/server/items';
+        httpClient.get(url).subscribe((response) => {
+          expect(response).toBeTruthy();
+        });
+
+        const req = httpMock.expectOne(url);
+        expect(req.request.url).toBe(url);
+        req.flush({});
+        httpMock.verify();
+      });
+    });
+
+    describe('and it\'s in SSR mode', () => {
+      beforeEach(() => {
+        TestBed.configureTestingModule({
+          imports: [HttpClientTestingModule],
+          providers: [
+            DspaceRestService,
+            {
+              provide: HTTP_INTERCEPTORS,
+              useClass: DspaceRestInterceptor,
+              multi: true,
+            },
+            { provide: APP_CONFIG, useValue: appConfigWithSSR },
+            { provide: PLATFORM_ID, useValue: 'server' },
+          ],
+        });
+
+        httpMock = TestBed.inject(HttpTestingController);
+        httpClient = TestBed.inject(HttpClient);
+      });
+
+      it('should replace the base URL', () => {
+        const url = 'http://api.example.com/server/items';
+        const ssrBaseUrl = appConfigWithSSR.rest.ssrBaseUrl;
+
+        httpClient.get(url).subscribe((response) => {
+          expect(response).toBeTruthy();
+        });
+
+        const req = httpMock.expectOne(ssrBaseUrl + '/items');
+        expect(req.request.url).toBe(ssrBaseUrl + '/items');
+        req.flush({});
+        httpMock.verify();
+      });
+
+      it('should not replace any query param containing the base URL', () => {
+        const url = 'http://api.example.com/server/items?url=http://api.example.com/server/item/1';
+        const ssrBaseUrl = appConfigWithSSR.rest.ssrBaseUrl;
+
+        httpClient.get(url).subscribe((response) => {
+          expect(response).toBeTruthy();
+        });
+
+        const req = httpMock.expectOne(ssrBaseUrl + '/items?url=http://api.example.com/server/item/1');
+        expect(req.request.url).toBe(ssrBaseUrl + '/items?url=http://api.example.com/server/item/1');
+        req.flush({});
+        httpMock.verify();
+      });
+    });
+  });
+});
diff --git a/src/app/core/dspace-rest/dspace-rest.interceptor.ts b/src/app/core/dspace-rest/dspace-rest.interceptor.ts
new file mode 100644
index 0000000000..efd2c12b5d
--- /dev/null
+++ b/src/app/core/dspace-rest/dspace-rest.interceptor.ts
@@ -0,0 +1,52 @@
+import { isPlatformBrowser } from '@angular/common';
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+} from '@angular/common/http';
+import {
+  Inject,
+  Injectable,
+  PLATFORM_ID,
+} from '@angular/core';
+import { Observable } from 'rxjs';
+
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../config/app-config.interface';
+import { isEmpty } from '../../shared/empty.util';
+
+@Injectable()
+/**
+ * This Interceptor is used to use the configured base URL for the request made during SSR execution
+ */
+export class DspaceRestInterceptor implements HttpInterceptor {
+
+  /**
+   * Contains the configured application base URL
+   * @protected
+   */
+  protected baseUrl: string;
+  protected ssrBaseUrl: string;
+
+  constructor(
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+    @Inject(PLATFORM_ID) private platformId: string,
+  ) {
+    this.baseUrl = this.appConfig.rest.baseUrl;
+    this.ssrBaseUrl = this.appConfig.rest.ssrBaseUrl;
+  }
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    if (isPlatformBrowser(this.platformId) || isEmpty(this.ssrBaseUrl) || this.baseUrl === this.ssrBaseUrl) {
+      return next.handle(request);
+    }
+
+    // Different SSR Base URL specified so replace it in the current request url
+    const url = request.url.replace(this.baseUrl, this.ssrBaseUrl);
+    const newRequest: HttpRequest<any> = request.clone({ url });
+    return next.handle(newRequest);
+  }
+}
diff --git a/src/app/core/metadata/head-tag.service.ts b/src/app/core/metadata/head-tag.service.ts
index 270e5fde72..8041bb3a4a 100644
--- a/src/app/core/metadata/head-tag.service.ts
+++ b/src/app/core/metadata/head-tag.service.ts
@@ -50,6 +50,7 @@ import { coreSelector } from '../core.selectors';
 import { CoreState } from '../core-state.model';
 import { BundleDataService } from '../data/bundle-data.service';
 import { AuthorizationDataService } from '../data/feature-authorization/authorization-data.service';
+import { FindListOptions } from '../data/find-list-options.model';
 import { PaginatedList } from '../data/paginated-list.model';
 import { RemoteData } from '../data/remote-data';
 import { RootDataService } from '../data/root-data.service';
@@ -331,6 +332,7 @@ export class HeadTagService {
         'ORIGINAL',
         true,
         true,
+        new FindListOptions(),
         followLink('primaryBitstream'),
         followLink('bitstreams', {
           findListOptions: {
diff --git a/src/app/core/services/server-hard-redirect.service.spec.ts b/src/app/core/services/server-hard-redirect.service.spec.ts
index 27777ed7ba..a904a8e66c 100644
--- a/src/app/core/services/server-hard-redirect.service.spec.ts
+++ b/src/app/core/services/server-hard-redirect.service.spec.ts
@@ -1,5 +1,6 @@
 import { TestBed } from '@angular/core/testing';
 
+import { environment } from '../../../environments/environment.test';
 import { ServerHardRedirectService } from './server-hard-redirect.service';
 
 describe('ServerHardRedirectService', () => {
@@ -7,7 +8,7 @@ describe('ServerHardRedirectService', () => {
   const mockRequest = jasmine.createSpyObj(['get']);
   const mockResponse = jasmine.createSpyObj(['redirect', 'end']);
 
-  const service: ServerHardRedirectService = new ServerHardRedirectService(mockRequest, mockResponse);
+  let service: ServerHardRedirectService = new ServerHardRedirectService(environment, mockRequest, mockResponse);
   const origin = 'https://test-host.com:4000';
 
   beforeEach(() => {
@@ -68,4 +69,23 @@ describe('ServerHardRedirectService', () => {
     });
   });
 
+  describe('when SSR base url is set', () => {
+    const redirect = 'https://private-url:4000/server/api/bitstreams/uuid';
+    const replacedUrl = 'https://public-url/server/api/bitstreams/uuid';
+    const environmentWithSSRUrl: any = { ...environment, ...{ ...environment.rest, rest: {
+      ssrBaseUrl: 'https://private-url:4000/server',
+      baseUrl: 'https://public-url/server',
+    } } };
+    service = new ServerHardRedirectService(environmentWithSSRUrl, mockRequest, mockResponse);
+
+    beforeEach(() => {
+      service.redirect(redirect);
+    });
+
+    it('should perform a 302 redirect', () => {
+      expect(mockResponse.redirect).toHaveBeenCalledWith(302, replacedUrl);
+      expect(mockResponse.end).toHaveBeenCalled();
+    });
+  });
+
 });
diff --git a/src/app/core/services/server-hard-redirect.service.ts b/src/app/core/services/server-hard-redirect.service.ts
index e1ded1568c..1592d9bf1c 100644
--- a/src/app/core/services/server-hard-redirect.service.ts
+++ b/src/app/core/services/server-hard-redirect.service.ts
@@ -7,10 +7,15 @@ import {
   Response,
 } from 'express';
 
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../config/app-config.interface';
 import {
   REQUEST,
   RESPONSE,
 } from '../../../express.tokens';
+import { isNotEmpty } from '../../shared/empty.util';
 import { HardRedirectService } from './hard-redirect.service';
 
 /**
@@ -20,6 +25,7 @@ import { HardRedirectService } from './hard-redirect.service';
 export class ServerHardRedirectService extends HardRedirectService {
 
   constructor(
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
     @Inject(REQUEST) protected req: Request,
     @Inject(RESPONSE) protected res: Response,
   ) {
@@ -35,17 +41,22 @@ export class ServerHardRedirectService extends HardRedirectService {
    *    optional HTTP status code to use for redirect (default = 302, which is a temporary redirect)
    */
   redirect(url: string, statusCode?: number) {
-
     if (url === this.req.url) {
       return;
     }
 
+    let redirectUrl = url;
+    // If redirect url contains SSR base url then replace with public base url
+    if (isNotEmpty(this.appConfig.rest.ssrBaseUrl) && this.appConfig.rest.baseUrl !== this.appConfig.rest.ssrBaseUrl) {
+      redirectUrl = url.replace(this.appConfig.rest.ssrBaseUrl, this.appConfig.rest.baseUrl);
+    }
+
     if (this.res.finished) {
       const req: any = this.req;
       req._r_count = (req._r_count || 0) + 1;
 
       console.warn('Attempted to redirect on a finished response. From',
-        this.req.url, 'to', url);
+        this.req.url, 'to', redirectUrl);
 
       if (req._r_count > 10) {
         console.error('Detected a redirection loop. killing the nodejs process');
@@ -59,9 +70,9 @@ export class ServerHardRedirectService extends HardRedirectService {
         status = 302;
       }
 
-      console.log(`Redirecting from ${this.req.url} to ${url} with ${status}`);
+      console.info(`Redirecting from ${this.req.url} to ${redirectUrl} with ${status}`);
 
-      this.res.redirect(status, url);
+      this.res.redirect(status, redirectUrl);
       this.res.end();
       // I haven't found a way to correctly stop Angular rendering.
       // So we just let it end its work, though we have already closed
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 f3bbef3a4d..2262782687 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
@@ -77,29 +77,29 @@
           <button class="btn btn-outline-primary btn-sm ng-star-inserted" data-test="metadata-edit-btn" *ngIf="!mdValue.editing"
                   [title]="dsoType + '.edit.metadata.edit.buttons.edit' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}"
-                  [disabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
+                  [dsBtnDisabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
             <i class="fas fa-edit fa-fw"></i>
           </button>
           <button class="btn btn-outline-success btn-sm ng-star-inserted" data-test="metadata-confirm-btn" *ngIf="mdValue.editing"
                   [title]="dsoType + '.edit.metadata.edit.buttons.confirm' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}"
-                  [disabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
+                  [dsBtnDisabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
             <i class="fas fa-check fa-fw"></i>
           </button>
           <button class="btn btn-outline-danger btn-sm" data-test="metadata-remove-btn"
                   [title]="dsoType + '.edit.metadata.edit.buttons.remove' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
-                  [disabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
+                  [dsBtnDisabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
             <i class="fas fa-trash-alt fa-fw"></i>
           </button>
           <button class="btn btn-outline-warning btn-sm" data-test="metadata-undo-btn"
                   [title]="dsoType + '.edit.metadata.edit.buttons.undo' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
-                  [disabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
+                  [dsBtnDisabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
             <i class="fas fa-undo-alt fa-fw"></i>
           </button>
           <button class="btn btn-outline-secondary ds-drag-handle btn-sm" data-test="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
-                  cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [disabled]="disabled"
+                  cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [dsBtnDisabled]="disabled"
                   [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
                   ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
             <i class="fas fa-grip-vertical fa-fw"></i>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
index e96959c1d1..196a13ec4a 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts
@@ -34,6 +34,7 @@ import {
   VIRTUAL_METADATA_PREFIX,
 } from '../../../core/shared/metadata.models';
 import { ItemMetadataRepresentation } from '../../../core/shared/metadata-representation/item/item-metadata-representation.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { DsDynamicOneboxComponent } from '../../../shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component';
 import { DsDynamicScrollableDropdownComponent } from '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component';
 import { ThemedTypeBadgeComponent } from '../../../shared/object-collection/shared/badges/type-badge/themed-type-badge.component';
@@ -188,6 +189,7 @@ describe('DsoEditMetadataValueComponent', () => {
         RouterTestingModule.withRoutes([]),
         DsoEditMetadataValueComponent,
         VarDirective,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: RelationshipDataService, useValue: relationshipService },
@@ -524,7 +526,14 @@ describe('DsoEditMetadataValueComponent', () => {
         });
 
         it(`should${disabled ? ' ' : ' not '}be disabled`, () => {
-          expect(btn.nativeElement.disabled).toBe(disabled);
+          if (disabled) {
+            expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeTrue();
+          } else {
+            // Can be null or false, depending on if button was ever disabled so just check not true
+            expect(btn.nativeElement.getAttribute('aria-disabled')).not.toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
+          }
         });
       } else {
         it('should not exist', () => {
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts
index 12c2dce966..4b79ae303c 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts
@@ -67,6 +67,7 @@ import {
 import { Vocabulary } from '../../../core/submission/vocabularies/models/vocabulary.model';
 import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { DsDynamicOneboxComponent } from '../../../shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component';
 import {
@@ -94,7 +95,7 @@ import {
   styleUrls: ['./dso-edit-metadata-value.component.scss', '../dso-edit-metadata-shared/dso-edit-metadata-cells.scss'],
   templateUrl: './dso-edit-metadata-value.component.html',
   standalone: true,
-  imports: [VarDirective, CdkDrag, NgClass, NgIf, FormsModule, DebounceDirective, RouterLink, ThemedTypeBadgeComponent, NgbTooltipModule, CdkDragHandle, AsyncPipe, TranslateModule, DsDynamicScrollableDropdownComponent, DsDynamicOneboxComponent, AuthorityConfidenceStateDirective],
+  imports: [VarDirective, CdkDrag, NgClass, NgIf, FormsModule, DebounceDirective, RouterLink, ThemedTypeBadgeComponent, NgbTooltipModule, CdkDragHandle, AsyncPipe, TranslateModule, DsDynamicScrollableDropdownComponent, DsDynamicOneboxComponent, AuthorityConfidenceStateDirective, BtnDisabledDirective],
 })
 /**
  * Component displaying a single editable row for a metadata value
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 f8b193f4a0..54392a00b0 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,18 +1,18 @@
 <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)"
+    <button class="mr-auto btn btn-success" id="dso-add-btn" [dsBtnDisabled]="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 ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [dsBtnDisabled]="(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 ml-1" id="dso-save-btn" [dsBtnDisabled]="!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>
@@ -21,7 +21,7 @@
     <button class="btn btn-danger ml-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)"
+            [dsBtnDisabled]="!hasChanges || (saving$ | async)"
             (click)="discard()"><i class="fas fa-times" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
     </button>
@@ -77,13 +77,13 @@
   </div>
   <div class="button-row bottom d-inline-block w-100">
     <div class="mt-2 float-right space-children-mr ml-gap">
-      <button class="btn btn-warning" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
+      <button class="btn btn-warning" *ngIf="isReinstatable" [dsBtnDisabled]="(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> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
       </button>
-      <button class="btn btn-primary" [disabled]="!hasChanges || (saving$ | async)"
+      <button class="btn btn-primary" [dsBtnDisabled]="!hasChanges || (saving$ | async)"
               [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
               [title]="dsoType + '.edit.metadata.save-button' | translate"
               (click)="submit()">
@@ -92,7 +92,7 @@
       <button class="btn btn-danger" *ngIf="!isReinstatable"
               [attr.aria-label]="dsoType + '.edit.metadata.discard-button' | translate"
               [title]="dsoType + '.edit.metadata.discard-button' | translate"
-              [disabled]="!hasChanges || (saving$ | async)"
+              [dsBtnDisabled]="!hasChanges || (saving$ | async)"
               (click)="discard()">
         <i class="fas fa-times" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
       </button>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts
index 32e57e003d..cbe2c18792 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.spec.ts
@@ -22,6 +22,7 @@ import { Item } from '../../core/shared/item.model';
 import { ITEM } from '../../core/shared/item.resource-type';
 import { MetadataValue } from '../../core/shared/metadata.models';
 import { AlertComponent } from '../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TestDataService } from '../../shared/testing/test-data-service.mock';
@@ -94,6 +95,7 @@ describe('DsoEditMetadataComponent', () => {
         RouterTestingModule.withRoutes([]),
         DsoEditMetadataComponent,
         VarDirective,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: APP_DATA_SERVICES_MAP, useValue: mockDataServiceMap },
@@ -216,7 +218,13 @@ describe('DsoEditMetadataComponent', () => {
         });
 
         it(`should${disabled ? ' ' : ' not '}be disabled`, () => {
-          expect(btn.nativeElement.disabled).toBe(disabled);
+          if (disabled) {
+            expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeTrue();
+          } else {
+            expect(btn.nativeElement.getAttribute('aria-disabled')).not.toBe('true');
+            expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
+          }
         });
       } else {
         it('should not exist', () => {
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
index 677a601b9d..2b8f42567c 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
@@ -47,6 +47,7 @@ import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ResourceType } from '../../core/shared/resource-type';
 import { AlertComponent } from '../../shared/alert/alert.component';
 import { AlertType } from '../../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -66,7 +67,7 @@ import { MetadataFieldSelectorComponent } from './metadata-field-selector/metada
   styleUrls: ['./dso-edit-metadata.component.scss'],
   templateUrl: './dso-edit-metadata.component.html',
   standalone: true,
-  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component showing a table of all metadata on a DSpaceObject and options to modify them
diff --git a/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.html b/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.html
index b78202d0fe..cbc68ef7cf 100644
--- a/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.html
+++ b/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.html
@@ -12,4 +12,9 @@
   <a [routerLink]="[itemPageRoute]"
      [innerHTML]="mdRepresentation.getValue()"
      [ngbTooltip]="mdRepresentation.allMetadata(['person.jobTitle']).length > 0 ? descTemplate : null"></a>
+  <ds-orcid-badge-and-tooltip class="ml-1"
+                              *ngIf="mdRepresentation.firstMetadata('person.identifier.orcid')"
+                              [orcid]="mdRepresentation.firstMetadata('person.identifier.orcid')"
+                              [authenticatedTimestamp]="mdRepresentation.firstMetadata('dspace.orcid.authenticated')">
+  </ds-orcid-badge-and-tooltip>
 </ds-truncatable>
diff --git a/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.ts b/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.ts
index 48957a6cbd..c7b9e1a333 100644
--- a/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.ts
+++ b/src/app/entity-groups/research-entities/metadata-representations/person/person-item-metadata-list-element.component.ts
@@ -7,13 +7,14 @@ import { RouterLink } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { ItemMetadataRepresentationListElementComponent } from '../../../../shared/object-list/metadata-representation-list-element/item/item-metadata-representation-list-element.component';
+import { OrcidBadgeAndTooltipComponent } from '../../../../shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component';
 import { TruncatableComponent } from '../../../../shared/truncatable/truncatable.component';
 
 @Component({
   selector: 'ds-person-item-metadata-list-element',
   templateUrl: './person-item-metadata-list-element.component.html',
   standalone: true,
-  imports: [NgIf, NgFor, TruncatableComponent, RouterLink, NgbTooltipModule],
+  imports: [NgIf, NgFor, TruncatableComponent, RouterLink, NgbTooltipModule, OrcidBadgeAndTooltipComponent],
 })
 /**
  * The component for displaying an item of the type Person as a metadata field
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 189d0bee40..6cff2903b9 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
@@ -28,7 +28,7 @@
     <div class="row">
         <div class="col-12">
             <button
-                    [disabled]="isInValid"
+                    [dsBtnDisabled]="isInValid"
                     class="btn btn-default btn-primary"
                     (click)="submit()">{{'forgot-password.form.submit' | translate}}</button>
         </div>
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
index 7b2b1beedd..68f0f9d203 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
@@ -29,6 +29,7 @@ import {
 } from '../../core/shared/operators';
 import { Registration } from '../../core/shared/registration.model';
 import { ProfilePageSecurityFormComponent } from '../../profile-page/profile-page-security-form/profile-page-security-form.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 
@@ -42,6 +43,7 @@ import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
     ProfilePageSecurityFormComponent,
     AsyncPipe,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 2ab0005c69..ceb2ad23a4 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
@@ -7,7 +7,7 @@
 
     <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-save" type="submit" class="btn btn-primary" [disabled]="!accepted">{{ 'info.end-user-agreement.buttons.save' | translate }}</button>
+      <button id="button-save" type="submit" class="btn btn-primary" [dsBtnDisabled]="!accepted">{{ 'info.end-user-agreement.buttons.save' | translate }}</button>
     </div>
   </form>
 </div>
diff --git a/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts b/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts
index fbb5ebc49b..88cb46e377 100644
--- a/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts
+++ b/src/app/info/end-user-agreement/end-user-agreement.component.spec.ts
@@ -16,6 +16,7 @@ import { of as observableOf } from 'rxjs';
 import { LogOutAction } from '../../core/auth/auth.actions';
 import { AuthService } from '../../core/auth/auth.service';
 import { EndUserAgreementService } from '../../core/end-user-agreement/end-user-agreement.service';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { ActivatedRouteStub } from '../../shared/testing/active-router.stub';
 import { EndUserAgreementComponent } from './end-user-agreement.component';
@@ -57,7 +58,7 @@ describe('EndUserAgreementComponent', () => {
   beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), EndUserAgreementComponent],
+      imports: [TranslateModule.forRoot(), EndUserAgreementComponent, BtnDisabledDirective],
       providers: [
         { provide: EndUserAgreementService, useValue: endUserAgreementService },
         { provide: NotificationsService, useValue: notificationsService },
@@ -95,7 +96,8 @@ describe('EndUserAgreementComponent', () => {
 
     it('should disable the save button', () => {
       const button = fixture.debugElement.query(By.css('#button-save')).nativeElement;
-      expect(button.disabled).toBeTruthy();
+      expect(button.getAttribute('aria-disabled')).toBe('true');
+      expect(button.classList.contains('disabled')).toBeTrue();
     });
   });
 
diff --git a/src/app/info/end-user-agreement/end-user-agreement.component.ts b/src/app/info/end-user-agreement/end-user-agreement.component.ts
index 5c10c02432..e9835945f5 100644
--- a/src/app/info/end-user-agreement/end-user-agreement.component.ts
+++ b/src/app/info/end-user-agreement/end-user-agreement.component.ts
@@ -23,6 +23,7 @@ import { AppState } from '../../app.reducer';
 import { LogOutAction } from '../../core/auth/auth.actions';
 import { AuthService } from '../../core/auth/auth.service';
 import { EndUserAgreementService } from '../../core/end-user-agreement/end-user-agreement.service';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { EndUserAgreementContentComponent } from './end-user-agreement-content/end-user-agreement-content.component';
@@ -32,7 +33,7 @@ import { EndUserAgreementContentComponent } from './end-user-agreement-content/e
   templateUrl: './end-user-agreement.component.html',
   styleUrls: ['./end-user-agreement.component.scss'],
   standalone: true,
-  imports: [EndUserAgreementContentComponent, FormsModule, TranslateModule],
+  imports: [EndUserAgreementContentComponent, FormsModule, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component displaying the End User Agreement and an option to accept it
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 a3437d1f0e..c5c4b460a2 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.html
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.html
@@ -41,7 +41,7 @@
 
       <div class="row mt-3">
         <div class="control-group col-sm-12 text-right">
-          <button [disabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
+          <button [dsBtnDisabled]="!feedbackForm.valid" class="btn btn-primary" name="submit" type="submit">{{ 'info.feedback.send' | translate }}</button>
         </div>
       </div>
     </form>
diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts b/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts
index 4329c923c4..56275ad5a3 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.spec.ts
@@ -18,6 +18,7 @@ import { FeedbackDataService } from '../../../core/feedback/feedback-data.servic
 import { Feedback } from '../../../core/feedback/models/feedback.model';
 import { RouteService } from '../../../core/services/route.service';
 import { NativeWindowService } from '../../../core/services/window.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { NativeWindowMockFactory } from '../../../shared/mocks/mock-native-window-ref';
 import { RouterMock } from '../../../shared/mocks/router.mock';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
@@ -45,7 +46,7 @@ describe('FeedbackFormComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), FeedbackFormComponent],
+      imports: [TranslateModule.forRoot(), FeedbackFormComponent, BtnDisabledDirective],
       providers: [
         { provide: RouteService, useValue: routeServiceStub },
         { provide: UntypedFormBuilder, useValue: new UntypedFormBuilder() },
@@ -79,7 +80,8 @@ describe('FeedbackFormComponent', () => {
   });
 
   it('should have disabled button', () => {
-    expect(de.query(By.css('button')).nativeElement.disabled).toBeTrue();
+    expect(de.query(By.css('button')).nativeElement.getAttribute('aria-disabled')).toBe('true');
+    expect(de.query(By.css('button')).nativeElement.classList.contains('disabled')).toBeTrue();
   });
 
   describe('when message is inserted', () => {
@@ -90,7 +92,8 @@ describe('FeedbackFormComponent', () => {
     });
 
     it('should not have disabled button', () => {
-      expect(de.query(By.css('button')).nativeElement.disabled).toBeFalse();
+      expect(de.query(By.css('button')).nativeElement.getAttribute('aria-disabled')).toBe('false');
+      expect(de.query(By.css('button')).nativeElement.classList.contains('disabled')).toBeFalse();
     });
 
     it('on submit should call createFeedback of feedbackDataServiceStub service', () => {
diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.ts b/src/app/info/feedback/feedback-form/feedback-form.component.ts
index 59be526f17..db98a2ee01 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.ts
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.ts
@@ -30,6 +30,7 @@ import {
 import { NoContent } from '../../../core/shared/NoContent.model';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { URLCombiner } from '../../../core/url-combiner/url-combiner';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ErrorComponent } from '../../../shared/error/error.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 
@@ -38,7 +39,7 @@ import { NotificationsService } from '../../../shared/notifications/notification
   templateUrl: './feedback-form.component.html',
   styleUrls: ['./feedback-form.component.scss'],
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule],
+  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component displaying the contents of the Feedback Statement
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 3c08c2fb65..5f42ccee74 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
@@ -79,7 +79,7 @@
             </a>
 
             <button
-                    [disabled]="requestCopyForm.invalid"
+                    [dsBtnDisabled]="requestCopyForm.invalid"
                     class="btn btn-default btn-primary"
                     (click)="onSubmit()">{{'bitstream-request-a-copy.submit' | translate}}</button>
         </div>
diff --git a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.ts b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.ts
index e32239a577..dcc999e938 100644
--- a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.ts
+++ b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.ts
@@ -55,6 +55,7 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteDataPayload,
 } from '../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -71,6 +72,7 @@ import { getItemPageRoute } from '../../item-page-routing-paths';
     AsyncPipe,
     ReactiveFormsModule,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 9d8f384e16..24a6a7509a 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
@@ -16,7 +16,7 @@
             class="fas fa-undo-alt"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
     </button>
-    <button class="btn btn-primary" [disabled]="(hasChanges$ | async) !== true || submitting"
+    <button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
             [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
             (click)="submit()"><i
             class="fas fa-save"></i>
@@ -24,7 +24,7 @@
     </button>
     <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
             [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
-            [disabled]="(hasChanges$ | async) !== true || submitting"
+            [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
             (click)="discard()"><i
             class="fas fa-times"></i>
       <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
@@ -39,6 +39,9 @@
                                    [isFirstTable]="isFirst"
                                    aria-describedby="reorder-description">
     </ds-item-edit-bitstream-bundle>
+    <div class="d-flex justify-content-center" *ngIf="showLoadMoreLink$ | async">
+      <button class="btn btn-link my-3" (click)="loadBundles()"> {{'item.edit.bitstreams.load-more.link' | translate}}</button>
+    </div>
   </div>
   <div *ngIf="bundles?.length === 0"
        class="alert alert-info w-100 d-inline-block mt-4" role="alert">
@@ -54,7 +57,7 @@
         class="fas fa-undo-alt"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
       </button>
-      <button class="btn btn-primary" [disabled]="(hasChanges$ | async) !== true || submitting"
+      <button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
               [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
               (click)="submit()"><i
         class="fas fa-save"></i>
@@ -62,7 +65,7 @@
       </button>
       <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
               [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
-              [disabled]="(hasChanges$ | async) !== true || submitting"
+              [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
               (click)="discard()"><i
         class="fas fa-times"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
index 143723d447..c10586db47 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts
@@ -1,4 +1,9 @@
-import { CommonModule } from '@angular/common';
+import {
+  AsyncPipe,
+  CommonModule,
+  NgForOf,
+  NgIf,
+} from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -15,16 +20,22 @@ import {
   TranslateModule,
   TranslateService,
 } from '@ngx-translate/core';
+import { Operation } from 'fast-json-patch';
 import {
+  BehaviorSubject,
   combineLatest,
   Observable,
   Subscription,
 } from 'rxjs';
 import {
+  filter,
   map,
   switchMap,
   take,
+  tap,
 } from 'rxjs/operators';
+import { AlertComponent } from 'src/app/shared/alert/alert.component';
+import { AlertType } from 'src/app/shared/alert/alert-type';
 
 import { ObjectCacheService } from '../../../core/cache/object-cache.service';
 import { BitstreamDataService } from '../../../core/data/bitstream-data.service';
@@ -40,10 +51,14 @@ import {
   getFirstSucceededRemoteData,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
-import { AlertComponent } from '../../../shared/alert/alert.component';
-import { AlertType } from '../../../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
+import {
+  hasValue,
+  isNotEmpty,
+} from '../../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
 import { ResponsiveTableSizes } from '../../../shared/responsive-table-sizes/responsive-table-sizes';
 import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
 import { ObjectValuesPipe } from '../../../shared/utils/object-values-pipe';
@@ -58,12 +73,16 @@ import { ItemEditBitstreamBundleComponent } from './item-edit-bitstream-bundle/i
   templateUrl: './item-bitstreams.component.html',
   imports: [
     CommonModule,
+    AsyncPipe,
     TranslateModule,
     ItemEditBitstreamBundleComponent,
     RouterLink,
+    NgIf,
     VarDirective,
+    NgForOf,
     ThemedLoadingComponent,
     AlertComponent,
+    BtnDisabledDirective,
   ],
   providers: [ObjectValuesPipe],
   standalone: true,
@@ -77,9 +96,18 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
   protected readonly AlertType = AlertType;
 
   /**
-   * The currently listed bundles
+   * All bundles for the current item
    */
-  bundles$: Observable<Bundle[]>;
+  private bundlesSubject = new BehaviorSubject<Bundle[]>([]);
+
+  /**
+   * The page options to use for fetching the bundles
+   */
+  bundlesOptions: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'bundles-pagination-options',
+    currentPage: 1,
+    pageSize: 10,
+  });
 
   /**
    * The bootstrap sizes used for the columns within this table
@@ -98,6 +126,18 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
    */
   itemUpdateSubscription: Subscription;
 
+  /**
+   * The flag indicating to show the load more link
+   */
+  showLoadMoreLink$: BehaviorSubject<boolean> = new BehaviorSubject(true);
+
+  /**
+   * The list of bundles for the current item as an observable
+   */
+  get bundles$(): Observable<Bundle[]> {
+    return this.bundlesSubject.asObservable();
+  }
+
   /**
    * An observable which emits a boolean which represents whether the service is currently handling a 'move' request
    */
@@ -127,14 +167,7 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
    * Actions to perform after the item has been initialized
    */
   postItemInit(): void {
-    const bundlesOptions = this.itemBitstreamsService.getInitialBundlesPaginationOptions();
-    this.isProcessingMoveRequest = this.itemBitstreamsService.getPerformingMoveRequest$();
-
-    this.bundles$ = this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({ pagination: bundlesOptions })).pipe(
-      getFirstSucceededRemoteData(),
-      getRemoteDataPayload(),
-      map((bundlePage: PaginatedList<Bundle>) => bundlePage.page),
-    );
+    this.loadBundles(1);
   }
 
   /**
@@ -199,6 +232,26 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     this.notificationsPrefix = 'item.edit.bitstreams.notifications.';
   }
 
+  /**
+   * Load bundles for the current item
+   * @param currentPage The current page to load
+   */
+  loadBundles(currentPage?: number) {
+    this.bundlesOptions = Object.assign(new PaginationComponentOptions(), this.bundlesOptions, {
+      currentPage: currentPage || this.bundlesOptions.currentPage + 1,
+    });
+    this.itemService.getBundles(this.item.id, new PaginatedSearchOptions({ pagination: this.bundlesOptions })).pipe(
+      getFirstSucceededRemoteData(),
+      getRemoteDataPayload(),
+      tap((bundlesPL: PaginatedList<Bundle>) =>
+        this.showLoadMoreLink$.next(bundlesPL.pageInfo.currentPage < bundlesPL.pageInfo.totalPages),
+      ),
+      map((bundlePage: PaginatedList<Bundle>) => bundlePage.page),
+    ).subscribe((bundles: Bundle[]) => {
+      this.bundlesSubject.next([...this.bundlesSubject.getValue(), ...bundles]);
+    });
+  }
+
 
   /**
    * Submit the current changes
@@ -208,7 +261,7 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
   submit() {
     this.submitting = true;
 
-    const removedResponses$ = this.itemBitstreamsService.removeMarkedBitstreams(this.bundles$);
+    const removedResponses$ = this.itemBitstreamsService.removeMarkedBitstreams(this.bundles$.pipe(take(1)));
 
     // Perform the setup actions from above in order and display notifications
     removedResponses$.subscribe((responses: RemoteData<NoContent>) => {
@@ -217,6 +270,56 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     });
   }
 
+  /**
+   * A bitstream was dropped in a new location. Send out a Move Patch request to the REST API, display notifications,
+   * refresh the bundle's cache (so the lists can properly reload) and call the event's callback function (which will
+   * navigate the user to the correct page)
+   * @param bundle  The bundle to send patch requests to
+   * @param event   The event containing the index the bitstream came from and was dropped to
+   */
+  dropBitstream(bundle: Bundle, event: any) {
+    this.zone.runOutsideAngular(() => {
+      if (hasValue(event) && hasValue(event.fromIndex) && hasValue(event.toIndex) && hasValue(event.finish)) {
+        const moveOperation = {
+          op: 'move',
+          from: `/_links/bitstreams/${event.fromIndex}/href`,
+          path: `/_links/bitstreams/${event.toIndex}/href`,
+        } as Operation;
+        this.bundleService.patch(bundle, [moveOperation]).pipe(take(1)).subscribe((response: RemoteData<Bundle>) => {
+          this.zone.run(() => {
+            this.displayNotifications('item.edit.bitstreams.notifications.move', [response]);
+            // Remove all cached requests from this bundle and call the event's callback when the requests are cleared
+            this.requestService.removeByHrefSubstring(bundle.self).pipe(
+              filter((isCached) => isCached),
+              take(1),
+            ).subscribe(() => event.finish());
+          });
+        });
+      }
+    });
+  }
+
+  /**
+   * Display notifications
+   * - Error notification for each failed response with their message
+   * - Success notification in case there's at least one successful response
+   * @param key       The i18n key for the notification messages
+   * @param responses The returned responses to display notifications for
+   */
+  displayNotifications(key: string, responses: RemoteData<any>[]) {
+    if (isNotEmpty(responses)) {
+      const failedResponses = responses.filter((response: RemoteData<Bundle>) => hasValue(response) && response.hasFailed);
+      const successfulResponses = responses.filter((response: RemoteData<Bundle>) => hasValue(response) && response.hasSucceeded);
+
+      failedResponses.forEach((response: RemoteData<Bundle>) => {
+        this.notificationsService.error(this.translateService.instant(`${key}.failed.title`), response.errorMessage);
+      });
+      if (successfulResponses.length > 0) {
+        this.notificationsService.success(this.translateService.instant(`${key}.saved.title`), this.translateService.instant(`${key}.saved.content`));
+      }
+    }
+  }
+
   /**
    * Request the object updates service to discard all current changes to this item
    * Shows a notification to remind the user that they can undo this
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 06201b1cbe..348118a05c 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
@@ -113,13 +113,13 @@
                           title="{{'item.edit.bitstreams.edit.buttons.edit' | translate}}">
                     <i class="fas fa-edit fa-fw"></i>
                   </button>
-                  <button [disabled]="!canRemove(update)" (click)="remove(entry.bitstream)"
+                  <button [dsBtnDisabled]="!canRemove(update)" (click)="remove(entry.bitstream)"
                           [attr.aria-label]=" 'item. edit bitstreams.edit.buttons.remove' | translate"
                           class="btn btn-outline-danger btn-sm"
                           title="{{'item.edit.bitstreams.edit.buttons.remove' | translate}}">
                     <i class="fas fa-trash-alt fa-fw"></i>
                   </button>
-                  <button [disabled]="!canUndo(update)" (click)="undo(entry.bitstream)"
+                  <button [dsBtnDisabled]="!canUndo(update)" (click)="undo(entry.bitstream)"
                           [attr.aria-label]="'item.edit.bitstreams.edit.buttons.undo' | translate"
                           class="btn btn-outline-warning btn-sm"
                           title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
index cf165383af..c8f393d7f1 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
@@ -52,6 +52,7 @@ import {
   getAllSucceededRemoteData,
   paginatedListToArray,
 } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -87,6 +88,7 @@ import {
     NgbDropdownModule,
     CdkDrag,
     BrowserOnlyPipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 ed6ba3eabc..25780d989c 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
@@ -86,10 +86,10 @@
             </ng-container>
 
             <div class="space-children-mr">
-              <button [disabled]="isDeleting$ | async" (click)="performAction()"
+              <button [dsBtnDisabled]="isDeleting$ | async" (click)="performAction()"
                       class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
               </button>
-              <button [disabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
+              <button [dsBtnDisabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
                       class="btn btn-outline-secondary cancel">
                 {{cancelMessage| translate}}
               </button>
diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.ts b/src/app/item-page/edit-item-page/item-delete/item-delete.component.ts
index ae791ccd8e..c044f62e65 100644
--- a/src/app/item-page/edit-item-page/item-delete/item-delete.component.ts
+++ b/src/app/item-page/edit-item-page/item-delete/item-delete.component.ts
@@ -56,6 +56,7 @@ import {
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import { ViewMode } from '../../../core/shared/view-mode.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -109,6 +110,7 @@ class RelationshipDTO {
     VarDirective,
     NgForOf,
     RouterLink,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 8c47d4f781..63378f5afe 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
@@ -40,7 +40,7 @@
               <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
               </button>
-              <button class="btn btn-primary" [disabled]="!canMove" (click)="moveToCollection()">
+              <button class="btn btn-primary" [dsBtnDisabled]="!canMove" (click)="moveToCollection()">
               <span *ngIf="!processing">
                 <i class="fas fa-save"></i> {{'item.edit.move.save-button' | translate}}
               </span>
@@ -48,7 +48,7 @@
                 <i class="fas fa-circle-notch fa-spin"></i> {{'item.edit.move.processing' | translate}}
               </span>
               </button>
-              <button class="btn btn-danger" [disabled]="!canSubmit" (click)="discard()">
+              <button class="btn btn-danger" [dsBtnDisabled]="!canSubmit" (click)="discard()">
                 <i class="fas fa-times"></i> {{"item.edit.move.discard-button" | translate}}
               </button>
             </div>
diff --git a/src/app/item-page/edit-item-page/item-move/item-move.component.ts b/src/app/item-page/edit-item-page/item-move/item-move.component.ts
index 1115260901..07098aab11 100644
--- a/src/app/item-page/edit-item-page/item-move/item-move.component.ts
+++ b/src/app/item-page/edit-item-page/item-move/item-move.component.ts
@@ -37,6 +37,7 @@ import {
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import { SearchService } from '../../../core/shared/search/search.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { AuthorizedCollectionSelectorComponent } from '../../../shared/dso-selector/dso-selector/authorized-collection-selector/authorized-collection-selector.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
@@ -56,6 +57,7 @@ import {
     AsyncPipe,
     AuthorizedCollectionSelectorComponent,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 0977876a19..06f5e2901f 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
@@ -5,12 +5,12 @@
 </div>
 <div class="col-12 col-md-9 float-left 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">
+    <button class="btn btn-outline-primary" [dsBtnDisabled]="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}}
     </button>
   </span>
   <span *ngIf="!operation.authorized" [ngbTooltip]="'item.edit.tabs.status.buttons.unauthorized' | translate">
-    <button class="btn btn-outline-primary" [disabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
+    <button class="btn btn-outline-primary" [dsBtnDisabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
       {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
     </button>
   </span>
diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts b/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts
index e2e6da826f..85ad62de93 100644
--- a/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-operation/item-operation.component.spec.ts
@@ -6,6 +6,7 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ItemOperationComponent } from './item-operation.component';
 import { ItemOperation } from './itemOperation.model';
 
@@ -17,7 +18,7 @@ describe('ItemOperationComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), ItemOperationComponent],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), ItemOperationComponent, BtnDisabledDirective],
     }).compileComponents();
   }));
 
@@ -43,7 +44,8 @@ describe('ItemOperationComponent', () => {
     const span = fixture.debugElement.query(By.css('.action-label span')).nativeElement;
     expect(span.textContent).toContain('item.edit.tabs.status.buttons.key1.label');
     const button = fixture.debugElement.query(By.css('button')).nativeElement;
-    expect(button.disabled).toBeTrue();
+    expect(button.getAttribute('aria-disabled')).toBe('true');
+    expect(button.classList.contains('disabled')).toBeTrue();
     expect(button.textContent).toContain('item.edit.tabs.status.buttons.key1.button');
   });
 });
diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.ts b/src/app/item-page/edit-item-page/item-operation/item-operation.component.ts
index 9cf4b30e6c..7c3793cc57 100644
--- a/src/app/item-page/edit-item-page/item-operation/item-operation.component.ts
+++ b/src/app/item-page/edit-item-page/item-operation/item-operation.component.ts
@@ -7,6 +7,7 @@ import { RouterLink } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ItemOperation } from './itemOperation.model';
 
 @Component({
@@ -17,6 +18,7 @@ import { ItemOperation } from './itemOperation.model';
     RouterLink,
     NgbTooltipModule,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 e32938590f..06e3a4ace7 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="ml-2 btn btn-success" [dsBtnDisabled]="(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-list/edit-relationship-list.component.spec.ts b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts
index 4784e8fc5c..d0c7a0f68d 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.spec.ts
@@ -388,7 +388,8 @@ describe('EditRelationshipListComponent', () => {
           comp.hasChanges = observableOf(true);
           fixture.detectChanges();
           const element = de.query(By.css('.btn-success'));
-          expect(element.nativeElement?.disabled).toBeTrue();
+          expect(element.nativeElement?.getAttribute('aria-disabled')).toBe('true');
+          expect(element.nativeElement?.classList.contains('disabled')).toBeTrue();
         });
       });
 
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts
index 7f1d9fc5db..be74be2fa0 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.ts
@@ -65,6 +65,7 @@ import {
   getFirstSucceededRemoteDataPayload,
   getRemoteDataPayload,
 } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -100,6 +101,7 @@ import { EditRelationshipComponent } from '../edit-relationship/edit-relationshi
     TranslateModule,
     NgClass,
     ThemedLoadingComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 e65cd237a3..8cd86d597b 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
@@ -9,12 +9,12 @@
   </div>
   <div class="col-2">
     <div class="btn-group relationship-action-buttons">
-      <button [disabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
+      <button [dsBtnDisabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
               class="btn btn-outline-danger btn-sm"
               title="{{'item.edit.metadata.edit.buttons.remove' | translate}}">
         <i class="fas fa-trash-alt fa-fw"></i>
       </button>
-      <button [disabled]="!canUndo()" (click)="undo()"
+      <button [dsBtnDisabled]="!canUndo()" (click)="undo()"
               class="btn btn-outline-warning btn-sm"
               title="{{'item.edit.metadata.edit.buttons.undo' | translate}}">
         <i class="fas fa-undo-alt fa-fw"></i>
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.ts b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.ts
index f79d0ee0d1..e711de94c6 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.ts
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.ts
@@ -37,6 +37,7 @@ import {
   getRemoteDataPayload,
 } from '../../../../core/shared/operators';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -54,6 +55,7 @@ import { VirtualMetadataComponent } from '../../virtual-metadata/virtual-metadat
     NgIf,
     TranslateModule,
     VirtualMetadataComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 4c8ea49f99..0ee2e6acfd 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
@@ -35,7 +35,7 @@
 <ng-template #buttons>
   <div class="d-flex space-children-mr justify-content-end">
     <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-            [disabled]="(hasChanges$ | async) !== true"
+            [dsBtnDisabled]="(hasChanges$ | async) !== true"
             (click)="discard()">
       <i aria-hidden="true" class="fas fa-times"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ 'item.edit.metadata.discard-button' | translate }}</span>
@@ -45,7 +45,7 @@
       <span class="d-none d-sm-inline">&nbsp;{{ 'item.edit.metadata.reinstate-button' | translate }}</span>
     </button>
     <button class="btn btn-primary"
-            [disabled]="(hasChanges$ | async) !== true || (isSaving$ | async) === true"
+            [dsBtnDisabled]="(hasChanges$ | async) !== true || (isSaving$ | async) === true"
             (click)="submit()">
       <span *ngIf="isSaving$ | async" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
       <i *ngIf="(isSaving$ | async) !== true" aria-hidden="true" class="fas fa-save"></i>
diff --git a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.ts b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.ts
index 7b0cc46647..42309116f2 100644
--- a/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.ts
+++ b/src/app/item-page/edit-item-page/item-relationships/item-relationships.component.ts
@@ -42,6 +42,7 @@ import {
 } from '../../../core/shared/operators';
 import { AlertComponent } from '../../../shared/alert/alert.component';
 import { AlertType } from '../../../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { followLink } from '../../../shared/utils/follow-link-config.model';
@@ -67,6 +68,7 @@ import { EditRelationshipListWrapperComponent } from './edit-relationship-list-w
     TranslateModule,
     VarDirective,
     EditRelationshipListWrapperComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
index 3217680815..a64b4ce548 100644
--- a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
+++ b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.html
@@ -19,7 +19,7 @@
 <div class="buttons" *ngIf="medias?.length > 1">
   <button
     class="btn btn-primary previous"
-    [disabled]="currentIndex === 0"
+    [dsBtnDisabled]="currentIndex === 0"
     (click)="prevMedia()"
   >
     {{ "media-viewer.previous" | translate }}
@@ -27,7 +27,7 @@
 
   <button
     class="btn btn-primary next"
-    [disabled]="currentIndex === medias.length - 1"
+    [dsBtnDisabled]="currentIndex === medias.length - 1"
     (click)="nextMedia()"
   >
     {{ "media-viewer.next" | translate }}
diff --git a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
index 700431ff3f..6f962bfa8c 100644
--- a/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
+++ b/src/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
@@ -12,6 +12,7 @@ import { Bitstream } from 'src/app/core/shared/bitstream.model';
 
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { CaptionInfo } from './caption-info';
 import { languageHelper } from './language-helper';
 
@@ -27,6 +28,7 @@ import { languageHelper } from './language-helper';
     NgbDropdownModule,
     TranslateModule,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 b53c400385..905372ba8c 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
@@ -48,7 +48,7 @@
     <div class="row" *ngIf="(ownerCanDisconnectProfileFromOrcid() | async)" data-test="unlinkOwner">
       <div class="col">
         <button type="submit" class="btn btn-danger float-right" (click)="unlinkOrcid()"
-                [disabled]="(unlinkProcessing | async)">
+                [dsBtnDisabled]="(unlinkProcessing | async)">
           <span *ngIf="(unlinkProcessing | async) !== true"><i
             class="fas fa-unlink"></i> {{ 'person.page.orcid.unlink' | translate }}</span>
           <span *ngIf="(unlinkProcessing | async)"><i
diff --git a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts
index 6a3b8af937..63b908fb83 100644
--- a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts
+++ b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.ts
@@ -34,6 +34,7 @@ import {
 import { Item } from '../../../core/shared/item.model';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { createFailedRemoteDataObjectFromError$ } from '../../../shared/remote-data.utils';
 
@@ -47,6 +48,7 @@ import { createFailedRemoteDataObjectFromError$ } from '../../../shared/remote-d
     NgIf,
     NgForOf,
     AlertComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 02c207b332..0b3cf6c0ac 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
@@ -7,12 +7,12 @@
       <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">
-          <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>
+          <button class="btn btn-link btn-link-inline text-capitalize" (click)="increase()">{{'item.page.related-items.view-more' |
+            translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }} {{label}}</button>
         </div>
         <div *ngIf="objects.length > 1" class="float-right" 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>
+          <button class="btn btn-link btn-link-inline text-capitalize" (click)="decrease()">{{'item.page.related-items.view-less' |
+            translate:{ amount: itemsRD?.payload?.page?.length } }} {{label}}</button>
         </div>
       </div>
     </ng-container>
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 a664245668..a22ba008d8 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
@@ -31,7 +31,7 @@
         <!--CREATE-->
         <ng-container *ngIf="canCreateVersion$ | async">
           <button class="btn btn-outline-primary btn-sm version-row-element-create"
-                  [disabled]="isAnyBeingEdited() || hasDraftVersion"
+                  [dsBtnDisabled]="isAnyBeingEdited() || hasDraftVersion"
                   (click)="createNewVersion(version)"
                   title="{{createVersionTitle | translate }}">
             <i class="fas fa-code-branch fa-fw"></i>
@@ -41,7 +41,7 @@
         <ng-container *ngIf="canDeleteVersion$ | async">
           <button class="btn btn-sm version-row-element-delete"
                   [ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
-                  [disabled]="isAnyBeingEdited()"
+                  [dsBtnDisabled]="isAnyBeingEdited()"
                   (click)="deleteVersion(version, version.id === itemVersion.id)"
                   title="{{'item.version.history.table.action.deleteVersion' | translate}}">
             <i class="fas fa-trash fa-fw"></i>
diff --git a/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.ts b/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.ts
index 3d017c38a4..e142f7854c 100644
--- a/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.ts
+++ b/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.ts
@@ -49,6 +49,7 @@ import { VersionHistory } from '../../../core/shared/version-history.model';
 import { WorkspaceItem } from '../../../core/submission/models/workspaceitem.model';
 import { WorkflowItemDataService } from '../../../core/submission/workflowitem-data.service';
 import { WorkspaceitemDataService } from '../../../core/submission/workspaceitem-data.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import {
   getItemEditVersionhistoryRoute,
@@ -67,6 +68,7 @@ import { ItemVersionsSummaryModalComponent } from '../item-versions-summary-moda
     TranslateModule,
     NgClass,
     NgIf,
+    BtnDisabledDirective,
   ],
   templateUrl: './item-versions-row-element-version.component.html',
   styleUrl: './item-versions-row-element-version.component.scss',
diff --git a/src/app/item-page/versions/item-versions.component.html b/src/app/item-page/versions/item-versions.component.html
index 6184b42aa8..8e8fc28d53 100644
--- a/src/app/item-page/versions/item-versions.component.html
+++ b/src/app/item-page/versions/item-versions.component.html
@@ -67,7 +67,7 @@
               <ng-template #notThisBeingEdited>
                 <!--EDIT-->
                 <button class="btn btn-outline-primary btn-sm version-row-element-edit"
-                        [disabled]="isAnyBeingEdited()"
+                        [dsBtnDisabled]="isAnyBeingEdited()"
                         (click)="enableVersionEditing(versionDTO.version)"
                         title="{{'item.version.history.table.action.editSummary' | translate}}">
                   <i class="fas fa-edit fa-fw"></i>
diff --git a/src/app/item-page/versions/item-versions.component.spec.ts b/src/app/item-page/versions/item-versions.component.spec.ts
index ee3c0110c8..b6ef946815 100644
--- a/src/app/item-page/versions/item-versions.component.spec.ts
+++ b/src/app/item-page/versions/item-versions.component.spec.ts
@@ -42,6 +42,7 @@ import { VersionHistory } from '../../core/shared/version-history.model';
 import { WorkflowItemDataService } from '../../core/submission/workflowitem-data.service';
 import { WorkspaceitemDataService } from '../../core/submission/workspaceitem-data.service';
 import { AlertComponent } from '../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { PaginationComponent } from '../../shared/pagination/pagination.component';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -158,7 +159,7 @@ describe('ItemVersionsComponent', () => {
   beforeEach(waitForAsync(() => {
 
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterModule.forRoot([]), CommonModule, FormsModule, ReactiveFormsModule, BrowserModule, ItemVersionsComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterModule.forRoot([]), CommonModule, FormsModule, ReactiveFormsModule, BrowserModule, ItemVersionsComponent, VarDirective, BtnDisabledDirective],
       providers: [
         { provide: PaginationService, useValue: new PaginationServiceStub() },
         { provide: UntypedFormBuilder, useValue: new UntypedFormBuilder() },
@@ -234,8 +235,9 @@ describe('ItemVersionsComponent', () => {
     it('should not disable the delete button', () => {
       const deleteButtons: DebugElement[] = fixture.debugElement.queryAll(By.css('.version-row-element-delete'));
       expect(deleteButtons.length).not.toBe(0);
-      deleteButtons.forEach((btn: DebugElement) => {
-        expect(btn.nativeElement.disabled).toBe(false);
+      deleteButtons.forEach((btn) => {
+        expect(btn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+        expect(btn.nativeElement.classList.contains('disabled')).toBeFalse();
       });
     });
 
diff --git a/src/app/item-page/versions/item-versions.component.ts b/src/app/item-page/versions/item-versions.component.ts
index 8b820713a6..a649fcaf27 100644
--- a/src/app/item-page/versions/item-versions.component.ts
+++ b/src/app/item-page/versions/item-versions.component.ts
@@ -50,6 +50,7 @@ import { Version } from '../../core/shared/version.model';
 import { VersionHistory } from '../../core/shared/version-history.model';
 import { AlertComponent } from '../../shared/alert/alert.component';
 import { AlertType } from '../../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   hasValue,
   hasValueOperator,
@@ -78,7 +79,7 @@ interface VersionDTO {
   templateUrl: './item-versions.component.html',
   styleUrls: ['./item-versions.component.scss'],
   standalone: true,
-  imports: [VarDirective, NgIf, AlertComponent, PaginationComponent, NgFor, RouterLink, NgClass, FormsModule, AsyncPipe, DatePipe, TranslateModule, ItemVersionsRowElementVersionComponent],
+  imports: [VarDirective, NgIf, AlertComponent, PaginationComponent, NgFor, RouterLink, NgClass, FormsModule, AsyncPipe, DatePipe, TranslateModule, ItemVersionsRowElementVersionComponent, BtnDisabledDirective],
 })
 
 /**
diff --git a/src/app/menu-resolver.service.ts b/src/app/menu-resolver.service.ts
index 683111b32a..31210883ae 100644
--- a/src/app/menu-resolver.service.ts
+++ b/src/app/menu-resolver.service.ts
@@ -169,6 +169,7 @@ export class MenuResolverService  {
     this.createExportMenuSections();
     this.createImportMenuSections();
     this.createAccessControlMenuSections();
+    this.createReportMenuSections();
     return this.waitForMenu$(MenuID.ADMIN);
   }
 
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 0157110035..70905d95ee 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,6 +1,6 @@
   <div class="add" *ngIf="(moreThanOne$ | async) !== true">
     <button class="btn btn-lg btn-outline-primary mt-1 ml-2"
-            [attr.aria-label]="'mydspace.new-submission-external' | translate" [disabled]="(initialized$ | async) !== true"
+            [attr.aria-label]="'mydspace.new-submission-external' | translate" [dsBtnDisabled]="(initialized$ | async) !== true"
             (click)="openPage(singleEntity)" role="button"
             title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
@@ -10,7 +10,7 @@
        ngbDropdown
        *ngIf="(moreThanOne$ | async)">
     <button class="btn btn-lg btn-outline-primary mt-1 ml-2" id="dropdownImport" ngbDropdownToggle
-            type="button" [disabled]="(initialized$ | async) !== true"
+            type="button" [dsBtnDisabled]="(initialized$ | async) !== true"
             [attr.aria-label]="'mydspace.new-submission-external' | translate"
             [attr.data-test]="'import-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission-external' | translate}}">
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.ts b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.ts
index 86960725a5..cf242670b3 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.ts
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.ts
@@ -27,6 +27,7 @@ import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { ItemType } from '../../../core/shared/item-relationships/item-type.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { hasValue } from '../../../shared/empty.util';
 import { EntityDropdownComponent } from '../../../shared/entity-dropdown/entity-dropdown.component';
 import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
@@ -45,6 +46,7 @@ import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
     TranslateModule,
     BrowserOnlyPipe,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 730b1db1c7..c68968e91f 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,6 +1,6 @@
   <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"
-            [disabled]="(initialized$ | async) !== true" (click)="openDialog(singleEntity)" role="button">
+            [dsBtnDisabled]="(initialized$ | async) !== true" (click)="openDialog(singleEntity)" role="button">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
     </button>
   </div>
@@ -8,7 +8,7 @@
        ngbDropdown
        *ngIf="(moreThanOne$ | async)">
     <button class="btn btn-lg btn-primary mt-1 ml-2" id="dropdownSubmission" ngbDropdownToggle
-            type="button"  [disabled]="(initialized$ | async) !== true"
+            type="button"  [dsBtnDisabled]="(initialized$ | async) !== true"
             [attr.aria-label]="'mydspace.new-submission' | translate"
             [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
             title="{{'mydspace.new-submission' | translate}}">
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.ts b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.ts
index 8604c3322c..3e79747b1c 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.ts
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.ts
@@ -28,6 +28,7 @@ import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { ItemType } from '../../../core/shared/item-relationships/item-type.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ThemedCreateItemParentSelectorComponent } from '../../../shared/dso-selector/modal-wrappers/create-item-parent-selector/themed-create-item-parent-selector.component';
 import { hasValue } from '../../../shared/empty.util';
 import { EntityDropdownComponent } from '../../../shared/entity-dropdown/entity-dropdown.component';
@@ -47,6 +48,7 @@ import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
     TranslateModule,
     BrowserOnlyPipe,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index 7f9b4a546f..0af5c706b7 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -1,35 +1,37 @@
 <div class="ds-menu-item-wrapper text-md-center"
-    [id]="'expandable-navbar-section-' + section.id"
-    (mouseenter)="onMouseEnter($event, isActive)"
-    (mouseleave)="onMouseLeave($event, isActive)"
-    data-test="navbar-section-wrapper"
-    *ngVar="(active | async) as isActive">
-    <a href="javascript:void(0);" routerLinkActive="active"
-       role="menuitem"
-       (keyup.enter)="toggleSection($event)"
-       (keyup.space)="toggleSection($event)"
-       (click)="toggleSection($event)"
-       (keydown.space)="$event.preventDefault()"
-       aria-haspopup="menu"
-       data-test="navbar-section-toggler"
-       [attr.aria-expanded]="isActive"
-       [attr.aria-controls]="expandableNavbarSectionId(section.id)"
-       class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
-       [class.disabled]="section.model?.disabled">
+     [id]="'expandable-navbar-section-' + section.id"
+     (mouseenter)="onMouseEnter($event)"
+     (mouseleave)="onMouseLeave($event)"
+     data-test="navbar-section-wrapper">
+  <a href="javascript:void(0);" routerLinkActive="active"
+     role="menuitem"
+     (keyup.enter)="toggleSection($event)"
+     (keyup.space)="toggleSection($event)"
+     (click)="toggleSection($event)"
+     (keydown)="keyDown($event)"
+     aria-haspopup="menu"
+     data-test="navbar-section-toggler"
+     [attr.aria-expanded]="(active$ | async).valueOf()"
+     [attr.aria-controls]="expandableNavbarSectionId()"
+     class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
+     [class.disabled]="section.model?.disabled">
       <span class="flex-fill">
         <ng-container
           *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-<!--        <span class="sr-only">{{'nav.expandable-navbar-section-suffix' | translate}}</span>-->
       </span>
-      <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
-    </a>
-    <div @slide *ngIf="isActive" (click)="deactivateSection($event)"
-        [id]="expandableNavbarSectionId(section.id)"
-        role="menu"
-        class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
-        <div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
-            <ng-container
-                    *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </div>
+    <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
+  </a>
+  <div *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
+       [id]="expandableNavbarSectionId()"
+       [dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
+       (dsHoverOutside)="deactivateSection($event, false)"
+       role="menu"
+       class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
+    <div @slide role="presentation">
+      <div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
+        <ng-container
+          *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
index d03c8d89eb..6f374b3aa5 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -1,6 +1,11 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
 import {
   ComponentFixture,
+  fakeAsync,
+  flush,
   TestBed,
   waitForAsync,
 } from '@angular/core/testing';
@@ -10,9 +15,11 @@ import { of as observableOf } from 'rxjs';
 
 import { HostWindowService } from '../../shared/host-window.service';
 import { MenuService } from '../../shared/menu/menu.service';
+import { LinkMenuItemModel } from '../../shared/menu/menu-item/models/link.model';
+import { MenuSection } from '../../shared/menu/menu-section.model';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { VarDirective } from '../../shared/utils/var.directive';
+import { HoverOutsideDirective } from '../../shared/utils/hover-outside.directive';
 import { ExpandableNavbarSectionComponent } from './expandable-navbar-section.component';
 
 describe('ExpandableNavbarSectionComponent', () => {
@@ -23,11 +30,17 @@ describe('ExpandableNavbarSectionComponent', () => {
   describe('on larger screens', () => {
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [NoopAnimationsModule, ExpandableNavbarSectionComponent, TestComponent, VarDirective],
+        imports: [
+          ExpandableNavbarSectionComponent,
+          HoverOutsideDirective,
+          NoopAnimationsModule,
+          TestComponent,
+        ],
         providers: [
           { provide: 'sectionDataProvider', useValue: {} },
           { provide: MenuService, useValue: menuService },
           { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+          TestComponent,
         ],
       }).compileComponents();
     }));
@@ -41,10 +54,6 @@ describe('ExpandableNavbarSectionComponent', () => {
       fixture.detectChanges();
     });
 
-    it('should create', () => {
-      expect(component).toBeTruthy();
-    });
-
     describe('when the mouse enters the section header (while inactive)', () => {
       beforeEach(() => {
         spyOn(component, 'onMouseEnter').and.callThrough();
@@ -141,6 +150,8 @@ describe('ExpandableNavbarSectionComponent', () => {
     });
 
     describe('when spacebar is pressed on section header (while inactive)', () => {
+      let sidebarToggler: DebugElement;
+
       beforeEach(() => {
         spyOn(component, 'toggleSection').and.callThrough();
         spyOn(menuService, 'toggleActiveSection');
@@ -149,15 +160,27 @@ describe('ExpandableNavbarSectionComponent', () => {
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
-        // dispatch the (keyup.space) action used in our component HTML
-        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
+        sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
       });
 
       it('should call toggleSection on the menuService', () => {
+        // dispatch the (keyup.space) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { code: 'Space', key: ' ' }));
+
         expect(component.toggleSection).toHaveBeenCalled();
         expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
+
+      // Should not do anything in order to work correctly with NVDA: https://www.nvaccess.org/
+      it('should not do anything on keydown space', () => {
+        const event: Event = new KeyboardEvent('keydown', { code: 'Space', key: ' ' });
+        spyOn(event, 'preventDefault').and.callThrough();
+
+        // dispatch the (keyup.space) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
     });
 
     describe('when spacebar is pressed on section header (while active)', () => {
@@ -179,12 +202,116 @@ describe('ExpandableNavbarSectionComponent', () => {
         expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
+
+    describe('when enter is pressed on section header (while inactive)', () => {
+      let sidebarToggler: DebugElement;
+
+      beforeEach(() => {
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
+        // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
+        spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
+        component.ngOnInit();
+        fixture.detectChanges();
+
+        sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
+      });
+
+      // Should not do anything in order to work correctly with NVDA: https://www.nvaccess.org/
+      it('should not do anything on keydown space', () => {
+        const event: Event = new KeyboardEvent('keydown', { code: 'Enter' });
+        spyOn(event, 'preventDefault').and.callThrough();
+
+        // dispatch the (keyup.space) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+    });
+
+    describe('when arrow down is pressed on section header', () => {
+      it('should call activateSection', () => {
+        spyOn(component, 'activateSection').and.callThrough();
+
+        const sidebarToggler: DebugElement = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
+        // dispatch the (keydown.ArrowDown) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
+
+        expect(component.focusOnFirstChildSection).toBe(true);
+        expect(component.activateSection).toHaveBeenCalled();
+      });
+    });
+
+    describe('when tab is pressed on section header', () => {
+      it('should call deactivateSection', () => {
+        spyOn(component, 'deactivateSection').and.callThrough();
+
+        const sidebarToggler: DebugElement = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
+        // dispatch the (keydown.ArrowDown) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
+
+        expect(component.deactivateSection).toHaveBeenCalled();
+      });
+    });
+
+    describe('navigateDropdown', () => {
+      beforeEach(fakeAsync(() => {
+        jasmine.getEnv().allowRespy(true);
+        spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([
+          Object.assign(new MenuSection(), {
+            id: 'subSection1',
+            model: Object.assign(new LinkMenuItemModel(), {
+              type: 'TEST_LINK',
+            }),
+            parentId: component.section.id,
+          }),
+          Object.assign(new MenuSection(), {
+            id: 'subSection2',
+            model: Object.assign(new LinkMenuItemModel(), {
+              type: 'TEST_LINK',
+            }),
+            parentId: component.section.id,
+          }),
+        ]));
+        component.ngOnInit();
+        flush();
+        fixture.detectChanges();
+        component.focusOnFirstChildSection = true;
+        component.active$.next(true);
+        fixture.detectChanges();
+      }));
+
+      it('should close the modal on Tab', () => {
+        spyOn(menuService, 'deactivateSection').and.callThrough();
+
+        const firstSubsection: DebugElement = fixture.debugElement.queryAll(By.css('.dropdown-menu a[role="menuitem"]'))[0];
+        firstSubsection.nativeElement.focus();
+        firstSubsection.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
+
+        expect(menuService.deactivateSection).toHaveBeenCalled();
+      });
+
+      it('should close the modal on Escape', () => {
+        spyOn(menuService, 'deactivateSection').and.callThrough();
+
+        const firstSubsection: DebugElement = fixture.debugElement.queryAll(By.css('.dropdown-menu a[role="menuitem"]'))[0];
+        firstSubsection.nativeElement.focus();
+        firstSubsection.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape' }));
+
+        expect(menuService.deactivateSection).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('on smaller, mobile screens', () => {
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [NoopAnimationsModule, ExpandableNavbarSectionComponent, TestComponent, VarDirective],
+        imports: [
+          ExpandableNavbarSectionComponent,
+          HoverOutsideDirective,
+          NoopAnimationsModule,
+          TestComponent,
+        ],
         providers: [
           { provide: 'sectionDataProvider', useValue: {} },
           { provide: MenuService, useValue: menuService },
@@ -253,7 +380,9 @@ describe('ExpandableNavbarSectionComponent', () => {
 // declare a test component
 @Component({
   selector: 'ds-test-cmp',
-  template: ``,
+  template: `
+    <a role="menuitem">link</a>
+  `,
   standalone: true,
 })
 class TestComponent {
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index 92da978af7..dc3db79aca 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -5,10 +5,12 @@ import {
   NgIf,
 } from '@angular/common';
 import {
+  AfterViewChecked,
   Component,
   HostListener,
   Inject,
   Injector,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
 import { RouterLinkActive } from '@angular/router';
@@ -19,7 +21,8 @@ import { slide } from '../../shared/animations/slide';
 import { HostWindowService } from '../../shared/host-window.service';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
-import { VarDirective } from '../../shared/utils/var.directive';
+import { MenuSection } from '../../shared/menu/menu-section.model';
+import { HoverOutsideDirective } from '../../shared/utils/hover-outside.directive';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
 
 /**
@@ -31,9 +34,17 @@ import { NavbarSectionComponent } from '../navbar-section/navbar-section.compone
   styleUrls: ['./expandable-navbar-section.component.scss'],
   animations: [slide],
   standalone: true,
-  imports: [VarDirective, RouterLinkActive, NgComponentOutlet, NgIf, NgFor, AsyncPipe],
+  imports: [
+    AsyncPipe,
+    HoverOutsideDirective,
+    NgComponentOutlet,
+    NgFor,
+    NgIf,
+    RouterLinkActive,
+  ],
 })
-export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements OnInit {
+export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements AfterViewChecked, OnInit, OnDestroy {
+
   /**
    * This section resides in the Public Navbar
    */
@@ -44,6 +55,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   mouseEntered = false;
 
+  /**
+   * Whether the section was expanded
+   */
+  focusOnFirstChildSection = false;
+
   /**
    * True if screen size was small before a resize event
    */
@@ -54,6 +70,18 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   isMobile$: Observable<boolean>;
 
+  /**
+   * Boolean used to add the event listeners to the items in the expandable menu when expanded. This is done for
+   * performance reasons, there is currently an *ngIf on the menu to prevent the {@link HoverOutsideDirective} to tank
+   * performance when not expanded.
+   */
+  addArrowEventListeners = false;
+
+  /**
+   * List of current dropdown items who have event listeners
+   */
+  private dropdownItems: NodeListOf<HTMLElement>;
+
   @HostListener('window:resize', ['$event'])
   onResize() {
     this.isMobile$.pipe(
@@ -68,29 +96,80 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
     });
   }
 
-  constructor(@Inject('sectionDataProvider') menuSection,
-              protected menuService: MenuService,
-              protected injector: Injector,
-              private windowService: HostWindowService,
+  constructor(
+    @Inject('sectionDataProvider') public section: MenuSection,
+    protected menuService: MenuService,
+    protected injector: Injector,
+    protected windowService: HostWindowService,
   ) {
-    super(menuSection, menuService, injector);
+    super(section, menuService, injector);
     this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit() {
     super.ngOnInit();
+    this.subs.push(this.active$.subscribe((active: boolean) => {
+      if (active === true) {
+        this.addArrowEventListeners = true;
+      } else {
+        this.focusOnFirstChildSection = undefined;
+        this.unsubscribeFromEventListeners();
+      }
+    }));
+  }
+
+  ngAfterViewChecked(): void {
+    if (this.addArrowEventListeners) {
+      this.dropdownItems = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
+      this.dropdownItems.forEach((item: HTMLElement) => {
+        item.addEventListener('keydown', this.navigateDropdown.bind(this));
+      });
+      if (this.focusOnFirstChildSection && this.dropdownItems.length > 0) {
+        this.dropdownItems.item(0).focus();
+      }
+      this.addArrowEventListeners = false;
+    }
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this.unsubscribeFromEventListeners();
+  }
+
+  /**
+   * Activate this section if it's currently inactive, deactivate it when it's currently active.
+   * Also saves whether this toggle was performed by a keyboard event (non-click event) in order to know if thi first
+   * item should be focussed when activating a section.
+   *
+   *  @param {Event} event The user event that triggered this method
+   */
+  override toggleSection(event: Event): void {
+    this.focusOnFirstChildSection = event.type !== 'click';
+    super.toggleSection(event);
+  }
+
+  /**
+   * Removes all the current event listeners on the dropdown items (called when the menu is closed & on component
+   * destruction)
+   */
+  unsubscribeFromEventListeners(): void {
+    if (this.dropdownItems) {
+      this.dropdownItems.forEach((item: HTMLElement) => {
+        item.removeEventListener('keydown', this.navigateDropdown.bind(this));
+      });
+      this.dropdownItems = undefined;
+    }
   }
 
   /**
    * When the mouse enters the section toggler activate the menu section
    * @param $event
-   * @param isActive
    */
-  onMouseEnter($event: Event, isActive: boolean) {
+  onMouseEnter($event: Event): void {
     this.isMobile$.pipe(
       first(),
     ).subscribe((isMobile) => {
-      if (!isMobile && !isActive && !this.mouseEntered) {
+      if (!isMobile && !this.active$.value && !this.mouseEntered) {
         this.activateSection($event);
       }
       this.mouseEntered = true;
@@ -100,13 +179,12 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
   /**
    * When the mouse leaves the section toggler deactivate the menu section
    * @param $event
-   * @param isActive
    */
-  onMouseLeave($event: Event, isActive: boolean) {
+  onMouseLeave($event: Event): void {
     this.isMobile$.pipe(
       first(),
     ).subscribe((isMobile) => {
-      if (!isMobile && isActive && this.mouseEntered) {
+      if (!isMobile && this.active$.value && this.mouseEntered) {
         this.deactivateSection($event);
       }
       this.mouseEntered = false;
@@ -115,9 +193,60 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
 
   /**
    * returns the ID of the DOM element representing the navbar section
-   * @param sectionId
    */
-  expandableNavbarSectionId(sectionId: string) {
-    return `expandable-navbar-section-${sectionId}-dropdown`;
+  expandableNavbarSectionId(): string {
+    return `expandable-navbar-section-${this.section.id}-dropdown`;
+  }
+
+  /**
+   * Handles the navigation between the menu items
+   *
+   * @param event
+   */
+  navigateDropdown(event: KeyboardEvent): void {
+    if (event.code === 'Tab') {
+      this.deactivateSection(event, false);
+      return;
+    } else if (event.code === 'Escape') {
+      this.deactivateSection(event, false);
+      (document.querySelector(`a[aria-controls="${this.expandableNavbarSectionId()}"]`) as HTMLElement)?.focus();
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+
+    const items: NodeListOf<Element> = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
+    if (items.length === 0) {
+      return;
+    }
+    const currentIndex: number = Array.from(items).findIndex((item: Element) => item === event.target);
+
+    if (event.key === 'ArrowDown') {
+      (items[(currentIndex + 1) % items.length] as HTMLElement).focus();
+    } else if (event.key === 'ArrowUp') {
+      (items[(currentIndex - 1 + items.length) % items.length] as HTMLElement).focus();
+    }
+  }
+
+  /**
+   * Handles all the keydown events on the dropdown toggle
+   *
+   * @param event
+   */
+  keyDown(event: KeyboardEvent): void {
+    switch (event.code) {
+      // Works for both Tab & Shift Tab
+      case 'Tab':
+        this.deactivateSection(event, false);
+        break;
+      case 'ArrowDown':
+        this.focusOnFirstChildSection = true;
+        this.activateSection(event);
+        break;
+      case 'Space':
+      case 'Enter':
+        event.preventDefault();
+        break;
+    }
   }
 }
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 8a9f40e2b2..6620d80f84 100644
--- a/src/app/notifications/qa/events/quality-assurance-events.component.html
+++ b/src/app/notifications/qa/events/quality-assurance-events.component.html
@@ -138,7 +138,7 @@
                       <div class="btn-group">
                         <button *ngIf="!eventElement.hasProject"
                                 class="btn btn-outline-primary btn-sm"
-                                [disabled]="eventElement.isRunning"
+                                [dsBtnDisabled]="eventElement.isRunning"
                                 (click)="openModalLookup(eventElement); $event.stopPropagation();"
                                 [attr.aria-label]="'quality-assurance.event.modal.project.select' | translate"
                         >
@@ -146,7 +146,7 @@
                         </button>
                         <button *ngIf="eventElement.hasProject"
                                 class="btn btn-outline-danger btn-sm"
-                                [disabled]="eventElement.isRunning"
+                                [dsBtnDisabled]="eventElement.isRunning"
                                 (click)="removeProject(eventElement)"
                                 [attr.aria-label]="'quality-assurance.event.modal.project.remove' | translate"
                         >
@@ -161,7 +161,7 @@
                               class="btn btn-outline-success btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.import' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="modalChoice('ACCEPTED', eventElement, acceptModal)"
                               [attr.aria-label]="'quality-assurance.event.action.import' | translate"
                       >
@@ -171,7 +171,7 @@
                               class="btn btn-outline-success btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.accept' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="executeAction('ACCEPTED', eventElement)"
                               [attr.aria-label]="'quality-assurance.event.action.accept' | translate"
                       >
@@ -180,7 +180,7 @@
                       <button class="btn btn-outline-dark btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.ignore' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="openModal('DISCARDED', eventElement, ignoreModal)"
                               [attr.aria-label]="'quality-assurance.event.action.ignore' | translate"
                       >
@@ -190,7 +190,7 @@
                               *ngIf="(isAdmin$ | async)"
                               ngbTooltip="{{'quality-assurance.event.action.reject' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               (click)="openModal('REJECTED', eventElement, rejectModal)"
                               [attr.aria-label]="'quality-assurance.event.action.reject' | translate"
                       >
@@ -200,7 +200,7 @@
                               *ngIf="(isAdmin$ | async) === false"
                               ngbTooltip="{{'quality-assurance.event.action.undo' | translate }}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
                               (click)="openModal('UNDO', eventElement, undoModal)">
                         <i class="fas fa-trash-alt"></i>
@@ -210,7 +210,7 @@
                       <button class="btn btn-outline-danger btn-sm button-width"
                               ngbTooltip="{{'quality-assurance.event.action.undo' | translate}}"
                               container="body"
-                              [disabled]="eventElement.isRunning"
+                              [dsBtnDisabled]="eventElement.isRunning"
                               [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
                               (click)="openModal('UNDO', eventElement, undoModal)">
                         <i class="fas fa-trash-alt"></i>
diff --git a/src/app/notifications/qa/events/quality-assurance-events.component.ts b/src/app/notifications/qa/events/quality-assurance-events.component.ts
index 6276226c69..1bbd477ece 100644
--- a/src/app/notifications/qa/events/quality-assurance-events.component.ts
+++ b/src/app/notifications/qa/events/quality-assurance-events.component.ts
@@ -65,6 +65,7 @@ import {
 } from '../../../core/shared/operators';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { hasValue } from '../../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
@@ -86,7 +87,7 @@ import { EPersonDataComponent } from './ePerson-data/ePerson-data.component';
   templateUrl: './quality-assurance-events.component.html',
   styleUrls: ['./quality-assurance-events.component.scss'],
   standalone: true,
-  imports: [AlertComponent, NgIf, ThemedLoadingComponent, PaginationComponent, NgFor, RouterLink, NgbTooltipModule, AsyncPipe, TranslateModule, EPersonDataComponent],
+  imports: [AlertComponent, NgIf, ThemedLoadingComponent, PaginationComponent, NgFor, RouterLink, NgbTooltipModule, AsyncPipe, TranslateModule, EPersonDataComponent, BtnDisabledDirective],
 })
 export class QualityAssuranceEventsComponent implements OnInit, OnDestroy {
   /**
diff --git a/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.html b/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.html
index 026f863412..4b9bbe64f3 100644
--- a/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.html
+++ b/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.html
@@ -32,8 +32,8 @@
     <div id="project-search" class="input-group mb-3">
       <input type="text" class="form-control" (keyup.enter)="search(projectTitle)" [(ngModel)]="projectTitle" placeholder="{{labelPrefix + label + '.placeholder' |translate}}" aria-label="" aria-describedby="">
       <div class="input-group-append">
-        <button type="button" class="btn btn-outline-secondary" [disabled]="projectTitle === ''" (click)="projectTitle = ''">{{(labelPrefix + label + '.clear'|translate)}}</button>
-        <button type="button" class="btn btn-primary" [disabled]="projectTitle === ''" (click)="search(projectTitle)">{{(labelPrefix + label + '.search'|translate)}}</button>
+        <button type="button" class="btn btn-outline-secondary" [dsBtnDisabled]="projectTitle === ''" (click)="projectTitle = ''">{{(labelPrefix + label + '.clear'|translate)}}</button>
+        <button type="button" class="btn btn-primary" [dsBtnDisabled]="projectTitle === ''" (click)="search(projectTitle)">{{(labelPrefix + label + '.search'|translate)}}</button>
       </div>
     </div>
 
@@ -66,6 +66,6 @@
     <button type="button" class="btn btn-outline-secondary" (click)="close()">{{ (labelPrefix + label + '.cancel' | translate) }}</button>
   </div>
   <div>
-    <button type="button" class="btn btn-primary" [disabled]="selectedImportType === importType.None" (click)="bound()">{{ (labelPrefix + label + '.bound' | translate) }}</button>
+    <button type="button" class="btn btn-primary" [dsBtnDisabled]="selectedImportType === importType.None" (click)="bound()">{{ (labelPrefix + label + '.bound' | translate) }}</button>
   </div>
 </div>
diff --git a/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.ts b/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.ts
index b2d45916d2..6e156eee7e 100644
--- a/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.ts
+++ b/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.ts
@@ -30,6 +30,7 @@ import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { Item } from '../../../core/shared/item.model';
 import { SearchService } from '../../../core/shared/search/search.service';
 import { AlertComponent } from '../../../shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -105,7 +106,7 @@ export interface QualityAssuranceEventData {
   styleUrls: ['./project-entry-import-modal.component.scss'],
   templateUrl: './project-entry-import-modal.component.html',
   standalone: true,
-  imports: [RouterLink, NgIf, FormsModule, ThemedLoadingComponent, ThemedSearchResultsComponent, AlertComponent, AsyncPipe, TranslateModule],
+  imports: [RouterLink, NgIf, FormsModule, ThemedLoadingComponent, ThemedSearchResultsComponent, AlertComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component to display a modal window for linking a project to an Quality Assurance event
diff --git a/src/app/notifications/suggestion-actions/suggestion-actions.component.html b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
index 2a46191dee..342919d4ae 100644
--- a/src/app/notifications/suggestion-actions/suggestion-actions.component.html
+++ b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
@@ -21,7 +21,7 @@
   </div>
   <button (click)="ignoreSuggestion()" class="btn btn-danger ml-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()" [dsBtnDisabled]="!hasEvidence" class="btn btn-info ml-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/suggestion-actions/suggestion-actions.component.ts b/src/app/notifications/suggestion-actions/suggestion-actions.component.ts
index 36d58acbbf..0362e50f4c 100644
--- a/src/app/notifications/suggestion-actions/suggestion-actions.component.ts
+++ b/src/app/notifications/suggestion-actions/suggestion-actions.component.ts
@@ -15,6 +15,7 @@ import { take } from 'rxjs/operators';
 import { Suggestion } from '../../core/notifications/suggestions/models/suggestion.model';
 import { Collection } from '../../core/shared/collection.model';
 import { ItemType } from '../../core/shared/item-relationships/item-type.model';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { ThemedCreateItemParentSelectorComponent } from '../../shared/dso-selector/modal-wrappers/create-item-parent-selector/themed-create-item-parent-selector.component';
 import { EntityDropdownComponent } from '../../shared/entity-dropdown/entity-dropdown.component';
 import { SuggestionApproveAndImport } from '../suggestion-list-element/suggestion-approve-and-import';
@@ -31,6 +32,7 @@ import { SuggestionApproveAndImport } from '../suggestion-list-element/suggestio
     TranslateModule,
     NgIf,
     NgbDropdownModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/notifications/suggestion-targets/suggestion-targets.effects.ts b/src/app/notifications/suggestion-targets/suggestion-targets.effects.ts
index de92e98ef8..4a1b413872 100644
--- a/src/app/notifications/suggestion-targets/suggestion-targets.effects.ts
+++ b/src/app/notifications/suggestion-targets/suggestion-targets.effects.ts
@@ -13,6 +13,10 @@ import {
   switchMap,
   tap,
 } from 'rxjs/operators';
+import { ConfigurationDataService } from 'src/app/core/data/configuration-data.service';
+import { RemoteData } from 'src/app/core/data/remote-data';
+import { ConfigurationProperty } from 'src/app/core/shared/configuration-property.model';
+import { getFirstCompletedRemoteData } from 'src/app/core/shared/operators';
 
 import {
   AuthActionTypes,
@@ -72,14 +76,23 @@ export class SuggestionTargetsEffects {
   ), { dispatch: false });
 
   /**
-   * Show a notification on error.
+   * Retrieve the current user suggestions after retrieving the authenticated user
    */
   retrieveUserTargets$ = createEffect(() => this.actions$.pipe(
     ofType(AuthActionTypes.RETRIEVE_AUTHENTICATED_EPERSON_SUCCESS),
     switchMap((action: RetrieveAuthenticatedEpersonSuccessAction) => {
-      return this.suggestionsService.retrieveCurrentUserSuggestions(action.payload).pipe(
-        map((suggestionTargets: SuggestionTarget[]) => new AddUserSuggestionsAction(suggestionTargets)),
-      );
+      return this.configurationService.findByPropertyName('researcher-profile.entity-type').pipe(
+        getFirstCompletedRemoteData(),
+        switchMap((configRD: RemoteData<ConfigurationProperty> ) => {
+          if (configRD.hasSucceeded && configRD.payload.values.length > 0) {
+            return this.suggestionsService.retrieveCurrentUserSuggestions(action.payload).pipe(
+              map((suggestionTargets: SuggestionTarget[]) => new AddUserSuggestionsAction(suggestionTargets)),
+            );
+          } else {
+            return of(new AddUserSuggestionsAction([]));
+          }
+        },
+        ));
     })));
 
   /**
@@ -91,16 +104,35 @@ export class SuggestionTargetsEffects {
       return this.store$.select((state: any) => state.core.auth.userId)
         .pipe(
           switchMap((userId: string) => {
-            return this.suggestionsService.retrieveCurrentUserSuggestions(userId)
-              .pipe(
-                map((suggestionTargets: SuggestionTarget[]) => new AddUserSuggestionsAction(suggestionTargets)),
-                catchError((error: unknown) => {
-                  if (error instanceof Error) {
-                    console.error(error.message);
-                  }
-                  return of(new RefreshUserSuggestionsErrorAction());
-                }),
-              );
+            if (!userId) {
+              return of(new AddUserSuggestionsAction([]));
+            }
+            return this.configurationService.findByPropertyName('researcher-profile.entity-type').pipe(
+              getFirstCompletedRemoteData(),
+              switchMap((configRD: RemoteData<ConfigurationProperty> ) => {
+                if (configRD.hasSucceeded && configRD.payload.values.length > 0) {
+                  return this.suggestionsService.retrieveCurrentUserSuggestions(userId)
+                    .pipe(
+                      map((suggestionTargets: SuggestionTarget[]) => new AddUserSuggestionsAction(suggestionTargets)),
+                      catchError((error: unknown) => {
+                        if (error instanceof Error) {
+                          console.error(error.message);
+                        }
+                        return of(new RefreshUserSuggestionsErrorAction());
+                      }),
+                    );
+                } else {
+                  return of(new AddUserSuggestionsAction([]));
+                }
+              },
+              ),
+              catchError((error: unknown) => {
+                if (error instanceof Error) {
+                  console.error(error.message);
+                }
+                return of(new RefreshUserSuggestionsErrorAction());
+              }),
+            );
           }),
           catchError((error: unknown) => {
             if (error instanceof Error) {
@@ -119,6 +151,7 @@ export class SuggestionTargetsEffects {
    * @param {TranslateService} translate
    * @param {NotificationsService} notificationsService
    * @param {SuggestionsService} suggestionsService
+   * @param {ConfigurationDataService} configurationService
    */
   constructor(
     private actions$: Actions,
@@ -126,6 +159,7 @@ export class SuggestionTargetsEffects {
     private translate: TranslateService,
     private notificationsService: NotificationsService,
     private suggestionsService: SuggestionsService,
+    private configurationService: ConfigurationDataService,
   ) {
   }
 }
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 9cd86d1a6d..5c161f8d8d 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,20 +1,47 @@
-<div class="form-group" *ngIf="scripts$ | async">
-    <label for="process-script">{{'process.new.select-script' | translate}}</label>
-    <select required id="process-script"
-            class="form-control"
-            name="script"
-            [(ngModel)]="selectedScript"
-            #script="ngModel">
-        <option [ngValue]="undefined">{{'process.new.select-script.placeholder' | translate}}</option>
-        <option *ngFor="let script of scripts$ | async" [ngValue]="script.id">
-            {{script.name}}
-        </option>
-    </select>
-
+<div class="d-flex w-100 flex-column gap-3">
+  <div>
+    <div ngbDropdown class="d-flex">
+      <input id="process-script"
+             class="form-control"
+             required
+             [ngModel]="selectedScript"
+             placeholder="{{'process.new.select-script.placeholder' | translate}}"
+             [ngModelOptions]="{standalone: true}"
+             ngbDropdownToggle
+             role="combobox"
+             #script="ngModel">
+      <div ngbDropdownMenu aria-labelledby="process-script" class="w-100 scrollable-menu"
+            role="menu"
+            (scroll)="onScroll($event)"
+            infiniteScroll
+            [infiniteScrollDistance]="5"
+            [infiniteScrollThrottle]="300"
+            [infiniteScrollUpDistance]="1.5"
+            [fromRoot]="true"
+            [scrollWindow]="false">
+            <button class="dropdown-item"
+                    *ngFor="let script of scripts"
+                    role="menuitem"
+                    type="button"
+                    title="{{ script.name }}"
+                    (click)="onSelect(script);">
+              <span class="text-truncate">{{ script.name }}</span>
+            </button>
+          <ng-container *ngIf="(isLoading$ | async)">
+            <button class="dropdown-item disabled" role="menuitem">
+              <ds-loading message="{{'loading.default' | translate}}">
+              </ds-loading>
+            </button>
+          </ng-container>
+      </div>
+    </div>
+  </div>
+  <div>
     <div *ngIf="script.invalid && (script.dirty || script.touched)"
          class="alert alert-danger validation-error">
-        <div *ngIf="script.errors.required">
-            {{'process.new.select-script.required' | translate}}
-        </div>
+      <div *ngIf="script.errors.required">
+        {{ 'process.new.select-script.required' | translate }}
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.scss b/src/app/process-page/form/scripts-select/scripts-select.component.scss
index e69de29bb2..4f9ca62310 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.scss
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.scss
@@ -0,0 +1,23 @@
+.dropdown-item {
+  padding: 0.35rem 1rem;
+
+  &:active {
+    color: white !important;
+  }
+}
+
+.scrollable-menu {
+  height: auto;
+  max-height: var(--ds-dropdown-menu-max-height);
+  overflow-x: hidden;
+}
+
+li:not(:last-of-type) .dropdown-item {
+  border-bottom: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
+}
+
+#entityControlsDropdownMenu {
+  outline: 0;
+  left: 0 !important;
+  box-shadow: var(--bs-btn-focus-box-shadow);
+}
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
index 6b8c39eb8f..7b095926fb 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
@@ -87,7 +87,7 @@ describe('ScriptsSelectComponent', () => {
     fixture.detectChanges();
     tick();
 
-    const select = fixture.debugElement.query(By.css('select'));
+    const select = fixture.debugElement.query(By.css('#process-script'));
     select.triggerEventHandler('blur', null);
 
     fixture.detectChanges();
@@ -101,7 +101,7 @@ describe('ScriptsSelectComponent', () => {
     fixture.detectChanges();
     tick();
 
-    const select = fixture.debugElement.query(By.css('select'));
+    const select = fixture.debugElement.query(By.css('#process-script'));
     select.triggerEventHandler('blur', null);
 
     fixture.detectChanges();
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts
index 63c11bd91a..9eccb7ceff 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.ts
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts
@@ -19,32 +19,29 @@ import {
 } from '@angular/forms';
 import {
   ActivatedRoute,
-  Params,
   Router,
 } from '@angular/router';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import {
-  Observable,
+  BehaviorSubject,
   Subscription,
 } from 'rxjs';
 import {
-  distinctUntilChanged,
-  filter,
   map,
-  switchMap,
-  take,
+  tap,
 } from 'rxjs/operators';
 
+import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import {
-  getFirstSucceededRemoteData,
+  getFirstCompletedRemoteData,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
-import {
-  hasNoValue,
-  hasValue,
-} from '../../../shared/empty.util';
+import { hasValue } from '../../../shared/empty.util';
+import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
 import { Script } from '../../scripts/script.model';
 import { controlContainerFactory } from '../process-form-factory';
 
@@ -61,7 +58,7 @@ const SCRIPT_QUERY_PARAMETER = 'script';
     useFactory: controlContainerFactory,
     deps: [[new Optional(), NgForm]] }],
   standalone: true,
-  imports: [NgIf, FormsModule, NgFor, AsyncPipe, TranslateModule],
+  imports: [NgIf, FormsModule, NgFor, AsyncPipe, TranslateModule, InfiniteScrollModule, ThemedLoadingComponent, NgbDropdownModule],
 })
 export class ScriptsSelectComponent implements OnInit, OnDestroy {
   /**
@@ -71,9 +68,19 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
   /**
    * All available scripts
    */
-  scripts$: Observable<Script[]>;
+  scripts: Script[] = [];
+
   private _selectedScript: Script;
-  private routeSub: Subscription;
+  private subscription: Subscription;
+
+  private _isLastPage = false;
+
+  scriptOptions: FindListOptions = {
+    elementsPerPage: 20,
+    currentPage: 1,
+  };
+
+  isLoading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   constructor(
     private scriptService: ScriptDataService,
@@ -87,31 +94,46 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
    * Checks if the route contains a script ID and auto selects this scripts
    */
   ngOnInit() {
-    this.scripts$ = this.scriptService.findAll({ elementsPerPage: 9999 })
-      .pipe(
-        getFirstSucceededRemoteData(),
-        getRemoteDataPayload(),
-        map((paginatedList: PaginatedList<Script>) => paginatedList.page),
-      );
+    this.loadScripts();
+  }
 
-    this.routeSub = this.route.queryParams
-      .pipe(
-        filter((params: Params) => hasNoValue(params.id)),
-        map((params: Params) => params[SCRIPT_QUERY_PARAMETER]),
-        distinctUntilChanged(),
-        switchMap((id: string) =>
-          this.scripts$
-            .pipe(
-              take(1),
-              map((scripts) =>
-                scripts.find((script) => script.id === id),
-              ),
-            ),
-        ),
-      ).subscribe((script: Script) => {
-        this._selectedScript = script;
-        this.select.emit(script);
-      });
+  /**
+   * Load the scripts and check if the route contains a script
+   */
+  loadScripts() {
+    if (this.isLoading$.value) {return;}
+    this.isLoading$.next(true);
+
+    this.subscription = this.scriptService.findAll(this.scriptOptions).pipe(
+      getFirstCompletedRemoteData(),
+      getRemoteDataPayload(),
+      tap((paginatedList: PaginatedList<Script>) => {
+        this._isLastPage = paginatedList?.pageInfo?.currentPage >= paginatedList?.pageInfo?.totalPages;
+      }),
+      map((paginatedList: PaginatedList<Script>) => paginatedList.page),
+    ).subscribe((newScripts: Script[]) => {
+      this.scripts = [...this.scripts, ...newScripts];
+      this.isLoading$.next(false);
+
+      const param = this.route.snapshot.queryParams[SCRIPT_QUERY_PARAMETER];
+      if (hasValue(param)) {
+        this._selectedScript = this.scripts.find((script) => script.id === param);
+        this.select.emit(this._selectedScript);
+      }
+    });
+  }
+
+  /**
+   * Load more scripts when the user scrolls to the bottom of the list
+   * @param event The scroll event
+   */
+  onScroll(event: any) {
+    if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
+      if (!this.isLoading$.value && !this._isLastPage) {
+        this.scriptOptions.currentPage++;
+        this.loadScripts();
+      }
+    }
   }
 
   /**
@@ -133,14 +155,25 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy {
     );
   }
 
+  selectScript(script: Script) {
+    this._selectedScript = script;
+  }
+
+  onSelect(newScript: Script) {
+    this.selectScript(newScript);
+    // this._selectedScript = newScript;
+    this.select.emit(newScript);
+    this.selectedScript = newScript.name;
+  }
+
   @Input()
   set script(value: Script) {
     this._selectedScript = value;
   }
 
   ngOnDestroy(): void {
-    if (hasValue(this.routeSub)) {
-      this.routeSub.unsubscribe();
+    if (hasValue(this.subscription)) {
+      this.subscription.unsubscribe();
     }
   }
 }
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index cc4b39572b..cd7b97609a 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -64,10 +64,10 @@
                 <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 mr-2" [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
                         (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
                 <button id="delete-confirm" class="btn btn-danger"
-                        [disabled]="processBulkDeleteService.isProcessing$() |async"
+                        [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
                         (click)="deleteSelected()">{{ 'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()}  }}
                 </button>
             </div>
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
index 1d10a87b64..47efe888bf 100644
--- a/src/app/process-page/overview/process-overview.component.ts
+++ b/src/app/process-page/overview/process-overview.component.ts
@@ -16,6 +16,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
 
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { hasValue } from '../../shared/empty.util';
 import { PaginationComponent } from '../../shared/pagination/pagination.component';
 import { VarDirective } from '../../shared/utils/var.directive';
@@ -31,7 +32,7 @@ import { ProcessOverviewTableComponent } from './table/process-overview-table.co
   selector: 'ds-process-overview',
   templateUrl: './process-overview.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, PaginationComponent, NgFor, VarDirective, AsyncPipe, DatePipe, TranslateModule, NgTemplateOutlet, ProcessOverviewTableComponent],
+  imports: [NgIf, RouterLink, PaginationComponent, NgFor, VarDirective, AsyncPipe, DatePipe, TranslateModule, NgTemplateOutlet, ProcessOverviewTableComponent, BtnDisabledDirective],
 })
 /**
  * Component displaying a list of all processes in a paginated table
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 a5bbb38d02..3233aa5555 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
@@ -29,7 +29,7 @@
       <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 ml-5 mr-2" (click)="createFromScratch()" [dsBtnDisabled]="!checked">
       <i class="fas fa-plus"></i>
       {{ 'dso-selector.claim.item.create-from-scratch' | translate }}
     </button>
diff --git a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.ts b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.ts
index 4ff9b637f6..7730b1e4dd 100644
--- a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.ts
+++ b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.ts
@@ -25,6 +25,7 @@ import { Item } from '../../core/shared/item.model';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { ViewMode } from '../../core/shared/view-mode.model';
 import { getItemPageRoute } from '../../item-page/item-page-routing-paths';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { DSOSelectorModalWrapperComponent } from '../../shared/dso-selector/modal-wrappers/dso-selector-modal-wrapper.component';
 import { CollectionElementLinkType } from '../../shared/object-collection/collection-element-link.type';
 import { ListableObjectComponentLoaderComponent } from '../../shared/object-collection/shared/listable-object/listable-object-component-loader.component';
@@ -42,6 +43,7 @@ import { ProfileClaimService } from '../profile-claim/profile-claim.service';
     AsyncPipe,
     TranslateModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 8d48da08d9..d0279d9c5f 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
@@ -13,7 +13,7 @@
     <p>{{'researcher.profile.not.associated' | translate}}</p>
   </div>
   <button *ngIf="!researcherProfile" class="btn btn-primary mr-2"
-          [disabled]="(isProcessingCreate() | async)"
+          [dsBtnDisabled]="(isProcessingCreate() | async)"
           (click)="createProfile()">
     <span *ngIf="(isProcessingCreate() | async)">
         <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
@@ -23,10 +23,10 @@
     </span>
   </button>
   <ng-container *ngIf="researcherProfile">
-    <button class="btn btn-primary mr-2" [disabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
+    <button class="btn btn-primary mr-2" [dsBtnDisabled]="!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)">
+    <button class="btn btn-danger" [dsBtnDisabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
         <span *ngIf="(isProcessingDelete() | async)">
             <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
         </span>
diff --git a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts
index cfbbacac12..5d09097e6b 100644
--- a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts
+++ b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.ts
@@ -36,6 +36,7 @@ import {
   getFirstCompletedRemoteData,
   getFirstSucceededRemoteDataPayload,
 } from '../../core/shared/operators';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { ConfirmationModalComponent } from '../../shared/confirmation-modal/confirmation-modal.component';
 import { isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
@@ -53,6 +54,7 @@ import { ProfileClaimItemModalComponent } from '../profile-claim-item-modal/prof
     TranslateModule,
     UiSwitchModule,
     VarDirective,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/profile-page/profile-page.component.ts b/src/app/profile-page/profile-page.component.ts
index bfa9bc5483..c8daf5c969 100644
--- a/src/app/profile-page/profile-page.component.ts
+++ b/src/app/profile-page/profile-page.component.ts
@@ -224,7 +224,8 @@ export class ProfilePageComponent implements OnInit {
    */
   updateSecurity() {
     const passEntered = isNotEmpty(this.password);
-    if (this.invalidSecurity) {
+    const validCurrentPassword = isNotEmpty(this.currentPassword);
+    if (validCurrentPassword && !passEntered) {
       this.notificationsService.error(this.translate.instant(this.PASSWORD_NOTIFICATIONS_PREFIX + 'error.general'));
     }
     if (!this.invalidSecurity && passEntered) {
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 2e93902ada..eded936605 100644
--- a/src/app/register-email-form/register-email-form.component.html
+++ b/src/app/register-email-form/register-email-form.component.html
@@ -51,13 +51,13 @@
     </div>
 
     <ng-container *ngIf="(!registrationVerification  || ((googleRecaptchaService.captchaVersion() | async) !== 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible')); else v2Invisible">
-      <button class="btn btn-primary" [disabled]="form.invalid || registrationVerification && !isRecaptchaCookieAccepted() || disableUntilChecked" (click)="register()">
+      <button class="btn btn-primary" [dsBtnDisabled]="form.invalid || registrationVerification && !isRecaptchaCookieAccepted() || disableUntilChecked" (click)="register()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
     </ng-container>
 
     <ng-template #v2Invisible>
-      <button class="btn btn-primary" [disabled]="form.invalid" (click)="executeRecaptcha()">
+      <button class="btn btn-primary" [dsBtnDisabled]="form.invalid" (click)="executeRecaptcha()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
     </ng-template>
diff --git a/src/app/register-email-form/register-email-form.component.ts b/src/app/register-email-form/register-email-form.component.ts
index fff8479cbe..8995ffa08f 100644
--- a/src/app/register-email-form/register-email-form.component.ts
+++ b/src/app/register-email-form/register-email-form.component.ts
@@ -54,6 +54,7 @@ import {
 import { Registration } from '../core/shared/registration.model';
 import { AlertComponent } from '../shared/alert/alert.component';
 import { AlertType } from '../shared/alert/alert-type';
+import { BtnDisabledDirective } from '../shared/btn-disabled.directive';
 import { KlaroService } from '../shared/cookies/klaro.service';
 import { isNotEmpty } from '../shared/empty.util';
 import { GoogleRecaptchaComponent } from '../shared/google-recaptcha/google-recaptcha.component';
@@ -66,7 +67,7 @@ export const TYPE_REQUEST_REGISTER = 'register';
   selector: 'ds-base-register-email-form',
   templateUrl: './register-email-form.component.html',
   standalone: true,
-  imports: [NgIf, FormsModule, ReactiveFormsModule, AlertComponent, GoogleRecaptchaComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, FormsModule, ReactiveFormsModule, AlertComponent, GoogleRecaptchaComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component responsible to render an email registration form.
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 dd9528925a..14c06fd8db 100644
--- a/src/app/register-page/create-profile/create-profile.component.html
+++ b/src/app/register-page/create-profile/create-profile.component.html
@@ -81,7 +81,7 @@
     <div class="row">
         <div class="col-12">
             <button
-                    [disabled]="isInValidPassword || userInfoForm.invalid"
+                    [dsBtnDisabled]="isInValidPassword || userInfoForm.invalid"
                     class="btn btn-default btn-primary"
                     (click)="submitEperson()">{{'register-page.create-profile.submit' | translate}}</button>
         </div>
diff --git a/src/app/register-page/create-profile/create-profile.component.ts b/src/app/register-page/create-profile/create-profile.component.ts
index 7e88c5a1c0..43ee0c8cd3 100644
--- a/src/app/register-page/create-profile/create-profile.component.ts
+++ b/src/app/register-page/create-profile/create-profile.component.ts
@@ -43,6 +43,7 @@ import {
 } from '../../core/shared/operators';
 import { Registration } from '../../core/shared/registration.model';
 import { ProfilePageSecurityFormComponent } from '../../profile-page/profile-page-security-form/profile-page-security-form.component';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { isEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 
@@ -60,6 +61,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
     AsyncPipe,
     ReactiveFormsModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 286e87554b..b2227bfbae 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
@@ -13,7 +13,7 @@
   <ng-content></ng-content>
   <div class="d-flex flex-row-reverse">
     <button (click)="submit()"
-            [disabled]="!subject || subject.length === 0"
+            [dsBtnDisabled]="!subject || subject.length === 0"
             class="btn btn-primary"
             title="{{'grant-deny-request-copy.email.send' | translate }}">
       <i class="fas fa-envelope"></i> {{'grant-deny-request-copy.email.send' | translate }}
diff --git a/src/app/request-copy/email-request-copy/email-request-copy.component.ts b/src/app/request-copy/email-request-copy/email-request-copy.component.ts
index 66a9e0b17f..34adfff97d 100644
--- a/src/app/request-copy/email-request-copy/email-request-copy.component.ts
+++ b/src/app/request-copy/email-request-copy/email-request-copy.component.ts
@@ -12,6 +12,7 @@ import {
 import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import { RequestCopyEmail } from './request-copy-email.model';
 
 
@@ -20,7 +21,7 @@ import { RequestCopyEmail } from './request-copy-email.model';
   styleUrls: ['./email-request-copy.component.scss'],
   templateUrl: './email-request-copy.component.html',
   standalone: true,
-  imports: [FormsModule, NgClass, NgIf, TranslateModule],
+  imports: [FormsModule, NgClass, NgIf, TranslateModule, BtnDisabledDirective],
 })
 /**
  * A form component for an email to send back to the user requesting an item
diff --git a/src/app/search-page/configuration-search-page.component.ts b/src/app/search-page/configuration-search-page.component.ts
index afbe34d550..89d408542a 100644
--- a/src/app/search-page/configuration-search-page.component.ts
+++ b/src/app/search-page/configuration-search-page.component.ts
@@ -7,6 +7,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -57,7 +58,8 @@ export class ConfigurationSearchPageComponent extends SearchComponent {
               protected routeService: RouteService,
               protected router: Router,
               @Inject(APP_CONFIG) protected appConfig: AppConfig,
+              @Inject(PLATFORM_ID) public platformId: any,
   ) {
-    super(service, sidebarService, windowService, searchConfigService, routeService, router, appConfig);
+    super(service, sidebarService, windowService, searchConfigService, routeService, router, appConfig, platformId);
   }
 }
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 2ec3b51219..69c49d6117 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
@@ -47,7 +47,7 @@
             <div class="input-group-append">
               <button
                 class="btn btn-outline-secondary fas fa-calendar"
-                [disabled]="ngForm.disabled"
+                [dsBtnDisabled]="ngForm.disabled"
                 (click)="d.toggle()" type="button">
               </button>
             </div>
@@ -76,7 +76,7 @@
             <div class="input-group-append">
               <button
                 type="button" class="btn btn-outline-secondary fas fa-calendar"
-                [disabled]="ngForm.disabled"
+                [dsBtnDisabled]="ngForm.disabled"
                 (click)="d1.toggle()">
               </button>
             </div>
@@ -93,7 +93,7 @@
 
           <button type="button" class="btn btn-outline-danger"
                   [attr.aria-label]="'access-control-remove' | translate"
-                  [disabled]="ngForm.disabled || form.accessControls.length === 1"
+                  [dsBtnDisabled]="ngForm.disabled || form.accessControls.length === 1"
                   (click)="removeAccessControlItem(control.id)">
             <i class="fas fa-trash"></i>
           </button>
@@ -103,7 +103,7 @@
   </ng-container>
 
   <button type="button" id="add-btn-{{type}}" class="btn btn-outline-primary mt-3"
-          [disabled]="ngForm.disabled"
+          [dsBtnDisabled]="ngForm.disabled"
           (click)="addAccessControlItem()">
     <i class="fas fa-plus"></i>
     {{'access-control-add-more' | translate}}
diff --git a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.ts b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.ts
index dc6fe4d297..3dc84a833a 100644
--- a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.ts
+++ b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.ts
@@ -16,6 +16,7 @@ import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { AccessesConditionOption } from '../../../core/config/models/config-accesses-conditions-options.model';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import { dateToISOFormat } from '../../date.util';
 import { ToDatePipe } from './to-date.pipe';
 
@@ -25,7 +26,7 @@ import { ToDatePipe } from './to-date.pipe';
   styleUrls: ['./access-control-array-form.component.scss'],
   exportAs: 'accessControlArrayForm',
   standalone: true,
-  imports: [FormsModule, NgIf, NgFor, NgbDatepickerModule, TranslateModule, ToDatePipe],
+  imports: [FormsModule, NgIf, NgFor, NgbDatepickerModule, TranslateModule, ToDatePipe, BtnDisabledDirective],
 })
 export class AccessControlArrayFormComponent implements OnInit {
   @Input() dropdownOptions: AccessesConditionOption[] = [];
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 ce0f5845c6..0c93aabcf5 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
@@ -103,7 +103,7 @@
                   <button
                     *ngIf="itemRD"
                     [attr.aria-label]="'access-control-bitstreams-select' | translate"
-                    [disabled]="!state.bitstream.toggleStatus || state.bitstream.changesLimit !== 'selected'"
+                    [dsBtnDisabled]="!state.bitstream.toggleStatus || state.bitstream.changesLimit !== 'selected'"
                     (click)="openSelectBitstreamsModal(itemRD.payload)"
                     class="btn btn-outline-dark border-0" type="button">
                     <i class="fa fa-search"></i>
@@ -161,7 +161,7 @@
           {{ 'access-control-cancel' | translate }}
         </button>
         <button class="btn btn-primary"
-                [disabled]="!state.item.toggleStatus && !state.bitstream.toggleStatus"
+                [dsBtnDisabled]="!state.item.toggleStatus && !state.bitstream.toggleStatus"
                 (click)="submit()" type="submit">
           {{ 'access-control-execute' | translate }}
         </button>
diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.ts b/src/app/shared/access-control-form-container/access-control-form-container.component.ts
index 56a6e92323..46895b8532 100644
--- a/src/app/shared/access-control-form-container/access-control-form-container.component.ts
+++ b/src/app/shared/access-control-form-container/access-control-form-container.component.ts
@@ -31,6 +31,7 @@ import { Item } from '../../core/shared/item.model';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { AlertComponent } from '../alert/alert.component';
 import { AlertType } from '../alert/alert-type';
+import { BtnDisabledDirective } from '../btn-disabled.directive';
 import { SelectableListService } from '../object-list/selectable-list/selectable-list.service';
 import { AccessControlArrayFormComponent } from './access-control-array-form/access-control-array-form.component';
 import { createAccessControlInitialFormState } from './access-control-form-container-intial-state';
@@ -46,7 +47,7 @@ import {
   styleUrls: ['./access-control-form-container.component.scss'],
   exportAs: 'dsAccessControlForm',
   standalone: true,
-  imports: [NgIf, AlertComponent, UiSwitchModule, FormsModule, AccessControlArrayFormComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, AlertComponent, UiSwitchModule, FormsModule, AccessControlArrayFormComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 export class AccessControlFormContainerComponent<T extends DSpaceObject> implements OnDestroy {
 
diff --git a/src/app/shared/btn-disabled.directive.ts b/src/app/shared/btn-disabled.directive.ts
new file mode 100644
index 0000000000..427d1654da
--- /dev/null
+++ b/src/app/shared/btn-disabled.directive.ts
@@ -0,0 +1,63 @@
+import {
+  Directive,
+  HostBinding,
+  HostListener,
+  Input,
+} from '@angular/core';
+
+@Directive({
+  selector: '[dsBtnDisabled]',
+  standalone: true,
+})
+
+/**
+ * This directive can be added to a html element to disable it (make it non-interactive).
+ * It acts as a replacement for HTML's disabled attribute.
+ *
+ * This directive should always be used instead of the HTML disabled attribute as it is more accessible.
+ */
+export class BtnDisabledDirective {
+
+    @Input() set dsBtnDisabled(value: boolean) {
+    this.isDisabled = !!value;
+  }
+
+    /**
+     * Binds the aria-disabled attribute to the directive's isDisabled property.
+     * This is used to make the element accessible to screen readers. If the element is disabled, the screen reader will announce it as such.
+     */
+    @HostBinding('attr.aria-disabled') isDisabled = false;
+
+    /**
+     * Binds the class attribute to the directive's isDisabled property.
+     * This is used to style the element when it is disabled (make it look disabled).
+     */
+    @HostBinding('class.disabled') get disabledClass() { return this.isDisabled; }
+
+    /**
+     * Prevents the default action and stops the event from propagating when the element is disabled.
+     * This is used to prevent the element from being interacted with when it is disabled (via mouse click).
+     * @param event The click event.
+     */
+    @HostListener('click', ['$event'])
+    handleClick(event: Event) {
+      if (this.isDisabled) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }
+
+    /**
+     * Prevents the default action and stops the event from propagating when the element is disabled.
+     * This is used to prevent the element from being interacted with when it is disabled (via keystrokes).
+     * @param event The keydown event.
+     */
+  @HostListener('keydown', ['$event'])
+    handleKeydown(event: KeyboardEvent) {
+      if (this.isDisabled && (event.key === 'Enter' || event.key === 'Space')) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }
+}
+
diff --git a/src/app/shared/disabled-directive.spec.ts b/src/app/shared/disabled-directive.spec.ts
new file mode 100644
index 0000000000..96f760fc46
--- /dev/null
+++ b/src/app/shared/disabled-directive.spec.ts
@@ -0,0 +1,105 @@
+import {
+  Component,
+  DebugElement,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { BtnDisabledDirective } from './btn-disabled.directive';
+
+@Component({
+  template: `
+    <button [dsBtnDisabled]="isDisabled">Test Button</button>
+  `,
+})
+class TestComponent {
+  isDisabled = false;
+}
+
+describe('DisabledDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let button: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [BtnDisabledDirective],
+      declarations: [TestComponent],
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    button = fixture.debugElement.query(By.css('button'));
+    fixture.detectChanges();
+  });
+
+  it('should bind aria-disabled to false initially', () => {
+    expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false');
+    expect(button.nativeElement.classList.contains('disabled')).toBeFalse();
+  });
+
+  it('should bind aria-disabled to true and add disabled class when isDisabled is true', () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    expect(button.nativeElement.getAttribute('aria-disabled')).toBe('true');
+    expect(button.nativeElement.classList.contains('disabled')).toBeTrue();
+  });
+
+  it('should bind aria-disabled to false and not have disabled class when isDisabled is false', () => {
+    component.isDisabled = false;
+    fixture.detectChanges();
+
+    expect(button.nativeElement.getAttribute('aria-disabled')).toBe('false');
+    expect(button.nativeElement.classList.contains('disabled')).toBeFalse();
+  });
+
+  it('should prevent click events when disabled', () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    let clickHandled = false;
+    button.nativeElement.addEventListener('click', () => clickHandled = true);
+
+    button.nativeElement.click();
+
+    expect(clickHandled).toBeFalse();
+  });
+
+  it('should prevent Enter or Space keydown events when disabled', () => {
+    component.isDisabled = true;
+    fixture.detectChanges();
+
+    let keydownHandled = false;
+    button.nativeElement.addEventListener('keydown', () => keydownHandled = true);
+
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+    const spaceEvent = new KeyboardEvent('keydown', { key: 'Space' });
+
+    button.nativeElement.dispatchEvent(enterEvent);
+    button.nativeElement.dispatchEvent(spaceEvent);
+
+    expect(keydownHandled).toBeFalse();
+  });
+
+  it('should allow click and keydown events when not disabled', () => {
+    let clickHandled = false;
+    let keydownHandled = false;
+
+    button.nativeElement.addEventListener('click', () => clickHandled = true);
+    button.nativeElement.addEventListener('keydown', () => keydownHandled = true);
+
+    button.nativeElement.click();
+
+    const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+    const spaceEvent = new KeyboardEvent('keydown', { key: 'Space' });
+
+    button.nativeElement.dispatchEvent(enterEvent);
+    button.nativeElement.dispatchEvent(spaceEvent);
+
+    expect(clickHandled).toBeTrue();
+    expect(keydownHandled).toBeTrue();
+  });
+});
diff --git a/src/app/shared/ds-select/ds-select.component.html b/src/app/shared/ds-select/ds-select.component.html
index c12ea61347..e87b7c5cc6 100644
--- a/src/app/shared/ds-select/ds-select.component.html
+++ b/src/app/shared/ds-select/ds-select.component.html
@@ -13,7 +13,7 @@
             class="btn btn-outline-primary selection"
             (blur)="close.emit($event)"
             (click)="close.emit($event)"
-            [disabled]="disabled"
+            [dsBtnDisabled]="disabled"
             ngbDropdownToggle>
       <ng-content select=".selection"></ng-content>
     </button>
diff --git a/src/app/shared/ds-select/ds-select.component.ts b/src/app/shared/ds-select/ds-select.component.ts
index d82378d4e5..2616ce4a9f 100644
--- a/src/app/shared/ds-select/ds-select.component.ts
+++ b/src/app/shared/ds-select/ds-select.component.ts
@@ -8,6 +8,8 @@ import {
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../btn-disabled.directive';
+
 /**
  * Component which represent a DSpace dropdown selector.
  */
@@ -16,7 +18,7 @@ import { TranslateModule } from '@ngx-translate/core';
   templateUrl: './ds-select.component.html',
   styleUrls: ['./ds-select.component.scss'],
   standalone: true,
-  imports: [NgbDropdownModule, NgIf, TranslateModule],
+  imports: [NgbDropdownModule, NgIf, TranslateModule, BtnDisabledDirective],
 })
 export class DsSelectComponent {
 
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 6e427400ee..0503281329 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
@@ -1,7 +1,7 @@
 <div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
     <div class="d-flex flex-row flex-nowrap"
          [ngbTooltip]="itemModel.text | translate" container="body">
-        <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [disabled]="section.model?.disabled">
+        <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled">
             <i class="fas fa-{{section.icon}} fa-fw"></i>
         </button>
         <ul ngbDropdownMenu class="dso-edit-menu-dropdown">
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
index 94d0ddd260..fadaee8b22 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
@@ -22,6 +22,7 @@ import { MenuID } from 'src/app/shared/menu/menu-id.model';
 import { MenuSection } from 'src/app/shared/menu/menu-section.model';
 import { MenuSectionComponent } from 'src/app/shared/menu/menu-section/menu-section.component';
 
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { hasValue } from '../../../empty.util';
 import { MenuService } from '../../../menu/menu.service';
 
@@ -33,7 +34,7 @@ import { MenuService } from '../../../menu/menu.service';
   templateUrl: './dso-edit-menu-expandable-section.component.html',
   styleUrls: ['./dso-edit-menu-expandable-section.component.scss'],
   standalone: true,
-  imports: [NgbDropdownModule, NgbTooltipModule, NgFor, NgIf, NgComponentOutlet, TranslateModule, AsyncPipe],
+  imports: [NgbDropdownModule, NgbTooltipModule, NgFor, NgIf, NgComponentOutlet, TranslateModule, AsyncPipe, BtnDisabledDirective],
 })
 export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent implements OnInit {
 
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html
index bbc388a601..0738e2f28a 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.html
@@ -5,7 +5,7 @@
         <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
         <span class="sr-only">{{itemModel.text | translate}}</span>
     </a>
-    <button *ngIf="section.model.disabled" class="btn btn-dark btn-sm" [disabled]="true">
+    <button *ngIf="section.model.disabled" class="btn btn-dark btn-sm" [dsBtnDisabled]="true">
         <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
         <span class="sr-only">{{itemModel.text | translate}}</span>
     </button>
@@ -13,7 +13,7 @@
 
 <div *ngIf="canActivate" class="dso-button-menu mb-1"
      [ngbTooltip]="itemModel.text | translate">
-    <button class="btn btn-dark btn-sm" [disabled]="section.model.disabled"
+    <button class="btn btn-dark btn-sm" [dsBtnDisabled]="section.model.disabled"
             (click)="activate($event)">
         <i class="fas fa-{{section.icon}} fa-fw" aria-hidden="true"></i>
         <span class="sr-only">{{itemModel.text | translate}}</span>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts
index 2e2397f860..d4d3af4ec5 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts
@@ -10,6 +10,7 @@ import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 import { MenuSectionComponent } from 'src/app/shared/menu/menu-section/menu-section.component';
 
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { isNotEmpty } from '../../../empty.util';
 import { MenuService } from '../../../menu/menu.service';
 import { MenuID } from '../../../menu/menu-id.model';
@@ -23,7 +24,7 @@ import { MenuSection } from '../../../menu/menu-section.model';
   templateUrl: './dso-edit-menu-section.component.html',
   styleUrls: ['./dso-edit-menu-section.component.scss'],
   standalone: true,
-  imports: [NgIf, NgbTooltipModule, RouterLink, TranslateModule],
+  imports: [NgIf, NgbTooltipModule, RouterLink, TranslateModule, BtnDisabledDirective],
 })
 export class DsoEditMenuSectionComponent extends MenuSectionComponent implements OnInit {
 
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
index d4e9b31245..dc49fcaa8a 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
@@ -47,7 +47,12 @@ import {
   styleUrls: ['./create-community-parent-selector.component.scss'],
   templateUrl: './create-community-parent-selector.component.html',
   standalone: true,
-  imports: [DSOSelectorComponent, TranslateModule, NgIf, AsyncPipe],
+  imports: [
+    AsyncPipe,
+    DSOSelectorComponent,
+    NgIf,
+    TranslateModule,
+  ],
 })
 export class CreateCommunityParentSelectorComponent extends DSOSelectorModalWrapperComponent implements OnInit {
   objectType = DSpaceObjectType.COMMUNITY;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
index 7d89f64e5c..ab50bd19df 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -101,6 +101,7 @@ import { SubmissionObject } from '../../../../core/submission/models/submission-
 import { SubmissionObjectDataService } from '../../../../core/submission/submission-object-data.service';
 import { paginatedRelationsToItems } from '../../../../item-page/simple/item-types/shared/item-relationships-utils';
 import { SubmissionService } from '../../../../submission/submission.service';
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import {
   hasNoValue,
   hasValue,
@@ -142,6 +143,7 @@ import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/d
     NgbTooltipModule,
     NgTemplateOutlet,
     ExistingRelationListElementComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 a7a6b103e4..3ad7063256 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
@@ -5,9 +5,10 @@
          [ngClass]="getClass('element', 'control')">
 
       <!-- Draggable Container -->
-      <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
+      <div role="listbox" [attr.aria-label]="'dynamic-form-array.sortable-list.label' | translate" #dropList cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
         <!-- Draggable Items -->
-        <div *ngFor="let groupModel of model.groups"
+        <div #sortableElement
+             *ngFor="let groupModel of model.groups; let idx = index; let length = count"
              role="group"
              [formGroupName]="groupModel.index"
              [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
@@ -16,7 +17,14 @@
              [cdkDragPreviewClass]="'ds-submission-reorder-dragging'"
              [class.grey-background]="model.isInlineGroupArray">
           <!-- Item content -->
-          <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0" cdkDragHandle>
+          <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0" cdkDragHandle
+               (focus)="addInstructionMessageToLiveRegion(sortableElement)"
+               (keydown.space)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)"
+               (keydown.enter)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)"
+               (keydown.tab)="stopKeyboardDragAndDrop(sortableElement, idx, length)"
+               (keydown.escape)="cancelKeyboardDragAndDrop(sortableElement, idx, length)"
+               (keydown.arrowUp)="handleArrowPress($event, dropList, length, idx, 'up')"
+               (keydown.arrowDown)="handleArrowPress($event, dropList, length, idx, 'down')">
             <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i>
           </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
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 ce4a89226a..f93fcb1eac 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
@@ -17,7 +17,6 @@
   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;
@@ -27,9 +26,6 @@
 
   &:hover, &:focus {
     cursor: grab;
-    .drag-icon {
-      visibility: visible;
-    }
   }
 
 }
@@ -40,18 +36,12 @@
   }
 
   &:focus {
-    .drag-icon {
-      visibility: visible;
-    }
   }
 }
 
 .cdk-drop-list-dragging {
   .drag-handle {
     cursor: grabbing;
-    .drag-icon {
-      visibility: hidden;
-    }
   }
 }
 
@@ -63,3 +53,9 @@
 .cdk-drag-placeholder {
   opacity: 0;
 }
+
+::ng-deep {
+  .sorting-with-keyboard input {
+    background-color: var(--bs-gray-400);
+  }
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.spec.ts
new file mode 100644
index 0000000000..0d9ed6ae74
--- /dev/null
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.spec.ts
@@ -0,0 +1,159 @@
+import { HttpClient } from '@angular/common/http';
+import { EventEmitter } from '@angular/core';
+import {
+  ComponentFixture,
+  inject,
+  TestBed,
+} from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import {
+  DYNAMIC_FORM_CONTROL_MAP_FN,
+  DynamicFormLayoutService,
+  DynamicFormService,
+  DynamicFormValidationService,
+  DynamicInputModel,
+} from '@ng-dynamic-forms/core';
+import { provideMockStore } from '@ngrx/store/testing';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import { NgxMaskModule } from 'ngx-mask';
+import { of } from 'rxjs';
+
+import {
+  APP_CONFIG,
+  APP_DATA_SERVICES_MAP,
+} from '../../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../../environments/environment.test';
+import { SubmissionService } from '../../../../../../submission/submission.service';
+import { DsDynamicFormControlContainerComponent } from '../../ds-dynamic-form-control-container.component';
+import { dsDynamicFormControlMapFn } from '../../ds-dynamic-form-control-map-fn';
+import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
+import { DsDynamicFormArrayComponent } from './dynamic-form-array.component';
+
+describe('DsDynamicFormArrayComponent', () => {
+  const translateServiceStub = {
+    get: () => of('translated-text'),
+    instant: () => 'translated-text',
+    onLangChange: new EventEmitter(),
+    onTranslationChange: new EventEmitter(),
+    onDefaultLangChange: new EventEmitter(),
+  };
+
+  let component: DsDynamicFormArrayComponent;
+  let fixture: ComponentFixture<DsDynamicFormArrayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ReactiveFormsModule,
+        DsDynamicFormArrayComponent,
+        NgxMaskModule.forRoot(),
+        TranslateModule.forRoot(),
+      ],
+      providers: [
+        DynamicFormLayoutService,
+        DynamicFormValidationService,
+        provideMockStore(),
+        { provide: APP_DATA_SERVICES_MAP, useValue: {} },
+        { provide: TranslateService, useValue: translateServiceStub },
+        { provide: HttpClient, useValue: {} },
+        { provide: SubmissionService, useValue: {} },
+        { provide: APP_CONFIG, useValue: environment },
+        { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn },
+      ],
+    }).overrideComponent(DsDynamicFormArrayComponent, {
+      remove: {
+        imports: [DsDynamicFormControlContainerComponent],
+      },
+    })
+      .compileComponents();
+  });
+
+  beforeEach(inject([DynamicFormService], (service: DynamicFormService) => {
+    const formModel = [
+      new DynamicRowArrayModel({
+        id: 'testFormRowArray',
+        initialCount: 5,
+        notRepeatable: false,
+        relationshipConfig: undefined,
+        submissionId: '1234',
+        isDraggable: true,
+        groupFactory: () => {
+          return [
+            new DynamicInputModel({ id: 'testFormRowArrayGroupInput' }),
+          ];
+        },
+        required: false,
+        metadataKey: 'dc.contributor.author',
+        metadataFields: ['dc.contributor.author'],
+        hasSelectableMetadata: true,
+        showButtons: true,
+        typeBindRelations: [{ match: 'VISIBLE', operator: 'OR', when: [{ id: 'dc.type', value: 'Book' }] }],
+      }),
+    ];
+
+    fixture = TestBed.createComponent(DsDynamicFormArrayComponent);
+    component = fixture.componentInstance;
+    component.model = formModel[0] as DynamicRowArrayModel;
+
+    component.group = service.createFormGroup(formModel);
+
+    fixture.detectChanges();
+  }));
+
+  it('should move element up and maintain focus', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowUp' }), dropList, 3, 1, 'up');
+    fixture.detectChanges();
+    expect(component.model.groups[0]).toBeDefined();
+    expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[0]);
+  });
+
+  it('should move element down and maintain focus', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 1, 'down');
+    fixture.detectChanges();
+    expect(component.model.groups[2]).toBeDefined();
+    expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[2]);
+  });
+
+  it('should wrap around when moving up from the first element', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowUp' }), dropList, 3, 0, 'up');
+    fixture.detectChanges();
+    expect(component.model.groups[2]).toBeDefined();
+    expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[2]);
+  });
+
+  it('should wrap around when moving down from the last element', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 2, 'down');
+    fixture.detectChanges();
+    expect(component.model.groups[0]).toBeDefined();
+    expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[0]);
+  });
+
+  it('should not move element if keyboard drag is not active', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    component.elementBeingSorted = null;
+    component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 1, 'down');
+    fixture.detectChanges();
+    expect(component.model.groups[1]).toBeDefined();
+    expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[2]);
+  });
+
+  it('should cancel keyboard drag and drop', () => {
+    const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement;
+    component.elementBeingSortedStartingIndex = 2;
+    component.elementBeingSorted = dropList.querySelectorAll('[cdkDragHandle]')[2];
+    component.model.moveGroup(2, 1);
+    fixture.detectChanges();
+    component.cancelKeyboardDragAndDrop(dropList, 1, 3);
+    fixture.detectChanges();
+    expect(component.elementBeingSorted).toBeNull();
+    expect(component.elementBeingSortedStartingIndex).toBeNull();
+  });
+});
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
index 0ae397ce61..220143291e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.ts
@@ -32,9 +32,14 @@ import {
   DynamicFormValidationService,
   DynamicTemplateDirective,
 } from '@ng-dynamic-forms/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 
 import { Relationship } from '../../../../../../core/shared/item-relationships/relationship.model';
 import { hasValue } from '../../../../../empty.util';
+import { LiveRegionService } from '../../../../../live-region/live-region.service';
 import { DsDynamicFormControlContainerComponent } from '../../ds-dynamic-form-control-container.component';
 import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
 
@@ -51,6 +56,7 @@ import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model';
     CdkDragHandle,
     forwardRef(() => DsDynamicFormControlContainerComponent),
     NgTemplateOutlet,
+    TranslateModule,
   ],
   standalone: true,
 })
@@ -64,6 +70,9 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
   @Input() model: DynamicRowArrayModel;// DynamicRow?
   @Input() templates: QueryList<DynamicTemplateDirective> | undefined;
 
+  elementBeingSorted: HTMLElement;
+  elementBeingSortedStartingIndex: number;
+
   /* eslint-disable @angular-eslint/no-output-rename */
   @Output('dfBlur') blur: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
   @Output('dfChange') change: EventEmitter<DynamicFormControlEvent> = new EventEmitter<DynamicFormControlEvent>();
@@ -74,6 +83,8 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
 
   constructor(protected layoutService: DynamicFormLayoutService,
               protected validationService: DynamicFormValidationService,
+              protected liveRegionService: LiveRegionService,
+              protected translateService: TranslateService,
   ) {
     super(layoutService, validationService);
   }
@@ -127,4 +138,149 @@ export class DsDynamicFormArrayComponent extends DynamicFormArrayComponent {
     }
     return this.control.get([groupModel.startingIndex]);
   }
+
+  /**
+   * Toggles the keyboard drag and drop feature for the given sortable element.
+   * @param event
+   * @param sortableElement
+   * @param index
+   * @param length
+   */
+  toggleKeyboardDragAndDrop(event: KeyboardEvent, sortableElement: HTMLDivElement, index: number, length: number) {
+    event.preventDefault();
+    if (this.elementBeingSorted) {
+      this.stopKeyboardDragAndDrop(sortableElement, index, length);
+    } else {
+      sortableElement.classList.add('sorting-with-keyboard');
+      this.elementBeingSorted = sortableElement;
+      this.elementBeingSortedStartingIndex = index;
+      this.liveRegionService.clear();
+      this.liveRegionService.addMessage(this.translateService.instant('live-region.ordering.status', {
+        itemName: sortableElement.querySelector('input')?.value,
+        index: index + 1,
+        length,
+      }));
+    }
+  }
+
+  /**
+   * Stops the keyboard drag and drop feature.
+   * @param sortableElement
+   * @param index
+   * @param length
+   */
+  stopKeyboardDragAndDrop(sortableElement: HTMLDivElement, index: number, length: number) {
+    this.elementBeingSorted?.classList.remove('sorting-with-keyboard');
+    this.liveRegionService.clear();
+    if (this.elementBeingSorted) {
+      this.elementBeingSorted = null;
+      this.elementBeingSortedStartingIndex = null;
+      this.liveRegionService.addMessage(this.translateService.instant('live-region.ordering.dropped', {
+        itemName: sortableElement.querySelector('input')?.value,
+        index: index + 1,
+        length,
+      }));
+    }
+  }
+
+  /**
+   * Handles the keyboard arrow press event to move the element up or down.
+   * @param event
+   * @param dropList
+   * @param length
+   * @param idx
+   * @param direction
+   */
+  handleArrowPress(event: KeyboardEvent, dropList: HTMLDivElement, length: number, idx: number, direction: 'up' | 'down') {
+    let newIndex = direction === 'up' ? idx - 1 : idx + 1;
+    if (newIndex < 0) {
+      newIndex = length - 1;
+    } else if (newIndex >= length) {
+      newIndex = 0;
+    }
+
+    if (this.elementBeingSorted) {
+      this.model.moveGroup(idx, newIndex - idx);
+      if (hasValue(this.model.groups[newIndex]) && hasValue((this.control as any).controls[newIndex])) {
+        this.onCustomEvent({
+          previousIndex: idx,
+          newIndex,
+          arrayModel: this.model,
+          model: this.model.groups[newIndex].group[0],
+          control: (this.control as any).controls[newIndex],
+        }, 'move');
+        this.liveRegionService.clear();
+        this.liveRegionService.addMessage(this.translateService.instant('live-region.ordering.moved', {
+          itemName: this.elementBeingSorted.querySelector('input')?.value,
+          index: newIndex + 1,
+          length,
+        }));
+      }
+      event.preventDefault();
+      // Set focus back to the moved element
+      setTimeout(() => {
+        this.setFocusToDropListElementOfIndex(dropList, newIndex, direction);
+      });
+    } else {
+      event.preventDefault();
+      this.setFocusToDropListElementOfIndex(dropList, newIndex, direction);
+    }
+  }
+
+  cancelKeyboardDragAndDrop(sortableElement: HTMLDivElement, index: number, length: number) {
+    this.model.moveGroup(index, this.elementBeingSortedStartingIndex - index);
+    if (hasValue(this.model.groups[this.elementBeingSortedStartingIndex]) && hasValue((this.control as any).controls[this.elementBeingSortedStartingIndex])) {
+      this.onCustomEvent({
+        previousIndex: index,
+        newIndex: this.elementBeingSortedStartingIndex,
+        arrayModel: this.model,
+        model: this.model.groups[this.elementBeingSortedStartingIndex].group[0],
+        control: (this.control as any).controls[this.elementBeingSortedStartingIndex],
+      }, 'move');
+      this.stopKeyboardDragAndDrop(sortableElement, this.elementBeingSortedStartingIndex, length);
+    }
+  }
+
+  /**
+   * Sets focus to the drag handle of the drop list element of the given index.
+   * @param dropList
+   * @param index
+   * @param direction
+   */
+  setFocusToDropListElementOfIndex(dropList: HTMLDivElement, index: number, direction: 'up' | 'down') {
+    const newDragHandle = dropList.querySelectorAll(`[cdkDragHandle]`)[index] as HTMLElement;
+    if (newDragHandle) {
+      newDragHandle.focus();
+      if (!this.isElementInViewport(newDragHandle)) {
+        newDragHandle.scrollIntoView(direction === 'up');
+      }
+    }
+  }
+
+  /**
+   * checks if an element is in the viewport
+   * @param el
+   */
+  isElementInViewport(el: HTMLElement) {
+    const rect = el.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }
+
+  /**
+   * Adds an instruction message to the live region when the user might want to sort an element.
+   * @param sortableElement
+   */
+  addInstructionMessageToLiveRegion(sortableElement: HTMLDivElement) {
+    if (!this.elementBeingSorted) {
+      this.liveRegionService.clear();
+      this.liveRegionService.addMessage(this.translateService.instant('live-region.ordering.instructions', {
+        itemName: sortableElement.querySelector('input')?.value,
+      }));
+    }
+  }
 }
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 656c350dbb..c0ff290d73 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
@@ -29,7 +29,7 @@
                 type="button"
                 [attr.aria-labelledby]="'label_' + model.id"
                 [class.disabled]="model.disabled"
-                [disabled]="model.disabled"
+                [dsBtnDisabled]="model.disabled"
                 (click)="datepicker.toggle()">
 
             <i *ngIf="model.toggleIcon" class="{{model.toggleIcon}}" aria-hidden="true"></i>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts
index 62c86f1bad..bc47884198 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.ts
@@ -26,6 +26,8 @@ import {
   DynamicFormValidationService,
 } from '@ng-dynamic-forms/core';
 
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
+
 @Component({
   selector: 'ds-dynamic-date-picker-inline',
   templateUrl: './dynamic-date-picker-inline.component.html',
@@ -34,6 +36,7 @@ import {
     NgbDatepickerModule,
     ReactiveFormsModule,
     NgIf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
index 3bf02c4abd..3dab2d214a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
@@ -14,7 +14,7 @@
       [(ngModel)]="initialYear"
       [value]="year"
       [invalid]="showErrorMessages"
-      [placeholder]='yearPlaceholder'
+      [placeholder]="'form.date-picker.placeholder.year' | translate"
       (blur)="onBlur($event)"
       (change)="onChange($event)"
       (focus)="onFocus($event)"
@@ -29,7 +29,7 @@
       [size]="6"
       [(ngModel)]="initialMonth"
       [value]="month"
-      [placeholder]="monthPlaceholder"
+      [placeholder]="'form.date-picker.placeholder.month' | translate"
       [disabled]="!year || model.disabled"
       (blur)="onBlur($event)"
       (change)="onChange($event)"
@@ -45,7 +45,7 @@
       [size]="2"
       [(ngModel)]="initialDay"
       [value]="day"
-      [placeholder]="dayPlaceholder"
+      [placeholder]="'form.date-picker.placeholder.day' | translate"
       [disabled]="!month || model.disabled"
       (blur)="onBlur($event)"
       (change)="onChange($event)"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
index a6cf7a29f2..54bec75f0f 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
@@ -24,7 +24,10 @@ import {
   DynamicFormLayoutService,
   DynamicFormValidationService,
 } from '@ng-dynamic-forms/core';
-import { TranslateService } from '@ngx-translate/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
 
 import {
@@ -80,6 +83,7 @@ describe('DsDatePickerComponent test suite', () => {
         NgbModule,
         DsDatePickerComponent,
         TestComponent,
+        TranslateModule.forRoot(),
       ],
       providers: [
         ChangeDetectorRef,
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index 62a6b8044f..360b37e31c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -22,8 +22,10 @@ import {
   DynamicFormLayoutService,
   DynamicFormValidationService,
 } from '@ng-dynamic-forms/core';
+import { TranslateModule } from '@ngx-translate/core';
 import isEqual from 'lodash/isEqual';
 
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
 import { hasValue } from '../../../../../empty.util';
 import { NumberPickerComponent } from '../../../../number-picker/number-picker.component';
 import { DynamicDsDatePickerModel } from './date-picker.model';
@@ -41,6 +43,8 @@ export const DS_DATE_PICKER_SEPARATOR = '-';
     NgIf,
     NumberPickerComponent,
     FormsModule,
+    TranslateModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
@@ -72,10 +76,6 @@ export class DsDatePickerComponent extends DynamicFormControlComponent implement
   minDay = 1;
   maxDay = 31;
 
-  yearPlaceholder = 'year';
-  monthPlaceholder = 'month';
-  dayPlaceholder = 'day';
-
   disabledMonth = true;
   disabledDay = true;
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.ts
index 1d8a152df5..cb429dd7e4 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/disabled/dynamic-disabled.component.ts
@@ -12,6 +12,7 @@ import {
 } from '@ng-dynamic-forms/core';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
 import { DynamicDisabledModel } from './dynamic-disabled.model';
 
 /**
@@ -22,6 +23,7 @@ import { DynamicDisabledModel } from './dynamic-disabled.model';
   templateUrl: './dynamic-disabled.component.html',
   imports: [
     TranslateModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 728c59aa46..c2f35861fe 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
@@ -28,9 +28,7 @@
           <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
         </label>
       </div>
-      <br>
     </div>
-
   </div>
 
   <div *ngIf="!model.repeatable"
@@ -60,8 +58,10 @@
           <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
         </label>
       </div>
-      <br>
     </div>
-
   </div>
+  <div class="d-flex justify-content-center" *ngIf="(isLoading$ | async)">
+    <ds-loading></ds-loading>
+  </div>
+
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
index 8dc19267e8..c1964db1e7 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.ts
@@ -1,4 +1,5 @@
 import {
+  AsyncPipe,
   NgClass,
   NgForOf,
   NgIf,
@@ -8,6 +9,7 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnDestroy,
   OnInit,
   Output,
 } from '@angular/core';
@@ -25,7 +27,16 @@ import {
   DynamicFormLayoutService,
   DynamicFormValidationService,
 } from '@ng-dynamic-forms/core';
+import { TranslateModule } from '@ngx-translate/core';
 import findKey from 'lodash/findKey';
+import {
+  BehaviorSubject,
+  Subscription,
+} from 'rxjs';
+import {
+  map,
+  tap,
+} from 'rxjs/operators';
 
 import { PaginatedList } from '../../../../../../core/data/paginated-list.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators';
@@ -36,6 +47,7 @@ import {
   hasValue,
   isNotEmpty,
 } from '../../../../../empty.util';
+import { ThemedLoadingComponent } from '../../../../../loading/themed-loading.component';
 import { FormBuilderService } from '../../../form-builder.service';
 import { DynamicListCheckboxGroupModel } from './dynamic-list-checkbox-group.model';
 import { DynamicListRadioGroupModel } from './dynamic-list-radio-group.model';
@@ -60,10 +72,13 @@ export interface ListItem {
     NgbButtonsModule,
     NgForOf,
     ReactiveFormsModule,
+    AsyncPipe,
+    TranslateModule,
+    ThemedLoadingComponent,
   ],
   standalone: true,
 })
-export class DsDynamicListComponent extends DynamicFormControlComponent implements OnInit {
+export class DsDynamicListComponent extends DynamicFormControlComponent implements OnInit, OnDestroy {
 
   @Input() group: UntypedFormGroup;
   @Input() model: any;
@@ -73,7 +88,10 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
   @Output() focus: EventEmitter<any> = new EventEmitter<any>();
 
   public items: ListItem[][] = [];
-  protected optionsList: VocabularyEntry[];
+  public isLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+  protected optionsList: VocabularyEntry[] = [];
+  private nextPageInfo: PageInfo;
+  private subs: Subscription[] = [];
 
   constructor(private vocabularyService: VocabularyService,
               private cdr: ChangeDetectorRef,
@@ -89,7 +107,13 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
    */
   ngOnInit() {
     if (this.model.vocabularyOptions && hasValue(this.model.vocabularyOptions.name)) {
-      this.setOptionsFromVocabulary();
+      this.initOptionsFromVocabulary();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.subs.length > 0) {
+      this.subs.forEach(sub => sub.unsubscribe());
     }
   }
 
@@ -136,34 +160,76 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
   /**
    * Setting up the field options from vocabulary
    */
-  protected setOptionsFromVocabulary() {
+  protected initOptionsFromVocabulary() {
     if (this.model.vocabularyOptions.name && this.model.vocabularyOptions.name.length > 0) {
       const listGroup = this.group.controls[this.model.id] as UntypedFormGroup;
       if (this.model.repeatable && this.model.required) {
         listGroup.addValidators(this.hasAtLeastOneVocabularyEntry());
       }
-      const pageInfo: PageInfo = new PageInfo({
-        elementsPerPage: 9999, currentPage: 1,
+
+      this.nextPageInfo = new PageInfo({
+        elementsPerPage: 20, currentPage: 1,
       } as PageInfo);
-      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, pageInfo).pipe(
+
+      this.loadEntries(listGroup);
+    }
+  }
+
+  /**
+   * Checks if at least one {@link VocabularyEntry} has been selected.
+   */
+  hasAtLeastOneVocabularyEntry(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      return control && control.value && Object.values(control.value).find((checked: boolean) => checked === true) ? null : this.model.errorMessages;
+    };
+  }
+
+  /**
+   * Update current page state to keep track of which one to load next
+   * @param response
+   */
+  setPaginationInfo(response: PaginatedList<VocabularyEntry>) {
+    if (response.pageInfo.currentPage < response.pageInfo.totalPages) {
+      this.nextPageInfo = Object.assign(new PageInfo(), response.pageInfo,  { currentPage: response.currentPage + 1 });
+      this.isLoading$.next(true);
+    } else {
+      this.isLoading$.next(false);
+    }
+  }
+
+  /**
+   * Load entries page
+   *
+   * @param listGroup
+   */
+  loadEntries(listGroup?: UntypedFormGroup) {
+    if (!hasValue(listGroup)) {
+      listGroup = this.group.controls[this.model.id] as UntypedFormGroup;
+    }
+
+    this.subs.push(
+      this.vocabularyService.getVocabularyEntries(this.model.vocabularyOptions, this.nextPageInfo).pipe(
         getFirstSucceededRemoteDataPayload(),
-      ).subscribe((entries: PaginatedList<VocabularyEntry>) => {
-        let groupCounter = 0;
+        tap((response) => this.setPaginationInfo(response)),
+        map(entries => entries.page),
+      ).subscribe((allEntries: VocabularyEntry[]) => {
+        this.optionsList = [...this.optionsList, ...allEntries];
+        let groupCounter = this.items.length;
         let itemsPerGroup = 0;
         let tempList: ListItem[] = [];
-        this.optionsList = entries.page;
+
         // Make a list of available options (checkbox/radio) and split in groups of 'model.groupLength'
-        entries.page.forEach((option: VocabularyEntry, key: number) => {
+        allEntries.forEach((option: VocabularyEntry) => {
           const value = option.authority || option.value;
           const checked: boolean = isNotEmpty(findKey(
             this.model.value,
-            (v) => v.value === option.value));
+            (v) => v?.value === option.value));
 
           const item: ListItem = {
             id: `${this.model.id}_${value}`,
             label: option.display,
             value: checked,
-            index: key,
+            index: this.optionsList.indexOf(option),
           };
           if (this.model.repeatable) {
             this.formBuilderService.addFormGroupControl(listGroup, (this.model as DynamicListCheckboxGroupModel), new DynamicCheckboxModel(item));
@@ -183,18 +249,11 @@ export class DsDynamicListComponent extends DynamicFormControlComponent implemen
           }
         });
         this.cdr.markForCheck();
-      });
-
-    }
+        // If the paginated request did not reach the end keep loading the entries in the background
+        if (this.isLoading$.value) {
+          this.loadEntries();
+        }
+      }),
+    );
   }
-
-  /**
-   * Checks if at least one {@link VocabularyEntry} has been selected.
-   */
-  hasAtLeastOneVocabularyEntry(): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors | null => {
-      return control && control.value && Object.values(control.value).find((checked: boolean) => checked === true) ? null : this.model.errorMessages;
-    };
-  }
-
 }
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 79f2756b24..4f7fb01837 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
@@ -52,7 +52,7 @@
               type="button"
               ngbTooltip="{{'form.search-help' | translate}}"
               placement="top"
-              [disabled]="model.readOnly || isSearchDisabled()"
+              [dsBtnDisabled]="model.readOnly || isSearchDisabled()"
               [hidden]="isInputDisabled()"
               (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
       </button>
@@ -60,7 +60,7 @@
               type="button"
               ngbTooltip="{{'form.clear-help' | translate}}"
               placement="top"
-              [disabled]="model.readOnly"
+              [dsBtnDisabled]="model.readOnly"
               (click)="remove()">{{'form.clear' | translate}}
       </button>
     </div>
@@ -69,14 +69,14 @@
               type="button"
               ngbTooltip="{{'form.edit-help' | translate}}"
               placement="top"
-              [disabled]="isEditDisabled()"
+              [dsBtnDisabled]="isEditDisabled()"
               (click)="switchEditMode()">{{'form.edit' | translate}}
       </button>
       <button *ngIf="editMode" class="btn btn-secondary"
               type="button"
               ngbTooltip="{{'form.save-help' | translate}}"
               placement="top"
-              [disabled]="!hasEmptyValue()"
+              [dsBtnDisabled]="!hasEmptyValue()"
               (click)="saveChanges()">{{'form.save' | translate}}
       </button>
     </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
index 24122373df..493c56e29d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.spec.ts
@@ -33,6 +33,7 @@ import { of as observableOf } from 'rxjs';
 import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
 import {
   mockDynamicFormLayoutService,
   mockDynamicFormValidationService,
@@ -174,6 +175,7 @@ describe('Dynamic Lookup component', () => {
         TestComponent,
         AuthorityConfidenceStateDirective,
         ObjNgFor,
+        BtnDisabledDirective,
       ],
       providers: [
         ChangeDetectorRef,
@@ -255,8 +257,10 @@ describe('Dynamic Lookup component', () => {
           const de = lookupFixture.debugElement.queryAll(By.css('button'));
           const searchBtnEl = de[0].nativeElement;
           const editBtnEl = de[1].nativeElement;
-          expect(searchBtnEl.disabled).toBe(true);
-          expect(editBtnEl.disabled).toBe(true);
+          expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
+          expect(editBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(editBtnEl.classList.contains('disabled')).toBeTrue();
           expect(editBtnEl.textContent.trim()).toBe('form.edit');
         });
 
@@ -354,8 +358,10 @@ describe('Dynamic Lookup component', () => {
           const de = lookupFixture.debugElement.queryAll(By.css('button'));
           const searchBtnEl = de[0].nativeElement;
           const saveBtnEl = de[1].nativeElement;
-          expect(searchBtnEl.disabled).toBe(true);
-          expect(saveBtnEl.disabled).toBe(false);
+          expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
+          expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
+          expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
           expect(saveBtnEl.textContent.trim()).toBe('form.save');
 
         });
@@ -395,8 +401,10 @@ describe('Dynamic Lookup component', () => {
           const de = lookupFixture.debugElement.queryAll(By.css('button'));
           const searchBtnEl = de[0].nativeElement;
           const saveBtnEl = de[1].nativeElement;
-          expect(searchBtnEl.disabled).toBe(true);
-          expect(saveBtnEl.disabled).toBe(false);
+          expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
+          expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
+          expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
           expect(saveBtnEl.textContent.trim()).toBe('form.save');
 
         });
@@ -427,8 +435,10 @@ describe('Dynamic Lookup component', () => {
           const editBtnEl = deBtn[1].nativeElement;
 
           expect(de.length).toBe(2);
-          expect(searchBtnEl.disabled).toBe(true);
-          expect(editBtnEl.disabled).toBe(true);
+          expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
+          expect(editBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(editBtnEl.classList.contains('disabled')).toBeTrue();
           expect(editBtnEl.textContent.trim()).toBe('form.edit');
         });
 
@@ -524,8 +534,10 @@ describe('Dynamic Lookup component', () => {
           const de = lookupFixture.debugElement.queryAll(By.css('button'));
           const searchBtnEl = de[0].nativeElement;
           const saveBtnEl = de[1].nativeElement;
-          expect(searchBtnEl.disabled).toBe(true);
-          expect(saveBtnEl.disabled).toBe(false);
+          expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
+          expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
+          expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
           expect(saveBtnEl.textContent.trim()).toBe('form.save');
 
         });
@@ -567,8 +579,10 @@ describe('Dynamic Lookup component', () => {
           const de = lookupFixture.debugElement.queryAll(By.css('button'));
           const searchBtnEl = de[0].nativeElement;
           const saveBtnEl = de[1].nativeElement;
-          expect(searchBtnEl.disabled).toBe(true);
-          expect(saveBtnEl.disabled).toBe(false);
+          expect(searchBtnEl.getAttribute('aria-disabled')).toBe('true');
+          expect(searchBtnEl.classList.contains('disabled')).toBeTrue();
+          expect(saveBtnEl.getAttribute('aria-disabled')).not.toBe('true');
+          expect(saveBtnEl.classList.contains('disabled')).toBeFalse();
           expect(saveBtnEl.textContent.trim()).toBe('form.save');
 
         });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
index 7e4bc3a002..39c39cf8bc 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.ts
@@ -46,6 +46,7 @@ import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/share
 import { PageInfo } from '../../../../../../core/shared/page-info.model';
 import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
 import {
   hasValue,
   isEmpty,
@@ -76,6 +77,7 @@ import { DynamicLookupNameModel } from './dynamic-lookup-name.model';
     NgForOf,
     NgTemplateOutlet,
     ObjNgFor,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
index 22f8dce244..de6b50d589 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
@@ -59,6 +59,7 @@ import { Vocabulary } from '../../../../../../core/submission/vocabularies/model
 import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyEntryDetail } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
 import {
   hasValue,
   isEmpty,
@@ -90,6 +91,7 @@ import { DynamicOneboxModel } from './dynamic-onebox.model';
     ObjNgFor,
     NgForOf,
     FormsModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 38f15a5ed1..1cb8ee1e1a 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
@@ -32,21 +32,21 @@
 
         <button type="button"
                 class="btn btn-link"
-                [disabled]="isMandatoryFieldEmpty()"
+                [dsBtnDisabled]="isMandatoryFieldEmpty()"
                 (click)="save()">
           <i class="fas fa-save text-primary fa-2x"
              aria-hidden="true"></i>
         </button>
         <button type="button"
                 class="btn btn-link"
-                [disabled]="!editMode"
+                [dsBtnDisabled]="!editMode"
                 (click)="delete()">
           <i class="fas fa-trash text-danger fa-2x"
              aria-hidden="true"></i>
         </button>
         <button type="button"
                 class="btn btn-link"
-                [disabled]="isMandatoryFieldEmpty()"
+                [dsBtnDisabled]="isMandatoryFieldEmpty()"
                 (click)="clear()">
           <i class="fas fa-undo fa-2x"
              aria-hidden="true"></i>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts
index e6f5e41888..f397687686 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts
@@ -46,6 +46,7 @@ import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/share
 import { VocabularyEntryDetail } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
 import { shrinkInOut } from '../../../../../animations/shrink';
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
 import {
   hasValue,
   isEmpty,
@@ -81,6 +82,7 @@ import { DynamicRelationGroupModel } from './dynamic-relation-group.model';
     ThemedLoadingComponent,
     ChipsComponent,
     forwardRef(() => FormComponent),
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index ba7a8f50d7..6236028f2e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -50,8 +50,8 @@
       <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList; let i = index"
               [class.active]="i === selectedIndex"
               (keydown.enter)="onSelect(listEntry); sdRef.close()" (mousedown)="onSelect(listEntry); sdRef.close()"
-              title="{{ listEntry.display }}" role="option" type="button"
-              [attr.id]="listEntry.display === (currentValue|async) ? ('combobox_' + id + '_selected') : null">
+              title="{{ inputFormatter(listEntry) }}" role="option" type="button"
+              [attr.id]="inputFormatter(listEntry) === (currentValue|async) ? ('combobox_' + id + '_selected') : null">
         {{inputFormatter(listEntry)}}
       </button>
       <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
index 539c1608a1..b7e974ce69 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.spec.ts
@@ -3,6 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   CUSTOM_ELEMENTS_SCHEMA,
+  Injector,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -29,6 +30,7 @@ import { DynamicFormsNGBootstrapUIModule } from '@ng-dynamic-forms/ui-ng-bootstr
 import { TranslateModule } from '@ngx-translate/core';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
+import { APP_DATA_SERVICES_MAP } from '../../../../../../../config/app-config.interface';
 import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
@@ -96,11 +98,13 @@ describe('Dynamic Dynamic Scrollable Dropdown component', () => {
         TestComponent,
       ],
       providers: [
+        Injector,
         ChangeDetectorRef,
         DsDynamicScrollableDropdownComponent,
         { provide: VocabularyService, useValue: vocabularyServiceStub },
         { provide: DynamicFormLayoutService, useValue: mockDynamicFormLayoutService },
         { provide: DynamicFormValidationService, useValue: mockDynamicFormValidationService },
+        { provide: APP_DATA_SERVICES_MAP, useValue: {} },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
index 051bb3f225..b55c62ec48 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.ts
@@ -8,6 +8,8 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
+  Injector,
   Input,
   OnInit,
   Output,
@@ -27,23 +29,36 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import {
   Observable,
   of as observableOf,
+  of,
 } from 'rxjs';
 import {
   catchError,
   distinctUntilChanged,
   map,
+  take,
   tap,
 } from 'rxjs/operators';
+import {
+  APP_DATA_SERVICES_MAP,
+  LazyDataServicesMap,
+} from 'src/config/app-config.interface';
 
+import { CacheableObject } from '../../../../../../core/cache/cacheable-object.model';
+import { FindAllDataImpl } from '../../../../../../core/data/base/find-all-data';
 import {
   buildPaginatedList,
   PaginatedList,
 } from '../../../../../../core/data/paginated-list.model';
+import { RemoteData } from '../../../../../../core/data/remote-data';
+import { lazyDataService } from '../../../../../../core/lazy-data-service';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../../core/shared/operators';
 import { PageInfo } from '../../../../../../core/shared/page-info.model';
-import { VocabularyEntry } from '../../../../../../core/submission/vocabularies/models/vocabulary-entry.model';
 import { VocabularyService } from '../../../../../../core/submission/vocabularies/vocabulary.service';
-import { isEmpty } from '../../../../../empty.util';
+import { BtnDisabledDirective } from '../../../../../btn-disabled.directive';
+import {
+  hasValue,
+  isEmpty,
+} from '../../../../../empty.util';
 import { FormFieldMetadataValueObject } from '../../../models/form-field-metadata-value.model';
 import { DsDynamicVocabularyComponent } from '../dynamic-vocabulary.component';
 import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.model';
@@ -62,6 +77,7 @@ import { DynamicScrollableDropdownModel } from './dynamic-scrollable-dropdown.mo
     InfiniteScrollModule,
     NgForOf,
     TranslateModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
@@ -84,10 +100,28 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   public selectedIndex = 0;
   public acceptableKeys = ['Space', 'NumpadMultiply', 'NumpadAdd', 'NumpadSubtract', 'NumpadDecimal', 'Semicolon', 'Equal', 'Comma', 'Minus', 'Period', 'Quote', 'Backquote'];
 
-  constructor(protected vocabularyService: VocabularyService,
-              protected cdr: ChangeDetectorRef,
-              protected layoutService: DynamicFormLayoutService,
-              protected validationService: DynamicFormValidationService,
+  /**
+   * If true the component can rely on the findAll method for data loading.
+   * This is a behaviour activated by dependency injection through the dropdown config.
+   * If a service that implements findAll is not provided in the config the component falls back on the standard vocabulary service.
+   *
+   * @private
+   */
+  private useFindAllService: boolean;
+  /**
+   * A service that implements FindAllData.
+   * If is provided in the config will be used for data loading in stead of the VocabularyService
+   * @private
+   */
+  private findAllService: FindAllDataImpl<CacheableObject>;
+
+  constructor(
+    protected vocabularyService: VocabularyService,
+    protected cdr: ChangeDetectorRef,
+    protected layoutService: DynamicFormLayoutService,
+    protected validationService: DynamicFormValidationService,
+    protected parentInjector: Injector,
+    @Inject(APP_DATA_SERVICES_MAP) private dataServiceMap: LazyDataServicesMap,
   ) {
     super(vocabularyService, layoutService, validationService);
   }
@@ -96,21 +130,41 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
    * Initialize the component, setting up the init form value
    */
   ngOnInit() {
-    this.updatePageInfo(this.model.maxOptions, 1);
-    this.loadOptions(true);
+    const lazyProvider$: Observable<Cache> = hasValue(this.model.resourceType) ?
+      lazyDataService(this.dataServiceMap, this.model.resourceType.value, this.parentInjector) : of(null);
+
+    lazyProvider$.pipe(take(1)).subscribe((dataService) => {
+      this.findAllService = dataService as unknown as FindAllDataImpl<CacheableObject>;
+      this.useFindAllService = hasValue(this.findAllService?.findAll) && typeof this.findAllService.findAll === 'function';
+      this.updatePageInfo(this.model.maxOptions, 1);
+      this.loadOptions(true);
+    });
+
+
     this.group.get(this.model.id).valueChanges.pipe(distinctUntilChanged())
       .subscribe((value) => {
         this.setCurrentValue(value);
       });
   }
 
+  /**
+   * Get service and method to use to retrieve dropdown options
+   */
+  getDataFromService(): Observable<RemoteData<PaginatedList<CacheableObject>>> {
+    if (this.useFindAllService) {
+      return this.findAllService.findAll({ elementsPerPage: this.pageInfo.elementsPerPage, currentPage: this.pageInfo.currentPage });
+    } else {
+      return this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo);
+    }
+  }
+
   loadOptions(fromInit: boolean) {
     this.loading = true;
-    this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
+    this.getDataFromService().pipe(
       getFirstSucceededRemoteDataPayload(),
       catchError(() => observableOf(buildPaginatedList(new PageInfo(), []))),
       tap(() => this.loading = false),
-    ).subscribe((list: PaginatedList<VocabularyEntry>) => {
+    ).subscribe((list: PaginatedList<CacheableObject>) => {
       this.optionsList = list.page;
       if (fromInit && this.model.value) {
         this.setCurrentValue(this.model.value, true);
@@ -130,7 +184,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   /**
    * Converts an item from the result list to a `string` to display in the `<input>` field.
    */
-  inputFormatter = (x: VocabularyEntry): string => x.display || x.value;
+  inputFormatter = (x: any): string => (this.model.formatFunction ? this.model.formatFunction(x) : (x.display || x.value));
 
   /**
    * Opens dropdown menu
@@ -233,7 +287,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         this.pageInfo.totalElements,
         this.pageInfo.totalPages,
       );
-      this.vocabularyService.getVocabularyEntriesByValue(this.inputText, false, this.model.vocabularyOptions, this.pageInfo).pipe(
+      this.getDataFromService().pipe(
         getFirstSucceededRemoteDataPayload(),
         catchError(() => observableOf(buildPaginatedList(
           new PageInfo(),
@@ -241,7 +295,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         )),
         ),
         tap(() => this.loading = false))
-        .subscribe((list: PaginatedList<VocabularyEntry>) => {
+        .subscribe((list: PaginatedList<any>) => {
           this.optionsList = this.optionsList.concat(list.page);
           this.updatePageInfo(
             list.pageInfo.elementsPerPage,
@@ -272,7 +326,7 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
   setCurrentValue(value: any, init = false): void {
     let result: Observable<string>;
 
-    if (init) {
+    if (init && !this.useFindAllService) {
       result = this.getInitValueFromModel().pipe(
         map((formValue: FormFieldMetadataValueObject) => formValue.display),
       );
@@ -281,6 +335,8 @@ export class DsDynamicScrollableDropdownComponent extends DsDynamicVocabularyCom
         result = observableOf('');
       } else if (typeof value === 'string') {
         result = observableOf(value);
+      } else if (this.useFindAllService) {
+        result = observableOf(value[this.model.displayKey]);
       } else {
         result = observableOf(value.display);
       }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
index 870cd12cf6..8454186801 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model.ts
@@ -4,6 +4,7 @@ import {
   serializable,
 } from '@ng-dynamic-forms/core';
 
+import { ResourceType } from '../../../../../../core/shared/resource-type';
 import { VocabularyOptions } from '../../../../../../core/submission/vocabularies/models/vocabulary-options.model';
 import {
   DsDynamicInputModel,
@@ -13,15 +14,27 @@ import {
 export const DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN = 'SCROLLABLE_DROPDOWN';
 
 export interface DynamicScrollableDropdownModelConfig extends DsDynamicInputModelConfig {
-  vocabularyOptions: VocabularyOptions;
+  vocabularyOptions?: VocabularyOptions;
   maxOptions?: number;
   value?: any;
+  displayKey?: string;
+  formatFunction?: (value: any) => string;
+  resourceType?: ResourceType;
 }
 
 export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
 
   @serializable() maxOptions: number;
   @serializable() readonly type: string = DYNAMIC_FORM_CONTROL_TYPE_SCROLLABLE_DROPDOWN;
+  @serializable() displayKey: string;
+  /**
+   * Configurable function for display value formatting in input
+   */
+  formatFunction: (value: any) => string;
+  /**
+   * Resource type to match data service
+   */
+  resourceType: ResourceType;
 
   constructor(config: DynamicScrollableDropdownModelConfig, layout?: DynamicFormControlLayout) {
 
@@ -30,6 +43,9 @@ export class DynamicScrollableDropdownModel extends DsDynamicInputModel {
     this.autoComplete = AUTOCOMPLETE_OFF;
     this.vocabularyOptions = config.vocabularyOptions;
     this.maxOptions = config.maxOptions || 10;
+    this.displayKey = config.displayKey || 'display';
+    this.formatFunction = config.formatFunction;
+    this.resourceType = config.resourceType;
   }
 
 }
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 cef8516b84..d12c27eb64 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,6 +1,6 @@
 <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" [dsBtnDisabled]="isPending" class="close" aria-label="Close button" aria-describedby="modal-title"
             (click)="close()">
         <span aria-hidden="true">&times;</span>
     </button>
@@ -73,18 +73,18 @@
   <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="close-button">
-        <button type="button" [disabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
+        <button type="button" [dsBtnDisabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
             {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
     </div>
     <ng-container *ngIf="isEditRelationship">
       <button class="btn btn-danger discard"
-              [disabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
+              [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
               (click)="discardEv()">
               <i class="fas fa-times"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
       </button>
       <button class="btn btn-primary submit"
-            [disabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
+            [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
               (click)="submitEv()">
               <span *ngIf="isPending" class="spinner-border spinner-border-sm mr-1" role="status"
                               aria-hidden="true"></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 4f7c7be5c2..d6db87b993 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
@@ -33,6 +33,7 @@ import { Item } from '../../../../../core/shared/item.model';
 import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
 import { WorkspaceItem } from '../../../../../core/submission/models/workspaceitem.model';
 import { XSRFService } from '../../../../../core/xsrf/xsrf.service';
+import { BtnDisabledDirective } from '../../../../btn-disabled.directive';
 import { ItemSearchResult } from '../../../../object-collection/shared/item-search-result.model';
 import { SelectableListService } from '../../../../object-list/selectable-list/selectable-list.service';
 import { createSuccessfulRemoteDataObject$ } from '../../../../remote-data.utils';
@@ -123,7 +124,7 @@ describe('DsDynamicLookupRelationModalComponent', () => {
   beforeEach(waitForAsync(() => {
     init();
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule, DsDynamicLookupRelationModalComponent],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), NgbModule, DsDynamicLookupRelationModalComponent, BtnDisabledDirective],
       providers: [
         {
           provide: SearchConfigurationService, useValue: {
@@ -223,10 +224,12 @@ describe('DsDynamicLookupRelationModalComponent', () => {
 
   describe('when initialized and is relationship show the list of buttons', () => {
     it('submit button should be disabled', () => {
-      expect(debugElement.query(By.css('.submit')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.submit')).nativeElement.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.submit')).nativeElement.classList.contains('disabled')).toBeTrue();
     });
     it('discard button should be disabled', () => {
-      expect(debugElement.query(By.css('.discard')).nativeElement?.disabled).toBeTrue();
+      expect(debugElement.query(By.css('.discard')).nativeElement.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.discard')).nativeElement.classList.contains('disabled')).toBeTrue();
     });
   });
 
@@ -264,9 +267,12 @@ describe('DsDynamicLookupRelationModalComponent', () => {
 
     it('there should show 1 spinner and disable all 3 buttons', () => {
       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('.submit')).nativeElement?.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.submit')).nativeElement?.classList.contains('disabled')).toBeTrue();
+      expect(debugElement.query(By.css('.discard')).nativeElement?.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.discard')).nativeElement?.classList.contains('disabled')).toBeTrue();
+      expect(debugElement.query(By.css('.close')).nativeElement?.getAttribute('aria-disabled')).toBe('true');
+      expect(debugElement.query(By.css('.close')).nativeElement?.classList.contains('disabled')).toBeTrue();
     });
 
   });
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
index 6033fa1b61..3cbcbc8460 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.ts
@@ -50,6 +50,7 @@ import {
 } from '../../../../../core/shared/operators';
 import { SearchConfigurationService } from '../../../../../core/shared/search/search-configuration.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../../../my-dspace-page/my-dspace-configuration.service';
+import { BtnDisabledDirective } from '../../../../btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -91,6 +92,7 @@ import { DsDynamicLookupRelationSelectionTabComponent } from './selection-tab/dy
     AsyncPipe,
     NgForOf,
     DsDynamicLookupRelationSelectionTabComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 44f21fb4b4..7d233fe0b7 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
@@ -49,6 +49,6 @@
     <button type="button" class="btn btn-outline-secondary" (click)="close()">{{ (labelPrefix + 'cancel' | translate) }}</button>
   </div>
   <div>
-    <button type="button" class="btn btn-primary" [disabled]="selectedImportType === importType.None" (click)="import()">{{ (labelPrefix + 'import' | translate) }}</button>
+    <button type="button" class="btn btn-primary" [dsBtnDisabled]="selectedImportType === importType.None" (click)="import()">{{ (labelPrefix + 'import' | translate) }}</button>
   </div>
 </div>
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.ts 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.ts
index c2516ca9a8..e0cc90ceaa 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.ts
+++ 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.ts
@@ -37,6 +37,7 @@ import {
   getRemoteDataPayload,
 } from '../../../../../../../core/shared/operators';
 import { SubmissionImportExternalCollectionComponent } from '../../../../../../../submission/import-external/import-external-collection/submission-import-external-collection.component';
+import { BtnDisabledDirective } from '../../../../../../btn-disabled.directive';
 import { CollectionListEntry } from '../../../../../../collection-dropdown/collection-dropdown.component';
 import { NotificationsService } from '../../../../../../notifications/notifications.service';
 import { CollectionElementLinkType } from '../../../../../../object-collection/collection-element-link.type';
@@ -69,6 +70,7 @@ export enum ImportType {
     ThemedSearchResultsComponent,
     NgIf,
     AsyncPipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts
index fdc1f6de01..e21f8328d2 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.spec.ts
@@ -164,18 +164,6 @@ describe('DsDynamicLookupRelationSearchTabComponent', () => {
     });
   });
 
-  describe('selectAll', () => {
-    beforeEach(() => {
-      spyOn(component.selectObject, 'emit');
-      component.selectAll();
-    });
-
-    it('should emit the page filtered from already selected objects and call select on the service for all objects', () => {
-      expect(component.selectObject.emit).toHaveBeenCalledWith(searchResult3);
-      expect(selectableListService.select).toHaveBeenCalledWith(listID, [searchResult1, searchResult2, searchResult3]);
-    });
-  });
-
   describe('deselectAll', () => {
     beforeEach(() => {
       spyOn(component.deselectObject, 'emit');
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
index b72fbf40a8..ceee05fee0 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.ts
@@ -16,13 +16,7 @@ import {
   BehaviorSubject,
   Observable,
 } from 'rxjs';
-import {
-  map,
-  mapTo,
-  switchMap,
-  take,
-  tap,
-} from 'rxjs/operators';
+import { take } from 'rxjs/operators';
 
 import { LookupRelationService } from '../../../../../../core/data/lookup-relation.service';
 import { PaginatedList } from '../../../../../../core/data/paginated-list.model';
@@ -44,7 +38,6 @@ import { hasValue } from '../../../../../empty.util';
 import { CollectionElementLinkType } from '../../../../../object-collection/collection-element-link.type';
 import { ListableObject } from '../../../../../object-collection/shared/listable-object.model';
 import { SelectableListService } from '../../../../../object-list/selectable-list/selectable-list.service';
-import { PaginationComponentOptions } from '../../../../../pagination/pagination-component-options.model';
 import { SearchObjects } from '../../../../../search/models/search-objects.model';
 import { SearchResult } from '../../../../../search/models/search-result.model';
 import { ThemedSearchComponent } from '../../../../../search/themed-search.component';
@@ -240,35 +233,6 @@ export class DsDynamicLookupRelationSearchTabComponent implements OnInit, OnDest
     this.selectableListService.deselect(this.listId, page);
   }
 
-  /**
-   * Select all items that were found using the current search query
-   */
-  selectAll() {
-    this.allSelected = true;
-    this.selectAllLoading = true;
-    const fullPagination = Object.assign(new PaginationComponentOptions(), {
-      currentPage: 1,
-      pageSize: 9999,
-    });
-    const fullSearchConfig = Object.assign(this.lookupRelationService.searchConfig, { pagination: fullPagination });
-    const results$ = this.searchService.search<Item>(fullSearchConfig);
-    results$.pipe(
-      getFirstSucceededRemoteData(),
-      map((resultsRD) => resultsRD.payload.page),
-      tap(() => this.selectAllLoading = false),
-      switchMap((results) => this.selection$.pipe(
-        take(1),
-        tap((selection: SearchResult<Item>[]) => {
-          const filteredResults = results.filter((pageItem) => selection.findIndex((selected) => selected.equals(pageItem)) < 0);
-          this.selectObject.emit(...filteredResults);
-        }),
-        mapTo(results),
-      )),
-    ).subscribe((results) => {
-      this.selectableListService.select(this.listId, results);
-    });
-  }
-
   /**
    * setSelectedIds select all the items from the results that have relationship
    * @param idOfItems the uuid of items that are being checked
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index ef75f34b9b..85e32e66ea 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -41,7 +41,7 @@
                     title="{{'form.discard' | translate}}"
                     attr.aria-label="{{'form.discard' | translate}}"
                     (click)="removeItem($event, context, index)"
-                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+                    [dsBtnDisabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
               <span>{{'form.discard' | translate}}</span>
             </button>
           </div>
@@ -62,7 +62,7 @@
             </button>
             <ng-content select="[between]"></ng-content>
             <button *ngIf="displaySubmit" type="submit" class="btn btn-primary" (click)="onSubmit()"
-                    [disabled]="(isValid() | async) !== true">
+                    [dsBtnDisabled]="(isValid() | async) !== true">
               <i class="fas fa-save" aria-hidden="true"></i> {{submitLabel | translate}}
             </button>
             <ng-content select="[after]"></ng-content>
diff --git a/src/app/shared/form/form.component.ts b/src/app/shared/form/form.component.ts
index e1d47da7bd..a757239aea 100644
--- a/src/app/shared/form/form.component.ts
+++ b/src/app/shared/form/form.component.ts
@@ -39,6 +39,7 @@ import {
   map,
 } from 'rxjs/operators';
 
+import { BtnDisabledDirective } from '../btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -69,6 +70,7 @@ import { FormService } from './form.service';
     DynamicFormsCoreModule,
     NgIf,
     AsyncPipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 12e29fa70e..9b9d038e86 100644
--- a/src/app/shared/form/number-picker/number-picker.component.html
+++ b/src/app/shared/form/number-picker/number-picker.component.html
@@ -3,7 +3,7 @@
       class="btn btn-link-focus"
       type="button"
       tabindex="0"
-      [disabled]="disabled"
+      [dsBtnDisabled]="disabled"
       (click)="toggleUp()">
       <span class="chevron"></span>
       <span class="sr-only">{{'form.number-picker.increment' | translate: {field: name} }}</span>
@@ -30,7 +30,7 @@
       class="btn btn-link-focus"
       type="button"
       tabindex="0"
-      [disabled]="disabled"
+      [dsBtnDisabled]="disabled"
       (click)="toggleDown()">
       <span class="chevron bottom"></span>
       <span class="sr-only">{{'form.number-picker.decrement' | translate: {field: name} }}</span>
diff --git a/src/app/shared/form/number-picker/number-picker.component.ts b/src/app/shared/form/number-picker/number-picker.component.ts
index b097236659..ef35e1ee79 100644
--- a/src/app/shared/form/number-picker/number-picker.component.ts
+++ b/src/app/shared/form/number-picker/number-picker.component.ts
@@ -20,6 +20,7 @@ import {
   TranslateService,
 } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import { isEmpty } from '../../empty.util';
 
 @Component({
@@ -33,6 +34,7 @@ import { isEmpty } from '../../empty.util';
     NgClass,
     FormsModule,
     TranslateModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 f55f26aa68..1778291a63 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -6,7 +6,7 @@
              [attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate"
              [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
       <div class="input-group-append" id="button-addon4">
-        <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()"
+        <button class="btn btn-outline-primary" type="button" (click)="search()" [dsBtnDisabled]="!isSearchEnabled()"
                 [attr.aria-label]="'vocabulary-treeview.search.form.search' | translate">
           {{'vocabulary-treeview.search.form.search' | translate}}
         </button>
@@ -18,7 +18,7 @@
                 [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
           {{'vocabulary-treeview.search.form.add' | translate}}
         </button>
-        <button class="btn btn-outline-primary" type="button" (click)="add()" [disabled]="this.vocabularyOptions.closed"
+        <button class="btn btn-outline-primary" type="button" (click)="add()" [dsBtnDisabled]="this.vocabularyOptions.closed"
                 [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
           {{'vocabulary-treeview.search.form.add' | translate}}
         </button>
@@ -55,7 +55,7 @@
           </label>
           <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
                   [class.text-success]="node.isSelected"
-                  [disabled]="!node.item?.selectable"
+                  [dsBtnDisabled]="!node.item?.selectable"
                   [ngbTooltip]="node.item?.otherInformation?.note"
                   [openDelay]="500"
                   container="body"
@@ -87,7 +87,7 @@
           </label>
           <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
                   [class.text-success]="node.isSelected"
-                  [disabled]="!node.item?.selectable"
+                  [dsBtnDisabled]="!node.item?.selectable"
                   [ngbTooltip]="node.item?.otherInformation?.note"
                   [openDelay]="500"
                   container="body"
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
index 89d908ec7f..3893dac4ea 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.ts
@@ -32,6 +32,7 @@ import { VocabularyEntryDetail } from '../../../core/submission/vocabularies/mod
 import { VocabularyOptions } from '../../../core/submission/vocabularies/models/vocabulary-options.model';
 import { AlertComponent } from '../../alert/alert.component';
 import { AlertType } from '../../alert/alert-type';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import {
   hasValue,
   isEmpty,
@@ -67,6 +68,7 @@ export type VocabularyTreeItemType = FormFieldMetadataValueObject | VocabularyEn
     AsyncPipe,
     ThemedLoadingComponent,
     AlertComponent,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 567a05f544..00ef253167 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
@@ -24,7 +24,7 @@
        @fadeOut>{{ (message | async) | translate }}</div>
 
   <button class="btn btn-lg btn-primary btn-block mt-3" type="submit" [attr.data-test]="'login-button' | dsBrowserOnly"
-          [disabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
+          [dsBtnDisabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
 </form>
 
 <ng-container *ngIf="canShowDivider$ | async">
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.ts b/src/app/shared/log-in/methods/password/log-in-password.component.ts
index bcc2048dee..25ec0cba74 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.ts
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.ts
@@ -49,6 +49,7 @@ import { AuthorizationDataService } from '../../../../core/data/feature-authoriz
 import { FeatureID } from '../../../../core/data/feature-authorization/feature-id';
 import { HardRedirectService } from '../../../../core/services/hard-redirect.service';
 import { fadeOut } from '../../../animations/fade';
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { isNotEmpty } from '../../../empty.util';
 import { BrowserOnlyPipe } from '../../../utils/browser-only.pipe';
 
@@ -62,7 +63,7 @@ import { BrowserOnlyPipe } from '../../../utils/browser-only.pipe';
   styleUrls: ['./log-in-password.component.scss'],
   animations: [fadeOut],
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, NgIf, RouterLink, AsyncPipe, TranslateModule, BrowserOnlyPipe],
+  imports: [FormsModule, ReactiveFormsModule, NgIf, RouterLink, AsyncPipe, TranslateModule, BrowserOnlyPipe, BtnDisabledDirective],
 })
 export class LogInPasswordComponent implements OnInit {
 
diff --git a/src/app/shared/menu/menu-section/menu-section.component.ts b/src/app/shared/menu/menu-section/menu-section.component.ts
index f59c0b5594..d14cfb143c 100644
--- a/src/app/shared/menu/menu-section/menu-section.component.ts
+++ b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -37,9 +37,9 @@ import { MenuSection } from '../menu-section.model';
 export class MenuSectionComponent implements OnInit, OnDestroy {
 
   /**
-   * Observable that emits whether or not this section is currently active
+   * {@link BehaviorSubject} containing the current state to whether this section is currently active
    */
-  active: Observable<boolean>;
+  active$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   /**
    * The ID of the menu this section resides in
@@ -72,7 +72,11 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
    * Set initial values for instance variables
    */
   ngOnInit(): void {
-    this.active = this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged());
+    this.subs.push(this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged()).subscribe((isActive: boolean) => {
+      if (this.active$.value !== isActive) {
+        this.active$.next(isActive);
+      }
+    }));
     this.initializeInjectorData();
   }
 
@@ -90,9 +94,12 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
   /**
    * Activate this section
    * @param {Event} event The user event that triggered this method
+   * @param skipEvent Weather the event should still be triggered after deactivating the section or not
    */
-  activateSection(event: Event) {
-    event.preventDefault();
+  activateSection(event: Event, skipEvent = true): void {
+    if (skipEvent) {
+      event.preventDefault();
+    }
     if (!this.section.model?.disabled) {
       this.menuService.activateSection(this.menuID, this.section.id);
     }
@@ -100,10 +107,14 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
 
   /**
    * Deactivate this section
+   *
    * @param {Event} event The user event that triggered this method
+   * @param skipEvent Weather the event should still be triggered after deactivating the section or not
    */
-  deactivateSection(event: Event) {
-    event.preventDefault();
+  deactivateSection(event: Event, skipEvent = true): void {
+    if (skipEvent) {
+      event.preventDefault();
+    }
     this.menuService.deactivateSection(this.menuID, this.section.id);
   }
 
diff --git a/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html b/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html
index 9e364ac808..affbec108c 100644
--- a/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html
+++ b/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.html
@@ -1,7 +1,7 @@
 <button type="button"
         [className]="'btn btn-success'"
         ngbTooltip="{{'submission.workflow.tasks.claimed.approve_help' | translate}}"
-        [disabled]="processing$ | async"
+        [dsBtnDisabled]="processing$ | async"
         (click)="submitTask()">
   <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
   <span *ngIf="(processing$ | async) !== true"><i class="fa fa-thumbs-up"></i> {{'submission.workflow.tasks.claimed.approve' | translate}}</span>
diff --git a/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.ts b/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.ts
index 6de3df6e09..f154837be6 100644
--- a/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.ts
+++ b/src/app/shared/mydspace-actions/claimed-task/approve/claimed-task-actions-approve.component.ts
@@ -22,6 +22,7 @@ import { RequestService } from '../../../../core/data/request.service';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { WorkflowItemDataService } from '../../../../core/submission/workflowitem-data.service';
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { NotificationsService } from '../../../notifications/notifications.service';
 import { ClaimedApprovedTaskSearchResult } from '../../../object-collection/shared/claimed-approved-task-search-result.model';
 import { ClaimedTaskActionsAbstractComponent } from '../abstract/claimed-task-actions-abstract.component';
@@ -33,7 +34,7 @@ export const WORKFLOW_TASK_OPTION_APPROVE = 'submit_approve';
   styleUrls: ['./claimed-task-actions-approve.component.scss'],
   templateUrl: './claimed-task-actions-approve.component.html',
   standalone: true,
-  imports: [NgbTooltipModule, NgIf, AsyncPipe, TranslateModule],
+  imports: [NgbTooltipModule, NgIf, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component for displaying and processing the approve action on a workflow task item
diff --git a/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.html b/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.html
index 2b95b02df4..0d1f0d471e 100644
--- a/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.html
+++ b/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.html
@@ -1,5 +1,5 @@
 <button (click)="submitTask()"
-        [disabled]="processing$ | async"
+        [dsBtnDisabled]="processing$ | async"
         class="declineTaskAction btn btn-warning"
         ngbTooltip="{{'submission.workflow.tasks.claimed.decline_help' | translate}}"
         type="button">
diff --git a/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.ts b/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.ts
index 74df54e9e0..e021a21ae0 100644
--- a/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.ts
+++ b/src/app/shared/mydspace-actions/claimed-task/decline-task/claimed-task-actions-decline-task.component.ts
@@ -21,6 +21,7 @@ import { RemoteData } from 'src/app/core/data/remote-data';
 import { RequestService } from '../../../../core/data/request.service';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { SearchService } from '../../../../core/shared/search/search.service';
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { NotificationsService } from '../../../notifications/notifications.service';
 import { ClaimedDeclinedTaskTaskSearchResult } from '../../../object-collection/shared/claimed-declined-task-task-search-result.model';
 import { ClaimedTaskActionsAbstractComponent } from '../abstract/claimed-task-actions-abstract.component';
@@ -32,7 +33,7 @@ export const WORKFLOW_TASK_OPTION_DECLINE_TASK = 'submit_decline_task';
   templateUrl: './claimed-task-actions-decline-task.component.html',
   styleUrls: ['./claimed-task-actions-decline-task.component.scss'],
   standalone: true,
-  imports: [NgbTooltipModule, NgIf, AsyncPipe, TranslateModule],
+  imports: [NgbTooltipModule, NgIf, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component for displaying and processing the decline task action on a workflow task item
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 2f96c16f08..21e7f4d21b 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
@@ -1,7 +1,7 @@
 <ng-template #rejectTipContent><p [innerHTML]="'submission.workflow.tasks.claimed.reject_help' | translate"></p></ng-template>
 <button [className]="'btn btn-danger'"
         [ngbTooltip]="rejectTipContent"
-        [disabled]="processing$ | async"
+        [dsBtnDisabled]="processing$ | async"
         (click)="openRejectModal(rejectModal)" >
   <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
   <span *ngIf="(processing$ | async) !== true"><i class="fa fa-trash"></i> {{'submission.workflow.tasks.claimed.reject.submit' | translate}}</span>
@@ -28,7 +28,7 @@
                 placeholder="{{'submission.workflow.tasks.claimed.reject.reason.placeholder' | translate}}"></textarea>
       <button id="btn-chat"
               class="btn btn-danger btn-lg btn-block mt-3"
-              [disabled]="!rejectForm.valid || (processing$ | async)"
+              [dsBtnDisabled]="!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>
         <span *ngIf="(processing$ | async) !== true">{{'submission.workflow.tasks.claimed.reject.reason.submit' | translate}}</span>
diff --git a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.ts b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.ts
index 9a8c98c66e..6d7ec9c036 100644
--- a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.ts
+++ b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.ts
@@ -33,6 +33,7 @@ import { RemoteData } from '../../../../core/data/remote-data';
 import { RequestService } from '../../../../core/data/request.service';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { SearchService } from '../../../../core/shared/search/search.service';
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { NotificationsService } from '../../../notifications/notifications.service';
 import { ClaimedDeclinedTaskSearchResult } from '../../../object-collection/shared/claimed-declined-task-search-result.model';
 import { ClaimedTaskActionsAbstractComponent } from '../abstract/claimed-task-actions-abstract.component';
@@ -44,7 +45,7 @@ export const WORKFLOW_TASK_OPTION_REJECT = 'submit_reject';
   styleUrls: ['./claimed-task-actions-reject.component.scss'],
   templateUrl: './claimed-task-actions-reject.component.html',
   standalone: true,
-  imports: [NgbTooltipModule, NgIf, FormsModule, ReactiveFormsModule, AsyncPipe, TranslateModule],
+  imports: [NgbTooltipModule, NgIf, FormsModule, ReactiveFormsModule, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component for displaying and processing the reject action on a workflow task item
diff --git a/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.html b/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.html
index e10dec2e6e..32a619d671 100644
--- a/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.html
+++ b/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.html
@@ -1,7 +1,7 @@
 <button type="button"
         [className]="'btn btn-secondary'"
         ngbTooltip="{{'submission.workflow.tasks.claimed.return_help' | translate}}"
-        [disabled]="processing$ | async"
+        [dsBtnDisabled]="processing$ | async"
         (click)="submitTask()">
   <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
   <span *ngIf="(processing$ | async) !== true"><i class="fa fa-undo"></i> {{'submission.workflow.tasks.claimed.return' | translate}}</span>
diff --git a/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.ts b/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.ts
index ea93769b9d..a7d510a8e6 100644
--- a/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.ts
+++ b/src/app/shared/mydspace-actions/claimed-task/return-to-pool/claimed-task-actions-return-to-pool.component.ts
@@ -20,6 +20,7 @@ import { RequestService } from '../../../../core/data/request.service';
 import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
 import { SearchService } from '../../../../core/shared/search/search.service';
 import { PoolTaskDataService } from '../../../../core/tasks/pool-task-data.service';
+import { BtnDisabledDirective } from '../../../btn-disabled.directive';
 import { NotificationsService } from '../../../notifications/notifications.service';
 import { ClaimedTaskActionsAbstractComponent } from '../abstract/claimed-task-actions-abstract.component';
 
@@ -30,7 +31,7 @@ export const WORKFLOW_TASK_OPTION_RETURN_TO_POOL = 'return_to_pool';
   styleUrls: ['./claimed-task-actions-return-to-pool.component.scss'],
   templateUrl: './claimed-task-actions-return-to-pool.component.html',
   standalone: true,
-  imports: [NgbTooltipModule, NgIf, AsyncPipe, TranslateModule],
+  imports: [NgbTooltipModule, NgIf, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Component for displaying and processing the return to pool action on a workflow task item
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 1d98934011..b164767c23 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
@@ -1,5 +1,5 @@
 <button type="button" class="btn btn-info mt-1 mb-3"
-  ngbTooltip="{{'submission.workflow.tasks.pool.claim_help' | translate}}" [disabled]="(processing$ | async)"
+  ngbTooltip="{{'submission.workflow.tasks.pool.claim_help' | translate}}" [dsBtnDisabled]="(processing$ | async)"
   (click)="claim()">
   <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.ts b/src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.ts
index 35b75b3aa1..67340c9ec7 100644
--- a/src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.ts
+++ b/src/app/shared/mydspace-actions/pool-task/pool-task-actions.component.ts
@@ -34,6 +34,7 @@ import { PoolTask } from '../../../core/tasks/models/pool-task-object.model';
 import { ProcessTaskResponse } from '../../../core/tasks/models/process-task-response';
 import { PoolTaskDataService } from '../../../core/tasks/pool-task-data.service';
 import { getWorkflowItemViewRoute } from '../../../workflowitems-edit-page/workflowitems-edit-page-routing-paths';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import { NotificationsService } from '../../notifications/notifications.service';
 import { MyDSpaceReloadableActionsComponent } from '../mydspace-reloadable-actions';
 
@@ -45,7 +46,7 @@ import { MyDSpaceReloadableActionsComponent } from '../mydspace-reloadable-actio
   styleUrls: ['./pool-task-actions.component.scss'],
   templateUrl: './pool-task-actions.component.html',
   standalone: true,
-  imports: [NgbTooltipModule, NgIf, RouterLink, AsyncPipe, TranslateModule],
+  imports: [NgbTooltipModule, NgIf, RouterLink, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 export class PoolTaskActionsComponent extends MyDSpaceReloadableActionsComponent<PoolTask, PoolTaskDataService> implements OnDestroy {
 
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 f5f8b9d1cc..03491e7491 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
@@ -34,7 +34,7 @@
     </button>
     <button class="btn collection-confirm"
             [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
-            [disabled]="selectedIds?.length === 0"
+            [dsBtnDisabled]="selectedIds?.length === 0"
             (click)="confirmSelected()">
       <i class="fas fa-trash"></i> {{confirmButton | translate}}
     </button>
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.ts b/src/app/shared/object-select/collection-select/collection-select.component.ts
index 267d8a2a60..69d32bb93f 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.ts
+++ b/src/app/shared/object-select/collection-select/collection-select.component.ts
@@ -20,6 +20,7 @@ import { getCollectionPageRoute } from '../../../collection-page/collection-page
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { Collection } from '../../../core/shared/collection.model';
 import { getAllSucceededRemoteDataPayload } from '../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import {
   hasValueOperator,
   isNotEmpty,
@@ -36,7 +37,7 @@ import { ObjectSelectComponent } from '../object-select/object-select.component'
   templateUrl: './collection-select.component.html',
   styleUrls: ['./collection-select.component.scss'],
   standalone: true,
-  imports: [VarDirective, NgIf, PaginationComponent, NgFor, FormsModule, RouterLink, ErrorComponent, ThemedLoadingComponent, NgClass, AsyncPipe, TranslateModule],
+  imports: [VarDirective, NgIf, PaginationComponent, NgFor, FormsModule, RouterLink, ErrorComponent, ThemedLoadingComponent, NgClass, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 
 /**
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 e0e71fb939..6f3d31703d 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
@@ -42,7 +42,7 @@
     <button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
     <button class="btn item-confirm float-right"
             [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
-            [disabled]="selectedIds?.length === 0"
+            [dsBtnDisabled]="selectedIds?.length === 0"
             (click)="confirmSelected()">
       {{confirmButton | translate}}
     </button>
diff --git a/src/app/shared/object-select/item-select/item-select.component.spec.ts b/src/app/shared/object-select/item-select/item-select.component.spec.ts
index 86d4b5c8d4..656e0716e9 100644
--- a/src/app/shared/object-select/item-select/item-select.component.spec.ts
+++ b/src/app/shared/object-select/item-select/item-select.component.spec.ts
@@ -18,6 +18,7 @@ import { LinkHeadService } from '../../../core/services/link-head.service';
 import { ConfigurationProperty } from '../../../core/shared/configuration-property.model';
 import { Item } from '../../../core/shared/item.model';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import { HostWindowService } from '../../host-window.service';
 import { PaginationComponentOptions } from '../../pagination/pagination-component-options.model';
 import { createSuccessfulRemoteDataObject$ } from '../../remote-data.utils';
@@ -101,7 +102,7 @@ describe('ItemSelectComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([]), BtnDisabledDirective],
       providers: [
         { provide: ObjectSelectService, useValue: new ObjectSelectServiceStub([mockItemList[1].id]) },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(0) },
diff --git a/src/app/shared/object-select/item-select/item-select.component.ts b/src/app/shared/object-select/item-select/item-select.component.ts
index 973b4aff87..f5d8a4f9b3 100644
--- a/src/app/shared/object-select/item-select/item-select.component.ts
+++ b/src/app/shared/object-select/item-select/item-select.component.ts
@@ -19,6 +19,7 @@ import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { Item } from '../../../core/shared/item.model';
 import { getAllSucceededRemoteDataPayload } from '../../../core/shared/operators';
 import { getItemPageRoute } from '../../../item-page/item-page-routing-paths';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import {
   hasValueOperator,
   isNotEmpty,
@@ -34,7 +35,7 @@ import { ObjectSelectComponent } from '../object-select/object-select.component'
   selector: 'ds-item-select',
   templateUrl: './item-select.component.html',
   standalone: true,
-  imports: [VarDirective, NgIf, PaginationComponent, NgFor, FormsModule, RouterLink, ErrorComponent, ThemedLoadingComponent, NgClass, AsyncPipe, TranslateModule],
+  imports: [VarDirective, NgIf, PaginationComponent, NgFor, FormsModule, RouterLink, ErrorComponent, ThemedLoadingComponent, NgClass, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 
 /**
diff --git a/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.html b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.html
new file mode 100644
index 0000000000..9f4821e780
--- /dev/null
+++ b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.html
@@ -0,0 +1,11 @@
+<img placement="top"
+     [ngbTooltip]="orcidTooltipTemplate"
+     class="orcid-icon"
+     [ngClass]="{'not-authenticated': !authenticatedTimestamp}"
+     alt="ORCID {{ orcidTooltip }}"
+     src="assets/images/orcid.logo.icon.svg"
+     data-test="orcidIcon"/>
+
+<ng-template #orcidTooltipTemplate>
+    <span class="text-muted">{{ orcidTooltip }}</span>
+</ng-template>
diff --git a/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.scss b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.scss
new file mode 100644
index 0000000000..6a1c259e18
--- /dev/null
+++ b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.scss
@@ -0,0 +1,11 @@
+:host {
+  display: inline-block;
+}
+
+.orcid-icon {
+  height: 1.2rem;
+
+  &.not-authenticated {
+    filter: grayscale(100%);
+  }
+}
diff --git a/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.spec.ts b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.spec.ts
new file mode 100644
index 0000000000..dd47fd918b
--- /dev/null
+++ b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.spec.ts
@@ -0,0 +1,71 @@
+import {
+  NgClass,
+  NgIf,
+} from '@angular/common';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+import { MetadataValue } from '../../core/shared/metadata.models';
+import { OrcidBadgeAndTooltipComponent } from './orcid-badge-and-tooltip.component';
+
+describe('OrcidBadgeAndTooltipComponent', () => {
+  let component: OrcidBadgeAndTooltipComponent;
+  let fixture: ComponentFixture<OrcidBadgeAndTooltipComponent>;
+  let translateService: TranslateService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        OrcidBadgeAndTooltipComponent,
+        NgbTooltipModule,
+        NgClass,
+        NgIf,
+      ],
+      providers: [
+        { provide: TranslateService, useValue: { instant: (key: string) => key } },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OrcidBadgeAndTooltipComponent);
+    component = fixture.componentInstance;
+    translateService = TestBed.inject(TranslateService);
+
+    component.orcid = { value: '0000-0002-1825-0097' } as MetadataValue;
+    component.authenticatedTimestamp = { value: '2023-10-01' } as MetadataValue;
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set orcidTooltip when authenticatedTimestamp is provided', () => {
+    component.ngOnInit();
+    expect(component.orcidTooltip).toBe('person.orcid-tooltip.authenticated');
+  });
+
+  it('should set orcidTooltip when authenticatedTimestamp is not provided', () => {
+    component.authenticatedTimestamp = null;
+    component.ngOnInit();
+    expect(component.orcidTooltip).toBe('person.orcid-tooltip.not-authenticated');
+  });
+
+  it('should display the ORCID icon', () => {
+    const badgeIcon = fixture.debugElement.query(By.css('img[data-test="orcidIcon"]'));
+    expect(badgeIcon).toBeTruthy();
+  });
+
+  it('should display the ORCID icon in greyscale if there is no authenticated timestamp', () => {
+    component.authenticatedTimestamp = null;
+    fixture.detectChanges();
+    const badgeIcon = fixture.debugElement.query(By.css('img[data-test="orcidIcon"]'));
+    expect(badgeIcon.nativeElement.classList).toContain('not-authenticated');
+  });
+
+});
diff --git a/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.ts b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.ts
new file mode 100644
index 0000000000..6e8ba7100f
--- /dev/null
+++ b/src/app/shared/orcid-badge-and-tooltip/orcid-badge-and-tooltip.component.ts
@@ -0,0 +1,65 @@
+import {
+  NgClass,
+  NgIf,
+} from '@angular/common';
+import {
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+import { MetadataValue } from '../../core/shared/metadata.models';
+
+/**
+ * Component to display an ORCID badge with a tooltip.
+ * The tooltip text changes based on whether the ORCID is authenticated.
+ */
+@Component({
+  selector: 'ds-orcid-badge-and-tooltip',
+  standalone: true,
+  imports: [
+    NgIf,
+    NgbTooltipModule,
+    NgClass,
+  ],
+  templateUrl: './orcid-badge-and-tooltip.component.html',
+  styleUrl: './orcid-badge-and-tooltip.component.scss',
+})
+export class OrcidBadgeAndTooltipComponent implements OnInit {
+
+  /**
+   * The ORCID value to be displayed.
+   */
+  @Input() orcid: MetadataValue;
+
+  /**
+   * The timestamp indicating when the ORCID was authenticated.
+   */
+  @Input() authenticatedTimestamp: MetadataValue;
+
+  /**
+   * The tooltip text to be displayed.
+   */
+  orcidTooltip: string;
+
+  /**
+   * Constructor to inject the TranslateService.
+   * @param translateService - Service for translation.
+   */
+  constructor(
+    private translateService: TranslateService,
+  ) { }
+
+  /**
+   * Initializes the component.
+   * Sets the tooltip text based on the presence of the authenticated timestamp.
+   */
+  ngOnInit() {
+    this.orcidTooltip = this.authenticatedTimestamp ?
+      this.translateService.instant('person.orcid-tooltip.authenticated', { orcid: this.orcid.value }) :
+      this.translateService.instant('person.orcid-tooltip.not-authenticated', { orcid: this.orcid.value });
+  }
+
+}
diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html
index 87d312f9ec..605ac4ef45 100644
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -56,12 +56,12 @@
     <div *ngIf="!showPaginator" class="d-flex justify-content-between">
         <button id="nav-prev" type="button" class="btn btn-outline-primary float-left"
                 (click)="goPrev()"
-                [disabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
+                [dsBtnDisabled]="(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"
               (click)="goNext()"
-              [disabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)">
+              [dsBtnDisabled]="(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">
             <i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}
           </span>
diff --git a/src/app/shared/pagination/pagination.component.ts b/src/app/shared/pagination/pagination.component.ts
index b6e9d5c2cd..ee82138a0e 100644
--- a/src/app/shared/pagination/pagination.component.ts
+++ b/src/app/shared/pagination/pagination.component.ts
@@ -44,6 +44,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationRouteParams } from '../../core/pagination/pagination-route-params.interface';
 import { ViewMode } from '../../core/shared/view-mode.model';
+import { BtnDisabledDirective } from '../btn-disabled.directive';
 import {
   hasValue,
   hasValueOperator,
@@ -70,7 +71,7 @@ interface PaginationDetails {
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   standalone: true,
-  imports: [NgIf, NgbDropdownModule, NgFor, NgClass, RSSComponent, NgbPaginationModule, NgbTooltipModule, AsyncPipe, TranslateModule, EnumKeysPipe],
+  imports: [NgIf, NgbDropdownModule, NgFor, NgClass, RSSComponent, NgbPaginationModule, NgbTooltipModule, AsyncPipe, TranslateModule, EnumKeysPipe, BtnDisabledDirective],
 })
 export class PaginationComponent implements OnChanges, OnDestroy, OnInit {
   /**
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 3d5465f0e6..14171cb30b 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
@@ -31,11 +31,11 @@
         <div class="col text-right">
           <button type="reset"
                   class="btn btn-default"
-                  [disabled]="(isProcessing | async)"
+                  [dsBtnDisabled]="(isProcessing | async)"
                   (click)="onReset()">{{'form.cancel' | translate}}</button>
           <button type="button"
                   class="btn btn-primary"
-                  [disabled]="(isFormValid() | async) !== true || (isProcessing | async)"
+                  [dsBtnDisabled]="(isFormValid() | async) !== true || (isProcessing | async)"
                   (click)="onSubmit()">
             <span *ngIf="(isProcessing | async)">
                   <i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}
diff --git a/src/app/shared/resource-policies/form/resource-policy-form.component.spec.ts b/src/app/shared/resource-policies/form/resource-policy-form.component.spec.ts
index 4820941c9f..deaef6c611 100644
--- a/src/app/shared/resource-policies/form/resource-policy-form.component.spec.ts
+++ b/src/app/shared/resource-policies/form/resource-policy-form.component.spec.ts
@@ -45,6 +45,7 @@ import { ResourcePolicy } from '../../../core/resource-policy/models/resource-po
 import { RESOURCE_POLICY } from '../../../core/resource-policy/models/resource-policy.resource-type';
 import { SubmissionObjectDataService } from '../../../core/submission/submission-object-data.service';
 import { SubmissionService } from '../../../submission/submission.service';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import {
   dateToISOFormat,
   stringToNgbDateStruct,
@@ -216,6 +217,7 @@ describe('ResourcePolicyFormComponent test suite', () => {
         ResourcePolicyFormComponent,
         TestComponent,
         NgxMaskModule.forRoot(),
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: ActivatedRoute, useValue: activatedRouteStub },
@@ -426,7 +428,8 @@ describe('ResourcePolicyFormComponent test suite', () => {
 
       const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
 
-      expect(depositBtn.nativeElement.disabled).toBeFalsy();
+      expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+      expect(depositBtn.nativeElement.classList.contains('disabled')).toBeFalse();
     });
 
     it('should emit submit event', () => {
@@ -480,7 +483,8 @@ describe('ResourcePolicyFormComponent test suite', () => {
 
       const depositBtn: any = fixture.debugElement.query(By.css('.btn-primary'));
 
-      expect(depositBtn.nativeElement.disabled).toBeTruthy();
+      expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+      expect(depositBtn.nativeElement.classList.contains('disabled')).toBeTrue();
     });
 
   });
diff --git a/src/app/shared/resource-policies/form/resource-policy-form.component.ts b/src/app/shared/resource-policies/form/resource-policy-form.component.ts
index 534e88bcef..08a7f18492 100644
--- a/src/app/shared/resource-policies/form/resource-policy-form.component.ts
+++ b/src/app/shared/resource-policies/form/resource-policy-form.component.ts
@@ -47,6 +47,7 @@ import { ResourcePolicy } from '../../../core/resource-policy/models/resource-po
 import { RESOURCE_POLICY } from '../../../core/resource-policy/models/resource-policy.resource-type';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { getFirstSucceededRemoteData } from '../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import {
   dateToISOFormat,
   stringToNgbDateStruct,
@@ -95,6 +96,7 @@ export interface ResourcePolicyEvent {
     AsyncPipe,
     NgIf,
     NgFor,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/shared/resource-policies/resource-policies.component.html b/src/app/shared/resource-policies/resource-policies.component.html
index bb6073df85..04d5fb7960 100644
--- a/src/app/shared/resource-policies/resource-policies.component.html
+++ b/src/app/shared/resource-policies/resource-policies.component.html
@@ -13,7 +13,7 @@
             </span>
             <div class="space-children-mr flex-shrink-0">
               <button class="btn btn-danger p-1"
-                      [disabled]="((canDelete() | async) !== true) || (isProcessingDelete() | async)"
+                      [dsBtnDisabled]="((canDelete() | async) !== true) || (isProcessingDelete() | async)"
                       [title]="'resource-policies.delete.btn.title' | translate"
                       (click)="deleteSelectedResourcePolicies()">
                 <span *ngIf="(isProcessingDelete() | async)">
@@ -25,7 +25,7 @@
                 </span>
               </button>
               <button class="btn btn-success p-1"
-                      [disabled]="(isProcessingDelete() | async)"
+                      [dsBtnDisabled]="(isProcessingDelete() | async)"
                       [title]="'resource-policies.add.for.' + resourceType | translate"
                       (click)="redirectToResourcePolicyCreatePage()">
                 <i class='fas fa-plus' aria-hidden="true"></i>
diff --git a/src/app/shared/resource-policies/resource-policies.component.ts b/src/app/shared/resource-policies/resource-policies.component.ts
index 1d098f554d..729789bc6e 100644
--- a/src/app/shared/resource-policies/resource-policies.component.ts
+++ b/src/app/shared/resource-policies/resource-policies.component.ts
@@ -41,6 +41,7 @@ import { GroupDataService } from '../../core/eperson/group-data.service';
 import { ResourcePolicy } from '../../core/resource-policy/models/resource-policy.model';
 import { ResourcePolicyDataService } from '../../core/resource-policy/resource-policy-data.service';
 import { getAllSucceededRemoteData } from '../../core/shared/operators';
+import { BtnDisabledDirective } from '../btn-disabled.directive';
 import {
   hasValue,
   isEmpty,
@@ -63,6 +64,7 @@ import {
     NgIf,
     AsyncPipe,
     NgForOf,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
diff --git a/src/app/shared/search/advanced-search/advanced-search.component.html b/src/app/shared/search/advanced-search/advanced-search.component.html
index bd8ad0dfc9..259e10c275 100644
--- a/src/app/shared/search/advanced-search/advanced-search.component.html
+++ b/src/app/shared/search/advanced-search/advanced-search.component.html
@@ -30,7 +30,7 @@
                                (findSuggestions)="findSuggestions($event)"
                                ngDefaultControl>
   </ds-filter-input-suggestions>
-  <button (click)="applyFilter()" [disabled]="currentValue === ''" class="btn btn-primary mt-2">
+  <button (click)="applyFilter()" [dsBtnDisabled]="currentValue === ''" class="btn btn-primary mt-2">
     {{ 'search.sidebar.advanced-search.add' | translate }}
   </button>
 </div>
diff --git a/src/app/shared/search/advanced-search/advanced-search.component.ts b/src/app/shared/search/advanced-search/advanced-search.component.ts
index f8ebb51dad..99eaa23a0d 100644
--- a/src/app/shared/search/advanced-search/advanced-search.component.ts
+++ b/src/app/shared/search/advanced-search/advanced-search.component.ts
@@ -31,6 +31,7 @@ import { SearchService } from '../../../core/shared/search/search.service';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
 import { SearchFilterService } from '../../../core/shared/search/search-filter.service';
 import { FilterConfig } from '../../../core/shared/search/search-filters/search-config.model';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -55,6 +56,7 @@ import { SearchFilterConfig } from '../models/search-filter-config.model';
     KeyValuePipe,
     NgForOf,
     TranslateModule,
+    BtnDisabledDirective,
   ],
 })
 export class AdvancedSearchComponent implements OnInit, OnDestroy {
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 f0e6120725..dfd68d026a 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
@@ -2,7 +2,7 @@
    [tabIndex]="-1"
    [routerLink]="[searchLink]"
    [queryParams]="addQueryParams$ | async"
-   (click)="filterService.minimizeAll()">
+   (click)="announceFilter(); 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">
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts
index 297ae12f09..17615e6221 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.ts
@@ -12,7 +12,10 @@ import {
   Router,
   RouterLink,
 } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -20,6 +23,7 @@ import { PaginationService } from '../../../../../../core/pagination/pagination.
 import { SearchService } from '../../../../../../core/shared/search/search.service';
 import { SearchConfigurationService } from '../../../../../../core/shared/search/search-configuration.service';
 import { SearchFilterService } from '../../../../../../core/shared/search/search-filter.service';
+import { LiveRegionService } from '../../../../../../shared/live-region/live-region.service';
 import { currentPath } from '../../../../../utils/route.utils';
 import { ShortNumberPipe } from '../../../../../utils/short-number.pipe';
 import { FacetValue } from '../../../../models/facet-value.model';
@@ -75,6 +79,8 @@ export class SearchFacetOptionComponent implements OnInit {
               protected searchConfigService: SearchConfigurationService,
               protected router: Router,
               protected paginationService: PaginationService,
+              protected liveRegionService: LiveRegionService,
+              private translateService: TranslateService,
   ) {
   }
 
@@ -119,4 +125,11 @@ export class SearchFacetOptionComponent implements OnInit {
     return getFacetValueForType(this.filterValue, this.filterConfig);
   }
 
+  /**
+   * Announces to the screen reader that the page will be reloaded, which filter has been selected
+   */
+  announceFilter() {
+    const message = this.translateService.instant('search-facet-option.update.announcement', { filter: this.filterValue.value });
+    this.liveRegionService.addMessage(message);
+  }
 }
diff --git a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts
index cc8d05e459..734e372e5b 100644
--- a/src/app/shared/search/search-filters/search-filter/search-filter.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.ts
@@ -6,11 +6,13 @@ import {
 } from '@angular/common';
 import {
   Component,
+  EventEmitter,
   Inject,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
+  Output,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import {
@@ -78,6 +80,8 @@ export class SearchFilterComponent implements OnInit, OnChanges, OnDestroy {
    */
   @Input() scope: string;
 
+  @Output() isVisibilityComputed = new EventEmitter<boolean>();
+
   /**
    * True when the filter is 100% collapsed in the UI
    */
@@ -136,11 +140,16 @@ export class SearchFilterComponent implements OnInit, OnChanges, OnDestroy {
     this.active$ = this.isActive();
     this.collapsed$ = this.isCollapsed();
     this.initializeFilter();
-    this.subs.push(this.appliedFilters$.pipe(take(1)).subscribe((selectedValues: AppliedFilter[]) => {
-      if (isNotEmpty(selectedValues)) {
-        this.filterService.expand(this.filter.name);
-      }
-    }));
+    this.subs.push(
+      this.appliedFilters$.subscribe((selectedValues: AppliedFilter[]) => {
+        if (isNotEmpty(selectedValues)) {
+          this.filterService.expand(this.filter.name);
+        }
+      }),
+      this.getIsActive().pipe(take(1)).subscribe(() => {
+        this.isVisibilityComputed.emit(true);
+      }),
+    );
   }
 
   ngOnChanges(): void {
@@ -223,6 +232,16 @@ export class SearchFilterComponent implements OnInit, OnChanges, OnDestroy {
    * @returns {Observable<boolean>} Emits true whenever a given filter config should be shown
    */
   isActive(): Observable<boolean> {
+    return this.getIsActive().pipe(
+      startWith(true),
+    );
+  }
+
+  /**
+   * Return current filter visibility
+   * @returns {Observable<boolean>} Emits true whenever a given filter config should be shown
+   */
+  private getIsActive():  Observable<boolean> {
     return combineLatest([
       this.appliedFilters$,
       this.searchConfigService.searchOptions,
@@ -243,7 +262,6 @@ export class SearchFilterComponent implements OnInit, OnChanges, OnDestroy {
           );
         }
       }),
-      startWith(true),
     );
   }
 }
diff --git a/src/app/shared/search/search-filters/search-filters.component.html b/src/app/shared/search/search-filters/search-filters.component.html
index dc2ab1f6da..a9afaf7e5e 100644
--- a/src/app/shared/search/search-filters/search-filters.component.html
+++ b/src/app/shared/search/search-filters/search-filters.component.html
@@ -1,10 +1,24 @@
-<h3 *ngIf="inPlaceSearch">{{filterLabel+'.filters.head' | translate}}</h3>
-<h2 *ngIf="!inPlaceSearch">{{filterLabel+'.filters.head' | translate}}</h2>
-<div *ngIf="(filters | async)?.hasSucceeded">
-    <div *ngFor="let filter of (filters | async)?.payload; trackBy: trackUpdate">
-        <ds-search-filter [scope]="currentScope" [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
-    </div>
-</div>
-<button *ngIf="inPlaceSearch" class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" (click)="minimizeFilters()" queryParamsHandling="merge" role="button">
-  <i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}
-</button>
+@if (inPlaceSearch) {
+  <h3>{{filterLabel+'.filters.head' | translate}}</h3>
+} @else {
+  <h2>{{filterLabel+'.filters.head' | translate}}</h2>
+}
+
+@if ((filters | async)?.hasSucceeded) {
+  <div [class.visually-hidden]="filtersWithComputedVisibility !== (filters | async)?.payload?.length">
+    @for (filter of (filters | async)?.payload; track filter.name) {
+      <ds-search-filter (isVisibilityComputed)="countFiltersWithComputedVisibility($event)" [scope]="currentScope" [filter]="filter" [inPlaceSearch]="inPlaceSearch" [refreshFilters]="refreshFilters"></ds-search-filter>
+    }
+  </div>
+}
+
+@if(filtersWithComputedVisibility !== (filters | async)?.payload?.length) {
+  <ngx-skeleton-loader [count]="defaultFilterCount"/>
+}
+
+@if (inPlaceSearch) {
+  <button class="btn btn-primary" [routerLink]="[searchLink]" [queryParams]="clearParams | async" (click)="minimizeFilters()" queryParamsHandling="merge" role="button">
+    <i class="fas fa-undo"></i> {{"search.filters.reset" | translate}}
+  </button>
+}
+
diff --git a/src/app/shared/search/search-filters/search-filters.component.scss b/src/app/shared/search/search-filters/search-filters.component.scss
index b5b2816e89..6170b9281c 100644
--- a/src/app/shared/search/search-filters/search-filters.component.scss
+++ b/src/app/shared/search/search-filters/search-filters.component.scss
@@ -1,2 +1,12 @@
 @import '../../../../styles/variables';
-@import '../../../../styles/mixins';
\ No newline at end of file
+@import '../../../../styles/mixins';
+
+:host ::ng-deep {
+  ngx-skeleton-loader .skeleton-loader {
+    height: var(--ds-filters-skeleton-height);
+    margin-bottom: var(--ds-filters-skeleton-spacing);
+    padding: var(--ds-filters-skeleton-spacing);
+    background-color: var(--bs-light);
+    box-shadow: none;
+  }
+}
diff --git a/src/app/shared/search/search-filters/search-filters.component.spec.ts b/src/app/shared/search/search-filters/search-filters.component.spec.ts
index 0277551eea..878b3a5f7e 100644
--- a/src/app/shared/search/search-filters/search-filters.component.spec.ts
+++ b/src/app/shared/search/search-filters/search-filters.component.spec.ts
@@ -11,6 +11,8 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { APP_CONFIG } from '../../../../config/app-config.interface';
+import { environment } from '../../../../environments/environment';
 import { SearchService } from '../../../core/shared/search/search.service';
 import { SearchFilterService } from '../../../core/shared/search/search-filter.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-configuration.service';
@@ -41,6 +43,7 @@ describe('SearchFiltersComponent', () => {
         { provide: SearchService, useValue: searchService },
         { provide: SEARCH_CONFIG_SERVICE, useValue: new SearchConfigurationServiceStub() },
         { provide: SearchFilterService, useValue: searchFilters },
+        { provide: APP_CONFIG, useValue: environment },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).overrideComponent(SearchFiltersComponent, {
diff --git a/src/app/shared/search/search-filters/search-filters.component.ts b/src/app/shared/search/search-filters/search-filters.component.ts
index 97358ea8e9..dad3bffb75 100644
--- a/src/app/shared/search/search-filters/search-filters.component.ts
+++ b/src/app/shared/search/search-filters/search-filters.component.ts
@@ -1,8 +1,4 @@
-import {
-  AsyncPipe,
-  NgFor,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   Inject,
@@ -14,19 +10,23 @@ import {
   RouterLink,
 } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import {
   BehaviorSubject,
   Observable,
 } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import {
+  APP_CONFIG,
+  AppConfig,
+} from '../../../../config/app-config.interface';
 import { RemoteData } from '../../../core/data/remote-data';
 import { SearchService } from '../../../core/shared/search/search.service';
 import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
 import { SearchFilterService } from '../../../core/shared/search/search-filter.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../my-dspace-page/my-dspace-configuration.service';
 import { currentPath } from '../../utils/route.utils';
-import { AdvancedSearchComponent } from '../advanced-search/advanced-search.component';
 import { AppliedFilter } from '../models/applied-filter.model';
 import { SearchFilterConfig } from '../models/search-filter-config.model';
 import { SearchFilterComponent } from './search-filter/search-filter.component';
@@ -36,7 +36,7 @@ import { SearchFilterComponent } from './search-filter/search-filter.component';
   styleUrls: ['./search-filters.component.scss'],
   templateUrl: './search-filters.component.html',
   standalone: true,
-  imports: [NgIf, NgFor, SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, AdvancedSearchComponent],
+  imports: [SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, NgxSkeletonLoaderModule],
 })
 
 /**
@@ -81,15 +81,23 @@ export class SearchFiltersComponent implements OnInit {
    */
   searchLink: string;
 
+  /**
+   * Filters for which visibility has been computed
+   */
+  filtersWithComputedVisibility = 0;
+
   subs = [];
   filterLabel = 'search';
+  defaultFilterCount: number;
 
   constructor(
     protected searchService: SearchService,
     protected searchFilterService: SearchFilterService,
     protected router: Router,
     @Inject(SEARCH_CONFIG_SERVICE) protected searchConfigService: SearchConfigurationService,
+    @Inject(APP_CONFIG) protected appConfig: AppConfig,
   ) {
+    this.defaultFilterCount = this.appConfig.search.filterPlaceholdersCount ?? 5;
   }
 
   ngOnInit(): void {
@@ -125,4 +133,10 @@ export class SearchFiltersComponent implements OnInit {
       this.searchFilterService.minimizeAll();
     }
   }
+
+  countFiltersWithComputedVisibility(computed: boolean) {
+    if (computed) {
+      this.filtersWithComputedVisibility += 1;
+    }
+  }
 }
diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html
new file mode 100644
index 0000000000..a42bda0674
--- /dev/null
+++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.html
@@ -0,0 +1,38 @@
+<div class="row flex-nowrap">
+  <div [class.mb-2]="(viewMode$ | async) === ViewMode.ListElement" class="info-skeleton col-12">
+    <ngx-skeleton-loader/>
+  </div>
+</div>
+
+@if((viewMode$ | async) === ViewMode.ListElement) {
+  @for (result of loadingResults; track result; let first = $first) {
+      <div [class.my-4]="!first" class="row">
+      @if(showThumbnails) {
+        <div class="col-3 col-md-2">
+          <div class="thumbnail-skeleton position-relative">
+            <ngx-skeleton-loader/>
+          </div>
+        </div>
+      }
+      <div [class.col-9]="showThumbnails" [class.col-md-10]="showThumbnails" [class.col-md-12]="!showThumbnails">
+        <div class="badge-skeleton">
+          <ngx-skeleton-loader/>
+        </div>
+        <div class="text-skeleton">
+          <ngx-skeleton-loader [count]="textLineCount"/>
+        </div>
+      </div>
+    </div>
+  }
+} @else if ((viewMode$ | async) === ViewMode.GridElement) {
+  <div class="card-columns row">
+    @for (result of loadingResults; track result) {
+      <div class="card-column col col-sm-6 col-lg-4">
+        <div class="card-skeleton">
+          <ngx-skeleton-loader/>
+        </div>
+      </div>
+    }
+
+  </div>
+}
diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.scss b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.scss
new file mode 100644
index 0000000000..9345f1ab43
--- /dev/null
+++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.scss
@@ -0,0 +1,56 @@
+:host ::ng-deep {
+  --ds-wrapper-grid-spacing: calc(var(--bs-spacer) / 2);
+
+  .info-skeleton, .badge-skeleton, .text-skeleton{
+    ngx-skeleton-loader .skeleton-loader {
+      height: var(--ds-search-skeleton-text-height);
+    }
+  }
+
+  .badge-skeleton, .info-skeleton {
+    ngx-skeleton-loader .skeleton-loader {
+      width: var(--ds-search-skeleton-badge-width);
+    }
+  }
+
+  .info-skeleton {
+    ngx-skeleton-loader .skeleton-loader {
+      width: var(--ds-search-skeleton-info-width);
+    }
+  }
+
+  .thumbnail-skeleton {
+    max-width: var(--ds-thumbnail-max-width);
+    height: 100%;
+
+    ngx-skeleton-loader .skeleton-loader {
+      margin-right: var(--ds-search-skeleton-thumbnail-margin);
+      border-radius: 0;
+      height: 100%;
+    }
+  }
+
+  .card-skeleton {
+    ngx-skeleton-loader .skeleton-loader {
+      height: var(--ds-search-skeleton-card-height);
+    }
+  }
+
+  ngx-skeleton-loader .skeleton-loader {
+    background-color: var(--bs-light);
+    box-shadow: none;
+  }
+
+  .card-columns {
+    margin-left: calc(-1 * var(--ds-wrapper-grid-spacing));
+    margin-right: calc(-1 * var(--ds-wrapper-grid-spacing));
+    column-gap: 0;
+
+    .card-column {
+      padding-left: var(--ds-wrapper-grid-spacing);
+      padding-right: var(--ds-wrapper-grid-spacing);
+    }
+  }
+}
+
+
diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts
new file mode 100644
index 0000000000..68c8db5a8e
--- /dev/null
+++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.spec.ts
@@ -0,0 +1,32 @@
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { SearchService } from '../../../../core/shared/search/search.service';
+import { SearchServiceStub } from '../../../testing/search-service.stub';
+import { SearchResultsSkeletonComponent } from './search-results-skeleton.component';
+
+describe('SearchResultsSkeletonComponent', () => {
+  let component: SearchResultsSkeletonComponent;
+  let fixture: ComponentFixture<SearchResultsSkeletonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SearchResultsSkeletonComponent, NgxSkeletonLoaderModule],
+      providers: [
+        { provide: SearchService, useValue: new SearchServiceStub() },
+      ],
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SearchResultsSkeletonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts
new file mode 100644
index 0000000000..3fba70b119
--- /dev/null
+++ b/src/app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component.ts
@@ -0,0 +1,70 @@
+import {
+  AsyncPipe,
+  NgForOf,
+} from '@angular/common';
+import {
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { Observable } from 'rxjs';
+
+import { SearchService } from '../../../../core/shared/search/search.service';
+import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { hasValue } from '../../../empty.util';
+
+@Component({
+  selector: 'ds-search-results-skeleton',
+  standalone: true,
+  imports: [
+    NgxSkeletonLoaderModule,
+    AsyncPipe,
+    NgForOf,
+  ],
+  templateUrl: './search-results-skeleton.component.html',
+  styleUrl: './search-results-skeleton.component.scss',
+})
+/**
+ * Component to show placeholders for search results while loading, to give a loading feedback to the user without layout shifting.
+ */
+export class SearchResultsSkeletonComponent implements OnInit {
+  /**
+   * Whether the search result contains thumbnail
+   */
+  @Input()
+  showThumbnails: boolean;
+  /**
+   * The number of search result loaded in the current page
+   */
+  @Input()
+  numberOfResults = 0;
+  /**
+   * How many placeholder are displayed for the search result text
+   */
+  @Input()
+  textLineCount = 2;
+  /**
+   * The view mode of the search page
+   */
+  public viewMode$: Observable<ViewMode>;
+  /**
+   * Array built from numberOfResults to count and iterate based on index
+   */
+  public loadingResults: number[];
+
+  protected readonly ViewMode = ViewMode;
+
+  constructor(private searchService: SearchService) {
+    this.viewMode$ = this.searchService.getViewMode();
+  }
+
+  ngOnInit() {
+    this.loadingResults = Array.from({ length: this.numberOfResults }, (_, i) => i + 1);
+
+    if (!hasValue(this.showThumbnails)) {
+      // this is needed as the default value of show thumbnails is true but set in lower levels of the DOM.
+      this.showThumbnails = true;
+    }
+  }
+}
diff --git a/src/app/shared/search/search-results/search-results.component.html b/src/app/shared/search/search-results/search-results.component.html
index 871b2b2ca8..d56d69761b 100644
--- a/src/app/shared/search/search-results/search-results.component.html
+++ b/src/app/shared/search/search-results/search-results.component.html
@@ -1,3 +1,15 @@
+@if ((activeFilters$ | async).length > 0 && (appliedFilters$ | async).length === 0) {
+  <div class="row">
+    <div class="col-12">
+      <div class="filters-badge-skeleton-container">
+          <div class="filter-badge-skeleton">
+            <ngx-skeleton-loader [count]="(activeFilters$ | async).length" />
+          </div>
+      </div>
+    </div>
+  </div>
+}
+
 <div class="d-flex justify-content-between">
     <h1 *ngIf="!disableHeader">{{ (configuration ? configuration + '.search.results.head' : 'search.results.head') | translate }}</h1>
     <ds-search-export-csv *ngIf="showCsvExport" [searchConfig]="searchConfig"></ds-search-export-csv>
@@ -19,7 +31,13 @@
             (selectObject)="selectObject.emit($event)">
     </ds-viewable-collection>
 </div>
-<ds-loading *ngIf="isLoading()" message="{{'loading.search-results' | translate}}"></ds-loading>
+
+<ds-search-results-skeleton
+  *ngIf="isLoading()"
+  [showThumbnails]="showThumbnails"
+  [numberOfResults]="searchConfig.pagination.pageSize"
+></ds-search-results-skeleton>
+
 <ds-error *ngIf="showError()"
           message="{{errorMessageLabel() | translate}}"></ds-error>
 <div *ngIf="searchResults?.payload?.page.length === 0 || searchResults?.statusCode === 400">
diff --git a/src/app/shared/search/search-results/search-results.component.scss b/src/app/shared/search/search-results/search-results.component.scss
new file mode 100644
index 0000000000..6e369c729b
--- /dev/null
+++ b/src/app/shared/search/search-results/search-results.component.scss
@@ -0,0 +1,17 @@
+:host ::ng-deep {
+  .filter-badge-skeleton {
+    ngx-skeleton-loader .skeleton-loader {
+      background-color: var(--bs-light);
+      box-shadow: none;
+      width: var(--ds-search-skeleton-filter-badge-width);
+      height: var(--ds-search-skeleton-badge-height);
+      margin-bottom: 0;
+      margin-right: calc(var(--bs-spacer) / 4);
+    }
+  }
+
+  .filters-badge-skeleton-container {
+    display: flex;
+    max-height: var(--ds-search-skeleton-badge-height);
+  }
+}
diff --git a/src/app/shared/search/search-results/search-results.component.spec.ts b/src/app/shared/search/search-results/search-results.component.spec.ts
index fedea57e07..33b8432b74 100644
--- a/src/app/shared/search/search-results/search-results.component.spec.ts
+++ b/src/app/shared/search/search-results/search-results.component.spec.ts
@@ -13,16 +13,20 @@ import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { Community } from '../../../core/shared/community.model';
+import { SearchService } from '../../../core/shared/search/search.service';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
 import { ErrorComponent } from '../../error/error.component';
-import { ThemedLoadingComponent } from '../../loading/themed-loading.component';
 import { getMockThemeService } from '../../mocks/theme-service.mock';
 import { ObjectCollectionComponent } from '../../object-collection/object-collection.component';
 import { createFailedRemoteDataObject } from '../../remote-data.utils';
 import { ActivatedRouteStub } from '../../testing/active-router.stub';
 import { QueryParamsDirectiveStub } from '../../testing/query-params-directive.stub';
+import { SearchConfigurationServiceStub } from '../../testing/search-configuration-service.stub';
+import { SearchServiceStub } from '../../testing/search-service.stub';
 import { ThemeService } from '../../theme-support/theme.service';
 import { SearchExportCsvComponent } from '../search-export-csv/search-export-csv.component';
 import { SearchResultsComponent } from './search-results.component';
+import { SearchResultsSkeletonComponent } from './search-results-skeleton/search-results-skeleton.component';
 
 describe('SearchResultsComponent', () => {
   let comp: SearchResultsComponent;
@@ -35,6 +39,11 @@ describe('SearchResultsComponent', () => {
       providers: [
         { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
         { provide: ThemeService, useValue: getMockThemeService() },
+        { provide: SearchService, useValue: new SearchServiceStub() },
+        {
+          provide: SearchConfigurationService,
+          useValue: new SearchConfigurationServiceStub(),
+        },
       ],
       imports: [
         TranslateModule.forRoot(),
@@ -48,8 +57,8 @@ describe('SearchResultsComponent', () => {
           imports: [
             SearchExportCsvComponent,
             ObjectCollectionComponent,
-            ThemedLoadingComponent,
             ErrorComponent,
+            SearchResultsSkeletonComponent,
           ],
         },
         add: { imports: [QueryParamsDirectiveStub] },
@@ -96,7 +105,7 @@ describe('SearchResultsComponent', () => {
 
   it('should display link with new search where query is quoted if search return a error 400', () => {
     (comp as any).searchResults = createFailedRemoteDataObject('Error', 400);
-    (comp as any).searchConfig = { query: 'foobar' };
+    (comp as any).searchConfig = { query: 'foobar', pagination: { pageSize: 10 } };
     fixture.detectChanges();
 
     const linkDes = fixture.debugElement.queryAll(By.directive(QueryParamsDirectiveStub));
diff --git a/src/app/shared/search/search-results/search-results.component.ts b/src/app/shared/search/search-results/search-results.component.ts
index 09186e8c6c..e8f66d01f9 100644
--- a/src/app/shared/search/search-results/search-results.component.ts
+++ b/src/app/shared/search/search-results/search-results.component.ts
@@ -1,4 +1,7 @@
-import { NgIf } from '@angular/common';
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
 import {
   Component,
   EventEmitter,
@@ -7,12 +10,19 @@ import {
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import {
+  BehaviorSubject,
+  Observable,
+} from 'rxjs';
 
 import { SortOptions } from '../../../core/cache/models/sort-options.model';
 import { PaginatedList } from '../../../core/data/paginated-list.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { Context } from '../../../core/shared/context.model';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { SearchService } from '../../../core/shared/search/search.service';
+import { SearchConfigurationService } from '../../../core/shared/search/search-configuration.service';
 import { ViewMode } from '../../../core/shared/view-mode.model';
 import {
   fadeIn,
@@ -23,13 +33,15 @@ import {
   isNotEmpty,
 } from '../../empty.util';
 import { ErrorComponent } from '../../error/error.component';
-import { ThemedLoadingComponent } from '../../loading/themed-loading.component';
 import { CollectionElementLinkType } from '../../object-collection/collection-element-link.type';
 import { ObjectCollectionComponent } from '../../object-collection/object-collection.component';
 import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { AppliedFilter } from '../models/applied-filter.model';
 import { PaginatedSearchOptions } from '../models/paginated-search-options.model';
+import { SearchFilter } from '../models/search-filter.model';
 import { SearchResult } from '../models/search-result.model';
 import { SearchExportCsvComponent } from '../search-export-csv/search-export-csv.component';
+import { SearchResultsSkeletonComponent } from './search-results-skeleton/search-results-skeleton.component';
 
 export interface SelectionConfig {
   repeatable: boolean;
@@ -39,12 +51,23 @@ export interface SelectionConfig {
 @Component({
   selector: 'ds-base-search-results',
   templateUrl: './search-results.component.html',
+  styleUrls: ['./search-results.component.scss'],
   animations: [
     fadeIn,
     fadeInOut,
   ],
   standalone: true,
-  imports: [NgIf, SearchExportCsvComponent, ObjectCollectionComponent, ThemedLoadingComponent, ErrorComponent, RouterLink, TranslateModule],
+  imports: [
+    AsyncPipe,
+    ErrorComponent,
+    NgIf,
+    NgxSkeletonLoaderModule,
+    ObjectCollectionComponent,
+    RouterLink,
+    SearchExportCsvComponent,
+    SearchResultsSkeletonComponent,
+    TranslateModule,
+  ],
 })
 
 /**
@@ -52,6 +75,15 @@ export interface SelectionConfig {
  */
 export class SearchResultsComponent {
   hasNoValue = hasNoValue;
+  /**
+   * Currently active filters in url
+   */
+  activeFilters$: Observable<SearchFilter[]>;
+
+  /**
+   * Filter applied to show labels, once populated the activeFilters$ will be loaded
+   */
+  appliedFilters$: BehaviorSubject<AppliedFilter[]>;
 
   /**
    * The link type of the listed search results
@@ -125,10 +157,18 @@ export class SearchResultsComponent {
 
   @Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
 
+  constructor(
+    protected searchConfigService: SearchConfigurationService,
+    protected searchService: SearchService,
+  ) {
+    this.activeFilters$ = this.searchConfigService.getCurrentFilters();
+    this.appliedFilters$ = this.searchService.appliedFilters$;
+  }
+
   /**
    * Check if search results are loading
    */
-  isLoading() {
+  isLoading(): boolean {
     return !this.showError() && (hasNoValue(this.searchResults) || hasNoValue(this.searchResults.payload) || this.searchResults.isLoading);
   }
 
diff --git a/src/app/shared/search/search.component.spec.ts b/src/app/shared/search/search.component.spec.ts
index 31c8a6e9b8..8b533b4105 100644
--- a/src/app/shared/search/search.component.spec.ts
+++ b/src/app/shared/search/search.component.spec.ts
@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   NO_ERRORS_SCHEMA,
+  PLATFORM_ID,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -246,6 +247,7 @@ export function configureSearchComponentTestingModule(compType, additionalDeclar
       },
       { provide: APP_DATA_SERVICES_MAP, useValue: {} },
       { provide: APP_CONFIG, useValue: environment },
+      { provide: PLATFORM_ID, useValue: 'browser' },
     ],
     schemas: [NO_ERRORS_SCHEMA],
   }).overrideComponent(compType, {
@@ -415,5 +417,34 @@ describe('SearchComponent', () => {
         expect(result).toBeNull();
       });
     });
+
+    describe('when rendered in SSR', () => {
+      beforeEach(() => {
+        comp.platformId = 'server';
+      });
+
+      it('should not call search method on init', (done) => {
+        comp.ngOnInit();
+        //Check that the first method from which the search depend upon is not being called
+        expect(searchConfigurationServiceStub.getCurrentConfiguration).not.toHaveBeenCalled();
+        comp.initialized$.subscribe((res) => {
+          expect(res).toBeTruthy();
+          done();
+        });
+      });
+    });
+
+    describe('when rendered in CSR', () => {
+      beforeEach(() => {
+        comp.platformId = 'browser';
+      });
+
+      it('should call search method on init', fakeAsync(() => {
+        comp.ngOnInit();
+        tick(100);
+        //Check that the last method from which the search depend upon is being called
+        expect(searchServiceStub.search).toHaveBeenCalled();
+      }));
+    });
   });
 });
diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts
index 337cb67171..45c7eb6f7e 100644
--- a/src/app/shared/search/search.component.ts
+++ b/src/app/shared/search/search.component.ts
@@ -1,5 +1,6 @@
 import {
   AsyncPipe,
+  isPlatformServer,
   NgIf,
   NgTemplateOutlet,
 } from '@angular/common';
@@ -12,6 +13,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  PLATFORM_ID,
 } from '@angular/core';
 import {
   NavigationStart,
@@ -37,6 +39,7 @@ import {
   APP_CONFIG,
   AppConfig,
 } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
 import { COLLECTION_MODULE_PATH } from '../../collection-page/collection-page-routing-paths';
 import { COMMUNITY_MODULE_PATH } from '../../community-page/community-page-routing-paths';
 import { SortOptions } from '../../core/cache/models/sort-options.model';
@@ -236,6 +239,11 @@ export class SearchComponent implements OnDestroy, OnInit {
    */
   @Input() hideScopeInUrl: boolean;
 
+  /**
+   * Defines whether to fetch search results during SSR execution
+   */
+  @Input() renderOnServerSide: boolean;
+
   /**
    * The current configuration used during the search
    */
@@ -251,6 +259,7 @@ export class SearchComponent implements OnDestroy, OnInit {
    */
   currentScope$: Observable<string>;
 
+
   /**
    * The current sort options used
    */
@@ -345,6 +354,7 @@ export class SearchComponent implements OnDestroy, OnInit {
               protected routeService: RouteService,
               protected router: Router,
               @Inject(APP_CONFIG) protected appConfig: AppConfig,
+              @Inject(PLATFORM_ID) public platformId: any,
   ) {
     this.isXsOrSm$ = this.windowService.isXsOrSm();
   }
@@ -357,6 +367,14 @@ export class SearchComponent implements OnDestroy, OnInit {
    * If something changes, update the list of scopes for the dropdown
    */
   ngOnInit(): void {
+    if (!this.renderOnServerSide && !environment.ssr.enableSearchComponent && isPlatformServer(this.platformId)) {
+      this.subs.push(this.getSearchOptions().pipe(distinctUntilChanged()).subscribe((options) => {
+        this.searchOptions$.next(options);
+      }));
+      this.initialized$.next(true);
+      return;
+    }
+
     if (this.useUniquePageId) {
       // Create an unique pagination id related to the instance of the SearchComponent
       this.paginationId = uniqueId(this.paginationId);
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 e0bbc1a609..37a7a3f431 100644
--- a/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
+++ b/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
@@ -34,7 +34,7 @@
             (click)="activeModal.close()">
       {{'subscriptions.modal.close' | translate}}
     </button>
-    <button type="submit" class="btn btn-success" [disabled]="(processing$ | async) || !isValid">
+    <button type="submit" class="btn btn-success" [dsBtnDisabled]="(processing$ | async) || !isValid">
         <span *ngIf="(processing$ | async)">
           <i class='fas fa-circle-notch fa-spin'></i> {{'subscriptions.modal.new-subscription-form.processing' | translate}}
         </span>
diff --git a/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.ts b/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.ts
index 452d890a55..05ee5bcc51 100644
--- a/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.ts
+++ b/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.ts
@@ -50,6 +50,7 @@ import {
   getFirstSucceededRemoteDataPayload,
 } from '../../../core/shared/operators';
 import { AlertComponent } from '../../alert/alert.component';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import { isNotEmpty } from '../../empty.util';
 import { NotificationsService } from '../../notifications/notifications.service';
 import { ThemedTypeBadgeComponent } from '../../object-collection/shared/badges/type-badge/themed-type-badge.component';
@@ -61,7 +62,7 @@ import { SubscriptionsDataService } from '../subscriptions-data.service';
   templateUrl: './subscription-modal.component.html',
   styleUrls: ['./subscription-modal.component.scss'],
   standalone: true,
-  imports: [NgIf, FormsModule, ReactiveFormsModule, ThemedTypeBadgeComponent, NgFor, AlertComponent, AsyncPipe, KeyValuePipe, TranslateModule],
+  imports: [NgIf, FormsModule, ReactiveFormsModule, ThemedTypeBadgeComponent, NgFor, AlertComponent, AsyncPipe, KeyValuePipe, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Modal that allows to manage the subscriptions for the selected item
diff --git a/src/app/shared/subscriptions/subscription-view/subscription-view.component.html b/src/app/shared/subscriptions/subscription-view/subscription-view.component.html
index 8934b8476f..6bdc0d397a 100644
--- a/src/app/shared/subscriptions/subscription-view/subscription-view.component.html
+++ b/src/app/shared/subscriptions/subscription-view/subscription-view.component.html
@@ -21,7 +21,7 @@
 </td>
 <td class="subscription-actions">
   <div class="btn-group edit-field">
-    <button (click)="$event.preventDefault();openSubscriptionModal();" [disabled]="!dso"
+    <button (click)="$event.preventDefault();openSubscriptionModal();" [dsBtnDisabled]="!dso"
             [title]="'subscriptions.table.edit' | translate"
             class="btn btn-outline-primary btn-sm access-control-editEPersonButton">
       <i class="fas fa-edit fa-fw"></i>
diff --git a/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts b/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts
index 001a2ed687..f940e69795 100644
--- a/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts
+++ b/src/app/shared/subscriptions/subscription-view/subscription-view.component.ts
@@ -19,6 +19,7 @@ import { getDSORoute } from 'src/app/app-routing-paths';
 
 import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import { ConfirmationModalComponent } from '../../confirmation-modal/confirmation-modal.component';
 import { hasValue } from '../../empty.util';
 import { ThemedTypeBadgeComponent } from '../../object-collection/shared/badges/type-badge/themed-type-badge.component';
@@ -32,7 +33,7 @@ import { SubscriptionsDataService } from '../subscriptions-data.service';
   templateUrl: './subscription-view.component.html',
   styleUrls: ['./subscription-view.component.scss'],
   standalone: true,
-  imports: [NgIf, ThemedTypeBadgeComponent, RouterLink, NgFor, TranslateModule],
+  imports: [NgIf, ThemedTypeBadgeComponent, RouterLink, NgFor, TranslateModule, BtnDisabledDirective],
 })
 /**
  * Table row representing a subscription that displays all information and action buttons to manage it
diff --git a/src/app/shared/testing/search-configuration-service.stub.ts b/src/app/shared/testing/search-configuration-service.stub.ts
index c567808e87..426dc72930 100644
--- a/src/app/shared/testing/search-configuration-service.stub.ts
+++ b/src/app/shared/testing/search-configuration-service.stub.ts
@@ -26,6 +26,10 @@ export class SearchConfigurationServiceStub {
     return observableOf([]);
   }
 
+  getCurrentFilters() {
+    return observableOf([]);
+  }
+
   getCurrentScope(a) {
     return observableOf('test-id');
   }
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 32a2a21349..55ebe2d957 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -2,12 +2,16 @@
   <div #content class="content dont-break-out preserve-line-breaks">
     <ng-content></ng-content>
   </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>
-  </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>
+  <button
+    class="btn btn-link p-0 {{isExpanded ? 'collapseButton' : 'expandButton'}}"
+    dsDragClick
+    (actualClick)="toggle()"
+    (keyup.Enter)="toggle()"
+    (keyup.Space)="toggle()"
+    role="button"
+    [attr.aria-expanded]="isExpanded"
+  >
+    <i class="fas {{isExpanded ? 'fa-angle-up' : 'fa-angle-down'}}"></i>
+    <span class="ml-1">{{ 'item.truncatable-part.show-' + (isExpanded ? 'less' : 'more') | translate }}</span>
   </button>
 </div>
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
index 7e528650d9..7b3ac2242b 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.spec.ts
@@ -87,6 +87,11 @@ describe('TruncatablePartComponent', () => {
       const a = fixture.debugElement.query(By.css('.collapseButton'));
       expect(a).toBeNull();
     });
+
+    it('expandButton aria-expanded should be false', () => {
+      const btn = fixture.debugElement.query(By.css('.expandButton'));
+      expect(btn.nativeElement.getAttribute('aria-expanded')).toEqual('false');
+    });
   });
 
   describe('When the item is expanded', () => {
@@ -115,6 +120,14 @@ describe('TruncatablePartComponent', () => {
       const a = fixture.debugElement.query(By.css('.collapseButton'));
       expect(a).not.toBeNull();
     });
+
+    it('collapseButton aria-expanded should be true', () => {
+      (comp as any).setLines();
+      (comp as any).expandable = true;
+      fixture.detectChanges();
+      const btn = fixture.debugElement.query(By.css('.collapseButton'));
+      expect(btn.nativeElement.getAttribute('aria-expanded')).toEqual('true');
+    });
   });
 });
 
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
index 54220d7f10..0c49a56405 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
@@ -150,6 +150,13 @@ export class TruncatablePartComponent implements AfterViewChecked, OnInit, OnDes
     }
   }
 
+  /**
+   * Indicates if the content is expanded, button state is 'Collapse'
+   */
+  public get isExpanded() {
+    return this.expand && this.expandable;
+  }
+
   /**
    * Unsubscribe from the subscription
    */
diff --git a/src/app/shared/upload/uploader/uploader.component.html b/src/app/shared/upload/uploader/uploader.component.html
index 4c1db13d13..ae7c07bbab 100644
--- a/src/app/shared/upload/uploader/uploader.component.html
+++ b/src/app/shared/upload/uploader/uploader.component.html
@@ -35,7 +35,7 @@
               <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">
-              <button type="button" class="btn btn-danger" title="{{'uploader.delete.btn-title' | translate}}" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
+              <button type="button" class="btn btn-danger" title="{{'uploader.delete.btn-title' | translate}}" (click)="uploader.clearQueue()" [dsBtnDisabled]="!uploader.queue.length">
                 <i class="fas fa-trash" aria-hidden="true"></i>
               </button>
             </div>
diff --git a/src/app/shared/upload/uploader/uploader.component.ts b/src/app/shared/upload/uploader/uploader.component.ts
index fbab09be3e..fbafe811eb 100644
--- a/src/app/shared/upload/uploader/uploader.component.ts
+++ b/src/app/shared/upload/uploader/uploader.component.ts
@@ -27,6 +27,7 @@ import {
   XSRF_REQUEST_HEADER,
   XSRF_RESPONSE_HEADER,
 } from '../../../core/xsrf/xsrf.constants';
+import { BtnDisabledDirective } from '../../btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -42,7 +43,7 @@ import { UploaderProperties } from './uploader-properties.model';
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   standalone: true,
-  imports: [TranslateModule, FileUploadModule, CommonModule],
+  imports: [TranslateModule, FileUploadModule, CommonModule, BtnDisabledDirective],
 })
 export class UploaderComponent implements OnInit, AfterViewInit {
 
diff --git a/src/app/shared/utils/hover-outside.directive.ts b/src/app/shared/utils/hover-outside.directive.ts
new file mode 100644
index 0000000000..e046d3a087
--- /dev/null
+++ b/src/app/shared/utils/hover-outside.directive.ts
@@ -0,0 +1,53 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+/**
+ * Directive to detect when the user hovers outside the element the directive was put on
+ *
+ * **Performance Consideration**: it's probably not good for performance to use this excessively (on
+ * {@link ExpandableNavbarSectionComponent} for example, a workaround for this problem was to add an `*ngIf` to prevent
+ * this Directive from always being active)
+ */
+@Directive({
+  selector: '[dsHoverOutside]',
+  standalone: true,
+})
+export class HoverOutsideDirective {
+
+  /**
+   * Emits null when the user hovers outside of the element
+   */
+  @Output()
+  public dsHoverOutside = new EventEmitter();
+
+  /**
+   * CSS selector for the parent element to monitor. If set, the directive will use this
+   * selector to determine if the hover event originated within the selected parent element.
+   * If left unset, the directive will monitor mouseover hover events for the element it is applied to.
+   */
+  @Input()
+  public dsHoverOutsideOfParentSelector: string;
+
+  constructor(
+    private elementRef: ElementRef,
+  ) {
+  }
+
+  @HostListener('document:mouseover', ['$event'])
+  public onMouseOver(event: MouseEvent): void {
+    const targetElement: HTMLElement = event.target as HTMLElement;
+    const element: Element = document.querySelector(this.dsHoverOutsideOfParentSelector);
+    const hoveredInside = (element ? new ElementRef(element) : this.elementRef).nativeElement.contains(targetElement);
+
+    if (!hoveredInside) {
+      this.dsHoverOutside.emit(null);
+    }
+  }
+
+}
diff --git a/src/app/shared/utils/safe-url-pipe.ts b/src/app/shared/utils/safe-url-pipe.ts
index 6cb9d9fb1b..f8bc728829 100644
--- a/src/app/shared/utils/safe-url-pipe.ts
+++ b/src/app/shared/utils/safe-url-pipe.ts
@@ -16,6 +16,6 @@ import { DomSanitizer } from '@angular/platform-browser';
 export class SafeUrlPipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) { }
   transform(url) {
-    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
+    return url == null ? null : this.domSanitizer.bypassSecurityTrustResourceUrl(url);
   }
 }
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 16370a5873..db33afc76a 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.html
+++ b/src/app/submission/form/collection/submission-form-collection.component.html
@@ -25,7 +25,7 @@
             class="btn btn-outline-primary"
             (blur)="onClose()"
             (click)="onClose()"
-            [disabled]="(processingChange$ | async) || collectionModifiable === false || isReadonly"
+            [dsBtnDisabled]="(processingChange$ | async) || collectionModifiable === false || isReadonly"
             ngbDropdownToggle>
       <span *ngIf="(processingChange$ | async)"><i class='fas fa-circle-notch fa-spin'></i></span>
       <span *ngIf="(processingChange$ | async) !== true">{{ selectedCollectionName$ | async }}</span>
diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
index 540c2ba561..3a5ae8a18d 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts
+++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
@@ -30,6 +30,7 @@ import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
 import { Collection } from '../../../core/shared/collection.model';
 import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { ThemedCollectionDropdownComponent } from '../../../shared/collection-dropdown/themed-collection-dropdown.component';
 import { DSONameServiceMock } from '../../../shared/mocks/dso-name.service.mock';
 import {
@@ -152,6 +153,7 @@ describe('SubmissionFormCollectionComponent Component', () => {
         TranslateModule.forRoot(),
         SubmissionFormCollectionComponent,
         TestComponent,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: DSONameService, useValue: new DSONameServiceMock() },
@@ -275,7 +277,8 @@ describe('SubmissionFormCollectionComponent Component', () => {
       it('the dropdown button should be disabled when isReadonly is true', () => {
         comp.isReadonly = true;
         fixture.detectChanges();
-        expect(dropdowBtn.nativeNode.attributes.disabled).toBeDefined();
+        expect(dropdowBtn.nativeNode.getAttribute('aria-disabled')).toBe('true');
+        expect(dropdowBtn.nativeNode.classList.contains('disabled')).toBeTrue();
       });
 
       it('should be simulated when the drop-down menu is closed', () => {
diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts
index 2aec1c9e30..1736b474d5 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.ts
+++ b/src/app/submission/form/collection/submission-form-collection.component.ts
@@ -34,6 +34,7 @@ import { Collection } from '../../../core/shared/collection.model';
 import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operators';
 import { SubmissionObject } from '../../../core/submission/models/submission-object.model';
 import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { CollectionDropdownComponent } from '../../../shared/collection-dropdown/collection-dropdown.component';
 import { ThemedCollectionDropdownComponent } from '../../../shared/collection-dropdown/themed-collection-dropdown.component';
 import {
@@ -57,6 +58,7 @@ import { SubmissionService } from '../../submission.service';
     TranslateModule,
     NgbDropdownModule,
     ThemedCollectionDropdownComponent,
+    BtnDisabledDirective,
   ],
 })
 export class SubmissionFormCollectionComponent implements OnDestroy, OnChanges, OnInit {
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 f1162cea4d..c860fb557b 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.html
+++ b/src/app/submission/form/footer/submission-form-footer.component.html
@@ -5,7 +5,7 @@
             id="discard"
             [attr.data-test]="'discard' | dsBrowserOnly"
             class="btn btn-danger"
-            [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+            [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
             (click)="$event.preventDefault();confirmDiscard(content)">
       <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
     </button>
@@ -28,7 +28,7 @@
               class="btn btn-secondary"
               id="save"
               [attr.data-test]="'save' | dsBrowserOnly"
-              [disabled]="(processingSaveStatus | async) || (hasUnsavedModification | async) !== true"
+              [dsBtnDisabled]="(processingSaveStatus | async) || (hasUnsavedModification | async) !== true"
               (click)="save($event)">
         <span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
       </button>
@@ -38,7 +38,7 @@
               class="btn"
               id="saveForLater"
               [attr.data-test]="'save-for-later' | dsBrowserOnly"
-              [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+              [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
               (click)="saveLater($event)">
         <span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
       </button>
@@ -47,7 +47,7 @@
               id="deposit"
               [attr.data-test]="'deposit' | dsBrowserOnly"
               class="btn btn-success"
-              [disabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+              [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
               (click)="deposit($event)">
         <span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
       </button>
diff --git a/src/app/submission/form/footer/submission-form-footer.component.spec.ts b/src/app/submission/form/footer/submission-form-footer.component.spec.ts
index 4c6d04c970..82bc309cc8 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.spec.ts
+++ b/src/app/submission/form/footer/submission-form-footer.component.spec.ts
@@ -25,6 +25,7 @@ import { of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { SubmissionRestService } from '../../../core/submission/submission-rest.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { mockSubmissionId } from '../../../shared/mocks/submission.mock';
 import { SubmissionRestServiceStub } from '../../../shared/testing/submission-rest-service.stub';
 import { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub';
@@ -51,6 +52,7 @@ describe('SubmissionFormFooterComponent', () => {
         TranslateModule.forRoot(),
         SubmissionFormFooterComponent,
         TestComponent,
+        BtnDisabledDirective,
       ],
       providers: [
         { provide: SubmissionService, useValue: submissionServiceStub },
@@ -227,7 +229,8 @@ describe('SubmissionFormFooterComponent', () => {
       fixture.detectChanges();
       const depositBtn: any = fixture.debugElement.query(By.css('.btn-success'));
 
-      expect(depositBtn.nativeElement.disabled).toBeFalsy();
+      expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+      expect(depositBtn.nativeElement.classList.contains('disabled')).toBeFalse();
     });
 
     it('should not have deposit button disabled when submission is valid', () => {
@@ -236,7 +239,8 @@ describe('SubmissionFormFooterComponent', () => {
       fixture.detectChanges();
       const depositBtn: any = fixture.debugElement.query(By.css('.btn-success'));
 
-      expect(depositBtn.nativeElement.disabled).toBeFalsy();
+      expect(depositBtn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+      expect(depositBtn.nativeElement.classList.contains('disabled')).toBeFalse();
     });
 
     it('should disable save button when all modifications had been saved', () => {
@@ -244,7 +248,8 @@ describe('SubmissionFormFooterComponent', () => {
       fixture.detectChanges();
 
       const saveBtn: any = fixture.debugElement.query(By.css('#save'));
-      expect(saveBtn.nativeElement.disabled).toBeTruthy();
+      expect(saveBtn.nativeElement.getAttribute('aria-disabled')).toBe('true');
+      expect(saveBtn.nativeElement.classList.contains('disabled')).toBeTrue();
     });
 
     it('should enable save button when there are not saved modifications', () => {
@@ -252,7 +257,8 @@ describe('SubmissionFormFooterComponent', () => {
       fixture.detectChanges();
 
       const saveBtn: any = fixture.debugElement.query(By.css('#save'));
-      expect(saveBtn.nativeElement.disabled).toBeFalsy();
+      expect(saveBtn.nativeElement.getAttribute('aria-disabled')).toBe('false');
+      expect(saveBtn.nativeElement.classList.contains('disabled')).toBeFalse();
     });
 
   });
diff --git a/src/app/submission/form/footer/submission-form-footer.component.ts b/src/app/submission/form/footer/submission-form-footer.component.ts
index 712a944a84..8645003783 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.ts
+++ b/src/app/submission/form/footer/submission-form-footer.component.ts
@@ -15,6 +15,7 @@ import { map } from 'rxjs/operators';
 
 import { SubmissionRestService } from '../../../core/submission/submission-rest.service';
 import { SubmissionScopeType } from '../../../core/submission/submission-scope-type';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
 import { SubmissionService } from '../../submission.service';
@@ -27,7 +28,7 @@ import { SubmissionService } from '../../submission.service';
   styleUrls: ['./submission-form-footer.component.scss'],
   templateUrl: './submission-form-footer.component.html',
   standalone: true,
-  imports: [CommonModule, BrowserOnlyPipe, TranslateModule],
+  imports: [CommonModule, BrowserOnlyPipe, TranslateModule, BtnDisabledDirective],
 })
 export class SubmissionFormFooterComponent implements OnChanges {
 
diff --git a/src/app/submission/form/section-add/submission-form-section-add.component.html b/src/app/submission/form/section-add/submission-form-section-add.component.html
index 0c7035c7f8..563044d270 100644
--- a/src/app/submission/form/section-add/submission-form-section-add.component.html
+++ b/src/app/submission/form/section-add/submission-form-section-add.component.html
@@ -6,7 +6,7 @@
   <ng-container *ngIf="hasSections$ | async">
   <button class="btn btn-outline-primary dropdown-toggle"
           id="sectionControls"
-          [disabled]="(hasSections$ | async) !== true"
+          [dsBtnDisabled]="(hasSections$ | async) !== true"
           [ngClass]="{'w-100': (windowService.isXs() | async)}"
           ngbDropdownToggle>
           {{ 'submission.sections.general.add-more' | translate }} <i class="fa fa-plus" aria-hidden="true"></i>
diff --git a/src/app/submission/form/section-add/submission-form-section-add.component.ts b/src/app/submission/form/section-add/submission-form-section-add.component.ts
index 4cf10e55d8..eeeda893f1 100644
--- a/src/app/submission/form/section-add/submission-form-section-add.component.ts
+++ b/src/app/submission/form/section-add/submission-form-section-add.component.ts
@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { HostWindowService } from '../../../shared/host-window.service';
 import { SectionDataObject } from '../../sections/models/section-data.model';
 import { SectionsService } from '../../sections/sections.service';
@@ -22,7 +23,7 @@ import { SubmissionService } from '../../submission.service';
   styleUrls: ['./submission-form-section-add.component.scss'],
   templateUrl: './submission-form-section-add.component.html',
   standalone: true,
-  imports: [CommonModule, TranslateModule, NgbDropdownModule],
+  imports: [CommonModule, TranslateModule, NgbDropdownModule, BtnDisabledDirective],
 })
 export class SubmissionFormSectionAddComponent implements OnInit {
 
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 7b5a2004d7..f5bde4e81a 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
@@ -23,6 +23,6 @@
         <div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
       </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>
+    <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''" [dsBtnDisabled]="searchString === ''" (click)="search()">{{'submission.import-external.search.button' | translate}}</button>
   </div>
 </div>
diff --git a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.ts b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.ts
index aace4de79a..eb7a703cc2 100644
--- a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.ts
+++ b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.ts
@@ -36,6 +36,7 @@ import {
   getFirstSucceededRemoteDataPayload,
 } from '../../../core/shared/operators';
 import { PageInfo } from '../../../core/shared/page-info.model';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { hasValue } from '../../../shared/empty.util';
 import { HostWindowService } from '../../../shared/host-window.service';
 import { createSuccessfulRemoteDataObject } from '../../../shared/remote-data.utils';
@@ -70,6 +71,7 @@ export interface ExternalSourceData {
     InfiniteScrollModule,
     NgbDropdownModule,
     FormsModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 0c8c1abeeb..a8d6ef3262 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
@@ -1,38 +1,39 @@
-<div class="mb-4 ccLicense-select">
-  <ds-select
-    [disabled]="!submissionCcLicenses">
+@if (submissionCcLicenses) {
+  <div class="mb-4 ccLicense-select">
+    <div ngbDropdown>
+      <input id="cc-license-dropdown"
+             class="form-control"
+             [(ngModel)]="selectedCcLicense.name"
+             placeholder="{{ !storedCcLicenseLink ? ('submission.sections.ccLicense.select' | translate) : ('submission.sections.ccLicense.change' | translate)}}"
+             [ngModelOptions]="{standalone: true}"
+             ngbDropdownToggle
+             role="combobox"
+             #script="ngModel">
+      <div ngbDropdownMenu aria-labelledby="cc-license-dropdown" class="w-100 scrollable-menu"
+           role="menu"
+           infiniteScroll
+           (scroll)="onScroll($event)"
+           [infiniteScrollDistance]="5"
+           [infiniteScrollThrottle]="300"
+           [infiniteScrollUpDistance]="1.5"
+           [fromRoot]="true"
+           [scrollWindow]="false">
 
-    <ng-container class="selection">
-      <span *ngIf="!submissionCcLicenses">
-        <ds-loading></ds-loading>
-      </span>
-      <span *ngIf="getSelectedCcLicense()">
-        {{ getSelectedCcLicense().name }}
-      </span>
-      <span *ngIf="submissionCcLicenses && !getSelectedCcLicense()">
-        <ng-container *ngIf="storedCcLicenseLink">
-          {{ 'submission.sections.ccLicense.change' | translate }}
-        </ng-container>
-        <ng-container *ngIf="!storedCcLicenseLink">
-          {{ 'submission.sections.ccLicense.select' | translate }}
-        </ng-container>
-      </span>
-    </ng-container>
-
-    <ng-container class="menu">
-      <button *ngIf="submissionCcLicenses?.length === 0"
-              class="dropdown-item disabled">
-        {{ 'submission.sections.ccLicense.none' | translate }}
-      </button>
-      <button *ngFor="let license of submissionCcLicenses"
-              class="dropdown-item"
-              (click)="selectCcLicense(license)">
-        {{ license.name }}
-      </button>
-    </ng-container>
-
-  </ds-select>
-</div>
+        @if(submissionCcLicenses?.length === 0) {
+          <button class="dropdown-item disabled">
+            {{ 'submission.sections.ccLicense.none' | translate }}
+          </button>
+        } @else {
+          @for(license of submissionCcLicenses; track license.id) {
+            <button class="dropdown-item" (click)="selectCcLicense(license)">
+              {{ license.name }}
+            </button>
+          }
+        }
+      </div>
+  </div>
+  </div>
+}
 
 <ng-container *ngIf="getSelectedCcLicense()">
 
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
index 62a902b79a..142cd82822 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
@@ -1,3 +1,13 @@
 .options-select-menu {
   max-height: 25vh;
 }
+
+.ccLicense-select {
+  width: fit-content;
+}
+
+.scrollable-menu {
+  height: auto;
+  max-height: var(--ds-dropdown-menu-max-height);
+  overflow-x: hidden;
+}
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
index 7b540ecd91..2e82948c14 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
@@ -209,10 +209,10 @@ describe('SubmissionSectionCcLicensesComponent', () => {
 
   it('should display a dropdown with the different cc licenses', () => {
     expect(
-      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(1)')).nativeElement.innerText,
+      de.query(By.css('.ccLicense-select .scrollable-menu button:nth-child(1)')).nativeElement.innerText,
     ).toContain('test license name 1');
     expect(
-      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(2)')).nativeElement.innerText,
+      de.query(By.css('.ccLicense-select .scrollable-menu button:nth-child(2)')).nativeElement.innerText,
     ).toContain('test license name 2');
   });
 
@@ -226,9 +226,7 @@ describe('SubmissionSectionCcLicensesComponent', () => {
     });
 
     it('should display the selected cc license', () => {
-      expect(
-        de.query(By.css('.ccLicense-select ds-select button.selection')).nativeElement.innerText,
-      ).toContain('test license name 2');
+      expect(component.selectedCcLicense.name).toContain('test license name 2');
     });
 
     it('should display all field labels of the selected cc license only', () => {
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
index d286a830e2..a633e640ab 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -4,14 +4,18 @@ import {
   NgIf,
 } from '@angular/common';
 import {
+  ChangeDetectorRef,
   Component,
   Inject,
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import {
+  NgbDropdownModule,
   NgbModal,
   NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import {
   Observable,
   of as observableOf,
@@ -22,14 +26,16 @@ import {
   filter,
   map,
   take,
+  tap,
 } from 'rxjs/operators';
 
 import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
+import { FindListOptions } from '../../../core/data/find-list-options.model';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
 import {
   getFirstCompletedRemoteData,
-  getFirstSucceededRemoteData,
+  getFirstSucceededRemoteDataPayload,
   getRemoteDataPayload,
 } from '../../../core/shared/operators';
 import {
@@ -40,6 +46,7 @@ import {
 import { WorkspaceitemSectionCcLicenseObject } from '../../../core/submission/models/workspaceitem-section-cc-license.model';
 import { SubmissionCcLicenseDataService } from '../../../core/submission/submission-cc-license-data.service';
 import { SubmissionCcLicenseUrlDataService } from '../../../core/submission/submission-cc-license-url-data.service';
+import { BtnDisabledDirective } from '../../../shared/btn-disabled.directive';
 import { DsSelectComponent } from '../../../shared/ds-select/ds-select.component';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { ThemedLoadingComponent } from '../../../shared/loading/themed-loading.component';
@@ -64,6 +71,10 @@ import { SectionsType } from '../sections-type';
     VarDirective,
     NgForOf,
     DsSelectComponent,
+    NgbDropdownModule,
+    FormsModule,
+    InfiniteScrollModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
@@ -95,7 +106,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
   /**
    * Cache of the available Creative Commons licenses.
    */
-  submissionCcLicenses: SubmissionCcLicence[];
+  submissionCcLicenses: SubmissionCcLicence[] = [];
 
   /**
    * Reference to NgbModal
@@ -107,6 +118,25 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    */
   defaultJurisdiction: string;
 
+  /**
+   * The currently selected cc licence
+   */
+  selectedCcLicense: SubmissionCcLicence = new SubmissionCcLicence();
+
+  /**
+   * Options for paginated data loading
+   */
+  ccLicenceOptions: FindListOptions = {
+    elementsPerPage: 20,
+    currentPage: 1,
+  };
+  /**
+   * Check to stop paginated search
+   *
+   * @private
+   */
+  private _isLastPage: boolean;
+
   /**
    * The Creative Commons link saved in the workspace item.
    */
@@ -131,6 +161,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
     protected submissionCcLicenseUrlDataService: SubmissionCcLicenseUrlDataService,
     protected operationsBuilder: JsonPatchOperationsBuilder,
     protected configService: ConfigurationDataService,
+    protected ref: ChangeDetectorRef,
     @Inject('collectionIdProvider') public injectedCollectionId: string,
     @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
     @Inject('submissionIdProvider') public injectedSubmissionId: string,
@@ -154,9 +185,10 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    * @param ccLicense the Creative Commons license to select.
    */
   selectCcLicense(ccLicense: SubmissionCcLicence) {
-    if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().id === ccLicense.id) {
+    if (this.selectedCcLicense.id === ccLicense.id) {
       return;
     }
+    this.selectedCcLicense = ccLicense;
     this.setAccepted(false);
     this.updateSectionData({
       ccLicense: {
@@ -300,13 +332,6 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         }
         this.sectionData.data = data;
       }),
-      this.submissionCcLicensesDataService.findAll({ elementsPerPage: 9999 }).pipe(
-        getFirstSucceededRemoteData(),
-        getRemoteDataPayload(),
-        map((list) => list.page),
-      ).subscribe(
-        (licenses) => this.submissionCcLicenses = licenses,
-      ),
       this.configService.findByPropertyName('cc.license.jurisdiction').pipe(
         getFirstCompletedRemoteData(),
         getRemoteDataPayload(),
@@ -319,6 +344,7 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         }
       }),
     );
+    this.loadCcLicences();
   }
 
   /**
@@ -338,4 +364,31 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
   updateSectionData(data: WorkspaceitemSectionCcLicenseObject) {
     this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, Object.assign({}, this.data, data));
   }
+
+  onScroll(event) {
+    if (event.target.scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
+      if (!this.isLoading && !this._isLastPage) {
+        this.ccLicenceOptions.currentPage++;
+        this.loadCcLicences();
+      }
+    }
+  }
+
+  loadCcLicences() {
+    this.isLoading = true;
+
+    this.subscriptions.push(
+      this.submissionCcLicensesDataService.findAll(this.ccLicenceOptions).pipe(
+        getFirstSucceededRemoteDataPayload(),
+        tap((response) => this._isLastPage = response.pageInfo.currentPage === response.pageInfo.totalPages),
+        map((list) => list.page),
+      ).subscribe(
+        (licenses) => {
+          this.submissionCcLicenses = [...this.submissionCcLicenses, ...licenses];
+          this.isLoading = false;
+          this.ref.detectChanges();
+        },
+      ),
+    );
+  }
 }
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 0cb79e51cb..b03504c6be 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,7 +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">
+    <button type="button" class="close" (click)="onModalClose()" aria-label="Close" [dsBtnDisabled]="isSaving">
       <span aria-hidden="true">×</span>
     </button>
   </div>
diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts
index 24488d1adb..79b3d3a565 100644
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts
@@ -38,6 +38,7 @@ import { JsonPatchOperationPathCombiner } from '../../../../../core/json-patch/b
 import { JsonPatchOperationsBuilder } from '../../../../../core/json-patch/builder/json-patch-operations-builder';
 import { WorkspaceitemSectionUploadFileObject } from '../../../../../core/submission/models/workspaceitem-section-upload-file.model';
 import { SubmissionJsonPatchOperationsService } from '../../../../../core/submission/submission-json-patch-operations.service';
+import { BtnDisabledDirective } from '../../../../../shared/btn-disabled.directive';
 import { dateToISOFormat } from '../../../../../shared/date.util';
 import {
   hasNoValue,
@@ -80,6 +81,7 @@ import {
     FormComponent,
     NgIf,
     TranslateModule,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 4698fdf68a..cd04542676 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
@@ -35,7 +35,7 @@
           <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
                   title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
-                  [disabled]="(processingDelete$ | async)"
+                  [dsBtnDisabled]="(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>
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.ts b/src/app/submission/sections/upload/file/section-upload-file.component.ts
index a0519f6c85..09ea3cb112 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.ts
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.ts
@@ -28,6 +28,7 @@ import { JsonPatchOperationsBuilder } from '../../../../core/json-patch/builder/
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { WorkspaceitemSectionUploadFileObject } from '../../../../core/submission/models/workspaceitem-section-upload-file.model';
 import { SubmissionJsonPatchOperationsService } from '../../../../core/submission/submission-json-patch-operations.service';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotUndefined,
@@ -54,6 +55,7 @@ import { SubmissionSectionUploadFileViewComponent } from './view/section-upload-
     AsyncPipe,
     ThemedFileDownloadLinkComponent,
     FileSizePipe,
+    BtnDisabledDirective,
   ],
   standalone: true,
 })
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 770f465a4b..dc2699b6d1 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
@@ -87,8 +87,8 @@
         <button (click)="back()" class="btn btn-outline-secondary">
             <i class="fas fa-arrow-left"></i> {{ 'system-wide-alert.form.cancel' | translate }}
         </button>
-        <button class="btn btn-primary" [disabled]="alertForm.invalid" (click)="save()">
+        <button class="btn btn-primary" [dsBtnDisabled]="alertForm.invalid" (click)="save()">
             <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/system-wide-alert/alert-form/system-wide-alert-form.component.ts b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts
index b30e864fa1..ea1c0a55f0 100644
--- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts
+++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.ts
@@ -43,6 +43,7 @@ import { RemoteData } from '../../core/data/remote-data';
 import { RequestService } from '../../core/data/request.service';
 import { SystemWideAlertDataService } from '../../core/data/system-wide-alert-data.service';
 import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { BtnDisabledDirective } from '../../shared/btn-disabled.directive';
 import {
   hasValue,
   isNotEmpty,
@@ -59,7 +60,7 @@ import { SystemWideAlert } from '../system-wide-alert.model';
   styleUrls: ['./system-wide-alert-form.component.scss'],
   templateUrl: './system-wide-alert-form.component.html',
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, UiSwitchModule, NgIf, NgbDatepickerModule, NgbTimepickerModule, AsyncPipe, TranslateModule],
+  imports: [FormsModule, ReactiveFormsModule, UiSwitchModule, NgIf, NgbDatepickerModule, NgbTimepickerModule, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 export class SystemWideAlertFormComponent implements OnInit {
 
diff --git a/src/app/thumbnail/thumbnail.component.spec.ts b/src/app/thumbnail/thumbnail.component.spec.ts
index 10e461112b..f81089e57c 100644
--- a/src/app/thumbnail/thumbnail.component.spec.ts
+++ b/src/app/thumbnail/thumbnail.component.spec.ts
@@ -2,6 +2,7 @@ import {
   DebugElement,
   Pipe,
   PipeTransform,
+  PLATFORM_ID,
 } from '@angular/core';
 import {
   ComponentFixture,
@@ -48,298 +49,261 @@ describe('ThumbnailComponent', () => {
   let authService;
   let authorizationService;
   let fileService;
+  let spy;
 
-  beforeEach(waitForAsync(() => {
-    authService = jasmine.createSpyObj('AuthService', {
-      isAuthenticated: observableOf(true),
-    });
-    authorizationService = jasmine.createSpyObj('AuthorizationService', {
-      isAuthorized: observableOf(true),
-    });
-    fileService = jasmine.createSpyObj('FileService', {
-      retrieveFileDownloadLink: null,
-    });
-    fileService.retrieveFileDownloadLink.and.callFake((url) => observableOf(`${url}?authentication-token=fake`));
-
-    TestBed.configureTestingModule({
-      imports: [
-        TranslateModule.forRoot(),
-        ThumbnailComponent,
-        SafeUrlPipe,
-        MockTranslatePipe,
-        VarDirective,
-      ],
-      providers: [
-        { provide: AuthService, useValue: authService },
-        { provide: AuthorizationDataService, useValue: authorizationService },
-        { provide: FileService, useValue: fileService },
-        { provide: ThemeService, useValue: getMockThemeService() },
-      ],
-    }).overrideComponent(ThumbnailComponent, {
-      add: {
-        imports: [MockTranslatePipe],
-      },
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ThumbnailComponent);
-    fixture.detectChanges();
-
-    authService = TestBed.inject(AuthService);
-
-    comp = fixture.componentInstance; // ThumbnailComponent test instance
-    de = fixture.debugElement.query(By.css('div.thumbnail'));
-    el = de.nativeElement;
-  });
-
-  describe('loading', () => {
-    it('should start out with isLoading$ true', () => {
-      expect(comp.isLoading).toBeTrue();
-    });
-
-    it('should set isLoading$ to false once an image is successfully loaded', () => {
-      comp.setSrc('http://bit.stream');
-      fixture.debugElement.query(By.css('img.thumbnail-content')).triggerEventHandler('load', new Event('load'));
-      expect(comp.isLoading).toBeFalse();
-    });
-
-    it('should set isLoading$ to false once the src is set to null', () => {
-      comp.setSrc(null);
-      expect(comp.isLoading).toBeFalse();
-    });
-
-    it('should show a loading animation while isLoading$ is true', () => {
-      expect(de.query(By.css('ds-loading'))).toBeTruthy();
-
-      comp.isLoading = false;
-      fixture.detectChanges();
-      expect(fixture.debugElement.query(By.css('ds-loading'))).toBeFalsy();
-    });
-
-    describe('with a thumbnail image', () => {
-      beforeEach(() => {
-        comp.src = 'https://bit.stream';
-        fixture.detectChanges();
+  describe('when platform is browser', () => {
+    beforeEach(waitForAsync(() => {
+      authService = jasmine.createSpyObj('AuthService', {
+        isAuthenticated: observableOf(true),
       });
-
-      it('should render but hide the image while loading and show it once done', () => {
-        let img = fixture.debugElement.query(By.css('img.thumbnail-content'));
-        expect(img).toBeTruthy();
-        expect(img.classes['d-none']).toBeTrue();
-
-        comp.isLoading = false;
-        fixture.detectChanges();
-        img = fixture.debugElement.query(By.css('img.thumbnail-content'));
-        expect(img).toBeTruthy();
-        expect(img.classes['d-none']).toBeFalsy();
+      authorizationService = jasmine.createSpyObj('AuthorizationService', {
+        isAuthorized: observableOf(true),
       });
-
-    });
-
-    describe('without a thumbnail image', () => {
-      beforeEach(() => {
-        comp.src = null;
-        fixture.detectChanges();
+      fileService = jasmine.createSpyObj('FileService', {
+        retrieveFileDownloadLink: null,
       });
+      fileService.retrieveFileDownloadLink.and.callFake((url) => observableOf(`${url}?authentication-token=fake`));
 
-      it('should only show the HTML placeholder once done loading', () => {
-        expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeFalsy();
-
-        comp.isLoading = false;
-        fixture.detectChanges();
-        expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeTruthy();
-      });
-    });
-
-  });
-
-  const errorHandler = () => {
-    let setSrcSpy;
+      TestBed.configureTestingModule({
+        imports: [
+          TranslateModule.forRoot(),
+          ThumbnailComponent,
+          SafeUrlPipe,
+          MockTranslatePipe,
+          VarDirective,
+        ],
+        providers: [
+          { provide: AuthService, useValue: authService },
+          { provide: AuthorizationDataService, useValue: authorizationService },
+          { provide: FileService, useValue: fileService },
+          { provide: ThemeService, useValue: getMockThemeService() },
+          { provide: PLATFORM_ID, useValue: 'browser' },
+        ],
+      }).overrideComponent(ThumbnailComponent, {
+        add: {
+          imports: [MockTranslatePipe],
+        },
+      })
+        .compileComponents();
+    }));
 
     beforeEach(() => {
-      // disconnect error handler to be sure it's only called once
-      const img = fixture.debugElement.query(By.css('img.thumbnail-content'));
-      img.nativeNode.onerror = null;
+      fixture = TestBed.createComponent(ThumbnailComponent);
+      fixture.detectChanges();
 
-      comp.ngOnChanges({});
-      setSrcSpy = spyOn(comp, 'setSrc').and.callThrough();
+      authService = TestBed.inject(AuthService);
+
+      comp = fixture.componentInstance; // ThumbnailComponent test instance
+      de = fixture.debugElement.query(By.css('div.thumbnail'));
+      el = de.nativeElement;
     });
 
-    describe('retry with authentication token', () => {
-      it('should remember that it already retried once', () => {
-        expect(comp.retriedWithToken).toBeFalse();
-        comp.errorHandler();
-        expect(comp.retriedWithToken).toBeTrue();
+    describe('loading', () => {
+      it('should start out with isLoading$ true', () => {
+        expect(comp.isLoading).toBeTrue();
       });
 
-      describe('if not logged in', () => {
+      it('should set isLoading$ to false once an image is successfully loaded', () => {
+        comp.setSrc('http://bit.stream');
+        fixture.debugElement.query(By.css('img.thumbnail-content')).triggerEventHandler('load', new Event('load'));
+        expect(comp.isLoading).toBeFalse();
+      });
+
+      it('should set isLoading$ to false once the src is set to null', () => {
+        comp.setSrc(null);
+        expect(comp.isLoading).toBeFalse();
+      });
+
+      it('should show a loading animation while isLoading$ is true', () => {
+        expect(de.query(By.css('ds-loading'))).toBeTruthy();
+
+        comp.isLoading = false;
+        fixture.detectChanges();
+        expect(fixture.debugElement.query(By.css('ds-loading'))).toBeFalsy();
+      });
+
+      describe('with a thumbnail image', () => {
         beforeEach(() => {
-          authService.isAuthenticated.and.returnValue(observableOf(false));
+          comp.src = 'https://bit.stream';
+          fixture.detectChanges();
         });
 
-        it('should fall back to default', () => {
+        it('should render but hide the image while loading and show it once done', () => {
+          let img = fixture.debugElement.query(By.css('img.thumbnail-content'));
+          expect(img).toBeTruthy();
+          expect(img.classes['d-none']).toBeTrue();
+
+          comp.isLoading = false;
+          fixture.detectChanges();
+          img = fixture.debugElement.query(By.css('img.thumbnail-content'));
+          expect(img).toBeTruthy();
+          expect(img.classes['d-none']).toBeFalsy();
+        });
+
+      });
+
+      describe('without a thumbnail image', () => {
+        beforeEach(() => {
+          comp.src = null;
+          fixture.detectChanges();
+        });
+
+        it('should only show the HTML placeholder once done loading', () => {
+          expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeFalsy();
+
+          comp.isLoading = false;
+          fixture.detectChanges();
+          expect(fixture.debugElement.query(By.css('div.thumbnail-placeholder'))).toBeTruthy();
+        });
+      });
+
+    });
+
+    const errorHandler = () => {
+      let setSrcSpy;
+
+      beforeEach(() => {
+        // disconnect error handler to be sure it's only called once
+        const img = fixture.debugElement.query(By.css('img.thumbnail-content'));
+        img.nativeNode.onerror = null;
+
+        comp.ngOnChanges({});
+        setSrcSpy = spyOn(comp, 'setSrc').and.callThrough();
+      });
+
+      describe('retry with authentication token', () => {
+        it('should remember that it already retried once', () => {
+          expect(comp.retriedWithToken).toBeFalse();
           comp.errorHandler();
-          expect(setSrcSpy).toHaveBeenCalledWith(comp.defaultImage);
-        });
-      });
-
-      describe('if logged in', () => {
-        beforeEach(() => {
-          authService.isAuthenticated.and.returnValue(observableOf(true));
+          expect(comp.retriedWithToken).toBeTrue();
         });
 
-        describe('and authorized to download the thumbnail', () => {
+        describe('if not logged in', () => {
           beforeEach(() => {
-            authorizationService.isAuthorized.and.returnValue(observableOf(true));
-          });
-
-          it('should add an authentication token to the thumbnail URL', () => {
-            comp.errorHandler();
-
-            if ((comp.thumbnail as RemoteData<Bitstream>)?.hasFailed) {
-              // If we failed to retrieve the Bitstream in the first place, fall back to the default
-              expect(setSrcSpy).toHaveBeenCalledWith(comp.defaultImage);
-            } else {
-              expect(setSrcSpy).toHaveBeenCalledWith(CONTENT + '?authentication-token=fake');
-            }
-          });
-        });
-
-        describe('but not authorized to download the thumbnail', () => {
-          beforeEach(() => {
-            authorizationService.isAuthorized.and.returnValue(observableOf(false));
+            authService.isAuthenticated.and.returnValue(observableOf(false));
           });
 
           it('should fall back to default', () => {
             comp.errorHandler();
-
             expect(setSrcSpy).toHaveBeenCalledWith(comp.defaultImage);
-
-            // We don't need to check authorization if we failed to retrieve the Bitstreamin the first place
-            if (!(comp.thumbnail as RemoteData<Bitstream>)?.hasFailed) {
-              expect(authorizationService.isAuthorized).toHaveBeenCalled();
-            }
           });
         });
+
+        describe('if logged in', () => {
+          beforeEach(() => {
+            authService.isAuthenticated.and.returnValue(observableOf(true));
+          });
+
+          describe('and authorized to download the thumbnail', () => {
+            beforeEach(() => {
+              authorizationService.isAuthorized.and.returnValue(observableOf(true));
+            });
+
+            it('should add an authentication token to the thumbnail URL', () => {
+              comp.errorHandler();
+
+              if ((comp.thumbnail as RemoteData<Bitstream>)?.hasFailed) {
+                // If we failed to retrieve the Bitstream in the first place, fall back to the default
+                expect(setSrcSpy).toHaveBeenCalledWith(comp.defaultImage);
+              } else {
+                expect(setSrcSpy).toHaveBeenCalledWith(CONTENT + '?authentication-token=fake');
+              }
+            });
+          });
+
+          describe('but not authorized to download the thumbnail', () => {
+            beforeEach(() => {
+              authorizationService.isAuthorized.and.returnValue(observableOf(false));
+            });
+
+            it('should fall back to default', () => {
+              comp.errorHandler();
+
+              expect(setSrcSpy).toHaveBeenCalledWith(comp.defaultImage);
+
+              // We don't need to check authorization if we failed to retrieve the Bitstreamin the first place
+              if (!(comp.thumbnail as RemoteData<Bitstream>)?.hasFailed) {
+                expect(authorizationService.isAuthorized).toHaveBeenCalled();
+              }
+            });
+          });
+        });
+      });
+
+      describe('after retrying with token', () => {
+        beforeEach(() => {
+          comp.retriedWithToken = true;
+        });
+
+        it('should fall back to default', () => {
+          comp.errorHandler();
+          expect(authService.isAuthenticated).not.toHaveBeenCalled();
+          expect(fileService.retrieveFileDownloadLink).not.toHaveBeenCalled();
+          expect(setSrcSpy).toHaveBeenCalledWith(comp.defaultImage);
+        });
+      });
+    };
+
+    describe('fallback', () => {
+      describe('if there is a default image', () => {
+        it('should display the default image', () => {
+          comp.src = 'http://bit.stream';
+          comp.defaultImage = 'http://default.img';
+          comp.errorHandler();
+          expect(comp.src).toBe(comp.defaultImage);
+        });
+
+        it('should include the alt text', () => {
+          comp.src = 'http://bit.stream';
+          comp.defaultImage = 'http://default.img';
+          comp.errorHandler();
+
+          fixture.detectChanges();
+          const image: HTMLElement = fixture.debugElement.query(By.css('img')).nativeElement;
+          expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
+        });
+      });
+
+      describe('if there is no default image', () => {
+        it('should display the HTML placeholder', () => {
+          comp.src = 'http://default.img';
+          comp.defaultImage = null;
+          comp.errorHandler();
+          expect(comp.src).toBe(null);
+
+          fixture.detectChanges();
+          const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
+          expect(placeholder.innerHTML).toContain('TRANSLATED ' + comp.placeholder);
+        });
       });
     });
 
-    describe('after retrying with token', () => {
+    describe('with thumbnail as Bitstream', () => {
+      let thumbnail;
       beforeEach(() => {
-        comp.retriedWithToken = true;
-      });
-
-      it('should fall back to default', () => {
-        comp.errorHandler();
-        expect(authService.isAuthenticated).not.toHaveBeenCalled();
-        expect(fileService.retrieveFileDownloadLink).not.toHaveBeenCalled();
-        expect(setSrcSpy).toHaveBeenCalledWith(comp.defaultImage);
-      });
-    });
-  };
-
-  describe('fallback', () => {
-    describe('if there is a default image', () => {
-      it('should display the default image', () => {
-        comp.src = 'http://bit.stream';
-        comp.defaultImage = 'http://default.img';
-        comp.errorHandler();
-        expect(comp.src).toBe(comp.defaultImage);
-      });
-
-      it('should include the alt text', () => {
-        comp.src = 'http://bit.stream';
-        comp.defaultImage = 'http://default.img';
-        comp.errorHandler();
-
-        fixture.detectChanges();
-        const image: HTMLElement = fixture.debugElement.query(By.css('img')).nativeElement;
-        expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
-      });
-    });
-
-    describe('if there is no default image', () => {
-      it('should display the HTML placeholder', () => {
-        comp.src = 'http://default.img';
-        comp.defaultImage = null;
-        comp.errorHandler();
-        expect(comp.src).toBe(null);
-
-        fixture.detectChanges();
-        const placeholder = fixture.debugElement.query(By.css('div.thumbnail-placeholder')).nativeElement;
-        expect(placeholder.innerHTML).toContain('TRANSLATED ' + comp.placeholder);
-      });
-    });
-  });
-
-  describe('with thumbnail as Bitstream', () => {
-    let thumbnail;
-    beforeEach(() => {
-      thumbnail = new Bitstream();
-      thumbnail._links = {
-        self: { href: 'self.url' },
-        bundle: { href: 'bundle.url' },
-        format: { href: 'format.url' },
-        content: { href: CONTENT },
-        thumbnail: undefined,
-      };
-      comp.thumbnail = thumbnail;
-    });
-
-    describe('if content can be loaded', () => {
-      it('should display an image', () => {
-        comp.ngOnChanges({});
-        fixture.detectChanges();
-        const image: HTMLElement = fixture.debugElement.query(By.css('img')).nativeElement;
-        expect(image.getAttribute('src')).toBe(thumbnail._links.content.href);
-      });
-
-      it('should include the alt text', () => {
-        comp.ngOnChanges({});
-        fixture.detectChanges();
-        const image: HTMLElement = fixture.debugElement.query(By.css('img')).nativeElement;
-        expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
-      });
-    });
-
-    describe('if content can\'t be loaded', () => {
-      errorHandler();
-    });
-  });
-
-  describe('with thumbnail as RemoteData<Bitstream>', () => {
-    let thumbnail: Bitstream;
-
-    beforeEach(() => {
-      thumbnail = new Bitstream();
-      thumbnail._links = {
-        self: { href: 'self.url' },
-        bundle: { href: 'bundle.url' },
-        format: { href: 'format.url' },
-        content: { href: CONTENT },
-        thumbnail: undefined,
-      };
-    });
-
-    describe('if RemoteData succeeded', () => {
-      beforeEach(() => {
-        comp.thumbnail = createSuccessfulRemoteDataObject(thumbnail);
+        thumbnail = new Bitstream();
+        thumbnail._links = {
+          self: { href: 'self.url' },
+          bundle: { href: 'bundle.url' },
+          format: { href: 'format.url' },
+          content: { href: CONTENT },
+          thumbnail: undefined,
+        };
+        comp.thumbnail = thumbnail;
       });
 
       describe('if content can be loaded', () => {
         it('should display an image', () => {
           comp.ngOnChanges({});
           fixture.detectChanges();
-          const image: HTMLElement = de.query(By.css('img')).nativeElement;
+          const image: HTMLElement = fixture.debugElement.query(By.css('img')).nativeElement;
           expect(image.getAttribute('src')).toBe(thumbnail._links.content.href);
         });
 
-        it('should display the alt text', () => {
+        it('should include the alt text', () => {
           comp.ngOnChanges({});
           fixture.detectChanges();
-          const image: HTMLElement = de.query(By.css('img')).nativeElement;
+          const image: HTMLElement = fixture.debugElement.query(By.css('img')).nativeElement;
           expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
         });
       });
@@ -349,16 +313,117 @@ describe('ThumbnailComponent', () => {
       });
     });
 
-    describe('if RemoteData failed', () => {
+    describe('with thumbnail as RemoteData<Bitstream>', () => {
+      let thumbnail: Bitstream;
+
       beforeEach(() => {
-        comp.thumbnail = createFailedRemoteDataObject();
+        thumbnail = new Bitstream();
+        thumbnail._links = {
+          self: { href: 'self.url' },
+          bundle: { href: 'bundle.url' },
+          format: { href: 'format.url' },
+          content: { href: CONTENT },
+          thumbnail: undefined,
+        };
       });
 
-      it('should show the default image', () => {
-        comp.defaultImage = 'default/image.jpg';
-        comp.ngOnChanges({});
-        expect(comp.src).toBe('default/image.jpg');
+      describe('if RemoteData succeeded', () => {
+        beforeEach(() => {
+          comp.thumbnail = createSuccessfulRemoteDataObject(thumbnail);
+        });
+
+        describe('if content can be loaded', () => {
+          it('should display an image', () => {
+            comp.ngOnChanges({});
+            fixture.detectChanges();
+            const image: HTMLElement = de.query(By.css('img')).nativeElement;
+            expect(image.getAttribute('src')).toBe(thumbnail._links.content.href);
+          });
+
+          it('should display the alt text', () => {
+            comp.ngOnChanges({});
+            fixture.detectChanges();
+            const image: HTMLElement = de.query(By.css('img')).nativeElement;
+            expect(image.getAttribute('alt')).toBe('TRANSLATED ' + comp.alt);
+          });
+        });
+
+        describe('if content can\'t be loaded', () => {
+          errorHandler();
+        });
+      });
+
+      describe('if RemoteData failed', () => {
+        beforeEach(() => {
+          comp.thumbnail = createFailedRemoteDataObject();
+        });
+
+        it('should show the default image', () => {
+          comp.defaultImage = 'default/image.jpg';
+          comp.ngOnChanges({});
+          expect(comp.src).toBe('default/image.jpg');
+        });
       });
     });
   });
+
+  describe('when platform is server', () => {
+    beforeEach(waitForAsync(() => {
+
+      authService = jasmine.createSpyObj('AuthService', {
+        isAuthenticated: observableOf(true),
+      });
+      authorizationService = jasmine.createSpyObj('AuthorizationService', {
+        isAuthorized: observableOf(true),
+      });
+      fileService = jasmine.createSpyObj('FileService', {
+        retrieveFileDownloadLink: null,
+      });
+      fileService.retrieveFileDownloadLink.and.callFake((url) => observableOf(`${url}?authentication-token=fake`));
+
+      TestBed.configureTestingModule({
+        imports: [
+          TranslateModule.forRoot(),
+          ThumbnailComponent,
+          SafeUrlPipe,
+          MockTranslatePipe,
+          VarDirective,
+        ],
+        providers: [
+          { provide: AuthService, useValue: authService },
+          { provide: AuthorizationDataService, useValue: authorizationService },
+          { provide: FileService, useValue: fileService },
+          { provide: ThemeService, useValue: getMockThemeService() },
+          { provide: PLATFORM_ID, useValue: 'server' },
+        ],
+      }).overrideComponent(ThumbnailComponent, {
+        add: {
+          imports: [MockTranslatePipe],
+        },
+      })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(ThumbnailComponent);
+      spyOn(fixture.componentInstance, 'setSrc').and.callThrough();
+      fixture.detectChanges();
+
+      authService = TestBed.inject(AuthService);
+
+      comp = fixture.componentInstance; // ThumbnailComponent test instance
+      de = fixture.debugElement.query(By.css('div.thumbnail'));
+      el = de.nativeElement;
+    });
+
+    it('should start out with isLoading$ true', () => {
+      expect(comp.isLoading).toBeTrue();
+      expect(de.query(By.css('ds-loading'))).toBeTruthy();
+    });
+
+    it('should not call setSrc', () => {
+      expect(comp.setSrc).not.toHaveBeenCalled();
+    });
+
+  });
 });
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index cc583c3998..7b22dde4cd 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -1,8 +1,13 @@
-import { CommonModule } from '@angular/common';
+import {
+  CommonModule,
+  isPlatformBrowser,
+} from '@angular/common';
 import {
   Component,
+  Inject,
   Input,
   OnChanges,
+  PLATFORM_ID,
   SimpleChanges,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -76,6 +81,7 @@ export class ThumbnailComponent implements OnChanges {
   isLoading = true;
 
   constructor(
+    @Inject(PLATFORM_ID) private platformID: any,
     protected auth: AuthService,
     protected authorizationService: AuthorizationDataService,
     protected fileService: FileService,
@@ -87,16 +93,18 @@ export class ThumbnailComponent implements OnChanges {
    * Use a default image if no actual image is available.
    */
   ngOnChanges(changes: SimpleChanges): void {
-    if (hasNoValue(this.thumbnail)) {
-      this.setSrc(this.defaultImage);
-      return;
-    }
+    if (isPlatformBrowser(this.platformID)) {
+      if (hasNoValue(this.thumbnail)) {
+        this.setSrc(this.defaultImage);
+        return;
+      }
 
-    const src = this.contentHref;
-    if (hasValue(src)) {
-      this.setSrc(src);
-    } else {
-      this.setSrc(this.defaultImage);
+      const src = this.contentHref;
+      if (hasValue(src)) {
+        this.setSrc(src);
+      } else {
+        this.setSrc(this.defaultImage);
+      }
     }
   }
 
diff --git a/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-select-reviewer/reviewers-list/reviewers-list.component.ts b/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-select-reviewer/reviewers-list/reviewers-list.component.ts
index 5ae3a13f31..c43fabdb83 100644
--- a/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-select-reviewer/reviewers-list/reviewers-list.component.ts
+++ b/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-select-reviewer/reviewers-list/reviewers-list.component.ts
@@ -44,6 +44,7 @@ import { EpersonDtoModel } from '../../../../core/eperson/models/eperson-dto.mod
 import { Group } from '../../../../core/eperson/models/group.model';
 import { PaginationService } from '../../../../core/pagination/pagination.service';
 import { getFirstSucceededRemoteDataPayload } from '../../../../core/shared/operators';
+import { BtnDisabledDirective } from '../../../../shared/btn-disabled.directive';
 import { ContextHelpDirective } from '../../../../shared/context-help.directive';
 import { hasValue } from '../../../../shared/empty.util';
 import { NotificationsService } from '../../../../shared/notifications/notifications.service';
@@ -76,6 +77,7 @@ enum SubKey {
     RouterLink,
     NgClass,
     NgForOf,
+    BtnDisabledDirective,
   ],
 })
 export class ReviewersListComponent extends MembersListComponent implements OnInit, OnChanges, OnDestroy {
diff --git a/src/assets/i18n/de.json5 b/src/assets/i18n/de.json5
index 041bf02374..9fd318e5e5 100644
--- a/src/assets/i18n/de.json5
+++ b/src/assets/i18n/de.json5
@@ -724,11 +724,6 @@
   // TODO New key - Add a translation
   "admin.reports.collections.match_all_selected_filters": "Matching all selected filters",
 
-
-  //"admin.reports.items.title": "Metadata Query Report",
-  // TODO New key - Add a translation
-  "admin.reports.items.title": "Metadata Query Report",
-
   //"admin.reports.items.breadcrumbs": "Metadata Query Report",
   // TODO New key - Add a translation
   "admin.reports.items.breadcrumbs": "Metadata Query Report",
@@ -881,7 +876,6 @@
   // TODO New key - Add a translation
   "admin.reports.items.title": "Title",
 
-
   //"admin.reports.commons.filters": "Filters",
   // TODO New key - Add a translation
   "admin.reports.commons.filters": "Filters",
@@ -5998,4 +5992,14 @@
 
   // "workspace-item.delete.notification.error.content": "The workspace item could not be deleted",
   "workspace-item.delete.notification.error.content": "Das Workspace-Item konnte nicht gelöscht werden.",
+
+
+  // "form.date-picker.placeholder.year": "Year",
+  "form.date-picker.placeholder.year": "Jahr",
+
+  // "form.date-picker.placeholder.month": "Month",
+  "form.date-picker.placeholder.month": "Monat",
+
+  // "form.date-picker.placeholder.day": "Day",
+  "form.date-picker.placeholder.day": "Tag",
 }
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 810095f14c..505bd75791 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1696,6 +1696,8 @@
 
   "deny-request-copy.success": "Successfully denied item request",
 
+  "dynamic-list.load-more": "Load more",
+
   "dropdown.clear": "Clear selection",
 
   "dropdown.clear.tooltip": "Clear the selected option",
@@ -2342,6 +2344,8 @@
 
   "item.edit.bitstreams.upload-button": "Upload",
 
+  "item.edit.bitstreams.load-more.link": "Load more",
+
   "item.edit.delete.cancel": "Cancel",
 
   "item.edit.delete.confirm": "Delete",
@@ -5708,8 +5712,6 @@
 
   "supervision.search.results.head": "Workflow and Workspace tasks",
 
-  "orgunit.search.results.head": "Organizational Unit Search Results",
-
   "workflow-item.edit.breadcrumbs": "Edit workflowitem",
 
   "workflow-item.edit.title": "Edit workflowitem",
@@ -6054,6 +6056,10 @@
 
   "person.orcid.registry.auth": "ORCID Authorizations",
 
+  "person.orcid-tooltip.authenticated": "{{orcid}}",
+
+  "person.orcid-tooltip.not-authenticated": "{{orcid}} (unconfirmed)",
+
   "home.recent-submissions.head": "Recent Submissions",
 
   "listable-notification-object.default-message": "This object couldn't be retrieved",
@@ -6808,6 +6814,12 @@
 
   "search.filters.filter.notifyEndorsement.label": "Search Notify Endorsement",
 
+  "form.date-picker.placeholder.year": "Year",
+
+  "form.date-picker.placeholder.month": "Month",
+
+  "form.date-picker.placeholder.day": "Day",
+
   "item.page.cc.license.title": "Creative Commons license",
 
   "item.page.cc.license.disclaimer": "Except where otherwised noted, this item's license is described as",
@@ -6819,4 +6831,16 @@
   "register-page.registration.aria.label": "Enter your e-mail address",
 
   "forgot-email.form.aria.label": "Enter your e-mail address",
+
+  "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
+
+  "live-region.ordering.instructions": "Press spacebar to reorder {{ itemName }}.",
+
+  "live-region.ordering.status": "{{ itemName }}, grabbed. Current position in list: {{ index }} of  {{ length }}. Press up and down arrow keys to change position, SpaceBar to drop, Escape to cancel.",
+
+  "live-region.ordering.moved": "{{ itemName }}, moved to position {{ index }} of {{ length }}. Press up and down arrow keys to change position, SpaceBar to drop, Escape to cancel.",
+
+  "live-region.ordering.dropped": "{{ itemName }}, dropped at position {{ index }} of {{ length }}.",
+
+  "dynamic-form-array.sortable-list.label": "Sortable list",
 }
diff --git a/src/assets/i18n/es.json5 b/src/assets/i18n/es.json5
index 75677ee18e..7130d6d468 100644
--- a/src/assets/i18n/es.json5
+++ b/src/assets/i18n/es.json5
@@ -10201,5 +10201,6 @@
   // "forgot-email.form.aria.label": "Enter your e-mail address",
   "forgot-email.form.aria.label": "Introduzca su dirección de correo electrónico",
 
-
-}
\ No newline at end of file
+  // "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
+  "search-facet-option.update.announcement": "La página será recargada. Filtro {{ filter }} seleccionado.",
+}
diff --git a/src/assets/i18n/fr.json5 b/src/assets/i18n/fr.json5
index bee30294a9..ea45f5b2fe 100644
--- a/src/assets/i18n/fr.json5
+++ b/src/assets/i18n/fr.json5
@@ -4521,6 +4521,27 @@
   // "process.detail.back": "Back",
   "process.detail.back": "Retour",
 
+  //"process.detail.delete.body": "Are you sure you want to delete the current process?",
+  "process.detail.delete.body": "Êtes-vous sûr de vouloir supprimer ce processus?",
+
+  //"process.detail.delete.button": "Delete process",
+  "process.detail.delete.button": "Supprimer le processus",
+
+  //"process.detail.delete.cancel": "Cancel",
+  "process.detail.delete.cancel": "Annuler",
+
+  //"process.detail.delete.confirm": "Delete process",
+  "process.detail.delete.confirm": "Supprimer le processus",
+
+  //"process.detail.delete.error": "Something went wrong when deleting the process",
+  "process.detail.delete.error": "Une erreur s'est produite lors de la suppression du processus",
+
+  //"process.detail.delete.header": "Delete process",
+  "process.detail.delete.header": "Supprimer un processus",
+
+  //"process.detail.delete.success": "The process was successfully deleted.",
+  "process.detail.delete.success": "Le processus a bien été supprimé.",
+
   // "process.detail.output": "Process Output",
   "process.detail.output": "Sortie du processus",
 
@@ -4539,6 +4560,9 @@
   // "process.detail.output-files.empty": "This process doesn't contain any output files",
   "process.detail.output-files.empty": "Ce processus ne contient pas de fichiers de sortie",
 
+  //"process.detail.refreshing": "Auto-refreshing…",
+  "process.detail.refreshing": "Actualisation automatique...",
+
   // "process.detail.script": "Script",
   "process.detail.script": "Script",
 
@@ -6113,6 +6137,24 @@
   // "submission.sections.general.sections_not_valid": "There are incomplete sections.",
   "submission.sections.general.sections_not_valid": "Sections incomplètes.",
 
+  //"submission.sections.identifiers.info": "The following identifiers will be created for your item:",
+  "submission.sections.identifiers.info": "Les identifiants uniques suivants seront attribués à votre document :",
+
+  //"submission.sections.identifiers.no_handle": "No handles have been minted for this item.",
+  "submission.sections.identifiers.no_handle": "Aucun handle n'a été crée pour ce document.",
+
+  //"submission.sections.identifiers.no_doi": "No DOIs have been minted for this item.",
+  "submission.sections.identifiers.no_doi": "Aucun DOI n'a été créé pour ce document.",
+
+  //"submission.sections.identifiers.handle_label": "Handle: ",
+  "submission.sections.identifiers.handle_label": "Handle : ",
+
+  //"submission.sections.identifiers.doi_label": "DOI: ",
+  "submission.sections.identifiers.doi_label": "DOI : ",
+
+  //"submission.sections.identifiers.otherIdentifiers_label": "Other identifiers: ",
+  "submission.sections.identifiers.otherIdentifiers_label": "Autres identifiants : ",
+
   // "submission.sections.submit.progressbar.accessCondition": "Item access conditions",
   "submission.sections.submit.progressbar.accessCondition": "Autorisations d'accès à l'Item",
 
@@ -6134,6 +6176,9 @@
   // "submission.sections.submit.progressbar.detect-duplicate": "Potential duplicates",
   "submission.sections.submit.progressbar.detect-duplicate": "Doublon(s) potentiel(s)",
 
+  //"submission.sections.submit.progressbar.identifiers": "Identifiers",
+  "submission.sections.submit.progressbar.identifiers": "Identifiants",
+
   // "submission.sections.submit.progressbar.license": "Deposit license",
   "submission.sections.submit.progressbar.license": "Licence du dépôt",
 
diff --git a/src/assets/i18n/pt-BR.json5 b/src/assets/i18n/pt-BR.json5
index 2a326cf181..300b4e370e 100644
--- a/src/assets/i18n/pt-BR.json5
+++ b/src/assets/i18n/pt-BR.json5
@@ -10258,4 +10258,7 @@
 
   // "forgot-email.form.aria.label": "Enter your e-mail address",
   "forgot-email.form.aria.label": "Digite seu e-mail",
+
+  // "search-facet-option.update.announcement": "The page will be reloaded. Filter {{ filter }} is selected.",
+  "search-facet-option.update.announcement": "A página será recarregada. O filtro {{ filter }} foi selecionado.",
 }
diff --git a/src/config/config.server.ts b/src/config/config.server.ts
index 69825b6409..3cbce3a42b 100644
--- a/src/config/config.server.ts
+++ b/src/config/config.server.ts
@@ -236,6 +236,7 @@ export const buildAppConfig = (destConfigPath?: string): AppConfig => {
   appConfig.rest.port = isNotEmpty(ENV('REST_PORT', true)) ? getNumberFromString(ENV('REST_PORT', true)) : appConfig.rest.port;
   appConfig.rest.nameSpace = isNotEmpty(ENV('REST_NAMESPACE', true)) ? ENV('REST_NAMESPACE', true) : appConfig.rest.nameSpace;
   appConfig.rest.ssl = isNotEmpty(ENV('REST_SSL', true)) ? getBooleanFromString(ENV('REST_SSL', true)) : appConfig.rest.ssl;
+  appConfig.rest.ssrBaseUrl = isNotEmpty(ENV('REST_SSRBASEURL', true)) ? ENV('REST_SSRBASEURL', true) : appConfig.rest.ssrBaseUrl;
 
   // apply build defined production
   appConfig.production = env === 'production';
diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts
index a93bd3a80b..3051740216 100644
--- a/src/config/default-app-config.ts
+++ b/src/config/default-app-config.ts
@@ -517,6 +517,7 @@ export class DefaultAppConfig implements AppConfig {
       enabled: false,
       filter: ['title', 'author', 'subject', 'entityType'],
     },
+    filterPlaceholdersCount: 5,
   };
 
   notifyMetrics: AdminNotifyMetricsRow[] = [
diff --git a/src/config/search-page-config.interface.ts b/src/config/search-page-config.interface.ts
index 699e3fd61f..55733c98e4 100644
--- a/src/config/search-page-config.interface.ts
+++ b/src/config/search-page-config.interface.ts
@@ -8,5 +8,11 @@ export interface SearchConfig extends Config {
      * Used by {@link UploadBitstreamComponent}.
      */
     advancedFilters: AdvancedSearchConfig;
-
+    /**
+     * Number used to render n UI elements called loading skeletons that act as placeholders.
+     * These elements indicate that some content will be loaded in their stead.
+     * Since we don't know how many filters will be loaded before we receive a response from the server we use this parameter for the skeletons count.
+     * For instance if we set 5 then 5 loading skeletons will be visualized before the actual filters are retrieved.
+     */
+    filterPlaceholdersCount?: number;
 }
diff --git a/src/config/server-config.interface.ts b/src/config/server-config.interface.ts
index 8797ea3d60..ad9fa0868a 100644
--- a/src/config/server-config.interface.ts
+++ b/src/config/server-config.interface.ts
@@ -6,4 +6,8 @@ export class ServerConfig implements Config {
   public port: number;
   public nameSpace: string;
   public baseUrl?: string;
+  public ssrBaseUrl?: string;
+  // This boolean will be automatically set on server startup based on whether "baseUrl" and "ssrBaseUrl"
+  // have different values.
+  public hasSsrBaseUrl?: boolean;
 }
diff --git a/src/config/ssr-config.interface.ts b/src/config/ssr-config.interface.ts
index 37b8b4a0d2..2ce626b47b 100644
--- a/src/config/ssr-config.interface.ts
+++ b/src/config/ssr-config.interface.ts
@@ -20,4 +20,36 @@ export interface SSRConfig extends Config {
    * For improved SSR performance, DSpace defaults this to false (disabled).
    */
   inlineCriticalCss: boolean;
+
+  /**
+   * Enable state transfer from the server-side application to the client-side application.
+   * Defaults to true.
+   *
+   * Note: When using an external application cache layer, it's recommended not to transfer the state to avoid caching it.
+   * Disabling it ensures that dynamic state information is not inadvertently cached, which can improve security and
+   * ensure that users always use the most up-to-date state.
+   */
+  transferState: boolean;
+
+  /**
+   * When a different REST base URL is used for the server-side application, the generated state contains references to
+   * REST resources with the internal URL configured. By default, these internal URLs are replaced with public URLs.
+   * Disable this setting to avoid URL replacement during SSR. In this the state is not transferred to avoid security issues.
+   */
+  replaceRestUrl: boolean;
+
+  /**
+   * Paths to enable SSR for. Defaults to the home page and paths in the sitemap.
+   */
+  paths: Array<string>;
+
+  /**
+   * Whether to enable rendering of search component on SSR
+   */
+  enableSearchComponent: boolean;
+
+  /**
+   * Whether to enable rendering of browse component on SSR
+   */
+  enableBrowseComponent: boolean;
 }
diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts
index 90b219cdbd..9bd663922c 100644
--- a/src/environments/environment.production.ts
+++ b/src/environments/environment.production.ts
@@ -8,5 +8,10 @@ export const environment: Partial<BuildConfig> = {
     enabled: true,
     enablePerformanceProfiler: false,
     inlineCriticalCss: false,
+    transferState: true,
+    replaceRestUrl: true,
+    paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/', '/reload/' ],
+    enableSearchComponent: false,
+    enableBrowseComponent: false,
   },
 };
diff --git a/src/environments/environment.test.ts b/src/environments/environment.test.ts
index 9ddc40bb8c..b452594d23 100644
--- a/src/environments/environment.test.ts
+++ b/src/environments/environment.test.ts
@@ -12,6 +12,11 @@ export const environment: BuildConfig = {
     enabled: true,
     enablePerformanceProfiler: false,
     inlineCriticalCss: false,
+    transferState: true,
+    replaceRestUrl: false,
+    paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/', '/reload/' ],
+    enableSearchComponent: false,
+    enableBrowseComponent: false,
   },
 
   // Angular express server settings.
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 0292c19200..39ab31de03 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -13,6 +13,11 @@ export const environment: Partial<BuildConfig> = {
     enabled: false,
     enablePerformanceProfiler: false,
     inlineCriticalCss: false,
+    transferState: true,
+    replaceRestUrl: false,
+    paths: [ '/home', '/items/', '/entities/', '/collections/', '/communities/', '/bitstream/', '/bitstreams/', '/handle/', '/reload/' ],
+    enableSearchComponent: false,
+    enableBrowseComponent: false,
   },
 };
 
diff --git a/src/modules/app/browser-init.service.ts b/src/modules/app/browser-init.service.ts
index 8cd869e15f..38b5021714 100644
--- a/src/modules/app/browser-init.service.ts
+++ b/src/modules/app/browser-init.service.ts
@@ -54,6 +54,7 @@ import {
   APP_CONFIG_STATE,
   AppConfig,
 } from '../../config/app-config.interface';
+import { BuildConfig } from '../../config/build-config.interface';
 import { extendEnvironmentWithAppConfig } from '../../config/config.util';
 import { DefaultAppConfig } from '../../config/default-app-config';
 import { environment } from '../../environments/environment';
@@ -70,7 +71,7 @@ export class BrowserInitService extends InitService {
     protected store: Store<AppState>,
     protected correlationIdService: CorrelationIdService,
     protected transferState: TransferState,
-    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+    @Inject(APP_CONFIG) protected appConfig: BuildConfig,
     protected translate: TranslateService,
     protected localeService: LocaleService,
     protected angulartics2DSpace: Angulartics2DSpace,
@@ -144,15 +145,20 @@ export class BrowserInitService extends InitService {
    * @private
    */
   private async loadAppState(): Promise<boolean> {
-    const state = this.transferState.get<any>(InitService.NGRX_STATE, null);
-    this.transferState.remove(InitService.NGRX_STATE);
-    this.store.dispatch(new StoreAction(StoreActionTypes.REHYDRATE, state));
-    return lastValueFrom(
-      this.store.select(coreSelector).pipe(
-        find((core: any) => isNotEmpty(core)),
-        map(() => true),
-      ),
-    );
+    // The app state can be transferred only when SSR and CSR are using the same base url for the REST API
+    if (this.appConfig.ssr.transferState) {
+      const state = this.transferState.get<any>(InitService.NGRX_STATE, null);
+      this.transferState.remove(InitService.NGRX_STATE);
+      this.store.dispatch(new StoreAction(StoreActionTypes.REHYDRATE, state));
+      return lastValueFrom(
+        this.store.select(coreSelector).pipe(
+          find((core: any) => isNotEmpty(core)),
+          map(() => true),
+        ),
+      );
+    } else {
+      return Promise.resolve(true);
+    }
   }
 
   private trackAuthTokenExpiration(): void {
diff --git a/src/modules/app/server-init.service.ts b/src/modules/app/server-init.service.ts
index e22feec09a..717a22f68d 100644
--- a/src/modules/app/server-init.service.ts
+++ b/src/modules/app/server-init.service.ts
@@ -21,6 +21,10 @@ import { LocaleService } from '../../app/core/locale/locale.service';
 import { HeadTagService } from '../../app/core/metadata/head-tag.service';
 import { CorrelationIdService } from '../../app/correlation-id/correlation-id.service';
 import { InitService } from '../../app/init.service';
+import {
+  isEmpty,
+  isNotEmpty,
+} from '../../app/shared/empty.util';
 import { MenuService } from '../../app/shared/menu/menu.service';
 import { ThemeService } from '../../app/shared/theme-support/theme.service';
 import { Angulartics2DSpace } from '../../app/statistics/angulartics/dspace-provider';
@@ -29,6 +33,7 @@ import {
   APP_CONFIG_STATE,
   AppConfig,
 } from '../../config/app-config.interface';
+import { BuildConfig } from '../../config/build-config.interface';
 import { environment } from '../../environments/environment';
 
 /**
@@ -40,7 +45,7 @@ export class ServerInitService extends InitService {
     protected store: Store<AppState>,
     protected correlationIdService: CorrelationIdService,
     protected transferState: TransferState,
-    @Inject(APP_CONFIG) protected appConfig: AppConfig,
+    @Inject(APP_CONFIG) protected appConfig: BuildConfig,
     protected translate: TranslateService,
     protected localeService: LocaleService,
     protected angulartics2DSpace: Angulartics2DSpace,
@@ -89,17 +94,27 @@ export class ServerInitService extends InitService {
    * @private
    */
   private saveAppState() {
-    this.transferState.onSerialize(InitService.NGRX_STATE, () => {
-      let state;
-      this.store.pipe(take(1)).subscribe((saveState: any) => {
-        state = saveState;
-      });
+    if (this.appConfig.ssr.transferState && (isEmpty(this.appConfig.rest.ssrBaseUrl) || this.appConfig.ssr.replaceRestUrl)) {
+      this.transferState.onSerialize(InitService.NGRX_STATE, () => {
+        let state;
+        this.store.pipe(take(1)).subscribe((saveState: any) => {
+          state = saveState;
+        });
 
-      return state;
-    });
+        return state;
+      });
+    }
   }
 
   private saveAppConfigForCSR(): void {
-    this.transferState.set<AppConfig>(APP_CONFIG_STATE, environment as AppConfig);
+    if (isNotEmpty(environment.rest.ssrBaseUrl) && environment.rest.baseUrl !== environment.rest.ssrBaseUrl) {
+      // Avoid to transfer ssrBaseUrl in order to prevent security issues
+      const config: AppConfig = Object.assign({}, environment as AppConfig, {
+        rest: Object.assign({}, environment.rest, { ssrBaseUrl: '', hasSsrBaseUrl: true }),
+      });
+      this.transferState.set<AppConfig>(APP_CONFIG_STATE, config);
+    } else {
+      this.transferState.set<AppConfig>(APP_CONFIG_STATE, environment as AppConfig);
+    }
   }
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 770afc8aa0..35f361e0f6 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -151,4 +151,16 @@
   --green1: #1FB300;  // This variable represents the success color for the Klaro cookie banner
   --button-text-color-cookie: #333; // This variable represents the text color for buttons in the Klaro cookie banner
   --very-dark-cyan: #215E50; // This variable represents the background color of the save cookies button
+
+  --ds-search-skeleton-text-height: 20px;
+  --ds-search-skeleton-badge-height: 18px;
+  --ds-search-skeleton-thumbnail-margin: 1em;
+  --ds-search-skeleton-text-line-count: 2;
+  --ds-search-skeleton-badge-width: 75px;
+  --ds-search-skeleton-filter-badge-width: 200px;
+  --ds-search-skeleton-info-width: 200px;
+  --ds-search-skeleton-card-height: 435px;
+
+  --ds-filters-skeleton-height: 40px;
+  --ds-filters-skeleton-spacing: 12px;
 }
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 99cc075dbe..058a94138d 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -481,6 +481,17 @@ ngb-accordion {
     color: darken($danger, 22%);
 }
 
+// An element that is disabled should not have focus styles to avoid confusion
+// It however is still focusable for screen readers and keyboard navigation
+.disabled {
+    pointer-events: none;
+}
+
+.disabled:focus {
+    outline: none;
+    box-shadow: none;
+}
+
 // Margin utility classes based on DSpace content spacing
 .mt-cs { margin-top: var(--ds-content-spacing); }
 .mb-cs { margin-bottom: var(--ds-content-spacing); }
diff --git a/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
index d4582dcf25..ffcb504a7f 100644
--- a/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
+++ b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -7,14 +7,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { BrowseByDateComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-date/browse-by-date.component';
 import { ThemedBrowseByComponent } from '../../../../../app/shared/browse-by/themed-browse-by.component';
-import { ThemedComcolPageBrowseByComponent } from '../../../../../app/shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../../../../app/shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../../../../app/shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../../../../app/shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../../../../app/shared/comcol/comcol-page-logo/comcol-page-logo.component';
-import { DsoEditMenuComponent } from '../../../../../app/shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
-import { VarDirective } from '../../../../../app/shared/utils/var.directive';
 
 @Component({
   selector: 'ds-browse-by-date',
@@ -24,15 +17,8 @@ import { VarDirective } from '../../../../../app/shared/utils/var.directive';
   templateUrl: '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.html',
   standalone: true,
   imports: [
-    VarDirective,
     AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
     NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index d2894fce3a..9b29bf93be 100644
--- a/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -7,14 +7,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { BrowseByMetadataComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component';
 import { ThemedBrowseByComponent } from '../../../../../app/shared/browse-by/themed-browse-by.component';
-import { ThemedComcolPageBrowseByComponent } from '../../../../../app/shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../../../../app/shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../../../../app/shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../../../../app/shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../../../../app/shared/comcol/comcol-page-logo/comcol-page-logo.component';
-import { DsoEditMenuComponent } from '../../../../../app/shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
-import { VarDirective } from '../../../../../app/shared/utils/var.directive';
 
 @Component({
   selector: 'ds-browse-by-metadata',
@@ -24,15 +17,8 @@ import { VarDirective } from '../../../../../app/shared/utils/var.directive';
   templateUrl: '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.html',
   standalone: true,
   imports: [
-    VarDirective,
     AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
     NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
diff --git a/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
index 578663c43c..6a3b612b57 100644
--- a/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
+++ b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -7,14 +7,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { BrowseByTitleComponent as BaseComponent } from '../../../../../app/browse-by/browse-by-title/browse-by-title.component';
 import { ThemedBrowseByComponent } from '../../../../../app/shared/browse-by/themed-browse-by.component';
-import { ThemedComcolPageBrowseByComponent } from '../../../../../app/shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
-import { ThemedComcolPageContentComponent } from '../../../../../app/shared/comcol/comcol-page-content/themed-comcol-page-content.component';
-import { ThemedComcolPageHandleComponent } from '../../../../../app/shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
-import { ComcolPageHeaderComponent } from '../../../../../app/shared/comcol/comcol-page-header/comcol-page-header.component';
-import { ComcolPageLogoComponent } from '../../../../../app/shared/comcol/comcol-page-logo/comcol-page-logo.component';
-import { DsoEditMenuComponent } from '../../../../../app/shared/dso-page/dso-edit-menu/dso-edit-menu.component';
 import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
-import { VarDirective } from '../../../../../app/shared/utils/var.directive';
 
 @Component({
   selector: 'ds-browse-by-title',
@@ -24,15 +17,8 @@ import { VarDirective } from '../../../../../app/shared/utils/var.directive';
   templateUrl: '../../../../../app/browse-by/browse-by-metadata/browse-by-metadata.component.html',
   standalone: true,
   imports: [
-    VarDirective,
     AsyncPipe,
-    ComcolPageHeaderComponent,
-    ComcolPageLogoComponent,
     NgIf,
-    ThemedComcolPageHandleComponent,
-    ThemedComcolPageContentComponent,
-    DsoEditMenuComponent,
-    ThemedComcolPageBrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
diff --git a/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts b/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
index a7437c0408..f74a73a4b8 100644
--- a/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
+++ b/src/themes/custom/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts
@@ -13,6 +13,7 @@ import { DsoEditMetadataValueComponent } from '../../../../../app/dso-shared/dso
 import { DsoEditMetadataValueHeadersComponent } from '../../../../../app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-headers/dso-edit-metadata-value-headers.component';
 import { MetadataFieldSelectorComponent } from '../../../../../app/dso-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component';
 import { AlertComponent } from '../../../../../app/shared/alert/alert.component';
+import { BtnDisabledDirective } from '../../../../../app/shared/btn-disabled.directive';
 import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed-loading.component';
 
 @Component({
@@ -22,7 +23,7 @@ import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed
   // templateUrl: './dso-edit-metadata.component.html',
   templateUrl: '../../../../../app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html',
   standalone: true,
-  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 export class DsoEditMetadataComponent extends BaseComponent {
 }
diff --git a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
index 9656e7b85c..37fb383429 100644
--- a/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
+++ b/src/themes/custom/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
@@ -7,6 +7,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { ForgotPasswordFormComponent as BaseComponent } from '../../../../../app/forgot-password/forgot-password-form/forgot-password-form.component';
 import { ProfilePageSecurityFormComponent } from '../../../../../app/profile-page/profile-page-security-form/profile-page-security-form.component';
+import { BtnDisabledDirective } from '../../../../../app/shared/btn-disabled.directive';
 import { BrowserOnlyPipe } from '../../../../../app/shared/utils/browser-only.pipe';
 
 @Component({
@@ -22,6 +23,7 @@ import { BrowserOnlyPipe } from '../../../../../app/shared/utils/browser-only.pi
     ProfilePageSecurityFormComponent,
     AsyncPipe,
     NgIf,
+    BtnDisabledDirective,
   ],
 })
 /**
diff --git a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
index 05f2252216..2b78006f65 100644
--- a/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
+++ b/src/themes/custom/app/info/end-user-agreement/end-user-agreement.component.ts
@@ -4,6 +4,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { EndUserAgreementComponent as BaseComponent } from '../../../../../app/info/end-user-agreement/end-user-agreement.component';
 import { EndUserAgreementContentComponent } from '../../../../../app/info/end-user-agreement/end-user-agreement-content/end-user-agreement-content.component';
+import { BtnDisabledDirective } from '../../../../../app/shared/btn-disabled.directive';
 
 @Component({
   selector: 'ds-themed-end-user-agreement',
@@ -12,7 +13,7 @@ import { EndUserAgreementContentComponent } from '../../../../../app/info/end-us
   // templateUrl: './end-user-agreement.component.html'
   templateUrl: '../../../../../app/info/end-user-agreement/end-user-agreement.component.html',
   standalone: true,
-  imports: [EndUserAgreementContentComponent, FormsModule, TranslateModule],
+  imports: [EndUserAgreementContentComponent, FormsModule, TranslateModule, BtnDisabledDirective],
 })
 
 /**
diff --git a/src/themes/custom/app/info/feedback/feedback-form/feedback-form.component.ts b/src/themes/custom/app/info/feedback/feedback-form/feedback-form.component.ts
index b3cd90e73e..3835667111 100644
--- a/src/themes/custom/app/info/feedback/feedback-form/feedback-form.component.ts
+++ b/src/themes/custom/app/info/feedback/feedback-form/feedback-form.component.ts
@@ -7,6 +7,7 @@ import {
 import { TranslateModule } from '@ngx-translate/core';
 
 import { FeedbackFormComponent as BaseComponent } from '../../../../../../app/info/feedback/feedback-form/feedback-form.component';
+import { BtnDisabledDirective } from '../../../../../../app/shared/btn-disabled.directive';
 import { ErrorComponent } from '../../../../../../app/shared/error/error.component';
 
 @Component({
@@ -16,7 +17,7 @@ import { ErrorComponent } from '../../../../../../app/shared/error/error.compone
   // styleUrls: ['./feedback-form.component.scss'],
   styleUrls: ['../../../../../../app/info/feedback/feedback-form/feedback-form.component.scss'],
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule],
+  imports: [FormsModule, ReactiveFormsModule, NgIf, ErrorComponent, TranslateModule, BtnDisabledDirective],
 })
 export class FeedbackFormComponent extends BaseComponent {
 }
diff --git a/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts b/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
index 5c6c7f3507..0efa013064 100644
--- a/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
+++ b/src/themes/custom/app/item-page/media-viewer/media-viewer-video/media-viewer-video.component.ts
@@ -7,6 +7,7 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { MediaViewerVideoComponent as BaseComponent } from '../../../../../../app/item-page/media-viewer/media-viewer-video/media-viewer-video.component';
+import { BtnDisabledDirective } from '../../../../../../app/shared/btn-disabled.directive';
 
 @Component({
   selector: 'ds-themed-media-viewer-video',
@@ -20,6 +21,7 @@ import { MediaViewerVideoComponent as BaseComponent } from '../../../../../../ap
     NgbDropdownModule,
     TranslateModule,
     NgIf,
+    BtnDisabledDirective,
   ],
 })
 export class MediaViewerVideoComponent extends BaseComponent {
diff --git a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index f0e2ebd502..b0b57a75aa 100644
--- a/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/themes/custom/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -9,11 +9,8 @@ import { RouterLinkActive } from '@angular/router';
 
 import { ExpandableNavbarSectionComponent as BaseComponent } from '../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component';
 import { slide } from '../../../../../app/shared/animations/slide';
-import { VarDirective } from '../../../../../app/shared/utils/var.directive';
+import { HoverOutsideDirective } from '../../../../../app/shared/utils/hover-outside.directive';
 
-/**
- * Represents an expandable section in the navbar
- */
 @Component({
   selector: 'ds-themed-expandable-navbar-section',
   // templateUrl: './expandable-navbar-section.component.html',
@@ -22,7 +19,14 @@ import { VarDirective } from '../../../../../app/shared/utils/var.directive';
   styleUrls: ['../../../../../app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss'],
   animations: [slide],
   standalone: true,
-  imports: [VarDirective, RouterLinkActive, NgComponentOutlet, NgIf, NgFor, AsyncPipe],
+  imports: [
+    AsyncPipe,
+    HoverOutsideDirective,
+    NgComponentOutlet,
+    NgFor,
+    NgIf,
+    RouterLinkActive,
+  ],
 })
 export class ExpandableNavbarSectionComponent extends BaseComponent {
 }
diff --git a/src/themes/custom/app/profile-page/profile-page.component.ts b/src/themes/custom/app/profile-page/profile-page.component.ts
index a474a10e99..62646dbfa4 100644
--- a/src/themes/custom/app/profile-page/profile-page.component.ts
+++ b/src/themes/custom/app/profile-page/profile-page.component.ts
@@ -2,6 +2,7 @@ import {
   AsyncPipe,
   NgForOf,
   NgIf,
+  NgTemplateOutlet,
 } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
@@ -35,6 +36,7 @@ import { VarDirective } from '../../../../app/shared/utils/var.directive';
     NgIf,
     NgForOf,
     SuggestionsNotificationComponent,
+    NgTemplateOutlet,
     PaginationComponent,
     ThemedLoadingComponent,
     ErrorComponent,
diff --git a/src/themes/custom/app/register-email-form/register-email-form.component.ts b/src/themes/custom/app/register-email-form/register-email-form.component.ts
index 44426c527f..d1f4a6d3ff 100644
--- a/src/themes/custom/app/register-email-form/register-email-form.component.ts
+++ b/src/themes/custom/app/register-email-form/register-email-form.component.ts
@@ -12,13 +12,14 @@ import { AlertComponent } from 'src/app/shared/alert/alert.component';
 import { GoogleRecaptchaComponent } from 'src/app/shared/google-recaptcha/google-recaptcha.component';
 
 import { RegisterEmailFormComponent as BaseComponent } from '../../../../app/register-email-form/register-email-form.component';
+import { BtnDisabledDirective } from '../../../../app/shared/btn-disabled.directive';
 
 @Component({
   selector: 'ds-themed-register-email-form',
   // templateUrl: './register-email-form.component.html',
   templateUrl: '../../../../app/register-email-form/register-email-form.component.html',
   standalone: true,
-  imports: [NgIf, FormsModule, ReactiveFormsModule, AlertComponent, GoogleRecaptchaComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, FormsModule, ReactiveFormsModule, AlertComponent, GoogleRecaptchaComponent, AsyncPipe, TranslateModule, BtnDisabledDirective],
 })
 export class RegisterEmailFormComponent extends BaseComponent {
 }
diff --git a/src/themes/custom/app/register-page/create-profile/create-profile.component.ts b/src/themes/custom/app/register-page/create-profile/create-profile.component.ts
index ac2491cc4e..7c1ff908c3 100644
--- a/src/themes/custom/app/register-page/create-profile/create-profile.component.ts
+++ b/src/themes/custom/app/register-page/create-profile/create-profile.component.ts
@@ -9,6 +9,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { ProfilePageSecurityFormComponent } from '../../../../../app/profile-page/profile-page-security-form/profile-page-security-form.component';
 import { CreateProfileComponent as BaseComponent } from '../../../../../app/register-page/create-profile/create-profile.component';
+import { BtnDisabledDirective } from '../../../../../app/shared/btn-disabled.directive';
 
 /**
  * Component that renders the create profile page to be used by a user registering through a token
@@ -27,6 +28,7 @@ import { CreateProfileComponent as BaseComponent } from '../../../../../app/regi
     AsyncPipe,
     ReactiveFormsModule,
     NgForOf,
+    BtnDisabledDirective,
   ],
 })
 export class CreateProfileComponent extends BaseComponent {
diff --git a/src/themes/custom/app/request-copy/email-request-copy/email-request-copy.component.ts b/src/themes/custom/app/request-copy/email-request-copy/email-request-copy.component.ts
index 1876b134a2..cf4981d289 100644
--- a/src/themes/custom/app/request-copy/email-request-copy/email-request-copy.component.ts
+++ b/src/themes/custom/app/request-copy/email-request-copy/email-request-copy.component.ts
@@ -7,6 +7,8 @@ import { FormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 import { EmailRequestCopyComponent as BaseComponent } from 'src/app/request-copy/email-request-copy/email-request-copy.component';
 
+import { BtnDisabledDirective } from '../../../../../app/shared/btn-disabled.directive';
+
 @Component({
   selector: 'ds-themed-email-request-copy',
   // styleUrls: ['./email-request-copy.component.scss'],
@@ -14,7 +16,7 @@ import { EmailRequestCopyComponent as BaseComponent } from 'src/app/request-copy
   // templateUrl: './email-request-copy.component.html',
   templateUrl: './../../../../../app/request-copy/email-request-copy/email-request-copy.component.html',
   standalone: true,
-  imports: [FormsModule, NgClass, NgIf, TranslateModule],
+  imports: [FormsModule, NgClass, NgIf, TranslateModule, BtnDisabledDirective],
 })
 export class EmailRequestCopyComponent
   extends BaseComponent {
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
index 6c4aa8082c..d1d2a4a1f0 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
@@ -1,3 +1,7 @@
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
 import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -11,7 +15,12 @@ import { CreateCommunityParentSelectorComponent as BaseComponent } from '../../.
   // templateUrl: './create-community-parent-selector.component.html',
   templateUrl: '../../../../../../../app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html',
   standalone: true,
-  imports: [DSOSelectorComponent, TranslateModule],
+  imports: [
+    AsyncPipe,
+    DSOSelectorComponent,
+    NgIf,
+    TranslateModule,
+  ],
 })
 export class CreateCommunityParentSelectorComponent extends BaseComponent {
 }
diff --git a/src/themes/custom/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.ts b/src/themes/custom/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.ts
index 424adb7942..aec7bfd6db 100644
--- a/src/themes/custom/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.ts
+++ b/src/themes/custom/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.ts
@@ -5,6 +5,7 @@ import {
 import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
+import { BtnDisabledDirective } from '../../../../../../../../../../app/shared/btn-disabled.directive';
 import { ExternalSourceEntryImportModalComponent as BaseComponent } from '../../../../../../../../../../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';
 import { ThemedSearchResultsComponent } from '../../../../../../../../../../app/shared/search/search-results/themed-search-results.component';
 
@@ -19,6 +20,7 @@ import { ThemedSearchResultsComponent } from '../../../../../../../../../../app/
     ThemedSearchResultsComponent,
     NgIf,
     AsyncPipe,
+    BtnDisabledDirective,
   ],
 })
 export class ExternalSourceEntryImportModalComponent extends BaseComponent {
diff --git a/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts b/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts
index 5b10c84145..3e86e16c01 100644
--- a/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts
+++ b/src/themes/custom/app/shared/search/search-filters/search-filters.component.ts
@@ -5,18 +5,14 @@
  *
  * https://www.atmire.com/software-license/
  */
-import {
-  AsyncPipe,
-  NgFor,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { SearchConfigurationService } from '../../../../../../app/core/shared/search/search-configuration.service';
 import { SEARCH_CONFIG_SERVICE } from '../../../../../../app/my-dspace-page/my-dspace-configuration.service';
-import { AdvancedSearchComponent } from '../../../../../../app/shared/search/advanced-search/advanced-search.component';
 import { SearchFilterComponent } from '../../../../../../app/shared/search/search-filters/search-filter/search-filter.component';
 import { SearchFiltersComponent as BaseComponent } from '../../../../../../app/shared/search/search-filters/search-filters.component';
 
@@ -34,7 +30,7 @@ import { SearchFiltersComponent as BaseComponent } from '../../../../../../app/s
     },
   ],
   standalone: true,
-  imports: [NgIf, NgFor, SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, AdvancedSearchComponent],
+  imports: [SearchFilterComponent, RouterLink, AsyncPipe, TranslateModule, NgxSkeletonLoaderModule],
 })
 
 export class SearchFiltersComponent extends BaseComponent {
diff --git a/src/themes/custom/app/shared/search/search-results/search-results.component.ts b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
index b72297f32f..b7c84f0fcc 100644
--- a/src/themes/custom/app/shared/search/search-results/search-results.component.ts
+++ b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
@@ -1,29 +1,43 @@
-import { NgIf } from '@angular/common';
+import {
+  AsyncPipe,
+  NgIf,
+} from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import {
   fadeIn,
   fadeInOut,
 } from '../../../../../../app/shared/animations/fade';
 import { ErrorComponent } from '../../../../../../app/shared/error/error.component';
-import { ThemedLoadingComponent } from '../../../../../../app/shared/loading/themed-loading.component';
 import { ObjectCollectionComponent } from '../../../../../../app/shared/object-collection/object-collection.component';
 import { SearchExportCsvComponent } from '../../../../../../app/shared/search/search-export-csv/search-export-csv.component';
 import { SearchResultsComponent as BaseComponent } from '../../../../../../app/shared/search/search-results/search-results.component';
+import { SearchResultsSkeletonComponent } from '../../../../../../app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component';
 
 @Component({
   selector: 'ds-themed-search-results',
   // templateUrl: './search-results.component.html',
   templateUrl: '../../../../../../app/shared/search/search-results/search-results.component.html',
-  // styleUrls: ['./search-results.component.scss'],
+  styleUrls: ['../../../../../../app/shared/search/search-results/search-results.component.scss'],
   animations: [
     fadeIn,
     fadeInOut,
   ],
   standalone: true,
-  imports: [NgIf, SearchExportCsvComponent, ObjectCollectionComponent, ThemedLoadingComponent, ErrorComponent, RouterLink, TranslateModule],
+  imports: [
+    AsyncPipe,
+    ErrorComponent,
+    NgIf,
+    NgxSkeletonLoaderModule,
+    ObjectCollectionComponent,
+    RouterLink,
+    SearchExportCsvComponent,
+    SearchResultsSkeletonComponent,
+    TranslateModule,
+  ],
 })
 export class SearchResultsComponent extends BaseComponent {
 
diff --git a/src/themes/custom/app/submission/sections/upload/file/section-upload-file.component.ts b/src/themes/custom/app/submission/sections/upload/file/section-upload-file.component.ts
index 13f5f97650..cea515102a 100644
--- a/src/themes/custom/app/submission/sections/upload/file/section-upload-file.component.ts
+++ b/src/themes/custom/app/submission/sections/upload/file/section-upload-file.component.ts
@@ -6,6 +6,7 @@ import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { SubmissionSectionUploadFileComponent as BaseComponent } from 'src/app/submission/sections/upload/file/section-upload-file.component';
 
+import { BtnDisabledDirective } from '../../../../../../../app/shared/btn-disabled.directive';
 import { ThemedFileDownloadLinkComponent } from '../../../../../../../app/shared/file-download-link/themed-file-download-link.component';
 import { FileSizePipe } from '../../../../../../../app/shared/utils/file-size-pipe';
 import { SubmissionSectionUploadFileViewComponent } from '../../../../../../../app/submission/sections/upload/file/view/section-upload-file-view.component';
@@ -27,6 +28,7 @@ import { SubmissionSectionUploadFileViewComponent } from '../../../../../../../a
     AsyncPipe,
     ThemedFileDownloadLinkComponent,
     FileSizePipe,
+    BtnDisabledDirective,
   ],
 })
 export class SubmissionSectionUploadFileComponent
diff --git a/src/themes/custom/lazy-theme.module.ts b/src/themes/custom/lazy-theme.module.ts
index cb80948daf..0394c672f6 100644
--- a/src/themes/custom/lazy-theme.module.ts
+++ b/src/themes/custom/lazy-theme.module.ts
@@ -12,6 +12,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
 
 import { RootModule } from '../../app/root.module';
+import { SearchResultsSkeletonComponent } from '../../app/shared/search/search-results/search-results-skeleton/search-results-skeleton.component';
 import { MetadataImportPageComponent } from './app/admin/admin-import-metadata-page/metadata-import-page.component';
 import { AdminSidebarComponent } from './app/admin/admin-sidebar/admin-sidebar.component';
 import { EditBitstreamPageComponent } from './app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component';
@@ -103,6 +104,7 @@ import { WorkflowItemDeleteComponent } from './app/workflowitems-edit-page/workf
 import { WorkflowItemSendBackComponent } from './app/workflowitems-edit-page/workflow-item-send-back/workflow-item-send-back.component';
 import { WorkspaceItemsDeletePageComponent } from './app/workspaceitems-edit-page/workspaceitems-delete-page/workspaceitems-delete-page.component';
 
+
 const DECLARATIONS = [
   FileSectionComponent,
   HomePageComponent,
@@ -194,6 +196,7 @@ const DECLARATIONS = [
   ProfilePageMetadataFormComponent,
   SubmissionUploadFilesComponent,
   ComcolPageContentComponent,
+  SearchResultsSkeletonComponent,
 ];
 
 @NgModule({
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index cc9a3d727e..45e39d11ab 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -1,6 +1,5 @@
 import {
   AsyncPipe,
-  NgClass,
   NgIf,
 } from '@angular/common';
 import { Component } from '@angular/core';
@@ -19,7 +18,7 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
   styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
   standalone: true,
-  imports: [NgClass, ThemedHeaderComponent, ThemedNavbarComponent, AsyncPipe, TranslateModule, NgIf],
+  imports: [ThemedHeaderComponent, ThemedNavbarComponent, AsyncPipe, TranslateModule, NgIf],
   animations: [slideMobileNav],
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
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 3c3aa8b445..d00b0ec959 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
@@ -4,6 +4,7 @@
   div.background-image-container {
     color: white;
     position: relative;
+    font-weight: 600;
 
     .background-image > img {
       background-color: var(--bs-info);
@@ -68,6 +69,11 @@
       color: var(--ds-home-news-link-hover-color);
     }
   }
+
+  .lead {
+    font-size: 1.25rem;
+    font-weight: 400;
+  }
 }
 
 
diff --git a/src/themes/dspace/app/navbar/navbar.component.ts b/src/themes/dspace/app/navbar/navbar.component.ts
index 5713a161e1..8cce626006 100644
--- a/src/themes/dspace/app/navbar/navbar.component.ts
+++ b/src/themes/dspace/app/navbar/navbar.component.ts
@@ -6,18 +6,12 @@ import {
   NgIf,
 } from '@angular/common';
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
-import { ThemedSearchNavbarComponent } from 'src/app/search-navbar/themed-search-navbar.component';
-import { ThemedLangSwitchComponent } from 'src/app/shared/lang-switch/themed-lang-switch.component';
 
-import { ContextHelpToggleComponent } from '../../../../app/header/context-help-toggle/context-help-toggle.component';
 import { NavbarComponent as BaseComponent } from '../../../../app/navbar/navbar.component';
 import { slideMobileNav } from '../../../../app/shared/animations/slide';
-import { ThemedAuthNavMenuComponent } from '../../../../app/shared/auth-nav-menu/themed-auth-nav-menu.component';
 import { ThemedUserMenuComponent } from '../../../../app/shared/auth-nav-menu/user-menu/themed-user-menu.component';
-import { ImpersonateNavbarComponent } from '../../../../app/shared/impersonate-navbar/impersonate-navbar.component';
 
 /**
  * Component representing the public navbar
@@ -28,7 +22,7 @@ import { ImpersonateNavbarComponent } from '../../../../app/shared/impersonate-n
   templateUrl: './navbar.component.html',
   animations: [slideMobileNav],
   standalone: true,
-  imports: [NgbDropdownModule, ThemedLangSwitchComponent, ThemedSearchNavbarComponent, NgClass, RouterLink, NgIf, NgFor, NgComponentOutlet, ContextHelpToggleComponent, ThemedAuthNavMenuComponent, ImpersonateNavbarComponent, AsyncPipe, TranslateModule, ThemedUserMenuComponent],
+  imports: [NgbDropdownModule, NgClass, NgIf, ThemedUserMenuComponent, NgFor, NgComponentOutlet, AsyncPipe, TranslateModule],
 })
 export class NavbarComponent extends BaseComponent {
 }
diff --git a/src/themes/dspace/styles/_theme_css_variable_overrides.scss b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
index 63a5535d95..5763979e94 100644
--- a/src/themes/dspace/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_css_variable_overrides.scss
@@ -11,13 +11,14 @@
     --ds-header-height: 90px;
   }
 
-  --ds-banner-text-background: rgba(0, 0, 0, 0.45);
+  --ds-banner-text-background: rgba(0, 0, 0, 0.58);
   --ds-banner-background-gradient-width: 300px;
 
   --ds-header-navbar-border-bottom-height: 5px;
 
   /* set the next two properties as `--ds-header-navbar-border-bottom-*`
   in order to keep the bottom border of the header when navbar is expanded */
+
   --ds-expandable-navbar-border-top-color: #{$white};
   --ds-expandable-navbar-border-top-height: 0;
   --ds-expandable-navbar-padding-top: 0;
diff --git a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
index a9231d37e5..9fcb540ab6 100644
--- a/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
+++ b/src/themes/dspace/styles/_theme_sass_variable_overrides.scss
@@ -83,7 +83,7 @@ $navbar-dark-color: #fff;
 
 /*** CUSTOM DSPACE VARIABLES ***/
 
-$ds-home-news-link-color: #92c642;
+$ds-home-news-link-color: #D2FC93;
 $ds-header-navbar-border-bottom-color: #92c642;
 
 $ds-breadcrumb-link-color: #154E66 !default;
diff --git a/yarn.lock b/yarn.lock
index 65804167db..2975ef6cd9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1358,10 +1358,10 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@7.26.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
-  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+"@babel/runtime@7.26.7", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.26.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -2768,10 +2768,10 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/lodash@^4.17.14":
-  version "4.17.14"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.14.tgz#bafc053533f4cdc5fcc9635af46a963c1f3deaff"
-  integrity sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==
+"@types/lodash@^4.17.15":
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.15.tgz#12d4af0ed17cc7600ce1f9980cec48fc17ad1e89"
+  integrity sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==
 
 "@types/mime@^1":
   version "1.3.5"
@@ -4417,10 +4417,10 @@ core-js-compat@^3.31.0, core-js-compat@^3.34.0:
   dependencies:
     browserslist "^4.23.3"
 
-core-js@^3.39.0:
-  version "3.39.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.39.0.tgz#57f7647f4d2d030c32a72ea23a0555b2eaa30f83"
-  integrity sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==
+core-js@^3.40.0:
+  version "3.40.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.40.0.tgz#2773f6b06877d8eda102fc42f828176437062476"
+  integrity sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==
 
 core-util-is@1.0.2:
   version "1.0.2"
@@ -4487,9 +4487,9 @@ cross-env@^7.0.3:
     cross-spawn "^7.0.1"
 
 cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
-  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
@@ -4589,10 +4589,10 @@ custom-event@~1.0.0:
   resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
   integrity sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==
 
-cypress-axe@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.5.0.tgz#95082734583da77b51ce9b7784e14a442016c7a1"
-  integrity sha512-Hy/owCjfj+25KMsecvDgo4fC/781ccL+e8p+UUYoadGVM2ogZF9XIKbiM6KI8Y3cEaSreymdD6ZzccbI2bY0lQ==
+cypress-axe@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/cypress-axe/-/cypress-axe-1.6.0.tgz#2d70475e15356dd243ebcbfefd5719526f7ca9bc"
+  integrity sha512-C/ij50G8eebBrl/WsGT7E+T/SFyIsRZ3Epx9cRTLrPL9Y1GcxlQGFoAVdtSFWRrHSCWXq9HC6iJQMaI89O9yvQ==
 
 cypress@^13.17.0:
   version "13.17.0"
@@ -5368,10 +5368,10 @@ eslint-plugin-jsdoc@^45.0.0:
     semver "^7.5.1"
     spdx-expression-parse "^3.0.1"
 
-eslint-plugin-jsonc@^2.18.2:
-  version "2.18.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.18.2.tgz#893520feb35d343e7438e2fb57fad179ef3ff6aa"
-  integrity sha512-SDhJiSsWt3nItl/UuIv+ti4g3m4gpGkmnUJS9UWR3TrpyNsIcnJoBRD7Kof6cM4Rk3L0wrmY5Tm3z7ZPjR2uGg==
+eslint-plugin-jsonc@^2.19.1:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.19.1.tgz#aeedd7131d115b8c46f439a8855139837a0e2752"
+  integrity sha512-MmlAOaZK1+Lg7YoCZPGRjb88ZjT+ct/KTsvcsbZdBm+w8WMzGx+XEmexk0m40P1WV9G2rFV7X3klyRGRpFXEjA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     eslint-compat-utils "^0.6.0"
@@ -6830,10 +6830,10 @@ isbinaryfile@^4.0.8:
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.10.tgz#0c5b5e30c2557a2f06febd37b7322946aaee42b3"
   integrity sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==
 
-isbot@^5.1.17:
-  version "5.1.17"
-  resolved "https://registry.yarnpkg.com/isbot/-/isbot-5.1.17.tgz#ad7da5690a61bbb19056a069975c9a73182682a0"
-  integrity sha512-/wch8pRKZE+aoVhRX/hYPY1C7dMCeeMyhkQLNLNlYAbGQn9bkvMB8fOUXNnk5I0m4vDYbBJ9ciVtkr9zfBJ7qA==
+isbot@^5.1.22:
+  version "5.1.22"
+  resolved "https://registry.yarnpkg.com/isbot/-/isbot-5.1.22.tgz#18a4a58bbfff6974ff7868dafea59907deb7b68d"
+  integrity sha512-RqCFY3cJy3c2y1I+rMn81cfzAR4XJwfPBC+M8kffUjbPzxApzyyv7Tbm1C/gXXq2dSCuD238pKFEWlQMTWsTFw==
 
 isexe@^2.0.0:
   version "2.0.0"
@@ -7830,10 +7830,10 @@ mirador-share-plugin@^0.16.0:
   dependencies:
     notistack "^3.0.1"
 
-mirador@^3.4.2:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/mirador/-/mirador-3.4.2.tgz#51ec7ca1b9854792bbe2fa5e13b3692c92e97102"
-  integrity sha512-Gd7G4NkXq6/qD/De5soYspSo9VykAzrGFunKqUI3x9WShoZP23pYIEPoC/96tvfk3KMv+UbAUxDp99Xeo7vnVQ==
+mirador@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/mirador/-/mirador-3.4.3.tgz#1b083bd037b851d1389758f3c86eb94832b00ec6"
+  integrity sha512-yHoug0MHy4e9apykbbBhK+4CmbZS94zMxmugw2E2VX6iB0b2PKKY0JfYr/QfXh9P29YnWAbymaXJVpgbHVpTVw==
   dependencies:
     "@material-ui/core" "^4.12.3"
     "@material-ui/icons" "^4.9.1"
@@ -7930,10 +7930,10 @@ mute-stream@1.0.0:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-1.0.0.tgz#e31bd9fe62f0aed23520aa4324ea6671531e013e"
   integrity sha512-avsJQhyd+680gKXyG/sQc0nXaC6rBkPOfyHYcFb9+hdkqQkR9bdnkJ0AMZhke0oesPqIO+mFFJ+IdBc7mst4IA==
 
-nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+nanoid@^3.3.7, nanoid@^3.3.8:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -7963,10 +7963,10 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-ng-mocks@^14.13.1:
-  version "14.13.1"
-  resolved "https://registry.yarnpkg.com/ng-mocks/-/ng-mocks-14.13.1.tgz#9fef8cc902a0d9d3250550d83514f9c65d4cd366"
-  integrity sha512-eyfnjXeC108SqVD09i/cBwCpKkK0JjBoAg8jp7oQS2HS081K3WJTttFpgLGeLDYKmZsZ6nYpI+HHNQ3OksaJ7A==
+ng-mocks@^14.13.2:
+  version "14.13.2"
+  resolved "https://registry.yarnpkg.com/ng-mocks/-/ng-mocks-14.13.2.tgz#ddd675d675eb16dfa85834e28dd42343853a6622"
+  integrity sha512-ItAB72Pc0uznL1j4TPsFp1wehhitVp7DARkc67aafeIk1FDgwnAZvzJwntMnIp/IWMSbzrEQ6kl3cc5euX1NRA==
 
 ng2-file-upload@5.0.0:
   version "5.0.0"
@@ -8003,6 +8003,13 @@ ngx-pagination@6.0.3:
   dependencies:
     tslib "^2.3.0"
 
+ngx-skeleton-loader@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/ngx-skeleton-loader/-/ngx-skeleton-loader-9.0.0.tgz#43f3235130c3b81c7191aa363aba12f4d7cd1b29"
+  integrity sha512-aO4/V6oGdZGNcTjasTg/fwzJJYl/ZmNKgCukOEQdUK3GSFOZtB/3GGULMJuZ939hk3Hzqh1OBiLfIM1SqTfhqg==
+  dependencies:
+    tslib "^2.0.0"
+
 ngx-ui-switch@^14.1.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/ngx-ui-switch/-/ngx-ui-switch-14.1.0.tgz#32248361a684257c5ae64cfde61b95de920b901c"
@@ -8963,12 +8970,12 @@ postcss@8.4.35:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.2.14, postcss@^8.4, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.35:
-  version "8.4.49"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
-  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.35, postcss@^8.5:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.5.1.tgz#e2272a1f8a807fafa413218245630b5db10a3214"
+  integrity sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==
   dependencies:
-    nanoid "^3.3.7"
+    nanoid "^3.3.8"
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
@@ -9750,10 +9757,10 @@ sass@1.71.1:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-sass@^1.25.0, sass@~1.83.1:
-  version "1.83.1"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.83.1.tgz#dee1ab94b47a6f9993d3195d36f556bcbda64846"
-  integrity sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==
+sass@^1.25.0, sass@~1.84.0:
+  version "1.84.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.84.0.tgz#da9154cbccb2d2eac7a9486091b6d9ba93ef5bad"
+  integrity sha512-XDAbhEPJRxi7H0SxrnOpiXFQoUJHwkR2u3Zc4el+fK/Tt5Hpzw5kkQ59qVDfvdaUq6gCrEZIbySFBM2T9DNKHg==
   dependencies:
     chokidar "^4.0.0"
     immutable "^5.0.2"