diff --git a/.gitignore b/.gitignore
index f110ba720c..026110f222 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,10 +7,6 @@ npm-debug.log
 
 /build/
 
-/src/environments/environment.ts
-/src/environments/environment.dev.ts
-/src/environments/environment.prod.ts
-
 /coverage
 
 /dist/
diff --git a/README.md b/README.md
index 1143a79f31..1beb1bf30c 100644
--- a/README.md
+++ b/README.md
@@ -102,48 +102,87 @@ Installing
 
 ### Configuring
 
-Default configuration file is located in `src/environments/` folder.
+Default configuration file is located in `config/` folder.
 
-To change the default configuration values, create local files that override the parameters you need to change. You can use `environment.template.ts` as a starting point.
+To override the default configuration values, create local files that override the parameters you need to change. You can use `config.example.yml` as a starting point.
 
--	Create a new `environment.dev.ts` file in `src/environments/` for a `development` environment;
--	Create a new `environment.prod.ts` file in `src/environments/` for a `production` environment;
+-	Create a new `config.(dev or development).yml` file in `config/` for a `development` environment;
+-	Create a new `config.(prod or production).yml` file in `config/` for a `production` environment;
 
-The server settings can also be overwritten using an environment file.
+The settings can also be overwritten using an environment file or environment variables.
 
 This file should be called `.env` and be placed in the project root.
 
-The following settings can be overwritten in this file:
+The following non-convention settings:
 
 ```bash
 DSPACE_HOST # The host name of the angular application
 DSPACE_PORT # The port number of the angular application
 DSPACE_NAMESPACE # The namespace of the angular application
 DSPACE_SSL # Whether the angular application uses SSL [true/false]
+```
 
-DSPACE_REST_HOST # The host name of the REST application
-DSPACE_REST_PORT # The port number of the REST application
-DSPACE_REST_NAMESPACE # The namespace of the REST application
-DSPACE_REST_SSL # Whether the angular REST uses SSL [true/false]
+All other settings can be set using the following convention for naming the environment variables:
+
+1. replace all `.` with `_`
+2. convert all characters to upper case
+3. prefix with `DSPACE_`
+
+e.g.
+
+```bash
+# The host name of the REST application
+rest.host => DSPACE_REST_HOST
+
+# The port number of the REST application
+rest.port => DSPACE_REST_PORT
+
+# The namespace of the REST application
+rest.nameSpace => DSPACE_REST_NAMESPACE
+
+# Whether the angular REST uses SSL [true/false]
+rest.ssl => DSPACE_REST_SSL
+
+cache.msToLive.default => DSPACE_CACHE_MSTOLIVE_DEFAULT
+auth.ui.timeUntilIdle => DSPACE_AUTH_UI_TIMEUNTILIDLE
+```
+
+The equavelant to the non-conventional legacy settings:
+
+```bash
+DSPACE_UI_HOST => DSPACE_HOST
+DSPACE_UI_PORT => DSPACE_PORT
+DSPACE_UI_NAMESPACE => DSPACE_NAMESPACE
+DSPACE_UI_SSL => DSPACE_SSL
 ```
 
 The same settings can also be overwritten by setting system environment variables instead, E.g.:
 ```bash
 export DSPACE_HOST=api7.dspace.org
+export DSPACE_UI_PORT=4200
 ```
 
-The priority works as follows: **environment variable** overrides **variable in `.env` file** overrides **`environment.(prod, dev or test).ts`** overrides **`environment.common.ts`**
+The priority works as follows: **environment variable** overrides **variable in `.env` file** overrides external config set by `DSPACE_APP_CONFIG_PATH` overrides **`config.(prod or dev).yml`**
 
-These configuration sources are collected **at build time**, and written to `src/environments/environment.ts`.  At runtime the configuration is fixed, and neither `.env` nor the process' environment will be consulted.
+These configuration sources are collected **at run time**, and written to `dist/browser/assets/config.json` for production and `src/app/assets/config.json` for development.
+
+The configuration file can be externalized by using environment variable `DSPACE_APP_CONFIG_PATH`.
 
 #### Using environment variables in code
 To use environment variables in a UI component, use:
 
 ```typescript
-import { environment } from '../environment.ts';
+import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
+...
+constructor(@Inject(APP_CONFIG) private appConfig: AppConfig) {}
+...
 ```
 
-This file is generated by the script located in `scripts/set-env.ts`. This script will run automatically before every build, or can be manually triggered using the appropriate `config` script in `package.json`
+or
+
+```typescript
+import { environment } from '../environment.ts';
+```
 
 
 Running the app
@@ -230,7 +269,9 @@ E2E tests (aka integration tests) use [Cypress.io](https://www.cypress.io/). Con
 
 The test files can be found in the `./cypress/integration/` folder.
 
-Before you can run e2e tests, you MUST have a running backend (i.e. REST API). By default, the e2e tests look for this at http://localhost:8080/server/ or whatever `rest` backend is defined in your `environment.prod.ts` or `environment.common.ts`. You may override this using env variables, see [Configuring](#configuring).
+Before you can run e2e tests, two things are required:
+1. You MUST have a running backend (i.e. REST API). By default, the e2e tests look for this at http://localhost:8080/server/ or whatever `rest` backend is defined in your `config.prod.yml` or `config.yml`. You may override this using env variables, see [Configuring](#configuring).
+2. Your backend MUST include our Entities Test Data set. Some tests run against a (currently hardcoded) Community/Collection/Item UUID. These UUIDs are all valid for our Entities Test Data set. The Entities Test Data set may be installed easily via Docker, see https://github.com/DSpace/DSpace/tree/main/dspace/src/main/docker-compose#ingest-option-2-ingest-entities-test-data
 
 Run `ng e2e` to kick off the tests. This will start Cypress and allow you to select the browser you wish to use, as well as whether you wish to run all tests or an individual test file.  Once you click run on test(s), this opens the [Cypress Test Runner](https://docs.cypress.io/guides/core-concepts/test-runner) to run your test(s) and show you the results.
 
@@ -309,49 +350,87 @@ File Structure
 
 ```
 dspace-angular
-├── README.md                                           * This document
-├── app.yaml                                            * Application manifest file
-├── config                                              * Folder for configuration files
-│   ├── environment.default.js                          * Default configuration files
-│   └── environment.test.js                             * Test configuration files
-├── docs                                                * Folder for documentation
+├── config                                              *
+│   └── config.yml                                      * Default app config
 ├── cypress                                             * Folder for Cypress (https://cypress.io/) / e2e tests
-│   ├── integration                                     * Folder for e2e/integration test files
-│   ├── fixtures                                        * Folder for any fixtures needed by e2e tests
-│   ├── plugins                                         * Folder for Cypress plugins (if any)
-│   ├── support                                         * Folder for global e2e test actions/commands (run for all tests)
-│   └── tsconfig.json                                   * TypeScript configuration file for e2e tests
+│   ├── downloads                                       *
+│   ├── fixtures                                        * Folder for e2e/integration test files
+│   ├── integration                                     * Folder for any fixtures needed by e2e tests
+│   ├── plugins                                         * Folder for Cypress plugins (if any)
+│   ├── support                                         * Folder for global e2e test actions/commands (run for all tests)
+│   └── tsconfig.json                                   * TypeScript configuration file for e2e tests
+├── docker                                              *
+│   ├── cli.assetstore.yml                              *
+│   ├── cli.ingest.yml                                  *
+│   ├── cli.yml                                         *
+│   ├── db.entities.yml                                 *
+│   ├── docker-compose-ci.yml                           *
+│   ├── docker-compose-rest.yml                         *
+│   ├── docker-compose.yml                              *
+│   ├── environment.dev.ts                              *
+│   ├── local.cfg                                       *
+│   └── README.md                                       *
+├── docs                                                * Folder for documentation
+│   └── Configuration.md                                * Configuration documentation
+├── scripts                                             *
+│   ├── merge-i18n-files.ts                             *
+│   ├── serve.ts                                        *
+│   ├── sync-i18n-files.ts                              *
+│   ├── test-rest.ts                                    *
+│   └── webpack.js                                      *
+├── src                                                 * The source of the application
+│   ├── app                                             * The source code of the application, subdivided by module/page.
+│   ├── assets                                          * Folder for static resources
+│   │   ├── fonts                                       * Folder for fonts
+│   │   ├── i18n                                        * Folder for i18n translations
+│   │   └── images                                      * Folder for images
+│   ├── backend                                         * Folder containing a mock of the REST API, hosted by the express server
+│   ├── config                                          *
+│   ├── environments                                    *
+│   │   ├── environment.production.ts                   * Production configuration files
+│   │   ├── environment.test.ts                         * Test configuration files
+│   │   └── environment.ts                              * Default (development) configuration files
+│   ├── mirador-viewer                                  *
+│   ├── modules                                         *
+│   ├── ngx-translate-loaders                           *
+│   ├── styles                                          * Folder containing global styles
+│   ├── themes                                          * Folder containing available themes
+│   │   ├── custom                                      * Template folder for creating a custom theme
+│   │   └── dspace                                      * Default 'dspace' theme
+│   ├── index.csr.html                                  * The index file for client side rendering fallback
+│   ├── index.html                                      * The index file
+│   ├── main.browser.ts                                 * The bootstrap file for the client
+│   ├── main.server.ts                                  * The express (http://expressjs.com/) config and bootstrap file for the server
+│   ├── polyfills.ts                                    *
+│   ├── robots.txt                                      * The robots.txt file
+│   ├── test.ts                                         *
+│   └── typings.d.ts                                    *
+├── webpack                                             *
+│   ├── helpers.ts                                      * Webpack helpers
+│   ├── webpack.browser.ts                              * Webpack (https://webpack.github.io/) config for browser build
+│   ├── webpack.common.ts                               * Webpack (https://webpack.github.io/) common build config
+│   ├── webpack.mirador.config.ts                       * Webpack (https://webpack.github.io/) config for mirador config build
+│   ├── webpack.prod.ts                                 * Webpack (https://webpack.github.io/) config for prod build
+│   └── webpack.test.ts                                 * Webpack (https://webpack.github.io/) config for test build
+├── angular.json                                        * Angular CLI (https://angular.io/cli) configuration
+├── cypress.json                                        * Cypress Test (https://www.cypress.io/) configuration
+├── Dockerfile                                          *
 ├── karma.conf.js                                       * Karma configuration file for Unit Test
+├── LICENSE                                             *
+├── LICENSES_THIRD_PARTY                                *
 ├── nodemon.json                                        * Nodemon (https://nodemon.io/) configuration
 ├── package.json                                        * This file describes the npm package for this project, its dependencies, scripts, etc.
-├── postcss.config.js                                   * PostCSS (http://postcss.org/) configuration file
-├── src                                                 * The source of the application
-│   ├── app                                             * The source code of the application, subdivided by module/page.
-│   ├── assets                                          * Folder for static resources
-│   │   ├── fonts                                       * Folder for fonts
-│   │   ├── i18n                                        * Folder for i18n translations
-│   |       └── en.json5                                * i18n translations for English
-│   │   └── images                                      * Folder for images
-│   ├── backend                                         * Folder containing a mock of the REST API, hosted by the express server
-│   ├── config                                          *
-│   ├── index.csr.html                                  * The index file for client side rendering fallback
-│   ├── index.html                                      * The index file
-│   ├── main.browser.ts                                 * The bootstrap file for the client
-│   ├── main.server.ts                                  * The express (http://expressjs.com/) config and bootstrap file for the server
-│   ├── robots.txt                                      * The robots.txt file
-│   ├── modules                                         *
-│   ├── styles                                          * Folder containing global styles
-│   └── themes                                          * Folder containing available themes
-│       ├── custom                                      * Template folder for creating a custom theme
-│       └── dspace                                      * Default 'dspace' theme
-├── tsconfig.json                                       * TypeScript config
+├── postcss.config.js                                   * PostCSS (http://postcss.org/) configuration
+├── README.md                                           * This document
+├── SECURITY.md                                         *
+├── server.ts                                           * Angular Universal Node.js Express server
+├── tsconfig.app.json                                   * TypeScript config for browser (app)
+├── tsconfig.json                                       * TypeScript common config
+├── tsconfig.server.json                                * TypeScript config for server
+├── tsconfig.spec.json                                  * TypeScript config for tests
+├── tsconfig.ts-node.json                               * TypeScript config for using ts-node directly
 ├── tslint.json                                         * TSLint (https://palantir.github.io/tslint/) configuration
 ├── typedoc.json                                        * TYPEDOC configuration
-├── webpack                                             * Webpack (https://webpack.github.io/) config directory
-│   ├── webpack.browser.ts                              * Webpack (https://webpack.github.io/) config for client build
-│   ├── webpack.common.ts                               *
-│   ├── webpack.prod.ts                                 * Webpack (https://webpack.github.io/) config for production build
-│   └── webpack.test.ts                                 * Webpack (https://webpack.github.io/) config for test build
 └── yarn.lock                                           * Yarn lockfile (https://yarnpkg.com/en/docs/yarn-lock)
 ```
 
diff --git a/angular.json b/angular.json
index c6607fc80a..a0a4cd8ea1 100644
--- a/angular.json
+++ b/angular.json
@@ -68,6 +68,12 @@
           },
           "configurations": {
             "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.production.ts"
+                }
+              ],
               "optimization": true,
               "outputHashing": "all",
               "extractCss": true,
@@ -139,6 +145,16 @@
               }
             ],
             "scripts": []
+          },
+          "configurations": {
+            "test": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.test.ts"
+                }
+              ]
+            }
           }
         },
         "lint": {
@@ -183,7 +199,13 @@
           "configurations": {
             "production": {
               "sourceMap": false,
-              "optimization": true
+              "optimization": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.production.ts"
+                }
+              ]
             }
           }
         },
diff --git a/config/.gitignore b/config/.gitignore
new file mode 100644
index 0000000000..a420ca4302
--- /dev/null
+++ b/config/.gitignore
@@ -0,0 +1,2 @@
+config.*.yml
+!config.example.yml
diff --git a/config/config.example.yml b/config/config.example.yml
new file mode 100644
index 0000000000..1e035889a5
--- /dev/null
+++ b/config/config.example.yml
@@ -0,0 +1,233 @@
+# NOTE: will log all redux actions and transfers in console
+debug: false
+
+# Angular Universal server settings
+# NOTE: these must be 'synced' with the 'dspace.ui.url' setting in your backend's local.cfg.
+ui:
+  ssl: false
+  host: localhost
+  port: 4000
+  # NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
+  nameSpace: /
+  # The rateLimiter settings limit each IP to a 'max' of 500 requests per 'windowMs' (1 minute).
+  rateLimiter:
+    windowMs: 60000 # 1 minute
+    max: 500 # limit each IP to 500 requests per windowMs
+
+# The REST API server settings
+# NOTE: these must be 'synced' with the 'dspace.server.url' setting in your backend's local.cfg.
+rest:
+  ssl: true
+  host: api7.dspace.org
+  port: 443
+  # NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
+  nameSpace: /server
+
+# Caching settings
+cache:
+  # NOTE: how long should objects be cached for by default
+  msToLive:
+    default: 900000 # 15 minutes
+  control: max-age=60 # revalidate browser
+  autoSync:
+    defaultTime: 0
+    maxBufferSize: 100
+    timePerMethod:
+      PATCH: 3 # time in seconds
+
+# Authentication settings
+auth:
+  # Authentication UI settings
+  ui:
+    # the amount of time before the idle warning is shown
+    timeUntilIdle: 900000 # 15 minutes
+    # the amount of time the user has to react after the idle warning is shown before they are logged out.
+    idleGracePeriod: 300000 # 5 minutes
+  # Authentication REST settings
+  rest:
+    # If the rest token expires in less than this amount of time, it will be refreshed automatically.
+    # This is independent from the idle warning.
+    timeLeftBeforeTokenRefresh: 120000 # 2 minutes
+
+# Form settings
+form:
+  # NOTE: Map server-side validators to comparative Angular form validators
+  validatorMap:
+    required: required
+    regex: pattern
+
+# Notification settings
+notifications:
+  rtl: false
+  position:
+    - top
+    - right
+  maxStack: 8
+  # NOTE: after how many seconds notification is closed automatically. If set to zero notifications are not closed automatically
+  timeOut: 5000 # 5 second
+  clickToClose: true
+  # NOTE: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale'
+  animate: scale
+
+# Submission settings
+submission:
+  autosave:
+    # NOTE: which metadata trigger an autosave
+    metadata: []
+    # NOTE: after how many time (milliseconds) submission is saved automatically
+    # eg. timer: 5 * (1000 * 60); // 5 minutes
+    timer: 0
+  icons:
+    metadata:
+      # NOTE: example of configuration
+      #   # NOTE: metadata name
+      # - name: dc.author
+      #   # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used
+      #   style: fas fa-user
+      - name: dc.author
+        style: fas fa-user
+      # default configuration
+      - name: default
+        style: ''
+    authority:
+      confidence:
+        # NOTE: example of configuration
+        #   # NOTE: confidence value
+        # - name: dc.author
+        #   # NOTE: fontawesome (v5.x) icon classes and bootstrap utility classes can be used
+        #   style: fa-user
+        - value: 600
+          style: text-success
+        - value: 500
+          style: text-info
+        - value: 400
+          style: text-warning
+        # default configuration
+        - value: default
+          style: text-muted
+
+#  Default Language in which the UI will be rendered if the user's browser language is not an active language
+defaultLanguage: en
+
+# Languages. DSpace Angular holds a message catalog for each of the following languages.
+# When set to active, users will be able to switch to the use of this language in the user interface.
+languages:
+  - code: en
+    label: English
+    active: true
+  - code: cs
+    label: Čeština
+    active: true
+  - code: de
+    label: Deutsch
+    active: true
+  - code: es
+    label: Español
+    active: true
+  - code: fr
+    label: Français
+    active: true
+  - code: lv
+    label: Latviešu
+    active: true
+  - code: hu
+    label: Magyar
+    active: true
+  - code: nl
+    label: Nederlands
+    active: true
+  - code: pt-PT
+    label: Português
+    active: true
+  - code: pt-BR
+    label: Português do Brasil
+    active: true
+  - code: fi
+    label: Suomi
+    active: true
+
+# Browse-By Pages
+browseBy:
+  # Amount of years to display using jumps of one year (current year - oneYearLimit)
+  oneYearLimit: 10
+  # Limit for years to display using jumps of five years (current year - fiveYearLimit)
+  fiveYearLimit: 30
+  # The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
+  defaultLowerLimit: 1900
+
+# Item Page Config
+item:
+  edit:
+    undoTimeout: 10000 # 10 seconds
+
+# Collection Page Config
+collection:
+  edit:
+    undoTimeout: 10000 # 10 seconds
+
+# Theme Config
+themes:
+  # Add additional themes here. In the case where multiple themes match a route, the first one
+  # in this list will get priority. It is advisable to always have a theme that matches
+  # every route as the last one
+  #
+  # # A theme with a handle property will match the community, collection or item with the given
+  # # handle, and all collections and/or items within it
+  # - name: 'custom',
+  #   handle: '10673/1233'
+  #
+  # # A theme with a regex property will match the route using a regular expression. If it
+  # # matches the route for a community or collection it will also apply to all collections
+  # # and/or items within it
+  # - name: 'custom',
+  #   regex: 'collections\/e8043bc2.*'
+  #
+  # # A theme with a uuid property will match the community, collection or item with the given
+  # # ID, and all collections and/or items within it
+  # - name: 'custom',
+  #   uuid: '0958c910-2037-42a9-81c7-dca80e3892b4'
+  #
+  # # The extends property specifies an ancestor theme (by name). Whenever a themed component is not found
+  # # in the current theme, its ancestor theme(s) will be checked recursively before falling back to default.
+  # - name: 'custom-A',
+  #   extends: 'custom-B',
+  #   # Any of the matching properties above can be used
+  #   handle: '10673/34'
+  #
+  # - name: 'custom-B',
+  #   extends: 'custom',
+  #   handle: '10673/12'
+  #
+  # # A theme with only a name will match every route
+  # name: 'custom'
+  #
+  # # This theme will use the default bootstrap styling for DSpace components
+  # - name: BASE_THEME_NAME
+  #
+  - name: dspace
+    headTags:
+    - tagName: link
+      attributes:
+        rel: icon
+        href: assets/dspace/images/favicons/favicon.ico
+        sizes: any
+    - tagName: link
+      attributes:
+        rel: icon
+        href: assets/dspace/images/favicons/favicon.svg
+        type: image/svg+xml
+    - tagName: link
+      attributes:
+        rel: apple-touch-icon
+        href: assets/dspace/images/favicons/apple-touch-icon.png
+    - tagName: link
+      attributes:
+        rel: manifest
+        href: assets/dspace/images/favicons/manifest.webmanifest
+
+# Whether to enable media viewer for image and/or video Bitstreams (i.e. Bitstreams whose MIME type starts with 'image' or 'video').
+# For images, this enables a gallery viewer where you can zoom or page through images.
+# For videos, this enables embedded video streaming
+mediaViewer:
+  image: false
+  video: false
diff --git a/config/config.yml b/config/config.yml
new file mode 100644
index 0000000000..b5eecd112f
--- /dev/null
+++ b/config/config.yml
@@ -0,0 +1,5 @@
+rest:
+  ssl: true
+  host: api7.dspace.org
+  port: 443
+  nameSpace: /server
diff --git a/cypress.json b/cypress.json
index cded267c48..e06de8e4c5 100644
--- a/cypress.json
+++ b/cypress.json
@@ -5,5 +5,6 @@
   "screenshotsFolder": "cypress/screenshots",
   "pluginsFile": "cypress/plugins/index.ts",
   "fixturesFolder": "cypress/fixtures",
-  "baseUrl": "http://localhost:4000"
+  "baseUrl": "http://localhost:4000",
+  "retries": 2
 }
\ No newline at end of file
diff --git a/cypress/.gitignore b/cypress/.gitignore
new file mode 100644
index 0000000000..99bd2a6312
--- /dev/null
+++ b/cypress/.gitignore
@@ -0,0 +1,2 @@
+screenshots/
+videos/
diff --git a/docs/Configuration.md b/docs/Configuration.md
index f4fff1166c..62fa444cc0 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -1,26 +1,30 @@
 # Configuration
 
-Default configuration file is located in `src/environments/` folder. All configuration options should be listed in the default configuration file `src/environments/environment.common.ts`. Please do not change this file directly! To change the default configuration values, create local files that override the parameters you need to change. You can use `environment.template.ts` as a starting point.
+Default configuration file is located at `config/config.yml`. All configuration options should be listed in the default typescript file `src/config/default-app-config.ts`. Please do not change this file directly! To override the default configuration values, create local files that override the parameters you need to change. You can use `config.example.yml` as a starting point.
 
--	Create a new `environment.dev.ts` file in `src/environments/` for `development` environment;
--	Create a new `environment.prod.ts` file in `src/environments/` for `production` environment;
+-	Create a new `config.(dev or development).yml` file in `config/` for `development` environment;
+-	Create a new `config.(prod or production).yml` file in `config/` for `production` environment;
 
-Some few configuration options can be overridden by setting environment variables. These and the variable names are listed below.
+Alternatively, create a desired app config file at an external location and set the path as environment variable `DSPACE_APP_CONFIG_PATH`.
+
+e.g.
+```
+DSPACE_APP_CONFIG_PATH=/usr/local/dspace/config/config.yml
+```
+
+Configuration options can be overridden by setting environment variables.
 
 ## Nodejs server
 When you start dspace-angular on node, it spins up an http server on which it listens for incoming connections. You can define the ip address and port the server should bind itsself to, and if ssl should be enabled not. By default it listens on `localhost:4000`. If you want it to listen on all your network connections, configure it to bind itself to `0.0.0.0`.
 
 To change this configuration, change the options `ui.host`, `ui.port` and `ui.ssl` in the appropriate configuration file (see above):
-```
-export const environment = {
-  // Angular UI settings.
-  ui: {
-    ssl: false,
-    host: 'localhost',
-    port: 4000,
-    nameSpace: '/'
-  }
-};
+
+```yaml
+ui:
+  ssl: false
+  host: localhost
+  port: 4000
+  nameSpace: /
 ```
 
 Alternately you can set the following environment variables. If any of these are set, it will override all configuration files:
@@ -30,21 +34,24 @@ Alternately you can set the following environment variables. If any of these are
   DSPACE_PORT=4000
   DSPACE_NAMESPACE=/
 ```
+or
+```
+  DSPACE_UI_SSL=true
+  DSPACE_UI_HOST=localhost
+  DSPACE_UI_PORT=4000
+  DSPACE_UI_NAMESPACE=/
+```
 
 ## DSpace's REST endpoint
 dspace-angular connects to your DSpace installation by using its REST endpoint. To do so, you have to define the ip address, port and if ssl should be enabled. You can do this in a configuration file (see above) by adding the following options:
 
-```
-export const environment = {
-  // The REST API server settings.
-  rest: {
-    ssl: true,
-    host: 'api7.dspace.org',
-    port: 443,
-    // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
-    nameSpace: '/server'
-  }
-};
+```yaml
+rest:
+  ssl: true
+  host: api7.dspace.org
+  port: 443
+  nameSpace: /server
+}
 ```
 
 Alternately you can set the following environment variables. If any of these are set, it will override all configuration files:
@@ -55,6 +62,21 @@ Alternately you can set the following environment variables. If any of these are
   DSPACE_REST_NAMESPACE=/server
 ```
 
+## Environment variable naming convention
+
+Settings can be set using the following convention for naming the environment variables:
+
+1. replace all `.` with `_`
+2. convert all characters to upper case
+3. prefix with `DSPACE_`
+
+e.g.
+
+```
+cache.msToLive.default => DSPACE_CACHE_MSTOLIVE_DEFAULT
+auth.ui.timeUntilIdle => DSPACE_AUTH_UI_TIMEUNTILIDLE
+```
+
 ## Supporting analytics services other than Google Analytics
 This project makes use of [Angulartics](https://angulartics.github.io/angulartics2/) to track usage events and send them to Google Analytics. 
 
diff --git a/mock-nodemon.json b/mock-nodemon.json
deleted file mode 100644
index 18fc86bd9d..0000000000
--- a/mock-nodemon.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "watch": ["src/environments/mock-environment.ts"],
-  "ext": "ts",
-  "exec": "ts-node --project ./tsconfig.ts-node.json scripts/set-mock-env.ts"
-}
diff --git a/nodemon.json b/nodemon.json
index 39e9d9aa5b..dec8d9724c 100644
--- a/nodemon.json
+++ b/nodemon.json
@@ -1,6 +1,6 @@
 {
-  "watch": ["src/environments"],
-  "ext": "ts",
-  "ignore": ["src/environments/environment.ts", "src/environments/mock-environment.ts"],
-  "exec": "ts-node --project ./tsconfig.ts-node.json scripts/set-env.ts --dev"
+  "watch": [
+    "config"
+  ],
+  "ext": "json"
 }
diff --git a/package.json b/package.json
index 236845da1a..403973ef98 100644
--- a/package.json
+++ b/package.json
@@ -3,53 +3,40 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "config:dev": "ts-node --project ./tsconfig.ts-node.json scripts/set-env.ts --dev",
-    "config:prod": "ts-node --project ./tsconfig.ts-node.json scripts/set-env.ts --prod",
-    "config:test": "ts-node --project ./tsconfig.ts-node.json scripts/set-mock-env.ts",
-    "config:test:watch": "nodemon --config mock-nodemon.json",
-    "config:dev:watch": "nodemon",
-    "config:check:rest": "yarn run config:prod && ts-node --project ./tsconfig.ts-node.json scripts/test-rest.ts",
-    "config:dev:check:rest": "yarn run config:dev && ts-node --project ./tsconfig.ts-node.json scripts/test-rest.ts",
-    "prestart:dev": "yarn run config:dev",
-    "prebuild": "yarn run config:dev",
-    "pretest": "yarn run config:test",
-    "pretest:watch": "yarn run config:test",
-    "pretest:headless": "yarn run config:test",
-    "prebuild:prod": "yarn run config:prod",
-    "pree2e": "yarn run config:prod",
+    "config:watch": "nodemon",
+    "test:rest": "ts-node --project ./tsconfig.ts-node.json scripts/test-rest.ts",
     "start": "yarn run start:prod",
-    "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
-    "start:dev": "npm-run-all --parallel config:dev:watch serve",
-    "start:prod": "yarn run build:prod && yarn run serve:ssr",
+    "start:dev": "nodemon --exec \"cross-env NODE_ENV=development yarn run serve\"",
+    "start:prod": "yarn run build:prod && cross-env NODE_ENV=production yarn run serve:ssr",
     "start:mirador:prod": "yarn run build:mirador && yarn run start:prod",
+    "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
+    "serve:ssr": "node dist/server/main",
     "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
     "build": "ng build",
     "build:stats": "ng build --stats-json",
     "build:prod": "yarn run build:ssr",
     "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
-    "test:watch": "npm-run-all --parallel config:test:watch test",
-    "test": "ng test --sourceMap=true --watch=true",
-    "test:headless": "ng test --watch=false --sourceMap=true --browsers=ChromeHeadless --code-coverage",
+    "test": "ng test --sourceMap=true --watch=false --configuration test",
+    "test:watch": "nodemon --exec \"ng test --sourceMap=true --watch=true --configuration test\"",
+    "test:headless": "ng test --sourceMap=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
     "lint-fix": "ng lint --fix=true",
     "e2e": "ng e2e",
-    "serve:ssr": "node dist/server/main",
+    "clean:dev:config": "rimraf src/assets/config.json",
     "clean:coverage": "rimraf coverage",
     "clean:dist": "rimraf dist",
     "clean:doc": "rimraf doc",
     "clean:log": "rimraf *.log*",
     "clean:json": "rimraf *.records.json",
-    "clean:bld": "rimraf build",
     "clean:node": "rimraf node_modules",
-    "clean:prod": "yarn run clean:coverage && yarn run clean:doc && yarn run clean:dist && yarn run clean:log && yarn run clean:json && yarn run clean:bld",
-    "clean": "yarn run clean:prod && yarn run clean:env && yarn run clean:node",
-    "clean:env": "rimraf src/environments/environment.ts",
-    "sync-i18n": "yarn run config:dev && ts-node --project ./tsconfig.ts-node.json scripts/sync-i18n-files.ts",
+    "clean:prod": "yarn run clean:dist && yarn run clean:log && yarn run clean:doc && yarn run clean:coverage && yarn run clean:json",
+    "clean": "yarn run clean:prod && yarn run clean:node && yarn run clean:dev:config",
+    "sync-i18n": "ts-node --project ./tsconfig.ts-node.json scripts/sync-i18n-files.ts",
     "build:mirador": "webpack --config webpack/webpack.mirador.config.ts",
