diff --git a/.gitignore b/.gitignore
index dd5f5fa391a49345d0b2bfb825691646f0761af9..01fc9231bc35d028e425352a85daf6ba614cb4c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,8 @@
 /tsd_typings/
 npm-debug.log
 
+/build/
+
 /config/environment.dev.js
 /config/environment.prod.js
 
diff --git a/config/environment.default.js b/config/environment.default.js
index 804d80b0f20f9a3aa6b28eb02e854ebaca8dcd10..03080f756f38a5c97efd9559707da589c77e2cfd 100644
--- a/config/environment.default.js
+++ b/config/environment.default.js
@@ -13,7 +13,7 @@ module.exports = {
     host: 'dspace7.4science.cloud',
     port: 443,
     // NOTE: Space is capitalized because 'namespace' is a reserved string in TypeScript
-    nameSpace: '/dspace-spring-rest/api'
+    nameSpace: '/server/api'
   },
   // Caching settings
   cache: {
@@ -149,11 +149,39 @@ module.exports = {
     // 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
+    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: 'title'
+      },
+      {
+        id: 'dateissued',
+        type: 'date',
+        metadataField: 'dc.date.issued'
+      },
+      {
+        id: 'author',
+        type: 'metadata'
+      },
+      {
+        id: 'subject',
+        type: 'metadata'
+      }
+    ]
   },
   item: {
     edit: {
       undoTimeout: 10000 // 10 seconds
     }
+  },
+  theme: {
+    name: 'default',
   }
 };
diff --git a/package.json b/package.json
index 7755f3d3d01b931542debbe174a955e300e5c9c3..5ec7b2d694840b0d2e0df50b63500c0b2423d125 100644
--- a/package.json
+++ b/package.json
@@ -17,15 +17,16 @@
     "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",
+    "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:node",
-    "prebuild": "yarn run clean:dist",
+    "prebuild": "yarn run clean:bld && yarn run clean:dist",
     "prebuild:aot": "yarn run prebuild",
     "prebuild:prod": "yarn run prebuild",
-    "build": "node ./webpack/run-webpack.js --progress --mode development",
-    "build:aot": "node ./webpack/run-webpack.js --env.aot --env.server --mode development && node ./webpack/run-webpack.js --env.aot --env.client --mode development",
-    "build:prod": "node ./webpack/run-webpack.js --env.aot --env.server --mode production && node ./webpack/run-webpack.js --env.aot --env.client --mode production",
+    "build": "node ./scripts/webpack.js --progress --mode development",
+    "build:aot": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode development && node ./scripts/webpack.js --env.aot --env.client --mode development",
+    "build:prod": "yarn run syncbuilddir && node ./scripts/webpack.js --env.aot --env.server --mode production && node ./scripts/webpack.js --env.aot --env.client --mode production",
     "postbuild:prod": "yarn run rollup",
     "rollup": "rollup -c rollup.config.js",
     "prestart": "yarn run build:prod",
@@ -40,7 +41,8 @@
     "server": "node dist/server.js",
     "server:watch": "nodemon dist/server.js",
     "server:watch:debug": "nodemon --debug dist/server.js",
-    "webpack:watch": "node ./webpack/run-webpack.js -w --mode development",
+    "syncbuilddir": "node ./scripts/sync-build-dir.js",
+    "webpack:watch": "node ./scripts/webpack.js -w --mode development",
     "watch": "yarn run build && npm-run-all -p webpack:watch server:watch",
     "watch:debug": "yarn run build && npm-run-all -p webpack:watch server:watch:debug",
     "predebug": "yarn run build",
@@ -94,6 +96,7 @@
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",
     "core-js": "^2.5.7",
+    "debug-loader": "^0.0.1",
     "express": "4.16.2",
     "express-session": "1.15.6",
     "fast-json-patch": "^2.0.7",
@@ -121,6 +124,7 @@
     "reflect-metadata": "0.1.12",
     "rxjs": "6.2.2",
     "rxjs-spy": "^7.5.1",
+    "sass-resources-loader": "^2.0.0",
     "sortablejs": "1.7.0",
     "text-mask-core": "5.0.1",
     "ts-loader": "^5.2.1",
@@ -163,6 +167,7 @@
     "codelyzer": "^4.4.4",
     "compression-webpack-plugin": "^1.1.6",
     "copy-webpack-plugin": "^4.4.1",
+    "copyfiles": "^2.1.0",
     "coveralls": "3.0.0",
     "css-loader": "1.0.0",
     "cssnano": "^4.1.10",
@@ -213,7 +218,7 @@
     "script-ext-html-webpack-plugin": "2.0.1",
     "source-map": "0.7.3",
     "source-map-loader": "0.2.4",
-    "string-replace-loader": "2.1.1",
+    "string-replace-loader": "^2.1.1",
     "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
     "ts-node": "4.1.0",
@@ -224,6 +229,7 @@
     "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-middleware": "3.2.0",
     "webpack-dev-server": "^3.1.5",
+    "webpack-import-glob-loader": "^1.6.3",
     "webpack-merge": "4.1.4",
     "webpack-node-externals": "1.7.2"
   }
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index 30922e8b9020d13c561542d962a1ca9889416a69..4abfe8ca0deae3c5fbe5148bb816380bb0b76b6a 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -109,6 +109,16 @@
       "link": {
         "simple": "Simple item page",
         "full": "Full item page"
+      },
+      "journal": {
+        "search": {
+          "title": "Articles in this journal"
+        }
+      },
+      "person": {
+        "search": {
+          "title": "Articles by this author"
+        }
       }
     },
     "select": {
@@ -418,7 +428,10 @@
       "titleprefix": "Publication: ",
       "journal-title": "Journal Title",
       "journal-issn": "Journal ISSN",
-      "volume-title": "Volume Title"
+      "volume-title": "Volume Title",
+      "publisher": "Publisher",
+      "description": "Description"
+
     },
     "listelement": {
       "badge": "Publication"
@@ -641,6 +654,34 @@
         "birthDate": {
           "placeholder": "Birth Date",
           "head": "Birth Date"
+        },
+        "creativeWorkPublisher": {
+          "placeholder": "Publisher",
+          "head": "Publisher"
+        },
+        "creativeWorkEditor": {
+          "placeholder": "Editor",
+          "head": "Editor"
+        },
+        "creativeWorkKeywords": {
+          "placeholder": "Subject",
+          "head": "Subject"
+        },
+        "creativeDatePublished": {
+          "placeholder": "Date Published",
+          "head": "Date Published"
+        },
+        "organizationAddressCountry": {
+          "placeholder": "Country",
+          "head": "Country"
+        },
+        "organizationAddressLocality": {
+          "placeholder": "City",
+          "head": "City"
+        },
+        "organizationFoundingDate": {
+          "placeholder": "Date Founded",
+          "head": "Date Founded"
         }
       }
     }
@@ -813,7 +854,7 @@
       "control_panel": "Control Panel",
       "browse_global": "All of DSpace",
       "browse_global_communities_and_collections": "Communities & Collections",
-      "browse_global_by_issue_date": "By Issue Date",
+      "browse_global_by_dateissued": "By Issue Date",
       "browse_global_by_author": "By Author",
       "browse_global_by_title": "By Title",
       "browse_global_by_subject": "By Subject",
diff --git a/resources/images/banner.jpg b/resources/images/banner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5f18b6cb6d86bfbe632913b4c085d95962a28f93
Binary files /dev/null and b/resources/images/banner.jpg differ
diff --git a/resources/images/dspace-logo-monochrome.svg b/resources/images/dspace-logo-monochrome.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5a2204ad83047126e082691e17ca7a1e285b47c3
--- /dev/null
+++ b/resources/images/dspace-logo-monochrome.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="231.893px" height="167.458px" viewBox="0 0 231.893 167.458" enable-background="new 0 0 231.893 167.458"
+	 xml:space="preserve">
+<path fill="#43515F" d="M51.733,143.32c0-1.94,1.65-3.202,4.562-3.202c3.303,0,6.798,1.115,9.419,3.543l3.835-5.146
+	c-3.202-2.963-7.476-4.516-12.621-4.516c-7.622,0-12.284,4.467-12.284,9.855c0,12.188,18.644,8.254,18.644,13.887
+	c0,1.893-1.797,3.592-5.632,3.592c-4.466,0-8.011-2.039-10.292-4.418l-3.787,5.39c3.058,3.059,7.525,5.153,13.788,5.153
+	c8.691,0,12.964-4.474,12.964-10.396C70.329,144.971,51.733,148.418,51.733,143.32z M100.682,134.484H85.534v32.386h6.895v-11.557
+	h8.254c6.99,0,10.875-4.759,10.875-10.391C111.558,139.243,107.722,134.484,100.682,134.484z M99.71,149.245h-7.283v-8.69h7.283
+	c2.72,0,4.808,1.651,4.808,4.368C104.518,147.592,102.43,149.245,99.71,149.245z M180.759,140.067c3.302,0,6.215,2.09,7.573,4.71
+	l5.923-2.913c-2.28-4.078-6.407-7.914-13.496-7.914c-9.759,0-17.283,6.75-17.283,16.75c0,9.954,7.524,16.76,17.283,16.76
+	c7.089,0,11.216-3.94,13.496-7.971l-5.923-2.865c-1.358,2.623-4.271,4.711-7.573,4.711c-5.924,0-10.194-4.517-10.194-10.635
+	C170.564,144.583,174.835,140.067,180.759,140.067z M131.958,134.484l-12.485,32.386h7.823l2.04-5.486h13.887l2.038,5.486h7.816
+	l-12.479-32.386H131.958z M131.228,155.313l5.05-13.936l5.05,13.936H131.228z M231.892,140.553v-6.069h-22.916v32.386h22.916v-6.07
+	H215.87v-7.379h15.684v-6.069H215.87v-6.797L231.892,140.553L231.892,140.553z"/>
+<path fill="#43515F" d="M29.956,150.652c0-9.71-7.04-16.168-17.187-16.168H0v32.386h12.817
+	C22.916,166.87,29.956,160.458,29.956,150.652z M12.769,160.799H6.894v-20.246h5.924c6.603,0,10.098,4.418,10.098,10.099
+	C22.916,156.187,19.177,160.799,12.769,160.799z"/>
+<path fill="#43515F" d="M120.726,58.569l0.109-0.006l0.116-0.01l0.106-0.013l0.11-0.01l0.11-0.023l0.109-0.019l0.106-0.023
+	l0.106-0.029l0.105-0.023l0.106-0.033l0.103-0.034l0.097-0.035l0.104-0.04l0.101-0.042l0.1-0.042v-0.001l0.096-0.045l0,0
+	l0.095-0.044l0.097-0.049l0.091-0.056v-0.001l0.094-0.05v-0.002l0.09-0.056v-0.001l0.093-0.06l0.083-0.056v-0.001l0.085-0.063
+	l0.088-0.065v-0.002l0.087-0.062v-0.001c0.816-0.683,1.393-1.646,1.561-2.738l0.013-0.104V54.72l0.014-0.101v-0.011l0.009-0.098
+	v-0.012l0.009-0.101V54.38l0.005-0.095v-0.016l0.002-0.105v-16.46l-0.002-0.105v-0.016l-0.005-0.095v-0.013l-0.009-0.101v-0.012
+	l-0.009-0.098v-0.011l-0.014-0.1v-0.01l-0.013-0.104c-0.167-1.092-0.744-2.057-1.561-2.738V34.3l-0.087-0.063v-0.002l-0.088-0.065
+	l-0.085-0.063v-0.001l-0.083-0.056l-0.093-0.061l0,0l-0.09-0.056V33.93l-0.094-0.05v-0.001l-0.091-0.056l-0.097-0.049l-0.095-0.043
+	V33.73l-0.096-0.045v-0.001l-0.1-0.043l-0.101-0.042l-0.104-0.04l-0.097-0.035l-0.103-0.031l-0.106-0.036l-0.105-0.023l-0.106-0.028
+	l-0.106-0.024l-0.109-0.019l-0.11-0.023l-0.11-0.009l-0.106-0.014l-0.116-0.01l-0.109-0.006l-0.114-0.005h-7.89
+	c-9.716,0-15.858-7.838-15.858-17.15V6.92c0-3.812-3.102-6.915-6.914-6.915H74.085c-3.813,0-6.92,3.106-6.92,6.915v16.682
+	c0,3.806,3.104,6.909,6.92,6.909h8.414c9.169,0,16.906,5.95,17.146,15.403v0.04c-0.24,9.453-7.978,15.402-17.146,15.402h-8.414
+	c-3.815,0-6.92,3.103-6.92,6.909v16.682c0,3.81,3.106,6.915,6.92,6.915H89.95c3.812,0,6.914-3.104,6.914-6.915v-9.223
+	c0-9.312,6.144-17.149,15.858-17.149h7.89L120.726,58.569z M154.772,9.956C148.631,3.814,140.15,0,130.816,0h-15.024v17.424h15.024
+	c4.526,0,8.647,1.858,11.64,4.849c2.99,2.99,4.849,7.112,4.849,11.639v24.042c0,4.538-1.853,8.665-4.832,11.655l-0.017-0.016
+	c-2.991,2.991-7.113,4.849-11.64,4.849h-15.024v17.424h15.024c9.333,0,17.814-3.814,23.956-9.956v-0.033
+	c6.142-6.143,9.955-14.614,9.955-23.923V33.912C164.727,24.578,160.914,16.097,154.772,9.956z"/>
+</svg>
diff --git a/scripts/sync-build-dir.js b/scripts/sync-build-dir.js
new file mode 100644
index 0000000000000000000000000000000000000000..c147f139a5a3031f95b1e6fb4f6ecc360011d41c
--- /dev/null
+++ b/scripts/sync-build-dir.js
@@ -0,0 +1,22 @@
+const syncBuildDir = require('copyfiles');
+const path = require('path');
+const {
+  projectRoot,
+  theme,
+  themePath,
+} = require('../webpack/helpers');
+
+const projectDepth = projectRoot('./').split(path.sep).length;
+
+let callback;
+
+if (theme !== null && theme !== undefined) {
+  callback = () => {
+    syncBuildDir([path.join(themePath, '**/*'), 'build'], { up: projectDepth + 2 }, () => {})
+  }
+}
+else {
+  callback = () => {};
+}
+
+syncBuildDir([projectRoot('src/**/*'), 'build'], { up: projectDepth + 1 }, callback);
diff --git a/webpack/run-webpack.js b/scripts/webpack.js
similarity index 100%
rename from webpack/run-webpack.js
rename to scripts/webpack.js
diff --git a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
index 8c208ffad517b302e1e4dc82f37d2ee3df43f03f..98d86595708a39dabc6671966026f21c6ed7b91f 100644
--- a/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
+++ b/src/app/+admin/admin-registries/metadata-registry/metadata-registry.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
index 8c208ffad517b302e1e4dc82f37d2ee3df43f03f..98d86595708a39dabc6671966026f21c6ed7b91f 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .selectable-row:hover {
   cursor: pointer;
 }
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
index 88eb98509acff8ad3ba1b4b7dd133891fc647246..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
+++ b/src/app/+admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.html b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
index fc9e707bcde37696c3cb351b3131788ed432ac3b..02a25a8227e129deb6faea649a71df4ebaa58d90 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.html
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.html
@@ -1,4 +1,4 @@
-<nav @slideHorizontal class="navbar navbar-dark bg-dark p-0"
+<nav @slideHorizontal class="navbar navbar-dark p-0"
      [ngClass]="{'active': sidebarOpen, 'inactive': sidebarClosed}"
      [@slideSidebar]="{
      value: (!(sidebarExpanded | async) ? 'collapsed' : 'expanded'),
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
index 9236cd2a0d4e415199468b6c2d337f3af5f90fab..36355fcab91c6f41ee7f32a48b88d1778327173d 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
 $icon-z-index: 10;
 
 :host {
@@ -8,6 +6,7 @@ $icon-z-index: 10;
     height: 100vh;
     flex: 1 1 auto;
     nav {
+        background-color: $admin-sidebar-bg;
         height: 100%;
         flex-direction: column;
         > div {
@@ -44,7 +43,7 @@ $icon-z-index: 10;
                 .sidebar-section {
                     display: flex;
                     align-content: stretch;
-                    background-color: $dark;
+                    background-color: $admin-sidebar-bg;
                     .nav-item {
                         padding-top: $spacer;
                         padding-bottom: $spacer;
diff --git a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
index 779cba09d9bf86c1c0f7208cde47633c29acd89c..37fe15bd4065472c459d00df647edd848e22c405 100644
--- a/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
+++ b/src/app/+admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 ::ng-deep {
     .fa-chevron-right {
         padding-left: $spacer/2;
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 2acd96adb0c62d83fe1ad6ecdefdcd384096834f..98d0cc9cd1ba24bcea42c8e1e685dbf3b5a1fc60 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
@@ -13,6 +13,7 @@ import { BrowseService } from '../../core/browse/browse.service';
 import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
+import { BrowseByType, rendersBrowseBy } from '../+browse-by-switcher/browse-by-decorator';
 
 @Component({
   selector: 'ds-browse-by-date-page',
@@ -21,9 +22,10 @@ import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 })
 /**
  * Component for browsing items by metadata definition of type 'date'
- * A metadata definition is a short term used to describe one or multiple metadata fields.
+ * 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)
 export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
 
   /**
@@ -53,12 +55,12 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
         })
         .subscribe((params) => {
           const metadataField = params.metadataField || this.defaultMetadataField;
-          this.metadata = params.metadata || this.defaultMetadata;
+          this.browseId = params.id || this.defaultBrowseId;
           this.startsWith = +params.startsWith || params.startsWith;
-          const searchOptions = browseParamsToOptions(params, Object.assign({}), this.sortConfig, this.metadata);
+          const searchOptions = browseParamsToOptions(params, Object.assign({}), this.sortConfig, this.browseId);
           this.updatePageWithItems(searchOptions, this.value);
           this.updateParent(params.scope);
-          this.updateStartsWithOptions(this.metadata, metadataField, params.scope);
+          this.updateStartsWithOptions(this.browseId, metadataField, params.scope);
         }));
   }
 
@@ -78,8 +80,9 @@ export class BrowseByDatePageComponent extends BrowseByMetadataPageComponent {
         let lowerLimit = this.config.browseBy.defaultLowerLimit;
         if (hasValue(firstItemRD.payload)) {
           const date = firstItemRD.payload.firstMetadataValue(metadataField);
-          if (hasValue(date) && hasValue(+date.split('-')[0])) {
-            lowerLimit = +date.split('-')[0];
+          if (hasValue(date)) {
+            const dateObj = new Date(date);
+            lowerLimit = dateObj.getFullYear();
           }
         }
         const options = [];
diff --git a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
index cf43f74eb080a007636b1a084f258e71249f131f..c589c543d485f8e35ab503f651f0f5cb4527b710 100644
--- a/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
+++ b/src/app/+browse-by/+browse-by-metadata-page/browse-by-metadata-page.component.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="browse-by-metadata w-100">
     <ds-browse-by *ngIf="startsWithOptions" class="col-xs-12 w-100"
-      title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + metadata | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
+      title="{{'browse.title' | translate:{collection: (parent$ | async)?.payload?.name || '', field: 'browse.metadata.' + browseId | translate, value: (value)? '&quot;' + value + '&quot;': ''} }}"
       [objects$]="(items$ !== undefined)? items$ : browseEntries$"
       [paginationConfig]="paginationConfig"
       [sortConfig]="sortConfig"
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 52c63341bdbf5784c9523f7b8534ffa9855b69fd..a2964e6abf4bcae010053e50432799e77c7af05a 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
@@ -15,6 +15,7 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { take } from 'rxjs/operators';
 import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
+import { BrowseByType, rendersBrowseBy } from '../+browse-by-switcher/browse-by-decorator';
 
 @Component({
   selector: 'ds-browse-by-metadata-page',
@@ -23,9 +24,10 @@ import { StartsWithType } from '../../shared/starts-with/starts-with-decorator';
 })
 /**
  * Component for browsing (items) by metadata definition
- * A metadata definition is a short term used to describe one or multiple metadata fields.
+ * 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)
 export class BrowseByMetadataPageComponent implements OnInit {
 
   /**
@@ -63,14 +65,14 @@ export class BrowseByMetadataPageComponent implements OnInit {
   subs: Subscription[] = [];
 
   /**
-   * The default metadata definition to resort to when none is provided
+   * The default browse id to resort to when none is provided
    */
-  defaultMetadata = 'author';
+  defaultBrowseId = 'author';
 
   /**
-   * The current metadata definition
+   * The current browse id
    */
-  metadata = this.defaultMetadata;
+  browseId = this.defaultBrowseId;
 
   /**
    * The type of StartsWith options to render
@@ -112,10 +114,10 @@ export class BrowseByMetadataPageComponent implements OnInit {
           return Object.assign({}, params, queryParams);
         })
         .subscribe((params) => {
-          this.metadata = params.metadata || this.defaultMetadata;
+          this.browseId = params.id || this.defaultBrowseId;
           this.value = +params.value || params.value || '';
           this.startsWith = +params.startsWith || params.startsWith;
-          const searchOptions = browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.metadata);
+          const searchOptions = browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.browseId);
           if (isNotEmpty(this.value)) {
             this.updatePageWithItems(searchOptions, this.value);
           } else {
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
new file mode 100644
index 0000000000000000000000000000000000000000..f54efb9378b805a66d2a8f53f750647fe32aa670
--- /dev/null
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-decorator.spec.ts
@@ -0,0 +1,12 @@
+import { BrowseByType, rendersBrowseBy } from './browse-by-decorator';
+
+describe('BrowseByDecorator', () => {
+  const titleDecorator = rendersBrowseBy(BrowseByType.Title);
+  const dateDecorator = rendersBrowseBy(BrowseByType.Date);
+  const metadataDecorator = rendersBrowseBy(BrowseByType.Metadata);
+  it('should have a decorator for all types', () => {
+    expect(titleDecorator.length).not.toEqual(0);
+    expect(dateDecorator.length).not.toEqual(0);
+    expect(metadataDecorator.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
new file mode 100644
index 0000000000000000000000000000000000000000..01433779221274a039fc15434a1ed428cb241452
--- /dev/null
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-decorator.ts
@@ -0,0 +1,37 @@
+import { hasNoValue } from '../../shared/empty.util';
+
+export enum BrowseByType {
+  Title = 'title',
+  Metadata = 'metadata',
+  Date = 'date'
+}
+
+export const DEFAULT_BROWSE_BY_TYPE = BrowseByType.Metadata;
+
+const map = new Map();
+
+/**
+ * Decorator used for rendering Browse-By pages by type
+ * @param browseByType  The type of page
+ */
+export function rendersBrowseBy(browseByType: BrowseByType) {
+  return function decorator(component: any) {
+    if (hasNoValue(map.get(browseByType))) {
+      map.set(browseByType, component);
+    } else {
+      throw new Error(`There can't be more than one component to render Browse-By of type "${browseByType}"`);
+    }
+  };
+}
+
+/**
+ * Get the component used for rendering a Browse-By page by type
+ * @param browseByType  The type of page
+ */
+export function getComponentByBrowseByType(browseByType) {
+  const comp = map.get(browseByType);
+  if (hasNoValue(comp)) {
+    map.get(DEFAULT_BROWSE_BY_TYPE);
+  }
+  return comp;
+}
diff --git a/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html b/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..afe79cf2b10f1d7ca923593e6431f66b4e792582
--- /dev/null
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.html
@@ -0,0 +1 @@
+<ng-container *ngComponentOutlet="browseByComponent | async"></ng-container>
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
new file mode 100644
index 0000000000000000000000000000000000000000..85805debe0587569f751dd7f6072bce31c3864aa
--- /dev/null
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.spec.ts
@@ -0,0 +1,55 @@
+import { BrowseBySwitcherComponent } from './browse-by-switcher.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ENV_CONFIG, GLOBAL_CONFIG } from '../../../config';
+import { ActivatedRoute } from '@angular/router';
+import * as decorator from './browse-by-decorator';
+import createSpy = jasmine.createSpy;
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+
+describe('BrowseBySwitcherComponent', () => {
+  let comp: BrowseBySwitcherComponent;
+  let fixture: ComponentFixture<BrowseBySwitcherComponent>;
+
+  const types = ENV_CONFIG.browseBy.types;
+
+  const params = new BehaviorSubject(createParamsWithId('initialValue'));
+
+  const activatedRouteStub = {
+    params: params
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BrowseBySwitcherComponent ],
+      providers: [
+        { provide: GLOBAL_CONFIG, useValue: ENV_CONFIG },
+        { provide: ActivatedRoute, useValue: activatedRouteStub }
+      ],
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(BrowseBySwitcherComponent);
+    comp = fixture.componentInstance;
+    spyOnProperty(decorator, 'getComponentByBrowseByType').and.returnValue(createSpy('getComponentByItemType'));
+  }));
+
+  types.forEach((type) => {
+    describe(`when switching to a browse-by page for "${type.id}"`, () => {
+      beforeEach(() => {
+        params.next(createParamsWithId(type.id));
+        fixture.detectChanges();
+      });
+
+      it(`should call getComponentByBrowseByType with type "${type.type}"`, () => {
+        expect(decorator.getComponentByBrowseByType).toHaveBeenCalledWith(type.type);
+      });
+    });
+  });
+});
+
+export function createParamsWithId(id) {
+  return { id: id };
+}
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
new file mode 100644
index 0000000000000000000000000000000000000000..1ae8927f0ab9600e0408a3ad159020bc363a9b21
--- /dev/null
+++ b/src/app/+browse-by/+browse-by-switcher/browse-by-switcher.component.ts
@@ -0,0 +1,40 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
+import { map, tap } from 'rxjs/operators';
+import { getComponentByBrowseByType } from './browse-by-decorator';
+
+@Component({
+  selector: 'ds-browse-by-switcher',
+  templateUrl: './browse-by-switcher.component.html'
+})
+/**
+ * Component for determining what Browse-By component to use depending on the metadata (browse ID) provided
+ */
+export class BrowseBySwitcherComponent implements OnInit {
+
+  /**
+   * Resolved browse-by component
+   */
+  browseByComponent: Observable<any>;
+
+  public constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+                     protected route: ActivatedRoute) {
+  }
+
+  /**
+   * Fetch the correct browse-by component by using the relevant config from environment.js
+   */
+  ngOnInit(): void {
+    this.browseByComponent = this.route.params.pipe(
+      map((params) => {
+        const id = params.id;
+        return this.config.browseBy.types.find((config: BrowseByTypeConfig) => config.id === id);
+      }),
+      map((config: BrowseByTypeConfig) => getComponentByBrowseByType(config.type))
+    );
+  }
+
+}
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 717275bf8b93a31ddfc9d54291dc7f14e3232cd4..91713cd21905de25c680f11684e0f32a32bb15c2 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
@@ -1,6 +1,5 @@
 import { combineLatest as observableCombineLatest } from 'rxjs';
 import { Component } from '@angular/core';
-import { ItemDataService } from '../../core/data/item-data.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { hasValue } from '../../shared/empty.util';
 import {
@@ -11,6 +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';
 
 @Component({
   selector: 'ds-browse-by-title-page',
@@ -20,6 +20,7 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 /**
  * Component for browsing items by title (dc.title)
  */
+@rendersBrowseBy(BrowseByType.Title)
 export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
 
   public constructor(protected route: ActivatedRoute,
@@ -41,8 +42,8 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
           return Object.assign({}, params, queryParams, data);
         })
         .subscribe((params) => {
-          this.metadata = params.metadata || this.defaultMetadata;
-          this.updatePageWithItems(browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.metadata), undefined);
+          this.browseId = params.id || this.defaultBrowseId;
+          this.updatePageWithItems(browseParamsToOptions(params, this.paginationConfig, this.sortConfig, this.browseId), undefined);
           this.updateParent(params.scope)
         }));
     this.updateStartsWithTextOptions();
diff --git a/src/app/+browse-by/browse-by-guard.spec.ts b/src/app/+browse-by/browse-by-guard.spec.ts
index 784f9ea22dbd5445faf61b0e4a81bee943bbd321..da45437a7863e8ac89aaa2f22a185509a72febd8 100644
--- a/src/app/+browse-by/browse-by-guard.spec.ts
+++ b/src/app/+browse-by/browse-by-guard.spec.ts
@@ -1,6 +1,7 @@
 import { first } from 'rxjs/operators';
 import { BrowseByGuard } from './browse-by-guard';
 import { of as observableOf } from 'rxjs';
+import { ENV_CONFIG } from '../../config';
 
 describe('BrowseByGuard', () => {
   describe('canActivate', () => {
@@ -11,20 +12,20 @@ describe('BrowseByGuard', () => {
     const name = 'An interesting DSO';
     const title = 'Author';
     const field = 'Author';
-    const metadata = 'author';
+    const id = 'author';
     const metadataField = 'dc.contributor';
     const scope = '1234-65487-12354-1235';
     const value = 'Filter';
 
     beforeEach(() => {
       dsoService = {
-        findById: (id: string) => observableOf({ payload: { name: name }, hasSucceeded: true })
+        findById: (dsoId: string) => observableOf({ payload: { name: name }, hasSucceeded: true })
       };
 
       translateService = {
         instant: () => field
       };
-      guard = new BrowseByGuard(dsoService, translateService);
+      guard = new BrowseByGuard(ENV_CONFIG, dsoService, translateService);
     });
 
     it('should return true, and sets up the data correctly, with a scope and value', () => {
@@ -34,7 +35,7 @@ describe('BrowseByGuard', () => {
           metadataField,
         },
         params: {
-          metadata,
+          id,
         },
         queryParams: {
           scope,
@@ -47,7 +48,7 @@ describe('BrowseByGuard', () => {
           (canActivate) => {
             const result = {
                 title,
-                metadata,
+                id,
                 metadataField,
                 collection: name,
                 field,
@@ -66,7 +67,7 @@ describe('BrowseByGuard', () => {
           metadataField,
         },
         params: {
-          metadata,
+          id,
         },
         queryParams: {
           scope
@@ -79,7 +80,7 @@ describe('BrowseByGuard', () => {
           (canActivate) => {
             const result = {
                 title,
-                metadata,
+                id,
                 metadataField,
                 collection: name,
                 field,
@@ -98,7 +99,7 @@ describe('BrowseByGuard', () => {
           metadataField,
         },
         params: {
-          metadata,
+          id,
         },
         queryParams: {
           value
@@ -110,7 +111,7 @@ describe('BrowseByGuard', () => {
           (canActivate) => {
             const result = {
                 title,
-                metadata,
+                id,
                 metadataField,
                 collection: '',
                 field,
diff --git a/src/app/+browse-by/browse-by-guard.ts b/src/app/+browse-by/browse-by-guard.ts
index 5d3dad2b0f99a209b2cfa3a0eec3d0f97fc0efe7..3813f7e6567f668a00ebcfe6464f19526ebcfe35 100644
--- a/src/app/+browse-by/browse-by-guard.ts
+++ b/src/app/+browse-by/browse-by-guard.ts
@@ -1,11 +1,12 @@
 import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
-import { Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { DSpaceObjectDataService } from '../core/data/dspace-object-data.service';
-import { hasValue } from '../shared/empty.util';
+import { hasNoValue, hasValue } from '../shared/empty.util';
 import { map } from 'rxjs/operators';
 import { getSucceededRemoteData } from '../core/shared/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { of as observableOf } from 'rxjs';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../config';
 
 @Injectable()
 /**
@@ -13,36 +14,43 @@ import { of as observableOf } from 'rxjs';
  */
 export class BrowseByGuard implements CanActivate {
 
-  constructor(protected dsoService: DSpaceObjectDataService,
+  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+              protected dsoService: DSpaceObjectDataService,
               protected translate: TranslateService) {
   }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     const title = route.data.title;
-    const metadata = route.params.metadata || route.queryParams.metadata || route.data.metadata;
-    const metadataField = route.data.metadataField;
+    const id = route.params.id || route.queryParams.id || route.data.id;
+    let metadataField = route.data.metadataField;
+    if (hasNoValue(metadataField) && hasValue(id)) {
+      const config = this.config.browseBy.types.find((conf) => conf.id === id);
+      if (hasValue(config) && hasValue(config.metadataField)) {
+        metadataField = config.metadataField;
+      }
+    }
     const scope = route.queryParams.scope;
     const value = route.queryParams.value;
-    const metadataTranslated = this.translate.instant('browse.metadata.' + metadata);
+    const metadataTranslated = this.translate.instant('browse.metadata.' + id);
     if (hasValue(scope)) {
       const dsoAndMetadata$ = this.dsoService.findById(scope).pipe(getSucceededRemoteData());
       return dsoAndMetadata$.pipe(
         map((dsoRD) => {
           const name = dsoRD.payload.name;
-          route.data = this.createData(title, metadata, metadataField, name, metadataTranslated, value);
+          route.data = this.createData(title, id, metadataField, name, metadataTranslated, value);
           return true;
         })
       );
     } else {
-      route.data = this.createData(title, metadata, metadataField, '', metadataTranslated, value);
+      route.data = this.createData(title, id, metadataField, '', metadataTranslated, value);
       return observableOf(true);
     }
   }
 
-  private createData(title, metadata, metadataField, collection, field, value) {
+  private createData(title, id, metadataField, collection, field, value) {
     return {
       title: title,
-      metadata: metadata,
+      id: id,
       metadataField: metadataField,
       collection: collection,
       field: field,
diff --git a/src/app/+browse-by/browse-by-routing.module.ts b/src/app/+browse-by/browse-by-routing.module.ts
index 9ba15ecfe922cafd6e00e93a94db33bbaa225a58..e549c0f4e60353dcf3e631306de8b2e2084b2bbc 100644
--- a/src/app/+browse-by/browse-by-routing.module.ts
+++ b/src/app/+browse-by/browse-by-routing.module.ts
@@ -1,16 +1,12 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { BrowseByTitlePageComponent } from './+browse-by-title-page/browse-by-title-page.component';
-import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
-import { BrowseByDatePageComponent } from './+browse-by-date-page/browse-by-date-page.component';
 import { BrowseByGuard } from './browse-by-guard';
+import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: 'title', component: BrowseByTitlePageComponent, canActivate: [BrowseByGuard], data: { metadata: 'title', title: 'browse.title' } },
-      { path: 'dateissued', component: BrowseByDatePageComponent, canActivate: [BrowseByGuard], data: { metadata: 'dateissued', metadataField: 'dc.date.issued', title: 'browse.title' } },
-      { path: ':metadata', component: BrowseByMetadataPageComponent, canActivate: [BrowseByGuard], data: { title: 'browse.title' } }
+      { path: ':id', component: BrowseBySwitcherComponent, canActivate: [BrowseByGuard], data: { title: 'browse.title' } }
     ])
   ]
 })
diff --git a/src/app/+browse-by/browse-by.module.ts b/src/app/+browse-by/browse-by.module.ts
index 30d4617c166f26a49eb97e07bbc80128a2c1432b..4938b0df15f30849c50c39e032e20f7ae2d4acbc 100644
--- a/src/app/+browse-by/browse-by.module.ts
+++ b/src/app/+browse-by/browse-by.module.ts
@@ -8,6 +8,7 @@ import { BrowseService } from '../core/browse/browse.service';
 import { BrowseByMetadataPageComponent } from './+browse-by-metadata-page/browse-by-metadata-page.component';
 import { BrowseByDatePageComponent } from './+browse-by-date-page/browse-by-date-page.component';
 import { BrowseByGuard } from './browse-by-guard';
+import { BrowseBySwitcherComponent } from './+browse-by-switcher/browse-by-switcher.component';
 
 @NgModule({
   imports: [
@@ -18,12 +19,18 @@ import { BrowseByGuard } from './browse-by-guard';
   declarations: [
     BrowseByTitlePageComponent,
     BrowseByMetadataPageComponent,
-    BrowseByDatePageComponent
+    BrowseByDatePageComponent,
+    BrowseBySwitcherComponent
   ],
   providers: [
     ItemDataService,
     BrowseService,
     BrowseByGuard
+  ],
+  entryComponents: [
+    BrowseByTitlePageComponent,
+    BrowseByMetadataPageComponent,
+    BrowseByDatePageComponent
   ]
 })
 export class BrowseByModule {
diff --git a/src/app/+collection-page/collection-page.component.scss b/src/app/+collection-page/collection-page.component.scss
index da97dd7a62e610066229abae8f4c43a981b82780..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+collection-page/collection-page.component.scss
+++ b/src/app/+collection-page/collection-page.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/+community-page/community-page.component.scss b/src/app/+community-page/community-page.component.scss
index da97dd7a62e610066229abae8f4c43a981b82780..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+community-page/community-page.component.scss
+++ b/src/app/+community-page/community-page.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
index 50be6f5ad03dee5a13636a9571c7a2e4bf85181d..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
+++ b/src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
index 50be6f5ad03dee5a13636a9571c7a2e4bf85181d..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
+++ b/src/app/+community-page/sub-community-list/community-page-sub-community-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/+home-page/home-news/home-news.component.scss b/src/app/+home-page/home-news/home-news.component.scss
index 3a0cbc78174dde88c5f2353a1063107390501567..50d3619ad1d6ff005e1ee0f55c16b81bbc7fd181 100644
--- a/src/app/+home-page/home-news/home-news.component.scss
+++ b/src/app/+home-page/home-news/home-news.component.scss
@@ -1,16 +1,14 @@
-@import '../../../styles/variables.scss';
-
 :host {
-  display: block;
-  margin-top: -$content-spacing;
-  margin-bottom: -$content-spacing;
+    display: block;
+    margin-top: -$content-spacing;
+    margin-bottom: -$content-spacing;
 }
 
 .display-3 {
-  word-break: break-word;
+    word-break: break-word;
 }
 
 .dspace-logo {
-  height: 110px;
-  width: 110px;
-}
+    height: 110px;
+    width: 110px;
+}
\ No newline at end of file
diff --git a/src/app/+home-page/home-page.component.default.scss b/src/app/+home-page/home-page.component.default.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/+home-page/home-page.component.scss b/src/app/+home-page/home-page.component.scss
index da97dd7a62e610066229abae8f4c43a981b82780..29a5e65b4c299625dee5dc6cc6bad1ee905a735d 100644
--- a/src/app/+home-page/home-page.component.scss
+++ b/src/app/+home-page/home-page.component.scss
@@ -1 +1,2 @@
-@import '../../styles/variables.scss';
+:host {
+}
\ No newline at end of file
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.component.scss b/src/app/+item-page/edit-item-page/edit-item-page.component.scss
index f22ca8f8de4e298158ae1e2fb82008bc7f0278f3..bb3bdaaeb0ebf808962c12abd416b8d3ce9de5da 100644
--- a/src/app/+item-page/edit-item-page/edit-item-page.component.scss
+++ b/src/app/+item-page/edit-item-page/edit-item-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .btn {
     min-width: $edit-item-button-min-width;
 }
diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
index 88eb98509acff8ad3ba1b4b7dd133891fc647246..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
+++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss
index 14782326f6d73880f70a98557849f91f64984294..1790157fa5d1a7aac7647a685cb3c08e02e1686f 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.scss
@@ -1,4 +1,3 @@
-@import '../../../../../styles/variables.scss';
 .btn[disabled] {
     color: $gray-600;
     border-color: $gray-600;
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
index f3075702e6e1fefc4671fa9a754df3812d884e52..a74ecb8f47c0f335e7f4cdb7df7940cffa91f94e 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .button-row {
     .btn {
         margin-right: 0.5 * $spacer;
diff --git a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss
index dff97a6eb2943e535605fc7abc92be032d1edb2c..75dfd09d0d94d99c4ce2aea50b926dcbb6f3e307 100644
--- a/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss
+++ b/src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 :host {
   .simple-view-element {
     margin-bottom: 15px;
diff --git a/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss b/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
index 96ce8619429f281e160f435c93b00fe57133aeeb..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
+++ b/src/app/+item-page/field-components/metadata-uri-values/metadata-uri-values.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
diff --git a/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss b/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
index 96ce8619429f281e160f435c93b00fe57133aeeb..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
+++ b/src/app/+item-page/field-components/metadata-values/metadata-values.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables.scss';
diff --git a/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss b/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
index 77db5d97cf5a092065b7e639af008f9d13a4f99d..5bb04cac2f4465db02b8f5298a1b0daef9ce5f06 100644
--- a/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
+++ b/src/app/+item-page/full/field-components/file-section/full-file-section.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-@import '../../../../../styles/mixins';
 @media screen and (min-width: map-get($grid-breakpoints, md)) {
     dt {
         text-align: right;
diff --git a/src/app/+item-page/full/full-item-page.component.scss b/src/app/+item-page/full/full-item-page.component.scss
index 4fe93bbb7a321fd1323ec5aabe35547f65e5ff10..458c4992c75fa0e2cf5ddf20e124aff05963194b 100644
--- a/src/app/+item-page/full/full-item-page.component.scss
+++ b/src/app/+item-page/full/full-item-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 :host {
     div.simple-view-link {
         text-align: center;
diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.html b/src/app/+item-page/simple/item-types/publication/publication.component.html
index 37135c6036b2545f999e33f42a5da524545ed62d..abf5225c270a73ba43a437d5f675aa0d2dc4391c 100644
--- a/src/app/+item-page/simple/item-types/publication/publication.component.html
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.html
@@ -21,6 +21,10 @@
       [fields]="['journalvolume.identifier.name']"
       [label]="'publication.page.volume-title'">
     </ds-generic-item-page-field>
+    <ds-generic-item-page-field [item]="item"
+      [fields]="['dc.publisher']"
+      [label]="'publication.page.publisher'">
+    </ds-generic-item-page-field>
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-metadata-representation-list
@@ -40,6 +44,11 @@
       [label]="'relationships.isJournalIssueOf' | translate">
     </ds-related-items>
     <ds-item-page-abstract-field [item]="item"></ds-item-page-abstract-field>
+    <ds-generic-item-page-field [item]="item"
+      [fields]="['dc.description']"
+      [label]="'publication.page.description'">
+    </ds-generic-item-page-field>
+
     <ds-generic-item-page-field [item]="item"
       [fields]="['dc.subject']"
       [separator]="','"
diff --git a/src/app/+item-page/simple/item-types/publication/publication.component.ts b/src/app/+item-page/simple/item-types/publication/publication.component.ts
index 3647e23367a8f66a2be769afa8d373a4c4a84925..81e2726e0c34df57576ae11ea3bea3eb379478b7 100644
--- a/src/app/+item-page/simple/item-types/publication/publication.component.ts
+++ b/src/app/+item-page/simple/item-types/publication/publication.component.ts
@@ -7,7 +7,7 @@ import {
 } from '../../../../shared/items/item-type-decorator';
 import { ItemComponent } from '../shared/item.component';
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
-import { filterRelationsByTypeLabel, relationsToItems } from '../shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../shared/item-relationships-utils';
 
 @rendersItemType('Publication', ItemViewMode.Full)
 @rendersItemType(DEFAULT_ITEM_TYPE, ItemViewMode.Full)
@@ -46,18 +46,15 @@ export class PublicationComponent extends ItemComponent implements OnInit {
       this.authors$ = this.buildRepresentations('Person', 'dc.contributor.author');
 
       this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isProjectOfPublication'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfPublication')
       );
 
       this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isOrgUnitOfPublication'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfPublication')
       );
 
       this.journalIssues$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isJournalIssueOfPublication'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isJournalIssueOfPublication')
       );
 
     }
diff --git a/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts b/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts
index eaea3d5d3e9cb038099c6ece4d1aa836ee660fb4..b4eda2abfbe391ff32f3c8b68633d1cd9a9d59d6 100644
--- a/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts
+++ b/src/app/+item-page/simple/item-types/shared/item-relationships-utils.ts
@@ -2,12 +2,12 @@ import { ItemMetadataRepresentation } from '../../../../core/shared/metadata-rep
 import { MetadataRepresentation } from '../../../../core/shared/metadata-representation/metadata-representation.model';
 import { MetadatumRepresentation } from '../../../../core/shared/metadata-representation/metadatum/metadatum-representation.model';
 import { MetadataValue } from '../../../../core/shared/metadata.models';
-import { getSucceededRemoteData } from '../../../../core/shared/operators';
-import { hasValue } from '../../../../shared/empty.util';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
+import { hasNoValue, hasValue } from '../../../../shared/empty.util';
 import { Observable } from 'rxjs/internal/Observable';
 import { Relationship } from '../../../../core/shared/item-relationships/relationship.model';
 import { RelationshipType } from '../../../../core/shared/item-relationships/relationship-type.model';
-import { distinctUntilChanged, filter, flatMap, map, tap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, flatMap, map, switchMap, tap } from 'rxjs/operators';
 import { of as observableOf, zip as observableZip, combineLatest as observableCombineLatest } from 'rxjs';
 import { ItemDataService } from '../../../../core/data/item-data.service';
 import { Item } from '../../../../core/shared/item.model';
@@ -44,23 +44,36 @@ export const compareArraysUsingIds = <T extends { id: string }>() =>
 /**
  * Fetch the relationships which match the type label given
  * @param {string} label      Type label
+ * @param thisId              The item's id of which the relations belong to
  * @returns {(source: Observable<[Relationship[] , RelationshipType[]]>) => Observable<Relationship[]>}
  */
-export const filterRelationsByTypeLabel = (label: string) =>
+export const filterRelationsByTypeLabel = (label: string, thisId?: string) =>
   (source: Observable<[Relationship[], RelationshipType[]]>): Observable<Relationship[]> =>
     source.pipe(
-      map(([relsCurrentPage, relTypesCurrentPage]) =>
-        relsCurrentPage.filter((rel: Relationship, idx: number) =>
-          hasValue(relTypesCurrentPage[idx]) && (relTypesCurrentPage[idx].leftLabel === label ||
-          relTypesCurrentPage[idx].rightLabel === label)
-        )
-      ),
+      switchMap(([relsCurrentPage, relTypesCurrentPage]) => {
+        const relatedItems$ = observableZip(...relsCurrentPage.map((rel: Relationship) =>
+            observableCombineLatest(
+              rel.leftItem.pipe(getSucceededRemoteData(), getRemoteDataPayload()),
+              rel.rightItem.pipe(getSucceededRemoteData(), getRemoteDataPayload()))
+          )
+        );
+        return relatedItems$.pipe(
+          map((arr) => relsCurrentPage.filter((rel: Relationship, idx: number) =>
+            hasValue(relTypesCurrentPage[idx]) && (
+              (hasNoValue(thisId) && (relTypesCurrentPage[idx].leftLabel === label ||
+                relTypesCurrentPage[idx].rightLabel === label)) ||
+              (thisId === arr[idx][0].id && relTypesCurrentPage[idx].leftLabel === label) ||
+              (thisId === arr[idx][1].id && relTypesCurrentPage[idx].rightLabel === label)
+            )
+          ))
+        );
+      }),
       distinctUntilChanged(compareArraysUsingIds())
     );
 
 /**
  * Operator for turning a list of relationships into a list of the relevant items
- * @param {string} thisId           The item's id of which the relations belong to
+ * @param {string} thisId       The item's id of which the relations belong to
  * @returns {(source: Observable<Relationship[]>) => Observable<Item[]>}
  */
 export const relationsToItems = (thisId: string) =>
@@ -80,10 +93,25 @@ export const relationsToItems = (thisId: string) =>
             } else if (rightItem.payload.id === thisId) {
               return leftItem.payload;
             }
-          })),
+          })
+          .filter((item: Item) => hasValue(item))
+      ),
       distinctUntilChanged(compareArraysUsingIds()),
     );
 
+/**
+ * Operator for turning a list of relationships and their relationship-types into a list of relevant items by relationship label
+ * @param thisId  The item's id of which the relations belong to
+ * @param label   The label of the relationship-type to filter on
+ * @param side    Filter only on one side of the relationship (for example: child-parent relationships)
+ */
+export const getRelatedItemsByTypeLabel = (thisId: string, label: string) =>
+  (source: Observable<[Relationship[], RelationshipType[]]>): Observable<Item[]> =>
+    source.pipe(
+      filterRelationsByTypeLabel(label, thisId),
+      relationsToItems(thisId)
+    );
+
 /**
  * Operator for turning a list of relationships into a list of metadatarepresentations given the original metadata
  * @param parentId    The id of the parent item
diff --git a/src/app/+item-page/simple/item-types/shared/item.component.spec.ts b/src/app/+item-page/simple/item-types/shared/item.component.spec.ts
index 95235c5a722dbd646f0b60941d99ab8503e13880..12312656f693ae9e5c276227e0219716c7424f4b 100644
--- a/src/app/+item-page/simple/item-types/shared/item.component.spec.ts
+++ b/src/app/+item-page/simple/item-types/shared/item.component.spec.ts
@@ -104,7 +104,9 @@ export function containsFieldInput(fields: DebugElement[], metadataKey: string):
 export function createRelationshipsObservable() {
   return observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), [
     Object.assign(new Relationship(), {
-      relationshipType: observableOf(new RemoteData(false, false, true, null, new RelationshipType()))
+      relationshipType: observableOf(new RemoteData(false, false, true, null, new RelationshipType())),
+      leftItem: observableOf(new RemoteData(false, false, true, null, new Item())),
+      rightItem: observableOf(new RemoteData(false, false, true, null, new Item()))
     })
   ])));
 }
diff --git a/src/app/+login-page/login-page.component.scss b/src/app/+login-page/login-page.component.scss
index 38adf24671ab86c652fc6e6c4cc7d50edcd211eb..58e7272e5f0ceb7861fda800ae741d484c2b0d75 100644
--- a/src/app/+login-page/login-page.component.scss
+++ b/src/app/+login-page/login-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 .login-logo {
   height: $login-logo-height;
   width: $login-logo-width;
diff --git a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
index a28db359b55a7ff0e471d5d5895da20d9cb1d867..20f1bf2952582e6ed0aa1316838e7967f5b9ef57 100644
--- a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
 
 .filters {
     .toggle-more-filters a {
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
index 7ab7ffd0cad13daece44b966a72ec5f2c0e680e1..b853346fa5351e1059ec6cad0686e11146e8b2b6 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
@@ -1,9 +1,9 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
-                                                           [routerLink]="[getSearchLink()]"
-                                                           [queryParams]="addQueryParams" queryParamsHandling="merge">
-    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
-    <span class="filter-value px-1">{{filterValue.value}}</span>
-    <span class="float-right filter-value-count ml-auto">
+   [routerLink]="[getSearchLink()]"
+   [queryParams]="addQueryParams" queryParamsHandling="merge">
+  <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+  <span class="filter-value px-1">{{filterValue.value}}</span>
+  <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                     </span>
-</a>
\ No newline at end of file
+</a>
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
index 6452f2469bc6204b0cbb6103a110e88fef7ed169..c5a38f24a727e90479cccab0b79f25e7975c4373 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $body-color;
     &:hover, &focus {
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
index 8e8ad9b4e3ea4e0b7df2faf3b06c442b5b97b014..4efee3e7b51adec67576c30ff57096571da37add 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
@@ -1,8 +1,8 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
    [routerLink]="[getSearchLink()]"
    [queryParams]="changeQueryParams" queryParamsHandling="merge">
-    <span class="filter-value px-1">{{filterValue.label}}</span>
-    <span class="float-right filter-value-count ml-auto">
+  <span class="filter-value px-1">{{filterValue.label}}</span>
+  <span class="float-right filter-value-count ml-auto">
                         <span class="badge badge-secondary badge-pill">{{filterValue.count}}</span>
                     </span>
 </a>
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss
index 7b5448b980ca9c774183e8d859c78e24f90e590a..93d85fcba8f7cac64d07c420347e5548a01a5d60 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $link-color;
     &:hover {
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
index 54d5d535df8905e2adff3f4fa795e6e24945c022..77f240a899a342bb9795684752699affd5efe93e 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.ts
@@ -18,6 +18,7 @@ const rangeDelimiter = '-';
 @Component({
   selector: 'ds-search-facet-range-option',
   styleUrls: ['./search-facet-range-option.component.scss'],
+  // templateUrl: './search-facet-range-option.component.html',
   templateUrl: './search-facet-range-option.component.html',
 })
 
diff --git a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss
index 6452f2469bc6204b0cbb6103a110e88fef7ed169..c5a38f24a727e90479cccab0b79f25e7975c4373 100644
--- a/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../../styles/variables.scss';
-
 a {
     color: $body-color;
     &:hover, &focus {
diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-filter.component.scss
index 1db5e9a1b235cfa55d5d41f400d0503cac471d90..c94edb01bba314968ae477c3974d58915546c21c 100644
--- a/src/app/+search-page/search-filters/search-filter/search-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-filter.component.scss
@@ -1,13 +1,10 @@
-@import '../../../../styles/variables.scss';
-@import '../../../../styles/mixins.scss';
-
 :host .facet-filter {
-  border: 1px solid map-get($theme-colors, light);
-  cursor: pointer;
-  .search-filter-wrapper.closed {
-    overflow: hidden;
-  }
-  .filter-toggle {
-    line-height: $line-height-base;
-  }
+    border: 1px solid map-get($theme-colors, light);
+    cursor: pointer;
+    .search-filter-wrapper.closed {
+        overflow: hidden;
+    }
+    .filter-toggle {
+        line-height: $line-height-base;
+    }
 }
diff --git a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
index d8bb1ff1b3b00551c80717093851c9b0cc494f08..489b7bab6395eee76fa8c63883002d2f2301c04a 100644
--- a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss
@@ -1,6 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
-
 .filters {
     .toggle-more-filters a {
         color: $link-color;
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
index caaef5985e85b0a880c29749837308a718096d21..9e536626b046e9506e1b2978e2e7b7833b644c33 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
@@ -1,14 +1,10 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
-
-
 .filters {
-     .toggle-more-filters a {
-         color: $link-color;
-         text-decoration: underline;
-         cursor: pointer;
-     }
- }
+    .toggle-more-filters a {
+        color: $link-color;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}
 
 $slider-handle-width: 18px;
 ::ng-deep
diff --git a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
index d8bb1ff1b3b00551c80717093851c9b0cc494f08..1d062960c726d96988cd0ecaaa0057756683da3e 100644
--- a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
+++ b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables.scss';
-@import '../../../../../styles/mixins.scss';
 
 .filters {
     .toggle-more-filters a {
diff --git a/src/app/+search-page/search-filters/search-filters.component.scss b/src/app/+search-page/search-filters/search-filters.component.scss
index 628c8ed46f48552c4c72b0e0a604907f41b063df..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/+search-page/search-filters/search-filters.component.scss
+++ b/src/app/+search-page/search-filters/search-filters.component.scss
@@ -1,2 +0,0 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
\ No newline at end of file
diff --git a/src/app/+search-page/search-page.component.scss b/src/app/+search-page/search-page.component.scss
index 26011dd57e6e17fd96c950d81d9d027aa3f7269e..05abf74f05cd6e0b20e7090f4044e665688ac1a2 100644
--- a/src/app/+search-page/search-page.component.scss
+++ b/src/app/+search-page/search-page.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-@import '../../styles/mixins.scss';
 
 @include media-breakpoint-down(md) {
     .container {
diff --git a/src/app/+search-page/search-settings/search-settings.component.scss b/src/app/+search-page/search-settings/search-settings.component.scss
index 0a3824f815f0296712c42b5c6ccc9de90828421b..cd18456888b5e6880b58b9a63083dfb9eb5cbf09 100644
--- a/src/app/+search-page/search-settings/search-settings.component.scss
+++ b/src/app/+search-page/search-settings/search-settings.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .setting-option {
-  border: 1px solid map-get($theme-colors, light);
+    border: 1px solid map-get($theme-colors, light);
 }
diff --git a/src/app/+search-page/search-sidebar/search-sidebar.component.scss b/src/app/+search-page/search-sidebar/search-sidebar.component.scss
index 35ce5eebce06d2e00a011efae6d492ae660e7319..38e742bca4123e79a16a3179c4f88a794d9c0d46 100644
--- a/src/app/+search-page/search-sidebar/search-sidebar.component.scss
+++ b/src/app/+search-page/search-sidebar/search-sidebar.component.scss
@@ -1,6 +1,3 @@
-@import '../../../styles/variables.scss';
-@import '../../../styles/mixins.scss';
-
 :host {
     .results {
         line-height: $button-height;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 898208db805808dea780c3c5fd2ee6835603f37e..4482cd02f8f384d8b4156e3c79acea6ba7418bbf 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -9,7 +9,6 @@
         <ds-notifications-board
                 [options]="config.notifications">
         </ds-notifications-board>
-
         <main class="main-content">
             <div class="container" *ngIf="isLoading">
                 <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index fa7e7a873adc1292384cfabd704f1223ae098370..7793b7529c7f92f55b73e05f6002ac0ca7be8652 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,3 @@
-@import '../styles/variables.scss';
 @import '../styles/helpers/font_awesome_imports.scss';
 @import '../../node_modules/bootstrap/scss/bootstrap.scss';
 @import '../../node_modules/nouislider/distribute/nouislider.min';
@@ -48,4 +47,3 @@ ds-admin-sidebar {
   position: fixed;
   z-index: $sidebar-z-index;
 }
-
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 37cc79155824f453d41cae19784a643f5b80f654..52c169e7bcb83ac55d5a72959916ffe1b6f2b070 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -28,10 +28,10 @@ import variables from '../styles/_exposed_variables.scss';
 import { CSSVariableService } from './shared/sass-helper/sass-helper.service';
 import { MenuService } from './shared/menu/menu.service';
 import { MenuID } from './shared/menu/initial-menus-state';
-import { Observable } from 'rxjs/internal/Observable';
+import { combineLatest as combineLatestObservable, Observable, of } from 'rxjs';
 import { slideSidebarPadding } from './shared/animations/slide';
-import { combineLatest as combineLatestObservable } from 'rxjs';
 import { HostWindowService } from './shared/host-window.service';
+import { Theme } from '../config/theme.inferface';
 
 @Component({
   selector: 'ds-app',
@@ -47,6 +47,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   slideSidebarOver: Observable<boolean>;
   collapsedSidebarWidth: Observable<string>;
   totalSidebarWidth: Observable<string>;
+  theme: Observable<Theme> = of({} as any);
 
   constructor(
     @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
@@ -59,7 +60,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     private router: Router,
     private cssService: CSSVariableService,
     private menuService: MenuService,
-    private windowService: HostWindowService
+    private windowService: HostWindowService,
   ) {
     // Load all the languages that are defined as active from the config file
     translate.addLangs(config.languages.filter((LangConfig) => LangConfig.active === true).map((a) => a.code));
@@ -83,6 +84,7 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
+
     const env: string = this.config.production ? 'Production' : 'Development';
     const color: string = this.config.production ? 'red' : 'green';
     console.info(`Environment: %c${env}`, `color: ${color}; font-weight: bold;`);
diff --git a/src/app/core/core.effects.ts b/src/app/core/core.effects.ts
index 9ade23e6c59fe5011d3febb4646c407eb6474f6c..1aa5d2d0b1246972c604a8e8e77dd348748517c9 100644
--- a/src/app/core/core.effects.ts
+++ b/src/app/core/core.effects.ts
@@ -1,4 +1,3 @@
-
 import { ObjectCacheEffects } from './cache/object-cache.effects';
 import { UUIDIndexEffects } from './index/index.effects';
 import { RequestEffects } from './data/request.effects';
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index a215aab3b2d0fb97b34c412af5e1c6b51f741562..473ed64a7df55dc791ae85154c7c4aba3edae018 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -60,6 +60,7 @@ import { HALEndpointService } from './shared/hal-endpoint.service';
 import { FacetValueResponseParsingService } from './data/facet-value-response-parsing.service';
 import { FacetValueMapResponseParsingService } from './data/facet-value-map-response-parsing.service';
 import { FacetConfigResponseParsingService } from './data/facet-config-response-parsing.service';
+import { ResourcePolicyService } from './data/resource-policy.service';
 import { RegistryService } from './registry/registry.service';
 import { RegistryMetadataschemasResponseParsingService } from './data/registry-metadataschemas-response-parsing.service';
 import { RegistryMetadatafieldsResponseParsingService } from './data/registry-metadatafields-response-parsing.service';
@@ -126,6 +127,7 @@ const PROVIDERS = [
   MetadataService,
   ObjectCacheService,
   PaginationComponentOptions,
+  ResourcePolicyService,
   RegistryService,
   NormalizedObjectBuildService,
   RemoteDataBuildService,
diff --git a/src/app/core/data/comcol-data.service.spec.ts b/src/app/core/data/comcol-data.service.spec.ts
index 7f628fc5b95c555846bc62ab8d7cb28e143680aa..b5232b0bff25233b37862cd7388a77604457da02 100644
--- a/src/app/core/data/comcol-data.service.spec.ts
+++ b/src/app/core/data/comcol-data.service.spec.ts
@@ -89,7 +89,7 @@ describe('ComColDataService', () => {
   function initMockCommunityDataService(): CommunityDataService {
     return jasmine.createSpyObj('responseCache', {
       getEndpoint: hot('--a-', { a: communitiesEndpoint }),
-      getIDHref: cold('b-', { b: communityEndpoint })
+      getIDHref: communityEndpoint
     });
   }
 
diff --git a/src/app/core/data/comcol-data.service.ts b/src/app/core/data/comcol-data.service.ts
index 9d82cc5047a04274f984f9732e4bc6c8b8a624ff..68eb3e488065b8852a7d607e2e5ea6acf8cea5c1 100644
--- a/src/app/core/data/comcol-data.service.ts
+++ b/src/app/core/data/comcol-data.service.ts
@@ -31,7 +31,7 @@ export abstract class ComColDataService<T extends CacheableObject> extends DataS
       return this.halService.getEndpoint(linkPath);
     } else {
       const scopeCommunityHrefObs = this.cds.getEndpoint().pipe(
-        mergeMap((endpoint: string) => this.cds.getIDHref(endpoint, options.scopeID)),
+        map((endpoint: string) => this.cds.getIDHref(endpoint, options.scopeID)),
         filter((href: string) => isNotEmpty(href)),
         take(1),
         tap((href: string) => {
diff --git a/src/app/core/data/metadata-schema-data.service.ts b/src/app/core/data/metadata-schema-data.service.ts
index 1d2bf3b2213012f2db080d486507f95b9f10e764..5e58d972f79c1cb99785f30c3a82eca7a1175f7b 100644
--- a/src/app/core/data/metadata-schema-data.service.ts
+++ b/src/app/core/data/metadata-schema-data.service.ts
@@ -13,15 +13,38 @@ import { MetadataSchema } from '../metadata/metadataschema.model';
 import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
 import { HttpClient } from '@angular/common/http';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { ChangeAnalyzer } from './change-analyzer';
 import { DefaultChangeAnalyzer } from './default-change-analyzer.service';
 
+/* tslint:disable:max-classes-per-file */
+class DataServiceImpl extends DataService<MetadataSchema> {
+  protected linkPath = 'metadataschemas';
+  protected forceBypassCache = false;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: ChangeAnalyzer<MetadataSchema>) {
+    super();
+  }
+
+  getBrowseEndpoint(options: FindAllOptions = {}, linkPath: string = this.linkPath): Observable<string> {
+    return this.halService.getEndpoint(linkPath);
+  }
+}
+
 /**
  * A service responsible for fetching/sending data from/to the REST API on the metadataschemas endpoint
  */
 @Injectable()
-export class MetadataSchemaDataService extends DataService<MetadataSchema> {
-  protected linkPath = 'metadataschemas';
-  protected forceBypassCache = false;
+export class MetadataSchemaDataService {
+  private dataService: DataServiceImpl;
 
   constructor(
     protected requestService: RequestService,
@@ -33,17 +56,6 @@ export class MetadataSchemaDataService extends DataService<MetadataSchema> {
     protected dataBuildService: NormalizedObjectBuildService,
     protected http: HttpClient,
     protected notificationsService: NotificationsService) {
-    super();
-  }
-
-  /**
-   * Get the endpoint for browsing metadataschemas
-   * @param {FindAllOptions} options
-   * @returns {Observable<string>}
-   */
-  public getBrowseEndpoint(options: FindAllOptions = {}, linkPath: string = this.linkPath): Observable<string> {
-
-    return null;
+    this.dataService = new DataServiceImpl(requestService, rdbService, dataBuildService, null, objectCache, halService, notificationsService, http, comparator);
   }
-
 }
diff --git a/src/app/core/data/resource-policy.service.spec.ts b/src/app/core/data/resource-policy.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35d28684a79ebb06cb35a5bae4b56b17fd28ed35
--- /dev/null
+++ b/src/app/core/data/resource-policy.service.spec.ts
@@ -0,0 +1,77 @@
+import { cold, getTestScheduler } from 'jasmine-marbles';
+import { TestScheduler } from 'rxjs/testing';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ResourcePolicy } from '../shared/resource-policy.model';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { GetRequest } from './request.models';
+import { RequestService } from './request.service';
+import { ResourcePolicyService } from './resource-policy.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
+
+describe('ResourcePolicyService', () => {
+  let scheduler: TestScheduler;
+  let service: ResourcePolicyService;
+  let requestService: RequestService;
+  let rdbService: RemoteDataBuildService;
+  let objectCache: ObjectCacheService;
+  const testObject = {
+    uuid: '664184ee-b254-45e8-970d-220e5ccc060b'
+  } as ResourcePolicy;
+  const requestURL = `https://rest.api/rest/api/resourcepolicies/${testObject.uuid}`;
+  const requestUUID = '8b3c613a-5a4b-438b-9686-be1d5b4a1c5a';
+
+  beforeEach(() => {
+    scheduler = getTestScheduler();
+
+    requestService = jasmine.createSpyObj('requestService', {
+      generateRequestId: requestUUID,
+      configure: true
+    });
+    rdbService = jasmine.createSpyObj('rdbService', {
+      buildSingle: cold('a', {
+        a: {
+          payload: testObject
+        }
+      })
+    });
+    objectCache = {} as ObjectCacheService;
+    const halService = {} as HALEndpointService;
+    const notificationsService = {} as NotificationsService;
+    const http = {} as HttpClient;
+    const comparator = {} as any;
+    const dataBuildService = {} as NormalizedObjectBuildService;
+
+    service = new ResourcePolicyService(
+      requestService,
+      rdbService,
+      dataBuildService,
+      objectCache,
+      halService,
+      notificationsService,
+      http,
+      comparator
+    )
+  });
+
+  describe('findByHref', () => {
+    it('should configure the proper GetRequest', () => {
+      scheduler.schedule(() => service.findByHref(requestURL));
+      scheduler.flush();
+
+      expect(requestService.configure).toHaveBeenCalledWith(new GetRequest(requestUUID, requestURL, null), false);
+    });
+
+    it('should return a RemoteData<ResourcePolicy> for the object with the given URL', () => {
+      const result = service.findByHref(requestURL);
+      const expected = cold('a', {
+        a: {
+          payload: testObject
+        }
+      });
+      expect(result).toBeObservable(expected);
+    });
+  });
+});
diff --git a/src/app/core/data/resource-policy.service.ts b/src/app/core/data/resource-policy.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a6a1afedc2e7e1e25b3fdba98b1a452510dd2df
--- /dev/null
+++ b/src/app/core/data/resource-policy.service.ts
@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+
+import { DataService } from '../data/data.service';
+import { RequestService } from '../data/request.service';
+import { FindAllOptions } from '../data/request.models';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { ResourcePolicy } from '../shared/resource-policy.model';
+import { RemoteData } from '../data/remote-data';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { CoreState } from '../core.reducers';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service';
+import { ChangeAnalyzer } from './change-analyzer';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
+import { HttpOptions } from '../dspace-rest-v2/dspace-rest-v2.service';
+
+/* tslint:disable:max-classes-per-file */
+class DataServiceImpl extends DataService<ResourcePolicy> {
+  protected linkPath = 'resourcepolicies';
+  protected forceBypassCache = false;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: ChangeAnalyzer<ResourcePolicy>) {
+    super();
+  }
+
+  getBrowseEndpoint(options: FindAllOptions = {}, linkPath: string = this.linkPath): Observable<string> {
+    return this.halService.getEndpoint(linkPath);
+  }
+}
+
+/**
+ * A service responsible for fetching/sending data from/to the REST API on the resourcepolicies endpoint
+ */
+@Injectable()
+export class ResourcePolicyService {
+  private dataService: DataServiceImpl;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected dataBuildService: NormalizedObjectBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer<ResourcePolicy>) {
+    this.dataService = new DataServiceImpl(requestService, rdbService, dataBuildService, null, objectCache, halService, notificationsService, http, comparator);
+  }
+
+  findByHref(href: string, options?: HttpOptions): Observable<RemoteData<ResourcePolicy>> {
+    return this.dataService.findByHref(href, options);
+  }
+}
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.html
index 65a10ec1b7e328e52d52aa03bc2702c26bf8a6e8..030a26df391aaba3053379cdf8753f5419243227 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.html
@@ -4,14 +4,14 @@
     [innerHTML]="firstMetadataValue('dc.title')"></a>
   <span class="text-muted">
     <ds-truncatable-part [id]="item.id" [minLines]="1">
-            <span *ngIf="item.allMetadata(['journalvolume.identifier.volume']).length > 0"
+            <span *ngIf="item.allMetadata(['publicationvolume.volumeNumber']).length > 0"
                   class="item-list-journal-issues">
-                    <span *ngFor="let value of allMetadataValues(['journalvolume.identifier.volume']); let last=last;">
+                    <span *ngFor="let value of allMetadataValues(['publicationvolume.volumeNumber']); let last=last;">
                         <span [innerHTML]="value"><span [innerHTML]="value"></span></span>
                     </span>
-                <span *ngIf="item.allMetadata(['journalissue.identifier.number']).length > 0"
+                <span *ngIf="item.allMetadata(['publicationissue.issueNumber']).length > 0"
                       class="item-list-journal-issue-numbers">
-                    <span *ngFor="let value of allMetadataValues(['journalissue.identifier.number']); let last=last;">
+                    <span *ngFor="let value of allMetadataValues(['publicationissue.issueNumber']); let last=last;">
                         <span> - </span><span [innerHTML]="value"><span [innerHTML]="value"></span></span>
                     </span>
                 </span>
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.spec.ts
index c5757f3d51c1b7d6eff3800cfa401a93666dc062..24498088cb7e9f5efdfc64df61a5bfe40c672e09 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-list-elements/journal-issue/journal-issue-list-element.component.spec.ts
@@ -20,13 +20,13 @@ const mockItemWithMetadata: Item = Object.assign(new Item(), {
         value: 'This is just another title'
       }
     ],
-    'journalvolume.identifier.volume': [
+    'publicationvolume.volumeNumber': [
       {
         language: 'en_US',
         value: '1234'
       }
     ],
-    'journalissue.identifier.number': [
+    'publicationissue.issueNumber': [
       {
         language: 'en_US',
         value: '5678'
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.html
index 7d7f0cf731f6b5c2bf1b5b084f3ff6490a5c7773..4e6e34d3d6c80741f1a695dd92ed0684dd34f891 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.html
@@ -10,9 +10,9 @@
                         <span [innerHTML]="value"><span [innerHTML]="value"></span></span>
                     </span>
             </span>
-            <span *ngIf="item.allMetadata(['journalvolume.identifier.volume']).length > 0"
+            <span *ngIf="item.allMetadata(['publicationvolume.volumeNumber']).length > 0"
                   class="item-list-journal-volume-identifiers">
-                    <span *ngFor="let value of allMetadataValues(['journalvolume.identifier.volume']); let last=last;">
+                    <span *ngFor="let value of allMetadataValues(['publicationvolume.volumeNumber']); let last=last;">
                         <span> (</span><span [innerHTML]="value"><span [innerHTML]="value"></span></span><span>)</span>
                     </span>
             </span>
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.spec.ts
index 6ea5c80a5f5140da430f6c485ab1b4288496edda..15f5424960ac3338650d203b6c41bc16356d0ef0 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-list-elements/journal-volume/journal-volume-list-element.component.spec.ts
@@ -26,7 +26,7 @@ const mockItemWithMetadata: Item = Object.assign(new Item(), {
         value: 'This is just another journal title'
       }
     ],
-    'journalvolume.identifier.volume': [
+    'publicationvolume.volumeNumber': [
       {
         language: 'en_US',
         value: '1234'
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.html b/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.html
index 32c8074503da60b966766a6631175c86d4c09f3e..0e46e921bb3e02b14ce8e4a7b8e9a3680dfe6f31 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.html
@@ -4,9 +4,9 @@
     [innerHTML]="firstMetadataValue('dc.title')"></a>
   <span class="text-muted">
     <ds-truncatable-part [id]="item.id" [minLines]="1">
-            <span *ngIf="item.allMetadata(['journal.identifier.issn']).length > 0"
+            <span *ngIf="item.allMetadata(['creativeworkseries.issn']).length > 0"
                   class="item-list-journals">
-                    <span *ngFor="let value of allMetadataValues(['journal.identifier.issn']); let last=last;">
+                    <span *ngFor="let value of allMetadataValues(['creativeworkseries.issn']); let last=last;">
                         <span [innerHTML]="value"><span [innerHTML]="value"></span></span>
                     </span>
             </span>
diff --git a/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.spec.ts b/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.spec.ts
index ff419148c6cbae932a19f5dcd02a15866a357479..204672dfe90f2270d3d54e722b8dba2d8a8b51be 100644
--- a/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-list-elements/journal/journal-list-element.component.spec.ts
@@ -20,7 +20,7 @@ const mockItemWithMetadata: Item = Object.assign(new Item(), {
         value: 'This is just another title'
       }
     ],
-    'journal.identifier.issn': [
+    'creativeworkseries.issn': [
       {
         language: 'en_US',
         value: '1234'
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
index 5d96abb82b5e77fe21a793eba06106f4bcd82b88..eebd3e03c8c883e9d4f98bf52d531399d9a09978 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html
@@ -7,11 +7,15 @@
       <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journalissue.identifier.number']"
+      [fields]="['publicationvolume.volumeNumber']"
+      [label]="'journalvolume.page.volume'">
+    </ds-generic-item-page-field>
+    <ds-generic-item-page-field [item]="item"
+      [fields]="['publicationissue.issueNumber']"
       [label]="'journalissue.page.number'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journalissue.issuedate']"
+      [fields]="['creativework.datePublished']"
       [label]="'journalissue.page.issuedate'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
@@ -19,7 +23,7 @@
       [label]="'journalissue.page.journal-title'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journal.identifier.issn']"
+      [fields]="['creativeworkseries.issn']"
       [label]="'journalissue.page.journal-issn'">
     </ds-generic-item-page-field>
   </div>
@@ -34,11 +38,11 @@
       [label]="'relationships.isPublicationOfJournalIssue' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journalissue.identifier.description']"
+      [fields]="['dc.description']"
       [label]="'journalissue.page.description'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journalissue.identifier.keyword']"
+      [fields]="['creativework.keywords']"
       [label]="'journalissue.page.keyword'">
     </ds-generic-item-page-field>
     <div>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.spec.ts b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.spec.ts
index 0711a6749294fb263f357371836a63677423ab9e..7c4f4349c317e957ee7880d9ba9858bd11c8998c 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.spec.ts
@@ -12,25 +12,25 @@ import {
 const mockItem: Item = Object.assign(new Item(), {
   bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
   metadata: {
-    'journalissue.identifier.number': [
+    'publicationissue.issueNumber': [
       {
         language: 'en_US',
         value: '1234'
       }
     ],
-    'journalissue.issuedate': [
+    'creativework.datePublished': [
       {
         language: 'en_US',
         value: '2018'
       }
     ],
-    'journalissue.identifier.description': [
+    'dc.description': [
       {
         language: 'en_US',
         value: 'desc'
       }
     ],
-    'journalissue.identifier.keyword': [
+    'creativework.keywords': [
       {
         language: 'en_US',
         value: 'keyword'
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts
index a3554311001c6e7fa48fa7d2380b20726efe7ed5..b584fa3285dd88baeff9f8d2f5bed66a4ac6d7e2 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.ts
@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('JournalIssue', ItemViewMode.Full)
 @Component({
@@ -34,12 +31,10 @@ export class JournalIssueComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.volumes$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isJournalVolumeOfIssue'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isJournalVolumeOfIssue')
       );
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfJournalIssue'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfJournalIssue')
       );
     }
   }
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
index 18bf1701fcd6cb423977db9ef59daf4eb4a54e19..83626c7ae7e344a61d86a32e79818240c8ccaeaf 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html
@@ -7,11 +7,11 @@
       <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journalvolume.identifier.volume']"
+      [fields]="['publicationvolume.volumeNumber']"
       [label]="'journalvolume.page.volume'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journalvolume.issuedate']"
+      [fields]="['creativework.datePublished']"
       [label]="'journalvolume.page.issuedate'">
     </ds-generic-item-page-field>
   </div>
@@ -25,7 +25,7 @@
       [label]="'relationships.isIssueOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journalvolume.identifier.description']"
+      [fields]="['dc.description']"
       [label]="'journalvolume.page.description'">
     </ds-generic-item-page-field>
     <div>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.spec.ts b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.spec.ts
index 3beca0c17a691097cc3add5b06687f7499183435..e5da5675f47ec2fd0946a65faf4207820093ee78 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.spec.ts
@@ -12,19 +12,19 @@ import {
 const mockItem: Item = Object.assign(new Item(), {
   bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
   metadata: {
-    'journalvolume.identifier.volume': [
+    'publicationvolume.volumeNumber': [
       {
         language: 'en_US',
         value: '1234'
       }
     ],
-    'journalvolume.issuedate': [
+    'creativework.datePublished': [
       {
         language: 'en_US',
         value: '2018'
       }
     ],
-    'journalvolume.identifier.description': [
+    'dc.description': [
       {
         language: 'en_US',
         value: 'desc'
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts
index a851bfebbef0394acba3ea4952c7465b38f59ebf..66df0b81048f97f3b32ea2cb65bc67c36ceed9db 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts
+++ b/src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.ts
@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('JournalVolume', ItemViewMode.Full)
 @Component({
@@ -34,12 +31,10 @@ export class JournalVolumeComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.journals$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isJournalOfVolume'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isJournalOfVolume')
       );
       this.issues$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isIssueOfJournalVolume'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isIssueOfJournalVolume')
       );
     }
   }
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
index 2ab34302569f406bbd84f1c027198c9a1f2ee44e..a82d3c5df6d93fc5910d6c90934689bf433188c6 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html
@@ -7,15 +7,15 @@
       <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="item"
-      [fields]="['journal.identifier.issn']"
+      [fields]="['creativeworkseries.issn']"
       [label]="'journal.page.issn'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field class="item-page-fields" [item]="item"
-      [fields]="['journal.publisher']"
+      [fields]="['creativework.publisher']"
       [label]="'journal.page.publisher'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['journal.contributor.editor']"
+      [fields]="['creativework.editor']"
       [label]="'journal.page.editor'">
     </ds-generic-item-page-field>
   </div>
@@ -25,7 +25,7 @@
       [label]="'relationships.isVolumeOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field class="item-page-fields" [item]="item"
-      [fields]="['journal.identifier.description']"
+      [fields]="['dc.description']"
       [label]="'journal.page.description'">
     </ds-generic-item-page-field>
     <div>
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.spec.ts b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.spec.ts
index 4189713cb95ef963e099d34bf84ad8fc7e6fcd00..9690c74966258bf984743cadd553417bd3fab465 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.spec.ts
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.spec.ts
@@ -22,19 +22,19 @@ let fixture: ComponentFixture<JournalComponent>;
 const mockItem: Item = Object.assign(new Item(), {
   bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
   metadata: {
-    'journal.identifier.issn': [
+    'creativeworkseries.issn': [
       {
         language: 'en_US',
         value: '1234'
       }
     ],
-    'journal.publisher': [
+    'creativework.publisher': [
       {
         language: 'en_US',
         value: 'a publisher'
       }
     ],
-    'journal.identifier.description': [
+    'dc.description': [
       {
         language: 'en_US',
         value: 'desc'
diff --git a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts
index 99183651e1f06e7c0a0c4027f72f5b61bd80e6ab..a8f071d78a0f18e467b3096c21cad02bb2cf404f 100644
--- a/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts
+++ b/src/app/entity-groups/journal-entities/item-pages/journal/journal.component.ts
@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('Journal', ItemViewMode.Full)
 @Component({
@@ -29,8 +26,7 @@ export class JournalComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.volumes$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isVolumeOfJournal'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isVolumeOfJournal')
       );
     }
   }
diff --git a/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.html
index a809c0f65585a5c57d168ffd13dd34d8a1251fa3..8d312fb7c04a5ab2fa8761896d368d30aeeae509 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.html
@@ -1,13 +1,13 @@
 <ds-truncatable [id]="item.id">
   <a
     [routerLink]="['/items/' + item.id]" class="lead"
-    [innerHTML]="firstMetadataValue('orgunit.identifier.name')"></a>
+    [innerHTML]="firstMetadataValue('organization.legalName')"></a>
   <span class="text-muted">
     <ds-truncatable-part [id]="item.id" [minLines]="3">
-            <span *ngIf="item.allMetadata(['orgunit.identifier.description']).length > 0"
+            <span *ngIf="item.allMetadata(['dc.description']).length > 0"
                   class="item-list-orgunit-description">
                 <ds-truncatable-part [id]="item.id" [minLines]="3"><span
-                  [innerHTML]="firstMetadataValue('orgunit.identifier.description')"></span>
+                  [innerHTML]="firstMetadataValue('dc.description')"></span>
                 </ds-truncatable-part>
             </span>
         </ds-truncatable-part>
diff --git a/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.spec.ts
index ef5d7a0b4ee7cec39accd27151b12e7c7dafcfb3..dd2b138abbd605cfa5587407fa9ee02e5dab8bda 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-list-element.component.spec.ts
@@ -20,7 +20,7 @@ const mockItemWithMetadata: Item = Object.assign(new Item(), {
         value: 'This is just another title'
       }
     ],
-    'orgunit.identifier.description': [
+    'dc.description': [
       {
         language: 'en_US',
         value: 'A description about the OrgUnit'
diff --git a/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-metadata-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-metadata-list-element.component.html
index 463770c0ae2516fb73415b996502b914620fb1eb..ea429e87c663e30e49190dde94d8e60051067688 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-metadata-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/orgunit/orgunit-metadata-list-element.component.html
@@ -1,13 +1,13 @@
 <ng-template #descTemplate>
   <span class="text-muted">
-      <span *ngIf="item.allMetadata(['orgunit.identifier.description']).length > 0"
+      <span *ngIf="item.allMetadata(['dc.description']).length > 0"
             class="item-list-job-title">
-        <span [innerHTML]="firstMetadataValue(['orgunit.identifier.description'])"></span>
+        <span [innerHTML]="firstMetadataValue(['dc.description'])"></span>
       </span>
   </span>
 </ng-template>
 <ds-truncatable [id]="item.id">
   <a [routerLink]="['/items/' + item.id]"
-     [innerHTML]="firstMetadataValue('orgunit.identifier.name')"
+     [innerHTML]="firstMetadataValue('organization.legalName')"
      [tooltip]="descTemplate"></a>
 </ds-truncatable>
diff --git a/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.html
index 52b69453cea78ea5974423b1a4c8200061186533..c88b77083d036ad1987f2d0cf4f488a73da099a4 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.html
@@ -1,12 +1,12 @@
 <ds-truncatable [id]="item.id">
   <a
     [routerLink]="['/items/' + item.id]" class="lead"
-    [innerHTML]="firstMetadataValue('dc.contributor.author')"></a>
+    [innerHTML]="firstMetadataValue('person.familyName') + ', ' + firstMetadataValue('person.givenName')"></a>
   <span class="text-muted">
     <ds-truncatable-part [id]="item.id" [minLines]="1">
-            <span *ngIf="item.allMetadata(['person.identifier.jobtitle']).length > 0"
+            <span *ngIf="item.allMetadata(['person.jobTitle']).length > 0"
                   class="item-list-job-title">
-                    <span *ngFor="let value of allMetadataValues(['person.identifier.jobtitle']); let last=last;">
+                    <span *ngFor="let value of allMetadataValues(['person.jobTitle']); let last=last;">
                         <span [innerHTML]="value"><span [innerHTML]="value"></span></span>
                     </span>
             </span>
diff --git a/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.spec.ts
index 7c5240da953a1b109e9285c051de20535ca0f950..3b6aeae45b3e25a599ac5fc59c4f8105f2eff9aa 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/person/person-list-element.component.spec.ts
@@ -20,7 +20,7 @@ const mockItemWithMetadata: Item = Object.assign(new Item(), {
         value: 'This is just another title'
       }
     ],
-    'person.identifier.jobtitle': [
+    'person.jobTitle': [
       {
         language: 'en_US',
         value: 'Developer'
diff --git a/src/app/entity-groups/research-entities/item-list-elements/person/person-metadata-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/person/person-metadata-list-element.component.html
index 3dfe17debc53e65a4dd438747223d47f549e0e34..1125c2fb9b4d2c2a533a05c10a09955edf06ad34 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/person/person-metadata-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/person/person-metadata-list-element.component.html
@@ -1,8 +1,8 @@
 <ng-template #descTemplate>
   <span class="text-muted">
-      <span *ngIf="item.allMetadata(['person.identifier.jobtitle']).length > 0"
+      <span *ngIf="item.allMetadata(['person.jobTitle']).length > 0"
             class="item-list-job-title">
-              <span *ngFor="let value of allMetadataValues(['person.identifier.jobtitle']); let last=last;">
+              <span *ngFor="let value of allMetadataValues(['person.jobTitle']); let last=last;">
                   <span [innerHTML]="value"><span [innerHTML]="value"></span></span>
               </span>
       </span>
@@ -10,6 +10,6 @@
 </ng-template>
 <ds-truncatable [id]="item.id">
   <a [routerLink]="['/items/' + item.id]"
-     [innerHTML]="firstMetadataValue('dc.contributor.author')"
+     [innerHTML]="firstMetadataValue('person.familyName') + ', ' + firstMetadataValue('person.givenName')"
      [tooltip]="descTemplate"></a>
 </ds-truncatable>
diff --git a/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.html b/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.html
index 6f0faa90ef13cc6241760130d87d7196041ce119..3e979b4e4d8975ee4f86cc8499b491dcfc6382cd 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.html
@@ -1,16 +1,16 @@
 <ds-truncatable [id]="item.id">
   <a
     [routerLink]="['/items/' + item.id]" class="lead"
-    [innerHTML]="firstMetadataValue('project.identifier.name')"></a>
-  <span class="text-muted">
-    <ds-truncatable-part [id]="item.id" [minLines]="1">
-            <span *ngIf="item.allMetadata(['project.identifier.status']).length > 0"
-                  class="item-list-status">
-                    <span *ngFor="let value of allMetadataValues(['project.identifier.status']); let last=last;">
-                        <span [innerHTML]="value"><span [innerHTML]="value"></span></span>
-                    </span>
-            </span>
-        </ds-truncatable-part>
-  </span>
+    [innerHTML]="firstMetadataValue('dc.title')"></a>
+  <!--<span class="text-muted">-->
+    <!--<ds-truncatable-part [id]="item.id" [minLines]="1">-->
+            <!--<span *ngIf="item.allMetadata(['project.identifier.status']).length > 0"-->
+                  <!--class="item-list-status">-->
+                    <!--<span *ngFor="let value of allMetadataValues(['project.identifier.status']); let last=last;">-->
+                        <!--<span [innerHTML]="value"><span [innerHTML]="value"></span></span>-->
+                    <!--</span>-->
+            <!--</span>-->
+        <!--</ds-truncatable-part>-->
+  <!--</span>-->
 </ds-truncatable>
 
diff --git a/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.spec.ts b/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.spec.ts
index f74d7931b09c36d3039551daf0b56221ef2e7591..02dc3f6d73bfc72bcc05e8125e8b07c318fff6fe 100644
--- a/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/project/project-list-element.component.spec.ts
@@ -20,12 +20,12 @@ const mockItemWithMetadata: Item = Object.assign(new Item(), {
         value: 'This is just another title'
       }
     ],
-    'project.identifier.status': [
-      {
-        language: 'en_US',
-        value: 'A status about the project'
-      }
-    ]
+    // 'project.identifier.status': [
+    //   {
+    //     language: 'en_US',
+    //     value: 'A status about the project'
+    //   }
+    // ]
   }
 });
 const mockItemWithoutMetadata: Item = Object.assign(new Item(), {
@@ -61,27 +61,27 @@ describe('ProjectListElementComponent', () => {
 
   }));
 
-  describe('When the item has a status', () => {
-    beforeEach(() => {
-      projectListElementComponent.item = mockItemWithMetadata;
-      fixture.detectChanges();
-    });
-
-    it('should show the status span', () => {
-      const statusField = fixture.debugElement.query(By.css('span.item-list-status'));
-      expect(statusField).not.toBeNull();
-    });
-  });
-
-  describe('When the item has no status', () => {
-    beforeEach(() => {
-      projectListElementComponent.item = mockItemWithoutMetadata;
-      fixture.detectChanges();
-    });
-
-    it('should not show the status span', () => {
-      const statusField = fixture.debugElement.query(By.css('span.item-list-status'));
-      expect(statusField).toBeNull();
-    });
-  });
+  // describe('When the item has a status', () => {
+  //   beforeEach(() => {
+  //     projectListElementComponent.item = mockItemWithMetadata;
+  //     fixture.detectChanges();
+  //   });
+  //
+  //   it('should show the status span', () => {
+  //     const statusField = fixture.debugElement.query(By.css('span.item-list-status'));
+  //     expect(statusField).not.toBeNull();
+  //   });
+  // });
+  //
+  // describe('When the item has no status', () => {
+  //   beforeEach(() => {
+  //     projectListElementComponent.item = mockItemWithoutMetadata;
+  //     fixture.detectChanges();
+  //   });
+  //
+  //   it('should not show the status span', () => {
+  //     const statusField = fixture.debugElement.query(By.css('span.item-list-status'));
+  //     expect(statusField).toBeNull();
+  //   });
+  // });
 });
diff --git a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html
index 0446ac6861f88ca705d279b8e44187a921d148ef..92ac3eac30679d7c08e1d5e72edc87d8b9347c68 100644
--- a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.html
@@ -1,5 +1,5 @@
 <h2 class="item-page-title-field">
-  {{'orgunit.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="item?.allMetadata(['orgunit.identifier.name'])"></ds-metadata-values>
+  {{'orgunit.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="item?.allMetadata(['organization.legalName'])"></ds-metadata-values>
 </h2>
 <div class="row">
   <div class="col-xs-12 col-md-4">
@@ -7,19 +7,19 @@
       <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['orgunit.identifier.dateestablished']"
+      [fields]="['organization.foundingDate']"
       [label]="'orgunit.page.dateestablished'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['orgunit.identifier.city']"
+      [fields]="['organization.address.addressLocality']"
       [label]="'orgunit.page.city'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['orgunit.identifier.country']"
+      [fields]="['organization.adress.addressCountry']"
       [label]="'orgunit.page.country'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['orgunit.identifier.id']"
+      [fields]="['dc.identifier']"
       [label]="'orgunit.page.id'">
     </ds-generic-item-page-field>
   </div>
@@ -37,7 +37,7 @@
       [label]="'relationships.isPublicationOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['orgunit.identifier.description']"
+      [fields]="['dc.description']"
       [label]="'orgunit.page.description'">
     </ds-generic-item-page-field>
     <div>
diff --git a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.spec.ts b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.spec.ts
index 52caf69d728f7e9b0bd30dd73007191cb698f22a..b415879df33312f0778d094301e5ce6d6b46b2ec 100644
--- a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.spec.ts
@@ -12,31 +12,31 @@ import {
 const mockItem: Item = Object.assign(new Item(), {
   bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
   metadata: {
-    'orgunit.identifier.dateestablished': [
+    'organization.foundingDate': [
       {
         language: 'en_US',
         value: '2018'
       }
     ],
-    'orgunit.identifier.city': [
+    'organization.address.addressLocality': [
       {
         language: 'en_US',
         value: 'New York'
       }
     ],
-    'orgunit.identifier.country': [
+    'organization.adress.addressCountry': [
       {
         language: 'en_US',
         value: 'USA'
       }
     ],
-    'orgunit.identifier.id': [
+    'dc.identifier': [
       {
         language: 'en_US',
         value: '1'
       }
     ],
-    'orgunit.identifier.description': [
+    'dc.description': [
       {
         language: 'en_US',
         value: 'desc'
diff --git a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.ts b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.ts
index 7101f05d356a4e256d55d9cc20e6373ae73f7bc2..031ca14ebbd5d2ddea067aa767409b38bc6af0fd 100644
--- a/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.ts
+++ b/src/app/entity-groups/research-entities/item-pages/orgunit/orgunit.component.ts
@@ -4,10 +4,7 @@ import { Item } from '../../../../core/shared/item.model';
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('OrgUnit', ItemViewMode.Full)
 @Component({
@@ -39,18 +36,15 @@ export class OrgunitComponent extends ItemComponent implements OnInit {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.people$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPersonOfOrgUnit'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isPersonOfOrgUnit')
       );
 
       this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isProjectOfOrgUnit'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfOrgUnit')
       );
 
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfOrgUnit'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfOrgUnit')
       );
     }
   }}
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.html b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
index 88cd647645ce7a721f80dac60da5aad68efc5302..04d7b9e062c69b9dd87e597dab1df12643f581da 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.html
@@ -1,5 +1,5 @@
 <h2 class="item-page-title-field">
-  {{'person.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="item?.allMetadata(['dc.contributor.author'])"></ds-metadata-values>
+  {{'person.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="[item?.firstMetadata('person.familyName'), item?.firstMetadata('person.givenName')]" [separator]="', '"></ds-metadata-values>
 </h2>
 <div class="row">
   <div class="col-xs-12 col-md-4">
@@ -7,21 +7,21 @@
       <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async" [defaultImage]="'assets/images/person-placeholder.svg'"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['person.identifier.email']"
+      [fields]="['person.email']"
       [label]="'person.page.email'">
     </ds-generic-item-page-field>
+    <!--<ds-generic-item-page-field [item]="item"-->
+      <!--[fields]="['person.identifier.orcid']"-->
+      <!--[label]="'person.page.orcid'">-->
+    <!--</ds-generic-item-page-field>-->
     <ds-generic-item-page-field [item]="item"
-      [fields]="['person.identifier.orcid']"
-      [label]="'person.page.orcid'">
-    </ds-generic-item-page-field>
-    <ds-generic-item-page-field [item]="item"
-      [fields]="['person.identifier.birthdate']"
+      [fields]="['person.birthDate']"
       [label]="'person.page.birthdate'">
     </ds-generic-item-page-field>
-    <ds-generic-item-page-field [item]="item"
-      [fields]="['person.identifier.staffid']"
-      [label]="'person.page.staffid'">
-    </ds-generic-item-page-field>
+    <!--<ds-generic-item-page-field [item]="item"-->
+      <!--[fields]="['person.identifier.staffid']"-->
+      <!--[label]="'person.page.staffid'">-->
+    <!--</ds-generic-item-page-field>-->
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
@@ -33,15 +33,15 @@
       [label]="'relationships.isOrgUnitOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['person.identifier.jobtitle']"
+      [fields]="['person.jobTitle']"
       [label]="'person.page.jobtitle'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['person.identifier.lastname']"
+      [fields]="['person.familyName']"
       [label]="'person.page.lastname'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['person.identifier.firstname']"
+      [fields]="['person.givenName']"
       [label]="'person.page.firstname'">
     </ds-generic-item-page-field>
     <div>
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.spec.ts b/src/app/entity-groups/research-entities/item-pages/person/person.component.spec.ts
index beadbbef79a87398fd58032f46f0c7ab344d7f4d..73f61983fc0bccdd13b7b7885a51a4d01ebf16dc 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.spec.ts
@@ -12,43 +12,43 @@ import {
 const mockItem: Item = Object.assign(new Item(), {
   bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
   metadata: {
-    'person.identifier.email': [
+    'person.email': [
       {
         language: 'en_US',
         value: 'fake@email.com'
       }
     ],
-    'person.identifier.orcid': [
-      {
-        language: 'en_US',
-        value: 'ORCID-1'
-      }
-    ],
-    'person.identifier.birthdate': [
+    // 'person.identifier.orcid': [
+    //   {
+    //     language: 'en_US',
+    //     value: 'ORCID-1'
+    //   }
+    // ],
+    'person.birthDate': [
       {
         language: 'en_US',
         value: '1993'
       }
     ],
-    'person.identifier.staffid': [
-      {
-        language: 'en_US',
-        value: '1'
-      }
-    ],
-    'person.identifier.jobtitle': [
+    // 'person.identifier.staffid': [
+    //   {
+    //     language: 'en_US',
+    //     value: '1'
+    //   }
+    // ],
+    'person.jobTitle': [
       {
         language: 'en_US',
         value: 'Developer'
       }
     ],
-    'person.identifier.lastname': [
+    'person.familyName': [
       {
         language: 'en_US',
         value: 'Doe'
       }
     ],
-    'person.identifier.firstname': [
+    'person.givenName': [
       {
         language: 'en_US',
         value: 'John'
diff --git a/src/app/entity-groups/research-entities/item-pages/person/person.component.ts b/src/app/entity-groups/research-entities/item-pages/person/person.component.ts
index ec91561eb930f5a43b0f4e25107b2f87c084024c..8b36175b96a93ed2ad8fe437f152f1bb620f27ce 100644
--- a/src/app/entity-groups/research-entities/item-pages/person/person.component.ts
+++ b/src/app/entity-groups/research-entities/item-pages/person/person.component.ts
@@ -6,10 +6,7 @@ import { ITEM } from '../../../../shared/items/switcher/item-type-switcher.compo
 import { SearchFixedFilterService } from '../../../../+search-page/search-filters/search-filter/search-fixed-filter.service';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('Person', ItemViewMode.Full)
 @Component({
@@ -57,18 +54,15 @@ export class PersonComponent extends ItemComponent {
 
     if (isNotEmpty(this.resolvedRelsAndTypes$)) {
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfAuthor'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfAuthor')
       );
 
       this.projects$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isProjectOfPerson'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isProjectOfPerson')
       );
 
       this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isOrgUnitOfPerson'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfPerson')
       );
 
       this.fixedFilterQuery = this.fixedFilterService.getQueryByRelations('isAuthorOfPublication', this.item.id);
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.html b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
index 08e386182b22d385a1b1020e7e6a8b24d5a013bf..4e9a130b8cb542024f2037ffb4e320ee6746bdfe 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.html
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.html
@@ -1,15 +1,15 @@
 <h2 class="item-page-title-field">
-  {{'project.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="item?.allMetadata(['project.identifier.name'])"></ds-metadata-values>
+  {{'project.page.titleprefix' | translate}}<ds-metadata-values [mdValues]="item?.allMetadata(['dc.title'])"></ds-metadata-values>
 </h2>
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper>
       <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async" [defaultImage]="'assets/images/project-placeholder.svg'"></ds-thumbnail>
     </ds-metadata-field-wrapper>
-    <ds-generic-item-page-field [item]="item"
-      [fields]="['project.identifier.status']"
-      [label]="'project.page.status'">
-    </ds-generic-item-page-field>
+    <!--<ds-generic-item-page-field [item]="item"-->
+      <!--[fields]="['project.identifier.status']"-->
+      <!--[label]="'project.page.status'">-->
+    <!--</ds-generic-item-page-field>-->
     <ds-metadata-representation-list
       [label]="'project.page.contributor' | translate"
       [representations]="contributors$ | async">
@@ -19,13 +19,13 @@
       [label]="'project.page.funder'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['project.identifier.id']"
+      [fields]="['dc.identifier']"
       [label]="'project.page.id'">
     </ds-generic-item-page-field>
-    <ds-generic-item-page-field [item]="item"
-      [fields]="['project.identifier.expectedcompletion']"
-      [label]="'project.page.expectedcompletion'">
-    </ds-generic-item-page-field>
+    <!--<ds-generic-item-page-field [item]="item"-->
+      <!--[fields]="['project.identifier.expectedcompletion']"-->
+      <!--[label]="'project.page.expectedcompletion'">-->
+    <!--</ds-generic-item-page-field>-->
   </div>
   <div class="col-xs-12 col-md-6">
     <ds-related-items
@@ -41,11 +41,11 @@
       [label]="'relationships.isOrgUnitOf' | translate">
     </ds-related-items>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['project.identifier.description']"
+      [fields]="['dc.description']"
       [label]="'project.page.description'">
     </ds-generic-item-page-field>
     <ds-generic-item-page-field [item]="item"
-      [fields]="['project.identifier.keyword']"
+      [fields]="['dc.subject']"
       [label]="'project.page.keyword'">
     </ds-generic-item-page-field>
     <div>
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.spec.ts b/src/app/entity-groups/research-entities/item-pages/project/project.component.spec.ts
index 1e1fd42517f618369d33755da83e7c69f0fa41a7..ad4b70e2aa83e45a7a6759457d65dcb585b81cad 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.spec.ts
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.spec.ts
@@ -12,31 +12,31 @@ import {
 const mockItem: Item = Object.assign(new Item(), {
   bitstreams: observableOf(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), []))),
   metadata: {
-    'project.identifier.status': [
-      {
-        language: 'en_US',
-        value: 'published'
-      }
-    ],
-    'project.identifier.id': [
+    // 'project.identifier.status': [
+    //   {
+    //     language: 'en_US',
+    //     value: 'published'
+    //   }
+    // ],
+    'dc.identifier': [
       {
         language: 'en_US',
         value: '1'
       }
     ],
-    'project.identifier.expectedcompletion': [
-      {
-        language: 'en_US',
-        value: 'exp comp'
-      }
-    ],
-    'project.identifier.description': [
+    // 'project.identifier.expectedcompletion': [
+    //   {
+    //     language: 'en_US',
+    //     value: 'exp comp'
+    //   }
+    // ],
+    'dc.description': [
       {
         language: 'en_US',
         value: 'keyword'
       }
     ],
-    'project.identifier.keyword': [
+    'dc.subject': [
       {
         language: 'en_US',
         value: 'keyword'
diff --git a/src/app/entity-groups/research-entities/item-pages/project/project.component.ts b/src/app/entity-groups/research-entities/item-pages/project/project.component.ts
index 46bc7c9f887cf3a344e8ded535db87d60994d664..13c2b54ba48e7af660f970b21b0ce2444f1ee6f4 100644
--- a/src/app/entity-groups/research-entities/item-pages/project/project.component.ts
+++ b/src/app/entity-groups/research-entities/item-pages/project/project.component.ts
@@ -5,10 +5,7 @@ import { MetadataRepresentation } from '../../../../core/shared/metadata-represe
 import { ItemViewMode, rendersItemType } from '../../../../shared/items/item-type-decorator';
 import { isNotEmpty } from '../../../../shared/empty.util';
 import { ItemComponent } from '../../../../+item-page/simple/item-types/shared/item.component';
-import {
-  filterRelationsByTypeLabel,
-  relationsToItems
-} from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
+import { getRelatedItemsByTypeLabel } from '../../../../+item-page/simple/item-types/shared/item-relationships-utils';
 
 @rendersItemType('Project', ItemViewMode.Full)
 @Component({
@@ -47,18 +44,15 @@ export class ProjectComponent extends ItemComponent implements OnInit {
       this.contributors$ = this.buildRepresentations('OrgUnit', 'project.contributor.other');
 
       this.people$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPersonOfProject'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isPersonOfProject')
       );
 
       this.publications$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isPublicationOfProject'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isPublicationOfProject')
       );
 
       this.orgUnits$ = this.resolvedRelsAndTypes$.pipe(
-        filterRelationsByTypeLabel('isOrgUnitOfProject'),
-        relationsToItems(this.item.id)
+        getRelatedItemsByTypeLabel(this.item.id, 'isOrgUnitOfProject')
       );
     }
   }
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index bd141706da1a6e8ce9128818009d375f908182a0..51201774d556d8b4d645c42a54a59348886bead2 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -1,4 +1,3 @@
-@import '../../styles/variables.scss';
 $footer-bg: $gray-100;
 $footer-border: 1px solid darken($footer-bg, 10%);
 $footer-padding: $spacer * 1.5;
diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index f514508385776dab8d5e972267724c72ac9d0e08..c3eba35b796be9ff051ac3507f9b5f35d4aaa14e 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 @media screen and (max-width: map-get($grid-breakpoints, md)) {
     :host.open {
         background-color: $white;
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index df4c0b8fb86251aa3d12ae311940afc250c3dbd0..4d25bd0d432cbf2a7cdaf3804a32ed331fdf073f 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 .navbar-brand img {
     height: $header-logo-height;
     @media screen and (max-width: map-get($grid-breakpoints, sm)) {
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 1fb78bef0dd50fe3e9268bb643807861fc7df8db..f724c3e75112461f437be4a6758cf61733666835 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .dropdown-menu {
     overflow: hidden;
     min-width: 100%;
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 947b785196e8a1e9e908574ab3bf4e48e65925b4..d0fa04991d98a31fa049bfa2818cfbc78752fdc4 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -1,5 +1,3 @@
-@import '../../styles/variables.scss';
-
 nav.navbar {
     border-bottom: 1px $gray-400 solid;
     align-items: baseline;
@@ -34,6 +32,4 @@ nav.navbar {
         }
         padding: 0;
     }
-}
-
-
+}
\ No newline at end of file
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
index 2d937fd84e5adea9a74aa1bebf2ab9a20da110b0..ca054a662b914f6e8a7bab69dee9d3e8bb996308 100644
--- a/src/app/navbar/navbar.component.spec.ts
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -11,6 +11,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Injector, NO_ERRORS_SCHEMA } from '@angular/core';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuServiceStub } from '../shared/testing/menu-service-stub';
+import { ENV_CONFIG, GLOBAL_CONFIG } from '../../config';
 
 let comp: NavbarComponent;
 let fixture: ComponentFixture<NavbarComponent>;
@@ -30,6 +31,7 @@ describe('NavbarComponent', () => {
         { provide: Injector, useValue: {} },
         { provide: MenuService, useValue: menuService },
         { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+        { provide: GLOBAL_CONFIG, useValue: ENV_CONFIG }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
index 48b316af4bc04135a8fa7abdd38792296df0055a..4c7c3cd0302b89ee4661399498282ba6e9ac7a7a 100644
--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector, OnInit } from '@angular/core';
+import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { slideMobileNav } from '../shared/animations/slide';
 import { MenuComponent } from '../shared/menu/menu.component';
 import { MenuService } from '../shared/menu/menu.service';
@@ -6,14 +6,15 @@ 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 { GLOBAL_CONFIG, GlobalConfig } from '../../config';
 
 /**
  * Component representing the public navbar
  */
 @Component({
   selector: 'ds-navbar',
-  styleUrls: ['navbar.component.scss'],
-  templateUrl: 'navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+  templateUrl: './navbar.component.html',
   animations: [slideMobileNav]
 })
 export class NavbarComponent extends MenuComponent implements OnInit {
@@ -23,7 +24,8 @@ export class NavbarComponent extends MenuComponent implements OnInit {
    */
   menuID = MenuID.PUBLIC;
 
-  constructor(protected menuService: MenuService,
+  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+              protected menuService: MenuService,
               protected injector: Injector,
               public windowService: HostWindowService
   ) {
@@ -39,7 +41,7 @@ export class NavbarComponent extends MenuComponent implements OnInit {
    * Initialize all menu sections and items for this menu
    */
   createMenu() {
-    const menuList = [
+    const menuList: any[] = [
       /* News */
       {
         id: 'browse_global',
@@ -62,50 +64,6 @@ export class NavbarComponent extends MenuComponent implements OnInit {
       //     link: '#'
       //   } as LinkMenuItemModel,
       // },
-      {
-        id: 'browse_global_global_by_title',
-        parentID: 'browse_global',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.browse_global_by_title',
-          link: '/browse/title'
-        } as LinkMenuItemModel,
-      },
-      {
-        id: 'browse_global_global_by_issue_date',
-        parentID: 'browse_global',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.browse_global_by_issue_date',
-          link: '/browse/dateissued'
-        } as LinkMenuItemModel,
-      },
-      {
-        id: 'browse_global_by_author',
-        parentID: 'browse_global',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.browse_global_by_author',
-          link: '/browse/author'
-        } as LinkMenuItemModel,
-      },
-      {
-        id: 'browse_global_by_subject',
-        parentID: 'browse_global',
-        active: false,
-        visible: true,
-        model: {
-          type: MenuItemType.LINK,
-          text: 'menu.section.browse_global_by_subject',
-          link: '/browse/subject'
-        } as LinkMenuItemModel,
-      },
 
       /* Statistics */
       {
@@ -120,6 +78,21 @@ export class NavbarComponent extends MenuComponent implements OnInit {
         index: 2
       },
     ];
+    // Read the different Browse-By types from config and add them to the browse menu
+    const types = this.config.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
+      });
+    });
     menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, menuSection));
 
   }
diff --git a/src/app/pagenotfound/pagenotfound.component.scss b/src/app/pagenotfound/pagenotfound.component.scss
index da97dd7a62e610066229abae8f4c43a981b82780..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/pagenotfound/pagenotfound.component.scss
+++ b/src/app/pagenotfound/pagenotfound.component.scss
@@ -1 +0,0 @@
-@import '../../styles/variables.scss';
diff --git a/src/app/shared/chips/chips.component.scss b/src/app/shared/chips/chips.component.scss
index 9d7eae7edd2706784805c027175a660217f628e1..76be7559200084bbdba029c27bfb837488883df9 100644
--- a/src/app/shared/chips/chips.component.scss
+++ b/src/app/shared/chips/chips.component.scss
@@ -1,5 +1,3 @@
-@import "../../../styles/variables";
-
 .chip-selected {
   background-color: map-get($theme-colors, info) !important;
 }
diff --git a/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html
index f9ef4e5232430c8e2367f522f7d31bb3c06cbaef..1c73fbb3df6be1f55b94358a7858d9f1196c9874 100644
--- a/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html
+++ b/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -1,7 +1,6 @@
 <h3>{{'browse.comcol.head' | translate}}</h3>
 <ul>
-  <li><a [routerLink]="['/browse/title']" [queryParams]="{scope: id}">{{'browse.comcol.by.title' | translate}}</a></li>
-  <li><a [routerLink]="['/browse/dateissued']" [queryParams]="{scope: id}">{{'browse.comcol.by.dateissued' | translate}}</a></li>
-  <li><a [routerLink]="['/browse/author']" [queryParams]="{scope: id}">{{'browse.comcol.by.author' | translate}}</a></li>
-  <li><a [routerLink]="['/browse/subject']" [queryParams]="{scope: id}">{{'browse.comcol.by.subject' | translate}}</a></li>
+  <li *ngFor="let config of types">
+    <a [routerLink]="['/browse/' + config.id]" [queryParams]="{scope: id}">{{'browse.comcol.by.' + config.id | translate}}</a>
+  </li>
 </ul>
diff --git a/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts b/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts
index 85d40a77e0f788e8c51cafe85729e9f0ded5eead..dcc7840bb4787c97cb3b6a1d25fc96ae1a6b893e 100644
--- a/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts
+++ b/src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts
@@ -1,4 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, Inject, Input, OnInit } from '@angular/core';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
+import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
 
 /**
  * A component to display the "Browse By" section of a Community or Collection page
@@ -8,9 +10,22 @@ import { Component, Input } from '@angular/core';
   selector: 'ds-comcol-page-browse-by',
   templateUrl: './comcol-page-browse-by.component.html',
 })
-export class ComcolPageBrowseByComponent {
+export class ComcolPageBrowseByComponent implements OnInit {
   /**
    * The ID of the Community or Collection
    */
   @Input() id: string;
+
+  /**
+   * List of currently active browse configurations
+   */
+  types: BrowseByTypeConfig[];
+
+  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig) {
+  }
+
+  ngOnInit(): void {
+    this.types = this.config.browseBy.types;
+  }
+
 }
diff --git a/src/app/shared/comcol-page-content/comcol-page-content.component.scss b/src/app/shared/comcol-page-content/comcol-page-content.component.scss
index ad84b72f8cd72706c1ad1af8c857742e8d981852..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/comcol-page-content/comcol-page-content.component.scss
+++ b/src/app/shared/comcol-page-content/comcol-page-content.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/shared/comcol-page-header/comcol-page-header.component.scss b/src/app/shared/comcol-page-header/comcol-page-header.component.scss
index ad84b72f8cd72706c1ad1af8c857742e8d981852..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/comcol-page-header/comcol-page-header.component.scss
+++ b/src/app/shared/comcol-page-header/comcol-page-header.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss b/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss
index 50be6f5ad03dee5a13636a9571c7a2e4bf85181d..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss
+++ b/src/app/shared/comcol-page-logo/comcol-page-logo.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
index 3e6536110d659d1b1331247834110fb3c1dd72ba..3af258db797ca23c23ac9ed1c1d38a0fc9a38643 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.scss
@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 .dropdown-toggle::after {
   display:none
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
index 7d1160f4500753278ab5b27195a0be60af4e24a4..a657d3eeb6cf012127aea1970f4002ec867bead9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.scss
@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 /* style fa-spin */
 .fa-spin {
   pointer-events: none;
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
index 7c58c0272fb60e937bc04797dcb72da3be082852..fe20afe1ce5a3e565220bf27230ca12da019e341 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/typeahead/dynamic-typeahead.component.scss
@@ -1,5 +1,3 @@
-@import "../../../../../../../styles/variables";
-
 :host /deep/ .dropdown-menu {
   width: 100% !important;
   max-height: $dropdown-menu-max-height;
diff --git a/src/app/shared/form/form.component.scss b/src/app/shared/form/form.component.scss
index 1d5e0342901e48cc787414c3fb58276b2c94c12d..01cf09576fda94bb7245ab2f0e72de646f96ac23 100644
--- a/src/app/shared/form/form.component.scss
+++ b/src/app/shared/form/form.component.scss
@@ -1,5 +1,3 @@
-@import "../../../styles/_variables.scss";
-
 .ds-form-input-addon {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
diff --git a/src/app/shared/input-suggestions/input-suggestions.component.scss b/src/app/shared/input-suggestions/input-suggestions.component.scss
index f2587e1b6f108ab6c3d09258cdc3ee33b11ae6ea..b04cef2adf6c3ba204529c0210cf2ae57c511998 100644
--- a/src/app/shared/input-suggestions/input-suggestions.component.scss
+++ b/src/app/shared/input-suggestions/input-suggestions.component.scss
@@ -1,5 +1,3 @@
-@import "../../../styles/_variables.scss";
-
 .autocomplete {
     width: 100%;
     .dropdown-item {
diff --git a/src/app/shared/log-in/log-in.component.scss b/src/app/shared/log-in/log-in.component.scss
index 5e4393edafbc0121a826ef74ac27ea56b1c9a502..0eda382c0a691a5b131b2f66205fab8fe6bf7ec0 100644
--- a/src/app/shared/log-in/log-in.component.scss
+++ b/src/app/shared/log-in/log-in.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 .form-login .form-control:focus {
   z-index: 2;
 }
diff --git a/src/app/shared/notifications/notification/notification.component.scss b/src/app/shared/notifications/notification/notification.component.scss
index 1c8f0ae17c0b1836ad34f26e3438a46d305a20ce..a5ebb72b0b4daa80e5f3dc9a6660e0e92732de4f 100644
--- a/src/app/shared/notifications/notification/notification.component.scss
+++ b/src/app/shared/notifications/notification/notification.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 .alert {
   display: inline-block;
   min-width: $modal-sm;
diff --git a/src/app/shared/notifications/notifications-board/notifications-board.component.scss b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
index 47b1dba0c3335427f51de8d919a51c676858dfa0..1101393e5981de7953fa28483ceafa591c63f67f 100644
--- a/src/app/shared/notifications/notifications-board/notifications-board.component.scss
+++ b/src/app/shared/notifications/notifications-board/notifications-board.component.scss
@@ -1,6 +1,3 @@
-@import '../../../../styles/variables';
-@import '../../../../styles/mixins';
-
 .notifications-wrapper {
   z-index: $zindex-popover;
   text-align: right;
diff --git a/src/app/shared/object-collection/object-collection.component.scss b/src/app/shared/object-collection/object-collection.component.scss
index 48e6526dffb2580e9bbc4e4725de05fa61a7d0b8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-collection/object-collection.component.scss
+++ b/src/app/shared/object-collection/object-collection.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables';
diff --git a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
index 51a7fc6a558e9c28a56325c7f82ff3204956ab0e..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
+++ b/src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
index 51a7fc6a558e9c28a56325c7f82ff3204956ab0e..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
+++ b/src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
index 45a533cd01d15e25526c4e8a9b39d083b00936a8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
+++ b/src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
index 51a7fc6a558e9c28a56325c7f82ff3204956ab0e..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
+++ b/src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index ff78634863d7e1ebd98de4791ac9f7e05f28115d..437dfc3b434eb47e586f54243a8f9baa06eb3e94 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1,6 +1,3 @@
-@import '../../../styles/variables';
-@import '../../../styles/mixins';
-
 $ds-wrapper-grid-spacing: $spacer/2;
 
 ds-wrapper-grid-element ::ng-deep {
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
index 1d0786105ca4dc61051610513a3fdbe21424a6d5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
index bd63aa6a3a12b4a7427e878eab25f7b9e46e313b..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../../styles/variables';
 
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
index e2751279b698b8fbe252b9c306320bdd4364b846..d61f3ccf55037f5891ded71d48b216fc55f3480a 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../../styles/variables';
-
 .card {
     a > div {
         position: relative;
diff --git a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
index e8d681fb326f8b533eda69f9901f5cc0540a1d26..dc9f9b39698756ab16e154621fb9a6156e7b31db 100644
--- a/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
+++ b/src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss
@@ -1,4 +1,3 @@
- @import '../../../../styles/variables';
 :host {
     /deep/ em {
         font-weight: bold;
diff --git a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
index 51a7fc6a558e9c28a56325c7f82ff3204956ab0e..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
+++ b/src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss
index 45a533cd01d15e25526c4e8a9b39d083b00936a8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss
+++ b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
index 45a533cd01d15e25526c4e8a9b39d083b00936a8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.scss b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
index 45a533cd01d15e25526c4e8a9b39d083b00936a8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.scss
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/item-list-element/item-list-element.component.scss b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
index 45a533cd01d15e25526c4e8a9b39d083b00936a8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/item-list-element/item-list-element.component.scss
+++ b/src/app/shared/object-list/item-list-element/item-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../styles/variables';
diff --git a/src/app/shared/object-list/object-list.component.scss b/src/app/shared/object-list/object-list.component.scss
index 3d2af4d02312f0afec6c966d682ed6282d0a857b..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/object-list.component.scss
+++ b/src/app/shared/object-list/object-list.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables';
\ No newline at end of file
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
index 1d0786105ca4dc61051610513a3fdbe21424a6d5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
index 1d0786105ca4dc61051610513a3fdbe21424a6d5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
index 1d0786105ca4dc61051610513a3fdbe21424a6d5..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss
@@ -1 +0,0 @@
-@import '../../../../../styles/variables';
diff --git a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
index 7134c43dad02cb0c28b7603dfb3b61287fa5f46a..efc4d3c4149d6770bbb06a33e3194b898b1ca936 100644
--- a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
+++ b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.scss
@@ -1,4 +1,3 @@
-@import '../../../../styles/variables';
 :host {
     ::ng-deep em {
         font-weight: bold;
diff --git a/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
index 51a7fc6a558e9c28a56325c7f82ff3204956ab0e..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
+++ b/src/app/shared/object-list/wrapper-list-element/wrapper-list-element.component.scss
@@ -1,2 +1 @@
-@import '../../../../styles/variables';
 
diff --git a/src/app/shared/search-form/search-form.component.scss b/src/app/shared/search-form/search-form.component.scss
index d5811186e782c710b4c7c5377fbd7172ffa7425c..64b97aebd8c7f30045adc564fe7704c5064f8ef1 100644
--- a/src/app/shared/search-form/search-form.component.scss
+++ b/src/app/shared/search-form/search-form.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables.scss';
-
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {
   background-color: $input-bg;
diff --git a/src/app/shared/search-form/search-form.component.ts b/src/app/shared/search-form/search-form.component.ts
index 10c3a3ede7bd803f68e0fd21c288470b9bfce268..7414dd70e645e93aa5f49d21cd348f2de26dd3b5 100644
--- a/src/app/shared/search-form/search-form.component.ts
+++ b/src/app/shared/search-form/search-form.component.ts
@@ -15,6 +15,7 @@ import { SearchService } from '../../+search-page/search-service/search.service'
 @Component({
   selector: 'ds-search-form',
   styleUrls: ['./search-form.component.scss'],
+  // templateUrl: './search-form.component.html',
   templateUrl: './search-form.component.html'
 })
 
@@ -45,6 +46,16 @@ export class SearchFormComponent {
    */
   @Input() scopes: DSpaceObject[];
 
+  /**
+   * Whether or not the search button should be displayed large
+   */
+  @Input() large = false;
+
+  /**
+   * The brand color of the search button
+   */
+  @Input() brandColor = 'primary';
+
   constructor(private router: Router, private searchService: SearchService) {
   }
 
diff --git a/src/app/shared/starts-with/date/starts-with-date.component.scss b/src/app/shared/starts-with/date/starts-with-date.component.scss
index ceec56c8c265b25e28a30b6fb995264cb17848aa..64b97aebd8c7f30045adc564fe7704c5064f8ef1 100644
--- a/src/app/shared/starts-with/date/starts-with-date.component.scss
+++ b/src/app/shared/starts-with/date/starts-with-date.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {
   background-color: $input-bg;
diff --git a/src/app/shared/starts-with/text/starts-with-text.component.scss b/src/app/shared/starts-with/text/starts-with-text.component.scss
index ceec56c8c265b25e28a30b6fb995264cb17848aa..64b97aebd8c7f30045adc564fe7704c5064f8ef1 100644
--- a/src/app/shared/starts-with/text/starts-with-text.component.scss
+++ b/src/app/shared/starts-with/text/starts-with-text.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables.scss';
-
 // temporary fix for bootstrap 4 beta btn color issue
 .btn-secondary {
   background-color: $input-bg;
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
index 133328fec131683d60d4ac494428cf51e429d320..68b6772465a83105dfc72bc6e338ebc827b78fe7 100644
--- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
@@ -1,6 +1,3 @@
-@import '../../../../styles/variables';
-@import '../../../../styles/mixins';
-
 @mixin clamp($lines, $size-factor: 1, $line-height: $line-height-base) {
     $height: $line-height * $font-size-base * $size-factor;
     &.fixedHeight {
diff --git a/src/app/shared/uploader/uploader.component.scss b/src/app/shared/uploader/uploader.component.scss
index 370c3ea280e68c21cd75b647c87089c00c6f136f..8835b87b1e54a012662d66acadd8ad249b162f9b 100644
--- a/src/app/shared/uploader/uploader.component.scss
+++ b/src/app/shared/uploader/uploader.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/_variables.scss';
-
 .ds-base-drop-zone {
   border: 2px dashed $gray-600;
 }
diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.scss b/src/app/shared/view-mode-switch/view-mode-switch.component.scss
index ad84b72f8cd72706c1ad1af8c857742e8d981852..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/app/shared/view-mode-switch/view-mode-switch.component.scss
+++ b/src/app/shared/view-mode-switch/view-mode-switch.component.scss
@@ -1 +0,0 @@
-@import '../../../styles/variables.scss';
\ No newline at end of file
diff --git a/src/app/submission/form/collection/submission-form-collection.component.scss b/src/app/submission/form/collection/submission-form-collection.component.scss
index f91f85677d758be0b96a7de3785a31ac47fda442..deecc39510363d1683498b91e775425a06ddcf43 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.scss
+++ b/src/app/submission/form/collection/submission-form-collection.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables';
-
 .scrollable-menu {
   height: auto;
   max-height: $dropdown-menu-max-height;
diff --git a/src/app/submission/form/collection/submission-form-collection.component.spec.ts b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
index 679500a670da29067bb709327dec138b9354d288..598d4a1732113cc9de4074ef4cc735468c506d48 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.spec.ts
+++ b/src/app/submission/form/collection/submission-form-collection.component.spec.ts
@@ -1,4 +1,10 @@
-import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, DebugElement, SimpleChange } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+  DebugElement,
+  SimpleChange
+} from '@angular/core';
 import { async, ComponentFixture, fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -10,7 +16,10 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { Store } from '@ngrx/store';
 
 import { SubmissionServiceStub } from '../../../shared/testing/submission-service-stub';
-import { mockSubmissionId, mockSubmissionRestResponse } from '../../../shared/mocks/mock-submission';
+import {
+  mockSubmissionId,
+  mockSubmissionRestResponse
+} from '../../../shared/mocks/mock-submission';
 import { SubmissionService } from '../../submission.service';
 import { SubmissionFormCollectionComponent } from './submission-form-collection.component';
 import { CommunityDataService } from '../../../core/data/community-data.service';
@@ -25,28 +34,8 @@ import { PageInfo } from '../../../core/shared/page-info.model';
 import { Collection } from '../../../core/shared/collection.model';
 import { createTestComponent } from '../../../shared/testing/utils';
 import { cold } from 'jasmine-marbles';
-
-const subcommunities = [Object.assign(new Community(), {
-  name: 'SubCommunity 1',
-  id: '123456789-1',
-  metadata: [
-    {
-      key: 'dc.title',
-      language: 'en_US',
-      value: 'SubCommunity 1'
-    }]
-}),
-  Object.assign(new Community(), {
-    name: 'SubCommunity 1',
-    id: '123456789s-1',
-    metadata: [
-      {
-        key: 'dc.title',
-        language: 'en_US',
-        value: 'SubCommunity 1'
-      }]
-  })
-];
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { SearchService } from '../../../+search-page/search-service/search.service';
 
 const mockCommunity1Collection1 = Object.assign(new Collection(), {
   name: 'Community 1-Collection 1',
@@ -92,45 +81,20 @@ const mockCommunity2Collection2 = Object.assign(new Collection(), {
     }]
 });
 
-const mockCommunity = Object.assign(new Community(), {
-  name: 'Community 1',
-  id: '123456789-1',
-  metadata: [
-    {
-      key: 'dc.title',
-      language: 'en_US',
-      value: 'Community 1'
-    }],
-  collections: observableOf(new RemoteData(true, true, true,
-    undefined, new PaginatedList(new PageInfo(), [mockCommunity1Collection1, mockCommunity1Collection2]))),
-  subcommunities: observableOf(new RemoteData(true, true, true,
-    undefined, new PaginatedList(new PageInfo(), subcommunities))),
-});
-
-const mockCommunity2 = Object.assign(new Community(), {
-  name: 'Community 2',
-  id: '123456789-2',
-  metadata: [
-    {
-      key: 'dc.title',
-      language: 'en_US',
-      value: 'Community 2'
-    }],
-  collections: observableOf(new RemoteData(true, true, true,
-    undefined, new PaginatedList(new PageInfo(), [mockCommunity2Collection1, mockCommunity2Collection2]))),
-  subcommunities: observableOf(new RemoteData(true, true, true,
-    undefined, new PaginatedList(new PageInfo(), []))),
-});
-
-const mockCommunityList = observableOf(new RemoteData(true, true, true,
-  undefined, new PaginatedList(new PageInfo(), [mockCommunity, mockCommunity2])));
+const collectionResults = [mockCommunity1Collection1, mockCommunity1Collection2, mockCommunity2Collection1, mockCommunity2Collection2].map((collection: Collection) => Object.assign(new SearchResult<Collection>(), { indexableObject: collection }));
+const searchService = {
+  search: () => {
+    return observableOf(new RemoteData(true, true, true,
+      undefined, new PaginatedList(new PageInfo(), collectionResults)))
+  }
+};
 
 const mockCollectionList = [
   {
     communities: [
       {
-        id: '123456789-1',
-        name: 'Community 1'
+        id: 'c0e4de93-f506-4990-a840-d406f6f2ada7',
+        name: 'Submission test'
       }
     ],
     collection: {
@@ -141,8 +105,8 @@ const mockCollectionList = [
   {
     communities: [
       {
-        id: '123456789-1',
-        name: 'Community 1'
+        id: 'c0e4de93-f506-4990-a840-d406f6f2ada7',
+        name: 'Submission test'
       }
     ],
     collection: {
@@ -153,8 +117,8 @@ const mockCollectionList = [
   {
     communities: [
       {
-        id: '123456789-2',
-        name: 'Community 2'
+        id: 'c0e4de93-f506-4990-a840-d406f6f2ada7',
+        name: 'Submission test'
       }
     ],
     collection: {
@@ -165,8 +129,8 @@ const mockCollectionList = [
   {
     communities: [
       {
-        id: '123456789-2',
-        name: 'Community 2'
+        id: 'c0e4de93-f506-4990-a840-d406f6f2ada7',
+        name: 'Submission test'
       }
     ],
     collection: {
@@ -214,11 +178,15 @@ describe('SubmissionFormCollectionComponent Component', () => {
         TestComponent
       ],
       providers: [
-        { provide: SubmissionJsonPatchOperationsService, useClass: SubmissionJsonPatchOperationsServiceStub },
+        {
+          provide: SubmissionJsonPatchOperationsService,
+          useClass: SubmissionJsonPatchOperationsServiceStub
+        },
         { provide: SubmissionService, useClass: SubmissionServiceStub },
         { provide: CommunityDataService, useValue: communityDataService },
         { provide: JsonPatchOperationsBuilder, useValue: jsonPatchOpBuilder },
         { provide: Store, useValue: store },
+        { provide: SearchService, useValue: searchService },
         ChangeDetectorRef,
         SubmissionFormCollectionComponent
       ],
@@ -283,14 +251,11 @@ describe('SubmissionFormCollectionComponent Component', () => {
     });
 
     it('should init collection list properly', () => {
-      communityDataService.findAll.and.returnValue(mockCommunityList);
-
       comp.ngOnChanges({
         currentCollectionId: new SimpleChange(null, collectionId, true)
       });
 
-      expect(comp.searchListCollection$).toBeObservable(cold('(ab)', {
-        a: [],
+      expect(comp.searchListCollection$).toBeObservable(cold('(b)', {
         b: mockCollectionList
       }));
 
@@ -428,6 +393,8 @@ class TestComponent {
   definitionId = 'traditional';
   submissionId = mockSubmissionId;
 
-  onCollectionChange = () => { return; }
+  onCollectionChange = () => {
+    return;
+  }
 
 }
diff --git a/src/app/submission/form/collection/submission-form-collection.component.ts b/src/app/submission/form/collection/submission-form-collection.component.ts
index b5768340919a6a7b2c2cc007ec38cef01d92aed7..e9832985fe1102e7f886b199e2ea0c08341f5a50 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.ts
+++ b/src/app/submission/form/collection/submission-form-collection.component.ts
@@ -17,16 +17,13 @@ import {
   distinctUntilChanged,
   filter,
   find,
-  flatMap,
   map,
   mergeMap,
-  reduce,
   startWith
 } from 'rxjs/operators';
 
 import { Collection } from '../../../core/shared/collection.model';
 import { CommunityDataService } from '../../../core/data/community-data.service';
-import { Community } from '../../../core/shared/community.model';
 import { hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util';
 import { RemoteData } from '../../../core/data/remote-data';
 import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
@@ -35,6 +32,12 @@ import { PaginatedList } from '../../../core/data/paginated-list';
 import { SubmissionService } from '../../submission.service';
 import { SubmissionObject } from '../../../core/submission/models/submission-object.model';
 import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service';
+import { SearchService } from '../../../+search-page/search-service/search.service';
+import { PaginatedSearchOptions } from '../../../+search-page/paginated-search-options.model';
+import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import { DSpaceObjectType } from '../../../core/shared/dspace-object-type.model';
+import { getSucceededRemoteData } from '../../../core/shared/operators';
+import { SearchResult } from '../../../+search-page/search-result.model';
 
 /**
  * An interface to represent a collection entry
@@ -148,12 +151,14 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit {
    * @param {JsonPatchOperationsBuilder} operationsBuilder
    * @param {SubmissionJsonPatchOperationsService} operationsService
    * @param {SubmissionService} submissionService
+   * @param {SearchService} searchService
    */
   constructor(protected cdr: ChangeDetectorRef,
               private communityDataService: CommunityDataService,
               private operationsBuilder: JsonPatchOperationsBuilder,
               private operationsService: SubmissionJsonPatchOperationsService,
-              private submissionService: SubmissionService) {
+              private submissionService: SubmissionService,
+              private searchService: SearchService) {
   }
 
   /**
@@ -190,38 +195,39 @@ export class SubmissionFormCollectionComponent implements OnChanges, OnInit {
       && hasValue(changes.currentCollectionId.currentValue)) {
       this.selectedCollectionId = this.currentCollectionId;
 
-      // @TODO replace with search/top browse endpoint
-      // @TODO implement community/subcommunity hierarchy
-      const communities$ = this.communityDataService.findAll().pipe(
-        find((communities: RemoteData<PaginatedList<Community>>) => isNotEmpty(communities.payload)),
-        mergeMap((communities: RemoteData<PaginatedList<Community>>) => communities.payload.page));
-
-      const listCollection$ = communities$.pipe(
-        flatMap((communityData: Community) => {
-          return communityData.collections.pipe(
-            find((collections: RemoteData<PaginatedList<Collection>>) => !collections.isResponsePending && collections.hasSucceeded),
-            mergeMap((collections: RemoteData<PaginatedList<Collection>>) => collections.payload.page),
-            filter((collectionData: Collection) => isNotEmpty(collectionData)),
-            map((collectionData: Collection) => ({
-              communities: [{ id: communityData.id, name: communityData.name }],
-              collection: { id: collectionData.id, name: collectionData.name }
-            }))
-          );
-        }),
-        reduce((acc: any, value: any) => [...acc, ...value], []),
-        startWith([])
+      // // @TODO replace with search/top browse endpoint
+      // // @TODO implement community/subcommunity hierarchy
+      // const communities$ = this.communityDataService.findAll().pipe(
+      //   find((communities: RemoteData<PaginatedList<Community>>) => isNotEmpty(communities.payload)),
+      //   mergeMap((communities: RemoteData<PaginatedList<Community>>) => communities.payload.page));
+
+      const listCollection$: Observable<CollectionListEntry[]> = this.searchService.search(
+        new PaginatedSearchOptions({
+          dsoType: DSpaceObjectType.COLLECTION,
+          pagination: new PaginationComponentOptions(),
+          scope: 'c0e4de93-f506-4990-a840-d406f6f2ada7'
+        })
+      ).pipe(
+        getSucceededRemoteData(),
+        map((collections: RemoteData<PaginatedList<SearchResult<Collection>>>) => collections.payload.page),
+        filter((collectionData: Array<SearchResult<Collection>>) => isNotEmpty(collectionData)),
+        map((collectionData: Array<SearchResult<Collection>>) => {
+          return collectionData.map((collection: SearchResult<Collection>) => {
+            return {
+              communities: [{
+                id: 'c0e4de93-f506-4990-a840-d406f6f2ada7',
+                name: 'Submission test'
+              }],
+              collection: { id: collection.indexableObject.id, name: collection.indexableObject.name }
+            }
+          })
+        })
       );
 
-      this.selectedCollectionName$ = communities$.pipe(
-        flatMap((communityData: Community) => {
-          return communityData.collections.pipe(
-            find((collections: RemoteData<PaginatedList<Collection>>) => !collections.isResponsePending && collections.hasSucceeded),
-            mergeMap((collections: RemoteData<PaginatedList<Collection>>) => collections.payload.page),
-            filter((collectionData: Collection) => isNotEmpty(collectionData)),
-            filter((collectionData: Collection) => collectionData.id === this.selectedCollectionId),
-            map((collectionData: Collection) => collectionData.name)
-          );
-        }),
+      this.selectedCollectionName$ = listCollection$.pipe(
+        map((collectionData: CollectionListEntry[]) => collectionData.find((entry: CollectionListEntry) => entry.collection.id === this.selectedCollectionId)),
+        filter((entry: CollectionListEntry) => hasValue(entry.collection)),
+        map((entry: CollectionListEntry) => entry.collection.name),
         startWith('')
       );
 
diff --git a/src/app/submission/form/section-add/submission-form-section-add.component.scss b/src/app/submission/form/section-add/submission-form-section-add.component.scss
index 628f0f56331d71201892979e3488d3b9b6ec54fd..c8fd2073d167c2dcafac23ac08ddcdf21f2fc118 100644
--- a/src/app/submission/form/section-add/submission-form-section-add.component.scss
+++ b/src/app/submission/form/section-add/submission-form-section-add.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables';
-
 .dropdown-toggle::after {
   display:none
 }
diff --git a/src/app/submission/form/submission-form.component.scss b/src/app/submission/form/submission-form.component.scss
index c9b68721460ef69e22d54735b94333c4fbba776d..44551162cc1e2d9699eab5909362d6bbc76fa5c6 100644
--- a/src/app/submission/form/submission-form.component.scss
+++ b/src/app/submission/form/submission-form.component.scss
@@ -1,5 +1,3 @@
-@import '../../../styles/variables';
-
 .submission-form-header {
   background-color: rgba($white, .97);
   padding: ($spacer / 2) 0 ($spacer / 2) 0;
diff --git a/src/app/submission/sections/container/section-container.component.scss b/src/app/submission/sections/container/section-container.component.scss
index 2e17794e424cf90f376da21710fb742f82d7b864..3917280f8cad54427cf321ffff727d169d744539 100644
--- a/src/app/submission/sections/container/section-container.component.scss
+++ b/src/app/submission/sections/container/section-container.component.scss
@@ -1,5 +1,3 @@
-@import '../../../../styles/variables';
-
 :host /deep/ .card {
   margin-bottom: $submission-sections-margin-bottom;
   overflow: unset;
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 ce67ef98df214a31cd1f9c01d82c688d03857e5c..7596652dc2191db2ad1d4063abf4f71e33feca8b 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,5 +1,3 @@
-@import '../../../../../styles/variables';
-
 .sticky-buttons {
   position: sticky;
   top: $dropdown-item-padding-x * 3;
diff --git a/src/app/submission/sections/upload/section-upload.component.spec.ts b/src/app/submission/sections/upload/section-upload.component.spec.ts
index be8f0969643d1241756a8762bb9526d9935adc87..f84ece496929b52d0fae77f0afb451b62ed85af4 100644
--- a/src/app/submission/sections/upload/section-upload.component.spec.ts
+++ b/src/app/submission/sections/upload/section-upload.component.spec.ts
@@ -30,6 +30,7 @@ import { GroupEpersonService } from '../../../core/eperson/group-eperson.service
 import { cold, hot } from 'jasmine-marbles';
 import { Collection } from '../../../core/shared/collection.model';
 import { ResourcePolicy } from '../../../core/shared/resource-policy.model';
+import { ResourcePolicyService } from '../../../core/data/resource-policy.service';
 import { RemoteData } from '../../../core/data/remote-data';
 import { ConfigData } from '../../../core/config/config-data';
 import { PageInfo } from '../../../core/shared/page-info.model';
@@ -47,8 +48,7 @@ function getMockSubmissionUploadsConfigService(): SubmissionFormsConfigService {
 
 function getMockCollectionDataService(): CollectionDataService {
   return jasmine.createSpyObj('CollectionDataService', {
-    findById: jasmine.createSpy('findById'),
-    findByHref: jasmine.createSpy('findByHref')
+    findById: jasmine.createSpy('findById')
   });
 }
 
@@ -59,6 +59,12 @@ function getMockGroupEpersonService(): GroupEpersonService {
   });
 }
 
+function getMockResourcePolicyService(): ResourcePolicyService {
+  return jasmine.createSpyObj('ResourcePolicyService', {
+    findByHref: jasmine.createSpy('findByHref')
+  });
+}
+
 const sectionObject: SectionDataObject = {
   config: 'https://dspace7.4science.it/or2018/api/config/submissionforms/upload',
   mandatory: true,
@@ -80,6 +86,7 @@ describe('SubmissionSectionUploadComponent test suite', () => {
   let sectionsServiceStub: SectionsServiceStub;
   let collectionDataService: any;
   let groupService: any;
+  let resourcePolicyService: any;
   let uploadsConfigService: any;
   let bitstreamService: any;
 
@@ -120,6 +127,7 @@ describe('SubmissionSectionUploadComponent test suite', () => {
       providers: [
         { provide: CollectionDataService, useValue: getMockCollectionDataService() },
         { provide: GroupEpersonService, useValue: getMockGroupEpersonService() },
+        { provide: ResourcePolicyService, useValue: getMockResourcePolicyService() },
         { provide: SubmissionUploadsConfigService, useValue: getMockSubmissionUploadsConfigService() },
         { provide: SectionsService, useClass: SectionsServiceStub },
         { provide: SubmissionService, useClass: SubmissionServiceStub },
@@ -166,6 +174,7 @@ describe('SubmissionSectionUploadComponent test suite', () => {
       sectionsServiceStub = TestBed.get(SectionsService);
       collectionDataService = TestBed.get(CollectionDataService);
       groupService = TestBed.get(GroupEpersonService);
+      resourcePolicyService = TestBed.get(ResourcePolicyService);
       uploadsConfigService = TestBed.get(SubmissionUploadsConfigService);
       bitstreamService = TestBed.get(SectionUploadService);
     });
@@ -184,7 +193,7 @@ describe('SubmissionSectionUploadComponent test suite', () => {
         new RemoteData(false, false, true,
         undefined, mockCollection)));
 
-      collectionDataService.findByHref.and.returnValue(observableOf(
+      resourcePolicyService.findByHref.and.returnValue(observableOf(
         new RemoteData(false, false, true,
           undefined, mockDefaultAccessCondition)
       ));
@@ -230,7 +239,7 @@ describe('SubmissionSectionUploadComponent test suite', () => {
         new RemoteData(false, false, true,
           undefined, mockCollection)));
 
-      collectionDataService.findByHref.and.returnValue(observableOf(
+      resourcePolicyService.findByHref.and.returnValue(observableOf(
         new RemoteData(false, false, true,
           undefined, mockDefaultAccessCondition)
       ));
diff --git a/src/app/submission/sections/upload/section-upload.component.ts b/src/app/submission/sections/upload/section-upload.component.ts
index 3a79a670ad2d46ba526c6bb147f8c1a7153fa222..826385af450752904164dd3a4a588b8d61e8182b 100644
--- a/src/app/submission/sections/upload/section-upload.component.ts
+++ b/src/app/submission/sections/upload/section-upload.component.ts
@@ -8,6 +8,7 @@ import { hasValue, isNotEmpty, isNotUndefined, isUndefined } from '../../../shar
 import { SectionUploadService } from './section-upload.service';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { GroupEpersonService } from '../../../core/eperson/group-eperson.service';
+import { ResourcePolicyService } from '../../../core/data/resource-policy.service';
 import { SubmissionUploadsConfigService } from '../../../core/config/submission-uploads-config.service';
 import { SubmissionUploadsModel } from '../../../core/config/models/config-submission-uploads.model';
 import { SubmissionFormsModel } from '../../../core/config/models/config-submission-forms.model';
@@ -116,6 +117,7 @@ export class SubmissionSectionUploadComponent extends SectionModelComponent {
    * @param {ChangeDetectorRef} changeDetectorRef
    * @param {CollectionDataService} collectionDataService
    * @param {GroupEpersonService} groupService
+   * @param {ResourcePolicyService} resourcePolicyService
    * @param {SectionsService} sectionService
    * @param {SubmissionService} submissionService
    * @param {SubmissionUploadsConfigService} uploadsConfigService
@@ -126,6 +128,7 @@ export class SubmissionSectionUploadComponent extends SectionModelComponent {
               private changeDetectorRef: ChangeDetectorRef,
               private collectionDataService: CollectionDataService,
               private groupService: GroupEpersonService,
+              private resourcePolicyService: ResourcePolicyService,
               protected sectionService: SectionsService,
               private submissionService: SubmissionService,
               private uploadsConfigService: SubmissionUploadsConfigService,
@@ -155,7 +158,7 @@ export class SubmissionSectionUploadComponent extends SectionModelComponent {
         find((rd: RemoteData<Collection>) => isNotUndefined((rd.payload))),
         tap((collectionRemoteData: RemoteData<Collection>) => this.collectionName = collectionRemoteData.payload.name),
         flatMap((collectionRemoteData: RemoteData<Collection>) => {
-          return this.collectionDataService.findByHref(
+          return this.resourcePolicyService.findByHref(
             (collectionRemoteData.payload as any)._links.defaultAccessConditions
           );
         }),
diff --git a/src/app/thumbnail/thumbnail.component.ts b/src/app/thumbnail/thumbnail.component.ts
index 9700e018218d8feff1b7ae2bdf76633872ce84c6..e31e907b47b1069161450c739562cdc8848b02ef 100644
--- a/src/app/thumbnail/thumbnail.component.ts
+++ b/src/app/thumbnail/thumbnail.component.ts
@@ -20,7 +20,7 @@ export class ThumbnailComponent implements OnInit {
   /**
    * The default 'holder.js' image
    */
-  @Input() defaultImage? = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23EEEEEE%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
+  @Input() defaultImage? = 'data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%22120%22%20viewBox%3D%220%200%2093%20120%22%20preserveAspectRatio%3D%22none%22%3E%3C!--%0ASource%20URL%3A%20holder.js%2F93x120%3Ftext%3DNo%20Thumbnail%0ACreated%20with%20Holder.js%202.8.2.%0ALearn%20more%20at%20http%3A%2F%2Fholderjs.com%0A(c)%202012-2015%20Ivan%20Malopinsky%20-%20http%3A%2F%2Fimsky.co%0A--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B%23holder_1543e460b05%20text%20%7B%20fill%3A%23AAAAAA%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%5D%5D%3E%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1543e460b05%22%3E%3Crect%20width%3D%2293%22%20height%3D%22120%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cg%3E%3Ctext%20x%3D%2235.6171875%22%20y%3D%2257%22%3ENo%3C%2Ftext%3E%3Ctext%20x%3D%2210.8125%22%20y%3D%2272%22%3EThumbnail%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E';
 
   src: string;
   errorHandler(event) {
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000000000000000000000000000000000000..269277643c8104d4be98bf7c11f43e0ef183aeda
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,150 @@
+const path = require('path');
+
+let production = false;
+
+let mergedConfig;
+
+let envConfigOverride;
+
+let envConfigFile;
+
+__webpack
+
+// check process.env.NODE_ENV to determine which environment config to use
+// process.env.NODE_ENV is defined by webpack, else assume development
+switch (process.env.NODE_ENV) {
+  case 'prod':
+  case 'production':
+    // webpack.prod.dspace-angular-config.ts defines process.env.NODE_ENV = 'production'
+    envConfigFile = './environment.prod.js';
+    production = true;
+    break;
+  case 'test':
+    // webpack.test.dspace-angular-config.ts defines process.env.NODE_ENV = 'test'
+    envConfigFile = './environment.test.js';
+    break;
+  default:
+    // if not using webpack.prod.dspace-angular-config.ts or webpack.test.dspace-angular-config.ts, it must be development
+    envConfigFile = './environment.dev.js';
+}
+
+try {
+  mergedConfig = require(path.resolve(__dirname, '..', 'config', 'environment.default.js'));
+} catch (e) {
+  console.log('e', e);
+  throw new Error('Cannot find file config/environment.default.js');
+}
+
+// if envConfigFile set try to get configs
+if (envConfigFile) {
+  try {
+    envConfigOverride = require(path.resolve(__dirname, '..', 'config', envConfigFile));
+  } catch (e) {
+    console.log('e', e);
+    console.warn('Cannot find file ' + envConfigFile.substring(2, envConfigFile.length), 'Using default environment');
+  }
+  try {
+    merge(envConfigOverride);
+  } catch (e) {
+    console.warn('Unable to merge the default environment');
+  }
+}
+
+// allow to override a few important options by environment variables
+function createServerConfig(host,  port, nameSpace, ssl) {
+  const result = { host, nameSpace };
+
+  if (port !== null && port !== undefined) {
+    result.port = port * 1;
+  }
+
+  if (ssl !== null && ssl !== undefined) {
+    result.ssl = ssl.trim().match(/^(true|1|yes)$/i) ? true : false;
+  }
+
+  return result;
+}
+
+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)
+};
+
+// merge the environment variables with our configuration.
+try {
+  merge(processEnv)
+} catch (e) {
+  console.warn('Unable to merge environment variable into the configuration')
+}
+
+buildBaseUrls();
+
+// set config for whether running in production
+mergedConfig.production = production;
+
+function merge(config) {
+  innerMerge(mergedConfig, config);
+}
+
+function innerMerge(globalConfig, config) {
+  for (const key in config) {
+    if (config.hasOwnProperty(key)) {
+      if (isObject(config[key])) {
+        innerMerge(globalConfig[key], config[key]);
+      } else {
+        if (isDefined(config[key])) {
+          globalConfig[key] = config[key];
+        }
+      }
+    }
+  }
+}
+
+function buildBaseUrls() {
+  for (const key in mergedConfig) {
+    if (mergedConfig.hasOwnProperty(key) && mergedConfig[key].host) {
+      mergedConfig[key].baseUrl = [
+        getProtocol(mergedConfig[key].ssl),
+        getHost(mergedConfig[key].host),
+        getPort(mergedConfig[key].port),
+        getNameSpace(mergedConfig[key].nameSpace)
+      ].join('');
+    }
+  }
+}
+
+function getProtocol(ssl) {
+  return ssl ? 'https://' : 'http://';
+}
+
+function getHost(host) {
+  return host;
+}
+
+function getPort(port) {
+  return port ? (port !== 80 && port !== 443) ? ':' + port : '' : '';
+}
+
+function getNameSpace(nameSpace) {
+  return nameSpace ? nameSpace.charAt(0) === '/' ? nameSpace : '/' + nameSpace : '';
+}
+
+function isDefined(value) {
+  return typeof value !== 'undefined' && value !== null;
+}
+
+function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+module.exports = {
+  mergedConfig: mergedConfig
+};
diff --git a/src/config/browse-by-config.interface.ts b/src/config/browse-by-config.interface.ts
index 6adba66b927ad9e381ddee08e0828cc89ccfca4c..719e127b4b5ce698f4fad0b707a2f2bb6a78a505 100644
--- a/src/config/browse-by-config.interface.ts
+++ b/src/config/browse-by-config.interface.ts
@@ -1,4 +1,5 @@
 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
@@ -18,4 +19,9 @@ 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
new file mode 100644
index 0000000000000000000000000000000000000000..97d3acbe2558e332c8aaa657c0e60e45fcc64cef
--- /dev/null
+++ b/src/config/browse-by-type-config.interface.ts
@@ -0,0 +1,23 @@
+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;
+
+  /**
+   * 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/global-config.interface.ts b/src/config/global-config.interface.ts
index d83ec6e4d816cb59cd8c0a7fba92eb508d261bf7..22b4b0500fc985308b45a3aaaccb38eb068d4d5b 100644
--- a/src/config/global-config.interface.ts
+++ b/src/config/global-config.interface.ts
@@ -8,6 +8,7 @@ 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 { Theme } from './theme.inferface';
 
 export interface GlobalConfig extends Config {
   ui: ServerConfig;
@@ -25,4 +26,5 @@ export interface GlobalConfig extends Config {
   languages: LangConfig[];
   browseBy: BrowseByConfig;
   item: ItemPageConfig;
+  themes: Theme[];
 }
diff --git a/src/config/theme.inferface.ts b/src/config/theme.inferface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0cf1d77d887c453539b51825fec1f1aa1edd129
--- /dev/null
+++ b/src/config/theme.inferface.ts
@@ -0,0 +1,5 @@
+import { Config } from './config.interface';
+
+export interface Theme extends Config {
+  name: string;
+}
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 7be76ff5d3ac13f3d95999c1189aa4ce31f1e73e..5258365cfd67597a91f9d0d455ba35cf6b91afb6 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -1,3 +1,5 @@
+@import '_themed_bootstrap_variables.scss';
+
 /** Help Variables **/
 $fa-fixed-width: 1.25rem;
 $icon-padding: 1rem;
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index be03d719c55e96acf4b739423ed607baac57b2c8..8ca2067a2ea729c466e7243f7469fd7d8d54665c 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -1,3 +1,5 @@
+@import '_themed_custom_variables.scss';
+
 $content-spacing: $spacer * 1.5;
 
 $button-height: $input-btn-padding-y * 2 + $input-btn-line-height + calculateRem($input-btn-border-width*2);
@@ -20,9 +22,9 @@ $sidebar-z-index: 20;
 $header-logo-height: 80px;
 $header-logo-height-xs: 50px;
 
-$admin-sidebar-bg: $dark;
-$admin-sidebar-active-bg: darken($dark, 3%);
-$admin-sidebar-header-bg: darken($dark, 7%);
+$admin-sidebar-bg: darken(#2B4E72, 17%);
+$admin-sidebar-active-bg: darken($admin-sidebar-bg, 3%);
+$admin-sidebar-header-bg: darken($admin-sidebar-bg, 7%);
 
 $dark-scrollbar-background: $admin-sidebar-active-bg;
 $dark-scrollbar-foreground: #47495d;
@@ -32,3 +34,5 @@ $submission-sections-margin-bottom: .5rem !default;
 $edit-item-button-min-width: 100px;
 $edit-item-metadata-field-width: 190px;
 $edit-item-language-field-width: 43px;
+
+$thumbnail-max-width: 175px;
diff --git a/src/styles/_exposed_variables.scss b/src/styles/_exposed_variables.scss
index 5f0f2d26544235524e4f318943fb2c7d18e81681..1ab67e709d58080d2f80e7c6b7f605f3d436938b 100644
--- a/src/styles/_exposed_variables.scss
+++ b/src/styles/_exposed_variables.scss
@@ -9,4 +9,4 @@
     sidebarItemsWidth: $sidebar-items-width;
     collapsedSidebarWidth: $collapsed-sidebar-width;
     totalSidebarWidth: $total-sidebar-width;
-}
\ No newline at end of file
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 40bb9b8f3e240b2dbdb83894d50f73f9567d74a0..e72af304cd3a8a0164dd2a9844c23c89f80a58e7 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -1,6 +1,5 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
-@import 'variables.scss';
 
 @mixin word-wrap() {
     overflow-wrap: break-word;
@@ -39,5 +38,4 @@
     &::-webkit-resizer {
         background-color: $dark-scrollbar-background;
     }
-
 }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 33a3f0b1fad958913629964d3c806951c4e75c9c..2632dbfd09f99080d4e7860912325f6acb50acd1 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,5 +1,7 @@
 @import '_functions.scss';
 @import '../../node_modules/bootstrap/scss/functions.scss';
-@import 'bootstrap_variables.scss';
+
+@import '_bootstrap_variables.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
-@import 'custom_variables.scss';
\ No newline at end of file
+
+@import '_custom_variables.scss';
diff --git a/themes/default/styles/_themed_bootstrap_variables.scss b/themes/default/styles/_themed_bootstrap_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/themes/default/styles/_themed_custom_variables.scss b/themes/default/styles/_themed_custom_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/themes/mantis/app/+home-page/home-news/home-news.component.html b/themes/mantis/app/+home-page/home-news/home-news.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..4da3ae12f77e423b16169533f54b556c6214f4cc
--- /dev/null
+++ b/themes/mantis/app/+home-page/home-news/home-news.component.html
@@ -0,0 +1,21 @@
+<div class="jumbotron jumbotron-fluid">
+  <div class="d-flex flex-wrap">
+    <div>
+      <h1 class="display-3">DSpace 7</h1>
+      <p class="lead">DSpace is the world leading open source repository platform that enables
+        organisations to:</p>
+    </div>
+  </div>
+  <ul>
+    <li>easily ingest documents, audio, video, datasets and their corresponding Dublin Core
+      metadata
+    </li>
+    <li>open up this content to local and global audiences, thanks to the OAI-PMH interface and
+      Google Scholar optimizations
+    </li>
+    <li>issue permanent urls and trustworthy identifiers, including optional integrations with
+      handle.net and DataCite DOI
+    </li>
+  </ul>
+  <p>Join an international community of <A HREF="https://wiki.duraspace.org/display/DSPACE/DSpace+Positioning" TARGET="_NEW">leading institutions using DSpace</A>.</p>
+</div>
diff --git a/themes/mantis/app/+home-page/home-news/home-news.component.scss b/themes/mantis/app/+home-page/home-news/home-news.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c693e9a493831125617a5931da4ede649bdf37fa
--- /dev/null
+++ b/themes/mantis/app/+home-page/home-news/home-news.component.scss
@@ -0,0 +1,15 @@
+@import 'src/app/+home-page/home-news/home-news.component.scss';
+$home-news-link-color: $green !default;
+$home-news-link-color: darken($home-news-link-color, 15%) !default;
+
+.jumbotron {
+  background-color: transparent;
+}
+
+a {
+  color: $home-news-link-color;
+
+  @include hover {
+    color: $home-news-link-color;
+  }
+}
diff --git a/themes/mantis/app/+home-page/home-page.component.html b/themes/mantis/app/+home-page/home-page.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..43edbee9ca293dd26764ca1af423ab1b06f92d1e
--- /dev/null
+++ b/themes/mantis/app/+home-page/home-page.component.html
@@ -0,0 +1,10 @@
+<div class="background-image">
+  <div class="container">
+    <ds-home-news></ds-home-news>
+    <ds-search-form class="d-block pb-3" [inPlaceSearch]="false" [large]="true" [brandColor]="'success'"></ds-search-form>
+  </div>
+  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
+</div>
+<div class="container pt-3">
+  <ds-top-level-community-list></ds-top-level-community-list>
+</div>
diff --git a/themes/mantis/app/+home-page/home-page.component.scss b/themes/mantis/app/+home-page/home-page.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..64bd786cd5934c6750fa245eb4b10498d035c1b1
--- /dev/null
+++ b/themes/mantis/app/+home-page/home-page.component.scss
@@ -0,0 +1,52 @@
+@import 'src/app/+home-page/home-page.component.scss';
+
+div.background-image {
+    color: white;
+    background-color: $info;
+    position: relative;
+    background-position-y: -200px;
+    background-image: url('/assets/images/banner.jpg');
+    background-size: cover;
+    @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+        background-position-y: 0;
+    }
+
+    .container {
+        position: relative;
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+
+        &:before, &:after {
+            content: '';
+            display: block;
+            width: $banner-background-gradient-width;
+            height: 100%;
+            top: 0;
+            position: absolute;
+        }
+
+        &:before {
+            background: linear-gradient(to left, $banner-text-background, transparent);
+            left: -$banner-background-gradient-width;
+
+        }
+
+        &:after {
+            background: linear-gradient(to right, $banner-text-background, transparent);
+            right: -$banner-background-gradient-width;
+        }
+
+        background-color: $banner-text-background;
+    }
+
+
+    small.credits {
+        a {
+            color: inherit;
+        }
+
+        opacity: 0.3;
+        position: absolute;
+        right: $spacer;
+        bottom: 0;
+    }
+}
diff --git a/themes/mantis/app/+item-page/simple/item-page.component.html b/themes/mantis/app/+item-page/simple/item-page.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..472df7c78ed2851983308f6f97e7308e96ed645d
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-page.component.html
@@ -0,0 +1,9 @@
+<div *ngVar="(itemRD$ | async) as itemRD">
+  <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
+    <div *ngIf="itemRD?.payload as item">
+      <ds-item-type-switcher [object]="item" [viewMode]="viewMode"></ds-item-type-switcher>
+    </div>
+  </div>
+  <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
+  <ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+</div>
diff --git a/themes/mantis/app/+item-page/simple/item-types/journal-issue/journal-issue.component.html b/themes/mantis/app/+item-page/simple/item-types/journal-issue/journal-issue.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..a25a474eb0a804621bff3fb1c1d6f33eed7a4d3b
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/journal-issue/journal-issue.component.html
@@ -0,0 +1,73 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                  {{'journalissue.page.titleprefix' | translate}}
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['dc.title'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.title']"
+                                                    [label]="'journalissue.page.journal-title'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.identifier.number']"
+                                                    [label]="'journalissue.page.number'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.identifier.issn']"
+                                                    [label]="'journalissue.page.journal-issn'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.issuedate']"
+                                                    [label]="'journalissue.page.issuedate'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.identifier.description']"
+                                                    [label]="'journalissue.page.description'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalissue.identifier.keyword']"
+                                                    [label]="'journalissue.page.keyword'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(volumes$ | async) || (publications$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="volumes$ | async">
+                <ds-related-items
+                        [items]="volumes$ | async"
+                        [label]="'relationships.isSingleVolumeOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="publications$ | async">
+                <ds-related-items
+                        [items]="publications$ | async"
+                        [label]="'relationships.isPublicationOfJournalIssue' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/themes/mantis/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss b/themes/mantis/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7ce24acc15823eb8ba3f168b5171e641f8bdb175
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss
@@ -0,0 +1,30 @@
+@import 'src/app/+item-page/simple/item-types/journal-issue/journal-issue.component.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}
diff --git a/themes/mantis/app/+item-page/simple/item-types/journal-volume/journal-volume.component.html b/themes/mantis/app/+item-page/simple/item-types/journal-volume/journal-volume.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..c20e9a775a388604f01f330f12b3ac85e24263ec
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/journal-volume/journal-volume.component.html
@@ -0,0 +1,62 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                  {{'journalvolume.page.titleprefix' | translate}}
+                  <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['dc.title'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.identifier.volume']"
+                                                    [label]="'journalvolume.page.volume'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.issuedate']"
+                                                    [label]="'journalvolume.page.issuedate'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.identifier.description']"
+                                                    [label]="'journalvolume.page.description'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(journals$ | async) || (issues$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="journals$ | async">
+                <ds-related-items
+                        [items]="journals$ | async"
+                        [label]="'relationships.isSingleJournalOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="issues$ | async">
+                <ds-related-items
+                        [items]="issues$ | async"
+                        [label]="'relationships.isIssueOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/themes/mantis/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss b/themes/mantis/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ab1bc700b1907613c7706126fe1aaf3cf32730d3
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss
@@ -0,0 +1,30 @@
+@import 'src/app/+item-page/simple/item-types/journal-volume/journal-volume.component.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}
diff --git a/themes/mantis/app/+item-page/simple/item-types/journal/journal.component.html b/themes/mantis/app/+item-page/simple/item-types/journal/journal.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef827af590c60be30275f1f38beb3a2406279078
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/journal/journal.component.html
@@ -0,0 +1,67 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                  {{'journal.page.titleprefix' | translate}}
+                  <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['dc.title'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+
+                        <ds-generic-item-page-field class="item-page-fields" [item]="item"
+                                                    [fields]="['journal.identifier.issn']"
+                                                    [label]="'journal.page.issn'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field class="item-page-fields" [item]="item"
+                                                    [fields]="['journal.publisher']"
+                                                    [label]="'journal.page.publisher'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.contributor.editor']"
+                                                    [label]="'journal.page.editor'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field class="item-page-fields" [item]="item"
+                                                    [fields]="['journal.identifier.description']"
+                                                    [label]="'journal.page.description'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="volumes$ | async">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="volumes$ | async">
+                <ds-related-items
+                        [items]="volumes$ | async"
+                        [label]="'relationships.isVolumeOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="container search-container">
+        <h3 class="h2">{{"item.page.journal.search.title" | translate}}</h3>
+    </div>
+    <ds-related-entities-search [item]="item"
+                                [relationType]="'isJournalOfPublication'">
+    </ds-related-entities-search>
+</div>
diff --git a/themes/mantis/app/+item-page/simple/item-types/journal/journal.component.scss b/themes/mantis/app/+item-page/simple/item-types/journal/journal.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6d97cbf5c35168c9143fdffae59b5a722d642f83
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/journal/journal.component.scss
@@ -0,0 +1,38 @@
+@import 'src/app/+item-page/simple/item-types/journal/journal.component.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+
+    .search-container {
+        margin-bottom: $spacer;
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+            width: 100%;
+            max-width: none;
+        }
+    }
+}
diff --git a/themes/mantis/app/+item-page/simple/item-types/orgunit/orgunit.component.html b/themes/mantis/app/+item-page/simple/item-types/orgunit/orgunit.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6bb925c93f1a4fd417ca3292faa7dadb02910c62
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/orgunit/orgunit.component.html
@@ -0,0 +1,76 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"
+                                  [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                  {{'orgunit.page.titleprefix' | translate}}
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['orgunit.identifier.name'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.city']"
+                                                    [label]="'orgunit.page.city'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.country']"
+                                                    [label]="'orgunit.page.country'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.id']"
+                                                    [label]="'orgunit.page.id'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                      <ds-generic-item-page-field [item]="item"
+                                                  [fields]="['orgunit.identifier.dateestablished']"
+                                                  [label]="'orgunit.page.dateestablished'">
+                      </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['orgunit.identifier.description']"
+                                                    [label]="'orgunit.page.description'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(people$ | async) || (projects$ | async) || (publications$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="people$ | async">
+                <ds-related-items
+                        [items]="people$ | async"
+                        [label]="'relationships.isPersonOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="projects$ | async">
+                <ds-related-items
+                        [items]="projects$ | async"
+                        [label]="'relationships.isProjectOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="publications$ | async">
+                <ds-related-items
+                        [items]="publications$ | async"
+                        [label]="'relationships.isPublicationOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/themes/mantis/app/+item-page/simple/item-types/orgunit/orgunit.component.scss b/themes/mantis/app/+item-page/simple/item-types/orgunit/orgunit.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5b2bdb0382717852ad7e355bd89cabb2f1ecf19f
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/orgunit/orgunit.component.scss
@@ -0,0 +1,30 @@
+@import 'src/app/+item-page/simple/item-types/orgunit/orgunit.component.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}
diff --git a/themes/mantis/app/+item-page/simple/item-types/person/person.component.html b/themes/mantis/app/+item-page/simple/item-types/person/person.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..54d7962b977548b11eef18d7335005f33b7d5ab5
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/person/person.component.html
@@ -0,0 +1,85 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"
+                                  [defaultImage]="'assets/images/person-placeholder.svg'"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                  {{'person.page.titleprefix' | translate}}<ds-metadata-values
+                            [mdValues]="item?.allMetadata(['dc.contributor.author'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.email']"
+                                                    [label]="'person.page.email'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.orcid']"
+                                                    [label]="'person.page.orcid'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.birthdate']"
+                                                    [label]="'person.page.birthdate'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.staffid']"
+                                                    [label]="'person.page.staffid'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.jobtitle']"
+                                                    [label]="'person.page.jobtitle'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.lastname']"
+                                                    [label]="'person.page.lastname'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['person.identifier.firstname']"
+                                                    [label]="'person.page.firstname'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(projects$ | async) || (orgUnits$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="projects$ | async">
+                <ds-related-items
+                        [items]="projects$ | async"
+                        [label]="'relationships.isProjectOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="orgUnits$ | async">
+                <ds-related-items
+                        [items]="orgUnits$ | async"
+                        [label]="'relationships.isOrgUnitOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
+<div>
+    <div class="container search-container">
+        <h3 class="h2">{{"item.page.person.search.title" | translate}}</h3>
+    </div>
+<ds-related-entities-search [item]="item"
+                            [relationType]="'isAuthorOfPublication'">
+</ds-related-entities-search>
+</div>
diff --git a/themes/mantis/app/+item-page/simple/item-types/person/person.component.scss b/themes/mantis/app/+item-page/simple/item-types/person/person.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3b454aab0e81ecda662544377df6534089cf94f2
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/person/person.component.scss
@@ -0,0 +1,38 @@
+@import 'src/app/+item-page/simple/item-types/person/person.component.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+
+    .search-container {
+        margin-bottom: $spacer;
+        @media screen and (max-width: map-get($grid-breakpoints, lg)) {
+            width: 100%;
+            max-width: none;
+        }
+    }
+}
diff --git a/themes/mantis/app/+item-page/simple/item-types/project/project.component.html b/themes/mantis/app/+item-page/simple/item-types/project/project.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..aa4a107247a5a82cfe9b032957ec0f701823898a
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/project/project.component.html
@@ -0,0 +1,85 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"
+                                  [defaultImage]="'assets/images/project-placeholder.svg'"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <h2 class="item-page-title-field">
+                  {{'project.page.titleprefix' | translate}}
+                    <ds-metadata-values
+                            [mdValues]="item?.allMetadata(['project.identifier.name'])"></ds-metadata-values>
+                </h2>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                      <ds-metadata-representation-list
+                                                  [label]="'project.page.contributor' | translate"
+                                                  [representations]="contributors$ | async">
+                      </ds-metadata-representation-list>
+                      <ds-generic-item-page-field [item]="item"
+                                                  [fields]="['project.identifier.funder']"
+                                                  [label]="'project.page.funder'">
+                      </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.status']"
+                                                    [label]="'project.page.status'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.expectedcompletion']"
+                                                    [label]="'project.page.expectedcompletion'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                      <ds-generic-item-page-field [item]="item"
+                                                  [fields]="['project.identifier.id']"
+                                                  [label]="'project.page.id'">
+                      </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.description']"
+                                                    [label]="'project.page.description'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['project.identifier.keyword']"
+                                                    [label]="'project.page.keyword'">
+                        </ds-generic-item-page-field>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(people$ | async) || (publications$ | async) || (orgUnits$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="people$ | async">
+                <ds-related-items
+                        [items]="people$ | async"
+                        [label]="'relationships.isPersonOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="publications$ | async">
+                <ds-related-items
+                        [items]="publications$ | async"
+                        [label]="'relationships.isPublicationOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="orgUnits$ | async">
+                <ds-related-items
+                        [items]="orgUnits$ | async"
+                        [label]="'relationships.isOrgUnitOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
+
diff --git a/themes/mantis/app/+item-page/simple/item-types/project/project.component.scss b/themes/mantis/app/+item-page/simple/item-types/project/project.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9c9aa9c629931071328255060cdd0926e1a368b7
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/project/project.component.scss
@@ -0,0 +1,30 @@
+@import 'src/app/+item-page/simple/item-types/project/project.component.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}
diff --git a/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.html b/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6b6f484183af3e368869446a2bd21efc99a3a8a1
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.html
@@ -0,0 +1,83 @@
+<div class="top-item-page">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-12 col-md-2 d-flex flex-md-column justify-content-between">
+                <ds-metadata-field-wrapper>
+                    <ds-thumbnail [thumbnail]="this.item.getThumbnail() | async"></ds-thumbnail>
+                </ds-metadata-field-wrapper>
+                <div>
+                    <a class="btn btn-secondary"
+                       [routerLink]="['/items/' + item.id + '/full']">
+                        {{"item.page.link.full" | translate}}
+                    </a>
+                </div>
+            </div>
+            <div class="col-12 col-md-10">
+                <ds-item-page-title-field [item]="item"></ds-item-page-title-field>
+                <div class="row">
+                    <div class="col-12 col-md-6">
+                        <ds-metadata-representation-list
+                                [label]="'relationships.isAuthorOf' | translate"
+                                [representations]="authors$ | async">
+                        </ds-metadata-representation-list>
+                        <ds-item-page-file-section [item]="item"></ds-item-page-file-section>
+                        <ds-item-page-date-field [item]="item"></ds-item-page-date-field>
+                        <ds-item-page-author-field *ngIf="!(authors$ | async)"
+                                                   [item]="item"></ds-item-page-author-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.title']"
+                                                    [label]="'publication.page.journal-title'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journal.identifier.issn']"
+                                                    [label]="'publication.page.journal-issn'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['journalvolume.identifier.name']"
+                                                    [label]="'publication.page.volume-title'">
+                        </ds-generic-item-page-field>
+                    </div>
+                    <div class="col-12 col-md-6">
+                        <ds-item-page-abstract-field [item]="item"></ds-item-page-abstract-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['dc.subject']"
+                                                    [separator]="','"
+                                                    [label]="'item.page.subject'">
+                        </ds-generic-item-page-field>
+                        <ds-generic-item-page-field [item]="item"
+                                                    [fields]="['dc.identifier.citation']"
+                                                    [label]="'item.page.citation'">
+                        </ds-generic-item-page-field>
+                        <ds-item-page-uri-field [item]="item"></ds-item-page-uri-field>
+                        <ds-item-page-collections [item]="item"></ds-item-page-collections>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="relationships-item-page" *ngIf="(projects$ | async) || (orgUnits$ | async) || (journalIssues$ | async)">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 col-md-4" *ngIf="projects$ | async">
+                <ds-related-items
+                        [items]="projects$ | async"
+                        [label]="'relationships.isProjectOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="orgUnits$ | async">
+                <ds-related-items
+                        [items]="orgUnits$ | async"
+                        [label]="'relationships.isOrgUnitOf' | translate">
+                </ds-related-items>
+            </div>
+            <div class="col-12 col-md-4" *ngIf="journalIssues$ | async">
+                <ds-related-items
+                        [items]="journalIssues$ | async"
+                        [label]="'relationships.isJournalIssueOf' | translate">
+                </ds-related-items>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss b/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f65d9a00d52b77d53ed9ff1e19e81470403c180e
--- /dev/null
+++ b/themes/mantis/app/+item-page/simple/item-types/publication/publication.component.scss
@@ -0,0 +1,30 @@
+@import 'src/app/+item-page/simple/item-types/publication/publication.component.scss';
+
+:host {
+    > * {
+        display: block;
+        padding-top: $content-spacing;
+        padding-bottom: $content-spacing;
+    }
+
+    .top-item-page {
+        background-color: $gray-100;
+        margin-top: -$content-spacing;
+    }
+
+    .relationships-item-page {
+        padding-bottom: $content-spacing - $spacer;
+    }
+
+    ds-metadata-field-wrapper {
+        @media screen and (max-width: map-get($grid-breakpoints, md)) {
+            flex: 1;
+            padding-right: $spacer/2;
+        }
+
+        ds-thumbnail {
+            display: block;
+            max-width: $thumbnail-max-width;
+        }
+    }
+}
diff --git a/themes/mantis/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html b/themes/mantis/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..86076dfd1038884e4f12d4f3e032a9b0861cd161
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
@@ -0,0 +1,9 @@
+<a *ngIf="isVisible | async" class="d-flex flex-row"
+                                                           [routerLink]="[getSearchLink()]"
+                                                           [queryParams]="addQueryParams" queryParamsHandling="merge">
+    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
+    <span class="filter-value px-1">{{filterValue.value}}</span>
+    <span class="float-right filter-value-count ml-auto">
+                        <span class="badge badge-primary badge-pill">{{filterValue.count}}</span>
+                    </span>
+</a>
\ No newline at end of file
diff --git a/themes/mantis/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html b/themes/mantis/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..bdb37cb52d8718f7b98569d3a8e122160d75673b
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
@@ -0,0 +1,8 @@
+<a *ngIf="isVisible | async" class="d-flex flex-row"
+   [routerLink]="[getSearchLink()]"
+   [queryParams]="changeQueryParams" queryParamsHandling="merge">
+    <span class="filter-value px-1">{{filterValue.value}}</span>
+    <span class="float-right filter-value-count ml-auto">
+                        <span class="badge badge-primary badge-pill">{{filterValue.count}}</span>
+                    </span>
+</a>
\ No newline at end of file
diff --git a/themes/mantis/app/+search-page/search-filters/search-filter/search-filter.component.html b/themes/mantis/app/+search-page/search-filters/search-filter/search-filter.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..850447a39e339b34c88ab5feeead58eb4dfb5a69
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-filters/search-filter/search-filter.component.html
@@ -0,0 +1,7 @@
+<div class="facet-filter d-block mb-3 px-3 py-2" *ngIf="active$ | async">
+  <div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fas float-right text-info"
+                                                                                                                                                         [ngClass]="(collapsed$ | async) ? 'fa-caret-down' : 'fa-caret-up'"></span></div>
+  <div [@slide]="(collapsed$ | async) ? 'collapsed' : 'expanded'"  (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : closed}">
+    <ds-search-facet-filter-wrapper [filterConfig]="filter" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-filter-wrapper>
+  </div>
+</div>
diff --git a/themes/mantis/app/+search-page/search-filters/search-filter/search-filter.component.scss b/themes/mantis/app/+search-page/search-filters/search-filter/search-filter.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8e9b1d32b18abd31279fa47f1bb10f67632664b2
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-filters/search-filter/search-filter.component.scss
@@ -0,0 +1,10 @@
+@import 'src/app/+search-page/search-filters/search-filter/search-filter.component.scss';
+
+.facet-filter {
+    background-color: map-get($theme-colors, light);
+    border-radius: $border-radius;
+
+    h5 {
+       font-size: 1.1rem
+    }
+}
diff --git a/themes/mantis/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss b/themes/mantis/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..42b8e0205b3d8b57bd20ff42898ed9a0e5df1d45
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss
@@ -0,0 +1,5 @@
+@import 'src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss';
+
+::ng-deep .noUi-connect {
+    background: $info;
+}
diff --git a/themes/mantis/app/+search-page/search-filters/search-filters.component.html b/themes/mantis/app/+search-page/search-filters/search-filters.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b7bb1bf50f3a56c69ea2e02d6a7a4604ab5b75b8
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-filters/search-filters.component.html
@@ -0,0 +1,7 @@
+<h3>{{"search.filters.head" | translate}}</h3>
+<div *ngIf="(filters | async)?.hasSucceeded">
+  <div *ngFor="let filter of (filters | async)?.payload">
+    <ds-search-filter [filter]="filter" [inPlaceSearch]="inPlaceSearch"></ds-search-filter>
+  </div>
+</div>
+<a class="btn btn-primary" [routerLink]="[getSearchLink()]" [queryParams]="clearParams | async" queryParamsHandling="merge" role="button">{{"search.filters.reset" | translate}}</a>
diff --git a/themes/mantis/app/+search-page/search-settings/search-settings.component.html b/themes/mantis/app/+search-page/search-settings/search-settings.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..1321ced928faf8525ed8e33b24ee3e07c8fb5c42
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-settings/search-settings.component.html
@@ -0,0 +1,24 @@
+<ng-container *ngVar="(searchOptions$ | async) as config">
+    <h3>{{ 'search.sidebar.settings.title' | translate}}</h3>
+    <div *ngIf="config?.sort" class="setting-option result-order-settings mb-3 px-3 py-2">
+    <h5 class="mb-0">{{ 'search.sidebar.settings.sort-by' | translate}}</h5>
+    <select class="form-control my-2" (change)="reloadOrder($event)">
+        <option *ngFor="let sortOption of searchOptionPossibilities"
+                [value]="sortOption.field + ',' + sortOption.direction.toString()"
+                [selected]="sortOption.field === config?.sort.field && sortOption.direction === (config?.sort.direction)? 'selected': null">
+            {{'sorting.' + sortOption.field + '.' + sortOption.direction | translate}}
+        </option>
+    </select>
+    </div>
+
+    <div class="setting-option page-size-settings mb-3 px-3 py-2">
+        <h5 class="mb-0">{{ 'search.sidebar.settings.rpp' | translate}}</h5>
+        <select class="form-control my-2" (change)="reloadRPP($event)">
+            <option *ngFor="let pageSizeOption of config?.pagination.pageSizeOptions"
+                    [value]="pageSizeOption"
+                    [selected]="pageSizeOption === +config?.pagination.pageSize ? 'selected': null">
+                {{pageSizeOption}}
+            </option>
+        </select>
+    </div>
+</ng-container>
\ No newline at end of file
diff --git a/themes/mantis/app/+search-page/search-settings/search-settings.component.scss b/themes/mantis/app/+search-page/search-settings/search-settings.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..602c8ca4c333167a17b5c82d7e87bc1d2a3ac49e
--- /dev/null
+++ b/themes/mantis/app/+search-page/search-settings/search-settings.component.scss
@@ -0,0 +1,10 @@
+@import 'src/app/+search-page/search-settings/search-settings.component.scss';
+
+.setting-option {
+    background-color: map-get($theme-colors, light);
+    border-radius: $border-radius;
+    h5 {
+        font-size: 1.1rem
+    }
+}
+
diff --git a/themes/mantis/app/navbar/navbar.component.html b/themes/mantis/app/navbar/navbar.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..d06eceb22235606726c604a3c43655b056fd0c48
--- /dev/null
+++ b/themes/mantis/app/navbar/navbar.component.html
@@ -0,0 +1,16 @@
+<nav [ngClass]="{'open': !(menuCollapsed | async)}"
+     [@slideMobileNav]="!(windowService.isXsOrSm() | async) ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+     class="navbar navbar-light navbar-expand-md p-md-0 navbar-container">    <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
+    <div class="container">
+        <div class="reset-padding-md w-100">
+            <div id="collapsingNav">
+                <ul class="navbar-nav mr-auto shadow-none">
+                    <ng-container *ngFor="let section of (sections | async)">
+                        <ng-container
+                                *ngComponentOutlet="sectionComponents.get(section.id); injector: sectionInjectors.get(section.id);"></ng-container>
+                    </ng-container>
+                </ul>
+            </div>
+        </div>
+    </div>
+</nav>
diff --git a/themes/mantis/app/navbar/navbar.component.scss b/themes/mantis/app/navbar/navbar.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1417acff596d46af9f86e89393fed033d188d11e
--- /dev/null
+++ b/themes/mantis/app/navbar/navbar.component.scss
@@ -0,0 +1,7 @@
+@import 'src/app/navbar/navbar.component.scss';
+
+nav.navbar {
+    border-bottom: 5px $green solid;
+}
+
+
diff --git a/themes/mantis/app/shared/search-form/search-form.component.html b/themes/mantis/app/shared/search-form/search-form.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ea2f54813ee82ee429ee4fa6dc09894150cf15d5
--- /dev/null
+++ b/themes/mantis/app/shared/search-form/search-form.component.html
@@ -0,0 +1,21 @@
+<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="row" action="/search">
+    <div *ngIf="isNotEmpty(scopes)" class="col-12 col-sm-3">
+        <select [(ngModel)]="scope" name="scope" class="form-control" aria-label="Search scope"
+                (change)="onScopeChange($event.target.value)">
+            <option value>{{'search.form.search_dspace' | translate}}</option>
+            <option *ngFor="let scopeOption of scopes"
+                    [value]="scopeOption.id">{{scopeOption?.name ? scopeOption.name : 'search.form.search_dspace' | translate}}</option>
+        </select>
+    </div>
+    <div [ngClass]="{'col-sm-9': isNotEmpty(scopes)}" class="col-12">
+        <div class="form-group input-group"
+             [ngClass]="{'input-group-lg': large}">
+            <input type="text" [(ngModel)]="query" name="query" class="form-control"
+                   aria-label="Search input">
+            <span class="input-group-append">
+            <button type="submit"
+                    class="search-button btn btn-{{brandColor}}">{{ ('search.form.search' | translate) }}</button>
+        </span>
+        </div>
+    </div>
+</form>
diff --git a/themes/mantis/styles/_themed_bootstrap_variables.scss b/themes/mantis/styles/_themed_bootstrap_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e606502e098e9738572bc5a86a00d1355e790a19
--- /dev/null
+++ b/themes/mantis/styles/_themed_bootstrap_variables.scss
@@ -0,0 +1,19 @@
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
+
+$font-family-sans-serif: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$gray-100: #e8ebf3 !default; // #eee
+$gray-800: #444444 !default; // #444
+
+$navbar-dark-color: #FFFFFF;
+
+/* Reassign color vars to semantic color scheme */
+$blue: #43515f !default;
+$green: #92C642 !default;
+$cyan: #2e80a3 !default;
+$yellow: #ec9433 !default;
+$red: #CF4444 !default;
+$dark: #43515f !default;
+
+$body-color: $gray-800 !default;
+
+$yiq-contrasted-threshold:  170 !default;
diff --git a/themes/mantis/styles/_themed_custom_variables.scss b/themes/mantis/styles/_themed_custom_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1be25e953f2e9023d88a2328d0da5a9dc5889dea
--- /dev/null
+++ b/themes/mantis/styles/_themed_custom_variables.scss
@@ -0,0 +1,2 @@
+$banner-text-background: rgba(0, 0, 0, 0.35);
+$banner-background-gradient-width: 300px;
diff --git a/webpack.config.js b/webpack.config.js
index 6312cf360583c00b1330c5f639d7189e53cb9dd3..78ca2d98dc84980bc35a7a2963f3632a23736f1d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,46 +1,45 @@
 const webpackMerge = require('webpack-merge');
-const commonPartial = require('./webpack/webpack.common');
-const clientPartial = require('./webpack/webpack.client');
-const { getServerWebpackPartial } = require('./webpack/webpack.server');
-const prodPartial = require('./webpack/webpack.prod');
 
-const {
-  getAotPlugin
-} = require('./webpack/webpack.aot');
+const prodPartial = require('./webpack/webpack.prod');
 
-module.exports = function(env, options) {
+module.exports = function (env, options) {
     env = env || {};
-  if (env.aot) {
-    console.log(`Running build for ${env.client ? 'client' : 'server'} with AoT Compilation`)
-  }
-
-  let serverPartial = getServerWebpackPartial(env.aot);
-
-  let serverConfig = webpackMerge({}, commonPartial, serverPartial, {
-    plugins: [
-      getAotPlugin('server', !!env.aot)
-    ]
-  });
-
-  let clientConfig = webpackMerge({}, commonPartial, clientPartial, {
-    plugins: [
-      getAotPlugin('client', !!env.aot)
-    ]
-  });
-  if (options.mode === 'production') {
-    serverConfig = webpackMerge({}, serverConfig, prodPartial);
-    clientConfig = webpackMerge({}, clientConfig, prodPartial);
-  }
-
-  const configs = [];
-
-  if (!env.aot) {
-    configs.push(clientConfig, serverConfig);
-  } else if (env.client) {
-    configs.push(clientConfig);
-  } else if (env.server) {
-    configs.push(serverConfig);
-  }
-
-  return configs;
+    const commonPartial = require('./webpack/webpack.common')(env);
+    const clientPartial = require('./webpack/webpack.client')(env);
+    const {getAotPlugin} = require('./webpack/webpack.aot')(env);
+    const {getServerWebpackPartial} = require('./webpack/webpack.server')(env);
+
+    if (env.aot) {
+        console.log(`Running build for ${env.client ? 'client' : 'server'} with AoT Compilation`)
+    }
+
+    let serverPartial = getServerWebpackPartial(env.aot);
+
+    let serverConfig = webpackMerge({}, commonPartial, serverPartial, {
+        plugins: [
+            getAotPlugin('server', !!env.aot)
+        ]
+    });
+
+    let clientConfig = webpackMerge({}, commonPartial, clientPartial, {
+        plugins: [
+            getAotPlugin('client', !!env.aot)
+        ]
+    });
+    if (options.mode === 'production') {
+        serverConfig = webpackMerge({}, serverConfig, prodPartial);
+        clientConfig = webpackMerge({}, clientConfig, prodPartial);
+    }
+
+    const configs = [];
+
+    if (!env.aot) {
+        configs.push(clientConfig, serverConfig);
+    } else if (env.client) {
+        configs.push(clientConfig);
+    } else if (env.server) {
+        configs.push(serverConfig);
+    }
+
+    return configs;
 };
diff --git a/webpack/helpers.js b/webpack/helpers.js
index fdc005f1896cd6e30ba0f83044153ad88cbcf510..fafbbaff5e4dfa9b83dd731b546ed3355beaba3f 100644
--- a/webpack/helpers.js
+++ b/webpack/helpers.js
@@ -1,13 +1,109 @@
-const {
-  join,
-  resolve
-} = require('path');
+const path = require('path');
+const fs = require('fs');
 
-function root(path) {
-  return resolve(__dirname, '..', path);
+
+const projectRoot = (relativePath) => {
+  return path.resolve(__dirname, '..', relativePath);
+};
+
+const srcPath = projectRoot('src');
+
+const buildRoot = (relativePath, env) => {
+  if (env.aot) {
+    return path.resolve(projectRoot('./build'), relativePath);
+  } else {
+    return path.resolve(projectRoot('src'), relativePath);
+  }
+};
+
+//TODO refactor to share between this and config.ts.
+const getThemeName = () => {
+  let defaultCfg = require(projectRoot('config/environment.default.js'));
+  let envConfigFile;
+  let envConfigOverride = {};
+
+  switch (process.env.NODE_ENV) {
+    case 'prod':
+    case 'production':
+      // webpack.prod.dspace-angular-config.ts defines process.env.NODE_ENV = 'production'
+      envConfigFile = projectRoot('config/environment.prod.js');
+      break;
+    case 'test':
+      // webpack.test.dspace-angular-config.ts defines process.env.NODE_ENV = 'test'
+      envConfigFile = projectRoot('config/environment.test.js');
+      break;
+    default:
+      // if not using webpack.prod.dspace-angular-config.ts or webpack.test.dspace-angular-config.ts, it must be development
+      envConfigFile = projectRoot('config/environment.dev.js');
+  }
+
+  if (envConfigFile) {
+    try {
+      envConfigOverride = require(envConfigFile);
+    } catch (e) {
+    }
+  }
+
+  return Object.assign({}, defaultCfg.theme, envConfigOverride.theme).name;
 }
 
+const theme = getThemeName();
+
+let themePath;
+
+if (theme !== null && theme !== undefined) {
+  themePath = path.normalize(path.join(__dirname, '..', 'themes', theme));
+}
+else {
+  themePath = srcPath;
+}
+
+const globalCSSImports = (env) => { return [
+  buildRoot('styles/_variables.scss', env),
+  buildRoot('styles/_mixins.scss', env),
+]};
+
+const getThemedPath = (componentPath, ext) => {
+  const parsedPath = path.parse(componentPath);
+  const relativePath = path.relative(srcPath, parsedPath.dir);
+  return path.join(themePath, relativePath, `${parsedPath.name}.${ext}`);
+};
+
+const themedTest = (origPath, extension) => {
+  if (/\.component.ts$/.test(origPath)) { // only match components
+    const themedPath = getThemedPath(origPath, extension);
+    return fs.existsSync(themedPath);
+  } else {
+    return false;
+  }
+};
+
+const themedUse = (resource, extension) => {
+  const origPath = path.parse(resource);
+  let themedPath = getThemedPath(resource, extension);
+
+  /* Make sure backslashes are escaped twice, because the replace unescapes those again */
+  themedPath = themedPath.replace(/\\/g, '\\\\');
+
+  return [
+    {
+      loader: 'string-replace-loader',
+      options: {
+        search: `\.\/${origPath.name}\.${extension}`,
+        replace: themedPath,
+        flags: 'g'
+      }
+    }
+  ]
+};
+
 module.exports = {
-  root: root,
-  join: join
+  projectRoot,
+  buildRoot,
+  theme: theme,
+  themePath,
+  getThemedPath,
+  themedTest,
+  themedUse,
+  globalCSSImports
 };
diff --git a/webpack/webpack.aot.js b/webpack/webpack.aot.js
index 2c2366a23e00a06c3c09380b46acbd7707d13150..c4b970892f2aafd1e4c5df08599cdc2c08abcd30 100644
--- a/webpack/webpack.aot.js
+++ b/webpack/webpack.aot.js
@@ -1,35 +1,37 @@
 const {
-  root
+    buildRoot
 } = require('./helpers');
 
 const {
-  AngularCompilerPlugin
+    AngularCompilerPlugin
 } = require('@ngtools/webpack');
 
-const tsconfigs = {
-  client: root('./src/tsconfig.browser.json'),
-  server: root('./src/tsconfig.server.json')
-};
+module.exports = (env) => {
+    const tsconfigs = {
+        client: buildRoot('./tsconfig.browser.json', env),
+        server: buildRoot('./tsconfig.server.json', env)
+    };
 
-const aotTsconfigs = {
-  client: root('./src/tsconfig.browser.json'),
-  server: root('./src/tsconfig.server.aot.json')
-};
+    const aotTsconfigs = {
+        client: buildRoot('./tsconfig.browser.json', env),
+        server: buildRoot('./tsconfig.server.aot.json', env)
+    };
 
-/**
- * Generates a AotPlugin for @ngtools/webpack
- *
- * @param {string} platform Should either be client or server
- * @param {boolean} aot Enables/Disables AoT Compilation
- * @returns {AotPlugin} Configuration of AotPlugin
- */
-function getAotPlugin(platform, aot) {
-  return new AngularCompilerPlugin({
-    tsConfigPath: aot ? aotTsconfigs[platform] : tsconfigs[platform],
-    skipCodeGeneration: !aot
-  });
-}
+    /**
+     * Generates a AotPlugin for @ngtools/webpack
+     *
+     * @param {string} platform Should either be client or server
+     * @param {boolean} aot Enables/Disables AoT Compilation
+     * @returns {AotPlugin} Configuration of AotPlugin
+     */
+    function getAotPlugin(platform, aot) {
+        return new AngularCompilerPlugin({
+            tsConfigPath: aot ? aotTsconfigs[platform] : tsconfigs[platform],
+            skipCodeGeneration: !aot
+        });
+    }
 
-module.exports = {
-  getAotPlugin: getAotPlugin
+    return {
+        getAotPlugin: getAotPlugin
+    }
 };
diff --git a/webpack/webpack.client.js b/webpack/webpack.client.js
index 20dcbddb2082d61d4775be8d72b8a5f0c20a91dc..ce49f60ed0b0cfbb0ea10694237ea1f4ccda345b 100644
--- a/webpack/webpack.client.js
+++ b/webpack/webpack.client.js
@@ -2,23 +2,26 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ScriptExtPlugin = require('script-ext-html-webpack-plugin');
 
 const {
-  root
+  projectRoot,
+  buildRoot
 } = require('./helpers');
 
-module.exports = {
-  entry: root('./src/main.browser.ts'),
-  output: {
-    filename: 'client.js'
-  },
-  target: 'web',
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: root('./src/index.html'),
-      output: root('dist'),
-      inject: 'head'
-    }),
-    new ScriptExtPlugin({
-      defaultAttribute: 'defer'
-    })
-  ]
-};
+module.exports = (env) => {
+  return {
+    entry: buildRoot('./main.browser.ts', env),
+    output: {
+      filename: 'client.js'
+    },
+    target: 'web',
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: buildRoot('./index.html', env),
+        output: projectRoot('dist'),
+        inject: 'head'
+      }),
+      new ScriptExtPlugin({
+        defaultAttribute: 'defer'
+      })
+    ]
+  };
+}
diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
index 7fb4656a156739e88d662c8ce8bfac0ca18fd950..028815d958b8e9b987c057177c66ea52348524c0 100644
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -1,110 +1,173 @@
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require('path');
+const fs = require('fs');
 const {
-    root,
-    join
+    projectRoot,
+    buildRoot,
+    globalCSSImports,
+    theme,
+    themePath,
+    themedTest,
+    themedUse
 } = require('./helpers');
 
-module.exports = {
+module.exports = (env) => {
+  let copyWebpackOptions = [{
+    from: path.join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
+    to: path.join('assets', 'fonts')
+  }, {
+    from: path.join(__dirname, '..', 'resources', 'images'),
+    to: path.join('assets', 'images')
+  }, {
+    from: path.join(__dirname, '..', 'resources', 'i18n'),
+    to: path.join('assets', 'i18n')
+  }
+  ];
+
+  const themeImages = path.join(themePath, 'resources', 'images');
+  if(theme && fs.existsSync(themeImages)) {
+    copyWebpackOptions.push({
+      from: themeImages,
+      to: path.join('assets', 'images')  ,
+      force: true,
+    });
+  }
+
+  return {
     mode: 'development',
     devtool: 'source-map',
-    resolve: {
-        extensions: ['.ts', '.js', '.json']
-    },
-    output: {
-        path: root('dist')
-    },
-    watchOptions: {
-        aggregateTimeout: 50,
-    },
-    node: {
-        fs: "empty",
-        module: "empty"
-    },
-    module: {
-        rules: [{
-            test: /\.ts$/,
-            loader: '@ngtools/webpack'
+        resolve: {
+            extensions: ['.ts', '.js', '.json']
+        },
+        output: {
+            path: projectRoot('dist')
         },
-            {
-                test: /\.css$/,
-                use: [{
-                    loader: 'to-string-loader',
-                    options: {
-                        sourceMap: true
-                    }
+        watchOptions: {
+            aggregateTimeout: 50,
+        },
+        node: {
+            fs: "empty",
+            module: "empty"
+        },
+        module: {
+            rules: [
+                {
+                    test: (filePath) => themedTest(filePath, 'scss'),
+                    use: (info) => themedUse(info.resource, 'scss')
                 },
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            sourceMap: true,
-                            modules: true
-                        }
-                    },
-                    {
-                        loader: 'postcss-loader',
-                        options: {
-                            sourceMap: true
+                {
+                    test: (filePath) => themedTest(filePath, 'html'),
+                    use: (info) => themedUse(info.resource, 'html')
+                },
+                {
+                    test: /\.ts$/,
+                    loader: '@ngtools/webpack'
+                },
+                {
+                    test: /\.css$/,
+                    use: [
+                        {
+                            loader: 'to-string-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                sourceMap: true,
+                                modules: true
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true
+                            }
                         }
-                    }
-                ]
-            },
-            {
-                test: /\.scss$/,
-                exclude: [/node_modules/,
-                    path.resolve(__dirname,  '..', 'src/styles/_exposed_variables.scss')
-                ],
-                use: [{
-                    loader: 'to-string-loader',
-                    options: {
-                        sourceMap: true
-                    }
-                }, {
-                    loader: 'raw-loader',
-                    options: {
-                        sourceMap: true
-                    }
+                    ]
                 },
-                    {
-                        loader: 'resolve-url-loader',
-                        options: {
-                            sourceMap: true
+                {
+                    test: /\.scss$/,
+                    exclude: [
+                        /node_modules/,
+                        buildRoot('styles/_exposed_variables.scss', env),
+                        buildRoot('styles/_variables.scss', env)
+                    ],
+                    use: [
+                        {
+                            loader: 'raw-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'resolve-url-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
+                            }
+                        },
+                        {
+                            loader: 'sass-resources-loader',
+                            options: {
+                                resources: globalCSSImports(env)
+                            },
                         }
-                    },
-                    {
-                        loader: 'sass-loader',
-                        options: {
-                            sourceMap: true
+                    ]
+                },
+                {
+                    test: /(_exposed)?_variables.scss$/,
+                    exclude: [/node_modules/],
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                sourceMap: true,
+                                modules: true
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'resolve-url-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
+                            }
                         }
-                    }
-                ]
-            },
-            {
-                test: /_exposed_variables.scss$/,
-                exclude: /node_modules/,
-                use: [{
-                    loader: "css-loader" // translates CSS into CommonJS
-                }, {
-                    loader: "sass-loader" // compiles Sass to CSS
-                }]
-            },
-            {
-                test: /\.html$/,
-                loader: 'raw-loader'
-            }
+                    ]
+                },
+                {
+                    test: /\.html$/,
+                    loader: 'raw-loader'
+                }
+            ]
+        },
+        plugins: [
+            new CopyWebpackPlugin(copyWebpackOptions)
         ]
-    },
-    plugins: [
-        new CopyWebpackPlugin([{
-            from: join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
-            to: join('assets', 'fonts')
-        }, {
-            from: join(__dirname, '..', 'resources', 'images'),
-            to: join('assets', 'images')
-        }, {
-            from: join(__dirname, '..', 'resources', 'i18n'),
-            to: join('assets', 'i18n')
-        }])
-    ]
-
+    }
 };
diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js
index 35a683bb96082aff93ccef7bab120b7a949ef50b..df0d6274d941758499845e76423de2d11ab90632 100644
--- a/webpack/webpack.prod.js
+++ b/webpack/webpack.prod.js
@@ -6,70 +6,70 @@ const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const cssnano = require("cssnano");
 
 const {
-    root
+  projectRoot
 } = require('./helpers');
 
 module.exports = {
-    mode: 'production',
-    recordsOutputPath: root('webpack.records.json'),
-    plugins: [
-        new webpack.EnvironmentPlugin({
-            'process.env': {
-                'NODE_ENV': JSON.stringify('production'),
-                'AOT': true
-            }
-        }),
+  mode: 'production',
+  recordsOutputPath: projectRoot('webpack.records.json'),
+  plugins: [
+    new webpack.EnvironmentPlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('production'),
+        'AOT': true
+      }
+    }),
 
-        new BundleAnalyzerPlugin({
-            analyzerMode: 'disabled', // change it to `server` to view bundle stats
-            reportFilename: 'report.html',
-            generateStatsFile: true,
-            statsFilename: 'stats.json',
-        }),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'disabled', // change it to `server` to view bundle stats
+      reportFilename: 'report.html',
+      generateStatsFile: true,
+      statsFilename: 'stats.json',
+    }),
 
 
-        new CompressionPlugin({
-            asset: "[path].gz[query]",
-            algorithm: "gzip",
-            test: /\.js$|\.css$|\.html$/,
-            threshold: 10240,
-            minRatio: 0.8
-        })
+    new CompressionPlugin({
+      asset: "[path].gz[query]",
+      algorithm: "gzip",
+      test: /\.js$|\.css$|\.html$/,
+      threshold: 10240,
+      minRatio: 0.8
+    })
 
-    ],
-    optimization: {
-        minimizer: [
-            new UglifyJsPlugin({
-                uglifyOptions: {
-                    beautify: false,
-                    mangle: false,
-                    output: {
-                        comments: false
-                    },
-                    compress: {
-                        warnings: false,
-                        conditionals: false,
-                        unused: true,
-                        comparisons: true,
-                        sequences: true,
-                        dead_code: true,
-                        evaluate: true,
-                        if_return: true,
-                        join_vars: true,
-                        negate_iife: true
-                    },
-                    sourceMap: true
-                }
-            }),
-            new OptimizeCSSAssetsPlugin({
-              cssProcessor: cssnano,
-              cssProcessorOptions: {
-                discardComments: {
-                  removeAll: true,
-                }
-              },
-              safe: true
-            })
-        ]
-    },
+  ],
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          beautify: false,
+          mangle: false,
+          output: {
+            comments: false
+          },
+          compress: {
+            warnings: false,
+            conditionals: false,
+            unused: true,
+            comparisons: true,
+            sequences: true,
+            dead_code: true,
+            evaluate: true,
+            if_return: true,
+            join_vars: true,
+            negate_iife: true
+          },
+          sourceMap: true
+        }
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessor: cssnano,
+        cssProcessorOptions: {
+          discardComments: {
+            removeAll: true,
+          }
+        },
+        safe: true
+      })
+    ]
+  },
 };
diff --git a/webpack/webpack.server.js b/webpack/webpack.server.js
index ce0c52602a10c80c83167534edf5352cae1395e2..5e80a286a0399edb2326c37aca33568cd523f3b1 100644
--- a/webpack/webpack.server.js
+++ b/webpack/webpack.server.js
@@ -1,28 +1,30 @@
 var nodeExternals = require('webpack-node-externals');
 
 const {
-  root
+    buildRoot
 } = require('./helpers');
 
-module.exports = {
-  getServerWebpackPartial: function (aot) {
-    const entry = aot ? root('./src/main.server.aot.ts') : root('./src/main.server.ts');
-    return {
-      entry: entry,
-      output: {
-        filename: 'server.js'
-      },
-      target: 'node',
-      externals: [nodeExternals({
-        whitelist: [
-          /@angular/,
-          /@ng/,
-		      /angular2-text-mask/,
-      	  /ng2-file-upload/,
-      	  /angular-sortablejs/,
-      	  /sortablejs/,
-          /ngx/]
-      })],
+module.exports = (env) => {
+  return {
+    getServerWebpackPartial: function (aot) {
+      const entry = aot ? buildRoot('./main.server.aot.ts', env) : buildRoot('./main.server.ts', env);
+      return {
+        entry: entry,
+        output: {
+          filename: 'server.js'
+        },
+        target: 'node',
+        externals: [nodeExternals({
+          whitelist: [
+            /@angular/,
+            /@ng/,
+            /angular2-text-mask/,
+            /ng2-file-upload/,
+            /angular-sortablejs/,
+            /sortablejs/,
+            /ngx/]
+        })],
+      }
     }
   }
 };
diff --git a/webpack/webpack.test.js b/webpack/webpack.test.js
index 8c6760e377619cc22169ee9a3958c0cf2b828360..83e6e44e792e9fef1ed4e2a6f1aead2bcd9097a2 100644
--- a/webpack/webpack.test.js
+++ b/webpack/webpack.test.js
@@ -1,6 +1,12 @@
 const {
-  root
+    projectRoot,
+    buildRoot,
+    themedTest,
+    themedUse,
+    themePath,
+    globalCSSImports
 } = require('./helpers');
+const path = require('path');
 
 /**
  * Webpack Plugins
@@ -23,250 +29,288 @@ const ENV = process.env.ENV = process.env.NODE_ENV = 'test';
  *
  * See: http://webpack.github.io/docs/configuration.html#cli
  */
-module.exports = function (options) {
-  return {
-    mode: 'development',
-    /**
-     * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
-     *
-     * Do not change, leave as is or it wont work.
-     * See: https://github.com/webpack/karma-webpack#source-maps
-     */
-    devtool: 'source-map',
-
-    /**
-     * Options affecting the resolving of modules.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#resolve
-     */
-    resolve: {
-
-      /**
-       * An array of extensions that should be used to resolve modules.
-       *
-       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
-       */
-      extensions: ['.ts', '.js', '.json'],
-
-      /**
-       * Make sure root is src
-       */
-      modules: [root('src'), 'node_modules']
-
-    },
-
-    /**
-     * Options affecting the normal modules.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#module
-     *
-     * 'use:' revered back to 'loader:' as a temp. workaround for #1188
-     * See: https://github.com/AngularClass/angular2-webpack-starter/issues/1188#issuecomment-262872034
-     */
-    module: {
-
-      rules: [
-
+module.exports = function (env) {
+    return {
+        mode: 'development',
         /**
-         * Source map loader support for *.js files
-         * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
+         * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
          *
-         * See: https://github.com/webpack/source-map-loader
+         * Do not change, leave as is or it wont work.
+         * See: https://github.com/webpack/karma-webpack#source-maps
          */
-        {
-          enforce: 'pre',
-          test: /\.js$/,
-          loader: 'source-map-loader',
-          exclude: [/node_modules/],
-
-        },
+        devtool: 'source-map',
 
         /**
-         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+         * Options affecting the resolving of modules.
          *
-         * See: https://github.com/TypeStrong/ts-loader
+         * See: http://webpack.github.io/docs/configuration.html#resolve
          */
-        {
-            test: /\.tsx?$/,
-            loaders: [{
-              loader: 'ts-loader',
-              options: {
-                configFile: root('src/tsconfig.test.json'),
-                transpileOnly: true
-              }
-            },
-            'angular2-template-loader'
-          ],
-          exclude: [/\.e2e\.ts$/]
+        resolve: {
+
+            /**
+             * An array of extensions that should be used to resolve modules.
+             *
+             * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+             */
+            extensions: ['.ts', '.js', '.json'],
+
+            /**
+             * Make sure root is src
+             */
+            modules: [projectRoot('src'), 'node_modules']
+
         },
 
         /**
-         * CSS loader support for *.css files
-         * Returns file content as string
+         * Options affecting the normal modules.
+         *
+         * See: http://webpack.github.io/docs/configuration.html#module
          *
-         * See: https://github.com/webpack/css-loader
+         * 'use:' revered back to 'loader:' as a temp. workaround for #1188
+         * See: https://github.com/AngularClass/angular2-webpack-starter/issues/1188#issuecomment-262872034
          */
-        {
-          test: /\.css$/,
-          use: [{
-              loader: 'to-string-loader',
-              options: {
-                sourceMap: true
-              }
-            },
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: true
-              }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
+        module: {
+
+            rules: [
+
+                /**
+                 * Source map loader support for *.js files
+                 * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
+                 *
+                 * See: https://github.com/webpack/source-map-loader
+                 */
+                {
+                    test: (filePath) => themedTest(filePath, 'scss'),
+                    use: (info) => themedUse(info.resource, 'scss')
+                },
+                {
+                    test: (filePath) => themedTest(filePath, 'html'),
+                    use: (info) => themedUse(info.resource, 'html')
+                },
+                /**
+                 * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+                 *
+                 * See: https://github.com/TypeStrong/ts-loader
+                 */
+                {
+                    test: /\.tsx?$/,
+                    loaders: [{
+                        loader: 'ts-loader',
+                        options: {
+                            configFile: projectRoot('src/tsconfig.test.json'),
+                            transpileOnly: true
+                        }
+                    },
+                        'angular2-template-loader'
+                    ],
+                    exclude: [/\.e2e\.ts$/]
+                },
+
+                /**
+                 * CSS loader support for *.css files
+                 * Returns file content as string
+                 *
+                 * See: https://github.com/webpack/css-loader
+                 */
+                {
+                    test: /\.css$/,
+                    use: [{
+                        loader: 'to-string-loader',
+                        options: {
+                            sourceMap: true
+                        }
+                    },
+                        {
+                            loader: 'css-loader',
+                            options: {
                 sourceMap: true
-              }
-            }
-          ],
-          exclude: [root('src/index.html')]
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        }
+                    ],
+                },
+
+                /**
+                 * SASS loader support for *.css files
+                 * Returns file content as string
+                 *
+                 */
+                {
+                    test: /\.scss$/,
+                    exclude: [
+                        /node_modules/,
+                        buildRoot('styles/_exposed_variables.scss', env),
+                        buildRoot('styles/_variables.scss', env)
+                    ],
+                    use: [
+                        {
+                            loader: 'raw-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'resolve-url-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
+                            }
+                        },
+                        {
+                            loader: 'sass-resources-loader',
+                            options: {
+                                resources: globalCSSImports(env)
+                            },
+                        }
+                    ]
+                },
+                {
+                    test: /(_exposed)?_variables.scss$/,
+                    exclude: [/node_modules/],
+                    use: [
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                sourceMap: true,
+                                modules: true
+                            }
+                        },
+                        {
+                            loader: 'postcss-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'resolve-url-loader',
+                            options: {
+                                sourceMap: true
+                            }
+                        },
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                                includePaths: [projectRoot('./'), path.join(themePath, 'styles')]
+                            }
+                        }
+                    ]
+                },
+
+                /**
+                 * Raw loader support for *.html
+                 * Returns file content as string
+                 *
+                 * See: https://github.com/webpack/raw-loader
+                 */
+                {
+                    test: /\.html$/,
+                    loader: 'raw-loader',
+                    exclude: [projectRoot('src/index.html')]
+                },
+
+                /**
+                 * Instruments JS files with Istanbul for subsequent code coverage reporting.
+                 * Instrument only testing sources.
+                 *
+                 * See: https://github.com/deepsweet/istanbul-instrumenter-loader
+                 */
+                {
+                    enforce: 'post',
+                    test: /\.(js|ts)$/,
+                    loader: 'istanbul-instrumenter-loader',
+                    query: {
+                        esModules: true
+                    },
+                    include: projectRoot('src'),
+                    exclude: [
+                        /\.(e2e|spec)\.ts$/,
+                        /node_modules/
+                    ]
+                }
+
+            ]
         },
 
         /**
-         * SASS loader support for *.css files
-         * Returns file content as string
+         * Add additional plugins to the compiler.
          *
+         * See: http://webpack.github.io/docs/configuration.html#plugins
          */
-        {
-          test: /\.scss$/,
-          use: [{
-              loader: 'to-string-loader',
-              options: {
-                sourceMap: true
-              }
-            }, {
-              loader: 'raw-loader',
-              options: {
-                sourceMap: true
-              }
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                sourceMap: true
-              }
-            },
-            {
-              loader: 'resolve-url-loader',
-              options: {
-                sourceMap: true
-              }
-            },
-            {
-              loader: 'sass-loader',
-              options: {
-                sourceMap: true
-              }
-            }
-          ],
-          exclude: [root('src/index.html')]
-        },
+        plugins: [
+
+            new ContextReplacementPlugin(
+                    /angular(\\|\/)core(\\|\/)@angular/,
+                    projectRoot('./src'), {}
+            ),
+            // Workaround for https://github.com/angular/angular/issues/20357
+            new ContextReplacementPlugin(
+                    /\@angular(\\|\/)core(\\|\/)esm5/,
+                    projectRoot('./src'), {}
+            ),
+
+            /**
+             * Plugin: DefinePlugin
+             * Description: Define free variables.
+             * Useful for having development builds with debug logging or adding global constants.
+             *
+             * Environment helpers
+             *
+             * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+             */
+            // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+            new DefinePlugin({
+                'ENV': JSON.stringify(ENV),
+                'HMR': false,
+                'process.env': {
+                    'ENV': JSON.stringify(ENV),
+                    'NODE_ENV': JSON.stringify(ENV),
+                    'HMR': false,
+                }
+            }),
+            new ForkTsCheckerWebpackPlugin()
+        ],
 
         /**
-         * Raw loader support for *.html
-         * Returns file content as string
+         * Disable performance hints
          *
-         * See: https://github.com/webpack/raw-loader
+         * See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
          */
-        {
-          test: /\.html$/,
-          loader: 'raw-loader',
-          exclude: [root('src/index.html')]
+        performance: {
+            hints: false
         },
 
         /**
-         * Instruments JS files with Istanbul for subsequent code coverage reporting.
-         * Instrument only testing sources.
+         * Include polyfills or mocks for various node stuff
+         * Description: Node configuration
          *
-         * See: https://github.com/deepsweet/istanbul-instrumenter-loader
+         * See: https://webpack.github.io/docs/configuration.html#node
          */
-        {
-          enforce: 'post',
-          test: /\.(js|ts)$/,
-          loader: 'istanbul-instrumenter-loader',
-          query: {
-            esModules: true
-          },
-          include: root('src'),
-          exclude: [
-            /\.(e2e|spec)\.ts$/,
-            /node_modules/
-          ]
+        node: {
+            global: true,
+            process: false,
+            crypto: 'empty',
+            module: false,
+            clearImmediate: false,
+            setImmediate: false
         }
 
-      ]
-    },
-
-    /**
-     * Add additional plugins to the compiler.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#plugins
-     */
-    plugins: [
-
-      new ContextReplacementPlugin(
-        /angular(\\|\/)core(\\|\/)@angular/,
-        root('./src'), {}
-      ),
-      // Workaround for https://github.com/angular/angular/issues/20357
-      new ContextReplacementPlugin(
-        /\@angular(\\|\/)core(\\|\/)esm5/,
-        root('./src'), {}
-      ),
-
-      /**
-       * Plugin: DefinePlugin
-       * Description: Define free variables.
-       * Useful for having development builds with debug logging or adding global constants.
-       *
-       * Environment helpers
-       *
-       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
-       */
-      // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
-      new DefinePlugin({
-        'ENV': JSON.stringify(ENV),
-        'HMR': false,
-        'process.env': {
-          'ENV': JSON.stringify(ENV),
-          'NODE_ENV': JSON.stringify(ENV),
-          'HMR': false,
-        }
-      }),
-      new ForkTsCheckerWebpackPlugin()
-    ],
-
-    /**
-     * Disable performance hints
-     *
-     * See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
-     */
-    performance: {
-      hints: false
-    },
-
-    /**
-     * Include polyfills or mocks for various node stuff
-     * Description: Node configuration
-     *
-     * See: https://webpack.github.io/docs/configuration.html#node
-     */
-    node: {
-      global: true,
-      process: false,
-      crypto: 'empty',
-      module: false,
-      clearImmediate: false,
-      setImmediate: false
-    }
-
-  };
+    };
 };
diff --git a/yarn.lock b/yarn.lock
index 9a4f96e805e3c53adf46fc744167fe7fec735630..eb0733e6955b47178d57a28ae5a51f51b422f28f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1126,6 +1126,12 @@ async@^2.0.0, async@^2.5.0:
   dependencies:
     lodash "^4.17.10"
 
+async@^2.1.4:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.2.tgz#18330ea7e6e313887f5d2f2a904bac6fe4dd5381"
+  dependencies:
+    lodash "^4.17.11"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1352,6 +1358,10 @@ big.js@^3.1.3:
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
   integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+
 binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
@@ -2426,6 +2436,18 @@ copy-webpack-plugin@^4.4.1:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
+copyfiles@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.1.0.tgz#0e2a4188162d6b2f3c5adfe34e9c0bd564d23164"
+  integrity sha512-cAeDE0vL/koE9WSEGxqPpSyvU638Kgfu6wfrnj7kqp9FWa1CWsU54Coo6sdYZP4GstWa39tL/wIVJWfXcujgNA==
+  dependencies:
+    glob "^7.0.5"
+    minimatch "^3.0.3"
+    mkdirp "^0.5.1"
+    noms "0.0.0"
+    through2 "^2.0.1"
+    yargs "^11.0.0"
+
 core-js@^2.2.0, core-js@^2.4.0, core-js@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@@ -2860,6 +2882,12 @@ dateformat@^1.0.11, dateformat@^1.0.6:
     get-stdin "^4.0.1"
     meow "^3.3.0"
 
+debug-loader@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/debug-loader/-/debug-loader-0.0.1.tgz#44dc37e09e3c39e6af334681960f70a534a9d056"
+  dependencies:
+    loader-utils "^0.2.12"
+
 debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.6, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5617,6 +5645,12 @@ json5@^0.5.0:
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
 
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  dependencies:
+    minimist "^1.2.0"
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -5922,7 +5956,7 @@ loader-runner@^2.3.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
   integrity sha1-9IKuqC1UPgeSFwDVpG7yb9rGuKI=
 
-loader-utils@^0.2.15, loader-utils@^0.2.16:
+loader-utils@^0.2.12, loader-utils@^0.2.15, loader-utils@^0.2.16:
   version "0.2.17"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
   integrity sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=
@@ -5941,6 +5975,14 @@ loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+loader-utils@^1.0.4:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6185,6 +6227,10 @@ lodash@4.17.10, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.13.1, lodash@^4.17.0, lo
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
   integrity sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==
 
+lodash@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+
 log-driver@^1.2.5:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
@@ -6909,6 +6955,14 @@ nodemon@^1.15.0:
     undefsafe "^2.0.2"
     update-notifier "^2.3.0"
 
+noms@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
+  integrity sha1-2o69nzr51nYJGbJ9nNyAkqczKFk=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "~1.0.31"
+
 "nopt@2 || 3", nopt@3.x:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
@@ -8703,7 +8757,7 @@ read-pkg@^3.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.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
@@ -8716,7 +8770,7 @@ read-pkg@^3.0.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@1.0:
+readable-stream@1.0, readable-stream@~1.0.31:
   version "1.0.34"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
   integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
@@ -9285,6 +9339,15 @@ sass-loader@7.1.0:
     pify "^3.0.0"
     semver "^5.5.0"
 
+sass-resources-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sass-resources-loader/-/sass-resources-loader-2.0.0.tgz#88569c542fbf1f18f33a6578b77cc5b36c56911d"
+  dependencies:
+    async "^2.1.4"
+    chalk "^1.1.3"
+    glob "^7.1.1"
+    loader-utils "^1.0.4"
+
 saucelabs@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"
@@ -9983,7 +10046,7 @@ streamroller@0.7.0:
     mkdirp "^0.5.1"
     readable-stream "^2.3.0"
 
-string-replace-loader@2.1.1:
+string-replace-loader@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-replace-loader/-/string-replace-loader-2.1.1.tgz#b72e7b57b6ef04efe615aff0ad989b5c14ca63d1"
   integrity sha512-0Nvw1LDclF45AFNuYPcD2Jvkv0mwb/dQSnJZMvhqGrT+zzmrpG3OJFD600qfQfNUd5aqfp7fCm2mQMfF7zLbyQ==
@@ -10231,6 +10294,14 @@ through2@^2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
+through2@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
 through@2, through@X.X.X, through@^2.3.6, through@~2.3, through@~2.3.1:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -11082,6 +11153,12 @@ webpack-dev-server@^3.1.5:
     webpack-log "^2.0.0"
     yargs "12.0.1"
 
+webpack-import-glob-loader@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/webpack-import-glob-loader/-/webpack-import-glob-loader-1.6.3.tgz#1b1de573f49c2c2afdb814dc13b44b2111b2ea7b"
+  dependencies:
+    glob "^5.0.15"
+
 webpack-log@^1.0.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-1.2.0.tgz#a4b34cda6b22b518dbb0ab32e567962d5c72a43d"
@@ -11332,6 +11409,13 @@ yargs-parser@^5.0.0:
   dependencies:
     camelcase "^3.0.0"
 
+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  integrity sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=
+  dependencies:
+    camelcase "^4.1.0"
+
 yargs@12.0.1, yargs@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.1.tgz#6432e56123bb4e7c3562115401e98374060261c2"
@@ -11350,6 +11434,24 @@ yargs@12.0.1, yargs@^12.0.1:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^10.1.0"
 
+yargs@^11.0.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.0.tgz#90b869934ed6e871115ea2ff58b03f4724ed2d77"
+  integrity sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==
+  dependencies:
+    cliui "^4.0.0"
+    decamelize "^1.1.1"
+    find-up "^2.1.0"
+    get-caller-file "^1.0.1"
+    os-locale "^2.0.0"
+    require-directory "^2.1.1"
+    require-main-filename "^1.0.1"
+    set-blocking "^2.0.0"
+    string-width "^2.0.0"
+    which-module "^2.0.0"
+    y18n "^3.2.1"
+    yargs-parser "^9.0.2"
+
 yargs@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"