-    "merge-i18n": "yarn run config:dev && ts-node --project ./tsconfig.ts-node.json scripts/merge-i18n-files.ts",
-    "postinstall": "ngcc",
+    "merge-i18n": "ts-node --project ./tsconfig.ts-node.json scripts/merge-i18n-files.ts",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run"
+    "cypress:run": "cypress run",
+    "env:yaml": "ts-node --project ./tsconfig.ts-node.json scripts/env-to-yaml.ts"
   },
   "browser": {
     "fs": false,
@@ -74,7 +61,6 @@
     "@angular/platform-browser-dynamic": "~11.2.14",
     "@angular/platform-server": "~11.2.14",
     "@angular/router": "~11.2.14",
-    "@angularclass/bootloader": "1.0.1",
     "@kolkov/ngx-gallery": "^1.2.3",
     "@ng-bootstrap/ng-bootstrap": "9.1.3",
     "@ng-dynamic-forms/core": "^13.0.0",
@@ -102,17 +88,18 @@
     "file-saver": "^2.0.5",
     "filesize": "^6.1.0",
     "font-awesome": "4.7.0",
-    "https": "1.0.0",
     "http-proxy-middleware": "^1.0.5",
+    "https": "1.0.0",
     "js-cookie": "2.2.1",
+    "js-yaml": "^4.1.0",
     "json5": "^2.1.3",
     "jsonschema": "1.4.0",
     "jwt-decode": "^3.1.2",
     "klaro": "^0.7.10",
     "lodash": "^4.17.21",
-    "mirador": "^3.0.0",
+    "mirador": "^3.3.0",
     "mirador-dl-plugin": "^0.13.0",
-    "mirador-share-plugin": "^0.10.0",
+    "mirador-share-plugin": "^0.11.0",
     "moment": "^2.29.1",
     "morgan": "^1.10.0",
     "ng-mocks": "11.11.2",
@@ -125,8 +112,6 @@
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^8.3.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.3",
     "sortablejs": "1.13.0",
@@ -159,6 +144,7 @@
     "codelyzer": "^6.0.0",
     "compression-webpack-plugin": "^3.0.1",
     "copy-webpack-plugin": "^6.4.1",
+    "cross-env": "^7.0.3",
     "css-loader": "3.4.0",
     "cssnano": "^4.1.10",
     "cypress": "8.6.0",
@@ -178,8 +164,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "nodemon": "^2.0.2",
-    "npm-run-all": "^4.1.5",
+    "nodemon": "^2.0.15",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "postcss-apply": "0.11.0",
     "postcss-import": "^12.0.1",
@@ -189,6 +174,8 @@
     "protractor": "^7.0.0",
     "protractor-istanbul-plugin": "2.0.0",
     "raw-loader": "0.5.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
     "rxjs-spy": "^7.5.3",
     "sass-resources-loader": "^2.1.1",
@@ -204,4 +191,4 @@
     "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^4.5.0"
   }
-}
\ No newline at end of file
+}
diff --git a/scripts/env-to-yaml.ts b/scripts/env-to-yaml.ts
new file mode 100644
index 0000000000..edcdfd90b4
--- /dev/null
+++ b/scripts/env-to-yaml.ts
@@ -0,0 +1,39 @@
+import * as fs from 'fs';
+import * as yaml from 'js-yaml';
+import { join } from 'path';
+
+/**
+ * Script to help convert previous version environment.*.ts to yaml.
+ *
+ * Usage (see package.json):
+ * 
+ * yarn env:yaml [relative path to environment.ts file] (optional relative path to write yaml file) *
+ */
+
+const args = process.argv.slice(2);
+if (args[0] === undefined) {
+  console.log(`Usage:\n\tyarn env:yaml [relative path to environment.ts file] (optional relative path to write yaml file)\n`);
+  process.exit(0);
+}
+
+const envFullPath = join(process.cwd(), args[0]);
+
+if (!fs.existsSync(envFullPath)) {
+  console.error(`Error:\n${envFullPath} does not exist\n`);
+  process.exit(1);
+}
+
+try {
+  const env = require(envFullPath);
+
+  const config = yaml.dump(env);
+  if (args[1]) {
+    const ymlFullPath = join(process.cwd(), args[1]);
+    fs.writeFileSync(ymlFullPath, config);
+  } else {
+    console.log(config);
+  }
+} catch (e) {
+  console.error(e);
+}
+
diff --git a/scripts/serve.ts b/scripts/serve.ts
index c69f8e8a21..bf5506b8bd 100644
--- a/scripts/serve.ts
+++ b/scripts/serve.ts
@@ -1,11 +1,14 @@
-import { environment } from '../src/environments/environment';
-
 import * as child from 'child_process';
 
+import { AppConfig } from '../src/config/app-config.interface';
+import { buildAppConfig } from '../src/config/config.server';
+
+const appConfig: AppConfig = buildAppConfig();
+
 /**
- * Calls `ng serve` with the following arguments configured for the UI in the environment file: host, port, nameSpace, ssl
+ * Calls `ng serve` with the following arguments configured for the UI in the app config: host, port, nameSpace, ssl
  */
 child.spawn(
-  `ng serve --host ${environment.ui.host} --port ${environment.ui.port} --servePath ${environment.ui.nameSpace} --ssl ${environment.ui.ssl}`,
-  { stdio:'inherit', shell: true }
+  `ng serve --host ${appConfig.ui.host} --port ${appConfig.ui.port} --serve-path ${appConfig.ui.nameSpace} --ssl ${appConfig.ui.ssl}`,
+  { stdio: 'inherit', shell: true }
 );
diff --git a/scripts/set-env.ts b/scripts/set-env.ts
deleted file mode 100644
index b3516ae68f..0000000000
--- a/scripts/set-env.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { writeFile } from 'fs';
-import { environment as commonEnv } from '../src/environments/environment.common';
-import { GlobalConfig } from '../src/config/global-config.interface';
-import { ServerConfig } from '../src/config/server-config.interface';
-import { hasValue } from '../src/app/shared/empty.util';
-
-// Configure Angular `environment.ts` file path
-const targetPath = './src/environments/environment.ts';
-// Load node modules
-const colors = require('colors');
-require('dotenv').config();
-const merge = require('deepmerge');
-const mergeOptions = { arrayMerge: (destinationArray, sourceArray, options) => sourceArray };
-const environment = process.argv[2];
-let environmentFilePath;
-let production = false;
-
-switch (environment) {
-  case '--prod':
-  case '--production':
-    production = true;
-    console.log(`Building ${colors.red.bold(`production`)} environment`);
-    environmentFilePath = '../src/environments/environment.prod.ts';
-    break;
-  case '--test':
-    console.log(`Building ${colors.blue.bold(`test`)} environment`);
-    environmentFilePath = '../src/environments/environment.test.ts';
-    break;
-  default:
-    console.log(`Building ${colors.green.bold(`development`)} environment`);
-    environmentFilePath = '../src/environments/environment.dev.ts';
-}
-
-const processEnv = {
-  ui: createServerConfig(
-    process.env.DSPACE_HOST,
-    process.env.DSPACE_PORT,
-    process.env.DSPACE_NAMESPACE,
-    process.env.DSPACE_SSL),
-  rest: createServerConfig(
-    process.env.DSPACE_REST_HOST,
-    process.env.DSPACE_REST_PORT,
-    process.env.DSPACE_REST_NAMESPACE,
-    process.env.DSPACE_REST_SSL)
-} as GlobalConfig;
-
-import(environmentFilePath)
-  .then((file) => generateEnvironmentFile(merge.all([commonEnv, file.environment, processEnv], mergeOptions)))
-  .catch(() => {
-    console.log(colors.yellow.bold(`No specific environment file found for ` + environment));
-    generateEnvironmentFile(merge(commonEnv, processEnv, mergeOptions))
-  });
-
-function generateEnvironmentFile(file: GlobalConfig): void {
-  file.production = production;
-  buildBaseUrls(file);
-  const contents = `export const environment = ` + JSON.stringify(file);
-  writeFile(targetPath, contents, (err) => {
-    if (err) {
-      throw console.error(err);
-    } else {
-      console.log(`Angular ${colors.bold('environment.ts')} file generated correctly at ${colors.bold(targetPath)} \n`);
-    }
-  });
-}
-
-// allow to override a few important options by environment variables
-function createServerConfig(host?: string, port?: string, nameSpace?: string, ssl?: string): ServerConfig {
-  const result = {} as any;
-  if (hasValue(host)) {
-    result.host = host;
-  }
-
-  if (hasValue(nameSpace)) {
-    result.nameSpace = nameSpace;
-  }
-
-  if (hasValue(port)) {
-    result.port = Number(port);
-  }
-
-  if (hasValue(ssl)) {
-    result.ssl = ssl.trim().match(/^(true|1|yes)$/i) ? true : false;
-  }
-
-  return result;
-}
-
-function buildBaseUrls(config: GlobalConfig): void {
-  for (const key in config) {
-    if (config.hasOwnProperty(key) && config[key].host) {
-      config[key].baseUrl = [
-        getProtocol(config[key].ssl),
-        getHost(config[key].host),
-        getPort(config[key].port),
-        getNameSpace(config[key].nameSpace)
-      ].join('');
-    }
-  }
-}
-
-function getProtocol(ssl: boolean): string {
-  return ssl ? 'https://' : 'http://';
-}
-
-function getHost(host: string): string {
-  return host;
-}
-
-function getPort(port: number): string {
-  return port ? (port !== 80 && port !== 443) ? ':' + port : '' : '';
-}
-
-function getNameSpace(nameSpace: string): string {
-  return nameSpace ? nameSpace.charAt(0) === '/' ? nameSpace : '/' + nameSpace : '';
-}
diff --git a/scripts/set-mock-env.ts b/scripts/set-mock-env.ts
deleted file mode 100644
index 5271432896..0000000000
--- a/scripts/set-mock-env.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { copyFile } from 'fs';
-
-// Configure Angular `environment.ts` file path
-const sourcePath = './src/environments/mock-environment.ts';
-const targetPath = './src/environments/environment.ts';
-
-// destination.txt will be created or overwritten by default.
-copyFile(sourcePath, targetPath, (err) => {
-  if (err) throw err;
-  console.log(sourcePath + ' was copied to ' + targetPath);
-});
diff --git a/scripts/test-rest.ts b/scripts/test-rest.ts
index b12a9929c2..aa3b64f62b 100644
--- a/scripts/test-rest.ts
+++ b/scripts/test-rest.ts
@@ -1,21 +1,25 @@
 import * as http from 'http';
 import * as https from 'https';
-import { environment } from '../src/environments/environment';
+
+import { AppConfig } from '../src/config/app-config.interface';
+import { buildAppConfig } from '../src/config/config.server';
+ 
+const appConfig: AppConfig = buildAppConfig();
 
 /**
- * Script to test the connection with the configured REST API (in the 'rest' settings of your environment.*.ts)
+ * Script to test the connection with the configured REST API (in the 'rest' settings of your config.*.yaml)
  *
  * This script is useful to test for any Node.js connection issues with your REST API.
  *
- * Usage (see package.json): yarn test:rest-api
+ * Usage (see package.json): yarn test:rest
  */
 
 // Get root URL of configured REST API
-const restUrl = environment.rest.baseUrl + '/api';
+const restUrl = appConfig.rest.baseUrl + '/api';
 console.log(`...Testing connection to REST API at ${restUrl}...\n`);
 
 // If SSL enabled, test via HTTPS, else via HTTP
-if (environment.rest.ssl) {
+if (appConfig.rest.ssl) {
     const req = https.request(restUrl, (res) => {
         console.log(`RESPONSE: ${res.statusCode} ${res.statusMessage} \n`);
         res.on('data', (data) => {
@@ -55,7 +59,7 @@ function checkJSONResponse(responseData: any): any {
         console.log(`\t"dspaceVersion" = ${parsedData.dspaceVersion}`);
         console.log(`\t"dspaceUI" = ${parsedData.dspaceUI}`);
         console.log(`\t"dspaceServer" = ${parsedData.dspaceServer}`);
-        console.log(`\t"dspaceServer" property matches UI's "rest" config? ${(parsedData.dspaceServer === environment.rest.baseUrl)}`);
+        console.log(`\t"dspaceServer" property matches UI's "rest" config? ${(parsedData.dspaceServer === appConfig.rest.baseUrl)}`);
         // Check for "authn" and "sites" in "_links" section as they should always exist (even if no data)!
         const linksFound: string[] = Object.keys(parsedData._links);
         console.log(`\tDoes "/api" endpoint have HAL links ("_links" section)? ${linksFound.includes('authn') && linksFound.includes('sites')}`);
diff --git a/server.ts b/server.ts
index c00bdb5ef5..da3b877bc1 100644
--- a/server.ts
+++ b/server.ts
@@ -19,27 +19,34 @@ import 'zone.js/dist/zone-node';
 import 'reflect-metadata';
 import 'rxjs';
 
-import * as fs from 'fs';
 import * as pem from 'pem';
 import * as https from 'https';
 import * as morgan from 'morgan';
 import * as express from 'express';
 import * as bodyParser from 'body-parser';
 import * as compression from 'compression';
+
+import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 
+import { APP_BASE_HREF } from '@angular/common';
 import { enableProdMode } from '@angular/core';
-import { existsSync } from 'fs';
+
 import { ngExpressEngine } from '@nguniversal/express-engine';
 import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
+
 import { environment } from './src/environments/environment';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import { hasValue, hasNoValue } from './src/app/shared/empty.util';
-import { APP_BASE_HREF } from '@angular/common';
+
 import { UIServerConfig } from './src/config/ui-server-config.interface';
 
 import { ServerAppModule } from './src/main.server';
 
+import { buildAppConfig } from './src/config/config.server';
+import { AppConfig, APP_CONFIG } from './src/config/app-config.interface';
+import { extendEnvironmentWithAppConfig } from './src/config/config.util';
+
 /*
  * Set path for the browser application's dist folder
  */
@@ -51,6 +58,11 @@ const indexHtml = existsSync(join(DIST_FOLDER, 'index.html')) ? 'index.html' : '
 
 const cookieParser = require('cookie-parser');
 
+const appConfig: AppConfig = buildAppConfig(join(DIST_FOLDER, 'assets/config.json'));
+
+// extend environment with app config for server
+extendEnvironmentWithAppConfig(environment, appConfig);
+
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
 
@@ -100,7 +112,11 @@ export function app() {
           provide: RESPONSE,
           useValue: (options as any).req.res,
         },
-      ],
+        {
+          provide: APP_CONFIG,
+          useValue: environment
+        }
+      ]
     })(_, (options as any), callback)
   );
 
@@ -237,14 +253,14 @@ function start() {
   if (environment.ui.ssl) {
     let serviceKey;
     try {
-      serviceKey = fs.readFileSync('./config/ssl/key.pem');
+      serviceKey = readFileSync('./config/ssl/key.pem');
     } catch (e) {
       console.warn('Service key not found at ./config/ssl/key.pem');
     }
 
     let certificate;
     try {
-      certificate = fs.readFileSync('./config/ssl/cert.pem');
+      certificate = readFileSync('./config/ssl/cert.pem');
     } catch (e) {
       console.warn('Certificate not found at ./config/ssl/key.pem');
     }
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 3f2dc45ce7..a892e34a5a 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -36,6 +36,8 @@ import { GoogleAnalyticsService } from './statistics/google-analytics.service';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { getMockThemeService } from './shared/mocks/theme-service.mock';
 import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
+import { APP_CONFIG } from '../config/app-config.interface';
+import { environment } from '../environments/environment';
 
 let comp: AppComponent;
 let fixture: ComponentFixture<AppComponent>;
@@ -83,6 +85,7 @@ describe('App component', () => {
         { provide: LocaleService, useValue: getMockLocaleService() },
         { provide: ThemeService, useValue: getMockThemeService() },
         { provide: BreadcrumbsService, useValue: breadcrumbsServiceSpy },
+        { provide: APP_CONFIG, useValue: environment },
         provideMockStore({ initialState }),
         AppComponent,
         RouteService
@@ -171,7 +174,8 @@ describe('App component', () => {
       TestBed.configureTestingModule(getDefaultTestBedConf());
       TestBed.overrideProvider(ThemeService, {useValue: getMockThemeService('custom')});
       document = TestBed.inject(DOCUMENT);
-      headSpy = jasmine.createSpyObj('head', ['appendChild']);
+      headSpy = jasmine.createSpyObj('head', ['appendChild', 'getElementsByClassName']);
+      headSpy.getElementsByClassName.and.returnValue([]);
       spyOn(document, 'getElementsByTagName').and.returnValue([headSpy]);
       fixture = TestBed.createComponent(AppComponent);
       comp = fixture.componentInstance;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6f06a84144..669411d9aa 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import { distinctUntilChanged, filter, switchMap, take, withLatestFrom } from 'rxjs/operators';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -17,8 +18,10 @@ import {
   Router,
 } from '@angular/router';
 
+import { isEqual } from 'lodash';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { select, Store } from '@ngrx/store';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
 import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 
@@ -31,21 +34,20 @@ import { AuthService } from './core/auth/auth.service';
 import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
 import { MenuService } from './shared/menu/menu.service';
 import { HostWindowService } from './shared/host-window.service';
-import { ThemeConfig } from '../config/theme.model';
+import { HeadTagConfig, ThemeConfig } from '../config/theme.model';
 import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider';
 import { environment } from '../environments/environment';
 import { models } from './core/core.module';
 import { LocaleService } from './core/locale/locale.service';
-import { hasValue, isNotEmpty } from './shared/empty.util';
+import { hasNoValue, hasValue, isNotEmpty } from './shared/empty.util';
 import { KlaroService } from './shared/cookies/klaro.service';
 import { GoogleAnalyticsService } from './statistics/google-analytics.service';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { ThemeService } from './shared/theme-support/theme.service';
 import { BASE_THEME_NAME } from './shared/theme-support/theme.constants';
-import { DEFAULT_THEME_CONFIG } from './shared/theme-support/theme.effects';
 import { BreadcrumbsService } from './breadcrumbs/breadcrumbs.service';
 import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { getDefaultThemeConfig } from '../config/config.util';
+import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
 
 @Component({
   selector: 'ds-app',
@@ -59,7 +61,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   collapsedSidebarWidth: Observable<string>;
   totalSidebarWidth: Observable<string>;
   theme: Observable<ThemeConfig> = of({} as any);
-  notificationOptions = environment.notifications;
+  notificationOptions;
   models;
 
   /**
@@ -88,6 +90,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     @Inject(NativeWindowService) private _window: NativeWindowRef,
     @Inject(DOCUMENT) private document: any,
     @Inject(PLATFORM_ID) private platformId: any,
+    @Inject(APP_CONFIG) private appConfig: AppConfig,
     private themeService: ThemeService,
     private translate: TranslateService,
     private store: Store<HostWindowState>,
@@ -106,6 +109,12 @@ export class AppComponent implements OnInit, AfterViewInit {
     @Optional() private googleAnalyticsService: GoogleAnalyticsService,
   ) {
 
+    if (!isEqual(environment, this.appConfig)) {
+      throw new Error('environment does not match app config!');
+    }
+
+    this.notificationOptions = environment.notifications;
+
     /* Use models object so all decorators are actually called */
     this.models = models;
 
@@ -115,11 +124,14 @@ export class AppComponent implements OnInit, AfterViewInit {
         this.isThemeCSSLoading$.next(true);
       }
       if (hasValue(themeName)) {
-        this.setThemeCss(themeName);
-      } else if (hasValue(DEFAULT_THEME_CONFIG)) {
-        this.setThemeCss(DEFAULT_THEME_CONFIG.name);
+        this.loadGlobalThemeConfig(themeName);
       } else {
-        this.setThemeCss(BASE_THEME_NAME);
+        const defaultThemeConfig = getDefaultThemeConfig();
+        if (hasValue(defaultThemeConfig)) {
+          this.loadGlobalThemeConfig(defaultThemeConfig.name);
+        } else {
+          this.loadGlobalThemeConfig(BASE_THEME_NAME);
+        }
       }
     });
 
@@ -233,6 +245,11 @@ export class AppComponent implements OnInit, AfterViewInit {
     }
   }
 
+  private loadGlobalThemeConfig(themeName: string): void {
+    this.setThemeCss(themeName);
+    this.setHeadTags(themeName);
+  }
+
   /**
    * Update the theme css file in <head>
    *
@@ -241,9 +258,13 @@ export class AppComponent implements OnInit, AfterViewInit {
    */
   private setThemeCss(themeName: string): void {
     const head = this.document.getElementsByTagName('head')[0];
+    if (hasNoValue(head)) {
+      return;
+    }
+
     // Array.from to ensure we end up with an array, not an HTMLCollection, which would be
     // automatically updated if we add nodes later
-    const currentThemeLinks = Array.from(this.document.getElementsByClassName('theme-css'));
+    const currentThemeLinks = Array.from(head.getElementsByClassName('theme-css'));
     const link = this.document.createElement('link');
     link.setAttribute('rel', 'stylesheet');
     link.setAttribute('type', 'text/css');
@@ -265,6 +286,78 @@ export class AppComponent implements OnInit, AfterViewInit {
     head.appendChild(link);
   }
 
+  private setHeadTags(themeName: string): void {
+    const head = this.document.getElementsByTagName('head')[0];
+    if (hasNoValue(head)) {
+      return;
+    }
+
+    // clear head tags
+    const currentHeadTags = Array.from(head.getElementsByClassName('theme-head-tag'));
+    if (hasValue(currentHeadTags)) {
+      currentHeadTags.forEach((currentHeadTag: any) => currentHeadTag.remove());
+    }
+
+    // create new head tags (not yet added to DOM)
+    const headTagFragment = this.document.createDocumentFragment();
+    this.createHeadTags(themeName)
+      .forEach(newHeadTag => headTagFragment.appendChild(newHeadTag));
+
+    // add new head tags to DOM
+    head.appendChild(headTagFragment);
+  }
+
+  private createHeadTags(themeName: string): HTMLElement[] {
+    const themeConfig = this.themeService.getThemeConfigFor(themeName);
+    const headTagConfigs = themeConfig?.headTags;
+
+    if (hasNoValue(headTagConfigs)) {
+      const parentThemeName = themeConfig?.extends;
+      if (hasValue(parentThemeName)) {
+        // inherit the head tags of the parent theme
+        return this.createHeadTags(parentThemeName);
+      }
+      const defaultThemeConfig = getDefaultThemeConfig();
+      const defaultThemeName = defaultThemeConfig.name;
+      if (
+        hasNoValue(defaultThemeName) ||
+        themeName === defaultThemeName ||
+        themeName === BASE_THEME_NAME
+      ) {
+        // last resort, use fallback favicon.ico
+        return [
+          this.createHeadTag({
+            'tagName': 'link',
+            'attributes': {
+              'rel': 'icon',
+              'href': 'assets/images/favicon.ico',
+              'sizes': 'any',
+            }
+          })
+        ];
+      }
+
+      // inherit the head tags of the default theme
+      return this.createHeadTags(defaultThemeConfig.name);
+    }
+
+    return headTagConfigs.map(this.createHeadTag.bind(this));
+  }
+
+  private createHeadTag(headTagConfig: HeadTagConfig): HTMLElement {
+    const tag = this.document.createElement(headTagConfig.tagName);
+
+    if (hasValue(headTagConfig.attributes)) {
+      Object.entries(headTagConfig.attributes)
+        .forEach(([key, value]) => tag.setAttribute(key, value));
+    }
+
+    // 'class' attribute should always be 'theme-head-tag' for removal
+    tag.setAttribute('class', 'theme-head-tag');
+
+    return tag;
+  }
+
   private trackIdleModal() {
     const isIdle$ = this.authService.isUserIdle();
     const isAuthenticated$ = this.authService.isAuthenticated();
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e2cb10691b..98b2d9fe92 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,8 @@
 import { APP_BASE_HREF, CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EffectsModule } from '@ngrx/effects';
@@ -37,7 +39,6 @@ import { NotificationsBoardComponent } from './shared/notifications/notification
 import { SharedModule } from './shared/shared.module';
 import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { environment } from '../environments/environment';
-import { BrowserModule } from '@angular/platform-browser';
 import { ForbiddenComponent } from './forbidden/forbidden.component';
 import { AuthInterceptor } from './core/auth/auth.interceptor';
 import { LocaleInterceptor } from './core/locale/locale.interceptor';
@@ -56,14 +57,19 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 
 import { UUIDService } from './core/shared/uuid.service';
 import { CookieService } from './core/services/cookie.service';
-import { AbstractControl } from '@angular/forms';
 
-export function getBase() {
-  return environment.ui.nameSpace;
+import { AppConfig, APP_CONFIG } from '../config/app-config.interface';
+
+export function getConfig() {
+  return environment;
 }
 
-export function getMetaReducers(): MetaReducer<AppState>[] {
-  return environment.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
+export function getBase(appConfig: AppConfig) {
+  return appConfig.ui.nameSpace;
+}
+
+export function getMetaReducers(appConfig: AppConfig): MetaReducer<AppState>[] {
+  return appConfig.debug ? [...appMetaReducers, ...debugMetaReducers] : appMetaReducers;
 }
 
 /**
@@ -98,13 +104,19 @@ IMPORTS.push(
 );
 
 const PROVIDERS = [
+  {
+    provide: APP_CONFIG,
+    useFactory: getConfig
+  },
   {
     provide: APP_BASE_HREF,
-    useFactory: (getBase)
+    useFactory: getBase,
+    deps: [APP_CONFIG]
   },
   {
     provide: USER_PROVIDED_META_REDUCERS,
     useFactory: getMetaReducers,
+    deps: [APP_CONFIG]
   },
   {
     provide: RouterStateSerializer,
@@ -117,7 +129,7 @@ const PROVIDERS = [
     useFactory: (store: Store<AppState>,) => {
       return () => store.dispatch(new CheckAuthenticationTokenAction());
     },
-    deps: [ Store ],
+    deps: [Store],
     multi: true
   },
   // register AuthInterceptor as HttpInterceptor
@@ -146,7 +158,7 @@ const PROVIDERS = [
   },
   // insert the unique id of the user that is using the application utilizing cookies
   {
-   provide: APP_INITIALIZER,
+    provide: APP_INITIALIZER,
     useFactory: (cookieService: CookieService, uuidService: UUIDService) => {
       const correlationId = cookieService.get('CORRELATION-ID');
 
@@ -156,8 +168,8 @@ const PROVIDERS = [
       }
       return () => true;
     },
-   multi: true,
-   deps: [ CookieService, UUIDService ]
+    multi: true,
+    deps: [CookieService, UUIDService]
   },
   {
     provide: DYNAMIC_ERROR_MESSAGES_MATCHER,
@@ -195,7 +207,7 @@ const EXPORTS = [
 
 @NgModule({
   imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
+    BrowserModule.withServerTransition({ appId: 'dspace-angular' }),
     ...IMPORTS
   ],
   providers: [
diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html
index beb5039178..51524fde48 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -10,11 +10,11 @@
     </nav>
 
     <ng-template #breadcrumb let-text="text" let-url="url">
-        <li class="breadcrumb-item"><a [routerLink]="url">{{text | translate}}</a></li>
+        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate">{{text | translate}}</a></div></li>
     </ng-template>
 
     <ng-template #activeBreadcrumb let-text="text">
-        <li class="breadcrumb-item active" aria-current="page">{{text | translate}}</li>
+        <li class="breadcrumb-item active" aria-current="page"><div class="breadcrumb-item-limiter"><div class="text-truncate">{{text | translate}}</div></div></li>
     </ng-template>
 </ng-container>
 
diff --git a/src/app/breadcrumbs/breadcrumbs.component.scss b/src/app/breadcrumbs/breadcrumbs.component.scss
index 6967b53de1..412dca87db 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.scss
+++ b/src/app/breadcrumbs/breadcrumbs.component.scss
@@ -10,6 +10,19 @@
   background-color: var(--ds-breadcrumb-bg);
 }
 
+li.breadcrumb-item {
+  display: flex;
+}
+
+.breadcrumb-item-limiter {
+  display: inline-block;
+  max-width: var(--ds-breadcrumb-max-length);
+  > * {
+    max-width: 100%;
+    display: block;
+  }
+}
+
 li.breadcrumb-item > a {
   color: var(--ds-breadcrumb-link-color) !important;
 }
@@ -18,5 +31,6 @@ li.breadcrumb-item.active {
 }
 
 .breadcrumb-item+ .breadcrumb-item::before {
+  display: block;
   content: quote("•") !important;
 }
diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
index b63a7cee20..69387e7534 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
@@ -72,7 +72,7 @@ describe('BreadcrumbsComponent', () => {
     expect(breadcrumbs.length).toBe(3);
     expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
     expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
-    expectBreadcrumb(breadcrumbs[2], 'bc 2', null);
+    expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null);
   });
 
 });
diff --git a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
index 3158c3d7cc..e977b52ad6 100644
--- a/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
+++ b/src/app/browse-by/browse-by-date-page/browse-by-date-page.component.ts
@@ -12,7 +12,7 @@ import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import { BrowseByType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { environment } from '../../../environments/environment';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
@@ -29,13 +29,13 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
  * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
  * An example would be 'dateissued' for 'dc.date.issued'
  */
-@rendersBrowseBy(BrowseByType.Date)
+@rendersBrowseBy(BrowseByDataType.Date)
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
 
   /**
-   * The default metadata-field to use for determining the lower limit of the StartsWith dropdown options
+   * The default metadata keys to use for determining the lower limit of the StartsWith dropdown options
    */
-  defaultMetadataField = 'dc.date.issued';
+  defaultMetadataKeys = ['dc.date.issued'];
 
   public constructor(protected route: ActivatedRoute,
                      protected browseService: BrowseService,
@@ -59,13 +59,13 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
           return [Object.assign({}, routeParams, queryParams, data), currentPage, currentSort];
         })
       ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
-        const metadataField = params.metadataField || this.defaultMetadataField;
-        this.browseId = params.id || this.defaultBrowseId;
-        this.startsWith = +params.startsWith || params.startsWith;
+        const metadataKeys = params.browseDefinition ? params.browseDefinition.metadataKeys : this.defaultMetadataKeys;
+        this.browseId = params.id || this.defaultBrowseId;
+        this.startsWith = +params.startsWith || params.startsWith;
         const searchOptions = browseParamsToOptions(params, currentPage, currentSort, this.browseId);
         this.updatePageWithItems(searchOptions, this.value);
         this.updateParent(params.scope);
-        this.updateStartsWithOptions(this.browseId, metadataField, params.scope);
+        this.updateStartsWithOptions(this.browseId, metadataKeys, params.scope);
       }));
   }
 
@@ -76,15 +76,15 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
    * extremely long lists with a one-year difference.
    * To determine the change in years, the config found under GlobalConfig.BrowseBy is used for this.
    * @param definition      The metadata definition to fetch the first item for
-   * @param metadataField   The metadata field to fetch the earliest date from (expects a date field)
+   * @param metadataKeys    The metadata fields to fetch the earliest date from (expects a date field)
    * @param scope           The scope under which to fetch the earliest item for
    */
-  updateStartsWithOptions(definition: string, metadataField: string, scope?: string) {
+  updateStartsWithOptions(definition: string, metadataKeys: string[], scope?: string) {
     this.subs.push(
       this.browseService.getFirstItemFor(definition, scope).subscribe((firstItemRD: RemoteData<Item>) => {
         let lowerLimit = environment.browseBy.defaultLowerLimit;
         if (hasValue(firstItemRD.payload)) {
-          const date = firstItemRD.payload.firstMetadataValue(metadataField);
+          const date = firstItemRD.payload.firstMetadataValue(metadataKeys);
           if (hasValue(date)) {
             const dateObj = new Date(date);
             // TODO: it appears that getFullYear (based on local time) is sometimes unreliable. Switching to UTC.
@@ -120,5 +120,4 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
       })
     );
   }
-
 }
diff --git a/src/app/browse-by/browse-by-guard.spec.ts b/src/app/browse-by/browse-by-guard.spec.ts
index 4592f47175..fc483d87e2 100644
--- a/src/app/browse-by/browse-by-guard.spec.ts
+++ b/src/app/browse-by/browse-by-guard.spec.ts
@@ -1,20 +1,25 @@
 import { first } from 'rxjs/operators';
 import { BrowseByGuard } from './browse-by-guard';
 import { of as observableOf } from 'rxjs';
+import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
+import { BrowseDefinition } from '../core/shared/browse-definition.model';
+import { BrowseByDataType } from './browse-by-switcher/browse-by-decorator';
 
 describe('BrowseByGuard', () => {
   describe('canActivate', () => {
     let guard: BrowseByGuard;
     let dsoService: any;
     let translateService: any;
+    let browseDefinitionService: any;
 
     const name = 'An interesting DSO';
     const title = 'Author';
     const field = 'Author';
     const id = 'author';
-    const metadataField = 'dc.contributor';
     const scope = '1234-65487-12354-1235';
     const value = 'Filter';
+    const browseDefinition = Object.assign(new BrowseDefinition(), { type: BrowseByDataType.Metadata, metadataKeys: ['dc.contributor'] });
 
     beforeEach(() => {
       dsoService = {
@@ -24,14 +29,19 @@ describe('BrowseByGuard', () => {
       translateService = {
         instant: () => field
       };
-      guard = new BrowseByGuard(dsoService, translateService);
+
+      browseDefinitionService = {
+        findById: () => createSuccessfulRemoteDataObject$(browseDefinition)
+      };
+
+      guard = new BrowseByGuard(dsoService, translateService, browseDefinitionService);
     });
 
     it('should return true, and sets up the data correctly, with a scope and value', () => {
       const scopedRoute = {
         data: {
           title: field,
-          metadataField,
+          browseDefinition,
         },
         params: {
           id,
@@ -48,7 +58,7 @@ describe('BrowseByGuard', () => {
             const result = {
               title,
               id,
-              metadataField,
+              browseDefinition,
               collection: name,
               field,
               value: '"' + value + '"'
@@ -63,7 +73,7 @@ describe('BrowseByGuard', () => {
       const scopedNoValueRoute = {
         data: {
           title: field,
-          metadataField,
+          browseDefinition,
         },
         params: {
           id,
@@ -80,7 +90,7 @@ describe('BrowseByGuard', () => {
             const result = {
               title,
               id,
-              metadataField,
+              browseDefinition,
               collection: name,
               field,
               value: ''
@@ -95,7 +105,7 @@ describe('BrowseByGuard', () => {
       const route = {
         data: {
           title: field,
-          metadataField,
+          browseDefinition,
         },
         params: {
           id,
@@ -111,7 +121,7 @@ describe('BrowseByGuard', () => {
             const result = {
               title,
               id,
-              metadataField,
+              browseDefinition,
               collection: '',
               field,
               value: '"' + value + '"'
diff --git a/src/app/browse-by/browse-by-guard.ts b/src/app/browse-by/browse-by-guard.ts
index 8ac77bbd64..e4582cb77a 100644
--- a/src/app/browse-by/browse-by-guard.ts
+++ b/src/app/browse-by/browse-by-guard.ts
@@ -2,11 +2,12 @@ import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angul
 import { Injectable } from '@angular/core';
 import { DSpaceObjectDataService } from '../core/data/dspace-object-data.service';
 import { hasNoValue, hasValue } from '../shared/empty.util';
-import { map } from 'rxjs/operators';
-import { getFirstSucceededRemoteData } from '../core/shared/operators';
+import { map, switchMap } from 'rxjs/operators';
+import { getFirstSucceededRemoteData, getFirstSucceededRemoteDataPayload } from '../core/shared/operators';
 import { TranslateService } from '@ngx-translate/core';
-import { of as observableOf } from 'rxjs';
-import { environment } from '../../environments/environment';
+import { Observable, of as observableOf } from 'rxjs';
+import { BrowseDefinitionDataService } from '../core/browse/browse-definition-data.service';
+import { BrowseDefinition } from '../core/shared/browse-definition.model';
 
 @Injectable()
 /**
@@ -15,42 +16,46 @@ import { environment } from '../../environments/environment';
 export class BrowseByGuard implements CanActivate {
 
   constructor(protected dsoService: DSpaceObjectDataService,
-              protected translate: TranslateService) {
+              protected translate: TranslateService,
+              protected browseDefinitionService: BrowseDefinitionDataService) {
   }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const title = route.data.title;
     const id = route.params.id || route.queryParams.id || route.data.id;
-    let metadataField = route.data.metadataField;
-    if (hasNoValue(metadataField) && hasValue(id)) {
-      const config = environment.browseBy.types.find((conf) => conf.id === id);
-      if (hasValue(config) && hasValue(config.metadataField)) {
-        metadataField = config.metadataField;
-      }
+    let browseDefinition$: Observable<BrowseDefinition>;
+    if (hasNoValue(route.data.browseDefinition) && hasValue(id)) {
+      browseDefinition$ = this.browseDefinitionService.findById(id).pipe(getFirstSucceededRemoteDataPayload());
+    } else {
+      browseDefinition$ = observableOf(route.data.browseDefinition);
     }
     const scope = route.queryParams.scope;
     const value = route.queryParams.value;
     const metadataTranslated = this.translate.instant('browse.metadata.' + id);
-    if (hasValue(scope)) {
-      const dsoAndMetadata$ = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteData());
-      return dsoAndMetadata$.pipe(
-        map((dsoRD) => {
-          const name = dsoRD.payload.name;
-          route.data = this.createData(title, id, metadataField, name, metadataTranslated, value, route);
-          return true;
-        })
-      );
-    } else {
-      route.data = this.createData(title, id, metadataField, '', metadataTranslated, value, route);
-      return observableOf(true);
-    }
+    return browseDefinition$.pipe(
+      switchMap((browseDefinition) => {
+        if (hasValue(scope)) {
+          const dsoAndMetadata$ = this.dsoService.findById(scope).pipe(getFirstSucceededRemoteData());
+          return dsoAndMetadata$.pipe(
+            map((dsoRD) => {
+              const name = dsoRD.payload.name;
+              route.data = this.createData(title, id, browseDefinition, name, metadataTranslated, value, route);
+              return true;
+            })
+          );
+        } else {
+          route.data = this.createData(title, id, browseDefinition, '', metadataTranslated, value, route);
+          return observableOf(true);
+        }
+      })
+    );
   }
 
-  private createData(title, id, metadataField, collection, field, value, route) {
+  private createData(title, id, browseDefinition, collection, field, value, route) {
     return Object.assign({}, route.data, {
       title: title,
       id: id,
-      metadataField: metadataField,
+      browseDefinition: browseDefinition,
       collection: collection,
       field: field,
       value: hasValue(value) ? `"${value}"` : ''
diff --git a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
index 3573ffb264..6655f98392 100644
--- a/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
+++ b/src/app/browse-by/browse-by-metadata-page/browse-by-metadata-page.component.ts
@@ -14,7 +14,7 @@ import { getFirstSucceededRemoteData } from '../../core/shared/operators';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
-import { BrowseByType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 
@@ -28,7 +28,7 @@ import { map } from 'rxjs/operators';
  * A metadata definition (a.k.a. browse id) is a short term used to describe one or multiple metadata fields.
  * An example would be 'author' for 'dc.contributor.*'
  */
-@rendersBrowseBy(BrowseByType.Metadata)
+@rendersBrowseBy(BrowseByDataType.Metadata)
 export class BrowseByMetadataPageComponent implements OnInit {
 
   /**
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts b/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts
index f54efb9378..19a6277151 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-decorator.spec.ts
@@ -1,9 +1,9 @@
-import { BrowseByType, rendersBrowseBy } from './browse-by-decorator';
+import { BrowseByDataType, rendersBrowseBy } from './browse-by-decorator';
 
 describe('BrowseByDecorator', () => {
-  const titleDecorator = rendersBrowseBy(BrowseByType.Title);
-  const dateDecorator = rendersBrowseBy(BrowseByType.Date);
-  const metadataDecorator = rendersBrowseBy(BrowseByType.Metadata);
+  const titleDecorator = rendersBrowseBy(BrowseByDataType.Title);
+  const dateDecorator = rendersBrowseBy(BrowseByDataType.Date);
+  const metadataDecorator = rendersBrowseBy(BrowseByDataType.Metadata);
   it('should have a decorator for all types', () => {
     expect(titleDecorator.length).not.toEqual(0);
     expect(dateDecorator.length).not.toEqual(0);
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
index efb4a4a9f4..1ebaa7face 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-decorator.ts
@@ -2,13 +2,13 @@ import { hasNoValue } from '../../shared/empty.util';
 import { InjectionToken } from '@angular/core';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
 
-export enum BrowseByType {
+export enum BrowseByDataType {
   Title = 'title',
-  Metadata = 'metadata',
+  Metadata = 'text',
   Date = 'date'
 }
 
-export const DEFAULT_BROWSE_BY_TYPE = BrowseByType.Metadata;
+export const DEFAULT_BROWSE_BY_TYPE = BrowseByDataType.Metadata;
 
 export const BROWSE_BY_COMPONENT_FACTORY = new InjectionToken<(browseByType) => GenericConstructor<any>>('getComponentByBrowseByType', {
   providedIn: 'root',
@@ -21,7 +21,7 @@ const map = new Map();
  * Decorator used for rendering Browse-By pages by type
  * @param browseByType  The type of page
  */
-export function rendersBrowseBy(browseByType: BrowseByType) {
+export function rendersBrowseBy(browseByType: BrowseByDataType) {
   return function decorator(component: any) {
     if (hasNoValue(map.get(browseByType))) {
       map.set(browseByType, component);
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
index f340237e26..cb82ddb7c4 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.spec.ts
@@ -2,20 +2,46 @@ import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
-import { environment } from '../../../environments/environment';
-import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
+import { BROWSE_BY_COMPONENT_FACTORY, BrowseByDataType } from './browse-by-decorator';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
+import { BehaviorSubject, of as observableOf } from 'rxjs';
 
 describe('BrowseBySwitcherComponent', () => {
   let comp: BrowseBySwitcherComponent;
   let fixture: ComponentFixture<BrowseBySwitcherComponent>;
 
-  const types = environment.browseBy.types;
+  const types = [
+    Object.assign(
+      new BrowseDefinition(), {
+        id: 'title',
+        dataType: BrowseByDataType.Title,
+      }
+    ),
+    Object.assign(
+      new BrowseDefinition(), {
+        id: 'dateissued',
+        dataType: BrowseByDataType.Date,
+        metadataKeys: ['dc.date.issued']
+      }
+    ),
+    Object.assign(
+      new BrowseDefinition(), {
+        id: 'author',
+        dataType: BrowseByDataType.Metadata,
+      }
+    ),
+    Object.assign(
+      new BrowseDefinition(), {
+        id: 'subject',
+        dataType: BrowseByDataType.Metadata,
+      }
+    ),
+  ];
 
-  const params = new BehaviorSubject(createParamsWithId('initialValue'));
+  const data = new BehaviorSubject(createDataWithBrowseDefinition(new BrowseDefinition()));
 
   const activatedRouteStub = {
-    params: params
+    data
   };
 
   beforeEach(waitForAsync(() => {
@@ -34,20 +60,20 @@ describe('BrowseBySwitcherComponent', () => {
     comp = fixture.componentInstance;
   }));
 
-  types.forEach((type) => {
+  types.forEach((type: BrowseDefinition) => {
     describe(`when switching to a browse-by page for "${type.id}"`, () => {
       beforeEach(() => {
-        params.next(createParamsWithId(type.id));
+        data.next(createDataWithBrowseDefinition(type));
         fixture.detectChanges();
       });
 
-      it(`should call getComponentByBrowseByType with type "${type.type}"`, () => {
-        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.type);
+      it(`should call getComponentByBrowseByType with type "${type.dataType}"`, () => {
+        expect((comp as any).getComponentByBrowseByType).toHaveBeenCalledWith(type.dataType);
       });
     });
   });
 });
 
-export function createParamsWithId(id) {
-  return { id: id };
+export function createDataWithBrowseDefinition(browseDefinition) {
+  return { browseDefinition: browseDefinition };
 }
diff --git a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
index 043a4ce90a..cf4c1d9856 100644
--- a/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
+++ b/src/app/browse-by/browse-by-switcher/browse-by-switcher.component.ts
@@ -1,11 +1,10 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
 import { map } from 'rxjs/operators';
 import { BROWSE_BY_COMPONENT_FACTORY } from './browse-by-decorator';
-import { environment } from '../../../environments/environment';
 import { GenericConstructor } from '../../core/shared/generic-constructor';
+import { BrowseDefinition } from '../../core/shared/browse-definition.model';
 
 @Component({
   selector: 'ds-browse-by-switcher',
@@ -26,15 +25,11 @@ export class BrowseBySwitcherComponent implements OnInit {
   }
 
   /**
-   * Fetch the correct browse-by component by using the relevant config from environment.js
+   * Fetch the correct browse-by component by using the relevant config from the route data
    */
   ngOnInit(): void {
-    this.browseByComponent = this.route.params.pipe(
-      map((params) => {
-        const id = params.id;
-        return environment.browseBy.types.find((config: BrowseByTypeConfig) => config.id === id);
-      }),
-      map((config: BrowseByTypeConfig) => this.getComponentByBrowseByType(config.type))
+    this.browseByComponent = this.route.data.pipe(
+      map((data: { browseDefinition: BrowseDefinition }) => this.getComponentByBrowseByType(data.browseDefinition.dataType))
     );
   }
 
diff --git a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
index b3a2ceed00..b4a8331458 100644
--- a/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
+++ b/src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts
@@ -10,7 +10,7 @@ import { BrowseEntrySearchOptions } from '../../core/browse/browse-entry-search-
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { BrowseService } from '../../core/browse/browse.service';
 import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { BrowseByType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
+import { BrowseByDataType, rendersBrowseBy } from '../browse-by-switcher/browse-by-decorator';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { map } from 'rxjs/operators';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
@@ -23,7 +23,7 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
 /**
  * Component for browsing items by title (dc.title)
  */
-@rendersBrowseBy(BrowseByType.Title)
+@rendersBrowseBy(BrowseByDataType.Title)
 export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
 
   public constructor(protected route: ActivatedRoute,
diff --git a/src/app/community-page/edit-community-page/community-authorizations/community-authorizations.component.ts b/src/app/community-page/edit-community-page/community-authorizations/community-authorizations.component.ts
index 8b241af667..7a9f224311 100644
--- a/src/app/community-page/edit-community-page/community-authorizations/community-authorizations.component.ts
+++ b/src/app/community-page/edit-community-page/community-authorizations/community-authorizations.component.ts
@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { first, map } from 'rxjs/operators';
-import { RemoteData } from 'src/app/core/data/remote-data';
-import { DSpaceObject } from 'src/app/core/shared/dspace-object.model';
+import { RemoteData } from '../../../core/data/remote-data';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 
 @Component({
   selector: 'ds-community-authorizations',
diff --git a/src/app/core/browse/browse-definition-data.service.spec.ts b/src/app/core/browse/browse-definition-data.service.spec.ts
index 1127748ca9..d6770f80c0 100644
--- a/src/app/core/browse/browse-definition-data.service.spec.ts
+++ b/src/app/core/browse/browse-definition-data.service.spec.ts
@@ -9,9 +9,11 @@ describe(`BrowseDefinitionDataService`, () => {
     findAll: EMPTY,
     findByHref: EMPTY,
     findAllByHref: EMPTY,
+    findById: EMPTY,
   });
   const hrefAll = 'https://rest.api/server/api/discover/browses';
   const hrefSingle = 'https://rest.api/server/api/discover/browses/author';
+  const id = 'author';
   const options = new FindListOptions();
   const linksToFollow = [
     followLink('entries'),
@@ -44,4 +46,10 @@ describe(`BrowseDefinitionDataService`, () => {
     });
   });
 
+  describe(`findById`, () => {
+    it(`should call findById on DataServiceImpl`, () => {
+      service.findAllByHref(id, options, true, false, ...linksToFollow);
+      expect(dataServiceImplSpy.findAllByHref).toHaveBeenCalledWith(id, options, true, false, ...linksToFollow);
+    });
+  });
 });
diff --git a/src/app/core/browse/browse-definition-data.service.ts b/src/app/core/browse/browse-definition-data.service.ts
index 31338417ca..dd66d8fa53 100644
--- a/src/app/core/browse/browse-definition-data.service.ts
+++ b/src/app/core/browse/browse-definition-data.service.ts
@@ -106,6 +106,21 @@ export class BrowseDefinitionDataService {
   findAllByHref(href: string, findListOptions: FindListOptions = {}, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<BrowseDefinition>[]): Observable<RemoteData<PaginatedList<BrowseDefinition>>> {
     return this.dataService.findAllByHref(href, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
   }
+
+  /**
+   * Returns an observable of {@link RemoteData} of an object, based on its ID, with a list of
+   * {@link FollowLinkConfig}, to automatically resolve {@link HALLink}s of the object
+   * @param id                          ID of object we want to retrieve
+   * @param useCachedVersionIfAvailable If this is true, the request will only be sent if there's
+   *                                    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 linksToFollow               List of {@link FollowLinkConfig} that indicate which
+   *                                    {@link HALLink}s should be automatically resolved
+   */
+  findById(id: string, useCachedVersionIfAvailable = true, reRequestOnStale = true, ...linksToFollow: FollowLinkConfig<BrowseDefinition>[]): Observable<RemoteData<BrowseDefinition>> {
+    return this.dataService.findById(id, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 }
 
 /* tslint:enable:max-classes-per-file */
diff --git a/src/app/core/data/request.models.ts b/src/app/core/data/request.models.ts
index 667e4a0434..a29c99d326 100644
--- a/src/app/core/data/request.models.ts
+++ b/src/app/core/data/request.models.ts
@@ -20,7 +20,7 @@ export enum IdentifierType {
 }
 
 export abstract class RestRequest {
-  public responseMsToLive =  environment.cache.msToLive.default;
+  public responseMsToLive;
   public isMultipart = false;
 
   constructor(
@@ -30,6 +30,7 @@ export abstract class RestRequest {
     public body?: any,
     public options?: HttpOptions,
   ) {
+    this.responseMsToLive = environment.cache.msToLive.default;
   }
 
   getResponseParser(): GenericConstructor<ResponseParsingService> {
diff --git a/src/app/core/shared/browse-definition.model.ts b/src/app/core/shared/browse-definition.model.ts
index 2c08417b6d..68406f3f7d 100644
--- a/src/app/core/shared/browse-definition.model.ts
+++ b/src/app/core/shared/browse-definition.model.ts
@@ -6,6 +6,7 @@ import { BROWSE_DEFINITION } from './browse-definition.resource-type';
 import { HALLink } from './hal-link.model';
 import { ResourceType } from './resource-type';
 import { SortOption } from './sort-option.model';
+import { BrowseByDataType } from '../../browse-by/browse-by-switcher/browse-by-decorator';
 
 @typedObject
 export class BrowseDefinition extends CacheableObject {
@@ -33,6 +34,9 @@ export class BrowseDefinition extends CacheableObject {
   @autoserializeAs('metadata')
   metadataKeys: string[];
 
+  @autoserialize
+  dataType: BrowseByDataType;
+
   get self(): string {
     return this._links.self.href;
   }
diff --git a/src/app/core/shared/hal-endpoint.service.spec.ts b/src/app/core/shared/hal-endpoint.service.spec.ts
index 8b71954cbe..b29b8f662e 100644
--- a/src/app/core/shared/hal-endpoint.service.spec.ts
+++ b/src/app/core/shared/hal-endpoint.service.spec.ts
@@ -89,7 +89,7 @@ describe('HALEndpointService', () => {
   describe('getRootEndpointMap', () => {
     it('should send a new EndpointMapRequest', () => {
       (service as any).getRootEndpointMap();
-      const expected = new EndpointMapRequest(requestService.generateRequestId(), environment.rest.baseUrl + 'api');
+      const expected = new EndpointMapRequest(requestService.generateRequestId(), `${environment.rest.baseUrl}/api`);
       expect(requestService.send).toHaveBeenCalledWith(expected, true);
     });
 
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
index fa4c06d36a..6d88c9761b 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
index 71aeb79c35..b7cb645e31 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
index 05db5b8702..988fb2d4b5 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title"
+            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
diff --git a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
index ae1d8c7510..d711ad7c18 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
@@ -1,10 +1,10 @@
 <ds-truncatable [id]="dso.id">
     <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title"
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
        [innerHTML]="dsoTitle"></a>
     <span *ngIf="linkType == linkTypes.None"
-          class="lead item-list-title"
+          class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <!--<span class="text-muted">-->
     <!--<ds-truncatable-part [id]="dso.id" [minLines]="1">-->
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
index 62014f06bd..ccb37eb6ac 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html
@@ -1,18 +1,24 @@
 <ng-template #bitstreamView>
   <div class="{{columnSizes.columns[0].buildClasses()}} row-element d-flex">
     <ng-content select="[slot=drag-handle]"></ng-content>
-    <div class="float-left d-flex align-items-center">
-      {{ bitstreamName }}
+    <div class="float-left d-flex align-items-center overflow-hidden">
+      <span class="text-truncate">
+        {{ bitstreamName }}
+      </span>
     </div>
   </div>
   <div class="{{columnSizes.columns[1].buildClasses()}} row-element d-flex align-items-center">
     <div class="w-100">
+      <span class="text-truncate">
       {{ bitstream?.firstMetadataValue('dc.description') }}
+      </span>
     </div>
   </div>
   <div class="{{columnSizes.columns[2].buildClasses()}} row-element d-flex align-items-center">
     <div class="text-center w-100">
-      {{ (format$ | async)?.shortDescription }}
+        <span class="text-truncate">
+            {{ (format$ | async)?.shortDescription }}
+        </span>
     </div>
   </div>
   <div class="{{columnSizes.columns[3].buildClasses()}} row-element d-flex align-items-center">
diff --git a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html b/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
index fe46906f47..f5543af971 100644
--- a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
+++ b/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
@@ -26,7 +26,7 @@
 <td class="w-100">
     <div class="value-field">
         <div *ngIf="!(editable | async)">
-            <span>{{metadata?.value}}</span>
+            <span class="dont-break-out">{{metadata?.value}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
             <textarea class="form-control" type="textarea" attr.aria-labelledby="fieldValue" [(ngModel)]="metadata.value" [dsDebounce]
diff --git a/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html b/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
index b5d7c118dd..9091beb6c7 100644
--- a/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
+++ b/src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html
@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <a *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value">
+    <a class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value">
        {{ linktext || mdValue.value }}<span *ngIf="!last" [innerHTML]="separator"></span>
     </a>
 </ds-metadata-field-wrapper>
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.html b/src/app/item-page/field-components/metadata-values/metadata-values.component.html
index 980c940255..2dc841bc1b 100644
--- a/src/app/item-page/field-components/metadata-values/metadata-values.component.html
+++ b/src/app/item-page/field-components/metadata-values/metadata-values.component.html
@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <span *ngFor="let mdValue of mdValues; let last=last;">
+    <span class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;">
         {{mdValue.value}}<span *ngIf="!last" [innerHTML]="separator"></span>
     </span>
 </ds-metadata-field-wrapper>
diff --git a/src/app/item-page/simple/item-types/shared/item.component.ts b/src/app/item-page/simple/item-types/shared/item.component.ts
index fa7fba8724..71b0b5b678 100644
--- a/src/app/item-page/simple/item-types/shared/item.component.ts
+++ b/src/app/item-page/simple/item-types/shared/item.component.ts
@@ -36,9 +36,10 @@ export class ItemComponent implements OnInit {
    */
   iiifQuery$: Observable<string>;
 
-  mediaViewer = environment.mediaViewer;
+  mediaViewer;
 
   constructor(protected routeService: RouteService) {
+    this.mediaViewer = environment.mediaViewer;
   }
 
   ngOnInit(): void {
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
index cbe6738241..5aa2bf1786 100644
--- a/src/app/navbar/navbar.component.spec.ts
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -13,15 +13,48 @@ import { MenuService } from '../shared/menu/menu.service';
 import { MenuServiceStub } from '../shared/testing/menu-service.stub';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { BrowseService } from '../core/browse/browse.service';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
+import { buildPaginatedList } from '../core/data/paginated-list.model';
+import { BrowseDefinition } from '../core/shared/browse-definition.model';
+import { BrowseByDataType } from '../browse-by/browse-by-switcher/browse-by-decorator';
 
 let comp: NavbarComponent;
 let fixture: ComponentFixture<NavbarComponent>;
 
 describe('NavbarComponent', () => {
   const menuService = new MenuServiceStub();
-
+  let browseDefinitions;
   // waitForAsync beforeEach
   beforeEach(waitForAsync(() => {
+    browseDefinitions = [
+      Object.assign(
+        new BrowseDefinition(), {
+          id: 'title',
+          dataType: BrowseByDataType.Title,
+        }
+      ),
+      Object.assign(
+        new BrowseDefinition(), {
+          id: 'dateissued',
+          dataType: BrowseByDataType.Date,
+          metadataKeys: ['dc.date.issued']
+        }
+      ),
+      Object.assign(
+        new BrowseDefinition(), {
+          id: 'author',
+          dataType: BrowseByDataType.Metadata,
+        }
+      ),
+      Object.assign(
+        new BrowseDefinition(), {
+          id: 'subject',
+          dataType: BrowseByDataType.Metadata,
+        }
+      ),
+    ];
+
     TestBed.configureTestingModule({
       imports: [
         TranslateModule.forRoot(),
@@ -33,7 +66,8 @@ describe('NavbarComponent', () => {
         Injector,
         { provide: MenuService, useValue: menuService },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
-        { provide: ActivatedRoute, useValue: {} }
+        { provide: ActivatedRoute, useValue: {} },
+        { provide: BrowseService, useValue: { getBrowseDefinitions: createSuccessfulRemoteDataObject$(buildPaginatedList(undefined, browseDefinitions)) } }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index e741cea285..c3b34d12ee 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -6,7 +6,11 @@ import { MenuID, MenuItemType } from '../shared/menu/initial-menus-state';
 import { TextMenuItemModel } from '../shared/menu/menu-item/models/text.model';
 import { LinkMenuItemModel } from '../shared/menu/menu-item/models/link.model';
 import { HostWindowService } from '../shared/host-window.service';
-import { environment } from '../../environments/environment';
+import { BrowseService } from '../core/browse/browse.service';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
+import { PaginatedList } from '../core/data/paginated-list.model';
+import { BrowseDefinition } from '../core/shared/browse-definition.model';
+import { RemoteData } from '../core/data/remote-data';
 
 /**
  * Component representing the public navbar
@@ -26,7 +30,8 @@ export class NavbarComponent extends MenuComponent {
 
   constructor(protected menuService: MenuService,
               protected injector: Injector,
-              public windowService: HostWindowService
+              public windowService: HostWindowService,
+              public browseService: BrowseService
   ) {
     super(menuService, injector);
   }
@@ -52,37 +57,44 @@ export class NavbarComponent extends MenuComponent {
           text: `menu.section.browse_global_communities_and_collections`,
           link: `/community-list`
         } as LinkMenuItemModel
-      },
-      /* News */
-      {
-        id: 'browse_global',
-        active: false,
-        visible: true,
-        index: 1,
-        model: {
-          type: MenuItemType.TEXT,
-          text: 'menu.section.browse_global'
-        } as TextMenuItemModel,
-      },
+      }
     ];
     // Read the different Browse-By types from config and add them to the browse menu
-    const types = environment.browseBy.types;
-    types.forEach((typeConfig) => {
-      menuList.push({
-        id: `browse_global_by_${typeConfig.id}`,
-        parentID: 'browse_global',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: `menu.section.browse_global_by_${typeConfig.id}`,
-          link: `/browse/${typeConfig.id}`
-        } as LinkMenuItemModel
+    this.browseService.getBrowseDefinitions()
+      .pipe(getFirstCompletedRemoteData<PaginatedList<BrowseDefinition>>())
+      .subscribe((browseDefListRD: RemoteData<PaginatedList<BrowseDefinition>>) => {
+        if (browseDefListRD.hasSucceeded) {
+          browseDefListRD.payload.page.forEach((browseDef: BrowseDefinition) => {
+            menuList.push({
+              id: `browse_global_by_${browseDef.id}`,
+              parentID: 'browse_global',
+              active: false,
+              visible: true,
+              model: {
+                type: MenuItemType.LINK,
+                text: `menu.section.browse_global_by_${browseDef.id}`,
+                link: `/browse/${browseDef.id}`
+              } as LinkMenuItemModel
+            });
+          });
+          menuList.push(
+            /* Browse */
+            {
+              id: 'browse_global',
+              active: false,
+              visible: true,
+              index: 1,
+              model: {
+                type: MenuItemType.TEXT,
+                text: 'menu.section.browse_global'
+              } as TextMenuItemModel,
+            }
+          );
+        }
+        menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
+          shouldPersistOnRouteChange: true
+        })));
       });
-    });
-    menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
-      shouldPersistOnRouteChange: true
-    })));
 
   }
 }
diff --git a/src/app/root/root.component.ts b/src/app/root/root.component.ts
index 209f17b520..6ba859ef23 100644
--- a/src/app/root/root.component.ts
+++ b/src/app/root/root.component.ts
@@ -32,7 +32,7 @@ export class RootComponent implements OnInit {
   collapsedSidebarWidth: Observable<string>;
   totalSidebarWidth: Observable<string>;
   theme: Observable<ThemeConfig> = of({} as any);
-  notificationOptions = environment.notifications;
+  notificationOptions;
   models;
 
   /**
@@ -58,6 +58,7 @@ export class RootComponent implements OnInit {
     private menuService: MenuService,
     private windowService: HostWindowService
   ) {
+    this.notificationOptions = environment.notifications;
   }
 
   ngOnInit() {
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html
index 831c70ad11..87337d9084 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.html
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html
@@ -11,8 +11,8 @@
      aria-labelledby="dropdownMenuButton"
      (scroll)="onScroll($event)"
      infiniteScroll
-     [infiniteScrollDistance]="5"
-     [infiniteScrollThrottle]="300"
+     [infiniteScrollDistance]="1.5"
+     [infiniteScrollThrottle]="0"
      [infiniteScrollUpDistance]="1.5"
      [fromRoot]="true"
      [scrollWindow]="false"
@@ -21,7 +21,7 @@
   <button class="dropdown-item disabled" *ngIf="searchListCollection?.length == 0 && !(isLoading | async)">
     {{'submission.sections.general.no-collection' | translate}}
   </button>
-  <ng-container *ngIf="searchListCollection?.length > 0 && !(isLoading | async)">
+  <ng-container *ngIf="searchListCollection?.length > 0">
     <button *ngFor="let listItem of searchListCollection"
             class="dropdown-item collection-item"
             title="{{ listItem.collection.name }}"
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.ts b/src/app/shared/collection-dropdown/collection-dropdown.component.ts
index d7a341d9b6..f39e836361 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.ts
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.ts
@@ -223,20 +223,20 @@ export class CollectionDropdownComponent implements OnInit, OnDestroy {
         switchMap((collectionsRD: RemoteData<PaginatedList<Collection>>) => {
           this.searchComplete.emit();
           if (collectionsRD.hasSucceeded && collectionsRD.payload.totalElements > 0) {
-            if ( (this.searchListCollection.length + findOptions.elementsPerPage) >= collectionsRD.payload.totalElements ) {
+            if (this.searchListCollection.length >= collectionsRD.payload.totalElements) {
               this.hasNextPage = false;
-              this.emitSelectionEvents(collectionsRD);
-              return observableFrom(collectionsRD.payload.page).pipe(
-                mergeMap((collection: Collection) => collection.parentCommunity.pipe(
-                  getFirstSucceededRemoteDataPayload(),
-                  map((community: Community) => ({
-                      communities: [{ id: community.id, name: community.name }],
-                      collection: { id: collection.id, uuid: collection.id, name: collection.name }
-                    })
-                  ))),
-                reduce((acc: any, value: any) => [...acc, value], []),
-              );
             }
+            this.emitSelectionEvents(collectionsRD);
+            return observableFrom(collectionsRD.payload.page).pipe(
+              mergeMap((collection: Collection) => collection.parentCommunity.pipe(
+                getFirstSucceededRemoteDataPayload(),
+                map((community: Community) => ({
+                    communities: [{ id: community.id, name: community.name }],
+                    collection: { id: collection.id, uuid: collection.id, name: collection.name }
+                  })
+                ))),
+              reduce((acc: any, value: any) => [...acc, value], []),
+            );
           } else {
             this.hasNextPage = false;
             return observableOf([]);
diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts
index b65ad5140c..0527d283f0 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.ts
@@ -2,10 +2,13 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ActivatedRoute, Params, Router } from '@angular/router';
-import { BrowseByTypeConfig } from '../../../../config/browse-by-type-config.interface';
-import { environment } from '../../../../environments/environment';
 import { getCommunityPageRoute } from '../../../community-page/community-page-routing-paths';
 import { getCollectionPageRoute } from '../../../collection-page/collection-page-routing-paths';
+import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
+import { PaginatedList } from '../../../core/data/paginated-list.model';
+import { BrowseDefinition } from '../../../core/shared/browse-definition.model';
+import { RemoteData } from '../../../core/data/remote-data';
+import { BrowseService } from '../../../core/browse/browse.service';
 
 export interface ComColPageNavOption {
   id: string;
@@ -29,10 +32,6 @@ export class ComcolPageBrowseByComponent implements OnInit {
    */
   @Input() id: string;
   @Input() contentType: string;
-  /**
-   * List of currently active browse configurations
-   */
-  types: BrowseByTypeConfig[];
 
   allOptions: ComColPageNavOption[];
 
@@ -40,31 +39,39 @@ export class ComcolPageBrowseByComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private router: Router) {
+    private router: Router,
+    private browseService: BrowseService
+  ) {
   }
 
   ngOnInit(): void {
-    this.allOptions = environment.browseBy.types
-      .map((config: BrowseByTypeConfig) => ({
-        id: config.id,
-        label: `browse.comcol.by.${config.id}`,
-        routerLink: `/browse/${config.id}`,
-        params: { scope: this.id }
-      }));
+    this.browseService.getBrowseDefinitions()
+      .pipe(getFirstCompletedRemoteData<PaginatedList<BrowseDefinition>>())
+      .subscribe((browseDefListRD: RemoteData<PaginatedList<BrowseDefinition>>) => {
+        if (browseDefListRD.hasSucceeded) {
+          this.allOptions = browseDefListRD.payload.page
+            .map((config: BrowseDefinition) => ({
+              id: config.id,
+              label: `browse.comcol.by.${config.id}`,
+              routerLink: `/browse/${config.id}`,
+              params: { scope: this.id }
+            }));
 
-    if (this.contentType === 'collection') {
-      this.allOptions = [ {
-        id: this.id,
-        label: 'collection.page.browse.recent.head',
-        routerLink: getCollectionPageRoute(this.id)
-      }, ...this.allOptions ];
-    } else if (this.contentType === 'community') {
-      this.allOptions = [{
-          id: this.id,
-          label: 'community.all-lists.head',
-          routerLink: getCommunityPageRoute(this.id)
-        }, ...this.allOptions ];
-    }
+          if (this.contentType === 'collection') {
+            this.allOptions = [{
+              id: this.id,
+              label: 'collection.page.browse.recent.head',
+              routerLink: getCollectionPageRoute(this.id)
+            }, ...this.allOptions];
+          } else if (this.contentType === 'community') {
+            this.allOptions = [{
+              id: this.id,
+              label: 'community.all-lists.head',
+              routerLink: getCommunityPageRoute(this.id)
+            }, ...this.allOptions];
+          }
+        }
+      });
 
     this.currentOptionId$ = this.route.params.pipe(
       map((params: Params) => params.id)
diff --git a/src/app/shared/file-download-link/file-download-link.component.html b/src/app/shared/file-download-link/file-download-link.component.html
index 0155c40b0a..ba81ee3d20 100644
--- a/src/app/shared/file-download-link/file-download-link.component.html
+++ b/src/app/shared/file-download-link/file-download-link.component.html
@@ -1,4 +1,4 @@
-<a [routerLink]="(bitstreamPath$| async)?.routerLink" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
+<a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
   <span *ngIf="!(canDownload$ |async)"><i class="fas fa-lock"></i></span>
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
diff --git a/src/app/shared/notifications/notification/notification.component.spec.ts b/src/app/shared/notifications/notification/notification.component.spec.ts
index 2bded57636..1d19464578 100644
--- a/src/app/shared/notifications/notification/notification.component.spec.ts
+++ b/src/app/shared/notifications/notification/notification.component.spec.ts
@@ -10,8 +10,6 @@ import { NotificationsService } from '../notifications.service';
 import { NotificationType } from '../models/notification-type';
 import { notificationsReducer } from '../notifications.reducers';
 import { NotificationOptions } from '../models/notification-options.model';
-import { INotificationBoardOptions } from '../../../../config/notifications-config.interfaces';
-import { GlobalConfig } from '../../../../config/global-config.interface';
 import { Notification } from '../models/notification.model';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../../mocks/translate-loader.mock';
@@ -33,16 +31,6 @@ describe('NotificationComponent', () => {
       /* tslint:disable:no-empty */
       notifications: []
     });
-    const envConfig: GlobalConfig = {
-      notifications: {
-        rtl: false,
-        position: ['top', 'right'],
-        maxStack: 8,
-        timeOut: 5000,
-        clickToClose: true,
-        animate: 'scale'
-      } as INotificationBoardOptions,
-    } as any;
 
     TestBed.configureTestingModule({
       imports: [
diff --git a/src/app/shared/notifications/notifications.service.spec.ts b/src/app/shared/notifications/notifications.service.spec.ts
index bb0f94eede..92c74e0017 100644
--- a/src/app/shared/notifications/notifications.service.spec.ts
+++ b/src/app/shared/notifications/notifications.service.spec.ts
@@ -8,7 +8,6 @@ import { of as observableOf } from 'rxjs';
 import { NewNotificationAction, RemoveAllNotificationsAction, RemoveNotificationAction } from './notifications.actions';
 import { Notification } from './models/notification.model';
 import { NotificationType } from './models/notification-type';
-import { GlobalConfig } from '../../../config/global-config.interface';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../mocks/translate-loader.mock';
 import { storeModuleConfig } from '../../app.reducer';
@@ -19,18 +18,6 @@ describe('NotificationsService test', () => {
     select: observableOf(true)
   });
   let service: NotificationsService;
-  let envConfig: GlobalConfig;
-
-  envConfig = {
-    notifications: {
-      rtl: false,
-      position: ['top', 'right'],
-      maxStack: 8,
-      timeOut: 5000,
-      clickToClose: true,
-      animate: 'scale'
-    },
-  } as any;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
diff --git a/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html b/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html
index 3e017e1ae8..31b670b1a3 100644
--- a/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html
+++ b/src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html
@@ -1,3 +1,3 @@
 <div>
-  <span>{{metadataRepresentation.getValue()}}</span>
+  <span class="dont-break-out">{{metadataRepresentation.getValue()}}</span>
 </div>
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
index 80a4fd81fd..8898632eb5 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
@@ -2,9 +2,9 @@
 
 <ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title"
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
        [innerHTML]="dsoTitle"></a>
-    <span *ngIf="linkType == linkTypes.None" class="lead item-list-title"
+    <span *ngIf="linkType == linkTypes.None" class="lead item-list-title dont-break-out"
           [innerHTML]="dsoTitle"></span>
     <span class="text-muted">
       <ds-truncatable-part [id]="dso.id" [minLines]="1">
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 7f66eb052c..5cc6397118 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
@@ -32,11 +32,11 @@ import { RESOURCE_POLICY } from '../../../core/resource-policy/models/resource-p
 import { EPersonMock } from '../../testing/eperson.mock';
 import { isNotEmptyOperator } from '../../empty.util';
 import { ActivatedRoute, Router } from '@angular/router';
-import { RemoteData } from 'src/app/core/data/remote-data';
+import { RemoteData } from '../../../core/data/remote-data';
 import { RouterMock } from '../../mocks/router.mock';
 import { Store } from '@ngrx/store';
 import { PaginationServiceStub } from '../../testing/pagination-service.stub';
-import { PaginationService } from 'src/app/core/pagination/pagination.service';
+import { PaginationService } from '../../../core/pagination/pagination.service';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreMock } from '../../testing/store.mock';
 
diff --git a/src/app/shared/resource-policies/resource-policies.component.ts b/src/app/shared/resource-policies/resource-policies.component.ts
index 30bd7ce45b..94c928438a 100644
--- a/src/app/shared/resource-policies/resource-policies.component.ts
+++ b/src/app/shared/resource-policies/resource-policies.component.ts
@@ -281,7 +281,7 @@ export class ResourcePoliciesComponent implements OnInit, OnDestroy {
    * Redirect to resource policy creation page
    */
   redirectToResourcePolicyCreatePage(): void {
-    this.router.navigate([`../create`], {
+    this.router.navigate([`./create`], {
       relativeTo: this.route,
       queryParams: {
         policyTargetId: this.resourceUUID,
@@ -296,7 +296,7 @@ export class ResourcePoliciesComponent implements OnInit, OnDestroy {
    * @param policy The resource policy
    */
   redirectToResourcePolicyEditPage(policy: ResourcePolicy): void {
-    this.router.navigate([`../edit`], {
+    this.router.navigate([`./edit`], {
       relativeTo: this.route,
       queryParams: {
         policyId: policy.id
diff --git a/src/app/shared/theme-support/theme.effects.ts b/src/app/shared/theme-support/theme.effects.ts
index e120257728..df74818fa8 100644
--- a/src/app/shared/theme-support/theme.effects.ts
+++ b/src/app/shared/theme-support/theme.effects.ts
@@ -2,15 +2,9 @@ import { Injectable } from '@angular/core';
 import { createEffect, Actions, ofType, ROOT_EFFECTS_INIT } from '@ngrx/effects';
 import { map } from 'rxjs/operators';
 import { SetThemeAction } from './theme.actions';
-import { environment } from '../../../environments/environment';
-import { hasValue, hasNoValue } from '../empty.util';
+import { hasValue } from '../empty.util';
 import { BASE_THEME_NAME } from './theme.constants';
-
-export const DEFAULT_THEME_CONFIG = environment.themes.find((themeConfig: any) =>
-  hasNoValue(themeConfig.regex) &&
-  hasNoValue(themeConfig.handle) &&
-  hasNoValue(themeConfig.uuid)
-);
+import { getDefaultThemeConfig } from '../../../config/config.util';
 
 @Injectable()
 export class ThemeEffects {
@@ -21,8 +15,9 @@ export class ThemeEffects {
     this.actions$.pipe(
       ofType(ROOT_EFFECTS_INIT),
       map(() => {
-        if (hasValue(DEFAULT_THEME_CONFIG)) {
-          return new SetThemeAction(DEFAULT_THEME_CONFIG.name);
+        const defaultThemeConfig = getDefaultThemeConfig();
+        if (hasValue(defaultThemeConfig)) {
+          return new SetThemeAction(defaultThemeConfig.name);
         } else {
           return new SetThemeAction(BASE_THEME_NAME);
         }
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 bf1212a6bf..76595c901f 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -1,5 +1,5 @@
 <div class="clamp-{{background}}-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
-    <div class="content">
+    <div class="content dont-break-out">
         <ng-content></ng-content>
     </div>
 </div>
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 f6e0646974..2baa6c1555 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,9 +1,21 @@
 <div>
-  <ds-form *ngIf="formModel"
-           #formRef="formComponent"
-           [formId]="formId"
-           [formModel]="formModel"
-           [displaySubmit]="false"
-           [displayCancel]="false"
-           (dfChange)="onChange($event)"></ds-form>
+  <div class="modal-header">
+    <h4 class="modal-title">{{'submission.sections.upload.edit.title' | translate}}</h4>
+    <button type="button" class="close" (click)="onModalClose()" aria-label="Close" [disabled]="isSaving">
+      <span aria-hidden="true">×</span>
+    </button>
+  </div>
+  <div class="modal-body">
+
+    <ds-form *ngIf="formModel"
+             #formRef="formComponent"
+             [formId]="formId"
+             [formModel]="formModel"
+             [displaySubmit]="!isSaving"
+             [displayCancel]="!isSaving"
+             (submitForm)="onSubmit()"
+             (cancel)="onModalClose()"
+             (dfChange)="onChange($event)"></ds-form>
+
+  </div>
 </div>
diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.spec.ts b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.spec.ts
index a644cf8270..aa03d37eb2 100644
--- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.spec.ts
+++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.spec.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA } from '@angular/core';
-import { waitForAsync, ComponentFixture, inject, TestBed } from '@angular/core/testing';
+import { waitForAsync, ComponentFixture, inject, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
@@ -17,19 +17,37 @@ import { SubmissionService } from '../../../../submission.service';
 import { SubmissionSectionUploadFileEditComponent } from './section-upload-file-edit.component';
 import { POLICY_DEFAULT_WITH_LIST } from '../../section-upload.component';
 import {
-  mockGroup,
   mockSubmissionCollectionId,
   mockSubmissionId,
   mockUploadConfigResponse,
   mockUploadConfigResponseMetadata,
-  mockUploadFiles
+  mockUploadFiles,
+  mockFileFormData,
+  mockSubmissionObject,
 } from '../../../../../shared/mocks/submission.mock';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormComponent } from '../../../../../shared/form/form.component';
 import { FormService } from '../../../../../shared/form/form.service';
 import { getMockFormService } from '../../../../../shared/mocks/form-service.mock';
-import { Group } from '../../../../../core/eperson/models/group.model';
 import { createTestComponent } from '../../../../../shared/testing/utils.test';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { JsonPatchOperationsBuilder } from '../../../../../core/json-patch/builder/json-patch-operations-builder';
+import { SubmissionJsonPatchOperationsServiceStub } from '../../../../../shared/testing/submission-json-patch-operations-service.stub';
+import { SubmissionJsonPatchOperationsService } from '../../../../../core/submission/submission-json-patch-operations.service';
+import { SectionUploadService } from '../../section-upload.service';
+import { getMockSectionUploadService } from '../../../../../shared/mocks/section-upload.service.mock';
+import { FormFieldMetadataValueObject } from '../../../../../shared/form/builder/models/form-field-metadata-value.model';
+import { JsonPatchOperationPathCombiner } from '../../../../../core/json-patch/builder/json-patch-operation-path-combiner';
+import { dateToISOFormat } from '../../../../../shared/date.util';
+import { of } from 'rxjs';
+
+const jsonPatchOpBuilder: any = jasmine.createSpyObj('jsonPatchOpBuilder', {
+  add: jasmine.createSpy('add'),
+  replace: jasmine.createSpy('replace'),
+  remove: jasmine.createSpy('remove'),
+});
+
+const formMetadataMock = ['dc.title', 'dc.description'];
 
 describe('SubmissionSectionUploadFileEditComponent test suite', () => {
 
@@ -38,7 +56,12 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
   let fixture: ComponentFixture<SubmissionSectionUploadFileEditComponent>;
   let submissionServiceStub: SubmissionServiceStub;
   let formbuilderService: any;
+  let operationsBuilder: any;
+  let operationsService: any;
+  let formService: any;
+  let uploadService: any;
 
+  const submissionJsonPatchOperationsServiceStub = new SubmissionJsonPatchOperationsServiceStub();
   const submissionId = mockSubmissionId;
   const sectionId = 'upload';
   const collectionId = mockSubmissionCollectionId;
@@ -48,6 +71,7 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
   const fileIndex = '0';
   const fileId = '123456-test-upload';
   const fileData: any = mockUploadFiles[0];
+  const pathCombiner = new JsonPatchOperationPathCombiner('sections', sectionId, 'files', fileIndex);
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -66,9 +90,15 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
       providers: [
         { provide: FormService, useValue: getMockFormService() },
         { provide: SubmissionService, useClass: SubmissionServiceStub },
+        { provide: SubmissionJsonPatchOperationsService, useValue: submissionJsonPatchOperationsServiceStub },
+        { provide: JsonPatchOperationsBuilder, useValue: jsonPatchOpBuilder },
+        { provide: SectionUploadService, useValue: getMockSectionUploadService() },
         FormBuilderService,
         ChangeDetectorRef,
-        SubmissionSectionUploadFileEditComponent
+        SubmissionSectionUploadFileEditComponent,
+        NgbModal,
+        NgbActiveModal,
+        FormComponent,
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents().then();
@@ -114,6 +144,10 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
       compAsAny = comp;
       submissionServiceStub = TestBed.inject(SubmissionService as any);
       formbuilderService = TestBed.inject(FormBuilderService);
+      operationsBuilder = TestBed.inject(JsonPatchOperationsBuilder);
+      operationsService = TestBed.inject(SubmissionJsonPatchOperationsService);
+      formService = TestBed.inject(FormService);
+      uploadService = TestBed.inject(SectionUploadService);
 
       comp.submissionId = submissionId;
       comp.collectionId = collectionId;
@@ -123,6 +157,9 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
       comp.fileIndex = fileIndex;
       comp.fileId = fileId;
       comp.configMetadataForm = configMetadataForm;
+      comp.formMetadata = formMetadataMock;
+
+      formService.isValid.and.returnValue(of(true));
     });
 
     afterEach(() => {
@@ -135,7 +172,7 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
       comp.fileData = fileData;
       comp.formId = 'testFileForm';
 
-      comp.ngOnChanges();
+      comp.ngOnInit();
 
       expect(comp.formModel).toBeDefined();
       expect(comp.formModel.length).toBe(2);
@@ -165,7 +202,7 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
       comp.fileData = fileData;
       comp.formId = 'testFileForm';
 
-      comp.ngOnChanges();
+      comp.ngOnInit();
 
       const model: DynamicSelectModel<string> = formbuilderService.findById('name', comp.formModel, 0);
       const formGroup = formbuilderService.createFormGroup(comp.formModel);
@@ -186,6 +223,82 @@ describe('SubmissionSectionUploadFileEditComponent test suite', () => {
       comp.setOptions(model, control);
       expect(formbuilderService.findById).toHaveBeenCalledWith('startDate', (model.parent as DynamicFormArrayGroupModel).group);
     });
+
+    it('should retrieve Value From Field properly', () => {
+      let field;
+      expect(compAsAny.retrieveValueFromField(field)).toBeUndefined();
+
+      field = new FormFieldMetadataValueObject('test');
+      expect(compAsAny.retrieveValueFromField(field)).toBe('test');
+
+      field = [new FormFieldMetadataValueObject('test')];
+      expect(compAsAny.retrieveValueFromField(field)).toBe('test');
+    });
+
+    it('should save Bitstream File data properly when form is valid', fakeAsync(() => {
+      compAsAny.formRef = {formGroup: null};
+      compAsAny.fileData = fileData;
+      compAsAny.pathCombiner = pathCombiner;
+      formService.validateAllFormFields.and.callFake(() => null);
+      formService.isValid.and.returnValue(of(true));
+      formService.getFormData.and.returnValue(of(mockFileFormData));
+
+      const response = [
+        Object.assign(mockSubmissionObject, {
+          sections: {
+            upload: {
+              files: mockUploadFiles
+            }
+          }
+        })
+      ];
+      operationsService.jsonPatchByResourceID.and.returnValue(of(response));
+
+      const accessConditionsToSave = [
+        { name: 'openaccess' },
+        { name: 'lease', endDate: dateToISOFormat('2019-01-16T00:00:00Z') },
+        { name: 'embargo', startDate: dateToISOFormat('2019-01-16T00:00:00Z') },
+      ];
+      comp.saveBitstreamData();
+      tick();
+
+      let path = 'metadata/dc.title';
+      expect(operationsBuilder.add).toHaveBeenCalledWith(
+        pathCombiner.getPath(path),
+        mockFileFormData.metadata['dc.title'],
+        true
+      );
+
+      path = 'metadata/dc.description';
+      expect(operationsBuilder.add).toHaveBeenCalledWith(
+        pathCombiner.getPath(path),
+        mockFileFormData.metadata['dc.description'],
+        true
+      );
+
+      path = 'accessConditions';
+      expect(operationsBuilder.add).toHaveBeenCalledWith(
+        pathCombiner.getPath(path),
+        accessConditionsToSave,
+        true
+      );
+
+      expect(uploadService.updateFileData).toHaveBeenCalledWith(submissionId, sectionId, mockUploadFiles[0].uuid, mockUploadFiles[0]);
+
+    }));
+
+    it('should not save Bitstream File data properly when form is not valid', fakeAsync(() => {
+      compAsAny.formRef = {formGroup: null};
+      compAsAny.pathCombiner = pathCombiner;
+      formService.validateAllFormFields.and.callFake(() => null);
+      formService.isValid.and.returnValue(of(false));
+      comp.saveBitstreamData();
+      tick();
+
+      expect(uploadService.updateFileData).not.toHaveBeenCalled();
+
+    }));
+
   });
 });
 
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 96725f151e..3a43e718a0 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
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
 import {
@@ -32,13 +32,23 @@ import {
   BITSTREAM_METADATA_FORM_GROUP_LAYOUT
 } from './section-upload-file-edit.model';
 import { POLICY_DEFAULT_WITH_LIST } from '../../section-upload.component';
-import { isNotEmpty } from '../../../../../shared/empty.util';
+import { hasNoValue, hasValue, isNotEmpty, isNotNull } from '../../../../../shared/empty.util';
 import { SubmissionFormsModel } from '../../../../../core/config/models/config-submission-forms.model';
 import { FormFieldModel } from '../../../../../shared/form/builder/models/form-field.model';
 import { AccessConditionOption } from '../../../../../core/config/models/config-access-condition-option.model';
 import { SubmissionService } from '../../../../submission.service';
 import { FormService } from '../../../../../shared/form/form.service';
 import { FormComponent } from '../../../../../shared/form/form.component';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { filter, mergeMap, take } from 'rxjs/operators';
+import { dateToISOFormat } from '../../../../../shared/date.util';
+import { SubmissionObject } from '../../../../../core/submission/models/submission-object.model';
+import { WorkspaceitemSectionUploadObject } from '../../../../../core/submission/models/workspaceitem-section-upload.model';
+import { JsonPatchOperationsBuilder } from '../../../../../core/json-patch/builder/json-patch-operations-builder';
+import { SubmissionJsonPatchOperationsService } from '../../../../../core/submission/submission-json-patch-operations.service';
+import { JsonPatchOperationPathCombiner } from '../../../../../core/json-patch/builder/json-patch-operation-path-combiner';
+import { SectionUploadService } from '../../section-upload.service';
+import { Subscription } from 'rxjs';
 
 /**
  * This component represents the edit form for bitstream
@@ -48,105 +58,246 @@ import { FormComponent } from '../../../../../shared/form/form.component';
   styleUrls: ['./section-upload-file-edit.component.scss'],
   templateUrl: './section-upload-file-edit.component.html',
 })
-export class SubmissionSectionUploadFileEditComponent implements OnChanges {
-
-  /**
-   * The list of available access condition
-   * @type {Array}
-   */
-  @Input() availableAccessConditionOptions: any[];
-
-  /**
-   * The submission id
-   * @type {string}
-   */
-  @Input() collectionId: string;
-
-  /**
-   * Define if collection access conditions policy type :
-   * POLICY_DEFAULT_NO_LIST : is not possible to define additional access group/s for the single file
-   * POLICY_DEFAULT_WITH_LIST : is possible to define additional access group/s for the single file
-   * @type {number}
-   */
-  @Input() collectionPolicyType: number;
-
-  /**
-   * The configuration for the bitstream's metadata form
-   * @type {SubmissionFormsModel}
-   */
-  @Input() configMetadataForm: SubmissionFormsModel;
-
-  /**
-   * The bitstream's metadata data
-   * @type {WorkspaceitemSectionUploadFileObject}
-   */
-  @Input() fileData: WorkspaceitemSectionUploadFileObject;
-
-  /**
-   * The bitstream id
-   * @type {string}
-   */
-  @Input() fileId: string;
-
-  /**
-   * The bitstream array key
-   * @type {string}
-   */
-  @Input() fileIndex: string;
-
-  /**
-   * The form id
-   * @type {string}
-   */
-  @Input() formId: string;
-
-  /**
-   * The section id
-   * @type {string}
-   */
-  @Input() sectionId: string;
-
-  /**
-   * The submission id
-   * @type {string}
-   */
-  @Input() submissionId: string;
-
-  /**
-   * The form model
-   * @type {DynamicFormControlModel[]}
-   */
-  public formModel: DynamicFormControlModel[];
+export class SubmissionSectionUploadFileEditComponent implements OnInit {
 
   /**
    * The FormComponent reference
    */
   @ViewChild('formRef') public formRef: FormComponent;
 
+  /**
+   * The list of available access condition
+   * @type {Array}
+   */
+  public availableAccessConditionOptions: any[];
+
+  /**
+   * The submission id
+   * @type {string}
+   */
+  public collectionId: string;
+
+  /**
+   * Define if collection access conditions policy type :
+   * POLICY_DEFAULT_NO_LIST : is not possible to define additional access group/s for the single file
+   * POLICY_DEFAULT_WITH_LIST : is possible to define additional access group/s for the single file
+   * @type {number}
+   */
+  public collectionPolicyType: number;
+
+  /**
+   * The configuration for the bitstream's metadata form
+   * @type {SubmissionFormsModel}
+   */
+  public configMetadataForm: SubmissionFormsModel;
+
+  /**
+   * The bitstream's metadata data
+   * @type {WorkspaceitemSectionUploadFileObject}
+   */
+  public fileData: WorkspaceitemSectionUploadFileObject;
+
+  /**
+   * The bitstream id
+   * @type {string}
+   */
+  public fileId: string;
+
+  /**
+   * The bitstream array key
+   * @type {string}
+   */
+  public fileIndex: string;
+
+  /**
+   * The form id
+   * @type {string}
+   */
+  public formId: string;
+
+  /**
+   * The section id
+   * @type {string}
+   */
+  public sectionId: string;
+
+  /**
+   * The submission id
+   * @type {string}
+   */
+  public submissionId: string;
+
+  /**
+   * The list of all available metadata
+   */
+  formMetadata: string[] = [];
+
+  /**
+   * The form model
+   * @type {DynamicFormControlModel[]}
+   */
+  formModel: DynamicFormControlModel[];
+
+  /**
+   * When `true` form controls are deactivated
+   */
+  isSaving = false;
+
+  /**
+   * The [JsonPatchOperationPathCombiner] object
+   * @type {JsonPatchOperationPathCombiner}
+   */
+  protected pathCombiner: JsonPatchOperationPathCombiner;
+
+  protected subscriptions: Subscription[] = [];
+
   /**
    * Initialize instance variables
    *
+   * @param activeModal
    * @param {ChangeDetectorRef} cdr
    * @param {FormBuilderService} formBuilderService
    * @param {FormService} formService
    * @param {SubmissionService} submissionService
+   * @param {JsonPatchOperationsBuilder} operationsBuilder
+   * @param {SubmissionJsonPatchOperationsService} operationsService
+   * @param {SectionUploadService} uploadService
    */
-  constructor(private cdr: ChangeDetectorRef,
-              private formBuilderService: FormBuilderService,
-              private formService: FormService,
-              private submissionService: SubmissionService) {
+  constructor(
+    protected activeModal: NgbActiveModal,
+    private cdr: ChangeDetectorRef,
+    private formBuilderService: FormBuilderService,
+    private formService: FormService,
+    private submissionService: SubmissionService,
+    private operationsBuilder: JsonPatchOperationsBuilder,
+    private operationsService: SubmissionJsonPatchOperationsService,
+    private uploadService: SectionUploadService,
+  ) {
+  }
+
+  /**
+   * Initialize form model values
+   *
+   * @param formModel
+   *    The form model
+   */
+  public initModelData(formModel: DynamicFormControlModel[]) {
+    this.fileData.accessConditions.forEach((accessCondition, index) => {
+      Array.of('name', 'startDate', 'endDate')
+        .filter((key) => accessCondition.hasOwnProperty(key) && isNotEmpty(accessCondition[key]))
+        .forEach((key) => {
+          const metadataModel: any = this.formBuilderService.findById(key, formModel, index);
+          if (metadataModel) {
+            if (metadataModel.type === DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER) {
+              const date = new Date(accessCondition[key]);
+              metadataModel.value = {
+                year: date.getUTCFullYear(),
+                month: date.getUTCMonth() + 1,
+                day: date.getUTCDate()
+              };
+            } else {
+              metadataModel.value = accessCondition[key];
+            }
+          }
+        });
+    });
+  }
+
+  /**
+   * Dispatch form model update when changing an access condition
+   *
+   * @param event
+   *    The event emitted
+   */
+  onChange(event: DynamicFormControlEvent) {
+    if (event.model.id === 'name') {
+      this.setOptions(event.model, event.control);
+    }
+  }
+
+  onModalClose() {
+    this.activeModal.dismiss();
+  }
+
+  onSubmit() {
+    this.isSaving = true;
+    this.saveBitstreamData();
+  }
+
+  /**
+   * Update `startDate`, 'groupUUID' and 'endDate' model
+   *
+   * @param model
+   *    The [[DynamicFormControlModel]] object
+   * @param control
+   *    The [[FormControl]] object
+   */
+  public setOptions(model: DynamicFormControlModel, control: FormControl) {
+    let accessCondition: AccessConditionOption = null;
+    this.availableAccessConditionOptions.filter((element) => element.name === control.value)
+      .forEach((element) => accessCondition = element );
+    if (isNotEmpty(accessCondition)) {
+      const showGroups: boolean = accessCondition.hasStartDate === true || accessCondition.hasEndDate === true;
+
+      const startDateControl: FormControl = control.parent.get('startDate') as FormControl;
+      const endDateControl: FormControl = control.parent.get('endDate') as FormControl;
+
+      // Clear previous state
+      startDateControl?.markAsUntouched();
+      endDateControl?.markAsUntouched();
+
+      startDateControl?.setValue(null);
+      control.parent.markAsDirty();
+      endDateControl?.setValue(null);
+
+      if (showGroups) {
+        if (accessCondition.hasStartDate) {
+          const startDateModel = this.formBuilderService.findById(
+            'startDate',
+            (model.parent as DynamicFormArrayGroupModel).group) as DynamicDateControlModel;
+
+          const min = new Date(accessCondition.maxStartDate);
+          startDateModel.max = {
+            year: min.getUTCFullYear(),
+            month: min.getUTCMonth() + 1,
+            day: min.getUTCDate()
+          };
+        }
+        if (accessCondition.hasEndDate) {
+          const endDateModel = this.formBuilderService.findById(
+            'endDate',
+            (model.parent as DynamicFormArrayGroupModel).group) as DynamicDateControlModel;
+
+          const max = new Date(accessCondition.maxEndDate);
+          endDateModel.max = {
+            year: max.getUTCFullYear(),
+            month: max.getUTCMonth() + 1,
+            day: max.getUTCDate()
+          };
+        }
+      }
+    }
   }
 
   /**
    * Dispatch form model init
    */
-  ngOnChanges() {
+  ngOnInit() {
     if (this.fileData && this.formId) {
       this.formModel = this.buildFileEditForm();
       this.cdr.detectChanges();
     }
   }
 
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  protected retrieveValueFromField(field: any) {
+    const temp = Array.isArray(field) ? field[0] : field;
+    return (temp) ? temp.value : undefined;
+  }
+
   /**
    * Initialize form model
    */
@@ -193,17 +344,17 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
         const showEnd: boolean = condition.hasEndDate === true;
         const showGroups: boolean = showStart || showEnd;
         if (showStart) {
-          hasStart.push({ id: 'name', value: condition.name });
+          hasStart.push({id: 'name', value: condition.name});
         }
         if (showEnd) {
-          hasEnd.push({ id: 'name', value: condition.name });
+          hasEnd.push({id: 'name', value: condition.name});
         }
         if (showGroups) {
-          hasGroups.push({ id: 'name', value: condition.name });
+          hasGroups.push({id: 'name', value: condition.name});
         }
       });
-      const confStart = { relations: [{ match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasStart }] };
-      const confEnd = { relations: [{ match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasEnd }] };
+      const confStart = {relations: [{match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasStart}]};
+      const confEnd = {relations: [{match: MATCH_ENABLED, operator: OR_OPERATOR, when: hasEnd}]};
 
       accessConditionsArrayConfig.groupFactory = () => {
         const type = new DynamicSelectModel(accessConditionTypeModelConfig, BITSTREAM_FORM_ACCESS_CONDITION_TYPE_LAYOUT);
@@ -213,7 +364,9 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
         const startDate = new DynamicDatePickerModel(startDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_START_DATE_LAYOUT);
         const endDate = new DynamicDatePickerModel(endDateConfig, BITSTREAM_FORM_ACCESS_CONDITION_END_DATE_LAYOUT);
         const accessConditionGroupConfig = Object.assign({}, BITSTREAM_ACCESS_CONDITION_GROUP_CONFIG);
-        accessConditionGroupConfig.group = [type, startDate, endDate];
+        accessConditionGroupConfig.group = [type];
+        if (hasStart.length > 0) { accessConditionGroupConfig.group.push(startDate); }
+        if (hasEnd.length > 0) { accessConditionGroupConfig.group.push(endDate); }
         return [new DynamicFormGroupModel(accessConditionGroupConfig, BITSTREAM_ACCESS_CONDITION_GROUP_LAYOUT)];
       };
 
@@ -229,98 +382,95 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges {
   }
 
   /**
-   * Initialize form model values
-   *
-   * @param formModel
-   *    The form model
+   * Save bitstream metadata
    */
-  public initModelData(formModel: DynamicFormControlModel[]) {
-    this.fileData.accessConditions.forEach((accessCondition, index) => {
-      Array.of('name', 'startDate', 'endDate')
-        .filter((key) => accessCondition.hasOwnProperty(key) && isNotEmpty(accessCondition[key]))
-        .forEach((key) => {
-          const metadataModel: any = this.formBuilderService.findById(key, formModel, index);
-          if (metadataModel) {
-            if (metadataModel.type === DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER) {
-              const date = new Date(accessCondition[key]);
-              metadataModel.value = {
-                year: date.getUTCFullYear(),
-                month: date.getUTCMonth() + 1,
-                day: date.getUTCDate()
-              };
-            } else {
-              metadataModel.value = accessCondition[key];
+  saveBitstreamData() {
+    // validate form
+    this.formService.validateAllFormFields(this.formRef.formGroup);
+    const saveBitstreamDataSubscription = this.formService.isValid(this.formId).pipe(
+      take(1),
+      filter((isValid) => isValid),
+      mergeMap(() => this.formService.getFormData(this.formId)),
+      take(1),
+      mergeMap((formData: any) => {
+        // collect bitstream metadata
+        Object.keys((formData.metadata))
+          .filter((key) => isNotEmpty(formData.metadata[key]))
+          .forEach((key) => {
+            const metadataKey = key.replace(/_/g, '.');
+            const path = `metadata/${metadataKey}`;
+            this.operationsBuilder.add(this.pathCombiner.getPath(path), formData.metadata[key], true);
+          });
+        Object.keys((this.fileData.metadata))
+          .filter((key) => isNotEmpty(this.fileData.metadata[key]))
+          .filter((key) => hasNoValue(formData.metadata[key]))
+          .filter((key) => this.formMetadata.includes(key))
+          .forEach((key) => {
+            const metadataKey = key.replace(/_/g, '.');
+            const path = `metadata/${metadataKey}`;
+            this.operationsBuilder.remove(this.pathCombiner.getPath(path));
+          });
+        const accessConditionsToSave = [];
+        formData.accessConditions
+          .map((accessConditions) => accessConditions.accessConditionGroup)
+          .filter((accessCondition) => isNotEmpty(accessCondition))
+          .forEach((accessCondition) => {
+            let accessConditionOpt;
+
+            this.availableAccessConditionOptions
+              .filter((element) => isNotNull(accessCondition.name) && element.name === accessCondition.name[0].value)
+              .forEach((element) => accessConditionOpt = element);
+
+            if (accessConditionOpt) {
+              const currentAccessCondition = Object.assign({}, accessCondition);
+              currentAccessCondition.name = this.retrieveValueFromField(accessCondition.name);
+
+              /* When start and end date fields are deactivated, their values may be still present in formData,
+              therefore it is necessary to delete them if they're not allowed by the current access condition option. */
+              if (!accessConditionOpt.hasStartDate) {
+                delete currentAccessCondition.startDate;
+              } else if (accessCondition.startDate) {
+                const startDate = this.retrieveValueFromField(accessCondition.startDate);
+                currentAccessCondition.startDate = dateToISOFormat(startDate);
+              }
+              if (!accessConditionOpt.hasEndDate) {
+                delete currentAccessCondition.endDate;
+              } else if (accessCondition.endDate) {
+                const endDate = this.retrieveValueFromField(accessCondition.endDate);
+                currentAccessCondition.endDate = dateToISOFormat(endDate);
+              }
+              accessConditionsToSave.push(currentAccessCondition);
             }
-          }
-        });
-    });
-  }
+          });
 
-  /**
-   * Dispatch form model update when changing an access condition
-   *
-   * @param event
-   *    The event emitted
-   */
-  public onChange(event: DynamicFormControlEvent) {
-    if (event.model.id === 'name') {
-      this.setOptions(event.model, event.control);
-    }
-  }
-
-  /**
-   * Update `startDate`, 'groupUUID' and 'endDate' model
-   *
-   * @param model
-   *    The [[DynamicFormControlModel]] object
-   * @param control
-   *    The [[FormControl]] object
-   */
-  public setOptions(model: DynamicFormControlModel, control: FormControl) {
-    let accessCondition: AccessConditionOption = null;
-    this.availableAccessConditionOptions.filter((element) => element.name === control.value)
-      .forEach((element) => accessCondition = element);
-    if (isNotEmpty(accessCondition)) {
-      const showGroups: boolean = accessCondition.hasStartDate === true || accessCondition.hasEndDate === true;
-
-      const startDateControl: FormControl = control.parent.get('startDate') as FormControl;
-      const endDateControl: FormControl = control.parent.get('endDate') as FormControl;
-
-      // Clear previous state
-      startDateControl.markAsUntouched();
-      endDateControl.markAsUntouched();
-
-      startDateControl.setValue(null);
-      control.parent.markAsDirty();
-      endDateControl.setValue(null);
-
-      if (showGroups) {
-        if (accessCondition.hasStartDate) {
-          const startDateModel = this.formBuilderService.findById(
-            'startDate',
-            (model.parent as DynamicFormArrayGroupModel).group) as DynamicDateControlModel;
-
-          const min = new Date(accessCondition.maxStartDate);
-          startDateModel.max = {
-            year: min.getUTCFullYear(),
-            month: min.getUTCMonth() + 1,
-            day: min.getUTCDate()
-          };
+        if (isNotEmpty(accessConditionsToSave)) {
+          this.operationsBuilder.add(this.pathCombiner.getPath('accessConditions'), accessConditionsToSave, true);
         }
-        if (accessCondition.hasEndDate) {
-          const endDateModel = this.formBuilderService.findById(
-            'endDate',
-            (model.parent as DynamicFormArrayGroupModel).group) as DynamicDateControlModel;
 
-          const max = new Date(accessCondition.maxEndDate);
-          endDateModel.max = {
-            year: max.getUTCFullYear(),
-            month: max.getUTCMonth() + 1,
-            day: max.getUTCDate()
-          };
-        }
+        // dispatch a PATCH request to save metadata
+        return this.operationsService.jsonPatchByResourceID(
+          this.submissionService.getSubmissionObjectLinkName(),
+          this.submissionId,
+          this.pathCombiner.rootElement,
+          this.pathCombiner.subRootElement);
+      })
+    ).subscribe((result: SubmissionObject[]) => {
+      if (result[0].sections[this.sectionId]) {
+        const uploadSection = (result[0].sections[this.sectionId] as WorkspaceitemSectionUploadObject);
+        Object.keys(uploadSection.files)
+          .filter((key) => uploadSection.files[key].uuid === this.fileId)
+          .forEach((key) => this.uploadService.updateFileData(
+            this.submissionId, this.sectionId, this.fileId, uploadSection.files[key])
+          );
       }
-    }
+      this.isSaving = false;
+      this.activeModal.close();
+    });
+    this.subscriptions.push(saveBitstreamDataSubscription);
+  }
+
+  private unsubscribeAll() {
+    this.subscriptions.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
 
 }
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 259418c22c..1bfc52529b 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
@@ -8,15 +8,15 @@
       <div class="float-left w-75">
         <h3>{{fileName}} <span class="text-muted">({{fileData?.sizeBytes | dsFileSize}})</span></h3>
       </div>
-      <div class="float-right w-15" [class.sticky-buttons]="!readMode">
-        <ng-container *ngIf="readMode">
+      <div class="float-right w-15">
+        <ng-container>
           <ds-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true" [bitstream]="getBitstream()" [enableRequestACopy]="false">
             <i class="fa fa-download fa-2x text-normal" aria-hidden="true"></i>
           </ds-file-download-link>
           <button class="btn btn-link-focus"
                   [attr.aria-label]="'submission.sections.upload.edit.title' | translate"
                   title="{{ 'submission.sections.upload.edit.title' | translate }}"
-                  (click)="$event.preventDefault();switchMode();">
+                  (click)="$event.preventDefault();editBitstreamData();">
             <i class="fa fa-edit fa-2x text-normal"></i>
           </button>
           <button class="btn btn-link-focus"
@@ -28,40 +28,9 @@
             <i *ngIf="!(processingDelete$ | async)" class="fa fa-trash fa-2x text-danger"></i>
           </button>
         </ng-container>
-        <ng-container *ngIf="!readMode">
-          <button class="btn btn-link-focus"
-                  [attr.aria-label]="'submission.sections.upload.save-metadata' | translate"
-                  title="{{ 'submission.sections.upload.save-metadata' | translate }}"
-                  (click)="saveBitstreamData($event);">
-            <i class="fa fa-save fa-2x text-success"></i>
-          </button>
-          <button class="btn btn-link-focus"
-                  [attr.aria-label]="'submission.sections.upload.undo' | translate"
-                  title="{{ 'submission.sections.upload.undo' | translate }}"
-                  (click)="$event.preventDefault();switchMode();"><i class="fa fa-ban fa-2x text-warning"></i></button>
-          <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)"
-                  (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)" class="fa fa-trash fa-2x text-danger"></i>
-          </button>
-        </ng-container>
       </div>
       <div class="clearfix"></div>
-      <ds-submission-section-upload-file-view *ngIf="readMode"
-                                              [fileData]="fileData"></ds-submission-section-upload-file-view>
-      <ds-submission-section-upload-file-edit *ngIf="!readMode"
-                                              [availableAccessConditionOptions]="availableAccessConditionOptions"
-                                              [collectionId]="collectionId"
-                                              [collectionPolicyType]="collectionPolicyType"
-                                              [configMetadataForm]="configMetadataForm"
-                                              [fileData]="fileData"
-                                              [fileId]="fileId"
-                                              [fileIndex]="fileIndex"
-                                              [formId]="formId"
-                                              [sectionId]="sectionId"></ds-submission-section-upload-file-edit>
+      <ds-submission-section-upload-file-view [fileData]="fileData"></ds-submission-section-upload-file-view>
     </div>
   </div>
 </ng-container>
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.scss b/src/app/submission/sections/upload/file/section-upload-file.component.scss
index 256775eb66..e69de29bb2 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.scss
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.scss
@@ -1,6 +0,0 @@
-.sticky-buttons {
-  position: sticky;
-  top: calc(var(--bs-dropdown-item-padding-x) * 3);
-  z-index: var(--ds-submission-footer-z-index);
-  background-color: rgba(255, 255, 255, .97);
-}
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.spec.ts b/src/app/submission/sections/upload/file/section-upload-file.component.spec.ts
index 39aebf7413..4fea8d3f25 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.spec.ts
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.spec.ts
@@ -1,9 +1,9 @@
 import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { BrowserModule, By } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 
-import { of as observableOf } from 'rxjs';
+import { of, of as observableOf } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { FormService } from '../../../../shared/form/form.service';
@@ -17,10 +17,8 @@ import { SubmissionJsonPatchOperationsService } from '../../../../core/submissio
 import { SubmissionSectionUploadFileComponent } from './section-upload-file.component';
 import { SubmissionServiceStub } from '../../../../shared/testing/submission-service.stub';
 import {
-  mockFileFormData,
   mockSubmissionCollectionId,
   mockSubmissionId,
-  mockSubmissionObject,
   mockUploadConfigResponse,
   mockUploadFiles
 } from '../../../../shared/mocks/submission.mock';
@@ -32,10 +30,19 @@ import { FileSizePipe } from '../../../../shared/utils/file-size-pipe';
 import { POLICY_DEFAULT_WITH_LIST } from '../section-upload.component';
 import { JsonPatchOperationPathCombiner } from '../../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { getMockSectionUploadService } from '../../../../shared/mocks/section-upload.service.mock';
-import { FormFieldMetadataValueObject } from '../../../../shared/form/builder/models/form-field-metadata-value.model';
 import { SubmissionSectionUploadFileEditComponent } from './edit/section-upload-file-edit.component';
 import { FormBuilderService } from '../../../../shared/form/builder/form-builder.service';
-import { dateToISOFormat } from '../../../../shared/date.util';
+
+const configMetadataFormMock = {
+  rows: [{
+    fields: [{
+      selectableMetadata: [
+        {metadata: 'dc.title', label: null, closed: false},
+        {metadata: 'dc.description', label: null, closed: false}
+      ]
+    }]
+  }]
+};
 
 describe('SubmissionSectionUploadFileComponent test suite', () => {
 
@@ -117,6 +124,7 @@ describe('SubmissionSectionUploadFileComponent test suite', () => {
 
       testFixture = createTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
       testComp = testFixture.componentInstance;
+
     });
 
     afterEach(() => {
@@ -124,9 +132,7 @@ describe('SubmissionSectionUploadFileComponent test suite', () => {
     });
 
     it('should create SubmissionSectionUploadFileComponent', inject([SubmissionSectionUploadFileComponent], (app: SubmissionSectionUploadFileComponent) => {
-
       expect(app).toBeDefined();
-
     }));
   });
 
@@ -135,6 +141,7 @@ describe('SubmissionSectionUploadFileComponent test suite', () => {
       fixture = TestBed.createComponent(SubmissionSectionUploadFileComponent);
       comp = fixture.componentInstance;
       compAsAny = comp;
+      compAsAny.configMetadataForm = configMetadataFormMock;
       submissionServiceStub = TestBed.inject(SubmissionService as any);
       uploadService = TestBed.inject(SectionUploadService);
       formService = TestBed.inject(FormService);
@@ -210,96 +217,20 @@ describe('SubmissionSectionUploadFileComponent test suite', () => {
         pathCombiner.subRootElement);
     });
 
-    it('should save Bitstream File data properly when form is valid', fakeAsync(() => {
-      compAsAny.fileEditComp = TestBed.inject(SubmissionSectionUploadFileEditComponent);
-      compAsAny.fileEditComp.formRef = {formGroup: null};
-      compAsAny.pathCombiner = pathCombiner;
-      const event = new Event('click', null);
-      spyOn(comp, 'switchMode');
-      formService.validateAllFormFields.and.callFake(() => null);
-      formService.isValid.and.returnValue(observableOf(true));
-      formService.getFormData.and.returnValue(observableOf(mockFileFormData));
+    it('should open edit modal when edit button is clicked', () => {
+      spyOn(compAsAny, 'editBitstreamData').and.callThrough();
+      comp.fileData = fileData;
 
-      const response = [
-        Object.assign(mockSubmissionObject, {
-          sections: {
-            upload: {
-              files: mockUploadFiles
-            }
-          }
-        })
-      ];
-      operationsService.jsonPatchByResourceID.and.returnValue(observableOf(response));
+      fixture.detectChanges();
 
-      const accessConditionsToSave = [
-        { name: 'openaccess' },
-        { name: 'lease', endDate: dateToISOFormat('2019-01-16T00:00:00Z') },
-        { name: 'embargo', startDate: dateToISOFormat('2019-01-16T00:00:00Z') },
-      ];
-      comp.saveBitstreamData(event);
-      tick();
+      const modalBtn = fixture.debugElement.query(By.css('.fa-edit '));
 
-      let path = 'metadata/dc.title';
-      expect(operationsBuilder.add).toHaveBeenCalledWith(
-        pathCombiner.getPath(path),
-        mockFileFormData.metadata['dc.title'],
-        true
-      );
+      modalBtn.nativeElement.click();
+      fixture.detectChanges();
 
-      path = 'metadata/dc.description';
-      expect(operationsBuilder.add).toHaveBeenCalledWith(
-        pathCombiner.getPath(path),
-        mockFileFormData.metadata['dc.description'],
-        true
-      );
-
-      path = 'accessConditions';
-      expect(operationsBuilder.add).toHaveBeenCalledWith(
-        pathCombiner.getPath(path),
-        accessConditionsToSave,
-        true
-      );
-
-      expect(comp.switchMode).toHaveBeenCalled();
-      expect(uploadService.updateFileData).toHaveBeenCalledWith(submissionId, sectionId, mockUploadFiles[0].uuid, mockUploadFiles[0]);
-
-    }));
-
-    it('should not save Bitstream File data properly when form is not valid', fakeAsync(() => {
-      compAsAny.fileEditComp = TestBed.inject(SubmissionSectionUploadFileEditComponent);
-      compAsAny.fileEditComp.formRef = {formGroup: null};
-      compAsAny.pathCombiner = pathCombiner;
-      const event = new Event('click', null);
-      spyOn(comp, 'switchMode');
-      formService.validateAllFormFields.and.callFake(() => null);
-      formService.isValid.and.returnValue(observableOf(false));
-
-      expect(comp.switchMode).not.toHaveBeenCalled();
-      expect(uploadService.updateFileData).not.toHaveBeenCalled();
-
-    }));
-
-    it('should retrieve Value From Field properly', () => {
-      let field;
-      expect(compAsAny.retrieveValueFromField(field)).toBeUndefined();
-
-      field = new FormFieldMetadataValueObject('test');
-      expect(compAsAny.retrieveValueFromField(field)).toBe('test');
-
-      field = [new FormFieldMetadataValueObject('test')];
-      expect(compAsAny.retrieveValueFromField(field)).toBe('test');
+      expect(compAsAny.editBitstreamData).toHaveBeenCalled();
     });
 
-    it('should switch read mode', () => {
-      comp.readMode = false;
-
-      comp.switchMode();
-      expect(comp.readMode).toBeTruthy();
-
-      comp.switchMode();
-
-      expect(comp.readMode).toBeFalsy();
-    });
   });
 });
 
@@ -314,7 +245,7 @@ class TestComponent {
   availableAccessConditionOptions;
   collectionId = mockSubmissionCollectionId;
   collectionPolicyType;
-  configMetadataForm$;
+  configMetadataForm$ = of(configMetadataFormMock);
   fileIndexes = [];
   fileList = [];
   fileNames = [];
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 ac6c0d70c4..53358d48e2 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
@@ -1,25 +1,23 @@
 import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, ViewChild } from '@angular/core';
 
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { filter, mergeMap, take } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
 import { DynamicFormControlModel, } from '@ng-dynamic-forms/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { SectionUploadService } from '../section-upload.service';
-import { isNotEmpty, isNotNull, isNotUndefined } from '../../../../shared/empty.util';
+import { hasValue, isNotUndefined } from '../../../../shared/empty.util';
 import { FormService } from '../../../../shared/form/form.service';
 import { JsonPatchOperationsBuilder } from '../../../../core/json-patch/builder/json-patch-operations-builder';
 import { JsonPatchOperationPathCombiner } from '../../../../core/json-patch/builder/json-patch-operation-path-combiner';
 import { WorkspaceitemSectionUploadFileObject } from '../../../../core/submission/models/workspaceitem-section-upload-file.model';
 import { SubmissionFormsModel } from '../../../../core/config/models/config-submission-forms.model';
-import { dateToISOFormat } from '../../../../shared/date.util';
 import { SubmissionService } from '../../../submission.service';
 import { HALEndpointService } from '../../../../core/shared/hal-endpoint.service';
 import { SubmissionJsonPatchOperationsService } from '../../../../core/submission/submission-json-patch-operations.service';
-import { SubmissionObject } from '../../../../core/submission/models/submission-object.model';
-import { WorkspaceitemSectionUploadObject } from '../../../../core/submission/models/workspaceitem-section-upload.model';
 import { SubmissionSectionUploadFileEditComponent } from './edit/section-upload-file-edit.component';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
+import { NgbModalOptions } from '@ng-bootstrap/ng-bootstrap/modal/modal-config';
 
 /**
  * This component represents a single bitstream contained in the submission
@@ -87,6 +85,13 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
    */
   @Input() submissionId: string;
 
+  /**
+   * The [[SubmissionSectionUploadFileEditComponent]] reference
+   * @type {SubmissionSectionUploadFileEditComponent}
+   */
+  @ViewChild(SubmissionSectionUploadFileEditComponent) fileEditComp: SubmissionSectionUploadFileEditComponent;
+
+
   /**
    * The bitstream's metadata data
    * @type {WorkspaceitemSectionUploadFileObject}
@@ -130,10 +135,10 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
   protected subscriptions: Subscription[] = [];
 
   /**
-   * The [[SubmissionSectionUploadFileEditComponent]] reference
-   * @type {SubmissionSectionUploadFileEditComponent}
+   * Array containing all the form metadata defined in configMetadataForm
+   * @type {Array}
    */
-  @ViewChild(SubmissionSectionUploadFileEditComponent) fileEditComp: SubmissionSectionUploadFileEditComponent;
+  protected formMetadata: string[] = [];
 
   /**
    * Initialize instance variables
@@ -147,14 +152,16 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
    * @param {SubmissionService} submissionService
    * @param {SectionUploadService} uploadService
    */
-  constructor(private cdr: ChangeDetectorRef,
-              private formService: FormService,
-              private halService: HALEndpointService,
-              private modalService: NgbModal,
-              private operationsBuilder: JsonPatchOperationsBuilder,
-              private operationsService: SubmissionJsonPatchOperationsService,
-              private submissionService: SubmissionService,
-              private uploadService: SectionUploadService) {
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private formService: FormService,
+    private halService: HALEndpointService,
+    private modalService: NgbModal,
+    private operationsBuilder: JsonPatchOperationsBuilder,
+    private operationsService: SubmissionJsonPatchOperationsService,
+    private submissionService: SubmissionService,
+    private uploadService: SectionUploadService,
+  ) {
     this.readMode = true;
   }
 
@@ -182,22 +189,7 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
   ngOnInit() {
     this.formId = this.formService.getUniqueId(this.fileId);
     this.pathCombiner = new JsonPatchOperationPathCombiner('sections', this.sectionId, 'files', this.fileIndex);
-  }
-
-  /**
-   * Delete bitstream from submission
-   */
-  protected deleteFile() {
-    this.operationsBuilder.remove(this.pathCombiner.getPath());
-    this.subscriptions.push(this.operationsService.jsonPatchByResourceID(
-      this.submissionService.getSubmissionObjectLinkName(),
-      this.submissionId,
-      this.pathCombiner.rootElement,
-      this.pathCombiner.subRootElement)
-      .subscribe(() => {
-        this.uploadService.removeUploadedFile(this.submissionId, this.sectionId, this.fileId);
-        this.processingDelete$.next(false);
-      }));
+    this.loadFormMetadata();
   }
 
   /**
@@ -225,98 +217,63 @@ export class SubmissionSectionUploadFileComponent implements OnChanges, OnInit {
     });
   }
 
-  /**
-   * Save bitstream metadata
-   *
-   * @param event
-   *    the click event emitted
-   */
-  public saveBitstreamData(event) {
-    event.preventDefault();
+  editBitstreamData() {
 
-    // validate form
-    this.formService.validateAllFormFields(this.fileEditComp.formRef.formGroup);
-    this.subscriptions.push(this.formService.isValid(this.formId).pipe(
-      take(1),
-      filter((isValid) => isValid),
-      mergeMap(() => this.formService.getFormData(this.formId)),
-      take(1),
-      mergeMap((formData: any) => {
-        // collect bitstream metadata
-        Object.keys((formData.metadata))
-          .filter((key) => isNotEmpty(formData.metadata[key]))
-          .forEach((key) => {
-            const metadataKey = key.replace(/_/g, '.');
-            const path = `metadata/${metadataKey}`;
-            this.operationsBuilder.add(this.pathCombiner.getPath(path), formData.metadata[key], true);
+    const options: NgbModalOptions = {
+      size: 'xl',
+      backdrop: 'static',
+    };
+
+    const activeModal = this.modalService.open(SubmissionSectionUploadFileEditComponent, options);
+
+    activeModal.componentInstance.availableAccessConditionOptions = this.availableAccessConditionOptions;
+    activeModal.componentInstance.collectionId = this.collectionId;
+    activeModal.componentInstance.collectionPolicyType = this.collectionPolicyType;
+    activeModal.componentInstance.configMetadataForm = this.configMetadataForm;
+    activeModal.componentInstance.fileData = this.fileData;
+    activeModal.componentInstance.fileId = this.fileId;
+    activeModal.componentInstance.fileIndex = this.fileIndex;
+    activeModal.componentInstance.formId = this.formId;
+    activeModal.componentInstance.sectionId = this.sectionId;
+    activeModal.componentInstance.formMetadata = this.formMetadata;
+    activeModal.componentInstance.pathCombiner = this.pathCombiner;
+    activeModal.componentInstance.submissionId = this.submissionId;
+
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeAll();
+  }
+
+  unsubscribeAll() {
+    this.subscriptions.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
+  }
+
+  protected loadFormMetadata() {
+    this.configMetadataForm.rows.forEach((row) => {
+        row.fields.forEach((field) => {
+          field.selectableMetadata.forEach((metadatum) => {
+            this.formMetadata.push(metadatum.metadata);
           });
-        const accessConditionsToSave = [];
-        formData.accessConditions
-          .map((accessConditions) => accessConditions.accessConditionGroup)
-          .filter((accessCondition) => isNotEmpty(accessCondition))
-          .forEach((accessCondition) => {
-            let accessConditionOpt;
-
-            this.availableAccessConditionOptions
-              .filter((element) => isNotNull(accessCondition.name) && element.name === accessCondition.name[0].value)
-              .forEach((element) => accessConditionOpt = element);
-
-            if (accessConditionOpt) {
-                accessConditionOpt = Object.assign({}, accessCondition);
-                accessConditionOpt.name = this.retrieveValueFromField(accessCondition.name);
-                if (accessCondition.startDate) {
-                  const startDate = this.retrieveValueFromField(accessCondition.startDate);
-                  accessConditionOpt.startDate = dateToISOFormat(startDate);
-                }
-                if (accessCondition.endDate) {
-                  const endDate = this.retrieveValueFromField(accessCondition.endDate);
-                  accessConditionOpt.endDate = dateToISOFormat(endDate);
-                }
-                accessConditionsToSave.push(accessConditionOpt);
-            }
-          });
-
-        if (isNotEmpty(accessConditionsToSave)) {
-          this.operationsBuilder.add(this.pathCombiner.getPath('accessConditions'), accessConditionsToSave, true);
-        }
-
-        // dispatch a PATCH request to save metadata
-        return this.operationsService.jsonPatchByResourceID(
-          this.submissionService.getSubmissionObjectLinkName(),
-          this.submissionId,
-          this.pathCombiner.rootElement,
-          this.pathCombiner.subRootElement);
-      })
-    ).subscribe((result: SubmissionObject[]) => {
-      if (result[0].sections[this.sectionId]) {
-        const uploadSection = (result[0].sections[this.sectionId] as WorkspaceitemSectionUploadObject);
-        Object.keys(uploadSection.files)
-          .filter((key) => uploadSection.files[key].uuid === this.fileId)
-          .forEach((key) => this.uploadService.updateFileData(
-            this.submissionId, this.sectionId, this.fileId, uploadSection.files[key])
-          );
+        });
       }
-      this.switchMode();
-    }));
+    );
   }
 
   /**
-   * Retrieve field value
-   *
-   * @param field
-   *    the specified field object
+   * Delete bitstream from submission
    */
-  private retrieveValueFromField(field: any) {
-    const temp = Array.isArray(field) ? field[0] : field;
-    return (temp) ? temp.value : undefined;
-  }
-
-  /**
-   * Switch from edit form to metadata view
-   */
-  public switchMode() {
-    this.readMode = !this.readMode;
-    this.cdr.detectChanges();
+  protected deleteFile() {
+    this.operationsBuilder.remove(this.pathCombiner.getPath());
+    this.subscriptions.push(this.operationsService.jsonPatchByResourceID(
+      this.submissionService.getSubmissionObjectLinkName(),
+      this.submissionId,
+      this.pathCombiner.rootElement,
+      this.pathCombiner.subRootElement)
+      .subscribe(() => {
+        this.uploadService.removeUploadedFile(this.submissionId, this.sectionId, this.fileId);
+        this.processingDelete$.next(false);
+      }));
   }
 
 }
diff --git a/src/assets/.gitignore b/src/assets/.gitignore
new file mode 100644
index 0000000000..d344ba6b06
--- /dev/null
+++ b/src/assets/.gitignore
@@ -0,0 +1 @@
+config.json
diff --git a/src/assets/i18n/de.json5 b/src/assets/i18n/de.json5
index 268d8792c8..bb719f202e 100644
--- a/src/assets/i18n/de.json5
+++ b/src/assets/i18n/de.json5
@@ -2182,7 +2182,7 @@
   "item.edit.bitstreams.headers.name": "Name",
   
   // "item.edit.bitstreams.notifications.discarded.content": "Your changes were discarded. To reinstate your changes click the 'Undo' button",
-  "item.edit.bitstreams.notifications.discarded.content": "Ihre Änderungen wurden verworfen. Um Ihre Änderungen wiederherzustellen, klicken Sie auf die Schaltfläche 'Rückgängig',
+  "item.edit.bitstreams.notifications.discarded.content": "Ihre Änderungen wurden verworfen. Um Ihre Änderungen wiederherzustellen, klicken Sie auf die Schaltfläche 'Rückgängig'",
   
   // "item.edit.bitstreams.notifications.discarded.title": "Changes discarded",
   "item.edit.bitstreams.notifications.discarded.title": "Änderungen verworfen",
diff --git a/src/assets/images/favicon.ico b/src/assets/images/favicon.ico
index c73ad96b26..a5dfd5e322 100644
Binary files a/src/assets/images/favicon.ico and b/src/assets/images/favicon.ico differ
diff --git a/src/config/global-config.interface.ts b/src/config/app-config.interface.ts
similarity index 80%
rename from src/config/global-config.interface.ts
rename to src/config/app-config.interface.ts
index d46822eb61..62d0be7216 100644
--- a/src/config/global-config.interface.ts
+++ b/src/config/app-config.interface.ts
@@ -1,3 +1,5 @@
+import { InjectionToken } from '@angular/core';
+import { makeStateKey } from '@angular/platform-browser';
 import { Config } from './config.interface';
 import { ServerConfig } from './server-config.interface';
 import { CacheConfig } from './cache-config.interface';
@@ -6,15 +8,15 @@ import { INotificationBoardOptions } from './notifications-config.interfaces';
 import { SubmissionConfig } from './submission-config.interface';
 import { FormConfig } from './form-config.interfaces';
 import { LangConfig } from './lang-config.interface';
-import { BrowseByConfig } from './browse-by-config.interface';
 import { ItemPageConfig } from './item-page-config.interface';
 import { CollectionPageConfig } from './collection-page-config.interface';
 import { ThemeConfig } from './theme.model';
 import { AuthConfig } from './auth-config.interfaces';
 import { UIServerConfig } from './ui-server-config.interface';
 import { MediaViewerConfig } from './media-viewer-config.interface';
+import { BrowseByConfig } from './browse-by-config.interface';
 
-export interface GlobalConfig extends Config {
+interface AppConfig extends Config {
   ui: UIServerConfig;
   rest: ServerConfig;
   production: boolean;
@@ -33,3 +35,13 @@ export interface GlobalConfig extends Config {
   themes: ThemeConfig[];
   mediaViewer: MediaViewerConfig;
 }
+
+const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');
+
+const APP_CONFIG_STATE = makeStateKey('APP_CONFIG_STATE');
+
+export {
+  AppConfig,
+  APP_CONFIG,
+  APP_CONFIG_STATE
+};
diff --git a/src/config/browse-by-config.interface.ts b/src/config/browse-by-config.interface.ts
index 719e127b4b..6adba66b92 100644
--- a/src/config/browse-by-config.interface.ts
+++ b/src/config/browse-by-config.interface.ts
@@ -1,5 +1,4 @@
 import { Config } from './config.interface';
-import { BrowseByTypeConfig } from './browse-by-type-config.interface';
 
 /**
  * Config that determines how the dropdown list of years are created for browse-by-date components
@@ -19,9 +18,4 @@ export interface BrowseByConfig extends Config {
    * The absolute lowest year to display in the dropdown when no lowest date can be found for all items
    */
   defaultLowerLimit: number;
-
-  /**
-   * A list of all the active Browse-By pages
-   */
-  types: BrowseByTypeConfig[];
 }
diff --git a/src/config/browse-by-type-config.interface.ts b/src/config/browse-by-type-config.interface.ts
deleted file mode 100644
index f15846c210..0000000000
--- a/src/config/browse-by-type-config.interface.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Config } from './config.interface';
-import { BrowseByType } from '../app/browse-by/browse-by-switcher/browse-by-decorator';
-
-/**
- * Config used for rendering Browse-By pages and links
- */
-export interface  BrowseByTypeConfig extends Config {
-  /**
-   * The browse id used for fetching browse data from the rest api
-   * e.g. author
-   */
-  id: string;
-
-  /**
-   * The type of Browse-By page to render
-   */
-  type: BrowseByType | string;
-
-  /**
-   * The metadata field to use for rendering starts-with options (only necessary when type is set to BrowseByType.Date)
-   */
-  metadataField?: string;
-}
diff --git a/src/config/config.server.ts b/src/config/config.server.ts
new file mode 100644
index 0000000000..986fc2a092
--- /dev/null
+++ b/src/config/config.server.ts
@@ -0,0 +1,223 @@
+import * as colors from 'colors';
+import * as fs from 'fs';
+import * as yaml from 'js-yaml';
+import { join } from 'path';
+
+import { AppConfig } from './app-config.interface';
+import { Config } from './config.interface';
+import { DefaultAppConfig } from './default-app-config';
+import { ServerConfig } from './server-config.interface';
+import { mergeConfig } from './config.util';
+import { isNotEmpty } from '../app/shared/empty.util';
+
+const CONFIG_PATH = join(process.cwd(), 'config');
+
+type Environment = 'production' | 'development' | 'test';
+
+const DSPACE = (key: string): string => {
+  return `DSPACE_${key}`;
+};
+
+const ENV = (key: string, prefix = false): any => {
+  return prefix ? process.env[DSPACE(key)] : process.env[key];
+};
+
+const getBooleanFromString = (variable: string): boolean => {
+  return variable === 'true' || variable === '1';
+};
+
+const getNumberFromString = (variable: string): number => {
+  return Number(variable);
+};
+
+const getEnvironment = (): Environment => {
+  // default to production
+  let environment: Environment = 'production';
+  if (isNotEmpty(ENV('NODE_ENV'))) {
+    switch (ENV('NODE_ENV')) {
+      case 'prod':
+      case 'production':
+        environment = 'production';
+        break;
+      case 'test':
+        environment = 'test';
+        break;
+      case 'dev':
+      case 'development':
+        environment = 'development';
+        break;
+      default:
+        console.warn(`Unknown NODE_ENV ${ENV('NODE_ENV')}. Defaulting to production.`);
+    }
+  }
+
+  return environment;
+};
+
+const getLocalConfigPath = (env: Environment) => {
+  // default to config/config.yml
+  let localConfigPath = join(CONFIG_PATH, 'config.yml');
+
+  if (!fs.existsSync(localConfigPath)) {
+    localConfigPath = join(CONFIG_PATH, 'config.yaml');
+  }
+
+  // determine app config filename variations
+  let envVariations;
+  switch (env) {
+    case 'production':
+      envVariations = ['prod', 'production'];
+      break;
+    case 'test':
+      envVariations = ['test'];
+      break;
+    case 'development':
+    default:
+      envVariations = ['dev', 'development']
+  }
+
+  // check if any environment variations of app config exist
+  for (const envVariation of envVariations) {
+    let envLocalConfigPath = join(CONFIG_PATH, `config.${envVariation}.yml`);
+    if (fs.existsSync(envLocalConfigPath)) {
+      localConfigPath = envLocalConfigPath;
+      break;
+    } else {
+      envLocalConfigPath = join(CONFIG_PATH, `config.${envVariation}.yaml`);
+      if (fs.existsSync(envLocalConfigPath)) {
+        localConfigPath = envLocalConfigPath;
+        break;
+      }
+    }
+  }
+
+  return localConfigPath;
+};
+
+const overrideWithConfig = (config: Config, pathToConfig: string) => {
+  try {
+    console.log(`Overriding app config with ${pathToConfig}`);
+    const externalConfig = fs.readFileSync(pathToConfig, 'utf8');
+    mergeConfig(config, yaml.load(externalConfig));
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+const overrideWithEnvironment = (config: Config, key: string = '') => {
+  for (const property in config) {
+    const variable = `${key}${isNotEmpty(key) ? '_' : ''}${property.toUpperCase()}`;
+    const innerConfig = config[property];
+    if (isNotEmpty(innerConfig)) {
+      if (typeof innerConfig === 'object') {
+        overrideWithEnvironment(innerConfig, variable);
+      } else {
+        const value = ENV(variable, true);
+        if (isNotEmpty(value)) {
+          console.log(`Applying environment variable ${DSPACE(variable)} with value ${value}`);
+          switch (typeof innerConfig) {
+            case 'number':
+              config[property] = getNumberFromString(value);
+              break;
+            case 'boolean':
+              config[property] = getBooleanFromString(value);
+              break;
+            case 'string':
+              config[property] = value;
+              break;
+            default:
+              console.warn(`Unsupported environment variable type ${typeof innerConfig} ${DSPACE(variable)}`);
+          }
+        }
+      }
+    }
+  }
+};
+
+
+
+const buildBaseUrl = (config: ServerConfig): void => {
+  config.baseUrl = [
+    config.ssl ? 'https://' : 'http://',
+    config.host,
+    config.port && config.port !== 80 && config.port !== 443 ? `:${config.port}` : '',
+    config.nameSpace && config.nameSpace.startsWith('/') ? config.nameSpace : `/${config.nameSpace}`
+  ].join('');
+};
+
+/**
+ * Build app config with the following chain of override.
+ *
+ * local config -> environment local config -> external config -> environment variable
+ *
+ * Optionally save to file.
+ *
+ * @param destConfigPath optional path to save config file
+ * @returns app config
+ */
+export const buildAppConfig = (destConfigPath?: string): AppConfig => {
+  // start with default app config
+  const appConfig: AppConfig = new DefaultAppConfig();
+
+  // determine which dist app config by environment
+  const env = getEnvironment();
+
+  switch (env) {
+    case 'production':
+      console.log(`Building ${colors.red.bold(`production`)} app config`);
+      break;
+    case 'test':
+      console.log(`Building ${colors.blue.bold(`test`)} app config`);
+      break;
+    default:
+      console.log(`Building ${colors.green.bold(`development`)} app config`);
+  }
+
+  // override with dist config
+  const localConfigPath = getLocalConfigPath(env);
+  if (fs.existsSync(localConfigPath)) {
+    overrideWithConfig(appConfig, localConfigPath);
+  } else {
+    console.warn(`Unable to find dist config file at ${localConfigPath}`);
+  }
+
+  // override with external config if specified by environment variable `DSPACE_APP_CONFIG_PATH`
+  const externalConfigPath = ENV('APP_CONFIG_PATH', true);
+  if (isNotEmpty(externalConfigPath)) {
+    if (fs.existsSync(externalConfigPath)) {
+      overrideWithConfig(appConfig, externalConfigPath);
+    } else {
+      console.warn(`Unable to find external config file at ${externalConfigPath}`);
+    }
+  }
+
+  // override with environment variables
+  overrideWithEnvironment(appConfig);
+
+  // apply existing non convention UI environment variables
+  appConfig.ui.host = isNotEmpty(ENV('HOST', true)) ? ENV('HOST', true) : appConfig.ui.host;
+  appConfig.ui.port = isNotEmpty(ENV('PORT', true)) ? getNumberFromString(ENV('PORT', true)) : appConfig.ui.port;
+  appConfig.ui.nameSpace = isNotEmpty(ENV('NAMESPACE', true)) ? ENV('NAMESPACE', true) : appConfig.ui.nameSpace;
+  appConfig.ui.ssl = isNotEmpty(ENV('SSL', true)) ? getBooleanFromString(ENV('SSL', true)) : appConfig.ui.ssl;
+
+  // apply existing non convention REST environment variables
+  appConfig.rest.host = isNotEmpty(ENV('REST_HOST', true)) ? ENV('REST_HOST', true) : appConfig.rest.host;
+  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;
+
+  // apply build defined production
+  appConfig.production = env === 'production';
+
+  // build base URLs
+  buildBaseUrl(appConfig.ui);
+  buildBaseUrl(appConfig.rest);
+
+  if (isNotEmpty(destConfigPath)) {
+    fs.writeFileSync(destConfigPath, JSON.stringify(appConfig, null, 2));
+
+    console.log(`Angular ${colors.bold('config.json')} file generated correctly at ${colors.bold(destConfigPath)} \n`);
+  }
+
+  return appConfig;
+};
diff --git a/src/config/config.util.spec.ts b/src/config/config.util.spec.ts
new file mode 100644
index 0000000000..7896b1f5c2
--- /dev/null
+++ b/src/config/config.util.spec.ts
@@ -0,0 +1,56 @@
+import { environment } from '../environments/environment.production';
+import { extendEnvironmentWithAppConfig } from './config.util';
+import { DefaultAppConfig } from './default-app-config';
+import { HandleThemeConfig } from './theme.model';
+
+describe('Config Util', () => {
+  describe('extendEnvironmentWithAppConfig', () => {
+    it('should extend prod environment with app config', () => {
+      const appConfig = new DefaultAppConfig();
+      expect(appConfig.cache.msToLive.default).toEqual(15 * 60 * 1000); // 15 minute
+      expect(appConfig.ui.rateLimiter.windowMs).toEqual(1 * 60 * 1000); // 1 minute
+      expect(appConfig.ui.rateLimiter.max).toEqual(500);
+
+      expect(appConfig.submission.autosave.metadata).toEqual([]);
+
+      expect(appConfig.themes.length).toEqual(1);
+      expect(appConfig.themes[0].name).toEqual('dspace');
+
+      const msToLive = 1 * 60 * 1000; // 1 minute
+      appConfig.cache.msToLive.default = msToLive;
+
+      const rateLimiter = {
+        windowMs: 5 * 50 * 1000, // 5 minutes
+        max: 1000
+      };
+      appConfig.ui.rateLimiter = rateLimiter;
+
+      const autoSaveMetadata = [
+        'dc.author',
+        'dc.title'
+      ];
+
+      appConfig.submission.autosave.metadata = autoSaveMetadata;
+
+      const customTheme: HandleThemeConfig = {
+        name: 'custom',
+        handle: '10673/1233'
+      };
+
+      appConfig.themes.push(customTheme);
+
+      extendEnvironmentWithAppConfig(environment, appConfig);
+
+      expect(environment.cache.msToLive.default).toEqual(msToLive);
+      expect(environment.ui.rateLimiter.windowMs).toEqual(rateLimiter.windowMs);
+      expect(environment.ui.rateLimiter.max).toEqual(rateLimiter.max);
+      expect(environment.submission.autosave.metadata[0]).toEqual(autoSaveMetadata[0]);
+      expect(environment.submission.autosave.metadata[1]).toEqual(autoSaveMetadata[1]);
+
+      expect(environment.themes.length).toEqual(2);
+      expect(environment.themes[0].name).toEqual('dspace');
+      expect(environment.themes[1].name).toEqual(customTheme.name);
+      expect((environment.themes[1] as HandleThemeConfig).handle).toEqual(customTheme.handle);
+    });
+  });
+});
diff --git a/src/config/config.util.ts b/src/config/config.util.ts
new file mode 100644
index 0000000000..c45282269c
--- /dev/null
+++ b/src/config/config.util.ts
@@ -0,0 +1,54 @@
+import * as merge from 'deepmerge';
+
+import { environment } from '../environments/environment';
+
+import { hasNoValue } from '../app/shared/empty.util';
+
+import { AppConfig } from './app-config.interface';
+import { ThemeConfig } from './theme.model';
+
+/**
+ * Extend Angular environment with app config.
+ *
+ * @param env       environment object
+ * @param appConfig app config
+ */
+const extendEnvironmentWithAppConfig = (env: any, appConfig: AppConfig): void => {
+  mergeConfig(env, appConfig);
+  console.log(`Environment extended with app config`);
+};
+
+/**
+ * Merge one config into another.
+ *
+ * @param destinationConfig destination config
+ * @param sourceConfig      source config
+ */
+const mergeConfig = (destinationConfig: any, sourceConfig: AppConfig): void => {
+  const mergeOptions = {
+    arrayMerge: (destinationArray, sourceArray, options) => sourceArray
+  };
+  Object.assign(destinationConfig, merge.all([
+    destinationConfig,
+    sourceConfig
+  ], mergeOptions));
+};
+
+/**
+ * Get default theme config from environment.
+ *
+ * @returns default theme config
+ */
+const getDefaultThemeConfig = (): ThemeConfig => {
+  return environment.themes.find((themeConfig: any) =>
+    hasNoValue(themeConfig.regex) &&
+    hasNoValue(themeConfig.handle) &&
+    hasNoValue(themeConfig.uuid)
+  );
+};
+
+export {
+  extendEnvironmentWithAppConfig,
+  mergeConfig,
+  getDefaultThemeConfig
+};
diff --git a/src/environments/environment.common.ts b/src/config/default-app-config.ts
similarity index 58%
rename from src/environments/environment.common.ts
rename to src/config/default-app-config.ts
index b1cbd699a3..9205df1002 100644
--- a/src/environments/environment.common.ts
+++ b/src/config/default-app-config.ts
@@ -1,73 +1,102 @@
-import { GlobalConfig } from '../config/global-config.interface';
-import { NotificationAnimationsType } from '../app/shared/notifications/models/notification-animations-type';
-import { BrowseByType } from '../app/browse-by/browse-by-switcher/browse-by-decorator';
 import { RestRequestMethod } from '../app/core/data/rest-request-method';
+import { NotificationAnimationsType } from '../app/shared/notifications/models/notification-animations-type';
+import { AppConfig } from './app-config.interface';
+import { AuthConfig } from './auth-config.interfaces';
+import { BrowseByConfig } from './browse-by-config.interface';
+import { CacheConfig } from './cache-config.interface';
+import { CollectionPageConfig } from './collection-page-config.interface';
+import { FormConfig } from './form-config.interfaces';
+import { ItemPageConfig } from './item-page-config.interface';
+import { LangConfig } from './lang-config.interface';
+import { MediaViewerConfig } from './media-viewer-config.interface';
+import { INotificationBoardOptions } from './notifications-config.interfaces';
+import { ServerConfig } from './server-config.interface';
+import { SubmissionConfig } from './submission-config.interface';
+import { ThemeConfig } from './theme.model';
+import { UIServerConfig } from './ui-server-config.interface';
+import { UniversalConfig } from './universal-config.interface';
 
-export const environment: GlobalConfig = {
-  production: true,
-  // Angular Universal server settings.
-  // NOTE: these must be "synced" with the 'dspace.ui.url' setting in your backend's local.cfg.
-  ui: {
+export class DefaultAppConfig implements AppConfig {
+  production = false;
+
+  // Angular Universal settings
+  universal: UniversalConfig = {
+    preboot: true,
+    async: true,
+    time: false
+  };
+
+  // NOTE: will log all redux actions and transfers in console
+  debug = false;
+
+  // Angular Universal server settings
+  // NOTE: these must be 'synced' with the 'dspace.ui.url' setting in your backend's local.cfg.
+  ui: UIServerConfig = {
     ssl: false,
     host: 'localhost',
     port: 4000,
     // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
     nameSpace: '/',
-    // The rateLimiter settings limit each IP to a "max" of 500 requests per "windowMs" (1 minute).
+
+    // The rateLimiter settings limit each IP to a 'max' of 500 requests per 'windowMs' (1 minute).
     rateLimiter: {
-      windowMs: 1 * 60 * 1000,   // 1 minute
+      windowMs: 1 * 60 * 1000, // 1 minute
       max: 500 // limit each IP to 500 requests per windowMs
     }
-  },
-  // The REST API server settings.
-  // NOTE: these must be "synced" with the 'dspace.server.url' setting in your backend's local.cfg.
-  rest: {
-    ssl: true,
-    host: 'api7.dspace.org',
-    port: 443,
+  };
+
+  // The REST API server settings
+  // NOTE: these must be 'synced' with the 'dspace.server.url' setting in your backend's local.cfg.
+  rest: ServerConfig = {
+    ssl: false,
+    host: 'localhost',
+    port: 8080,
     // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
-    nameSpace: '/server',
-  },
+    nameSpace: '/',
+  };
+
   // Caching settings
-  cache: {
+  cache: CacheConfig = {
     // NOTE: how long should objects be cached for by default
     msToLive: {
-      default: 15 * 60 * 1000, // 15 minutes
+      default: 15 * 60 * 1000 // 15 minutes
     },
-    // msToLive: 1000, // 15 minutes
     control: 'max-age=60', // revalidate browser
     autoSync: {
       defaultTime: 0,
       maxBufferSize: 100,
-      timePerMethod: {[RestRequestMethod.PATCH]: 3} as any // time in seconds
+      timePerMethod: { [RestRequestMethod.PATCH]: 3 } as any // time in seconds
     }
-  },
+  };
+
   // Authentication settings
-  auth: {
+  auth: AuthConfig = {
     // Authentication UI settings
     ui: {
       // the amount of time before the idle warning is shown
       timeUntilIdle: 15 * 60 * 1000, // 15 minutes
       // the amount of time the user has to react after the idle warning is shown before they are logged out.
-      idleGracePeriod: 5 * 60 * 1000, // 5 minutes
+      idleGracePeriod: 5 * 60 * 1000 // 5 minutes
     },
     // Authentication REST settings
     rest: {
       // If the rest token expires in less than this amount of time, it will be refreshed automatically.
       // This is independent from the idle warning.
-      timeLeftBeforeTokenRefresh: 2 * 60 * 1000, // 2 minutes
-    },
-  },
+      timeLeftBeforeTokenRefresh: 2 * 60 * 1000 // 2 minutes
+    }
+  };
+
   // Form settings
-  form: {
+  form: FormConfig = {
     // NOTE: Map server-side validators to comparative Angular form validators
     validatorMap: {
       required: 'required',
       regex: 'pattern'
     }
-  },
+  };
+
   // Notifications
-  notifications: {
+  notifications: INotificationBoardOptions = {
     rtl: false,
     position: ['top', 'right'],
     maxStack: 8,
@@ -76,9 +105,10 @@ export const environment: GlobalConfig = {
     clickToClose: true,
     // NOTE: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale'
     animate: NotificationAnimationsType.Scale
-  },
+  };
+
   // Submission settings
-  submission: {
+  submission: SubmissionConfig = {
     autosave: {
       // NOTE: which metadata trigger an autosave
       metadata: [],
@@ -136,115 +166,58 @@ export const environment: GlobalConfig = {
           {
             value: 'default',
             style: 'text-muted'
-          },
+          }
 
         ]
       }
     }
-  },
-  // Angular Universal settings
-  universal: {
-    preboot: true,
-    async: true,
-    time: false
-  },
-  // NOTE: will log all redux actions and transfers in console
-  debug: false,
+  };
+
   // Default Language in which the UI will be rendered if the user's browser language is not an active language
-  defaultLanguage: 'en',
+  defaultLanguage = 'en';
+
   // Languages. DSpace Angular holds a message catalog for each of the following languages.
   // When set to active, users will be able to switch to the use of this language in the user interface.
-  languages: [{
-    code: 'en',
-    label: 'English',
-    active: true,
-  }, {
-    code: 'cs',
-    label: 'Čeština',
-    active: true,
-  }, {
-    code: 'de',
-    label: 'Deutsch',
-    active: true,
-  }, {
-    code: 'es',
-    label: 'Español',
-    active: true,
-  }, {
-    code: 'fr',
-    label: 'Français',
-    active: true,
-  }, {
-    code: 'lv',
-    label: 'Latviešu',
-    active: true,
-  }, {
-    code: 'hu',
-    label: 'Magyar',
-    active: true,
-  }, {
-    code: 'nl',
-    label: 'Nederlands',
-    active: true,
-  }, {
-    code: 'pt-PT',
-    label: 'Português',
-    active: true,
-  },{
-    code: 'pt-BR',
-    label: 'Português do Brasil',
-    active: true,
-  },{
-    code: 'fi',
-    label: 'Suomi',
-    active: true,
-  }],
+  languages: LangConfig[] = [
+    { code: 'en', label: 'English', active: true },
+    { code: 'cs', label: 'Čeština', active: true },
+    { code: 'de', label: 'Deutsch', active: true },
+    { code: 'es', label: 'Español', active: true },
+    { code: 'fr', label: 'Français', active: true },
+    { code: 'lv', label: 'Latviešu', active: true },
+    { code: 'hu', label: 'Magyar', active: true },
+    { code: 'nl', label: 'Nederlands', active: true },
+    { code: 'pt-PT', label: 'Português', active: true },
+    { code: 'pt-BR', label: 'Português do Brasil', active: true },
+    { code: 'fi', label: 'Suomi', active: true }
+  ];
+
   // Browse-By Pages
-  browseBy: {
+  browseBy: BrowseByConfig = {
     // Amount of years to display using jumps of one year (current year - oneYearLimit)
     oneYearLimit: 10,
     // Limit for years to display using jumps of five years (current year - fiveYearLimit)
     fiveYearLimit: 30,
     // The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
-    defaultLowerLimit: 1900,
-    // List of all the active Browse-By types
-    // Adding a type will activate their Browse-By page and add them to the global navigation menu,
-    // as well as community and collection pages
-    // Allowed fields and their purpose:
-    //    id:             The browse id to use for fetching info from the rest api
-    //    type:           The type of Browse-By page to display
-    //    metadataField:  The metadata-field used to create starts-with options (only necessary when the type is set to 'date')
-    types: [
-      {
-        id: 'title',
-        type: BrowseByType.Title,
-      },
-      {
-        id: 'dateissued',
-        type: BrowseByType.Date,
-        metadataField: 'dc.date.issued'
-      },
-      {
-        id: 'author',
-        type: BrowseByType.Metadata
-      },
-      {
-        id: 'subject',
-        type: BrowseByType.Metadata
-      }
-    ]
-  },
-  item: {
+    defaultLowerLimit: 1900
+  };
+
+  // Item Page Config
+  item: ItemPageConfig = {
     edit: {
       undoTimeout: 10000 // 10 seconds
     }
-  },
-  collection: {
+  };
+
+  // Collection Page Config
+  collection: CollectionPageConfig = {
     edit: {
       undoTimeout: 10000 // 10 seconds
     }
-  },
-  themes: [
+  };
+
+  // Theme Config
+  themes: ThemeConfig[] = [
     // Add additional themes here. In the case where multiple themes match a route, the first one
     // in this list will get priority. It is advisable to always have a theme that matches
     // every route as the last one
@@ -274,12 +247,12 @@ export const environment: GlobalConfig = {
     //   name: 'custom-A',
     //   extends: 'custom-B',
     //   // Any of the matching properties above can be used
-    //   handle: '10673/34',
+    //   handle: '10673/34'
     // },
     // {
     //   name: 'custom-B',
     //   extends: 'custom',
-    //   handle: '10673/12',
+    //   handle: '10673/12'
     // },
     // {
     //   // A theme with only a name will match every route
@@ -292,14 +265,52 @@ export const environment: GlobalConfig = {
 
     {
       // The default dspace theme
-      name: 'dspace'
+      name: 'dspace',
+      // Whenever this theme is active, the following tags will be injected into the <head> of the page.
+      // Example use case: set the favicon based on the active theme.
+      headTags: [
+        {
+          // Insert <link rel="icon" href="assets/dspace/images/favicons/favicon.ico" sizes="any"/> into the <head> of the page.
+          tagName: 'link',
+          attributes: {
+            'rel': 'icon',
+            'href': 'assets/dspace/images/favicons/favicon.ico',
+            'sizes': 'any',
+          }
+        },
+        {
+          // Insert <link rel="icon" href="assets/dspace/images/favicons/favicon.svg" type="image/svg+xml"/> into the <head> of the page.
+          tagName: 'link',
+          attributes: {
+            'rel': 'icon',
+            'href': 'assets/dspace/images/favicons/favicon.svg',
+            'type': 'image/svg+xml',
+          }
+        },
+        {
+          // Insert <link rel="apple-touch-icon" href="assets/dspace/images/favicons/apple-touch-icon.png"/> into the <head> of the page.
+          tagName: 'link',
+          attributes: {
+            'rel': 'apple-touch-icon',
+            'href': 'assets/dspace/images/favicons/apple-touch-icon.png',
+          }
+        },
+        {
+          // Insert <link rel="manifest" href="assets/dspace/images/favicons/manifest.webmanifest"/> into the <head> of the page.
+          tagName: 'link',
+          attributes: {
+            'rel': 'manifest',
+            'href': 'assets/dspace/images/favicons/manifest.webmanifest',
+          }
+        },
+      ]
     },
-  ],
+  ];
   // Whether to enable media viewer for image and/or video Bitstreams (i.e. Bitstreams whose MIME type starts with "image" or "video").
   // For images, this enables a gallery viewer where you can zoom or page through images.
   // For videos, this enables embedded video streaming
-  mediaViewer: {
+  mediaViewer: MediaViewerConfig = {
     image: false,
-    video: false,
-  },
-};
+    video: false
+  };
+}
diff --git a/src/config/theme.model.ts b/src/config/theme.model.ts
index 0130b5ffd8..d65118d5d4 100644
--- a/src/config/theme.model.ts
+++ b/src/config/theme.model.ts
@@ -12,6 +12,28 @@ export interface NamedThemeConfig extends Config {
    * its ancestor theme(s) will be checked recursively before falling back to the default theme.
    */
   extends?: string;
+
+  /**
+   * A list of HTML tags that should be added to the HEAD section of the document, whenever this theme is active.
+   */
+  headTags?: HeadTagConfig[];
+}
+
+/**
+ * Interface that represents a single theme-specific HTML tag in the HEAD section of the page.
+ */
+export interface HeadTagConfig extends Config {
+  /**
+   * The name of the HTML tag
+   */
+  tagName: string;
+
+  /**
+   * The attributes on the HTML tag
+   */
+  attributes?: {
+    [key: string]: string;
+  };
 }
 
 export interface RegExThemeConfig extends NamedThemeConfig {
diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts
new file mode 100644
index 0000000000..85c0f8fddc
--- /dev/null
+++ b/src/environments/environment.production.ts
@@ -0,0 +1,12 @@
+import { AppConfig } from '../config/app-config.interface';
+
+export const environment: Partial<AppConfig> = {
+  production: true,
+
+  // Angular Universal settings
+  universal: {
+    preboot: true,
+    async: true,
+    time: false
+  }
+};
diff --git a/src/environments/environment.template.ts b/src/environments/environment.template.ts
deleted file mode 100644
index 6f6510e1ab..0000000000
--- a/src/environments/environment.template.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const environment = {
-  /**
-   * TODO add the sections from environment.common.ts you want to override here
-   * e.g.
-   * rest: {
-   *   host: 'rest.api',
-   *   nameSpace: '/rest',
-   * }
-   */
-};
diff --git a/src/environments/mock-environment.ts b/src/environments/environment.test.ts
similarity index 78%
rename from src/environments/mock-environment.ts
rename to src/environments/environment.test.ts
index 824c8c8a83..f8a3248837 100644
--- a/src/environments/mock-environment.ts
+++ b/src/environments/environment.test.ts
@@ -1,46 +1,65 @@
-// This configuration is only used for unit tests, end-to-end tests use environment.prod.ts
-import { BrowseByType } from '../app/browse-by/browse-by-switcher/browse-by-decorator';
+// This configuration is only used for unit tests, end-to-end tests use environment.production.ts
 import { RestRequestMethod } from '../app/core/data/rest-request-method';
 import { NotificationAnimationsType } from '../app/shared/notifications/models/notification-animations-type';
-import { GlobalConfig } from '../config/global-config.interface';
+import { AppConfig } from '../config/app-config.interface';
 
-export const environment: Partial<GlobalConfig> = {
-  rest: {
-    ssl: true,
-    host: 'rest.com',
-    port: 443,
-    // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
-    nameSpace: '/api',
-    baseUrl: 'https://rest.api/'
+export const environment: AppConfig = {
+  production: false,
+
+  // Angular Universal settings
+  universal: {
+    preboot: true,
+    async: true,
+    time: false
   },
+
+  // Angular Universal server settings.
   ui: {
     ssl: false,
     host: 'dspace.com',
     port: 80,
     // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
     nameSpace: '/angular-dspace',
-    rateLimiter: undefined
+    baseUrl: 'http://dspace.com/angular-dspace',
+    // The rateLimiter settings limit each IP to a 'max' of 500 requests per 'windowMs' (1 minute).
+    rateLimiter: {
+      windowMs: 1 * 60 * 1000, // 1 minute
+      max: 500 // limit each IP to 500 requests per windowMs
+    }
   },
-    // Caching settings
+
+  // The REST API server settings.
+  rest: {
+    ssl: true,
+    host: 'rest.com',
+    port: 443,
+    // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
+    nameSpace: '/api',
+    baseUrl: 'https://rest.com/api'
+  },
+
+  // Caching settings
   cache: {
     // NOTE: how long should objects be cached for by default
     msToLive: {
       default: 15 * 60 * 1000, // 15 minutes
     },
     // msToLive: 1000, // 15 minutes
-    control: 'max-age=60', // revalidate browser
+    control: 'max-age=60',
     autoSync: {
       defaultTime: 0,
       maxBufferSize: 100,
-      timePerMethod: {[RestRequestMethod.PATCH]: 3} as any // time in seconds
+      timePerMethod: { [RestRequestMethod.PATCH]: 3 } as any // time in seconds
     }
   },
+
   // Authentication settings
   auth: {
     // Authentication UI settings
     ui: {
       // the amount of time before the idle warning is shown
-      timeUntilIdle: 20000, // 20 sec
+      timeUntilIdle: 20000,
+
       // the amount of time the user has to react after the idle warning is shown before they are logged out.
       idleGracePeriod: 20000, // 20 sec
     },
@@ -51,6 +70,7 @@ export const environment: Partial<GlobalConfig> = {
       timeLeftBeforeTokenRefresh: 20000, // 20 sec
     },
   },
+
   // Form settings
   form: {
     // NOTE: Map server-side validators to comparative Angular form validators
@@ -59,17 +79,19 @@ export const environment: Partial<GlobalConfig> = {
       regex: 'pattern'
     }
   },
+
   // Notifications
   notifications: {
     rtl: false,
     position: ['top', 'right'],
     maxStack: 8,
     // NOTE: after how many seconds notification is closed automatically. If set to zero notifications are not closed automatically
-    timeOut: 5000, // 5 second
+    timeOut: 5000,
     clickToClose: true,
     // NOTE: 'fade' | 'fromTop' | 'fromRight' | 'fromBottom' | 'fromLeft' | 'rotate' | 'scale'
     animate: NotificationAnimationsType.Scale
   },
+
   // Submission settings
   submission: {
     autosave: {
@@ -115,21 +137,17 @@ export const environment: Partial<GlobalConfig> = {
             value: 'default',
             style: 'text-muted'
           },
-
         ]
       }
     }
   },
-  // Angular Universal settings
-  universal: {
-    preboot: true,
-    async: true,
-    time: false
-  },
+
   // NOTE: will log all redux actions and transfers in console
   debug: false,
+
   // Default Language in which the UI will be rendered if the user's browser language is not an active language
   defaultLanguage: 'en',
+
   // Languages. DSpace Angular holds a message catalog for each of the following languages.
   // When set to active, users will be able to switch to the use of this language in the user interface.
   languages: [{
@@ -161,6 +179,7 @@ export const environment: Partial<GlobalConfig> = {
     label: 'Latviešu',
     active: true,
   }],
+
   // Browse-By Pages
   browseBy: {
     // Amount of years to display using jumps of one year (current year - oneYearLimit)
@@ -169,32 +188,6 @@ export const environment: Partial<GlobalConfig> = {
     fiveYearLimit: 30,
     // The absolute lowest year to display in the dropdown (only used when no lowest date can be found for all items)
     defaultLowerLimit: 1900,
-    // List of all the active Browse-By types
-    // Adding a type will activate their Browse-By page and add them to the global navigation menu,
-    // as well as community and collection pages
-    // Allowed fields and their purpose:
-    //    id:             The browse id to use for fetching info from the rest api
-    //    type:           The type of Browse-By page to display
-    //    metadataField:  The metadata-field used to create starts-with options (only necessary when the type is set to 'date')
-    types: [
-      {
-        id: 'title',
-        type: BrowseByType.Title,
-      },
-      {
-        id: 'dateissued',
-        type: BrowseByType.Date,
-        metadataField: 'dc.date.issued'
-      },
-      {
-        id: 'author',
-        type: BrowseByType.Metadata
-      },
-      {
-        id: 'subject',
-        type: BrowseByType.Metadata
-      }
-    ]
   },
   item: {
     edit: {
@@ -234,5 +227,5 @@ export const environment: Partial<GlobalConfig> = {
   mediaViewer: {
     image: true,
     video: true
-  },
+  }
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000000..90eecac900
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,26 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --configuration production` replaces `environment.ts` with `environment.production.ts`.
+// `ng test --configuration test` replaces `environment.ts` with `environment.test.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+import { AppConfig } from '../config/app-config.interface';
+
+export const environment: Partial<AppConfig> = {
+  production: false,
+
+  // Angular Universal settings
+  universal: {
+    preboot: true,
+    async: true,
+    time: false
+  }
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
diff --git a/src/index.csr.html b/src/index.csr.html
index 8c25dfa084..d23cb2cae3 100644
--- a/src/index.csr.html
+++ b/src/index.csr.html
@@ -6,7 +6,6 @@
   <base href="/">
   <title>DSpace</title>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico" />
 </head>
 
 <body>
diff --git a/src/index.html b/src/index.html
index 491a2d319c..ddd448f289 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,6 @@
   <base href="/">
   <title>DSpace</title>
   <meta name="viewport" content="width=device-width,minimum-scale=1">
-  <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico" />
 </head>
 
 <body>
diff --git a/src/main.browser.ts b/src/main.browser.ts
index d6c3fd6535..de4276ea93 100644
--- a/src/main.browser.ts
+++ b/src/main.browser.ts
@@ -1,22 +1,25 @@
 import 'zone.js/dist/zone';
 import 'reflect-metadata';
 import 'core-js/es/reflect';
+
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { bootloader } from '@angularclass/bootloader';
-
 import { load as loadWebFont } from 'webfontloader';
+
 import { hasValue } from './app/shared/empty.util';
 
 import { BrowserAppModule } from './modules/app/browser-app.module';
 
 import { environment } from './environments/environment';
+import { AppConfig } from './config/app-config.interface';
+import { extendEnvironmentWithAppConfig } from './config/config.util';
 
-if (environment.production) {
-  enableProdMode();
-}
+const bootstrap = () => platformBrowserDynamic()
+  .bootstrapModule(BrowserAppModule, {
+    preserveWhitespaces: true
+  });
 
-export function main() {
+const main = () => {
   // Load fonts async
   // https://github.com/typekit/webfontloader#configuration
   loadWebFont({
@@ -25,13 +28,27 @@ export function main() {
     }
   });
 
-  return platformBrowserDynamic().bootstrapModule(BrowserAppModule, {preserveWhitespaces:true});
-}
+  if (environment.production) {
+    enableProdMode();
+
+    return bootstrap();
+  } else {
+
+    return fetch('assets/config.json')
+      .then((response) => response.json())
+      .then((appConfig: AppConfig) => {
+
+        // extend environment with app config for browser when not prerendered
+        extendEnvironmentWithAppConfig(environment, appConfig);
+
+        return bootstrap();
+      });
+  }
+};
 
 // support async tag or hmr
 if (hasValue(environment.universal) && environment.universal.preboot === false) {
-  bootloader(main);
+  main();
 } else {
-  document.addEventListener('DOMContentLoaded', () => bootloader(main));
+  document.addEventListener('DOMContentLoaded', main);
 }
-
diff --git a/src/main.ts b/src/main.ts
deleted file mode 100644
index 734cd3c5f5..0000000000
--- a/src/main.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import 'core-js/es/reflect';
-import 'zone.js/dist/zone';
-import 'reflect-metadata';
-
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.addEventListener('DOMContentLoaded', () => {
-    platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
-  });
-});
diff --git a/src/modules/app/browser-app.module.ts b/src/modules/app/browser-app.module.ts
index efdaf12a1b..86497d4599 100644
--- a/src/modules/app/browser-app.module.ts
+++ b/src/modules/app/browser-app.module.ts
@@ -1,7 +1,8 @@
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { BrowserModule, makeStateKey, TransferState } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule, NoPreloading } from '@angular/router';
 import { REQUEST } from '@nguniversal/express-engine/tokens';
 
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
@@ -30,9 +31,13 @@ import {
 } from '../../app/core/services/browser-hard-redirect.service';
 import { LocaleService } from '../../app/core/locale/locale.service';
 import { GoogleAnalyticsService } from '../../app/statistics/google-analytics.service';
-import { RouterModule, NoPreloading } from '@angular/router';
 import { AuthRequestService } from '../../app/core/auth/auth-request.service';
 import { BrowserAuthRequestService } from '../../app/core/auth/browser-auth-request.service';
+import { AppConfig, APP_CONFIG_STATE } from '../../config/app-config.interface';
+import { DefaultAppConfig } from '../../config/default-app-config';
+import { extendEnvironmentWithAppConfig } from '../../config/config.util';
+
+import { environment } from '../../environments/environment';
 
 export const REQ_KEY = makeStateKey<string>('req');
 
@@ -54,12 +59,12 @@ export function getRequest(transferState: TransferState): any {
     // forRoot ensures the providers are only created once
     IdlePreloadModule.forRoot(),
     RouterModule.forRoot([], {
-    // enableTracing: true,
-    useHash: false,
-    scrollPositionRestoration: 'enabled',
-    anchorScrolling: 'enabled',
-    preloadingStrategy: NoPreloading
-}),
+      // enableTracing: true,
+      useHash: false,
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled',
+      preloadingStrategy: NoPreloading
+    }),
     StatisticsModule.forRoot(),
     Angulartics2RouterlessModule.forRoot(),
     BrowserAnimationsModule,
@@ -74,6 +79,20 @@ export function getRequest(transferState: TransferState): any {
     AppModule
   ],
   providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (transferState: TransferState) => {
+        if (transferState.hasKey<AppConfig>(APP_CONFIG_STATE)) {
+          const appConfig = transferState.get<AppConfig>(APP_CONFIG_STATE, new DefaultAppConfig());
+          // extend environment with app config for browser
+          extendEnvironmentWithAppConfig(environment, appConfig);
+        }
+
+        return () => true;
+      },
+      deps: [TransferState],
+      multi: true
+    },
     {
       provide: REQUEST,
       useFactory: getRequest,
diff --git a/src/modules/app/server-app.module.ts b/src/modules/app/server-app.module.ts
index dad3a60d5c..8c49554de9 100644
--- a/src/modules/app/server-app.module.ts
+++ b/src/modules/app/server-app.module.ts
@@ -1,38 +1,40 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { BrowserModule, TransferState } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ServerModule } from '@angular/platform-server';
+import { RouterModule } from '@angular/router';
 
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 
+import { Angulartics2 } from 'angulartics2';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+
 import { AppComponent } from '../../app/app.component';
 
 import { AppModule } from '../../app/app.module';
 import { DSpaceServerTransferStateModule } from '../transfer-state/dspace-server-transfer-state.module';
 import { DSpaceTransferState } from '../transfer-state/dspace-transfer-state.service';
-
 import { TranslateJson5UniversalLoader } from '../../ngx-translate-loaders/translate-json5-universal.loader';
 import { CookieService } from '../../app/core/services/cookie.service';
 import { ServerCookieService } from '../../app/core/services/server-cookie.service';
 import { AuthService } from '../../app/core/auth/auth.service';
 import { ServerAuthService } from '../../app/core/auth/server-auth.service';
-
-import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
 import { AngularticsProviderMock } from '../../app/shared/mocks/angulartics-provider.service.mock';
 import { SubmissionService } from '../../app/submission/submission.service';
 import { ServerSubmissionService } from '../../app/submission/server-submission.service';
 import { Angulartics2DSpace } from '../../app/statistics/angulartics/dspace-provider';
 import { ServerLocaleService } from '../../app/core/locale/server-locale.service';
 import { LocaleService } from '../../app/core/locale/locale.service';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ForwardClientIpInterceptor } from '../../app/core/forward-client-ip/forward-client-ip.interceptor';
 import { HardRedirectService } from '../../app/core/services/hard-redirect.service';
 import { ServerHardRedirectService } from '../../app/core/services/server-hard-redirect.service';
-import { Angulartics2 } from 'angulartics2';
 import { Angulartics2Mock } from '../../app/shared/mocks/angulartics2.service.mock';
-import { RouterModule } from '@angular/router';
 import { AuthRequestService } from '../../app/core/auth/auth-request.service';
 import { ServerAuthRequestService } from '../../app/core/auth/server-auth-request.service';
+import { AppConfig, APP_CONFIG_STATE } from '../../config/app-config.interface';
+
+import { environment } from '../../environments/environment';
 
 export function createTranslateLoader() {
   return new TranslateJson5UniversalLoader('dist/server/assets/i18n/', '.json5');
@@ -60,6 +62,16 @@ export function createTranslateLoader() {
     AppModule
   ],
   providers: [
+    // Initialize app config and extend environment
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (transferState: TransferState) => {
+        transferState.set<AppConfig>(APP_CONFIG_STATE, environment as AppConfig);
+        return () => true;
+      },
+      deps: [TransferState],
+      multi: true
+    },
     {
       provide: Angulartics2,
       useClass: Angulartics2Mock
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index b5e5cd6f25..66e0e87f93 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -79,6 +79,7 @@
   --ds-breadcrumb-bg: #{$gray-200} !important;
   --ds-breadcrumb-link-color: #{$cyan};
   --ds-breadcrumb-link-active-color: #{darken($cyan, 30%)};
+  --ds-breadcrumb-max-length: 200px;
 
   --ds-slider-color: #{$green};
   --ds-slider-handle-width: 18px;
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index f7f38f77cd..e337539c15 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -74,3 +74,21 @@ ngb-modal-backdrop {
   }
 }
 
+.dont-break-out {
+  /* These are technically the same, but use both */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+
+  -ms-word-break: break-all;
+  /* This is the dangerous one in WebKit, as it breaks things wherever */
+  word-break: break-all;
+  /* Instead use this non-standard one: */
+  word-break: break-word;
+
+  /* Adds a hyphen where the word breaks, if supported (No Blink) */
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+
+}
diff --git a/src/themes/dspace/assets/images/favicons/android-chrome-192x192.png b/src/themes/dspace/assets/images/favicons/android-chrome-192x192.png
new file mode 100644
index 0000000000..1aaffb1b90
Binary files /dev/null and b/src/themes/dspace/assets/images/favicons/android-chrome-192x192.png differ
diff --git a/src/themes/dspace/assets/images/favicons/android-chrome-512x512.png b/src/themes/dspace/assets/images/favicons/android-chrome-512x512.png
new file mode 100644
index 0000000000..2d35f496dc
Binary files /dev/null and b/src/themes/dspace/assets/images/favicons/android-chrome-512x512.png differ
diff --git a/src/themes/dspace/assets/images/favicons/apple-touch-icon.png b/src/themes/dspace/assets/images/favicons/apple-touch-icon.png
new file mode 100644
index 0000000000..58ff41f34b
Binary files /dev/null and b/src/themes/dspace/assets/images/favicons/apple-touch-icon.png differ
diff --git a/src/themes/dspace/assets/images/favicons/favicon.ico b/src/themes/dspace/assets/images/favicons/favicon.ico
new file mode 100644
index 0000000000..a5dfd5e322
Binary files /dev/null and b/src/themes/dspace/assets/images/favicons/favicon.ico differ
diff --git a/src/themes/dspace/assets/images/favicons/favicon.svg b/src/themes/dspace/assets/images/favicons/favicon.svg
new file mode 100644
index 0000000000..8ea65cb72f
--- /dev/null
+++ b/src/themes/dspace/assets/images/favicons/favicon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 98 98" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,0.019,2.867)">
+        <path d="M53.561,58.569L53.67,58.563L53.786,58.553L53.892,58.54L54.002,58.53L54.112,58.507L54.221,58.488L54.327,58.465L54.433,58.436L54.538,58.413L54.644,58.38L54.747,58.346L54.844,58.311L54.948,58.271L55.049,58.229L55.149,58.187L55.149,58.186L55.245,58.141L55.34,58.097L55.437,58.048L55.528,57.992L55.528,57.991L55.622,57.941L55.622,57.939L55.712,57.883L55.712,57.882L55.805,57.822L55.888,57.766L55.888,57.765L55.973,57.702L56.061,57.637L56.061,57.635L56.148,57.573L56.148,57.572C56.964,56.889 57.541,55.926 57.709,54.834L57.722,54.73L57.722,54.72L57.736,54.619L57.736,54.608L57.745,54.51L57.745,54.498L57.754,54.397L57.754,54.38L57.759,54.285L57.759,54.269L57.761,54.164L57.761,37.704L57.759,37.599L57.759,37.583L57.754,37.488L57.754,37.475L57.745,37.374L57.745,37.362L57.736,37.264L57.736,37.253L57.722,37.153L57.722,37.143L57.709,37.039C57.542,35.947 56.965,34.982 56.148,34.301L56.148,34.3L56.061,34.237L56.061,34.235L55.973,34.17L55.888,34.107L55.888,34.106L55.805,34.05L55.712,33.989L55.622,33.933L55.622,33.93L55.528,33.88L55.528,33.879L55.437,33.823L55.34,33.774L55.245,33.731L55.245,33.73L55.149,33.685L55.149,33.684L55.049,33.641L54.948,33.599L54.844,33.559L54.747,33.524L54.644,33.493L54.538,33.457L54.433,33.434L54.327,33.406L54.221,33.382L54.112,33.363L54.002,33.34L53.892,33.331L53.786,33.317L53.67,33.307L53.561,33.301L53.447,33.296L45.557,33.296C35.841,33.296 29.699,25.458 29.699,16.146L29.699,6.92C29.699,3.108 26.597,0.005 22.785,0.005L6.92,0.005C3.107,0.005 -0,3.111 -0,6.92L-0,23.602C-0,27.408 3.104,30.511 6.92,30.511L15.334,30.511C24.503,30.511 32.24,36.461 32.48,45.914L32.48,45.954C32.24,55.407 24.502,61.356 15.334,61.356L6.92,61.356C3.105,61.356 -0,64.459 -0,68.265L-0,84.947C-0,88.757 3.106,91.862 6.92,91.862L22.785,91.862C26.597,91.862 29.699,88.758 29.699,84.947L29.699,75.724C29.699,66.412 35.843,58.575 45.557,58.575L53.447,58.575L53.561,58.569ZM87.607,9.956C81.466,3.814 72.985,0 63.651,0L48.627,0L48.627,17.424L63.651,17.424C68.177,17.424 72.298,19.282 75.291,22.273C78.281,25.263 80.14,29.385 80.14,33.912L80.14,57.954C80.14,62.492 78.287,66.619 75.308,69.609L75.291,69.593C72.3,72.584 68.178,74.442 63.651,74.442L48.627,74.442L48.627,91.866L63.651,91.866C72.984,91.866 81.465,88.052 87.607,81.91L87.607,81.877C93.749,75.734 97.562,67.263 97.562,57.954L97.562,33.912C97.562,24.578 93.749,16.097 87.607,9.956Z" style="fill:rgb(146,198,66);fill-rule:nonzero;"/>
+    </g>
+</svg>
diff --git a/src/themes/dspace/assets/images/favicons/manifest.webmanifest b/src/themes/dspace/assets/images/favicons/manifest.webmanifest
new file mode 100644
index 0000000000..1784ba2b4c
--- /dev/null
+++ b/src/themes/dspace/assets/images/favicons/manifest.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "DSpace",
+    "short_name": "DSpace",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#091119",
+    "background_color": "#091119",
+    "display": "standalone"
+}
diff --git a/tslint.json b/tslint.json
index 36a32ed795..ef85c50002 100644
--- a/tslint.json
+++ b/tslint.json
@@ -170,9 +170,5 @@
     "use-life-cycle-interface": false,
     "no-outputs-metadata-property": true,
     "use-pipe-transform-interface": true
-    //    "rxjs-collapse-imports": true,
-    //    "rxjs-pipeable-operators-only": true,
-    //    "rxjs-no-static-observable-methods": true,
-    //    "rxjs-proper-imports": true
   }
 }
diff --git a/webpack/webpack.browser.ts b/webpack/webpack.browser.ts
index bc281e9b43..a71d749347 100644
--- a/webpack/webpack.browser.ts
+++ b/webpack/webpack.browser.ts
@@ -1,8 +1,16 @@
+import { join } from 'path';
+
+import { buildAppConfig } from '../src/config/config.server';
 import { commonExports } from './webpack.common';
 
 module.exports = Object.assign({}, commonExports, {
   target: 'web',
   node: {
     module: 'empty'
-  }
+  },
+  devServer: {
+    before(app, server) {
+      buildAppConfig(join(process.cwd(), 'src/assets/config.json'));
+    }
+ }
 });
diff --git a/yarn.lock b/yarn.lock
index fdb758af01..0f8ef0a6e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -427,11 +427,6 @@
   dependencies:
     tslib "^2.0.0"
 
-"@angularclass/bootloader@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@angularclass/bootloader/-/bootloader-1.0.1.tgz#75de7cf3901b445900a419c2aeca44181d465060"
-  integrity sha1-dd5885AbRFkApBnCrspEGB1GUGA=
-
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.0", "@babel/code-frame@^7.8.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.0.tgz#0dfc80309beec8411e65e706461c408b0bb9b431"
@@ -1457,9 +1452,9 @@
   integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
 "@cypress/request@^2.88.6":
-  version "2.88.7"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.7.tgz#386d960ab845a96953723348088525d5a75aaac4"
-  integrity sha512-FTULIP2rnDJvZDT9t6B4nSfYR40ue19tVmv3wUcY05R9/FPCoMl1nAPJkzWzBCo7ltVn5ThQTbxiMoGBN7k0ig==
+  version "2.88.10"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.10.tgz#b66d76b07f860d3a4b8d7a0604d020c662752cce"
+  integrity sha512-Zp7F+R93N0yZyG34GutyTNr+okam7s/Fzc1+i3kcqOP8vk6OuajuE9qZJ6Rs+10/1JFtXFYMdyarnU1rZuJesg==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -1468,8 +1463,7 @@
     extend "~3.0.2"
     forever-agent "~0.6.1"
     form-data "~2.3.2"
-    har-validator "~5.1.3"
-    http-signature "~1.2.0"
+    http-signature "~1.3.6"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
     json-stringify-safe "~5.0.1"
@@ -1507,9 +1501,9 @@
   integrity sha512-HyYEUDeIj5rRQU2Hk5HTB2uHsbRQpF70nvMhVzi+VJR0X+xNEhjPui4/kBf3VeH/wqD28PT4sVOm8qqLjBrSZg==
 
 "@discoveryjs/json-ext@^0.5.0":
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3"
-  integrity sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f"
+  integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==
 
 "@edsilv/http-status-codes@^1.0.3":
   version "1.0.3"
@@ -1532,9 +1526,9 @@
   integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==
 
 "@iiif/vocabulary@^1.0.20":
-  version "1.0.21"
-  resolved "https://registry.yarnpkg.com/@iiif/vocabulary/-/vocabulary-1.0.21.tgz#5808f62da11b64ca42a895025844be088df9f48a"
-  integrity sha512-XUD8RYeBiEzv8rdpC9tNBaQ0FMZuGWIkPsmcFhnqXW+5WjZmRLhgqycuoGwIjxt9nPsDgW1IxuiWduNgbLl9UA==
+  version "1.0.22"
+  resolved "https://registry.yarnpkg.com/@iiif/vocabulary/-/vocabulary-1.0.22.tgz#743d6cb1914e090137c56a4e44decbe7f8b21bdc"
+  integrity sha512-KOIZgRpDERMK4YGeSwPBNjpJETapMWp8pvEvSGUQkuTlqkiNLirZH65CIcEENZEL5A6mxrYLJX6okDYq7W1+RA==
 
 "@istanbuljs/schema@^0.1.2":
   version "0.1.3"
@@ -1989,9 +1983,9 @@
   integrity sha512-M6x29Vk4681dght4IMnPIcF1SNmeEm0c4uatlTFhp+++H1oDK1THEIzuCC2WeCBVhX+gU0NndsseDS3zaCtlcQ==
 
 "@types/express-serve-static-core@^4.17.18":
-  version "4.17.25"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.25.tgz#e42f7046adc65ece2eb6059b77aecfbe9e9f82e0"
-  integrity sha512-OUJIVfRMFijZukGGwTpKNFprqCCXk5WjNGvUgB/CxxBR40QWSjsNK86+yvGKlCOGc7sbwfHLaXhkG+NsytwBaQ==
+  version "4.17.26"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.26.tgz#5d9a8eeecb9d5f9d7fc1d85f541512a84638ae88"
+  integrity sha512-zeu3tpouA043RHxW0gzRxwCHchMgftE8GArRsvYT0ByDMbn19olQHx5jLue0LxWY6iYtXb7rXmuVtSkhy9YZvQ==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -2083,14 +2077,14 @@
   integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
 
 "@types/node@*":
-  version "16.11.7"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.7.tgz#36820945061326978c42a01e56b61cd223dfdc42"
-  integrity sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw==
+  version "16.11.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.12.tgz#ac7fb693ac587ee182c3780c26eb65546a1a3c10"
+  integrity sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw==
 
 "@types/node@^14.14.31", "@types/node@^14.14.9":
-  version "14.17.33"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.33.tgz#011ee28e38dc7aee1be032ceadf6332a0ab15b12"
-  integrity sha512-noEeJ06zbn3lOh4gqe2v7NMGS33jrulfNqYFDjjEbhpDEHR5VTxgYNQSBqBlJIsBJW3uEYDgD6kvMnrrhGzq8g==
+  version "14.18.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.0.tgz#98df2397f6936bfbff4f089e40e06fa5dd88d32a"
+  integrity sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -2140,9 +2134,9 @@
     "@types/react" "*"
 
 "@types/react@*":
-  version "17.0.35"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.35.tgz#217164cf830267d56cd1aec09dcf25a541eedd4c"
-  integrity sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==
+  version "17.0.37"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
+  integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -2474,9 +2468,9 @@ acorn@^7.1.1:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.0.4, acorn@^8.2.4:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.5.0.tgz#4512ccb99b3698c752591e9bb4472e38ad43cee2"
-  integrity sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.6.0.tgz#e3692ba0eb1a0c83eaa4f37f5fa7368dd7142895"
+  integrity sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==
 
 adjust-sourcemap-loader@3.0.0:
   version "3.0.0"
@@ -2560,9 +2554,9 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
 ajv-keywords@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.0.0.tgz#d01b3b21715b2f63d02aa511b82fc6eb3b30083c"
-  integrity sha512-ULd1QMjRoH6JDNUQIfDLrlE+OgZlFaxyYCjzt58uNuUQtKXt8/U+vK/8Ql0gyn/C5mqZzUWtKMqr/4YquvTrWA==
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
+  integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
   dependencies:
     fast-deep-equal "^3.1.3"
 
@@ -2597,9 +2591,9 @@ ajv@8.6.2:
     uri-js "^4.2.2"
 
 ajv@^8.0.0, ajv@^8.8.0:
-  version "8.8.1"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.8.1.tgz#e73dd88eeb4b10bbcd82bee136e6fbe801664d18"
-  integrity sha512-6CiMNDrzv0ZR916u2T+iRunnD60uWmNn8SkdB44/6stVORUg0aAkWO7PkOhpCmjmW8f2I/G/xnowD66fxGyQJg==
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.8.2.tgz#01b4fef2007a28bf75f0b7fc009f62679de4abbb"
+  integrity sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -2759,6 +2753,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 aria-query@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
@@ -3375,7 +3374,7 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.16.0, browserslist@^4.16.1, browserslist@^4.16.6, browserslist@^4.17.5, browserslist@^4.17.6, browserslist@^4.6.4, browserslist@^4.9.1:
+browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.16.0, browserslist@^4.16.1, browserslist@^4.16.6, browserslist@^4.17.5, browserslist@^4.18.1, browserslist@^4.6.4, browserslist@^4.9.1:
   version "4.18.1"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.18.1.tgz#60d3920f25b6860eb917c6c7b185576f4d8b017f"
   integrity sha512-8ScCzdpPwR2wQh8IT82CA2VgDwjHyqMovPBZSNH54+tm4Jk2pCuv90gmAdH6J84OCRWi0b4gMe6O6XPXuJnjgQ==
@@ -3661,9 +3660,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001032, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001165, caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001280:
-  version "1.0.30001282"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd"
-  integrity sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg==
+  version "1.0.30001285"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001285.tgz#fe1e52229187e11d6670590790d669b9e03315b7"
+  integrity sha512-KAOkuUtcQ901MtmvxfKD+ODHH9YVDYnBt+TGYSz2KIfnq22CiArbUxXPN9067gNbgMlnNYRSwho8OPXZPALB9Q==
 
 canonical-path@1.0.0:
   version "1.0.0"
@@ -3780,9 +3779,9 @@ ci-info@^2.0.0:
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
 ci-info@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
-  integrity sha512-dVqRX7fLUm8J6FgHJ418XuIgDLZDkYcDFTeL6TA2gt5WlIZUQrrH6EZrNClwT/H0FateUsZkGIOPRrLbP+PR9A==
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.0.tgz#b4ed1fb6818dea4803a55c623041f9165d2066b2"
+  integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
 
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
@@ -4007,9 +4006,9 @@ color-name@^1.0.0, color-name@~1.1.4:
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 color-string@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
-  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
+  integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
@@ -4342,11 +4341,11 @@ copy-webpack-plugin@^6.4.1:
     webpack-sources "^1.4.3"
 
 core-js-compat@^3.6.2, core-js-compat@^3.8.0:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.19.1.tgz#fe598f1a9bf37310d77c3813968e9f7c7bb99476"
-  integrity sha512-Q/VJ7jAF/y68+aUsQJ/afPOewdsGkDtcMb40J8MbuWKlK3Y+wtHq8bTHKPj2WKWLIqmS5JhHs4CzHtz6pT2W6g==
+  version "3.19.3"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.19.3.tgz#de75e5821c5ce924a0a1e7b7d5c2cb973ff388aa"
+  integrity sha512-59tYzuWgEEVU9r+SRgceIGXSSUn47JknoiXW6Oq7RW8QHjXWz3/vp8pa7dbtuVu40sewz3OP3JmQEcDdztrLhA==
   dependencies:
-    browserslist "^4.17.6"
+    browserslist "^4.18.1"
     semver "7.0.0"
 
 core-js@3.6.4:
@@ -4365,9 +4364,9 @@ core-js@^2.4.0:
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
 core-js@^3.7.0:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.1.tgz#f6f173cae23e73a7d88fa23b6e9da329276c6641"
-  integrity sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==
+  version "3.19.3"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.3.tgz#6df8142a996337503019ff3235a7022d7cdf4559"
+  integrity sha512-LeLBMgEGSsG7giquSzvgBrTS7V5UL6ks3eQlUSbN8dJStlLFiRzUm5iqsRyzUB8carhfKjkJ2vzKqE6z1Vga9g==
 
 core-util-is@1.0.2:
   version "1.0.2"
@@ -4470,7 +4469,14 @@ critters@0.0.7:
     parse5-htmlparser2-tree-adapter "^6.0.1"
     pretty-bytes "^5.3.0"
 
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -4481,7 +4487,7 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, 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==
@@ -4773,9 +4779,9 @@ cssnano-preset-default@^4.0.7, cssnano-preset-default@^4.0.8:
     postcss-unique-selectors "^4.0.1"
 
 cssnano-preset-default@^5.0.1:
-  version "5.1.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.1.7.tgz#68c3ad1ec6a810482ec7d06b2d70fc34b6b0d70c"
-  integrity sha512-bWDjtTY+BOqrqBtsSQIbN0RLGD2Yr2CnecpP0ydHNafh9ZUEre8c8VYTaH9FEbyOt0eIfEUAYYk5zj92ioO8LA==
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-5.1.8.tgz#7525feb1b72f7b06e57f55064cbdae341d79dea2"
+  integrity sha512-zWMlP0+AMPBVE852SqTrP0DnhTcTA2C1wAF92TKZ3Va+aUVqLIhkqKlnJIXXdqXD7RN+S1ujuWmNpvrJBiM/vg==
   dependencies:
     css-declaration-sorter "^6.0.3"
     cssnano-utils "^2.0.1"
@@ -4802,7 +4808,7 @@ cssnano-preset-default@^5.0.1:
     postcss-normalize-url "^5.0.3"
     postcss-normalize-whitespace "^5.0.1"
     postcss-ordered-values "^5.0.2"
-    postcss-reduce-initial "^5.0.1"
+    postcss-reduce-initial "^5.0.2"
     postcss-reduce-transforms "^5.0.1"
     postcss-svgo "^5.0.3"
     postcss-unique-selectors "^5.0.2"
@@ -4888,9 +4894,9 @@ cssstyle@^2.3.0:
     cssom "~0.3.6"
 
 csstype@^2.5.2:
-  version "2.6.18"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218"
-  integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ==
+  version "2.6.19"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
+  integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
 
 csstype@^3.0.2:
   version "3.0.10"
@@ -5018,10 +5024,10 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.2, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.2:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
-  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.2:
+  version "4.3.3"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
   dependencies:
     ms "2.1.2"
 
@@ -5032,6 +5038,13 @@ debug@4.3.1:
   dependencies:
     ms "2.1.2"
 
+debug@4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.1.2"
+
 debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -5115,7 +5128,7 @@ default-gateway@^4.2.0:
     execa "^1.0.0"
     ip-regex "^2.1.0"
 
-default-gateway@^6.0.0:
+default-gateway@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
   integrity sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==
@@ -5398,9 +5411,9 @@ domhandler@^3.0.0:
     domelementtype "^2.0.1"
 
 domhandler@^4.0.0, domhandler@^4.2.0:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.2.tgz#e825d721d19a86b8c201a35264e226c678ee755f"
-  integrity sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
+  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
   dependencies:
     domelementtype "^2.2.0"
 
@@ -5410,9 +5423,9 @@ domino@^2.1.2:
   integrity sha512-3VdM/SXBZX2omc9JF9nOPCtDaYQ67BGp5CoLpIQlO2KCAPETs8TcDHacF26jXadGbvUteZzRTeos2fhID5+ucQ==
 
 dompurify@^2.0.11:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.3.tgz#c1af3eb88be47324432964d8abc75cf4b98d634c"
-  integrity sha512-dqnqRkPMAjOZE0FogZ+ceJNM2dZ3V/yNOuFB7+39qpO93hHhfRpHw3heYQC7DPK9FqbQTfBKUJhiSfz4MvXYwg==
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.4.tgz#1cf5cf0105ccb4debdf6db162525bd41e6ddacc6"
+  integrity sha512-6BVcgOAVFXjI0JTjEvZy901Rghm+7fDQOrNIcxB4+gdhj6Kwp6T9VBhBY/AbagKHJocRkDYGd6wvI+p4/10xtQ==
 
 domutils@^1.7.0:
   version "1.7.0"
@@ -5499,9 +5512,9 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.3.896:
-  version "1.3.901"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.901.tgz#ce2c3157d61bce9f42f1e83225c17358ae9f4918"
-  integrity sha512-ToJdV2vzwT2jeAsw8zIggTFllJ4Kxvwghk39AhJEHHlIxor10wsFI3wo69p8nFc0s/ATWBqugPv/k3nW4Y9Mww==
+  version "1.4.12"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.12.tgz#5f73d1278c6205fc41d7a0ebd75563046b77c5d8"
+  integrity sha512-zjfhG9Us/hIy8AlQ5OzfbR/C4aBv1Dg/ak4GX35CELYlJ4tDAtoEcQivXvyBdqdNQ+R6PhlgQqV8UNPJmhkJog==
 
 element-resize-detector@^1.2.1:
   version "1.2.3"
@@ -6287,9 +6300,9 @@ forever-agent@~0.6.1:
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
 fork-ts-checker-webpack-plugin@^6.0.3:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.4.0.tgz#057e477cf1d8b013b2ed2669437f818680289c4c"
-  integrity sha512-3I3wFkc4DbzaUDPWEi96wdYGu4EKtxBafhZYm0o4mX51d9bphAY4P3mBl8K5mFXFJqVzHfmdbm9kLGnm7vwwBg==
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz#0282b335fa495a97e167f69018f566ea7d2a2b5e"
+  integrity sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -6827,11 +6840,6 @@ hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   dependencies:
     react-is "^16.7.0"
 
-hosted-git-info@^2.1.4:
-  version "2.8.9"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
-  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
-
 hosted-git-info@^3.0.6:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d"
@@ -7007,9 +7015,9 @@ http-errors@~1.7.2:
     toidentifier "1.0.0"
 
 http-parser-js@>=0.5.1:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.3.tgz#01d2709c79d41698bb01d4decc5e9da4e4a033d9"
-  integrity sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.5.tgz#d7c30d5d3c90d865b4a2e870181f9d6f22ac7ac5"
+  integrity sha512-x+JVEkO2PoM8qqpbPbOL3cqHPwerep7OwzK7Ay+sMQjKzaKCqWvjoXm5tqMP9tXWWTnTzAjIhXg+J99XYuPhPA==
 
 http-proxy-agent@^4.0.1:
   version "4.0.1"
@@ -7070,6 +7078,15 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
+http-signature@~1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.3.6.tgz#cb6fbfdf86d1c974f343be94e87f7fc128662cf9"
+  integrity sha512-3adrsD6zqo4GsTqtO7FyrejHNv+NgiIfAfv68+jVlFmSr9OGy7zrxONceFRLKvnnZA5jbxQBX1u9PpB6Wi32Gw==
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^2.0.2"
+    sshpk "^1.14.1"
+
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
@@ -7355,16 +7372,6 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-internal-ip@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-6.2.0.tgz#d5541e79716e406b74ac6b07b856ef18dc1621c1"
-  integrity sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==
-  dependencies:
-    default-gateway "^6.0.0"
-    ipaddr.js "^1.9.1"
-    is-ip "^3.1.0"
-    p-event "^4.2.0"
-
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -7396,17 +7403,12 @@ ip-regex@^2.1.0:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
   integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
 
-ip-regex@^4.0.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
-  integrity sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==
-
 ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.9.1, ipaddr.js@^1.9.0, ipaddr.js@^1.9.1:
+ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
@@ -7645,13 +7647,6 @@ is-interactive@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e"
   integrity sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
 
-is-ip@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/is-ip/-/is-ip-3.1.0.tgz#2ae5ddfafaf05cb8008a62093cf29734f657c5d8"
-  integrity sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==
-  dependencies:
-    ip-regex "^4.0.0"
-
 is-lambda@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
@@ -7935,9 +7930,9 @@ istanbul-lib-source-maps@^3.0.6:
     source-map "^0.6.1"
 
 istanbul-reports@^3.0.2:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.5.tgz#a2580107e71279ea6d661ddede929ffc6d693384"
-  integrity sha512-5+19PlhnGabNWB7kOFnuxT8H3T/iIyQzIbQMxXsURmmvKg86P2sbkrGOT77VnHw0Qr0gc2XzRaRfMZYYbSQCJQ==
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.1.tgz#7085857f17d2441053c6ce5c3b8fdf6882289397"
+  integrity sha512-q1kvhAXWSsXfMjCdNHNPKZZv94OlspKnoGv+R9RGbnqOOQ0VbNfLFgQDVgi7hHenKsndGq3/o0OBdzDXthWcNw==
   dependencies:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
@@ -8029,6 +8024,13 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -8102,10 +8104,10 @@ json-schema-traverse@^1.0.0:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
-  integrity sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=
+json-schema@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
+  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
 
 json-stringify-safe@~5.0.1:
   version "5.0.1"
@@ -8182,13 +8184,23 @@ jsonschema@1.4.0:
   integrity sha512-/YgW6pRMr6M7C+4o8kS+B/2myEpHCrxO4PEWnqJNBFMjn7EWXqlQ4tGwL6xTHeRplwuZmcAncdvfOad1nT2yMw==
 
 jsprim@^1.2.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
-  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
+  integrity sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==
   dependencies:
     assert-plus "1.0.0"
     extsprintf "1.3.0"
-    json-schema "0.2.3"
+    json-schema "0.4.0"
+    verror "1.10.0"
+
+jsprim@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-2.0.2.tgz#77ca23dbcd4135cd364800d22ff82c2185803d4d"
+  integrity sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.4.0"
     verror "1.10.0"
 
 jss-plugin-camel-case@^10.5.1:
@@ -8535,34 +8547,24 @@ limiter@^1.0.5:
   integrity sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==
 
 lines-and-columns@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
-  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 listr2@^3.8.3:
-  version "3.13.4"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.13.4.tgz#34101fc0184545597e00d1e7915ccfbfb17332e6"
-  integrity sha512-lZ1Rut1DSIRwbxQbI8qaUBfOWJ1jEYRgltIM97j6kKOCI2pHVWMyxZvkU/JKmRBWcIYgDS2PK+yDgVqm7u3crw==
+  version "3.13.5"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.13.5.tgz#105a813f2eb2329c4aae27373a281d610ee4985f"
+  integrity sha512-3n8heFQDSk+NcwBn3CgxEibZGaRzx+pC64n3YjpMD1qguV4nWus3Al+Oo3KooqFKTQEJ1v7MmnbnyyNspgx3NA==
   dependencies:
     cli-truncate "^2.1.0"
-    clone "^2.1.2"
     colorette "^2.0.16"
     log-update "^4.0.0"
     p-map "^4.0.0"
+    rfdc "^1.3.0"
     rxjs "^7.4.0"
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -8731,9 +8733,9 @@ log4js@^6.2.1:
     streamroller "^2.2.4"
 
 loglevel@^1.6.8:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
-  integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114"
+  integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
@@ -8877,9 +8879,9 @@ media-typer@0.3.0:
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
 memfs@^3.1.2, memfs@^3.2.2:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.3.0.tgz#4da2d1fc40a04b170a56622c7164c6be2c4cbef2"
-  integrity sha512-BEE62uMfKOavX3iG7GYX43QJ+hAeeWnwIAuJ/R6q96jaMtiLzhsxHJC8B1L7fK7Pt/vXDRwb3SG/yBpNGDPqzg==
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.0.tgz#8bc12062b973be6b295d4340595736a656f0a257"
+  integrity sha512-o/RfP0J1d03YwsAxyHxAYs2kyJp55AFkMazlFAZFR2I2IXkxiUTXRabJ6RmNNCQ83LAD2jy52Khj0m3OffpNdA==
   dependencies:
     fs-monkey "1.0.3"
 
@@ -8904,11 +8906,6 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-memorystream@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
-  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -8998,7 +8995,7 @@ mime@1.6.0, mime@^1.4.1:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.3.1, mime@^2.4.4, mime@^2.4.5:
+mime@^2.4.4, mime@^2.4.5:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
   integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
@@ -9121,12 +9118,12 @@ mirador-dl-plugin@^0.13.0:
   resolved "https://registry.yarnpkg.com/mirador-dl-plugin/-/mirador-dl-plugin-0.13.0.tgz#9a6cb0fa3c566a2a1ebe1ad9caa1ff590ff22689"
   integrity sha512-I/6etIvpTtO1zgjxx2uEUFoyB9NxQ43JWg8CMkKmZqblW7AAeFqRn1/zUlQH7N8KFZft9Rah6D8qxtuNAo9jmA==
 
-mirador-share-plugin@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/mirador-share-plugin/-/mirador-share-plugin-0.10.0.tgz#82cde27faedc440fab648db137e62849d6542420"
-  integrity sha512-hC9hG0H04WAR6JNfLDnQICtxwWV3K+cmqnArtOvAIGGnbgXWs5tmQyfdY55z05jzbeL40rd7z1K094hHV3R4WQ==
+mirador-share-plugin@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/mirador-share-plugin/-/mirador-share-plugin-0.11.0.tgz#13e2f654e38839044382acad42d9329e91a8cd5e"
+  integrity sha512-fHcdDXyrtfy5pn1zdQNX9BvE5Tjup66eQwyNippE5PMaP8ImUcrFaSL+mStdn+v6agsHcsdRqLhseZ0XWgEuAw==
 
-mirador@^3.0.0:
+mirador@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/mirador/-/mirador-3.3.0.tgz#7a957a1db1a5388b2b8cafab00db4eb9f97557b9"
   integrity sha512-BmGfRnWJ45B+vtiAwcFT7n9nKialfejE9UvuUK0NorO37ShArpsKr3yVSD4jQASwSR4DRRpPEG21jOk4WN7H3w==
@@ -9244,6 +9241,11 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mrmime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.0.tgz#14d387f0585a5233d291baba339b063752a2398b"
+  integrity sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -9457,7 +9459,7 @@ node-releases@^2.0.1:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
   integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
 
-nodemon@^2.0.2:
+nodemon@^2.0.15:
   version "2.0.15"
   resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.15.tgz#504516ce3b43d9dc9a955ccd9ec57550a31a8d4e"
   integrity sha512-gdHMNx47Gw7b3kWxJV64NI+Q5nfl0y5DgDbiVtShiwa7Z0IZ07Ll4RLFo6AjrhzMtoEZn5PDE3/c2AbVsiCkpA==
@@ -9487,16 +9489,6 @@ nopt@~1.0.10:
   dependencies:
     abbrev "1"
 
-normalize-package-data@^2.3.2:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    resolve "^1.10.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -9624,21 +9616,6 @@ npm-registry-fetch@^9.0.0:
     minizlib "^2.0.0"
     npm-package-arg "^8.0.0"
 
-npm-run-all@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
-  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    chalk "^2.4.1"
-    cross-spawn "^6.0.5"
-    memorystream "^0.3.1"
-    minimatch "^3.0.4"
-    pidtree "^0.3.0"
-    read-pkg "^3.0.0"
-    shell-quote "^1.6.1"
-    string.prototype.padend "^3.0.0"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -9712,9 +9689,9 @@ object-copy@^0.1.0:
     kind-of "^3.0.3"
 
 object-inspect@^1.11.0, object-inspect@^1.9.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
-  integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.1.tgz#d4bd7d7de54b9a75599f59a00bd698c1f1c6549b"
+  integrity sha512-If7BjFlpkzzBeV1cqgT3OSWT3azyoxDGajR+iGnFBfVV2EWyDyWaZZW2ERDjUaY2QM8i5jI3Sj7mhsM4DDAqWA==
 
 object-is@^1.0.1:
   version "1.1.5"
@@ -9942,13 +9919,6 @@ p-cancelable@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
   integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
 
-p-event@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/p-event/-/p-event-4.2.0.tgz#af4b049c8acd91ae81083ebd1e6f5cae2044c1b5"
-  integrity sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==
-  dependencies:
-    p-timeout "^3.1.0"
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -10016,13 +9986,6 @@ p-retry@^4.5.0:
     "@types/retry" "^0.12.0"
     retry "^0.13.1"
 
-p-timeout@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
-  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
-  dependencies:
-    p-finally "^1.0.0"
-
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -10236,13 +10199,6 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -10294,21 +10250,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-pidtree@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
-  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
-
 pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
 
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
@@ -11152,12 +11098,12 @@ postcss-reduce-initial@^4.0.3:
     has "^1.0.0"
     postcss "^7.0.0"
 
-postcss-reduce-initial@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.0.1.tgz#9d6369865b0f6f6f6b165a0ef5dc1a4856c7e946"
-  integrity sha512-zlCZPKLLTMAqA3ZWH57HlbCjkD55LX9dsRyxlls+wfuRfqCi5mSlZVan0heX5cHr154Dq9AfbH70LyhrSAezJw==
+postcss-reduce-initial@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-5.0.2.tgz#fa424ce8aa88a89bc0b6d0f94871b24abe94c048"
+  integrity sha512-v/kbAAQ+S1V5v9TJvbGkV98V2ERPdU6XvMcKMjqAlYiJ2NtsHGlKYLPjWWcXlaTKNxooId7BGxeraK8qXvzKtw==
   dependencies:
-    browserslist "^4.16.0"
+    browserslist "^4.16.6"
     caniuse-api "^3.0.0"
 
 postcss-reduce-transforms@^4.0.2:
@@ -11286,9 +11232,9 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3:
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
   version "2.0.1"
@@ -11344,13 +11290,13 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2
     source-map "^0.6.1"
 
 postcss@^8.1.4, postcss@^8.3.7:
-  version "8.3.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
-  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+  version "8.4.4"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.4.tgz#d53d4ec6a75fd62557a66bb41978bf47ff0c2869"
+  integrity sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==
   dependencies:
     nanoid "^3.1.30"
     picocolors "^1.0.0"
-    source-map-js "^0.6.2"
+    source-map-js "^1.0.1"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
@@ -11798,9 +11744,9 @@ react-full-screen@^0.2.4:
     fscreen "^1.0.1"
 
 react-i18next@^11.7.0:
-  version "11.14.2"
-  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.14.2.tgz#2ff28f6a0ddf06eaf79435ed6c70c441d709cf34"
-  integrity sha512-fmDhwNA0zDmSEL3BBT5qwNMvxrKu25oXDDAZyHprfB0AHZmWXfBmRLf8MX8i1iBd2I2C2vsA2D9wxYBIwzooEQ==
+  version "11.14.3"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.14.3.tgz#b44b5c4d1aadac5211be011827a2830be60f2522"
+  integrity sha512-Hf2aanbKgYxPjG8ZdKr+PBz9sY6sxXuZWizxCYyJD2YzvJ0W9JTQcddVEjDaKyBoCyd3+5HTerdhc9ehFugc6g==
   dependencies:
     "@babel/runtime" "^7.14.5"
     html-parse-stringify "^3.0.1"
@@ -11926,15 +11872,6 @@ read-package-json-fast@^2.0.1:
     json-parse-even-better-errors "^2.3.0"
     npm-normalize-package-bin "^1.0.1"
 
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -11993,9 +11930,9 @@ redux-saga@^1.1.3:
     "@redux-saga/core" "^1.1.3"
 
 redux-thunk@^2.3.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.0.tgz#ac89e1d6b9bdb9ee49ce69a69071be41bbd82d67"
-  integrity sha512-/y6ZKQNU/0u8Bm7ROLq9Pt/7lU93cT0IucYMrubo89ENjxPa7i8pqLKu6V4X7/TvYovQ6x01unTeyeZ9lgXiTA==
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"
+  integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==
 
 redux@^4.0.0, redux@^4.0.4, redux@^4.0.5:
   version "4.1.2"
@@ -12187,9 +12124,9 @@ requires-port@^1.0.0:
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
 reselect@^4.0.0:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.4.tgz#66df0aff41b6ee0f51e2cc17cfaf2c1995916f32"
-  integrity sha512-i1LgXw8DKSU5qz1EV0ZIKz4yIUHJ7L3bODh+Da6HmVSm9vdL/hG7IpbgzQ3k2XSirzf8/eI7OMEs81gb1VV2fQ==
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
+  integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
 
 resolve-cwd@^2.0.0:
   version "2.0.0"
@@ -12260,7 +12197,7 @@ resolve@1.19.0:
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
+resolve@^1.1.7, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -12329,7 +12266,7 @@ rework@1.0.1:
     convert-source-map "^0.3.3"
     css "^2.0.0"
 
-rfdc@^1.1.4:
+rfdc@^1.1.4, rfdc@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
@@ -12381,9 +12318,9 @@ rollup@2.38.4:
     fsevents "~2.3.1"
 
 rtl-css-js@^1.13.1:
-  version "1.14.5"
-  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.14.5.tgz#fd92685acd024e688dda899a28c5fb9270b79974"
-  integrity sha512-+ng7LWVvPjQUdgDVviR6vKi2X4JiBtlw5rdY0UM5/Cj39c2/KDUsY/VxEzGE25m4KR5g0dvuKfrDq7DaoDooIA==
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.15.0.tgz#680ed816e570a9ebccba9e1cd0f202c6a8bb2dc0"
+  integrity sha512-99Cu4wNNIhrI10xxUaABHsdDqzalrSRTie4GeCmbGVuehm4oj+fIy8fTzB+16pmKe8Bv9rl+hxIBez6KxExTew==
   dependencies:
     "@babel/runtime" "^7.1.2"
 
@@ -12593,7 +12530,7 @@ schema-utils@^2.6.0, schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.6
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.0.0, schema-utils@^3.1.0:
+schema-utils@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
@@ -12662,11 +12599,6 @@ semver-intersect@1.4.0:
   dependencies:
     semver "^5.0.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.0, semver@^5.0.1, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
 semver@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
@@ -12684,6 +12616,11 @@ semver@7.3.4:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^5.0.0, semver@^5.0.1, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
 semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
@@ -12875,11 +12812,6 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
-shell-quote@^1.6.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
-  integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -12890,9 +12822,9 @@ side-channel@^1.0.4:
     object-inspect "^1.9.0"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.5.tgz#9e3e8cc0c75a99472b44321033a7702e7738252f"
-  integrity sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.6.tgz#24e630c4b0f03fea446a2bd299e62b4a6ca8d0af"
+  integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
 
 simple-swizzle@^0.2.2:
   version "0.2.2"
@@ -12902,12 +12834,12 @@ simple-swizzle@^0.2.2:
     is-arrayish "^0.3.1"
 
 sirv@^1.0.7:
-  version "1.0.18"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.18.tgz#105fab52fb656ce8a2bebbf36b11052005952899"
-  integrity sha512-f2AOPogZmXgJ9Ma2M22ZEhc1dNtRIzcEkiflMFeVTRq+OViOZMvH1IPMVOwrKaxpSaHioBJiDR0SluRqGa7atA==
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
   dependencies:
     "@polka/url" "^1.0.0-next.20"
-    mime "^2.3.1"
+    mrmime "^1.0.0"
     totalist "^1.0.0"
 
 sisteransi@^1.0.5:
@@ -13071,12 +13003,12 @@ sockjs@0.3.20:
     websocket-driver "0.6.5"
 
 sockjs@^0.3.21:
-  version "0.3.21"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.21.tgz#b34ffb98e796930b60a0cfa11904d6a339a7d417"
-  integrity sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==
+  version "0.3.24"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
+  integrity sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==
   dependencies:
     faye-websocket "^0.11.3"
-    uuid "^3.4.0"
+    uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
 socks-proxy-agent@^5.0.0:
@@ -13113,10 +13045,10 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+source-map-js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
+  integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
 
 source-map-loader@1.0.2:
   version "1.0.2"
@@ -13168,10 +13100,10 @@ source-map-support@0.5.19:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@^0.5.17, source-map-support@^0.5.5, source-map-support@~0.5.12, source-map-support@~0.5.20:
-  version "0.5.20"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.20.tgz#12166089f8f5e5e8c56926b377633392dd2cb6c9"
-  integrity sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==
+source-map-support@^0.5.17, source-map-support@^0.5.5, source-map-support@~0.5.12, source-map-support@~0.5.19, source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -13183,14 +13115,6 @@ source-map-support@~0.4.0:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@~0.5.19:
-  version "0.5.21"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
-  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
 source-map-url@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
@@ -13221,32 +13145,6 @@ sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
-spdx-correct@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
-  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
-  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
-  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95"
-  integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==
-
 spdy-transport@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
@@ -13301,7 +13199,7 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-sshpk@^1.7.0:
+sshpk@^1.14.1, sshpk@^1.7.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
   integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
@@ -13468,15 +13366,6 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-string.prototype.padend@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.3.tgz#997a6de12c92c7cb34dc8a201a6c53d9bd88a5f1"
-  integrity sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
-
 string.prototype.trimend@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
@@ -13542,11 +13431,6 @@ strip-ansi@^7.0.0:
   dependencies:
     ansi-regex "^6.0.1"
 
-strip-bom@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
-
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@@ -14490,14 +14374,6 @@ uuid@^3.0.0, uuid@^3.2.1, uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-validate-npm-package-license@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
-  dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
-
 validate-npm-package-name@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
@@ -14775,9 +14651,9 @@ webpack-dev-server@3.11.2:
     yargs "^13.3.2"
 
 webpack-dev-server@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.5.0.tgz#614b5112cfa4730a4801bb4ddebb3be5b0d70497"
-  integrity sha512-Ss4WptsUjYa+3hPI4iYZYEc8FrtnfkaPrm5WTjk9ux5kiCS718836srs0ppKMHRaCHP5mQ6g4JZGcfDdGbCjpQ==
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.6.0.tgz#e8648601c440172d9b6f248d28db98bed335315a"
+  integrity sha512-oojcBIKvx3Ya7qs1/AVWHDgmP1Xml8rGsEBnSobxU/UJSX1xP1GPM3MwsAnDzvqcVmVki8tV7lbcsjEjk0PtYg==
   dependencies:
     ansi-html-community "^0.0.8"
     bonjour "^3.5.0"
@@ -14785,17 +14661,17 @@ webpack-dev-server@^4.5.0:
     colorette "^2.0.10"
     compression "^1.7.4"
     connect-history-api-fallback "^1.6.0"
+    default-gateway "^6.0.3"
     del "^6.0.0"
     express "^4.17.1"
     graceful-fs "^4.2.6"
     html-entities "^2.3.2"
     http-proxy-middleware "^2.0.0"
-    internal-ip "^6.2.0"
     ipaddr.js "^2.0.1"
     open "^8.0.9"
     p-retry "^4.5.0"
     portfinder "^1.0.28"
-    schema-utils "^3.1.0"
+    schema-utils "^4.0.0"
     selfsigned "^1.10.11"
     serve-index "^1.9.1"
     sockjs "^0.3.21"
@@ -15126,14 +15002,14 @@ ws@^6.2.1:
     async-limiter "~1.0.0"
 
 ws@^7.3.1, ws@^7.4.6:
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
-  integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
+  integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
 
 ws@^8.1.0:
-  version "8.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
-  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.3.0.tgz#7185e252c8973a60d57170175ff55fdbd116070d"
+  integrity sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==
 
 ws@~7.4.2:
   version "7.4.6"