diff --git a/.eslintrc.js b/.eslintrc.js
index d8b08a420b..2b71a98767 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,24 +22,117 @@ module.exports = {
     'sourceType': 'module'
   },
   'plugins': [
+    'simple-import-sort',
     'react'
   ],
   'ignorePatterns': ['**/static/**/*.js'],
   'rules': {
-    'indent': 'off',
+    // Disable unused rules
     'no-empty-pattern': 'off',
-    'linebreak-style': [
+
+    // Unix linebreaks only
+    'linebreak-style': ['error', 'unix'],
+
+    // Single quotes, allow double to avoid escaping
+    'quotes': [
       'error',
-      'unix'
+      'single',
+      { 'avoidEscape': true }
     ],
-    'quotes': [
+
+    // No semicolons
+    'semi': ['error', 'never'],
+
+    // Maximum line length of 120 characters
+    'max-len': [
+      'error',
+      {
+        'code': 120,
+        'ignoreUrls': true,
+        'ignoreRegExpLiterals': true
+      }
+    ],
+
+    // Indent by 2 spaces
+    'indent': ['error', 2, {
+      'SwitchCase': 1,
+    }],
+
+    // Enforce spaces around =, +, ==, ?, :, etc.
+    'space-infix-ops': 'error',
+
+    // Enforce separate const declarations
+    'one-var': ['error', 'never'],
+
+    // Ensure spaces after commas
+    'comma-spacing': ['error', { before: false, after: true }],
+
+    // Disallow newlines between the operands of a ternary expression
+    'multiline-ternary': ['error', 'never'],
+
+    // Ensure correct multiline imports
+    'object-curly-newline': ['error', {
+      multiline: true,
+      consistent: true
+    }],
+
+    // Import order
+    'simple-import-sort/imports': ['error', {
+      groups: [
+        // external imports in the given order
+        ['^react$', '^prop-types$', '^react', '^redux', '^[a-z]', '^lodash'],
+        // rdmo imports: lowercase first, then capitalized components
+        ['^rdmo/.*\\/[a-z]'],
+        ['^rdmo/.*\\/[A-Z]'],
+        // parent imports: lowercase first, then capitalized components
+        ['^\\.\\..*\\/[a-z]'],
+        ['^\\.\\..*\\/[A-Z]'],
+        // sibling imports: lowercase first, then capitalized  components
+        ['^\\./.*\\/[a-z]'],
+        ['^\\./.*\\/[A-Z]'],
+      ],
+    }],
+
+    // Export order
+    'simple-import-sort/exports': 'error',
+
+    // JSX: require a newline before the first prop when the JSX spans multiple lines and there is more than one prop
+    'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
+
+    // JSX: wrap multiline expressions in parens, opening paren on a new line
+    'react/jsx-wrap-multilines': [
       'error',
-      'single'
+      {
+        'declaration': 'parens-new-line',
+        'assignment': 'parens-new-line',
+        'return': 'parens-new-line',
+        'arrow': 'parens-new-line',
+        'condition': 'parens-new-line',
+        'logical': 'parens-new-line',
+        'prop': 'parens-new-line'
+      }
     ],
-    'semi': [
+
+    // JSX curly braces: require newlines inside for multiline expressions
+    'react/jsx-curly-newline': [
       'error',
-      'never'
-    ]
+      {
+        'multiline': 'require',
+        'singleline': 'consistent'
+      }
+    ],
+
+    // JSX curly brace spacing: no spaces inside { }
+    'react/jsx-curly-spacing': [
+      'error',
+      {
+        'when': 'never',
+        'children': true
+      }
+    ],
+
+    // JSX double quotes for props
+    'jsx-quotes': ['error', 'prefer-double'],
   },
   'settings': {
     'react': {
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4b8b6ebbbb..a1cb27c70f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -54,7 +54,7 @@ jobs:
     runs-on: ubuntu-24.04
     strategy:
       matrix:
-        python-version: ['3.10', '3.13']
+        python-version: ['3.10', '3.14']
         db-backend: [mysql, postgres]
     steps:
     - uses: actions/checkout@v6
@@ -94,7 +94,7 @@ jobs:
     - name: Run package status tests first
       run: |
         pytest rdmo/core/tests/test_package_status.py --nomigrations --verbose
-      if: matrix.python-version == '3.13' && matrix.db-backend == 'postgres'
+      if: matrix.python-version == '3.14' && matrix.db-backend == 'postgres'
     - name: Run Tests
       run: |
         pytest -p randomly -p no:cacheprovider --cov --reuse-db --numprocesses=auto --dist=loadscope
@@ -114,7 +114,7 @@ jobs:
     runs-on: ubuntu-24.04
     strategy:
       matrix:
-        python-version: ['3.13']
+        python-version: ['3.14']
         db-backend: [postgres]
     steps:
     - uses: actions/checkout@v6
@@ -184,7 +184,7 @@ jobs:
           persist-credentials: false
       - uses: actions/setup-python@v6
         with:
-          python-version: "3.13"
+          python-version: "3.14"
           cache: pip
       - run: python -Im pip install --editable .[dev]
       - run: python -Ic 'import rdmo; print(rdmo.__version__)'
@@ -199,7 +199,7 @@ jobs:
           persist-credentials: false
       - uses: actions/setup-python@v6
         with:
-          python-version: "3.13"
+          python-version: "3.14"
           cache: pip
       - name: Download wheel
         uses: actions/download-artifact@v6
diff --git a/.gitignore b/.gitignore
index ec05075999..69293b7b06 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,18 +34,8 @@ dist
 .ruff_cache
 .on-save.json
 
+rdmo/core/static/
 rdmo/management/static
+rdmo/projects/static/
 
-rdmo/core/static/core/js/base.js
-rdmo/core/static/core/js/base.js.LICENSE.txt
-rdmo/core/static/core/css/base.css
-rdmo/core/static/core/fonts
-
-rdmo/projects/static/projects/css/interview.css
-rdmo/projects/static/projects/css/projects.css
-rdmo/projects/static/projects/fonts/
-rdmo/projects/static/projects/js/interview.js
-rdmo/projects/static/projects/js/interview.js.LICENSE.txt
-rdmo/projects/static/projects/js/projects.js
-rdmo/projects/static/projects/js/projects.js.LICENSE.txt
 screenshots
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index de0884ed08..f241ae0d05 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -34,6 +34,7 @@ repos:
         additional_dependencies:
           - eslint@8.56.0
           - eslint-plugin-react@7.37.0
+          - eslint-plugin-simple-import-sort@12.1.1
           - react@18.3.1
   - repo: https://github.com/crate-ci/typos
     rev: v1.40.0
diff --git a/conftest.py b/conftest.py
index 01fad1f47f..841fb65bce 100644
--- a/conftest.py
+++ b/conftest.py
@@ -19,7 +19,6 @@ def fixtures():
         'domain',
         'groups',
         'options',
-        'overlays',
         'projects',
         'questions',
         'sites',
@@ -39,6 +38,7 @@ def django_db_setup(django_db_setup, django_db_blocker, fixtures):
     """Populate database with test data from fixtures directories."""
     with django_db_blocker.unblock():
         call_command('loaddata', *fixtures)
+        call_command('rebuild_mptt')
         set_group_permissions()
 
 
diff --git a/package-lock.json b/package-lock.json
index 185e4b3f9c..c23482663e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,15 @@
       "dependencies": {
         "@codemirror/lang-html": "^6.4.2",
         "@codemirror/lang-javascript": "^6.2.2",
+        "@fontsource/open-sans": "^5.2.6",
+        "@fontsource/roboto-slab": "^5.2.6",
         "@uiw/react-codemirror": "^4.25.1",
+        "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.11.3",
         "bootstrap-sass": "^3.4.1",
         "classnames": "^2.5.1",
-        "date-fns": "^4.1.0",
+        "date-fns": "^3.6.0",
         "font-awesome": "4.7.0",
-        "html-to-text": "^9.0.5",
         "jquery": "^3.7.1",
         "js-cookie": "^3.0.5",
         "lodash": "^4.17.23",
@@ -34,7 +37,7 @@
         "redux": "^4.1.1",
         "redux-logger": "^3.0.6",
         "redux-thunk": "^2.3.0",
-        "use-debounce": "^10.0.0"
+        "use-debounce": "^10.0.4"
       },
       "devDependencies": {
         "@babel/cli": "^7.28.0",
@@ -45,7 +48,8 @@
         "copy-webpack-plugin": "^14.0.0",
         "css-loader": "^7.1.1",
         "eslint": "~8.56.0",
-        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "file-loader": "^6.2.0",
         "mini-css-extract-plugin": "^2.9.0",
         "sass": "^1.94.2",
@@ -2150,6 +2154,22 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
     },
+    "node_modules/@fontsource/open-sans": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.2.6.tgz",
+      "integrity": "sha512-mnfnUmBWQ+J220gqbibbzmKcc1kawV+lb3/Pspzu+Opnxza12oUffIg0ufG8g+3j1fnSznEWgyNV40MjtmJj6g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/roboto-slab": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto-slab/-/roboto-slab-5.2.6.tgz",
+      "integrity": "sha512-srUROPqdczZx5OBlCKojA3C9eNeV3iIAT+nb0YLGb21ZNv58PUf5mom5T5+x6BMaaH1ZuXDi0sT1NaKWuoagYg==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -2634,6 +2654,16 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-dnd/asap": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -2649,18 +2679,6 @@
       "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
       "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
     },
-    "node_modules/@selderee/plugin-htmlparser2": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
-      "integrity": "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==",
-      "dependencies": {
-        "domhandler": "^5.0.3",
-        "selderee": "^0.11.0"
-      },
-      "funding": {
-        "url": "https://ko-fi.com/killymxi"
-      }
-    },
     "node_modules/@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -3438,15 +3456,48 @@
         "node": ">=8"
       }
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz",
+      "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/bootstrap-icons": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ]
+    },
     "node_modules/bootstrap-sass": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.4.3.tgz",
       "integrity": "sha512-vPgFnGMp1jWZZupOND65WS6mkR8rxhJxndT/AcMbqcq1hHMdkcH4sMPhznLzzoHOHkSCrd6J9F8pWBriPCKP2Q=="
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3867,9 +3918,9 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
-      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -3902,14 +3953,6 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "node_modules/deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -3995,57 +4038,6 @@
         "@babel/runtime": "^7.1.2"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
-    "node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.286",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
@@ -4074,17 +4066,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/envinfo": {
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz",
@@ -4403,6 +4384,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz",
+      "integrity": "sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -4864,9 +4855,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
@@ -5161,39 +5152,6 @@
         "react-is": "^16.7.0"
       }
     },
-    "node_modules/html-to-text": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
-      "integrity": "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==",
-      "dependencies": {
-        "@selderee/plugin-htmlparser2": "^0.11.0",
-        "deepmerge": "^4.3.1",
-        "dom-serializer": "^2.0.0",
-        "htmlparser2": "^8.0.2",
-        "selderee": "^0.11.0"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/htmlparser2": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
-      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
-      "funding": [
-        "https://github.com/fb55/htmlparser2?sponsor=1",
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "entities": "^4.4.0"
-      }
-    },
     "node_modules/icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
@@ -5847,14 +5805,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/leac": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
-      "integrity": "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==",
-      "funding": {
-        "url": "https://ko-fi.com/killymxi"
-      }
-    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -6294,18 +6244,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parseley": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
-      "integrity": "sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==",
-      "dependencies": {
-        "leac": "^0.6.0",
-        "peberminta": "^0.9.0"
-      },
-      "funding": {
-        "url": "https://ko-fi.com/killymxi"
-      }
-    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -6346,24 +6284,17 @@
         "node": ">=8"
       }
     },
-    "node_modules/peberminta": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz",
-      "integrity": "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==",
-      "funding": {
-        "url": "https://ko-fi.com/killymxi"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=8.6"
@@ -6635,6 +6566,15 @@
         "react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-datepicker/node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/react-diff-viewer-continued": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/react-diff-viewer-continued/-/react-diff-viewer-continued-3.4.0.tgz",
@@ -7321,17 +7261,6 @@
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
-    "node_modules/selderee": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz",
-      "integrity": "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==",
-      "dependencies": {
-        "parseley": "^0.12.0"
-      },
-      "funding": {
-        "url": "https://ko-fi.com/killymxi"
-      }
-    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -7342,9 +7271,9 @@
       }
     },
     "node_modules/serialize-javascript": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.4.tgz",
-      "integrity": "sha512-DuGdB+Po43Q5Jxwpzt1lhyFSYKryqoNjQSA9M92tyw0lyHIOur+XCalOUe0KTJpyqzT8+fQ5A0Jf7vCx/NKmIg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.5.tgz",
+      "integrity": "sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==",
       "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
@@ -7732,9 +7661,9 @@
       }
     },
     "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -7972,9 +7901,9 @@
       }
     },
     "node_modules/use-debounce": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.3.tgz",
-      "integrity": "sha512-DxQSI9ZKso689WM1mjgGU3ozcxU1TJElBJ3X6S4SMzMNcm2lVH0AHmyXB+K7ewjz2BSUKJTDqTcwtSMRfB89dg==",
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
+      "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
       "engines": {
         "node": ">= 16.0.0"
       },
@@ -8270,9 +8199,10 @@
       "dev": true
     },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+      "license": "ISC",
       "engines": {
         "node": ">= 6"
       }
@@ -9727,6 +9657,16 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
     },
+    "@fontsource/open-sans": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.2.6.tgz",
+      "integrity": "sha512-mnfnUmBWQ+J220gqbibbzmKcc1kawV+lb3/Pspzu+Opnxza12oUffIg0ufG8g+3j1fnSznEWgyNV40MjtmJj6g=="
+    },
+    "@fontsource/roboto-slab": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto-slab/-/roboto-slab-5.2.6.tgz",
+      "integrity": "sha512-srUROPqdczZx5OBlCKojA3C9eNeV3iIAT+nb0YLGb21ZNv58PUf5mom5T5+x6BMaaH1ZuXDi0sT1NaKWuoagYg=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -10006,6 +9946,12 @@
       "dev": true,
       "optional": true
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true
+    },
     "@react-dnd/asap": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
@@ -10021,15 +9967,6 @@
       "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
       "integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
     },
-    "@selderee/plugin-htmlparser2": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
-      "integrity": "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==",
-      "requires": {
-        "domhandler": "^5.0.3",
-        "selderee": "^0.11.0"
-      }
-    },
     "@types/eslint": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
@@ -10624,15 +10561,26 @@
       "dev": true,
       "optional": true
     },
+    "bootstrap": {
+      "version": "5.3.6",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz",
+      "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==",
+      "requires": {}
+    },
+    "bootstrap-icons": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw=="
+    },
     "bootstrap-sass": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.4.3.tgz",
       "integrity": "sha512-vPgFnGMp1jWZZupOND65WS6mkR8rxhJxndT/AcMbqcq1hHMdkcH4sMPhznLzzoHOHkSCrd6J9F8pWBriPCKP2Q=="
     },
     "brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.13.tgz",
+      "integrity": "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==",
       "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
@@ -10914,9 +10862,9 @@
       }
     },
     "date-fns": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
-      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
     },
     "debug": {
       "version": "4.4.1",
@@ -10937,11 +10885,6 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
-    "deepmerge": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
-      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
-    },
     "define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -11003,39 +10946,6 @@
         "@babel/runtime": "^7.1.2"
       }
     },
-    "dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "requires": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      }
-    },
-    "domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
-    },
-    "domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "requires": {
-        "domelementtype": "^2.3.0"
-      }
-    },
-    "domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "requires": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      }
-    },
     "electron-to-chromium": {
       "version": "1.5.286",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
@@ -11058,11 +10968,6 @@
         "tapable": "^2.3.0"
       }
     },
-    "entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
-    },
     "envinfo": {
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz",
@@ -11442,6 +11347,13 @@
         }
       }
     },
+    "eslint-plugin-simple-import-sort": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz",
+      "integrity": "sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -11641,9 +11553,9 @@
       }
     },
     "flatted": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true
     },
     "font-awesome": {
@@ -11851,29 +11763,6 @@
         "react-is": "^16.7.0"
       }
     },
-    "html-to-text": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
-      "integrity": "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==",
-      "requires": {
-        "@selderee/plugin-htmlparser2": "^0.11.0",
-        "deepmerge": "^4.3.1",
-        "dom-serializer": "^2.0.0",
-        "htmlparser2": "^8.0.2",
-        "selderee": "^0.11.0"
-      }
-    },
-    "htmlparser2": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
-      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
-      "requires": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3",
-        "domutils": "^3.0.1",
-        "entities": "^4.4.0"
-      }
-    },
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
@@ -12319,11 +12208,6 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
-    "leac": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
-      "integrity": "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg=="
-    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -12644,15 +12528,6 @@
         "lines-and-columns": "^1.1.6"
       }
     },
-    "parseley": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
-      "integrity": "sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==",
-      "requires": {
-        "leac": "^0.6.0",
-        "peberminta": "^0.9.0"
-      }
-    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -12681,20 +12556,15 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
-    "peberminta": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz",
-      "integrity": "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ=="
-    },
     "picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
       "dev": true,
       "optional": true
     },
@@ -12869,6 +12739,13 @@
         "@floating-ui/react": "^0.27.15",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0"
+      },
+      "dependencies": {
+        "date-fns": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+          "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="
+        }
       }
     },
     "react-diff-viewer-continued": {
@@ -13329,14 +13206,6 @@
         }
       }
     },
-    "selderee": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz",
-      "integrity": "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==",
-      "requires": {
-        "parseley": "^0.12.0"
-      }
-    },
     "semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -13344,9 +13213,9 @@
       "devOptional": true
     },
     "serialize-javascript": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.4.tgz",
-      "integrity": "sha512-DuGdB+Po43Q5Jxwpzt1lhyFSYKryqoNjQSA9M92tyw0lyHIOur+XCalOUe0KTJpyqzT8+fQ5A0Jf7vCx/NKmIg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.5.tgz",
+      "integrity": "sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==",
       "dev": true
     },
     "set-function-length": {
@@ -13609,9 +13478,9 @@
           "requires": {}
         },
         "picomatch": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-          "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+          "version": "4.0.4",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+          "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
           "dev": true
         }
       }
@@ -13769,9 +13638,9 @@
       }
     },
     "use-debounce": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.3.tgz",
-      "integrity": "sha512-DxQSI9ZKso689WM1mjgGU3ozcxU1TJElBJ3X6S4SMzMNcm2lVH0AHmyXB+K7ewjz2BSUKJTDqTcwtSMRfB89dg==",
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
+      "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
       "requires": {}
     },
     "use-isomorphic-layout-effect": {
@@ -13980,9 +13849,9 @@
       "dev": true
     },
     "yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA=="
     },
     "yocto-queue": {
       "version": "0.1.0",
diff --git a/package.json b/package.json
index b156cfc1f2..55097f7646 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "build:prod": "webpack --config webpack.config.js --mode production",
     "build": "webpack --config webpack.config.js --mode development",
     "watch": "webpack --config webpack.config.js --mode development --watch",
-    "lint": "eslint --ext .js rdmo/"
+    "lint": "eslint rdmo/**/*.js"
   },
   "author": "RDMO Arbeitsgemeinschaft <rdmorganiser.github.io>",
   "license": "Apache-2.0",
@@ -20,12 +20,15 @@
   "dependencies": {
     "@codemirror/lang-html": "^6.4.2",
     "@codemirror/lang-javascript": "^6.2.2",
+    "@fontsource/open-sans": "^5.2.6",
+    "@fontsource/roboto-slab": "^5.2.6",
     "@uiw/react-codemirror": "^4.25.1",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "bootstrap-sass": "^3.4.1",
     "classnames": "^2.5.1",
-    "date-fns": "^4.1.0",
+    "date-fns": "^3.6.0",
     "font-awesome": "4.7.0",
-    "html-to-text": "^9.0.5",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.23",
@@ -44,7 +47,7 @@
     "redux": "^4.1.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "use-debounce": "^10.0.0"
+    "use-debounce": "^10.0.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.0",
@@ -55,7 +58,8 @@
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.1",
     "eslint": "~8.56.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.9.0",
     "sass": "^1.94.2",
diff --git a/pyproject.toml b/pyproject.toml
index a2db2477da..5b1523d572 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -22,7 +22,7 @@ requires-python = ">=3.10"
 classifiers = [
   "Development Status :: 5 - Production/Stable",
   "Environment :: Web Environment",
-  "Framework :: Django :: 4.2",
+  "Framework :: Django :: 5.2",
   "Intended Audience :: Science/Research",
   "Operating System :: OS Independent",
   "Programming Language :: Python",
@@ -31,6 +31,7 @@ classifiers = [
   "Programming Language :: Python :: 3.11",
   "Programming Language :: Python :: 3.12",
   "Programming Language :: Python :: 3.13",
+  "Programming Language :: Python :: 3.14",
 ]
 dynamic = [
   "version",
@@ -41,12 +42,10 @@ dependencies = [
   # in minor version updates anytime
   "defusedcsv>=2.0,<4.0",
   "defusedxml>=0.7.1,<1.0",
-  "django>=4.2,<5.0",
+  "django>=5.2.8,<6.0",
   "django-cleanup>=8.0,<10.0",
-  "django-compressor>=4.4,<5.0",
   "django-extensions>=3.2,<5.0",
   "django-filter>=23.2,<26.0",
-  "django-libsass>=0.9,<1.0",
   "django-mathfilters>=1.0,<2.0",
   "django-mptt>=0.16.0,<1.0.0",
   "django-settings-export>=1.2,<2.0",
@@ -203,15 +202,11 @@ markers = [
   "e2e: marks tests as end-to-end tests using playwright (deselect with '-m \"not e2e\"')",
 ]
 filterwarnings = [
-  # fail on RemovedInDjango50Warning exception
-  "error::django.utils.deprecation.RemovedInDjango50Warning",
+  # throw an error when using methods deprecated in the next django version
+  "error::django.utils.deprecation.RemovedInNextVersionWarning",
 
   # ignore warnings raised by widget_tweaks.py
   "ignore:'maxsplit' is passed as positional argument",
-
-  # ignore warnings raised from within django itself
-  # django/core/files/storage/__init__.py
-  "ignore:django.core.files.storage.get_storage_class is deprecated:django.utils.deprecation.RemovedInDjango51Warning",
 ]
 
 [tool.coverage.run]
@@ -234,6 +229,7 @@ default.extend-ignore-re = [
   "(?Rm)^.*(#|//)\\s*spellchecker:disable-line$", # for .py files
   "(?Rm)^.*<!-- spellchecker:disable-line -->$", # for .html files
 ]
+files.extend-exclude = ["rdmo/core/templates/core/home.html"]
 
 [tool.check-wheel-contents] # Ref: https://github.com/jwodder/check-wheel-contents
 ignore = [
diff --git a/rdmo/accounts/account.py b/rdmo/accounts/account.py
index b803635e64..4e10ce44c1 100644
--- a/rdmo/accounts/account.py
+++ b/rdmo/accounts/account.py
@@ -1,6 +1,7 @@
 from django.conf import settings
 from django.contrib.auth.models import Group
 from django.forms import BooleanField
+from django.urls import reverse
 
 from allauth.account.adapter import DefaultAccountAdapter
 from allauth.account.forms import LoginForm as AllauthLoginForm
@@ -24,6 +25,9 @@ def save_user(self, request, user, form, commit=True):
 
         return user
 
+    def get_password_change_redirect_url(self, request):
+        return reverse('projects')
+
 
 class LoginForm(AllauthLoginForm):
 
diff --git a/rdmo/accounts/forms.py b/rdmo/accounts/forms.py
index e71127c2ab..cee252b3bb 100644
--- a/rdmo/accounts/forms.py
+++ b/rdmo/accounts/forms.py
@@ -71,19 +71,17 @@ def _save_additional_values(self, user=None):
 class RemoveForm(forms.Form):
 
     def __init__(self, *args, **kwargs):
-        self.request = kwargs.pop('request')
-        kwargs.setdefault('label_suffix', '')
+        self.user = kwargs.pop('user')
+
         super().__init__(*args, **kwargs)
-        if not self.request.user.has_usable_password():
+        if not self.user.has_usable_password():
             self.fields.pop('password')
 
     email = forms.CharField(widget=forms.TextInput(attrs={'required': 'false'}))
     email.label = _('E-mail')
-    email.widget.attrs = {'class': 'form-control', 'placeholder': email.label}
 
     password = forms.CharField(widget=forms.PasswordInput)
     password.label = _('Password')
-    password.widget.attrs = {'class': 'form-control', 'placeholder': password.label}
 
     consent = forms.BooleanField(required=True)
     consent.label = _("I confirm that I want my profile to be completely removed. This can not be undone!")
diff --git a/rdmo/accounts/models.py b/rdmo/accounts/models.py
index b54f551758..33cbbaf8b5 100644
--- a/rdmo/accounts/models.py
+++ b/rdmo/accounts/models.py
@@ -214,6 +214,10 @@ def is_editor(self):
     def is_reviewer(self):
         return self.reviewer.filter(id=settings.SITE_ID).exists()
 
+    @cached_property
+    def is_site_manager(self):
+        return self.manager.filter(id=settings.SITE_ID).exists()
+
 
 @receiver(post_save, sender=settings.AUTH_USER_MODEL)
 def post_save_user(sender, **kwargs):
diff --git a/rdmo/accounts/serializers/v1.py b/rdmo/accounts/serializers/v1.py
index a53c138774..cf5eb90011 100644
--- a/rdmo/accounts/serializers/v1.py
+++ b/rdmo/accounts/serializers/v1.py
@@ -2,10 +2,13 @@
 from django.contrib.auth import get_user_model
 from django.contrib.auth.models import Group
 from django.contrib.sites.models import Site
+from django.core.exceptions import ValidationError
+from django.core.validators import EmailValidator
+from django.utils.translation import gettext_lazy as _
 
 from rest_framework import serializers
 
-from rdmo.projects.models import Membership
+from rdmo.projects.models import Invite, Membership
 
 from ..models import Role
 
@@ -66,6 +69,8 @@ class UserSerializer(serializers.ModelSerializer):
     role = UserRoleSerializer()
     memberships = UserMembershipSerializer(many=True)
 
+    is_site_manager = serializers.BooleanField(source='role.is_site_manager')
+
     class Meta:
         model = get_user_model()
         fields = [
@@ -74,7 +79,8 @@ class Meta:
             'role',
             'memberships',
             'is_superuser',
-            'is_staff'
+            'is_staff',
+            'is_site_manager'
         ]
         if settings.USER_API:
             fields += [
@@ -85,3 +91,47 @@ class Meta:
                 'last_login',
                 'date_joined',
             ]
+
+class UserLookupSerializer(serializers.Serializer):
+    first_name = serializers.CharField(source='user.first_name', read_only=True)
+    last_name = serializers.CharField(source='user.last_name', read_only=True)
+    lookup = serializers.CharField(
+        required=False, write_only=True, help_text=_("The username or e-mail of the user.")
+    )
+
+    def validate_lookup(self, value: str) -> str:
+        if "@" in value:
+            validator = EmailValidator()
+            try:
+                validator(value)
+            except ValidationError as e:
+                raise serializers.ValidationError(validator.message) from e
+        return value
+
+    def resolve_lookup(self, value):
+        User = get_user_model()
+
+        # 1) Try exact username match first — even if it contains '@'
+        try:
+            user = User.objects.get(username=value)
+        except User.DoesNotExist:
+            # 2) Try case-insensitive email match
+            try:
+                user = User.objects.get(email__iexact=value)
+            except User.DoesNotExist as e:
+                if (
+                    "@" in value and
+                    self.Meta.model is Invite and
+                    settings.PROJECT_SEND_INVITE
+                ):
+                    # return an email when invite send is allowed
+                    return None, value
+                raise serializers.ValidationError({"lookup": _("No user found.")}) from e
+            except User.MultipleObjectsReturned as e:
+                raise serializers.ValidationError({"lookup": _("Multiple users found with that e-mail.")}) from e
+            else:
+                return user, user.email
+        except User.MultipleObjectsReturned as e:
+            raise serializers.ValidationError({'lookup': _('Multiple users found with that username.')}) from e
+        else:
+            return user, user.email
diff --git a/rdmo/accounts/static/accounts/img/orcid-logo.png b/rdmo/accounts/static/accounts/img/orcid-logo.png
new file mode 100644
index 0000000000..bebd05a7bf
Binary files /dev/null and b/rdmo/accounts/static/accounts/img/orcid-logo.png differ
diff --git a/rdmo/accounts/static/accounts/img/orcid-signin.png b/rdmo/accounts/static/accounts/img/orcid-signin.png
deleted file mode 100644
index 2a2af05d20..0000000000
Binary files a/rdmo/accounts/static/accounts/img/orcid-signin.png and /dev/null differ
diff --git a/rdmo/accounts/static/accounts/img/orcid_16x16.png b/rdmo/accounts/static/accounts/img/orcid_16x16.png
deleted file mode 100644
index 6b697e4d7b..0000000000
Binary files a/rdmo/accounts/static/accounts/img/orcid_16x16.png and /dev/null differ
diff --git a/rdmo/accounts/templates/account/account_token.html b/rdmo/accounts/templates/account/account_token.html
index 9d8b1256cb..35d1941cc5 100644
--- a/rdmo/accounts/templates/account/account_token.html
+++ b/rdmo/accounts/templates/account/account_token.html
@@ -1,7 +1,7 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "API token" %}</h1>
 
@@ -9,7 +9,10 @@ <h1>{% trans "API token" %}</h1>
 
     <form method="post" action="{% url 'account_token' %}" novalidate>
         {% csrf_token %}
-        <input type="submit" name="regenerate" value="{% trans 'Regenerate token' %}" class="btn btn-default" />
+
+        <button type="submit" name="regenerate" class="btn btn-default">
+            {% trans 'Regenerate token' %}
+        </button>
     </form>
 
     <p>
diff --git a/rdmo/accounts/templates/account/email.html b/rdmo/accounts/templates/account/email.html
index 6fb9e86652..12f06afe71 100644
--- a/rdmo/accounts/templates/account/email.html
+++ b/rdmo/accounts/templates/account/email.html
@@ -1,7 +1,7 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
 <h1>{% trans "E-mail Addresses" %}</h1>
 
@@ -9,74 +9,114 @@ <h1>{% trans "E-mail Addresses" %}</h1>
 
 <p>{% trans 'The following e-mail addresses are associated with your account:' %}</p>
 
-<form class="email-form" action="{% url 'account_email' %}" class="email_list" method="post">
+<form action="{% url 'account_email' %}" method="post" class="mb-5">
     {% csrf_token %}
 
-    <fieldset>
+    {% for emailaddress in user.emailaddress_set.all %}
 
-        {% for emailaddress in user.emailaddress_set.all %}
+    {% if forloop.first %}
+    <hr />
+    {% endif%}
 
-        <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">
-            <input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{%endif %} value="{{emailaddress.email}}"/>
+    <div class="d-flex align-items-center gap-2 mb-3">
+        <div class="form-check flex-grow-1">
+            <input type="radio" name="email" id="email_radio_{{ forloop.counter }}"
+                   class="form-check-input" value="{{ emailaddress.email }}"
+                   {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{%endif %}
+                   aria-describedby="{{ form.consent.id_for_label }}-help">
 
-            {{ emailaddress.email }}
-
-            <div class="pull-right">
-                {% if emailaddress.primary %}
-                <span class="label label-primary">{% trans "Primary" %}</span>
-                {% endif %}
+            <label class="form-check-label" for="email_radio_{{ forloop.counter }}">
+                {{ emailaddress.email }}
+            </label>
+        </div>
 
-                {% if emailaddress.verified %}
-                <span class="label label-success">{% trans "Verified" %}</span>
-                {% else %}
-                <span class="label label-warning">{% trans "Unverified" %}</span>
-                {% endif %}
+        {% if emailaddress.primary %}
+        <div class="badge text-bg-primary">{% trans "Primary" %}</div>
+        {% endif %}
+
+        {% if emailaddress.verified %}
+        <div class="badge text-bg-success">{% trans "Verified" %}</div>
+        {% else %}
+        <div class="badge text-bg-secondary">{% trans "Unverified" %}</div>
+        {% endif %}
+    </div>
+
+    <hr />
+
+    {% endfor %}
+
+    <div class="d-flex gap-2 mb-3">
+        <button type="submit" class="btn btn-sm btn-outline-primary" name="action_primary">
+            {% trans 'Make Primary' %}
+        </button>
+        <button type="submit" class="btn btn-sm btn-outline-secondary" name="action_send">
+            {% trans 'Re-send Verification' %}
+        </button>
+        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#remove-modal">
+            {% trans 'Remove' %}
+        </button>
+    </div>
+
+    <div class="modal" id="remove-modal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Modal title</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                <div class="modal-body">
+                    {% trans 'Do you really want to remove the selected e-mail address?' %}
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-danger" type="submit" name="action_remove">
+                    {% trans 'Remove' %}
+                    </button>
+
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
             </div>
-        </label>
-
-        {% endfor %}
-
-        <div class="email-form-buttons">
-            <button class="btn btn-default" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
-            <button class="btn btn-default" type="submit" name="action_send" >{% trans 'Re-send Verification' %}</button>
-            <button class="btn btn-primary" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
         </div>
-
-    </fieldset>
+    </div>
 </form>
 
 {% else %}
 
 <p>
-    <strong>{% trans 'Warning:'%}</strong> {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}
+    <strong>{% trans 'Warning:'%}</strong>
+    {% blocktrans trimmed %}
+    You currently do not have any e-mail address set up. You should really add an
+    e-mail address so you can receive notifications, reset your password, etc.
+    {% endblocktrans %}
 </p>
 
 {% endif %}
 
 <h2>{% trans "Add E-mail Address" %}</h2>
 
-<form method="post" action="{% url 'account_email' %}" class="add_email">
+<form method="post" action="{% url 'account_email' %}" class="d-flex align-items-start gap-2 mb-4">
     {% csrf_token %}
 
-    {% include 'core/bootstrap_form_fields.html' %}
+    <div class="flex-grow-1">
+        <label for="{{ form.email.id_for_label }}" class="visually-hidden">{{ form.email.label }}</label>
 
-    <button class="btn btn-default" name="action_add" type="submit">{% trans "Add E-mail" %}</button>
-</form>
+        {% if field.help_text %}
+        <p id="{{ form.email.id_for_label }}-help" class="form-text text-muted mt-0 mb-1">
+            {{ field.help_text }}
+        </p>
+        {% endif %}
 
-{% endblock %}
+        <input type="email" name="{{ form.email.name }}"
+               class="form-control {% if form.email.errors %}is-invalid{% endif %}" id="{{ form.email.id_for_label }}"
+               aria-describedby="{{ form.email.id_for_label }}-help" placeholder="{{ form.email.label }}">
+
+        {% for error in form.email.errors %}
+        <div class="invalid-feedback">{{ error }}</div>
+        {% endfor %}
+    </div>
+
+    <button class="d-block btn btn-outline-primary" name="action_add" type="submit">
+        {% trans "Add E-mail" %}
+    </button>
+</form>
 
-{% block extra_body %}
-<script type="text/javascript">
-    (function() {
-        var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
-        var actions = document.getElementsByName('action_remove');
-        if (actions.length) {
-            actions[0].addEventListener("click", function(e) {
-                if (! confirm(message)) {
-                    e.preventDefault();
-                }
-            });
-        }
-    })();
-</script>
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/email_confirm.html b/rdmo/accounts/templates/account/email_confirm.html
index 3abc4b0402..16a2e0f0cf 100644
--- a/rdmo/accounts/templates/account/email_confirm.html
+++ b/rdmo/accounts/templates/account/email_confirm.html
@@ -1,8 +1,8 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 {% load account %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Confirm E-mail Address" %}</h1>
 
@@ -18,7 +18,10 @@ <h1>{% trans "Confirm E-mail Address" %}</h1>
 
     <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
         {% csrf_token %}
-        <input type="submit" class="btn btn-primary" value="{% trans 'Confirm' %}" />
+
+        <button type="submit" class="btn btn-primary">
+            {% trans 'Confirm' %}
+        </button>
     </form>
 
     {% else %}
@@ -33,4 +36,4 @@ <h1>{% trans "Confirm E-mail Address" %}</h1>
 
     {% endif %}
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/rdmo/accounts/templates/account/login.html b/rdmo/accounts/templates/account/login.html
index 5a0ed3cf27..7a19171a32 100644
--- a/rdmo/accounts/templates/account/login.html
+++ b/rdmo/accounts/templates/account/login.html
@@ -1,10 +1,24 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Login" %}</h1>
 
-    {% include 'account/login_form.html'%}
+    <div class="d-flex flex-column gap-4">
+        {% if settings.LOGIN_FORM %}
+        {% include 'account/login_form.html' %}
+        {% endif %}
+
+        {% if settings.SHIBBOLETH %}
+        {% include 'account/login_shibboleth.html' %}
+        {% endif %}
+
+        {% if settings.SOCIALACCOUNT %}
+        <div class="d-flex flex-wrap align-items-start gap-2">
+            {% include "socialaccount/snippets/provider_list.html" with process="login" %}
+        </div>
+        {% endif %}
+    </div>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/login_form.html b/rdmo/accounts/templates/account/login_form.html
index 017723a52e..d577d9ca5a 100644
--- a/rdmo/accounts/templates/account/login_form.html
+++ b/rdmo/accounts/templates/account/login_form.html
@@ -1,33 +1,45 @@
 {% load i18n %}
+{% load core_tags %}
 
-{% if settings.SHIBBOLETH %}
-<p style="margin-bottom: 20px;">
-    <a class="btn btn-success extend" href="{% url 'shibboleth_login' %}">
-        {% trans 'Login with Shibboleth' %}
-    </a>
-</p>
-{% endif %}
+<div class="login-form">
+    <form method="post" action="{% url 'account_login' %}">
+        {% csrf_token %}
 
-{% if settings.LOGIN_FORM %}
-<form method="post" action="{% url 'account_login' %}">
-    {% csrf_token %}
+        {% if redirect_field_value %}
+        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+        {% elif next %}
+        <input type="hidden" name="next" value="{{ next }}" />
+        {% endif %}
 
-    {% if redirect_field_value %}
-    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-    {% elif next %}
-    <input type="hidden" name="next" value="{{ next }}" />
-    {% endif %}
+        {% for field in form.visible_fields %}
+            {% bootstrap_form_field field %}
+        {% endfor %}
 
-    {% include 'core/bootstrap_form_fields.html' %}
+        <button type="submit" class="btn btn-primary">
+            {% trans 'Login' %}
+        </button>
 
-    <input type="submit" class="btn btn-primary" value="{% trans 'Login' %}" />
-</form>
-{% endif %}
+        {% for error in form.non_field_errors %}
+        <ul class="text-danger list-unstyled mt-3 mb-0">
+            <li>{{ error }}</li>
+        </ul>
+        {% endfor %}
+    </form>
 
-{% if settings.ACCOUNT %}
-{% include 'account/login_form_account.html' %}
-{% endif %}
+    {% if settings.ACCOUNT %}
+    <div class="mt-3">
+        {% url 'account_reset_password' as reset_url %}
+        {% blocktrans trimmed %}
+        If you forgot your password and want to reset it, click <a href="{{ reset_url }}">here</a>.
+        {% endblocktrans %}
+    </div>
+    {% endif %}
 
-{% if settings.SOCIALACCOUNT %}
-{% include 'account/login_form_socialaccount.html' %}
-{% endif %}
+    {% if settings.ACCOUNT_SIGNUP %}
+    <div class="mt-3">
+        {% blocktrans trimmed %}
+        If you have not created an account yet, then please <a href="{{ signup_url }}">sign up</a> first.
+        {% endblocktrans %}
+    </div>
+    {% endif %}
+</div>
diff --git a/rdmo/accounts/templates/account/login_form_account.html b/rdmo/accounts/templates/account/login_form_account.html
deleted file mode 100644
index b4fec228f9..0000000000
--- a/rdmo/accounts/templates/account/login_form_account.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% load i18n %}
-{% load account %}
-
-{% if settings.ACCOUNT_SIGNUP %}
-
-<p>
-    {% blocktrans %}If you have not created an account yet, then please <a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}
-</p>
-
-{% endif %}
-
-<p>
-    {% url 'account_reset_password' as reset_url %}
-    {% blocktrans %}If you forgot your password and want to reset it, click <a href="{{ reset_url }}">here</a>.{% endblocktrans %}
-</p>
diff --git a/rdmo/accounts/templates/account/login_form_inline.html b/rdmo/accounts/templates/account/login_form_inline.html
new file mode 100644
index 0000000000..be689d1698
--- /dev/null
+++ b/rdmo/accounts/templates/account/login_form_inline.html
@@ -0,0 +1,56 @@
+{% load i18n %}
+{% load core_tags %}
+
+<div class="login-form">
+    <form method="post" action="{% url 'account_login' %}" class="d-lg-flex justify-content-center gap-2">
+        {% csrf_token %}
+
+        {% if form.login %}
+        <div class="mb-lg-0 mb-2">
+            <label for="{{ form.login.id_for_label }}" class="visually-hidden">
+                {{ form.login.label }}
+            </label>
+            <input type="text" class="form-control"
+                   id="{{ form.login.id_for_label }}"
+                   name="{{ form.login.html_name }}"
+                   placeholder="{{ form.login.label }}" />
+        </div>
+
+        {% else %}
+
+        <div class="mb-lg-0 mb-2">
+            <label for="{{ form.username.id_for_label }}" class="visually-hidden">
+                {{ form.username.label }}
+            </label>
+            <input type="text" class="form-control"
+                   id="{{ form.username.id_for_label }}"
+                   name="{{ form.username.html_name }}"
+                   placeholder="{{ form.username.label }}" />
+        </div>
+
+        {% endif %}
+
+        <div class="mb-lg-0 mb-2">
+            <label for="{{ form.password.id_for_label }}" class="visually-hidden">
+                {{ form.password.label }}
+            </label>
+            <input type="password" class="form-control"
+                   id="{{ form.password.id_for_label }}"
+                   name="{{ form.password.html_name }}"
+                   placeholder="{{ form.password.label }}" />
+        </div>
+        <div class="d-flex gap-2 mb-0">
+            <button type="submit" class="d-block flex-grow-1 btn btn-primary">{% trans 'Sign in' %}</button>
+            {% if settings.ACCOUNT_SIGNUP %}
+            <a class="d-block btn btn-light" href="{{ signup_url }}">{% trans 'Sign up' %}</a>
+            {% endif %}
+        </div>
+    </form>
+
+    {% if settings.ACCOUNT %}
+    {% url 'account_reset_password' as reset_url %}
+    <div class="mt-1 small">
+        <a href="{{ reset_url }}">{% trans 'Forgot your password?' %}</a>
+    </div>
+    {% endif %}
+</div>
diff --git a/rdmo/accounts/templates/account/login_form_socialaccount.html b/rdmo/accounts/templates/account/login_form_socialaccount.html
deleted file mode 100644
index c0bd6e41f8..0000000000
--- a/rdmo/accounts/templates/account/login_form_socialaccount.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% load i18n %}
-{% load socialaccount %}
-
-{% get_providers as socialaccount_providers %}
-
-{% if socialaccount_providers %}
-
-<p>
-    {% blocktrans with site.name as site_name %}Alternatively, you can login using one of the following third party accounts:{% endblocktrans %}
-</p>
-
-<div class="socialaccount_ballot">
-    <ul class="socialaccount_providers">
-    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
-    </ul>
-</div>
-
-{% include "socialaccount/snippets/login_extra.html" %}
-
-{% endif %}
diff --git a/rdmo/accounts/templates/account/login_shibboleth.html b/rdmo/accounts/templates/account/login_shibboleth.html
new file mode 100644
index 0000000000..3933805495
--- /dev/null
+++ b/rdmo/accounts/templates/account/login_shibboleth.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<div class="login-shibboleth">
+    <a class="btn btn-success" href="{% url 'shibboleth_login' %}">
+        {% trans 'Sign in with Shibboleth' %}
+    </a>
+</div>
diff --git a/rdmo/accounts/templates/account/logout.html b/rdmo/accounts/templates/account/logout.html
index 09df13e630..4993690cb0 100644
--- a/rdmo/accounts/templates/account/logout.html
+++ b/rdmo/accounts/templates/account/logout.html
@@ -1,7 +1,7 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Logout" %}</h1>
 
@@ -16,7 +16,9 @@ <h1>{% trans "Logout" %}</h1>
         <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
         {% endif %}
 
-        <input type="submit" class="btn btn-primary" value="{% trans 'Logout' %}" />
+        <button type="submit" class="btn btn-primary">
+            {% trans 'Logout' %}"
+        </button>
     </form>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/logout_form.html b/rdmo/accounts/templates/account/logout_form.html
deleted file mode 100644
index 9df56a2759..0000000000
--- a/rdmo/accounts/templates/account/logout_form.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% load i18n %}
-
-    <form class="logout-form" action="{{ settings.LOGOUT_URL }}" method="POST">
-        {% csrf_token %}
-        <button type="submit" class="btn btn-link">
-            {% trans 'Logout' %}
-        </button>
-    </form>
diff --git a/rdmo/accounts/templates/account/password_change.html b/rdmo/accounts/templates/account/password_change.html
index 847052f859..6577a9a71e 100644
--- a/rdmo/accounts/templates/account/password_change.html
+++ b/rdmo/accounts/templates/account/password_change.html
@@ -1,7 +1,8 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
+{% load core_tags %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Change password" %}</h1>
 
@@ -12,9 +13,13 @@ <h1>{% trans "Change password" %}</h1>
     <form method="post" action="{% url 'account_change_password' %}">
         {% csrf_token %}
 
-        {% include 'core/bootstrap_form_fields.html' %}
+        {% for field in form.visible_fields %}
+            {% bootstrap_form_field field %}
+        {% endfor %}
 
-        <input type="submit" class="btn btn-primary" value="{% trans 'Change password' %}" />
+        <button type="submit" class="btn btn-primary mb-2">
+            {% trans 'Change password' %}
+        </button>
     </form>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/password_reset.html b/rdmo/accounts/templates/account/password_reset.html
index 09a76bd93f..6c9cff6b6f 100644
--- a/rdmo/accounts/templates/account/password_reset.html
+++ b/rdmo/accounts/templates/account/password_reset.html
@@ -1,7 +1,8 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
+{% load core_tags %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Password reset" %}</h1>
 
@@ -16,9 +17,13 @@ <h1>{% trans "Password reset" %}</h1>
     <form method="post" action="{% url 'account_reset_password' %}">
         {% csrf_token %}
 
-        {% include 'core/bootstrap_form_fields.html' %}
+        {% for field in form.visible_fields %}
+            {% bootstrap_form_field field %}
+        {% endfor %}
 
-        <input type="submit" class="btn btn-primary" value="{% trans 'Reset my password' %}" />
+        <button type="submit" class="btn btn-primary mb-2">
+            {% trans 'Reset my password' %}
+        </button>
     </form>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/password_reset_done.html b/rdmo/accounts/templates/account/password_reset_done.html
index c0b9a3246e..5e1797c561 100644
--- a/rdmo/accounts/templates/account/password_reset_done.html
+++ b/rdmo/accounts/templates/account/password_reset_done.html
@@ -1,7 +1,7 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Password reset sent" %}</h1>
 
diff --git a/rdmo/accounts/templates/account/password_reset_from_key.html b/rdmo/accounts/templates/account/password_reset_from_key.html
index 8bddbe38d0..b516598ad0 100644
--- a/rdmo/accounts/templates/account/password_reset_from_key.html
+++ b/rdmo/accounts/templates/account/password_reset_from_key.html
@@ -1,7 +1,8 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
+{% load core_tags %}
 
-{% block page %}
+{% block main %}
 
 {% if token_fail %}
 
@@ -22,9 +23,13 @@ <h1>{% trans "Enter new password" %}</h1>
     <form method="post" action=".">
         {% csrf_token %}
 
-        {% include 'core/bootstrap_form_fields.html' %}
+        {% for field in form.visible_fields %}
+            {% bootstrap_form_field field %}
+        {% endfor %}
 
-        <input type="submit" class="btn btn-primary" value="{% trans 'Change my password' %}" />
+        <button type="submit" class="btn btn-primary mb-2">
+            {% trans 'Change my password' %}
+        </button>
     </form>
 
     {% else %}
diff --git a/rdmo/accounts/templates/account/password_reset_from_key_done.html b/rdmo/accounts/templates/account/password_reset_from_key_done.html
index 1a91b201f3..0483009994 100644
--- a/rdmo/accounts/templates/account/password_reset_from_key_done.html
+++ b/rdmo/accounts/templates/account/password_reset_from_key_done.html
@@ -1,8 +1,8 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 {% load core_tags %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Password reset complete" %}</h1>
 
@@ -11,7 +11,7 @@ <h1>{% trans "Password reset complete" %}</h1>
     </p>
 
     <p>
-        <a href="{% url 'account_login' %}">{% trans 'Login' %}</a>
+        <a href="{% url 'account_login' %}" class="btn btn-primary">{% trans 'Sign in' %}</a>
     </p>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/password_set.html b/rdmo/accounts/templates/account/password_set.html
index d5f324c0df..37fcdaf291 100644
--- a/rdmo/accounts/templates/account/password_set.html
+++ b/rdmo/accounts/templates/account/password_set.html
@@ -1,7 +1,7 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Set new password" %}</h1>
 
@@ -12,9 +12,13 @@ <h1>{% trans "Set new password" %}</h1>
     <form method="post" action="{% url 'account_set_password' %}">
         {% csrf_token %}
 
-        {% include 'core/bootstrap_form_fields.html' %}
+        {% for field in form.visible_fields %}
+            {% bootstrap_form_field field %}
+        {% endfor %}
 
-        <input type="submit" class="btn btn-primary" value="{% trans 'Set password' %}" />
+        <button type="submit" class="btn btn-primary mb-2">
+            {% trans 'Set password' %}
+        </button>
     </form>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/signup.html b/rdmo/accounts/templates/account/signup.html
index c3d29ed70f..e82f0333c9 100644
--- a/rdmo/accounts/templates/account/signup.html
+++ b/rdmo/accounts/templates/account/signup.html
@@ -1,9 +1,9 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
-    <h2>{% trans "Create a new account" %}</h2>
+    <h1>{% trans "Create a new account" %}</h1>
 
     <p>
         {% blocktrans trimmed %}
@@ -11,50 +11,10 @@ <h2>{% trans "Create a new account" %}</h2>
         {% endblocktrans %}
     </p>
 
-    <form method="post" action="{% url 'account_signup' %}">
-        {% csrf_token %}
-
-        {% if redirect_field_value %}
-        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-        {% endif %}
-
-        {% for field in form.visible_fields %}
-
-            {% if field.html_name != 'consent' %}
-            {% include 'core/bootstrap_form_field.html' with field=field %}
-            {% endif %}
-
-        {% endfor %}
-        {% if settings.ACCOUNT_TERMS_OF_USE %}
-        {% with field=form.consent %}
-        <div class="form-group{% if field.errors %} has-error{% endif %} field-{{field.html_name}}">
-            <div class="checkbox">
-                <label>
-                    {{ field }}
-                    {% trans 'I agree to the <a href="">terms of use</a>.' %}
-                </label>
-            </div>
-        </div>
-
-        {% if field.errors %}
-        <div class="help-block error">
-            <p class="text-danger">{% trans 'You need to agree to the terms of use to proceed.' %}</p>
-        </div>
-        {% endif %}
-        {% endwith %}
-        {% endif %}
-
-        <input type="submit" class="btn btn-primary" value="{% trans 'Create account' %}" />
-    </form>
-
-    <ul class="list-unstyled text-danger">
-    {% for error in form.non_field_errors %}
-        <li>{{ error }}</li>
-    {% endfor %}
-    </ul>
+    {% include 'account/signup_form.html' %}
 
     {% if settings.ACCOUNT_TERMS_OF_USE %}
-    {% include 'account/signup_modal_terms_of_use.html' %}
+    {% include 'account/terms_of_use_modal.html' %}
     {% endif %}
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/account/signup_closed.html b/rdmo/accounts/templates/account/signup_closed.html
index e26c41d45a..af197d0d00 100644
--- a/rdmo/accounts/templates/account/signup_closed.html
+++ b/rdmo/accounts/templates/account/signup_closed.html
@@ -1,9 +1,9 @@
 {% extends 'core/page.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
-    <h2>{% trans "Sign up closed" %}</h2>
+    <h1>{% trans "Sign up closed" %}</h1>
 
     <p>
         {% trans "We are sorry, but the sign up is currently closed." %}
diff --git a/rdmo/accounts/templates/account/signup_form.html b/rdmo/accounts/templates/account/signup_form.html
new file mode 100644
index 0000000000..f8ad3b2bf1
--- /dev/null
+++ b/rdmo/accounts/templates/account/signup_form.html
@@ -0,0 +1,26 @@
+{% load i18n %}
+{% load core_tags %}
+
+<div class="signup-form">
+    <form method="post">
+        {% csrf_token %}
+
+        {% if redirect_field_value %}
+        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
+        {% endif %}
+
+        {% for field in form.visible_fields %}
+            {% if field.html_name != 'consent' %}
+            {% bootstrap_form_field field %}
+            {% endif %}
+        {% endfor %}
+
+        {% if settings.ACCOUNT_TERMS_OF_USE %}
+        {% include 'account/terms_of_use_consent.html' %}
+        {% endif %}
+
+        <button type="submit" class="btn btn-primary">
+            {% trans 'Create account' %}
+        </button>
+    </form>
+</div>
diff --git a/rdmo/accounts/templates/account/signup_modal_terms_of_use.html b/rdmo/accounts/templates/account/signup_modal_terms_of_use.html
deleted file mode 100644
index a0a2d0711a..0000000000
--- a/rdmo/accounts/templates/account/signup_modal_terms_of_use.html
+++ /dev/null
@@ -1,51 +0,0 @@
-{% load i18n %}
-
-    <script>
-        $(document).ready(function() {
-            {% if request.method == 'GET' %}
-            $('#terms-of-use-modal').modal('show');
-            {% endif %}
-
-            $('.form-group.field-consent a').on('click', function (event) {
-                $('#terms-of-use-modal').modal('show');
-                event.preventDefault();
-            });
-            $('.terms-of-use-accept').on('click', function (event) {
-                $('#terms-of-use-modal').modal('hide');
-                $('#id_consent').click();
-            });
-        });
-    </script>
-
-    <div class="modal" id="terms-of-use-modal" tabindex="-1">
-        <div class="modal-dialog modal-lg">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                    <h2 class="modal-title">
-                        {% trans 'Terms of use' %}
-                    </h2>
-                </div>
-
-                <div class="modal-body">
-                    {% get_current_language as lang %}
-                    {% if lang == 'en' %}
-                    {% include 'account/terms_of_use_en.html' %}
-                    {% elif lang == 'de' %}
-                    {% include 'account/terms_of_use_de.html' %}
-                    {% endif %}
-                </div>
-
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary terms-of-use-accept">
-                        {% trans 'I agree to the terms of use' %}
-                    </button>
-                    <button type="button" class="btn btn-default" data-dismiss="modal" tabindex="-1">
-                        {% trans 'Close' %}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
diff --git a/rdmo/accounts/templates/account/terms_of_use.html b/rdmo/accounts/templates/account/terms_of_use.html
index fb95b5b564..6ecf658363 100644
--- a/rdmo/accounts/templates/account/terms_of_use.html
+++ b/rdmo/accounts/templates/account/terms_of_use.html
@@ -1,7 +1,7 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
 <h2>{% trans 'Terms of use' %}</h2>
 
diff --git a/rdmo/accounts/templates/account/terms_of_use_accept.html b/rdmo/accounts/templates/account/terms_of_use_accept.html
new file mode 100644
index 0000000000..63c14950e7
--- /dev/null
+++ b/rdmo/accounts/templates/account/terms_of_use_accept.html
@@ -0,0 +1,32 @@
+{% extends 'account/terms_of_use.html' %}
+{% load i18n %}
+
+{% block main %}
+
+    {{ block.super }}
+
+    <div>
+        {% if not has_consented %}
+
+        <form method="post">
+            {% csrf_token %}
+
+            {% include 'account/terms_of_use_consent.html' %}
+
+            <button type="submit" class="btn btn-primary">
+                {% trans 'Submit' %}
+            </button>
+
+            {% for error in form.non_field_errors %}
+            <div class="text-danger mt-3">{{ error }}</div>
+            {% endfor %}
+        </form>
+
+        {% else %}
+        <p>
+            {% trans "You have already accepted the terms of use." %}
+        </p>
+        {% endif %}
+    </div>
+
+{% endblock %}
diff --git a/rdmo/accounts/templates/account/terms_of_use_accept_form.html b/rdmo/accounts/templates/account/terms_of_use_accept_form.html
deleted file mode 100644
index 6354e0e206..0000000000
--- a/rdmo/accounts/templates/account/terms_of_use_accept_form.html
+++ /dev/null
@@ -1,46 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-
-{% block page %}
-
-    <h2>{% trans 'Terms of use' %}</h2>
-
-    <p>
-        {% get_current_language as lang %}
-        {% if lang == 'en' %}
-            {% include 'account/terms_of_use_en.html' %}
-        {% elif lang == 'de' %}
-            {% include 'account/terms_of_use_de.html' %}
-        {% endif %}
-    </p>
-
-    <div>
-        {% if not has_consented %}
-            <form method="post">
-                {% csrf_token %}
-                <div class="form-group">
-                    <label>
-                        <input type="checkbox" name="consent" required>
-                        {% trans "I agree to the terms of use." %}
-                    </label>
-                </div>
-                <button type="submit" class="btn btn-primary terms-of-use-accept">
-                    {% trans "I accept" %}
-                </button>
-            </form>
-        {% else %}
-            <p>
-                {% trans "You have accepted the terms of use." %}
-            </p>
-        {% endif %}
-
-        {% if form.non_field_errors %}
-          <ul class="list-unstyled text-danger">
-            {% for error in form.non_field_errors %}
-                <li>{{ error }}</li>
-            {% endfor %}
-          </ul>
-        {% endif %}
-    </div>
-
-{% endblock %}
diff --git a/rdmo/accounts/templates/account/terms_of_use_consent.html b/rdmo/accounts/templates/account/terms_of_use_consent.html
new file mode 100644
index 0000000000..cbe5495927
--- /dev/null
+++ b/rdmo/accounts/templates/account/terms_of_use_consent.html
@@ -0,0 +1,18 @@
+{% load i18n %}
+
+    <div class="form-check mb-3">
+        <input type="checkbox" name="{{ form.consent.name }}" id="{{ form.consent.id_for_label }}"
+               {% if form.consent.value %}checked{% endif %}
+               class="form-check-input {% if form.consent.errors %}is-invalid{% endif %}"
+               aria-describedby="{{ form.consent.id_for_label }}-help">
+
+        <label class="form-check-label" for="{{ form.consent.id_for_label }}">
+            {% trans 'I agree to the <span id="show-terms-of-use">terms of use</span>.' %}
+        </label>
+
+        {% if form.consent.errors %}
+        <div class="invalid-feedback">
+            {% trans 'You need to agree to the terms of use to proceed.' %}
+        </div>
+        {% endif %}
+    </div>
diff --git a/rdmo/accounts/templates/account/terms_of_use_modal.html b/rdmo/accounts/templates/account/terms_of_use_modal.html
new file mode 100644
index 0000000000..81dc490e4c
--- /dev/null
+++ b/rdmo/accounts/templates/account/terms_of_use_modal.html
@@ -0,0 +1,50 @@
+{% load i18n %}
+
+    <div id="terms-of-use-modal" class="modal" tabindex="-1">
+        <div class="modal-dialog modal-dialog-scrollable modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                    {% trans 'Terms of use' %}
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    {% get_current_language as lang %}
+                    {% if lang == 'en' %}
+                    {% include 'account/terms_of_use_en.html' %}
+                    {% elif lang == 'de' %}
+                    {% include 'account/terms_of_use_de.html' %}
+                    {% endif %}
+                </div>
+                <div class="modal-footer">
+                    <button id="terms-of-use-accept" type="button" class="btn btn-primary">
+                        {% trans 'I agree to the terms of use' %}
+                    </button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const modal = new bootstrap.Modal(document.getElementById('terms-of-use-modal'));
+            {% if request.method == 'GET' %}modal.show();{% endif %}
+
+            const span = document.getElementById('show-terms-of-use');
+            span.classList.add('link');
+            span.addEventListener('click', function (event) {
+                event.preventDefault();
+                modal.show();
+            });
+
+            const button = document.getElementById('terms-of-use-accept');
+            button.addEventListener('click', function (event) {
+                document.getElementById('id_consent').checked = true;
+                modal.hide();
+            });
+        });
+    </script>
diff --git a/rdmo/accounts/templates/account/verification_sent.html b/rdmo/accounts/templates/account/verification_sent.html
index 404aa95516..5f41a39e00 100644
--- a/rdmo/accounts/templates/account/verification_sent.html
+++ b/rdmo/accounts/templates/account/verification_sent.html
@@ -1,7 +1,7 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
     <h2>
         {% trans "Verify your e-mail address" %}
diff --git a/rdmo/accounts/templates/account/verified_email_required.html b/rdmo/accounts/templates/account/verified_email_required.html
index d011aedd4d..8fd043160d 100644
--- a/rdmo/accounts/templates/account/verified_email_required.html
+++ b/rdmo/accounts/templates/account/verified_email_required.html
@@ -1,4 +1,4 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
 {% block content %}
diff --git a/rdmo/accounts/templates/profile/profile_remove_closed.html b/rdmo/accounts/templates/profile/profile_remove_closed.html
index d9d9ab0a4d..3e37cefa62 100644
--- a/rdmo/accounts/templates/profile/profile_remove_closed.html
+++ b/rdmo/accounts/templates/profile/profile_remove_closed.html
@@ -1,9 +1,9 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
-    <h2>{% trans "Delete profile" %}</h2>
+    <h1>{% trans "Delete profile" %}</h1>
 
     <p>
         {% trans "We are sorry, but you cannot remove your profile here." %}
diff --git a/rdmo/accounts/templates/profile/profile_remove_failed.html b/rdmo/accounts/templates/profile/profile_remove_failed.html
index d9fe5fbd93..d164876d70 100644
--- a/rdmo/accounts/templates/profile/profile_remove_failed.html
+++ b/rdmo/accounts/templates/profile/profile_remove_failed.html
@@ -1,9 +1,9 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
-    <h2>{% trans "Delete profile" %}</h2>
+    <h1>{% trans "Delete profile" %}</h1>
 
     <p>
         {% trans "Profile removal failed. Please make sure that you enter the correct data." %}
diff --git a/rdmo/accounts/templates/profile/profile_remove_form.html b/rdmo/accounts/templates/profile/profile_remove_form.html
index 815abcddf7..07b2389543 100644
--- a/rdmo/accounts/templates/profile/profile_remove_form.html
+++ b/rdmo/accounts/templates/profile/profile_remove_form.html
@@ -1,8 +1,8 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 {% load core_tags %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Delete profile" %}</h1>
 
@@ -12,10 +12,13 @@ <h1>{% trans "Delete profile" %}</h1>
         {% csrf_token %}
         <input type="hidden" name="next" value="{{ next }}" />
 
-        {% include 'core/bootstrap_form_fields.html' %}
+        {% for field in form.visible_fields %}
+            {% bootstrap_form_field field %}
+        {% endfor %}
 
-        <input type="submit" value="{% trans 'Delete profile' %}" class="btn btn-danger" />
-        <input type="submit" name="cancel" value="{% trans 'Cancel' %}" class="btn" formnovalidate/>
+        <button type="submit" class="btn btn-danger">
+            {% trans 'Delete profile' %}
+        </button>
     </form>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/profile/profile_remove_success.html b/rdmo/accounts/templates/profile/profile_remove_success.html
index 073c6e7ca2..d81256496e 100644
--- a/rdmo/accounts/templates/profile/profile_remove_success.html
+++ b/rdmo/accounts/templates/profile/profile_remove_success.html
@@ -1,9 +1,9 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
-    <h2>{% trans "Delete profile" %}</h2>
+    <h1>{% trans "Delete profile" %}</h1>
 
     <p>
         {% trans "Your profile was successfully removed." %}
diff --git a/rdmo/accounts/templates/profile/profile_update_closed.html b/rdmo/accounts/templates/profile/profile_update_closed.html
index 60766b0c53..acff246b2a 100644
--- a/rdmo/accounts/templates/profile/profile_update_closed.html
+++ b/rdmo/accounts/templates/profile/profile_update_closed.html
@@ -1,9 +1,9 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
-    <h2>{% trans "Profile update" %}</h2>
+    <h1>{% trans "Profile update" %}</h1>
 
     <p>
         {% trans "We are sorry, but you cannot update your profile here." %}
diff --git a/rdmo/accounts/templates/profile/profile_update_form.html b/rdmo/accounts/templates/profile/profile_update_form.html
index 437e6aa4c9..5aba4b9508 100644
--- a/rdmo/accounts/templates/profile/profile_update_form.html
+++ b/rdmo/accounts/templates/profile/profile_update_form.html
@@ -1,7 +1,8 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
+{% load core_tags %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Update profile" %}</h1>
 
@@ -15,14 +16,17 @@ <h1>{% trans "Update profile" %}</h1>
     </p>
     {% endif %}
 
-    <form method="post" action="{% url 'profile_update'  %}">
+    <form method="post" action="{% url 'profile_update'  %}" class="mb-5">
         {% csrf_token %}
         <input type="hidden" name="next" value="{{ next }}" />
 
-        {% include 'core/bootstrap_form_fields.html' %}
+        {% for field in form.visible_fields %}
+            {% bootstrap_form_field field %}
+        {% endfor %}
 
-        <input type="submit" value="{% trans 'Update profile' %}" class="btn {{ submit_danger|yesno:'btn-danger,btn-primary' }}" />
-        <input type="submit" name="cancel" value="{% trans 'Cancel' %}" class="btn" />
+        <button type="submit" class="btn btn-primary">
+            {% trans 'Update profile' %}
+        </button>
     </form>
 
     {% if settings.PROFILE_DELETE  %}
diff --git a/rdmo/accounts/templates/socialaccount/authentication_error.html b/rdmo/accounts/templates/socialaccount/authentication_error.html
index c826248f8e..58cdb917f1 100644
--- a/rdmo/accounts/templates/socialaccount/authentication_error.html
+++ b/rdmo/accounts/templates/socialaccount/authentication_error.html
@@ -1,10 +1,10 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 {% load account %}
 {% load socialaccount %}
 {% load core_tags %}
 
-{% block page %}
+{% block main %}
 
 <h1>{% trans "Social Network Login Failure" %}</h1>
 
diff --git a/rdmo/accounts/templates/socialaccount/connections.html b/rdmo/accounts/templates/socialaccount/connections.html
index 1f39855b24..33330cbbbf 100644
--- a/rdmo/accounts/templates/socialaccount/connections.html
+++ b/rdmo/accounts/templates/socialaccount/connections.html
@@ -1,78 +1,76 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
-{% load static %}
-{% load accounts_tags %}
 
-{% block page %}
+{% block main %}
 
     <h1>{% trans "Account connections" %}</h1>
 
-    <h2>{% trans 'Current connections' %}</h2>
+    <div class="mb-4">
 
-    {% if form.accounts %}
+        <h2>{% trans 'Current connections' %}</h2>
 
-    <p>
-        {% blocktrans trimmed %}
-        You can sign in to your account using any of the following third party accounts:
-        {% endblocktrans %}
-    </p>
+        {% if form.accounts %}
 
-    <form class="connections-form" method="post" action="{% url 'socialaccount_connections' %}">
-        {% csrf_token %}
+        <p>
+            {% blocktrans trimmed %}
+            You can sign in to your account using any of the following third party accounts:
+            {% endblocktrans %}
+        </p>
 
-        <fieldset>
-            {% if form.non_field_errors %}
-            <div id="errorMsg">{{ form.non_field_errors }}</div>
-            {% endif %}
+        <form method="post" action="{% url 'socialaccount_connections' %}">
+            {% csrf_token %}
 
             {% for base_account in form.accounts %}
             {% with base_account.get_provider_account as account %}
 
-            <label for="id_account_{{ base_account.id }}">
-                <input id="id_account_{{ base_account.id }}" type="radio" name="account" value="{{ base_account.id }}"/>
+            {% if forloop.first %}
+            <hr />
+            {% endif%}
 
-                {% if base_account.provider == 'orcid' %}
-                <a href="https://orcid.org/{{ base_account.uid }}" target="_blank">
-                    <img alt="ORCID logo" src="{% static 'accounts/img/orcid_16x16.png' %}" width="16" height="16" />
-                    https://orcid.org/{{ base_account.uid }}
-                </a>
-                {% else %}
-                <span>{{account.get_brand.name}}</span>
-                {% endif %}
-            </label>
+            <div class="form-check mb-2">
+                <input type="radio" name="account" value="{{ base_account.id }}" id="remove-{{ base_account.id }}"
+                       class="form-check-input {% if field.errors %}is-invalid{% endif %}"
+                       aria-describedby="{{ field.id_for_label }}-help">
+
+                <label class="form-check-label" for="remove-{{ base_account.id }}">
+                    {{account.get_brand.name}} ({{ account }})
+                </label>
+
+                {% for error in field.errors %}
+                <div class="invalid-feedback">{{ error }}</div>
+                {% endfor %}
+            </div>
+
+            <hr />
 
             {% endwith %}
             {% endfor %}
 
-            <div class="connections-form-buttons">
-                <input type="submit" class="btn btn-danger" value="{% trans 'Remove selected account' %}" />
-            </div>
-        </fieldset>
-    </form>
+            <button type="submit" class="btn btn-sm btn-danger" name="action_primary">
+                {% trans 'Remove selected' %}
+            </button>
+        </form>
+
+        {% else %}
+
+        <p>
+            {% trans 'You currently have no social network accounts connected to this account.' %}
+        </p>
 
-    <ul class="list-unstyled text-danger">
-    {% for error in form.non_field_errors %}
-        <li>{{ error }}</li>
-    {% endfor %}
-    </ul>
+        {% endif %}
 
-    {% else %}
+    </div>
 
-    <p>
-        {% trans 'You currently have no social network accounts connected to this account.' %}
-    </p>
+    <div class="mb-4">
 
-    {% endif %}
+        <h2>{% trans 'Add an additional account' %}</h2>
 
-    {% get_inactive_providers as inactive_providers %}
-    {% if inactive_providers %}
-    <h2>{% trans 'Add an additional account' %}</h2>
+        <div class="d-flex flex-wrap align-items-start gap-2">
+            {% include "socialaccount/snippets/provider_list.html" with process="connect" %}
+        </div>
 
-    <ul class="socialaccount_providers">
-    {% include "socialaccount/snippets/provider_list.html" with process="connect" socialaccount_providers=inactive_providers %}
-    </ul>
-    {% endif %}
+        {% include "socialaccount/snippets/login_extra.html" %}
 
-    {% include "socialaccount/snippets/login_extra.html" %}
+    </div>
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/socialaccount/login.html b/rdmo/accounts/templates/socialaccount/login.html
index 6fb731a8c5..90c97cb446 100644
--- a/rdmo/accounts/templates/socialaccount/login.html
+++ b/rdmo/accounts/templates/socialaccount/login.html
@@ -1,21 +1,45 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block head_title %}{% trans "Sign In" %}{% endblock %}
+{% block head_title %}
+{% trans "Sign In" %}
+{% endblock %}
+
+{% block main %}
 
-{% block page %}
 {% if process == "connect" %}
-<h1>{% blocktrans with provider.name as provider %}Connect {{ provider }}{% endblocktrans %}</h1>
 
-<p>{% blocktrans with provider.name as provider %}You are about to connect a new third party account from {{ provider }}.{% endblocktrans %}</p>
+<h1>
+  {% blocktrans with provider.name as provider %}
+  Connect {{ provider }}
+  {% endblocktrans %}
+</h1>
+
+<p>
+  {% blocktrans with provider.name as provider %}
+  You are about to connect a new third party account from {{ provider }}.
+  {% endblocktrans %}
+</p>
+
 {% else %}
-<h1>{% blocktrans with provider.name as provider %}Sign In Via {{ provider }}{% endblocktrans %}</h1>
 
-<p>{% blocktrans with provider.name as provider %}You are about to sign in using a third party account from {{ provider }}.{% endblocktrans %}</p>
+<h1>
+  {% blocktrans with provider.name as provider %}
+  Sign In Via {{ provider }}
+  {% endblocktrans %}
+</h1>
+
+<p>
+  {% blocktrans with provider.name as provider %}
+  You are about to sign in using a third party account from {{ provider }}.
+  {% endblocktrans %}
+</p>
+
 {% endif %}
 
 <form method="post">
   {% csrf_token %}
   <button class="btn btn-primary" type="submit">{% trans "Continue" %}</button>
 </form>
+
 {% endblock %}
diff --git a/rdmo/accounts/templates/socialaccount/login_cancelled.html b/rdmo/accounts/templates/socialaccount/login_cancelled.html
index 768986d2f4..5ceca0781c 100644
--- a/rdmo/accounts/templates/socialaccount/login_cancelled.html
+++ b/rdmo/accounts/templates/socialaccount/login_cancelled.html
@@ -1,10 +1,10 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 {% load account %}
 {% load socialaccount %}
 {% load core_tags %}
 
-{% block page %}
+{% block main %}
 
 <h1>{% trans "Login Cancelled" %}</h1>
 
diff --git a/rdmo/accounts/templates/socialaccount/signup.html b/rdmo/accounts/templates/socialaccount/signup.html
index 3eccb49c7d..56a7435b6f 100644
--- a/rdmo/accounts/templates/socialaccount/signup.html
+++ b/rdmo/accounts/templates/socialaccount/signup.html
@@ -1,59 +1,20 @@
-{% extends 'core/page.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 
-{% block page %}
+{% block main %}
 
-    <h2>{% trans "Create a new account" %}</h2>
+    <h1>{% trans "Create a new account" %}</h1>
 
     <p>
         {% blocktrans trimmed with provider_name=account.get_provider.name site_name=site.name %}
-        You are about to use your <strong>{{provider_name}}</strong> account to login to {{site_name}}. As a final step, please complete the following form:{% endblocktrans %}
+        You are about to use your <strong>{{provider_name}}</strong> account to login to {{site_name}}.
+        As a final step, please complete the following form:{% endblocktrans %}
     </p>
 
-    <form method="post" action="{% url 'socialaccount_signup' %}">
-        {% csrf_token %}
-
-        {% if redirect_field_value %}
-        <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
-        {% endif %}
-
-        {% for field in form.visible_fields %}
-
-            {% if field.html_name != 'consent' %}
-            {% include 'core/bootstrap_form_field.html' with field=field %}
-            {% endif %}
-
-        {% endfor %}
-        {% if settings.ACCOUNT_TERMS_OF_USE %}
-        {% with field=form.consent %}
-        <div class="form-group{% if field.errors %} has-error{% endif %} field-{{field.html_name}}">
-            <div class="checkbox">
-                <label>
-                    {{ field }}
-                    {% trans 'I agree to the <a href="">terms of use</a>.' %}
-                </label>
-            </div>
-        </div>
-
-        {% if field.errors %}
-        <div class="help-block error">
-            <p class="text-danger">{% trans 'You need to agree to the terms of use to proceed.' %}</p>
-        </div>
-        {% endif %}
-        {% endwith %}
-        {% endif %}
-
-        <input type="submit" class="btn btn-primary" value="{% trans 'Create account' %}" />
-    </form>
-
-    <ul class="list-unstyled text-danger">
-    {% for error in form.non_field_errors %}
-        <li>{{ error }}</li>
-    {% endfor %}
-    </ul>
+    {% include 'account/signup_form.html' %}
 
     {% if settings.ACCOUNT_TERMS_OF_USE %}
-    {% include 'account/signup_modal_terms_of_use.html' %}
+    {% include 'account/terms_of_use_modal.html' %}
     {% endif %}
 
 {% endblock %}
diff --git a/rdmo/accounts/templates/socialaccount/snippets/provider_button_generic.html b/rdmo/accounts/templates/socialaccount/snippets/provider_button_generic.html
new file mode 100644
index 0000000000..f484637a29
--- /dev/null
+++ b/rdmo/accounts/templates/socialaccount/snippets/provider_button_generic.html
@@ -0,0 +1,9 @@
+{% load socialaccount %}
+{% load accounts_tags %}
+
+    <a title="{% sign_in_text provider.name %}"
+       class="btn {{ button_class|default:'btn-primary' }} {{ provider.id }}-login"
+       href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+        <span class="bi bi-{{ provider.id }}"></span>
+        <span>{% sign_in_text provider.name %}</span>
+    </a>
diff --git a/rdmo/accounts/templates/socialaccount/snippets/provider_button_openid.html b/rdmo/accounts/templates/socialaccount/snippets/provider_button_openid.html
new file mode 100644
index 0000000000..542fda56b3
--- /dev/null
+++ b/rdmo/accounts/templates/socialaccount/snippets/provider_button_openid.html
@@ -0,0 +1,7 @@
+{% for brand in provider.get_brands %}
+    <a title="{{ brand.name }}"
+        class="{{ provider.id }} {{ brand.id }}"
+        href="{% provider_login_url provider.id openid=brand.openid_url process=process %}">
+        {{ brand.name }}
+    </a>
+{% endfor %}
diff --git a/rdmo/accounts/templates/socialaccount/snippets/provider_button_openid_connect.html b/rdmo/accounts/templates/socialaccount/snippets/provider_button_openid_connect.html
new file mode 100644
index 0000000000..6c4a95eb3d
--- /dev/null
+++ b/rdmo/accounts/templates/socialaccount/snippets/provider_button_openid_connect.html
@@ -0,0 +1,29 @@
+{% load i18n %}
+{% load static %}
+{% load socialaccount %}
+{% load accounts_tags %}
+
+    <a title="{% sign_in_text provider.app.name %}"
+       class="btn {{ button_class|default:'btn-primary' }} {{ provider.app.provider_id }}-login"
+       href="{% provider_login_url provider process=process scope=scope auth_params=auth_params %}">
+
+        <div class="d-flex justify-content-center align-items-center gap-1">
+            {% if provider.app.settings.login_logo %}
+            <img class="{{ provider.app.provider_id }}-login-logo"
+                 src="{% static provider.app.settings.login_logo %}"
+                 alt="{% trans 'Logo' %}" />
+            {% else %}
+            <span class="bi bi-{{ provider.app.provider_id }}"></span>
+            {% endif %}
+
+            {% if provider.app.settings.login_text %}
+            <span>
+                {{ provider.app.settings.login_text }}
+            </span>
+            {% elif provider.app.settings.login_text == False %}
+            {# Do not display a text on the button #}
+            {% else %}
+            <span>{% sign_in_text provider.app.name %}</span>
+            {% endif %}
+        </div>
+    </a>
diff --git a/rdmo/accounts/templates/socialaccount/snippets/provider_button_orcid.html b/rdmo/accounts/templates/socialaccount/snippets/provider_button_orcid.html
new file mode 100644
index 0000000000..32f5b58f01
--- /dev/null
+++ b/rdmo/accounts/templates/socialaccount/snippets/provider_button_orcid.html
@@ -0,0 +1,12 @@
+{% load static %}
+{% load socialaccount %}
+{% load accounts_tags %}
+
+    <a title="{% sign_in_text 'orcid' %}"
+       class="btn {{ button_class|default:'btn-primary' }} {{ provider.id }}-login"
+       href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
+        <div class="d-flex justify-content-center align-items-center gap-2">
+            <img src="{% static 'accounts/img/orcid-logo.png' %}" />
+            <span>{% sign_in_text 'ORCID' %}</span>
+        </div>
+    </a>
diff --git a/rdmo/accounts/templates/socialaccount/snippets/provider_list.html b/rdmo/accounts/templates/socialaccount/snippets/provider_list.html
index c19a603bf9..2a98770be6 100644
--- a/rdmo/accounts/templates/socialaccount/snippets/provider_list.html
+++ b/rdmo/accounts/templates/socialaccount/snippets/provider_list.html
@@ -1,64 +1,30 @@
 {% load socialaccount %}
-{% load static %}
+{% load accounts_tags %}
 
-{% if not socialaccount_providers %}
 {% get_providers as socialaccount_providers %}
-{% endif %}
+{% get_current_provider_ids as current_providers %}
 
 {% for provider in socialaccount_providers %}
 
-{% if provider.id == "openid" %}
-{% for brand in provider.get_brands %}
-<li>
-    <a title="{{brand.name}}"
-        class="socialaccount_provider {{provider.id}} {{brand.id}}"
-        href="{% provider_login_url provider.id openid=brand.openid_url process=process %}">
-        {{brand.name}}
-    </a>
-</li>
-{% endfor %}
-{% endif %}
+{% if provider.id not in current_providers %}
 
-{% if provider.id == 'orcid' %}
+    {% if provider.id == "openid" %}
 
-<li class="socialaccount_provider_break">
-    <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}}"
-        href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
-        <img src="{% static 'accounts/img/orcid-signin.png' %}" alt="ORCID sign in" />
-    </a>
-</li>
+        {% include 'socialaccount/snippets/provider_button_openid.html' %}
 
-{% elif provider.id == 'openid_connect' %}
+    {% elif provider.id == 'openid_connect' %}
 
-{% if provider.app.provider_id == 'keycloak' %}
-<li class="socialaccount_provider_break">
-    <a title="{{ provider.name }}" class="socialaccount_provider {{ provider.app.provider_id }}"
-        href="{% provider_login_url provider process=process scope=scope auth_params=auth_params %}">
-        <img src="{% static 'accounts/img/keycloak_logo_200px.svg' %}" alt="Keycloak sign in" />
-    </a>
-</li>
-{% else %}
-<li>
-    <a title="{{ provider.name }}" class="socialaccount_provider {{ provider.app.provider_id }}"
-        href="{% provider_login_url provider process=process scope=scope auth_params=auth_params %}">
-        {{ provider.name }}
-    </a>
-</li>
-{% endif %}
+        {% include 'socialaccount/snippets/provider_button_openid_connect.html' %}
+
+    {% elif provider.id == 'orcid' %}
+
+        {% include 'socialaccount/snippets/provider_button_orcid.html' %}
 
+    {% else %}
 
-{% else %}
+        {% include 'socialaccount/snippets/provider_button_generic.html' %}
 
-<li>
-    <a title="{{provider.name}}" class="socialaccount_provider {{provider.id}}"
-        href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">
-        {% if provider.id == 'dummy' %}
-        <span class="fa fa-meh-o fa-2x"></span>
-        {% else %}
-        <span class="fa fa-{{provider.id}} fa-2x"></span>
-        {% endif %}
-    </a>
-</li>
+    {% endif %}
 
 {% endif %}
 
diff --git a/rdmo/accounts/templatetags/accounts_tags.py b/rdmo/accounts/templatetags/accounts_tags.py
index ac8895b632..7d77dbd0b9 100644
--- a/rdmo/accounts/templatetags/accounts_tags.py
+++ b/rdmo/accounts/templatetags/accounts_tags.py
@@ -39,3 +39,20 @@ def get_inactive_providers(context=None):
             for provider in get_providers(context)
             if provider.id not in providers
         ]
+
+
+@register.simple_tag(takes_context=True)
+def get_current_provider_ids(context=None):
+
+    context = context or {}
+
+    if 'form' in context:
+        try:
+            return [account.provider for account in context['form'].accounts]
+        except (KeyError, AttributeError):
+            return []
+
+
+@register.simple_tag()
+def sign_in_text(provider_name):
+    return _('Sign in with %s') % provider_name
diff --git a/rdmo/accounts/tests/test_models.py b/rdmo/accounts/tests/test_models.py
index 5c63ad7af2..4b4546ac59 100644
--- a/rdmo/accounts/tests/test_models.py
+++ b/rdmo/accounts/tests/test_models.py
@@ -16,6 +16,9 @@
     ('example-reviewer', 'example-reviewer', 'example-reviewer@example.com'),
 )
 
+site_managers = (
+    ('site', 'site', 'site@example.com'),
+)
 
 
 @pytest.mark.parametrize('username,password,email', normal_users)
@@ -31,6 +34,7 @@ def test_is_site_editor_returns_true_for_site_managers(db, client, username, pas
     user = get_user_model().objects.get(username=username, email=email)
     assert user.role.is_editor is True
 
+
 @pytest.mark.parametrize('username,password,email', normal_users)
 def test_is_site_reviewer_returns_false_for_normal_users(db, client, username, password, email):
     client.login(username=username, password=password)
@@ -43,3 +47,17 @@ def test_is_site_reviewer_returns_true_for_site_managers(db, client, username, p
     client.login(username=username, password=password)
     user = get_user_model().objects.get(username=username, email=email)
     assert user.role.is_reviewer is True
+
+
+@pytest.mark.parametrize('username,password,email', normal_users)
+def test_is_site_manager_returns_false_for_normal_users(db, client, username, password, email):
+    client.login(username=username, password=password)
+    user = get_user_model().objects.get(username=username, email=email)
+    assert user.role.is_site_manager is False
+
+
+@pytest.mark.parametrize('username,password,email', site_managers)
+def test_is_site_manager_returns_true_for_site_managers(db, client, username, password, email):
+    client.login(username=username, password=password)
+    user = get_user_model().objects.get(username=username, email=email)
+    assert user.role.is_site_manager is True
diff --git a/rdmo/accounts/tests/test_utils.py b/rdmo/accounts/tests/test_utils.py
index 08a7c51220..362678901c 100644
--- a/rdmo/accounts/tests/test_utils.py
+++ b/rdmo/accounts/tests/test_utils.py
@@ -1,10 +1,8 @@
 import pytest
 
 from django.contrib.auth import get_user_model
-from django.contrib.auth.models import AnonymousUser
 
-from rdmo.accounts.models import Role
-from rdmo.accounts.utils import delete_user, get_full_name, get_user_from_db_or_none, is_site_manager
+from rdmo.accounts.utils import delete_user, get_full_name, get_user_from_db_or_none
 
 normal_users = (
     ('user', 'user', 'user@example.com'),
@@ -31,29 +29,6 @@ def test_get_full_name_returns_username(db, username, password, email):
     assert get_full_name(user) == username
 
 
-def test_is_site_manager_returns_true_for_superuser(admin_user):
-    assert is_site_manager(admin_user) is True
-
-
-def test_is_site_manager_returns_false_for_not_authenticated_user():
-    assert is_site_manager(AnonymousUser()) is False
-
-
-@pytest.mark.parametrize('username,password,email', site_managers)
-def test_is_site_manager_returns_true_for_site_managers(db, client, username, password, email):
-    client.login(username=username, password=password)
-    user = get_user_model().objects.get(username=username, email=email)
-    assert is_site_manager(user) is True
-
-
-@pytest.mark.parametrize('username,password,email', site_managers)
-def test_is_site_manager_returns_false_when_role_doesnotexist_(db, client, username, password, email):
-    client.login(username=username, password=password)
-    Role.objects.all().delete()
-    user = get_user_model().objects.get(username=username, email=email)
-    assert is_site_manager(user) is False
-
-
 @pytest.mark.parametrize('username,password,email', users)
 def test_delete_user(db, username, password, email):
     user = get_user_model().objects.get(username=username, email=email)
diff --git a/rdmo/accounts/tests/test_views.py b/rdmo/accounts/tests/test_views.py
index 4393fab7b1..f8cd88cdd2 100644
--- a/rdmo/accounts/tests/test_views.py
+++ b/rdmo/accounts/tests/test_views.py
@@ -370,23 +370,6 @@ def test_remove_user_post(db, client, settings, django_user_model, profile_delet
         assert django_user_model.objects.get(username='user')
 
 
-@pytest.mark.parametrize('profile_update', boolean_toggle)
-def test_remove_user_post_cancelled(db, client, settings, django_user_model, profile_update):
-    settings.PROFILE_UPDATE = profile_update
-    settings.PROFILE_DELETE = True
-
-    client.login(username='user', password='user')
-    url = reverse('profile_remove')
-    response = client.post(url, {'cancel': 'cancel'})
-
-    assert response.status_code == 302
-    assert django_user_model.objects.filter(username='user').exists()
-    if settings.PROFILE_UPDATE:
-        assert response.url == '/account'
-    else:
-        assert response.url == '/'
-
-
 @pytest.mark.parametrize('profile_delete', boolean_toggle)
 def test_remove_user_post_invalid_email(db, client, settings, django_user_model, profile_delete):
     settings.PROFILE_DELETE = profile_delete
@@ -841,9 +824,7 @@ def test_terms_of_use_middleware_redirect_and_accept(
     assert response.status_code == 200
 
 
-def test_terms_of_use_middleware_invalidate_terms_version(
-    db, client, settings, django_user_model, enable_terms_of_use  # noqa: F811
-    ):
+def test_terms_of_use_middleware_invalidate_terms_version(db, client, settings, django_user_model, enable_terms_of_use):  # noqa: F811
     # Arrange constants, settings and user
     past_datetime = (datetime.now() - timedelta(days=10)).strftime(format="%Y-%m-%d")
     future_datetime = (datetime.now() + timedelta(days=10)).strftime(format="%Y-%m-%d")
diff --git a/rdmo/accounts/urls/__init__.py b/rdmo/accounts/urls/__init__.py
index 8e43759928..daf4e77fcc 100644
--- a/rdmo/accounts/urls/__init__.py
+++ b/rdmo/accounts/urls/__init__.py
@@ -15,7 +15,7 @@
 urlpatterns = [
     # edit own profile
     re_path(r'^$', profile_update, name='profile_update'),
-    re_path('^remove', remove_user, name='profile_remove'),
+    re_path('^remove/', remove_user, name='profile_remove'),
 ]
 
 if settings.ACCOUNT_TERMS_OF_USE:
diff --git a/rdmo/accounts/utils.py b/rdmo/accounts/utils.py
index 6ba04d3e50..75348fa65b 100644
--- a/rdmo/accounts/utils.py
+++ b/rdmo/accounts/utils.py
@@ -1,12 +1,10 @@
 import logging
 
-from django.conf import settings
 from django.contrib.auth import authenticate, get_user_model
 from django.contrib.auth.models import Group, Permission
 from django.contrib.contenttypes.models import ContentType
 from django.core.exceptions import ObjectDoesNotExist
 
-from .models import Role
 from .settings import GROUPS
 
 log = logging.getLogger(__name__)
@@ -19,19 +17,6 @@ def get_full_name(user) -> str:
         return user.username
 
 
-def is_site_manager(user):
-    if user.is_authenticated:
-        if user.is_superuser:
-            return True
-        else:
-            try:
-                return user.role.manager.filter(pk=settings.SITE_ID).exists()
-            except Role.DoesNotExist:
-                return False
-    else:
-        return False
-
-
 def set_group_permissions():
     for name, permissions in GROUPS:
         group = Group.objects.get(name=name)
diff --git a/rdmo/accounts/views.py b/rdmo/accounts/views.py
index 9f1f0728d3..011f5b2da3 100644
--- a/rdmo/accounts/views.py
+++ b/rdmo/accounts/views.py
@@ -4,7 +4,7 @@
 from django.conf import settings
 from django.contrib.auth import logout
 from django.contrib.auth.decorators import login_required
-from django.http import HttpResponseNotAllowed, HttpResponseRedirect
+from django.http import HttpResponseRedirect
 from django.shortcuts import redirect, render
 from django.urls import reverse
 
@@ -26,14 +26,9 @@ def profile_update(request):
 
         form = ProfileForm(request.POST or None, instance=request.user)
 
-        if request.method == 'POST':
-            if 'cancel' in request.POST:
-                log.debug('User %s update cancelled', request.user.username)
-                return HttpResponseRedirect(get_next(request))
-
-            if form.is_valid():
-                form.save()
-                return HttpResponseRedirect(get_next(request))
+        if request.method == 'POST' and form.is_valid():
+            form.save()
+            return HttpResponseRedirect(get_next(request))
 
         return render(request, 'profile/profile_update_form.html', {
             'form': form,
@@ -45,22 +40,12 @@ def profile_update(request):
 
 @login_required()
 def remove_user(request):
-    if not settings.PROFILE_DELETE:
-        log.info('Remove user form is disabled in settings PROFILE_DELETE')
-        return render(request, 'profile/profile_remove_closed.html')
-    form = RemoveForm(request.POST or None, request=request)
-    log.debug('Remove user form initialized for "%s"', request.user.username)
-
-    if request.method == 'POST':
-        if 'cancel' in request.POST:
-            log.info('User %s removal cancelled', str(request.user))
+    if settings.PROFILE_DELETE:
+        log.debug('Remove user %s', request.user.username)
 
-            if settings.PROFILE_UPDATE:
-                return HttpResponseRedirect('/account')
-            else:
-                return HttpResponseRedirect('/')
+        form = RemoveForm(request.POST or None, user=request.user)
 
-        if form.is_valid():
+        if request.method == 'POST' and form.is_valid():
             user_is_deleted = delete_user(user=request.user,
                                           email=request.POST['email'],
                                           password=request.POST.get('password', None))
@@ -72,10 +57,12 @@ def remove_user(request):
                 log.info('Remove user, deletion failed for %s', request.user.username)
                 return render(request, 'profile/profile_remove_failed.html')
 
-    return render(request, 'profile/profile_remove_form.html', {
-        'form': form,
-        'next': get_referer_path_info(request, default='/')
-    })
+        return render(request, 'profile/profile_remove_form.html', {
+            'form': form,
+            'next': get_referer_path_info(request, default='/')
+        })
+    else:
+        return render(request, 'profile/profile_remove_closed.html')
 
 
 def terms_of_use(request):
@@ -113,30 +100,19 @@ def shibboleth_logout(request):
 
 
 def terms_of_use_accept(request):
-
     if not request.user.is_authenticated:
         return redirect("account_login")
 
+    # Use the form to handle both update and delete actions
+    form = AcceptConsentForm(request.POST or None, user=request.user)
+
     if request.method == "POST":
-        # Use the form to handle both update and delete actions
-        form = AcceptConsentForm(request.POST, user=request.user)
         if form.is_valid():
             consent_saved = form.save(request.session)  # saves the consent and sets the session key
             if consent_saved:
                 return redirect("home")
 
-        # If consent was not saved, re-render the form with an error
-        return render(request,
-            "account/terms_of_use_accept_form.html",
-            {"form": form},
-        )
-
-    elif request.method == "GET":
-        has_consented = ConsentFieldValue.objects.filter(user=request.user).exists()
-        return render(
-            request,
-            "account/terms_of_use_accept_form.html",
-            {"has_consented": has_consented},
-        )
-
-    return HttpResponseNotAllowed(["GET", "POST"])
+    return render(request, "account/terms_of_use_accept.html", {
+        "form": form,
+        "has_consented": ConsentFieldValue.objects.filter(user=request.user).exists()
+    })
diff --git a/rdmo/accounts/viewsets.py b/rdmo/accounts/viewsets.py
index 09604f146f..da01040c96 100644
--- a/rdmo/accounts/viewsets.py
+++ b/rdmo/accounts/viewsets.py
@@ -10,7 +10,6 @@
 from rdmo.core.permissions import HasModelPermission, HasObjectPermission
 
 from .serializers.v1 import UserSerializer
-from .utils import is_site_manager
 
 
 class UserViewSetMixin:
@@ -19,7 +18,7 @@ def get_users_for_user(self, user):
         if user.is_authenticated:
             if user.has_perm('auth.view_user'):
                 return get_user_model().objects.all()
-            elif is_site_manager(user):
+            elif user.role.is_site_manager:
                 return get_user_model().objects.filter(role__member__id__in=user.role.manager.all()).distinct()
         return get_user_model().objects.none()
 
diff --git a/rdmo/core/assets/img/document.png b/rdmo/core/assets/img/document.png
new file mode 100644
index 0000000000..9187ff5cd3
Binary files /dev/null and b/rdmo/core/assets/img/document.png differ
diff --git a/rdmo/core/static/core/img/header/collection.jpg b/rdmo/core/assets/img/header/collection.jpg
similarity index 100%
rename from rdmo/core/static/core/img/header/collection.jpg
rename to rdmo/core/assets/img/header/collection.jpg
diff --git a/rdmo/core/static/core/img/header/library.jpg b/rdmo/core/assets/img/header/library.jpg
similarity index 100%
rename from rdmo/core/static/core/img/header/library.jpg
rename to rdmo/core/assets/img/header/library.jpg
diff --git a/rdmo/core/static/core/img/header/supercomputer.jpg b/rdmo/core/assets/img/header/supercomputer.jpg
similarity index 100%
rename from rdmo/core/static/core/img/header/supercomputer.jpg
rename to rdmo/core/assets/img/header/supercomputer.jpg
diff --git a/rdmo/core/static/core/img/rdmo-logo.png b/rdmo/core/assets/img/rdmo-logo.png
similarity index 100%
rename from rdmo/core/static/core/img/rdmo-logo.png
rename to rdmo/core/assets/img/rdmo-logo.png
diff --git a/rdmo/core/assets/js/actions/actionTypes.js b/rdmo/core/assets/js/actions/actionTypes.js
index 1f97c54f3d..16cc7203d5 100644
--- a/rdmo/core/assets/js/actions/actionTypes.js
+++ b/rdmo/core/assets/js/actions/actionTypes.js
@@ -15,3 +15,7 @@ export const FETCH_TEMPLATES_SUCCESS = 'FETCH_TEMPLATES_SUCCESS'
 export const FETCH_CURRENT_USER_ERROR = 'FETCH_CURRENT_USER_ERROR'
 export const FETCH_CURRENT_USER_INIT = 'FETCH_CURRENT_USER_INIT'
 export const FETCH_CURRENT_USER_SUCCESS = 'FETCH_CURRENT_USER_SUCCESS'
+
+export const FETCH_CATALOGS_ERROR = 'FETCH_CATALOGS_ERROR'
+export const FETCH_CATALOGS_INIT = 'FETCH_CATALOGS_INIT'
+export const FETCH_CATALOGS_SUCCESS = 'FETCH_CATALOGS_SUCCESS'
diff --git a/rdmo/core/assets/js/actions/configActions.js b/rdmo/core/assets/js/actions/configActions.js
index aefed9f305..b5f5fec0f8 100644
--- a/rdmo/core/assets/js/actions/configActions.js
+++ b/rdmo/core/assets/js/actions/configActions.js
@@ -1,4 +1,4 @@
-import { UPDATE_CONFIG, DELETE_CONFIG } from './actionTypes'
+import { DELETE_CONFIG, UPDATE_CONFIG } from './actionTypes'
 
 export function updateConfig(path, value, ls = true) {
   return {type: UPDATE_CONFIG, path, value, ls}
diff --git a/rdmo/core/assets/js/api/BaseApi.js b/rdmo/core/assets/js/api/BaseApi.js
index df53e94b77..5bab58cbd4 100644
--- a/rdmo/core/assets/js/api/BaseApi.js
+++ b/rdmo/core/assets/js/api/BaseApi.js
@@ -168,6 +168,37 @@ class BaseApi {
     })
   }
 
+  static download(url) {
+    let filename
+
+    return fetch(baseUrl + url).catch(error => {
+      throw new ApiError(error.message)
+    }).then(response => {
+      if (response.ok) {
+        const contentDisposition = response.headers.get('Content-Disposition')
+        filename = contentDisposition?.match(/filename="?([^"]+)"?/)?.[1] ?? 'download'
+        return response.blob()
+      } else if (response.status === 400) {
+        return response.json().then(errors => {
+          throw new BadRequestError(response.statusText, response.status, errors)
+        })
+      } else if (response.status === 404) {
+        return response.json().then(errors => {
+          throw new NotFoundError(response.statusText, response.status, errors)
+        })
+      } else {
+        throw new ApiError(response.statusText, response.status)
+      }
+    }).then((blob) => {
+      const objectUrl = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = objectUrl
+      a.download = filename
+      a.click()
+      URL.revokeObjectURL(objectUrl)
+    })
+  }
+
 }
 
 export default BaseApi
diff --git a/rdmo/core/assets/js/app.js b/rdmo/core/assets/js/app.js
new file mode 100644
index 0000000000..e2204695ae
--- /dev/null
+++ b/rdmo/core/assets/js/app.js
@@ -0,0 +1 @@
+// This file produces an empty app.js script file, which can be overloaded in a theme.
diff --git a/rdmo/core/assets/js/base.js b/rdmo/core/assets/js/base.js
index 1653c3c47c..d4c0cde622 100644
--- a/rdmo/core/assets/js/base.js
+++ b/rdmo/core/assets/js/base.js
@@ -1,4 +1 @@
-import 'bootstrap-sass'
-
-window.$ = require('jquery')
-window.Cookies = require('js-cookie')
+// This file is intentionally left empty.
diff --git a/rdmo/core/assets/js/bootstrap.js b/rdmo/core/assets/js/bootstrap.js
new file mode 100644
index 0000000000..ae9264d525
--- /dev/null
+++ b/rdmo/core/assets/js/bootstrap.js
@@ -0,0 +1,2 @@
+import 'bootstrap'
+window.bootstrap = require('bootstrap')
diff --git a/rdmo/core/assets/js/components/UploadDropZone.js b/rdmo/core/assets/js/components/Dropzone.js
similarity index 60%
rename from rdmo/core/assets/js/components/UploadDropZone.js
rename to rdmo/core/assets/js/components/Dropzone.js
index 4f8ebf17e2..aef53c600d 100644
--- a/rdmo/core/assets/js/components/UploadDropZone.js
+++ b/rdmo/core/assets/js/components/Dropzone.js
@@ -1,6 +1,7 @@
 import React,  { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useDropzone } from 'react-dropzone'
+import classNames from 'classnames'
 
 const UploadDropZone = ({ acceptedTypes, onImportFile }) => {
   const [errorMessage, setErrorMessage] = useState('')
@@ -19,23 +20,21 @@ const UploadDropZone = ({ acceptedTypes, onImportFile }) => {
   })
 
   return (
-    <section className="dropzone-container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <input {...getInputProps()} />
-        {
-          isDragActive ? (
-            <div>
-              {gettext('Drop the file here ...')}
-            </div>
-          ) : (
-            <div>
-              {gettext('Drag and drop a file here or click to select a file')}
-            </div>
-          )
-        }
-        {errorMessage && <div className="alert alert-danger mt-2">{errorMessage}</div>}
-      </div>
-    </section>
+    <div {...getRootProps({className: classNames('dropzone', {'drag-active': isDragActive})})} >
+      <input {...getInputProps()} />
+      {
+        isDragActive ? (
+          <div>
+            {gettext('Drop the file here ...')}
+          </div>
+        ) : (
+          <div>
+            {gettext('Drag and drop a file here or click to select a file')}
+          </div>
+        )
+      }
+      {errorMessage && <div className="alert alert-danger mt-2">{errorMessage}</div>}
+    </div>
   )
 }
 
diff --git a/rdmo/core/assets/js/components/Html.js b/rdmo/core/assets/js/components/Html.js
index 097ec9a624..2b6b690fa6 100644
--- a/rdmo/core/assets/js/components/Html.js
+++ b/rdmo/core/assets/js/components/Html.js
@@ -1,11 +1,11 @@
-import React, { useRef, useLayoutEffect } from 'react'
+import React, { useLayoutEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { isEmpty } from 'lodash'
 
 import { executeScriptTags } from 'rdmo/core/assets/js/utils/meta'
 
 
-const Html = ({ id = null, html = '' }) => {
+const Html = ({ id = null, className = '', html = '' }) => {
   const ref = useRef()
 
   // if html contains a <script> tag, and settings.TEMPLATES_EXECUTE_SCRIPT_TAGS is True,
@@ -27,12 +27,13 @@ const Html = ({ id = null, html = '' }) => {
   }
 
   return !isEmpty(html) && (
-    <span ref={ref} id={id} dangerouslySetInnerHTML={{ __html: html }} />
+    <span ref={ref} id={id} className={className} dangerouslySetInnerHTML={{ __html: html }} />
   )
 }
 
 Html.propTypes = {
   id: PropTypes.string,
+  className: PropTypes.string,
   html: PropTypes.string
 }
 
diff --git a/rdmo/core/assets/js/components/Img.js b/rdmo/core/assets/js/components/Img.js
new file mode 100644
index 0000000000..c31ed257cd
--- /dev/null
+++ b/rdmo/core/assets/js/components/Img.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { isEmpty } from 'lodash'
+
+import { staticUrl } from 'rdmo/core/assets/js/utils/meta'
+
+const Img = ({ src, alt, className }) => {
+  return !isEmpty(src) && (
+    <img src={staticUrl + src} alt={alt} className={className} />
+  )
+}
+
+Img.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  className: PropTypes.string,
+}
+
+export default Img
diff --git a/rdmo/core/assets/js/components/Input.js b/rdmo/core/assets/js/components/Input.js
new file mode 100644
index 0000000000..c5e8e3e863
--- /dev/null
+++ b/rdmo/core/assets/js/components/Input.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty, uniqueId } from 'lodash'
+
+const Input = ({ type = 'text', className, label, placeholder, help, disabled, errors, value, onChange }) => {
+  const id = uniqueId('input-')
+
+  return (
+    <div className={classNames('form-group', className)}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <input
+        id={id}
+        type={type}
+        className={
+          classNames('form-control', {
+            'is-invalid': !isEmpty(errors)
+          })
+        }
+        placeholder={placeholder}
+        disabled={disabled}
+        value={value}
+        onChange={event => onChange(event.target.value)}
+      />
+      {
+        errors && (
+          <div className="invalid-feedback">
+            {errors.map((error, index) => <div key={index}>{error}</div>)}
+          </div>
+        )
+      }
+      {
+        help && <div className="form-text">{help}</div>
+      }
+    </div>
+  )
+}
+
+Input.propTypes = {
+  type: PropTypes.string,
+  className: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  help: PropTypes.string,
+  disabled: PropTypes.bool,
+  errors: PropTypes.array,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default Input
diff --git a/rdmo/core/assets/js/components/InputDebounced.js b/rdmo/core/assets/js/components/InputDebounced.js
new file mode 100644
index 0000000000..eb850eb251
--- /dev/null
+++ b/rdmo/core/assets/js/components/InputDebounced.js
@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDebouncedCallback } from 'use-debounce'
+
+import Input from './Input'
+
+const InputDebounced = ({ value, onChange, ...props }) => {
+
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => setInputValue(value), [value])
+
+  const debouncedOnChange = useDebouncedCallback((value) => onChange(value), 500)
+
+  return (
+    <Input
+      {...props}
+      value={inputValue}
+      onChange={
+        (value) => {
+          setInputValue(value)
+          debouncedOnChange(value)
+        }
+      }
+    />
+  )
+}
+
+InputDebounced.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default InputDebounced
diff --git a/rdmo/core/assets/js/components/Link.js b/rdmo/core/assets/js/components/Link.js
index 220eceb4db..aeaafd337c 100644
--- a/rdmo/core/assets/js/components/Link.js
+++ b/rdmo/core/assets/js/components/Link.js
@@ -2,23 +2,24 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-const Link = ({ href='', title, className, disabled=false, onClick, children }) => {
-    const handleClick = (event) => {
-        event.preventDefault()
-        if (!disabled) onClick()
-    }
+const Link = ({ href = '', title, className, disabled = false, onClick, children }) => {
+  const handleClick = (event) => {
+    event.preventDefault()
+    if (!disabled) onClick()
+  }
 
-    const classnames = classNames({
-        [className]: true,
-        disabled: disabled
-    })
+  const classnames = classNames({
+    [className]: true,
+    disabled: disabled
+  })
 
-    return (
-        <a href={href} title={title} className={classnames}
-           onClick={event => handleClick(event)}>
-            {children}
-        </a>
-    )
+  return (
+    <a
+      href={href} title={title} className={classnames}
+      onClick={event => handleClick(event)}>
+      {children}
+    </a>
+  )
 }
 
 Link.propTypes = {
diff --git a/rdmo/core/assets/js/components/LinkButton.js b/rdmo/core/assets/js/components/LinkButton.js
index ba0772f77b..53fac2258c 100644
--- a/rdmo/core/assets/js/components/LinkButton.js
+++ b/rdmo/core/assets/js/components/LinkButton.js
@@ -1,19 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const LinkButton = ({ title, className, disabled=false, onClick, children }) => {
-    const handleClick = (event) => {
-        event.preventDefault()
-        onClick()
-    }
+const LinkButton = ({ title, className, disabled = false, onClick, children }) => {
+  const handleClick = (event) => {
+    event.preventDefault()
+    onClick()
+  }
 
-    return (
-        <button type="button" title={title} aria-label={title}
-                className={'btn-link ' + className} disabled={disabled}
-                onClick={event => handleClick(event)}>
-            {children}
-        </button>
-    )
+  return (
+    <button
+      type="button" title={title} aria-label={title}
+      className={'btn-link ' + className} disabled={disabled}
+      onClick={event => handleClick(event)}>
+      {children}
+    </button>
+  )
 }
 
 LinkButton.propTypes = {
diff --git a/rdmo/core/assets/js/components/Modal.js b/rdmo/core/assets/js/components/Modal.js
index 1d5e39977d..8f7b89d3b6 100644
--- a/rdmo/core/assets/js/components/Modal.js
+++ b/rdmo/core/assets/js/components/Modal.js
@@ -1,47 +1,86 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { Modal as BootstrapModal } from 'react-bootstrap'
+import { Modal as BootstrapModal } from 'bootstrap'
 
-const Modal = ({ title, show, modalProps, submitLabel, submitProps, onClose, onSubmit, children, buttons }) => {
-  return (
-    <BootstrapModal className="element-modal" onHide={onClose} show={show} {...modalProps}>
-      <BootstrapModal.Header closeButton>
-        <h2 className="modal-title">{title}</h2>
-      </BootstrapModal.Header>
-      {
-        children && (
-          <BootstrapModal.Body>
-            { children }
-          </BootstrapModal.Body>
-        )
+const Modal = ({ title, show, onClose, onSubmit, submitLabel, submitProps, children, modalProps = {}, size = '' }) => {
+  const modalRef = useRef(null)
+
+  useEffect(() => {
+    const modalElement = modalRef.current
+    if (!modalElement) return
+
+    const modal = BootstrapModal.getOrCreateInstance(modalElement, {
+      backdrop: 'static',
+      keyboard: true,
+      ...modalProps
+    })
+
+    const handleHide = () => {
+      if (show) {
+        onClose()
       }
-      <BootstrapModal.Footer>
-        <button type="button" className="btn btn-default" onClick={onClose}>
-          {gettext('Close')}
-        </button>
-        {buttons}
-        {
-          onSubmit && (
-            <button type="button" className="btn btn-primary" onClick={onSubmit} {...submitProps}>
-              {submitLabel ?? gettext('Save')}
+    }
+
+    modalElement.addEventListener('hide.bs.modal', handleHide)
+
+    if (show) {
+      modal.show()
+    }
+
+    return () => {
+      modalElement.removeEventListener('hide.bs.modal', handleHide)
+      modal.hide()
+    }
+  }, [show])
+
+  return (
+    <div ref={modalRef} className="modal fade" tabIndex="-1" aria-hidden={!show}>
+      <div className={`modal-dialog ${size}`}>
+        <div className="modal-content element-modal">
+          <div className="modal-header">
+            <h2 className="modal-title">{title}</h2>
+            <button type="button" className="btn-close" onClick={onClose} aria-label={gettext('Close')}></button>
+          </div>
+
+          {
+            children && (
+              <div className="modal-body">
+                {children}
+              </div>
+            )
+          }
+
+          <div className="modal-footer">
+            {
+              onSubmit && (
+                <button type="button" className="btn btn-primary" onClick={onSubmit} {...submitProps}>
+                  {submitLabel ?? gettext('Save')}
+                </button>
+              )
+            }
+            <button type="button" className="btn btn-secondary" onClick={onClose}>
+              {gettext('Cancel')}
             </button>
-          )
-        }
-      </BootstrapModal.Footer>
-    </BootstrapModal>
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }
 
 Modal.propTypes = {
   title: PropTypes.string.isRequired,
   show: PropTypes.bool.isRequired,
-  modalProps: PropTypes.object,
-  submitLabel: PropTypes.string,
-  submitProps: PropTypes.object,
   onClose: PropTypes.func.isRequired,
   onSubmit: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  buttons: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  submitLabel: PropTypes.string,
+  submitProps: PropTypes.object,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  modalProps: PropTypes.object,
+  size: PropTypes.string
 }
 
 export default Modal
diff --git a/rdmo/core/assets/js/components/SearchField.js b/rdmo/core/assets/js/components/SearchField.js
index 3a9b6d66d3..a856792190 100644
--- a/rdmo/core/assets/js/components/SearchField.js
+++ b/rdmo/core/assets/js/components/SearchField.js
@@ -23,27 +23,24 @@ const SearchField = ({ value, onChange, onSearch, placeholder }) => {
   }
 
   return (
-    <div className="form-group mb-0">
-      <div className="input-group">
-        <input
-          type="text"
-          className="form-control"
-          placeholder={placeholder}
-          value={value}
-          onChange={(e) => handleChange(e.target.value)}
-          onKeyDown={handleKeyDown}
-          aria-label={gettext('Search')}
-        />
-        <span className="input-group-btn">
-          <button type="button" className="btn btn-default" onClick={handleButtonClick}
-                  title={gettext('Reset')} aria-label={gettext('Reset')}>
-            <span className="fa fa-times"></span>
-          </button>
-          <button type="submit" className="btn btn-primary" onClick={handleSearch}>
-            {gettext('Search')}
-          </button>
-        </span>
-      </div>
+    <div className="input-group mb-0 search-field">
+      <input
+        type="text"
+        className="form-control"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => handleChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        aria-label={gettext('Search')}
+      />
+      <button
+        type="button" className="btn btn-light btn-reset border" onClick={handleButtonClick}
+        title={gettext('Reset')} aria-label={gettext('Reset')}>
+        <span className="bi bi-x"></span>
+      </button>
+      <button type="button" className="btn btn-primary" onClick={handleSearch}>
+        {gettext('Search')}
+      </button>
     </div>
   )
 }
diff --git a/rdmo/core/assets/js/components/Select.js b/rdmo/core/assets/js/components/Select.js
index ef65c0f7fb..22961c3f02 100644
--- a/rdmo/core/assets/js/components/Select.js
+++ b/rdmo/core/assets/js/components/Select.js
@@ -2,37 +2,35 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactSelect from 'react-select'
 
-const Select = ({ options, onChange, placeholder, value }) => {
+const Select = ({ options, onChange, value, ...props }) => {
   const selectedOption = options.find(option => option.value === value) || null
+
   const handleChange = (selected) => {
     onChange(selected ? selected.value : null)
   }
 
   return (
-    <div className="form-group mb-0">
-      <ReactSelect
-        className="react-select"
-        classNamePrefix="react-select"
-        options={options}
-        onChange={handleChange}
-        value={selectedOption}
-        isClearable
-        placeholder={placeholder}
-      />
-    </div>
+    <ReactSelect
+      className="react-select"
+      classNamePrefix="react-select"
+      options={options}
+      onChange={handleChange}
+      value={selectedOption}
+      isClearable
+      {...props}
+    />
   )
 }
 
 Select.propTypes = {
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      value: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
       label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
     })
   ).isRequired,
   onChange: PropTypes.func,
-  placeholder: PropTypes.string
 }
 
 export default Select
diff --git a/rdmo/core/assets/js/components/Textarea.js b/rdmo/core/assets/js/components/Textarea.js
new file mode 100644
index 0000000000..be9530aafb
--- /dev/null
+++ b/rdmo/core/assets/js/components/Textarea.js
@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty, uniqueId } from 'lodash'
+
+const Textarea = ({ rows, className, label, placeholder, help, disabled, errors, value, onChange }) => {
+  const id = uniqueId('input-')
+
+  return (
+    <div className={classNames('form-group', className)}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <textarea
+        rows={rows}
+        id={id}
+        className={
+          classNames('form-control', {
+            'is-invalid': !isEmpty(errors)
+          })
+        }
+        placeholder={placeholder}
+        disabled={disabled}
+        value={value}
+        onChange={event => onChange(event.target.value)}
+      />
+      {
+        errors && (
+          <div className="invalid-feedback">
+            {errors.map((error, index) => <div key={index}>{error}</div>)}
+          </div>
+        )
+      }
+      {
+        help && <div className="form-text">{help}</div>
+      }
+    </div>
+  )
+}
+
+Textarea.propTypes = {
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  help: PropTypes.string,
+  disabled: PropTypes.bool,
+  errors: PropTypes.array,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default Textarea
diff --git a/rdmo/core/assets/js/components/TextareaDebounced.js b/rdmo/core/assets/js/components/TextareaDebounced.js
new file mode 100644
index 0000000000..1a2bcee129
--- /dev/null
+++ b/rdmo/core/assets/js/components/TextareaDebounced.js
@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDebouncedCallback } from 'use-debounce'
+
+import Textarea from './Textarea'
+
+const TextareaDebounced = ({ value, onChange, ...props }) => {
+
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => setInputValue(value), [value])
+
+  const debouncedOnChange = useDebouncedCallback((value) => onChange(value), 500)
+
+  return (
+    <Textarea
+      {...props}
+      value={inputValue}
+      onChange={
+        (value) => {
+          setInputValue(value)
+          debouncedOnChange(value)
+        }
+      }
+    />
+  )
+}
+
+TextareaDebounced.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default TextareaDebounced
diff --git a/rdmo/core/assets/js/components/Tooltip.js b/rdmo/core/assets/js/components/Tooltip.js
new file mode 100644
index 0000000000..58aa80362e
--- /dev/null
+++ b/rdmo/core/assets/js/components/Tooltip.js
@@ -0,0 +1,33 @@
+import React, { useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import { renderToString } from 'react-dom/server'
+import { Tooltip as BootstrapTooltip } from 'bootstrap'
+
+const Tooltip = ({ title, children, placement = 'bottom', tooltipProps = {} }) => {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (title) {
+      // console.log(renderToString(title))
+      const t = new BootstrapTooltip(ref.current, {
+        title: renderToString(title),
+        placement,
+        html: true,
+        delay: 200,
+        ...tooltipProps
+      })
+      return () => t.dispose()
+    }
+  }, [title])
+
+  return React.cloneElement(children, { ref })
+}
+
+Tooltip.propTypes = {
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  placement: PropTypes.string,
+  tooltipProps: PropTypes.object,
+}
+
+export default Tooltip
diff --git a/rdmo/core/assets/js/components/Truncate.js b/rdmo/core/assets/js/components/Truncate.js
new file mode 100644
index 0000000000..dfc795914c
--- /dev/null
+++ b/rdmo/core/assets/js/components/Truncate.js
@@ -0,0 +1,30 @@
+import React, { useLayoutEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
+const Truncate = ({ text }) => {
+  const ref = useRef(null)
+
+  useLayoutEffect(() => {
+    const parent = ref.current.parentElement
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (ref.current) {
+        ref.current.style.width = `${parent.clientWidth}px`
+      }
+    })
+
+    resizeObserver.observe(parent)
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  return (
+    <span className="truncate" ref={ref}>{text}</span>
+  )
+}
+
+Truncate.propTypes = {
+  text: PropTypes.string.isRequired
+}
+
+export default Truncate
diff --git a/rdmo/core/assets/js/components/forms/Input.js b/rdmo/core/assets/js/components/forms/Input.js
new file mode 100644
index 0000000000..5659f41110
--- /dev/null
+++ b/rdmo/core/assets/js/components/forms/Input.js
@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { useDebouncedCallback } from 'use-debounce'
+import { isEmpty, isNil, uniqueId } from 'lodash'
+
+const Input = ({
+  type = 'text',
+  className,
+  debounce,
+  label,
+  placeholder,
+  help,
+  isDisabled,
+  errors,
+  value,
+  onChange
+}) => {
+  const id = uniqueId('input-')
+
+  // store the value in a local state (only when debouncing)
+  const [inputValue, setInputValue] = isNil(debounce) ? [value, () => {}] : useState(value)
+
+  // use the debounce hook on the onChange callback (only when debouncing)
+  const callOnChange = isNil(debounce) ? (
+    (value) => onChange(value)
+  ) : useDebouncedCallback((value) => onChange(value), debounce)
+
+  // update the local state if the value prop changes (only when debouncing)
+  useEffect(() => setInputValue(value), [value])
+
+  const handleChange = (event) => {
+    const value = event.target.value
+
+    setInputValue(value)  // will update the local state (only when debouncing)
+    callOnChange(value)   // will call onChange (with or without debouncing)
+  }
+
+  return (
+    <div className={classNames('form-group', className)}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <input
+        id={id}
+        type={type}
+        className={
+          classNames('form-control', {
+            'is-invalid': !isEmpty(errors)
+          })
+        }
+        placeholder={placeholder}
+        disabled={isDisabled}
+        value={inputValue}
+        onChange={handleChange}
+      />
+      {
+        errors && (
+          <div className="invalid-feedback">
+            {errors.map((error, index) => <div key={index}>{error}</div>)}
+          </div>
+        )
+      }
+      {
+        help && <div className="form-text">{help}</div>
+      }
+    </div>
+  )
+}
+
+Input.propTypes = {
+  type: PropTypes.string,
+  className: PropTypes.string,
+  debounce: PropTypes.number,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  help: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  isDisabled: PropTypes.bool,
+  errors: PropTypes.array,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default Input
diff --git a/rdmo/core/assets/js/components/forms/Select.js b/rdmo/core/assets/js/components/forms/Select.js
new file mode 100644
index 0000000000..cf96657840
--- /dev/null
+++ b/rdmo/core/assets/js/components/forms/Select.js
@@ -0,0 +1,92 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ReactSelect from 'react-select'
+import classNames from 'classnames'
+import { isArray, isEmpty, isNil, uniqueId } from 'lodash'
+
+const Select = ({
+  className,
+  label,
+  help,
+  placeholder,
+  isClearable,
+  isDisabled,
+  isMulti,
+  options,
+  errors,
+  value,
+  onChange
+}) => {
+  const id = uniqueId('select-')
+
+  // lookup value(s) in the options array
+  const getValue = () => (
+    isArray(value) ? (
+      options.filter(option => (value.includes(option.value)))
+    ) : options.find(option => (option.value == value))
+  )
+
+  const handleChange = (option) => {
+    if (isNil(option)) {
+      onChange(null)
+    } else if (isArray(option)) {
+      onChange(option.map(option => option.value))
+    } else {
+      onChange(option.value)
+    }
+  }
+
+  return (
+    <div className={classNames('form-group', className)}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <ReactSelect
+        classNamePrefix="react-select"
+        className={
+          classNames('react-select', {
+            'is-invalid': !isEmpty(errors)
+          })
+        }
+        classNames={
+          {
+            control: () => classNames('form-control')
+          }
+        }
+        placeholder={placeholder}
+        isClearable={isClearable}
+        isDisabled={isDisabled}
+        isMulti={isMulti}
+        options={options}
+        value={getValue()}
+        onChange={handleChange}
+      />
+
+      {
+        errors && (
+          <div className="invalid-feedback">
+            {errors.map((error, index) => <div key={index}>{error}</div>)}
+          </div>
+        )
+      }
+      {
+        help && <div className="form-text">{help}</div>
+      }
+    </div>
+  )
+}
+
+Select.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string,
+  help: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  placeholder: PropTypes.string,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isMulti: PropTypes.bool,
+  options: PropTypes.array,
+  errors: PropTypes.array,
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func.isRequired
+}
+
+export default Select
diff --git a/rdmo/core/assets/js/components/forms/Textarea.js b/rdmo/core/assets/js/components/forms/Textarea.js
new file mode 100644
index 0000000000..ecddec85d9
--- /dev/null
+++ b/rdmo/core/assets/js/components/forms/Textarea.js
@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { useDebouncedCallback } from 'use-debounce'
+import { isEmpty, isNil, uniqueId } from 'lodash'
+
+const Textarea = ({ rows, className, debounce, label, placeholder, help, isDisabled, errors, value, onChange }) => {
+  const id = uniqueId('textarea-')
+
+  // store the value in a local state (only when debouncing)
+  const [textareaValue, setTextareaValue] = isNil(debounce) ? [value, () => {}] : useState(value)
+
+  // use the debounce hook on the onChange callback (only when debouncing)
+  const callOnChange = isNil(debounce) ? (
+    (value) => onChange(value)
+  ) : useDebouncedCallback((value) => onChange(value), debounce)
+
+  // update the local state if the value prop changes (only when debouncing)
+  useEffect(() => setTextareaValue(value), [value])
+
+  const handleChange = (event) => {
+    const value = event.target.value
+
+    setTextareaValue(value)  // will update the local state (only when debouncing)
+    callOnChange(value)      // will call onChange (with or without debouncing)
+  }
+
+  return (
+    <div className={classNames('form-group', className)}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <textarea
+        rows={rows}
+        id={id}
+        className={
+          classNames('form-control', {
+            'is-invalid': !isEmpty(errors)
+          })
+        }
+        placeholder={placeholder}
+        disabled={isDisabled}
+        value={textareaValue}
+        onChange={handleChange}
+      />
+      {
+        errors && (
+          <div className="invalid-feedback">
+            {errors.map((error, index) => <div key={index}>{error}</div>)}
+          </div>
+        )
+      }
+      {
+        help && <div className="form-text">{help}</div>
+      }
+    </div>
+  )
+}
+
+Textarea.propTypes = {
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+  debounce: PropTypes.number,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  help: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  isDisabled: PropTypes.bool,
+  errors: PropTypes.array,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default Textarea
diff --git a/rdmo/core/assets/js/components/forms/index.js b/rdmo/core/assets/js/components/forms/index.js
new file mode 100644
index 0000000000..63446ecea6
--- /dev/null
+++ b/rdmo/core/assets/js/components/forms/index.js
@@ -0,0 +1,3 @@
+export { default as Input } from './Input'
+export { default as Select } from './Select'
+export { default as Textarea } from './Textarea'
diff --git a/rdmo/core/assets/js/components/index.js b/rdmo/core/assets/js/components/index.js
index b69b60e4cd..50e2b4d25b 100644
--- a/rdmo/core/assets/js/components/index.js
+++ b/rdmo/core/assets/js/components/index.js
@@ -1,7 +1,7 @@
+export { default as Dropzone } from './Dropzone'
 export { default as FileUploadButton } from './FileUploadButton'
 export { default as Link } from './Link'
 export { default as LinkButton } from './LinkButton'
 export { default as Modal } from './Modal'
-export { default as UploadDropZone } from './UploadDropZone'
 export { default as SearchField } from './SearchField'
 export { default as Select } from './Select'
diff --git a/rdmo/core/assets/js/home.js b/rdmo/core/assets/js/home.js
new file mode 100644
index 0000000000..96c7d6ad77
--- /dev/null
+++ b/rdmo/core/assets/js/home.js
@@ -0,0 +1,14 @@
+window.loopHeaderBackgroundImage = (timeout) => {
+  const images = document.querySelectorAll('#header .header-image')
+
+  let index = 0
+
+  const setHeaderBackgroundImage = () => {
+    images[index].classList.remove('header-image-visible')
+    index = (index == images.length - 1) ? 0 : index + 1
+    images[index].classList.toggle('header-image-visible')
+    setTimeout(() => setHeaderBackgroundImage(), timeout)
+  }
+
+  setTimeout(() => setHeaderBackgroundImage(), timeout)
+}
diff --git a/rdmo/core/assets/js/hooks/useScrollToTop.js b/rdmo/core/assets/js/hooks/useScrollToTop.js
index 16e600b80e..3da381eeb0 100644
--- a/rdmo/core/assets/js/hooks/useScrollToTop.js
+++ b/rdmo/core/assets/js/hooks/useScrollToTop.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 const useScrollToTop = () => {
   const [showTopButton, setShowTopButton] = useState(false)
diff --git a/rdmo/core/assets/js/reducers/catalogsReducer.js b/rdmo/core/assets/js/reducers/catalogsReducer.js
new file mode 100644
index 0000000000..2fadc984ae
--- /dev/null
+++ b/rdmo/core/assets/js/reducers/catalogsReducer.js
@@ -0,0 +1,16 @@
+import { FETCH_CATALOGS_ERROR, FETCH_CATALOGS_INIT, FETCH_CATALOGS_SUCCESS } from '../actions/actionTypes'
+
+const initialState = {}
+
+export default function settingsReducer(state = initialState, action) {
+  switch(action.type) {
+    case FETCH_CATALOGS_INIT:
+      return {...state, ...action.catalogs}
+    case FETCH_CATALOGS_SUCCESS:
+      return {...state, ...action.catalogs}
+    case FETCH_CATALOGS_ERROR:
+      return {...state, errors: action.error.errors}
+    default:
+      return state
+  }
+}
diff --git a/rdmo/core/assets/js/reducers/configReducer.js b/rdmo/core/assets/js/reducers/configReducer.js
index 9001d4e8c4..2f4ef75955 100644
--- a/rdmo/core/assets/js/reducers/configReducer.js
+++ b/rdmo/core/assets/js/reducers/configReducer.js
@@ -1,6 +1,5 @@
-import { updateConfig, deleteConfig, setConfigInLocalStorage, deleteConfigInLocalStorage } from '../utils/config'
-
 import { DELETE_CONFIG, UPDATE_CONFIG } from '../actions/actionTypes'
+import { deleteConfig, deleteConfigInLocalStorage, setConfigInLocalStorage, updateConfig } from '../utils/config'
 
 const initialState = {}
 
diff --git a/rdmo/core/assets/js/reducers/userReducer.js b/rdmo/core/assets/js/reducers/userReducer.js
index 8c76285f56..b9b073b460 100644
--- a/rdmo/core/assets/js/reducers/userReducer.js
+++ b/rdmo/core/assets/js/reducers/userReducer.js
@@ -13,6 +13,6 @@ export default function userReducer(state = initialState, action) {
     case FETCH_CURRENT_USER_ERROR:
       return {...state, errors: action.error.errors}
     default:
-       return state
+      return state
   }
 }
diff --git a/rdmo/core/assets/js/utils/config.js b/rdmo/core/assets/js/utils/config.js
index 1e9cf000fd..a5ec300a23 100644
--- a/rdmo/core/assets/js/utils/config.js
+++ b/rdmo/core/assets/js/utils/config.js
@@ -33,10 +33,10 @@ const deleteConfigInLocalStorage = (prefix, path) => {
 const isTruthy = (value) => [true, 'true'].includes(value)
 
 export {
-  updateConfig,
   deleteConfig,
+  deleteConfigInLocalStorage,
   getConfigFromLocalStorage,
+  isTruthy,
   setConfigInLocalStorage,
-  deleteConfigInLocalStorage,
-  isTruthy
+  updateConfig
 }
diff --git a/rdmo/core/assets/js/utils/date.js b/rdmo/core/assets/js/utils/date.js
index f2c8a31b15..acbfb5ecd9 100644
--- a/rdmo/core/assets/js/utils/date.js
+++ b/rdmo/core/assets/js/utils/date.js
@@ -1,5 +1,5 @@
-import { enGB, de, it, es, fr } from 'date-fns/locale'
 import { parse, set } from 'date-fns'
+import { de, enGB, es, fr, it } from 'date-fns/locale'
 
 import lang from 'rdmo/core/assets/js/utils/lang'
 
diff --git a/rdmo/core/assets/scss/app.scss b/rdmo/core/assets/scss/app.scss
new file mode 100644
index 0000000000..8d124ff442
--- /dev/null
+++ b/rdmo/core/assets/scss/app.scss
@@ -0,0 +1 @@
+// This file produces an empty app.css stylesheet, which can be overloaded in a theme.
diff --git a/rdmo/core/assets/scss/base.scss b/rdmo/core/assets/scss/base.scss
index be6083d61a..2cb4e72402 100644
--- a/rdmo/core/assets/scss/base.scss
+++ b/rdmo/core/assets/scss/base.scss
@@ -1,7 +1,13 @@
-$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
-
-@import '~bootstrap-sass';
-@import '~font-awesome/css/font-awesome.css';
-@import 'react-datepicker/dist/react-datepicker.css';
-
-@import 'utils.scss'
+@import 'base/card';
+@import 'base/code';
+@import 'base/content';
+@import 'base/datepicker';
+@import 'base/dropdown';
+@import 'base/dropzone';
+@import 'base/forms';
+@import 'base/nav';
+@import 'base/select';
+@import 'base/sidebar';
+@import 'base/table';
+@import 'base/typography';
+@import 'base/variables';
diff --git a/rdmo/core/assets/scss/base/card.scss b/rdmo/core/assets/scss/base/card.scss
new file mode 100644
index 0000000000..f3c8987911
--- /dev/null
+++ b/rdmo/core/assets/scss/base/card.scss
@@ -0,0 +1,11 @@
+.card {
+    &.card-tile {
+        --bs-card-border-radius: 0;
+        --bs-card-inner-border-radius: 0;
+
+        --bs-card-cap-bg: var(--rdmo-sidebar-bg);
+
+        box-shadow: var(--rdmo-box-shadow);
+        border: none;
+    }
+}
diff --git a/rdmo/core/assets/scss/base/code.scss b/rdmo/core/assets/scss/base/code.scss
new file mode 100644
index 0000000000..9909ce22a4
--- /dev/null
+++ b/rdmo/core/assets/scss/base/code.scss
@@ -0,0 +1,59 @@
+code {
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--bs-border-radius);
+
+    font-size: 0.85rem;
+
+    word-wrap: break-word;
+
+    &.code-questions {
+        color: rgb(16, 31, 112);
+        background-color: rgba(16, 31, 112, 0.1);
+    }
+    &.code-domain {
+        color: rgb(199, 37, 78);
+        background-color: rgb(249, 242, 244);
+    }
+    &.code-options {
+        color: rgb(255, 100, 0);
+        background-color: rgba(255, 100, 0, 0.1);
+    }
+    &.code-options-provider {
+        color: white;
+        background-color: rgba(255, 100, 0, 0.8);
+    }
+    &.code-conditions {
+        color: rgb(128, 0, 128);
+        background-color: rgba(128, 0, 128, 0.1);
+    }
+    &.code-tasks {
+        color: rgb(128, 0, 0);
+        background-color: rgba(128, 0, 0, 0.1);
+    }
+    &.code-views {
+        color: rgb(0, 128, 0);
+        background-color: rgba(0, 128, 0, 0.1);
+    }
+    &.code-order {
+        color: rgb(96, 96, 96);
+        background-color: rgba(96, 96, 96, 0.1);
+    }
+    &.code-default {
+        color: rgb(96, 96, 96);
+        background-color: rgba(96, 96, 96, 0.1);
+    }
+    &.code-optional {
+        color: white;
+        background-color: rgb(119.085, 119.085, 119.085);
+    }
+    &.code-import {
+        color: black;
+        background-color: rgba(96, 96, 96, 0.1);
+    }
+}
+
+a:hover {
+    code {
+        text-decoration: underline;
+    }
+}
diff --git a/rdmo/core/assets/scss/base/content.scss b/rdmo/core/assets/scss/base/content.scss
new file mode 100644
index 0000000000..1ae66539af
--- /dev/null
+++ b/rdmo/core/assets/scss/base/content.scss
@@ -0,0 +1,96 @@
+$image-transition: opacity 2s ease-in-out;
+
+html, body {
+  background-color: var(--rdmo-color-bg);
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+
+    padding-top: 56px;
+    height: 100vh;
+}
+
+header {
+    color: var(--rdmo-color-header);
+    background-color: var(--rdmo-color-header-bg);
+
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    a:not(.btn) ,
+    button.link {
+        color: var(--rdmo-color-header);
+        &:hover {
+            color: var(--rdmo-color-header);
+            text-decoration: underline;
+        }
+    }
+
+    .container {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+    }
+
+    .header-image {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        pointer-events: none;
+
+        opacity: 0;
+        &.header-image-visible {
+            opacity: 1;
+        }
+
+        -webkit-transition: $image-transition;
+        -moz-transition: $image-transition;
+        -ms-transition: $image-transition;
+        -o-transition: $image-transition;
+        transition: $image-transition;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+
+        p.attribution {
+            position: absolute;
+            bottom: 0.25rem;
+            right: 0.5rem;
+            z-index: 1;
+            margin: 0;
+
+            font-size: small;
+        }
+    }
+
+    .container {
+        position: relative;
+        z-index: 1;
+        color: white;
+    }
+}
+
+main {
+    flex-grow: 1;
+}
+
+section {
+    &:nth-child(even) {
+        background-color: var(--rdmo-color-alt-bg);
+    }
+}
+
+footer {
+    color: var(--rdmo-color-footer);
+    background-color: var(--rdmo-color-footer-bg);
+
+    .logo {
+        max-height: 6rem;
+    }
+}
diff --git a/rdmo/core/assets/scss/base/datepicker.scss b/rdmo/core/assets/scss/base/datepicker.scss
new file mode 100644
index 0000000000..69ae0b6772
--- /dev/null
+++ b/rdmo/core/assets/scss/base/datepicker.scss
@@ -0,0 +1,14 @@
+@import "react-datepicker/dist/react-datepicker.css";
+
+.react-datepicker {
+    h1, h2, h3, h4, h5, h6 {
+        font-family: var(--rdmo-font);
+        font-weight: normal;
+    }
+}
+
+.react-datepicker__close-icon::after {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    font-size: 1.5em;
+}
diff --git a/rdmo/core/assets/scss/base/dropdown.scss b/rdmo/core/assets/scss/base/dropdown.scss
new file mode 100644
index 0000000000..bbde81f936
--- /dev/null
+++ b/rdmo/core/assets/scss/base/dropdown.scss
@@ -0,0 +1,18 @@
+.dropdown-menu {
+    --bs-dropdown-font-size: 0.9rem;
+    --bs-dropdown-link-active-color: white;
+    --bs-dropdown-link-active-bg: var(--rdmo-link-color);
+
+    .dropdown-header {
+        font-size: var(--bs-dropdown-font-size);
+    }
+
+    .dropdown-item {
+        &button {
+            cursor: pointer;
+        }
+        p {
+            margin: 0;
+        }
+    }
+}
diff --git a/rdmo/core/assets/scss/base/dropzone.scss b/rdmo/core/assets/scss/base/dropzone.scss
new file mode 100644
index 0000000000..63f6804587
--- /dev/null
+++ b/rdmo/core/assets/scss/base/dropzone.scss
@@ -0,0 +1,21 @@
+.dropzone {
+  border: 2px dashed var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  padding: 1rem 2rem;
+  text-align: center;
+}
+
+.dropzone:focus {
+  border-color: var(--bs-primary);
+}
+
+/* Add additional styling for when files are being dragged over the dropzone */
+.dropzone.drag-active {
+  color: var(--bs-primary);
+  border-color: var(--bs-primary);
+}
+
+/* Add styles for when the dropzone is disabled */
+.dropzone.disabled {
+  opacity: 0.6;
+}
diff --git a/rdmo/core/assets/scss/base/forms.scss b/rdmo/core/assets/scss/base/forms.scss
new file mode 100644
index 0000000000..f2fdaf2bbc
--- /dev/null
+++ b/rdmo/core/assets/scss/base/forms.scss
@@ -0,0 +1,20 @@
+:root {
+    --bs-border-radius: 0.25rem;
+    --bs-border-radius-sm: 0.15rem;
+    --bs-border-radius-lg: 0.375rem;
+}
+
+label {
+    font-weight: bold;
+    font-size: .875rem;
+}
+
+.btn-rounded {
+    --bs-btn-border-radius: 2rem;
+}
+
+// the search field component in projects
+.btn-reset {
+    font-size: 1.5rem;
+    line-height: 1rem;
+}
diff --git a/rdmo/core/assets/scss/base/nav.scss b/rdmo/core/assets/scss/base/nav.scss
new file mode 100644
index 0000000000..010256f97b
--- /dev/null
+++ b/rdmo/core/assets/scss/base/nav.scss
@@ -0,0 +1,51 @@
+@import '../breakpoints';
+
+nav.navbar {
+    --rdmo-nav-link-hover-bg: var(--rdmo-sidebar-bg);
+
+    --bs-navbar-color: var(--rdmo-navbar-color);
+    --bs-navbar-hover-color: var(--rdmo-navbar-hover-color);
+
+    --bs-navbar-brand-color: var(--bs-navbar-color);
+    --bs-navbar-brand-hover-color: var(--bs-navbar-hover-color);
+
+    --bs-navbar-active-color: var(--bs-navbar-hover-color);
+    --bs-navbar-active-hover-color: var(--bs-navbar-hover-color);
+
+    background-color: var(--rdmo-navbar-bg);
+
+    .container-fluid {
+        @media only screen and (min-width: $grid-breakpoint-md) {
+            padding-left: 2.5rem;
+            padding-right: 3rem;
+        }
+    }
+
+    .dropdown-menu {
+        --bs-nav-link-color: var(--rdmo-link-color);
+        --bs-nav-link-hover-color: var(--rdmo-link-hover-color);
+        --bs-nav-link-active-color: var(--rdmo-link-color);
+
+        .nav-link:hover:not(.active) {
+            background-color: var(--rdmo-nav-link-hover-bg);
+        }
+    }
+
+    .nav-link:focus:not(.active):not(:hover) {
+        color: var(--bs-navbar-color);
+    }
+}
+
+nav.nav-pills {
+    --rdmo-nav-link-hover-bg: #ddd;
+
+    --bs-nav-link-color: var(--rdmo-link-color);
+    --bs-nav-link-hover-color: var(--rdmo-link-hover-color);
+
+    --bs-nav-pills-link-active-color: #fff;
+    --bs-nav-pills-link-active-bg: var(--rdmo-link-color);
+
+    .nav-link:hover:not(.active) {
+        background-color: var(--rdmo-nav-link-hover-bg);
+    }
+}
diff --git a/rdmo/core/assets/scss/base/select.scss b/rdmo/core/assets/scss/base/select.scss
new file mode 100644
index 0000000000..dc063b4d69
--- /dev/null
+++ b/rdmo/core/assets/scss/base/select.scss
@@ -0,0 +1,14 @@
+.react-select {
+    .react-select__control,
+    .react-select__control:hover {
+        border: var(--bs-border-width) solid var(--bs-border-color);
+    }
+
+    .react-select__control--is-focused,
+    .react-select__control--is-focused:hover {
+        color: red;
+        border-color: rgb(134, 182.5, 254);
+        outline: 0;
+        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    }
+}
diff --git a/rdmo/core/assets/scss/base/sidebar.scss b/rdmo/core/assets/scss/base/sidebar.scss
new file mode 100644
index 0000000000..9ce875aa4b
--- /dev/null
+++ b/rdmo/core/assets/scss/base/sidebar.scss
@@ -0,0 +1,42 @@
+@import '../breakpoints';
+
+:root {
+    --rdmo-sidebar-width: 3.5rem;
+    --rdmo-sidebar-lg-width: 18rem;
+    --rdmo-sidebar-font-size: 0.9rem;
+}
+
+aside {
+    font-size: var(--rdmo-sidebar-font-size);
+
+    color: var(--rdmo-sidebar-color);
+    background-color: var(--rdmo-sidebar-bg);
+
+    position: fixed;
+    width: var(--rdmo-sidebar-width);
+    height: calc(100vh - 56px);
+
+    padding: 1rem 0.5rem;  // same as py-3 px-2
+
+    @media only screen and (max-width: $grid-breakpoint-lg) {
+        .nav-link {
+            --bs-nav-link-padding-x: 0.75rem;
+        }
+    }
+
+    @media only screen and (min-width: $grid-breakpoint-lg) {
+        width: var(--rdmo-sidebar-lg-width);
+        padding: 1.5rem;  // same as p-4
+        overflow-y: auto;
+    }
+}
+
+aside + main {
+    margin-left: var(--rdmo-sidebar-width);
+    padding: 1rem;  // same as py-3
+
+    @media only screen and (min-width: $grid-breakpoint-lg) {
+        margin-left: var(--rdmo-sidebar-lg-width);
+        padding: 1.5rem 3rem 1.5rem 1.5rem;  // same as py-4 ps-4 pe-5
+    }
+}
diff --git a/rdmo/core/assets/scss/base/table.scss b/rdmo/core/assets/scss/base/table.scss
new file mode 100644
index 0000000000..d9f03d65a8
--- /dev/null
+++ b/rdmo/core/assets/scss/base/table.scss
@@ -0,0 +1,24 @@
+table.table {
+    --bs-table-border-color: #efefef;
+
+    --rdmo-table-font-size: var(--rdmo-font-size-smaller);
+    --rdmo-table-th-padding: 1rem 1.5rem;
+    --rdmo-table-th-bg: var(--rdmo-sidebar-bg);
+    --rdmo-table-td-padding: 0.75rem 1.5rem;
+
+    font-size: var(--rdmo-table-font-size);
+    box-shadow: var(--rdmo-box-shadow);
+
+    th {
+        text-transform: uppercase;
+        background-color: var(--rdmo-table-th-bg);
+        border-bottom: none;
+    }
+    th {
+        padding: var(--rdmo-table-th-padding);
+    }
+
+    td {
+        padding: var(--rdmo-table-td-padding);
+    }
+}
diff --git a/rdmo/core/assets/scss/base/typography.scss b/rdmo/core/assets/scss/base/typography.scss
new file mode 100644
index 0000000000..961cbb3f41
--- /dev/null
+++ b/rdmo/core/assets/scss/base/typography.scss
@@ -0,0 +1,131 @@
+:root {
+    --bs-font-sans-serif: var(--rdmo-font);
+    --bs-body-font-size: 1rem;
+
+    --bs-body-color: var(--rdmo-body-color);
+    --bs-body-bg: var(--rdmo-body-bg);
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+    font-family: var(--rdmo-font-headline);
+}
+h1, .h1 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+}
+h2, .h2 {
+    font-size: 1.6rem;
+    margin-bottom: 1rem;
+}
+h3, .h3 {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+}
+
+.font-smaller {
+    font-size: var(--rdmo-font-size-smaller) !important;
+}
+.font-small {
+    font-size: var(--rdmo-font-size-small) !important;
+}
+.font-normal {
+    font-size: 1em !important;
+}
+.font-large {
+    font-size: var(--rdmo-font-size-large) !important;
+}
+.font-larger {
+    font-size: var(--rdmo-font-size-larger) !important;
+}
+
+.flip {
+  transform: scaleX(-1);
+}
+
+.home {
+    h1 {
+        font-size: 2.6rem;
+    }
+    h2 {
+        font-size: 2rem;
+    }
+}
+
+a,
+span.link,
+button.link {
+    color: var(--rdmo-link-color);
+    cursor: pointer;
+    text-decoration: var(--rdmo-link-decoration);
+
+    &:hover {
+        color: var(--rdmo-link-hover-color);
+    }
+}
+
+button.link,
+button.unstyled {
+    background: none;
+    border: none;
+    padding: 0;
+
+    font-family: inherit;
+    font-size: inherit;
+    vertical-align: inherit;
+    text-align: left;
+
+    &.nav-link {
+        padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+    }
+}
+
+.truncate {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.btn-primary {
+    --bs-btn-bg: var(--rdmo-link-color);
+    --bs-btn-border-color: var(--rdmo-link-color);
+    --bs-btn-hover-bg: var(--rdmo-link-hover-color);
+    --bs-btn-hover-border-color: var(--rdmo-link-hover-color);
+}
+
+.btn-outline-primary {
+    --bs-btn-color: var(--rdmo-color-link);
+    --bs-btn-border-color: var(--rdmo-color-link);
+    --bs-btn-hover-bg: var(--rdmo-color-link-hover);
+    --bs-btn-hover-border-color: var(--rdmo-color-link-hover);
+    --bs-btn-active-bg: var(--rdmo-color-link-hover);
+    --bs-btn-active-border-color: var(--rdmo-color-link-hover);
+}
+
+.text-bg-primary {
+    background-color: var(--rdmo-link-color) !important;
+}
+
+.bi {
+    font-weight: bold;
+    -webkit-text-stroke: 0.5px currentColor;
+
+    &.disabled,
+    &:disabled {
+        color: var(--bs-secondary-color) !important;
+        cursor: not-allowed !important;
+    }
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
diff --git a/rdmo/core/assets/scss/base/variables.scss b/rdmo/core/assets/scss/base/variables.scss
new file mode 100644
index 0000000000..af40dc044c
--- /dev/null
+++ b/rdmo/core/assets/scss/base/variables.scss
@@ -0,0 +1,25 @@
+:root {
+    --rdmo-font: 'Open sans', sans-serif;
+    --rdmo-font-headline: 'Roboto Slab', serif;
+
+    --rdmo-font-size-smaller: 0.8em;
+    --rdmo-font-size-small: 0.9em;
+    --rdmo-font-size-large: 1.1em;
+    --rdmo-font-size-large: 1.2em;
+
+    --rdmo-box-shadow: 0.25rem 0.25rem 1rem #eee;
+
+    --rdmo-body-bg: #fff;
+    --rdmo-body-color: #333;
+
+    --rdmo-navbar-bg: #101F70;
+    --rdmo-navbar-color: #aaa;
+    --rdmo-navbar-hover-color: #fff;
+
+    --rdmo-sidebar-bg: #efefef;
+    --rdmo-sidebar-color: var(--rdmo-body-color);
+
+    --rdmo-link-color: #337ab7;
+    --rdmo-link-decoration: none;
+    --rdmo-link-hover-color: #2a5d90;
+}
diff --git a/rdmo/core/assets/scss/bootstrap.scss b/rdmo/core/assets/scss/bootstrap.scss
new file mode 100644
index 0000000000..b10a5726ef
--- /dev/null
+++ b/rdmo/core/assets/scss/bootstrap.scss
@@ -0,0 +1,8 @@
+@import '~bootstrap/scss/bootstrap';
+
+$bootstrap-icons-font-dir: '~bootstrap-icons/font/fonts';
+@import '~bootstrap-icons/font/bootstrap-icons.scss';
+
+@import '@fontsource/open-sans/index.css';
+@import '@fontsource/open-sans/700.css';
+@import '@fontsource/roboto-slab/index.css';
diff --git a/rdmo/core/assets/scss/breakpoints.scss b/rdmo/core/assets/scss/breakpoints.scss
new file mode 100644
index 0000000000..d3ebf4d004
--- /dev/null
+++ b/rdmo/core/assets/scss/breakpoints.scss
@@ -0,0 +1,15 @@
+$grid-breakpoint-xs: 0;
+$grid-breakpoint-sm: 576px;
+$grid-breakpoint-md: 768px;
+$grid-breakpoint-lg: 992px;
+$grid-breakpoint-xl: 1200px;
+$grid-breakpoint-xxl: 1400px;
+
+$grid-breakpoints: (
+  xs: $grid-breakpoint-xs,
+  sm: $grid-breakpoint-sm,
+  md: $grid-breakpoint-md,
+  lg: $grid-breakpoint-lg,
+  xl: $grid-breakpoint-xl,
+  xxl: $grid-breakpoint-xxl
+);
diff --git a/rdmo/core/assets/scss/home.scss b/rdmo/core/assets/scss/home.scss
new file mode 100644
index 0000000000..d4c0cde622
--- /dev/null
+++ b/rdmo/core/assets/scss/home.scss
@@ -0,0 +1 @@
+// This file is intentionally left empty.
diff --git a/rdmo/core/assets/scss/utils.scss b/rdmo/core/assets/scss/utils.scss
deleted file mode 100644
index da255d7d82..0000000000
--- a/rdmo/core/assets/scss/utils.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-.flip {
-    transform: rotate(180deg) scaleX(-1);
-}
-
-.w-100 {
-    width: 100%;
-}
-.mt-0 {
-    margin-top: 0;
-}
-.mt-5 {
-    margin-top: 5px;
-}
-.mt-10 {
-    margin-top: 10px;
-}
-.mt-15 {
-    margin-top: 15px;
-}
-.mt-20 {
-    margin-top: 20px;
-}
-.mr-0 {
-    margin-right: 0;
-}
-.mr-5 {
-    margin-right: 5px;
-}
-.mr-10 {
-    margin-right: 10px;
-}
-.mr-15 {
-    margin-right: 15px;
-}
-.mr-20 {
-    margin-right: 20px;
-}
-.mb-0 {
-    margin-bottom: 0;
-}
-.mb-5 {
-    margin-bottom: 5px;
-}
-.mb-10 {
-    margin-bottom: 10px;
-}
-.mb-15 {
-    margin-bottom: 15px;
-}
-.mb-20 {
-    margin-bottom: 20px;
-}
-.ml-0 {
-    margin-left: 0;
-}
-.ml-5 {
-    margin-left: 5px;
-}
-.ml-10 {
-    margin-left: 10px;
-}
-.ml-15 {
-    margin-left: 15px;
-}
-.ml-20 {
-    margin-left: 20px;
-}
-
-.pt-0 {
-    padding-top: 0;
-}
-.pt-10 {
-    padding-top: 10px;
-}
-.pt-20 {
-    padding-top: 20px;
-}
-.pr-0 {
-    padding-right: 0;
-}
-.pr-10 {
-    padding-right: 10px;
-}
-.pr-20 {
-    padding-right: 20px;
-}
-.pb-0 {
-    padding-bottom: 0;
-}
-.pb-10 {
-    padding-bottom: 10px;
-}
-.pb-20 {
-    padding-bottom: 20px;
-}
-.pl-0 {
-    padding-left: 0;
-}
-.pl-10 {
-    padding-left: 10px;
-}
-.pl-20 {
-    padding-left: 20px;
-}
diff --git a/rdmo/core/management/commands/rebuild_mptt.py b/rdmo/core/management/commands/rebuild_mptt.py
new file mode 100644
index 0000000000..7389051904
--- /dev/null
+++ b/rdmo/core/management/commands/rebuild_mptt.py
@@ -0,0 +1,11 @@
+from django.core.management.base import BaseCommand
+
+from rdmo.domain.models import Attribute
+from rdmo.projects.models import Project
+
+
+class Command(BaseCommand):
+
+    def handle(self, *args, **options):
+        Attribute.objects.rebuild()
+        Project.objects.rebuild()
diff --git a/rdmo/core/schema.py b/rdmo/core/schema.py
index 625b6b4f2c..66b8c29e32 100644
--- a/rdmo/core/schema.py
+++ b/rdmo/core/schema.py
@@ -8,7 +8,6 @@ def filter_endpoints(endpoints):
     for (path, path_regex, method, callback) in endpoints:
         if not path.startswith((
             '/api/v1/management/',
-            '/api/v1/overlays/'
         )):
             yield (path, path_regex, method, callback)
 
@@ -159,6 +158,7 @@ class ProjectIssueViewSetExtension(ParentLookupIdMixin, ViewExtension):
 
 class ProjectMembershipViewSetExtension(ParentLookupIdMixin, ModelViewSetMixin, ViewExtension):
     target_class = 'rdmo.projects.viewsets.ProjectMembershipViewSet'
+    actions = ['hierarchy', 'leave']
 
 
 class ProjectPageViewSetExtension(ParentLookupIdMixin, ViewExtension):
diff --git a/rdmo/core/serializers.py b/rdmo/core/serializers.py
index 48a75f86ac..d8497322ba 100644
--- a/rdmo/core/serializers.py
+++ b/rdmo/core/serializers.py
@@ -194,9 +194,13 @@ def get_model(self, obj) -> str:
 class ElementWarningSerializerMixin(serializers.ModelSerializer):
 
     def get_warning(self, obj) -> str:
-        return {
-            'missing_languages': any(get_language_warning(obj, field_name) for field_name in self.Meta.warning_fields)
-        }
+        missing_languages = any(get_language_warning(obj, field_name) for field_name in self.Meta.warning_fields)
+        if missing_languages:
+            return {
+                'missing_languages': missing_languages
+            }
+        else:
+            return {}
 
 
 class ReadOnlyObjectPermissionSerializerMixin:
diff --git a/rdmo/core/settings.py b/rdmo/core/settings.py
index cd015c38b8..dca977278e 100644
--- a/rdmo/core/settings.py
+++ b/rdmo/core/settings.py
@@ -18,7 +18,6 @@
     # rdmo modules
     'rdmo',
     'rdmo.core',
-    'rdmo.overlays',
     'rdmo.accounts',
     'rdmo.services',
     'rdmo.domain',
@@ -34,7 +33,6 @@
     'rest_framework.authtoken',
     'widget_tweaks',
     'markdown',
-    'compressor',
     'django_cleanup',
     'django_extensions',
     'django_filters',
@@ -75,9 +73,7 @@
     },
 ]
 
-COMPRESS_PRECOMPILERS = (
-    ('text/x-scss', 'django_libsass.SassCompiler'),
-)
+MESSAGE_STORAGE = "django.contrib.messages.storage.session.SessionStorage"
 
 WSGI_APPLICATION = 'config.wsgi.application'
 
@@ -160,7 +156,6 @@
 STATICFILES_FINDERS = (
     'django.contrib.staticfiles.finders.FileSystemFinder',
     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
-    'compressor.finders.CompressorFinder',
 )
 
 DATABASES = {
@@ -225,6 +220,8 @@
     'MULTISITE',
     'GROUPS',
     'EXPORT_FORMATS',
+    'HOME_IMAGES',
+    'HOME_IMAGES_TIMEOUT',
     'PROJECT_VISIBILITY',
     'PROJECT_ISSUES',
     'PROJECT_VIEWS',
@@ -246,7 +243,8 @@
     'GROUPS',
     'EXPORT_FORMATS',
     'PROJECT_TABLE_PAGE_SIZE',
-    'PROJECT_CONTACT'
+    'PROJECT_SELECT_CATALOG',
+    'PROJECT_CONTACT',
 ]
 
 TEMPLATES_API = [
@@ -265,6 +263,17 @@
     'projects/project_interview_question_help.html',
     'projects/project_interview_questionset_help.html',
     'projects/project_interview_sidebar.html',
+    'projects/project_view_invite_member.html',
+    'projects/project_view_invite_member_user_help.html',
+    'projects/project_view_invite_member_silently_help.html',
+    'projects/project_view_manager_info.html',
+    'projects/project_view_guest_info.html',
+    'projects/project_view_author_info.html',
+    'projects/project_view_owner_info.html',
+    'projects/project_view_parent_help.html',
+    'projects/project_view_description_help.html',
+    'projects/project_view_title_help.html',
+    'projects/project_view_snapshot_description_help.html',
 ]
 
 TEMPLATES_EXECUTE_SCRIPT_TAGS = False
@@ -277,31 +286,6 @@
 
 USER_API = True
 
-OVERLAYS = {
-    'projects': [
-        'projects-table',
-        'create-project',
-        'import-project',
-        'support-info'
-    ],
-    'project': [
-        'project-questions',
-        'project-catalog',
-        'project-issues',
-        'project-views',
-        'project-memberships',
-        'project-snapshots',
-        'export-project',
-        'import-project',
-        'support-info'
-    ],
-    'issue_send': [
-        'issue-message',
-        'issue-attachments',
-        'support-info'
-    ]
-}
-
 EXPORT_FORMATS = (
     ('pdf', _('PDF')),
     ('rtf', _('Rich Text Format')),
@@ -331,6 +315,31 @@
     # for example: 'not_empty': 'core/text_blocks/template_for_not_empty.html',
 }
 
+HOME_IMAGES_TIMEOUT = 6000
+HOME_IMAGES = [
+    {
+        'src': 'core/img/header/library.jpg',
+        'alt': 'Stockholm Public Library',
+        'attribution': '[Stockholm Public Library (Samantha Marx)](https://www.flickr.com/photos/spam/5086168739) / '
+                       '[CC BY 2.0](https://creativecommons.org/licenses/by/2.0/)'
+
+    },
+    {
+        'src': 'core/img/header/supercomputer.jpg',
+        'alt': 'Discover Supercomputer 3',
+        'attribution': '[Discover Supercomputer 3 (NASA Goddard Space Flight Center)]'
+                       '(https://www.flickr.com/photos/nasa_goddard/6559334541) / '
+                       '[CC BY 2.0](https://creativecommons.org/licenses/by/2.0/)'
+    },
+    {
+        'src': 'core/img/header/collection.jpg',
+        'alt': 'Nasssammlung',
+        'attribution': '[Nasssammlung (Christopher Bulle)]' # spellchecker:disable-line
+                       '(https://www.flickr.com/photos/bulle_de/9221247815) / '
+                       '[CC BY 2.0](https://creativecommons.org/licenses/by/2.0/)'
+    }
+]
+
 PROJECT_TABLE_PAGE_SIZE = 20
 
 PROJECT_VISIBILITY = True
@@ -370,6 +379,8 @@
 PROJECT_VIEWS_SYNC = False
 PROJECT_TASKS_SYNC = False
 
+PROJECT_SELECT_CATALOG = 'radio'
+
 PROJECT_CREATE_RESTRICTED = False
 PROJECT_CREATE_GROUPS = []
 
diff --git a/rdmo/core/static/core/css/base.scss b/rdmo/core/static/core/css/base.scss
deleted file mode 100644
index 40373e48f0..0000000000
--- a/rdmo/core/static/core/css/base.scss
+++ /dev/null
@@ -1,537 +0,0 @@
-@import 'core/css/variables';
-
-html, body {
-    height: 100%;
-    background-color: $background-color;
-}
-
-h1, h2, h3, h4 {
-    color: $headline-color;
-    background-color: $headline-background-color;
-    line-height: 40px;
-}
-h5, h6 {
-    color: $headline-color;
-    background-color: $headline-background-color;
-    font-size: medium;
-    line-height: 20px;
-}
-h1 {
-    font-size: 28px;
-}
-h2 {
-    font-size: 24px;
-}
-.sidebar h2,
-.modal h2 {
-    font-size: 20px;
-}
-h3 {
-    font-size: 16px;
-}
-h4 {
-    font-size: 14px;
-}
-form {
-    margin-bottom: 20px;
-}
-textarea {
-    resize: vertical;
-}
-
-.extend {
-    width: 100%;
-}
-
-a {
-    color: $link-color;
-
-    &:visited {
-        color: $link-color-visited;
-    }
-    &:hover {
-        color: $link-color-hover;
-    }
-    &:focus {
-        color: $link-color-focus;
-    }
-
-    &.btn {
-        color: white;
-
-        &:visited,
-        &:hover,
-        &:focus {
-            color: white;
-        }
-    }
-    &.text-warning {
-        &:visited,
-        &:hover,
-        &:focus {
-            color: #8a6d3b;
-        }
-    }
-    &.text-danger {
-        &:visited,
-        &:hover,
-        &:focus {
-            color: #a94442;
-        }
-    }
-
-    &.disabled {
-        cursor: not-allowed;
-    }
-
-    &.fa {
-        text-decoration: none !important;
-
-        &:visited,
-        &:hover,
-        &:focus {
-            text-decoration: none !important;
-        }
-    }
-}
-
-.btn.btn-link {
-    color: $link-color;
-    padding: 0;
-    border: 0;
-    text-decoration: none;
-
-    &:hover {
-        color: $link-color-hover;
-        text-decoration: none;
-    }
-    &:active,
-    &:focus {
-        outline: none;
-    }
-}
-
-code {
-    word-wrap: break-word;
-
-    &.code-questions {
-        color: rgb(16, 31, 112);
-        background-color: rgba(16, 31, 112, 0.1);
-    }
-    &.code-options {
-        color: rgb(255, 100, 0);
-        background-color: rgba(255, 100, 0, 0.1);
-    }
-    &.code-options-provider {
-        color: white;
-        background-color: rgba(255, 100, 0, 0.8);
-    }
-    &.code-conditions {
-        color: rgb(128, 0, 128);
-        background-color: rgba(128, 0, 128, 0.1);
-    }
-    &.code-tasks {
-        color: rgb(128, 0, 0);
-        background-color: rgba(128, 0, 0, 0.1);
-    }
-    &.code-views {
-        color: rgb(0, 128, 0);
-        background-color: rgba(0, 128, 0, 0.1);
-    }
-    &.code-order {
-        color: rgb(96, 96, 96);
-        background-color: rgba(96, 96, 96, 0.1);
-    }
-    &.code-default {
-        color: rgb(96, 96, 96);
-        background-color: rgba(96, 96, 96, 0.1);
-    }
-    &.code-optional {
-        color: white;
-        background-color: rgb(119.085, 119.085, 119.085);
-    }
-    &.code-import {
-        color: black;
-        background-color: rgba(96, 96, 96, 0.1);
-    }
-}
-
-table {
-    p {
-        margin-bottom: 5px;
-    }
-    p:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.table-break-word {
-    td {
-        word-break: break-all;
-    }
-}
-
-details {
-    margin-bottom: 10px;
-}
-
-summary {
-    display: list-item;
-    cursor: pointer;
-    margin-bottom: 5px;
-}
-
-metadata {
-    display: none;
-}
-
-/* navbar */
-
-.navbar-default {
-    background-color: $navigation-background-color;
-    border-bottom: none;
-
-    .navbar-brand,
-    .navbar-nav > li > a,
-    .navbar-nav > li > a:focus {
-        color: $navigation-color;
-        background-color: transparent;
-    }
-    .navbar-brand:hover,
-    .navbar-nav > li > a:hover,
-    .navbar-nav > .open > a,
-    .navbar-nav > .open > a:focus,
-    .navbar-nav > .open > a:hover {
-        color: $navigation-hover-color;
-        background-color: $navigation-hover-background-color;
-    }
-
-    .dropdown li.divider:first-child {
-        display: none;
-    }
-}
-
-/* content */
-
-.content {
-    padding-top: 50px; /* same height as the navbar */
-}
-.sidebar {
-    /* make the sidebar sticky */
-    position: -webkit-sticky;
-    position: sticky;
-    top: 0;
-}
-.page, .sidebar {
-    height: 100%;
-    margin-top: 10px;
-    margin-bottom: 60px;
-}
-.page h2:nth-child(2) {
-    margin-top: 0;
-}
-.sidebar h2:first-child,
-.sidebar-mt {
-    margin-top: 70px;
-}
-
-/* questions overview */
-
-.section-panel {
-
-}
-
-.subsection-panel {
-    margin-left: 40px;
-}
-
-.group-panel {
-    margin-left: 80px;
-
-    table th:first-child,
-    table td:first-child {
-        padding-left: 15px;
-    }
-
-    table th:last-child,
-    table td:last-child {
-        padding-right: 15px;
-    }
-}
-
-/* angular forms */
-
-.input-collection {
-    margin-bottom: 15px;
-}
-
-/* forms */
-
-.form-label {
-    margin-bottom: 5px;
-    font-weight: 700;
-}
-
-form .yesno label {
-    margin-right: 10px;
-}
-
-.row {
-    .checkbox,
-    .radio {
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
-
-    @media (min-width: $screen-xs-max) {
-        .checkbox-padding .checkbox,
-        .radio-padding .radio {
-            margin-top: 32px;
-            margin-bottom: 11px;
-        }
-    }
-}
-
-.input-xs {
-    height: 24px;
-    padding: 5px 10px;
-    font-size: 11px;
-    line-height: 1;
-    border-radius: 2px;
-}
-
-.help-block.info {
-    margin-top: 0;
-}
-
-.sidebar-form {
-    display: flex;
-    gap: 5px;
-}
-
-.upload-form {
-    .upload-form-field {
-        position: relative;
-
-        cursor: pointer;
-        border-radius: 4px;
-
-        flex-grow: 1;
-        overflow: hidden;
-
-        p,
-        input {
-            height: 34px;
-            margin: 0px;
-        }
-
-        p {
-            text-align: left;
-            cursor: pointer;
-
-            color: $link-color;
-            border: 1px solid silver;
-            border-radius: 4px;
-
-            width: calc(100% - 1px);
-            padding: 6px 14px;
-
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        input {
-            position: absolute;
-            z-index: 1;
-            padding: 0;
-            opacity: 0;
-        }
-
-        &:hover {
-            background-color: #e6e6e6;
-        }
-    }
-}
-
-/* modals */
-
-.modal-body {
-    > p:last-child,
-    formgroup:last-child .form-group {
-        margin-bottom: 0;
-    }
-
-    .copy-block {
-        margin-bottom: 20px;
-    }
-
-    .help-block {
-        font-size: small;
-        word-break: break-word;
-    }
-
-    .nav.nav-tabs {
-        margin-bottom: 20px;
-    }
-}
-
-/* options */
-
-.options-dropdown {
-    display: inline-block;
-
-    > a {
-        cursor: pointer;
-    }
-}
-
-/* panels */
-
-.panel-default {
-    min-height: 5px;
-}
-
-.panel-body {
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.panel li > p:last-child {
-    margin-bottom: 0;
-}
-
-/* lists */
-
-ul.list-arrow li {
-    margin-left: 20px;
-
-    &.active {
-        margin-left: 0;
-    }
-
-    &.active a:before {
-        float: left;
-        width: 20px;
-        text-align: right;
-        content: '\2192\0000a0'; /* right-arrow followed by a space */
-    }
-}
-
-/* misc */
-.form-errors {
-    margin-bottom: 20px;
-}
-li > a.control-label > i {
-    display: none;
-}
-li.has-error > a.control-label > i,
-li.has-warning > a.control-label > i {
-    display: inline;
-}
-.email-form label,
-.connections-form label {
-    display: block;
-    margin: 0;
-    line-height: 40px;
-    border-bottom: 1px solid $modal-border-color;
-}
-.email-form label:first-child,
-.connections-form label:first-child {
-    border-top: 1px solid $modal-border-color;
-}
-.email-form label input,
-.connections-form label input {
-    margin-left: 5px;
-    margin-right: 5px;
-}
-.email-form .email-form-buttons,
-.connections-form .connections-form-buttons {
-    margin-top: 10px;
-}
-.socialaccount_providers {
-    margin: 0;
-    padding: 0;
-    height: 42px;
-}
-.socialaccount_providers li {
-    float: left;
-    margin: 0 5px 10px 5px;
-    list-style: none;
-}
-.socialaccount_providers li.socialaccount_provider_break {
-    float: none;
-    margin-left: 0;
-    margin-right: 0;
-}
-.socialaccount_provider_name {
-    line-height: 29px;
-    font-weight: bold;
-}
-.logout-form {
-    margin: 0;
-}
-.logout-form .btn-link {
-    padding: 3px 20px;
-    color: $navigation-dropdown-color;
-    display: block;
-    width: 100%;
-    text-align: left;
-    border: none;
-    clear: both;
-    font-weight: 400;
-    line-height: 1.42857143;
-    white-space: nowrap;
-}
-.logout-form .btn-link:hover {
-    color: $navigation-dropdown-hover-color;
-    background-color: $navigation-dropdown-hover-background-color;
-    text-decoration: none;
-}
-.logout-form .btn-link:focus {
-    color: $navigation-dropdown-hover-color;
-    background-color: $navigation-dropdown-hover-background-color;
-    text-decoration: none;
-    outline: none;
-}
-.rdmo-logo {
-    width: 240px;
-    margin-top: 40px;
-}
-
-// adjust background "hover" color in select2 to $link-color
-.select2-results__option--highlighted {
-    background-color: $link-color !important
-}
-
-.cc-myself {
-    .checkbox {
-        margin: 0;
-    }
-}
-
-.ng-binding {
-    :last-child {
-        margin-bottom: 0;
-    }
-}
-
-.inline_image {
-    max-width: 100%;
-}
-
-[data-toggle="tooltip"] {
-    cursor: help;
-    text-decoration: underline;
-    text-decoration-style: dotted;
-}
-
-.more,
-.show-less {
-    display: none;
-}
-.show-more,
-.show-less {
-    color: $link-color;
-    cursor: pointer;
-}
diff --git a/rdmo/core/static/core/css/fonts.scss b/rdmo/core/static/core/css/fonts.scss
deleted file mode 100644
index 233e08076f..0000000000
--- a/rdmo/core/static/core/css/fonts.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@font-face {
-    font-family: "DroidSans";
-    src: url(static('core/fonts/DroidSans.ttf'));
-}
-@font-face {
-    font-family: "DroidSans";
-    src: url(static('core/fonts/DroidSans-Bold.ttf'));
-    font-weight: bold;
-}
-@font-face {
-    font-family: "DroidSans-Mono";
-    src: url(static('core/fonts/DroidSansMono.ttf'));
-}
-@font-face {
-    font-family: "DroidSerif";
-    src: url(static('core/fonts/DroidSerif.ttf'));
-}
-@font-face {
-    font-family: "DroidSerif";
-    src: url(static('core/fonts/DroidSerif-Bold.ttf'));
-    font-weight: bold;
-}
-@font-face {
-    font-family: "DroidSerif";
-    src: url(static('core/fonts/DroidSerif-Italic.ttf'));
-    font-style: italic;
-}
-@font-face {
-    font-family: "DroidSerif";
-    src: url(static('core/fonts/DroidSerif-BoldItalic.ttf'));
-    font-style: italic;
-    font-weight: bold;
-}
-
-body {
-    font-family: DroidSans, sans;
-}
-h1, h2, h3, h4, h5, h6 {
-    font-family: DroidSerif, serif;
-}
-
-.react-datepicker {
-    h1, h2, h3, h4, h5, h6 {
-        font-family: DroidSans, sans;
-    }
-}
diff --git a/rdmo/core/static/core/css/footer.scss b/rdmo/core/static/core/css/footer.scss
deleted file mode 100644
index 0e7e1bcd9c..0000000000
--- a/rdmo/core/static/core/css/footer.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import 'core/css/variables';
-
-$footer-height: 280px;
-$footer-height-md: 600px;
-$footer-height-sm: 260px;
-
-/* footer layout */
-
-.content {
-    min-height: 100%;
-    margin-bottom: -$footer-height;
-    padding-bottom: $footer-height;
-}
-footer {
-    height: $footer-height;
-}
-@media (max-width: $screen-sm-max) {
-    .content {
-        margin-bottom: -$footer-height-md;
-        padding-bottom: $footer-height-md;
-    }
-    footer {
-        height: $footer-height-md;
-    }
-}
-@media (max-width: $screen-xs-max) {
-    .content {
-        margin-bottom: -$footer-height-md;
-        padding-bottom: $footer-height-md;
-    }
-    footer {
-        height: $footer-height-md;
-    }
-}
-
-/* footer style */
-
-footer {
-    color: $footer-color;
-    background-color: $footer-background-color;
-    padding-top: 20px;
-
-    a,
-    a:visited,
-    a:hover {
-        color: $footer-link-color;
-    }
-    h4 {
-        color: $footer-link-color;
-    }
-    p {
-        text-align: left;
-    }
-    img {
-        display: block;
-    }
-}
diff --git a/rdmo/core/static/core/css/header.scss b/rdmo/core/static/core/css/header.scss
deleted file mode 100644
index 972439084e..0000000000
--- a/rdmo/core/static/core/css/header.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-@import 'core/css/variables';
-
-$header-height: 400px;
-$header-height-md: 300px;
-
-header {
-    position: relative;
-
-    height: $header-height;
-    background-color: black;
-
-    .header-image {
-        position: absolute;
-        left: 0;
-        right: 0;
-
-        opacity: 0;
-        -webkit-transition: $image-transition;
-        -moz-transition: $image-transition;
-        -ms-transition: $image-transition;
-        -o-transition: $image-transition;
-        transition: $image-transition;
-
-        &.visible {
-            opacity: 1;
-        }
-        img {
-            display: block;
-            width: 100%;
-            height: $header-height;
-        }
-        p {
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            z-index: 10;
-
-            padding-right: 5px;
-            margin-bottom: 5px;
-            font-size: 10px;
-            color: $footer-link-color;
-
-        }
-        a,
-        a:visited,
-        a:hover {
-            color: $footer-link-color;
-        }
-    }
-    .header-text {
-        position: relative;
-        padding-top: 100px;
-
-        h1 {
-            font-size: 60px;
-            color: white;
-        }
-        p {
-            font-size: 30px;
-            color: white;
-        }
-    }
-}
-@media (max-width: $screen-md-max) {
-    header {
-        height: $header-height-md;
-    }
-    header .header-image img {
-        height: $header-height-md;
-    }
-    header .header-text {
-        padding-top: 50px;
-    }
-}
-@media (max-width: $screen-xs-max) {
-    header {
-        background-color: inherit;
-        height: auto;
-    }
-    header .header-text {
-        padding-top: 0;
-    }
-    header .header-text h1 {
-        font-size: 40px;
-        color: $headline-color;
-    }
-    header .header-text p {
-        font-size: 20px;
-        color: $variant-color;
-    }
-}
diff --git a/rdmo/core/static/core/css/utils.scss b/rdmo/core/static/core/css/utils.scss
deleted file mode 100644
index da255d7d82..0000000000
--- a/rdmo/core/static/core/css/utils.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-.flip {
-    transform: rotate(180deg) scaleX(-1);
-}
-
-.w-100 {
-    width: 100%;
-}
-.mt-0 {
-    margin-top: 0;
-}
-.mt-5 {
-    margin-top: 5px;
-}
-.mt-10 {
-    margin-top: 10px;
-}
-.mt-15 {
-    margin-top: 15px;
-}
-.mt-20 {
-    margin-top: 20px;
-}
-.mr-0 {
-    margin-right: 0;
-}
-.mr-5 {
-    margin-right: 5px;
-}
-.mr-10 {
-    margin-right: 10px;
-}
-.mr-15 {
-    margin-right: 15px;
-}
-.mr-20 {
-    margin-right: 20px;
-}
-.mb-0 {
-    margin-bottom: 0;
-}
-.mb-5 {
-    margin-bottom: 5px;
-}
-.mb-10 {
-    margin-bottom: 10px;
-}
-.mb-15 {
-    margin-bottom: 15px;
-}
-.mb-20 {
-    margin-bottom: 20px;
-}
-.ml-0 {
-    margin-left: 0;
-}
-.ml-5 {
-    margin-left: 5px;
-}
-.ml-10 {
-    margin-left: 10px;
-}
-.ml-15 {
-    margin-left: 15px;
-}
-.ml-20 {
-    margin-left: 20px;
-}
-
-.pt-0 {
-    padding-top: 0;
-}
-.pt-10 {
-    padding-top: 10px;
-}
-.pt-20 {
-    padding-top: 20px;
-}
-.pr-0 {
-    padding-right: 0;
-}
-.pr-10 {
-    padding-right: 10px;
-}
-.pr-20 {
-    padding-right: 20px;
-}
-.pb-0 {
-    padding-bottom: 0;
-}
-.pb-10 {
-    padding-bottom: 10px;
-}
-.pb-20 {
-    padding-bottom: 20px;
-}
-.pl-0 {
-    padding-left: 0;
-}
-.pl-10 {
-    padding-left: 10px;
-}
-.pl-20 {
-    padding-left: 20px;
-}
diff --git a/rdmo/core/static/core/css/variables.scss b/rdmo/core/static/core/css/variables.scss
deleted file mode 100644
index 22d4f89735..0000000000
--- a/rdmo/core/static/core/css/variables.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/* colors */
-
-$text-color: #101F70;
-$variant-color: #666;
-$background-color: #fefefe;
-$variant-background-color: #f5f5f5;
-
-$headline-color: #101F70;
-$headline-background-color: transparent;
-
-$link-color: #337ab7;
-$link-color-visited: #337ab7;
-$link-color-hover: #337ab7;
-$link-color-focus: #337ab7;
-
-$navigation-color: #9d9d9d;
-$navigation-background-color: #101F70;
-$navigation-hover-color: #fff;
-$navigation-hover-background-color: rgba(255, 255, 255, 0.1);
-$navigation-dropdown-color: #333;
-$navigation-dropdown-hover-color: #262626;
-$navigation-dropdown-hover-background-color: #f5f5f5;
-
-$footer-color: #999;
-$footer-link-color: #999;
-$footer-background-color: #001;
-
-$danger-color: #a94442;
-$success-color: #5cb85c;
-$modal-border-color: #e5e5e5;
-
-/* transitions */
-
-$image-transition: opacity 2s ease-in-out;
-
-/* responsive thresholds */
-
-$screen-xs-max: 768px;
-$screen-sm-max: 992px;
-$screen-md-max: 1200px;
diff --git a/rdmo/core/static/core/img/favicon.png b/rdmo/core/static/core/img/favicon.png
deleted file mode 100644
index 042bcf2bbb..0000000000
Binary files a/rdmo/core/static/core/img/favicon.png and /dev/null differ
diff --git a/rdmo/core/static/core/img/rdmo-logo.svg b/rdmo/core/static/core/img/rdmo-logo.svg
deleted file mode 100644
index 93fc2eae24..0000000000
--- a/rdmo/core/static/core/img/rdmo-logo.svg
+++ /dev/null
@@ -1,260 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="400"
-   height="400"
-   id="svg13804"
-   version="1.1"
-   inkscape:version="0.48.4 r9939"
-   sodipodi:docname="DMP-logo.svg"
-   inkscape:export-filename="/home/kristin/E-Science/DMP/DMP-logo-gradient-only.png"
-   inkscape:export-xdpi="300"
-   inkscape:export-ydpi="300">
-  <defs
-     id="defs13806">
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6259">
-      <rect
-         style="color:#000000;fill:#00004e;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="rect6261"
-         width="219.96814"
-         height="246.47722"
-         x="737.59216"
-         y="-61.744358" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6041-4">
-      <rect
-         style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="rect6043-1"
-         width="504.28574"
-         height="261.76663"
-         x="1353.1576"
-         y="-506.68793" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6037-3">
-      <rect
-         style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="rect6039-5"
-         width="504.28574"
-         height="261.76663"
-         x="1353.1576"
-         y="-506.68793" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6033-83">
-      <rect
-         style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="rect6035-7"
-         width="504.28574"
-         height="261.76663"
-         x="1353.1576"
-         y="-506.68793" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6029-3">
-      <rect
-         style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="rect6031-2"
-         width="504.28574"
-         height="261.76663"
-         x="1353.1576"
-         y="-506.68793" />
-    </clipPath>
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath6025-2">
-      <rect
-         style="color:#000000;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-         id="rect6027-1"
-         width="504.28574"
-         height="261.76663"
-         x="1353.1576"
-         y="-506.68793" />
-    </clipPath>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient5225-9"
-       id="linearGradient13802"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-1487.8913,558.41765)"
-       x1="1158.5714"
-       y1="-41.923523"
-       x2="1158.5714"
-       y2="425.21933" />
-    <linearGradient
-       id="linearGradient5225-9">
-      <stop
-         style="stop-color:#101f70;stop-opacity:0.32283464;"
-         offset="0"
-         id="stop5227-1" />
-      <stop
-         style="stop-color:#101f70;stop-opacity:1;"
-         offset="1"
-         id="stop5229-7" />
-    </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient5225-9-2"
-       id="linearGradient13802-5"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-1487.8913,558.41765)"
-       x1="1158.5714"
-       y1="-41.923523"
-       x2="1158.5714"
-       y2="425.21933" />
-    <linearGradient
-       id="linearGradient5225-9-2">
-      <stop
-         style="stop-color:#101f70;stop-opacity:0.32283464;"
-         offset="0"
-         id="stop5227-1-7" />
-      <stop
-         style="stop-color:#101f70;stop-opacity:1;"
-         offset="1"
-         id="stop5229-7-6" />
-    </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient5225-9-22"
-       id="linearGradient13802-4"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-1487.8913,558.41765)"
-       x1="1158.5714"
-       y1="-41.923523"
-       x2="1158.5714"
-       y2="425.21933" />
-    <linearGradient
-       id="linearGradient5225-9-22">
-      <stop
-         style="stop-color:#101f70;stop-opacity:0.32283464;"
-         offset="0"
-         id="stop5227-1-2" />
-      <stop
-         style="stop-color:#101f70;stop-opacity:1;"
-         offset="1"
-         id="stop5229-7-9" />
-    </linearGradient>
-    <linearGradient
-       y2="425.21933"
-       x2="1158.5714"
-       y1="-41.923523"
-       x1="1158.5714"
-       gradientTransform="translate(-578.57144,7.1428929)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient14014"
-       xlink:href="#linearGradient5225-9-22"
-       inkscape:collect="always" />
-    <linearGradient
-       y2="425.21933"
-       x2="1158.5714"
-       y1="-41.923523"
-       x1="1158.5714"
-       gradientTransform="translate(-578.57144,7.1428929)"
-       gradientUnits="userSpaceOnUse"
-       id="linearGradient14014-1"
-       xlink:href="#linearGradient5225-9-22-4"
-       inkscape:collect="always" />
-    <linearGradient
-       id="linearGradient5225-9-22-4">
-      <stop
-         style="stop-color:#101f70;stop-opacity:0.32283464;"
-         offset="0"
-         id="stop5227-1-2-3" />
-      <stop
-         style="stop-color:#101f70;stop-opacity:1;"
-         offset="1"
-         id="stop5229-7-9-5" />
-    </linearGradient>
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.49497475"
-     inkscape:cx="-154.61278"
-     inkscape:cy="-17.14286"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1062"
-     inkscape:window-height="786"
-     inkscape:window-x="2280"
-     inkscape:window-y="139"
-     inkscape:window-maximized="0"
-     showguides="true"
-     inkscape:guide-bbox="true">
-    <sodipodi:guide
-       orientation="0,1"
-       position="-220.21325,492.95444"
-       id="guide14654" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata13809">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-179.99997,-115.21932)">
-    <rect
-       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2985-5-9-0-9"
-       width="400"
-       height="400"
-       x="179.99997"
-       y="115.21932"
-       ry="41.42857" />
-    <rect
-       style="color:#000000;fill:url(#linearGradient14014);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
-       id="rect2985-5-9-0"
-       width="400"
-       height="400"
-       x="179.99997"
-       y="115.21932"
-       ry="41.42857" />
-    <text
-       xml:space="preserve"
-       style="font-size:112px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Droid Serif;-inkscape-font-specification:Droid Serif"
-       x="381.56635"
-       y="355.27792"
-       id="text3755-3-8-5"
-       sodipodi:linespacing="125%"><tspan
-         sodipodi:role="line"
-         x="381.56635"
-         y="355.27792"
-         style="font-size:112px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;font-family:Droid Serif;-inkscape-font-specification:Droid Serif"
-         id="tspan3018">RDMO</tspan></text>
-  </g>
-</svg>
diff --git a/rdmo/core/static/core/js/header.js b/rdmo/core/static/core/js/header.js
deleted file mode 100644
index 98076b1633..0000000000
--- a/rdmo/core/static/core/js/header.js
+++ /dev/null
@@ -1,19 +0,0 @@
-var _current_image = 0;
-var _max_image = 2;
-var _timeout = 5000;
-
-function swap_image() {
-    $('.header-image-' + _current_image).removeClass('visible');
-    if (_current_image >= _max_image) {
-        _current_image = 0;
-    } else {
-        _current_image += 1;
-    }
-    $('.header-image-' + _current_image).addClass('visible');
-
-    setTimeout(swap_image, _timeout);
-}
-
-$(document).ready(function() {
-    setTimeout(swap_image, _timeout);
-});
diff --git a/rdmo/core/static/core/js/utils.js b/rdmo/core/static/core/js/utils.js
deleted file mode 100644
index 8c34a73526..0000000000
--- a/rdmo/core/static/core/js/utils.js
+++ /dev/null
@@ -1,11 +0,0 @@
-function showMore(element) {
-    $(element).siblings('.more').show();
-    $(element).siblings('.show-less').show();
-    $(element).hide();
-}
-
-function showLess(element) {
-    $(element).siblings('.more').hide();
-    $(element).siblings('.show-more').show();
-    $(element).hide();
-}
diff --git a/rdmo/core/templates/core/about.html b/rdmo/core/templates/core/about.html
index 0076a5da0b..2299507dcd 100644
--- a/rdmo/core/templates/core/about.html
+++ b/rdmo/core/templates/core/about.html
@@ -1,18 +1,16 @@
-{% extends 'core/base.html' %}
+{% extends 'core/main.html' %}
 {% load static core_tags %}
 {% load i18n %}
 
 {% block content %}
 
-<div class="container page">
-    <div class="row">
-        <div class="col-md-2">
-        </div>
-        <div class="col-md-8">
-            {% render_lang_template "core/about_text" %}
-        </div>
-        <div class="col-md-2">
-        </div>
+<div class="row">
+    <div class="col-md-2">
+    </div>
+    <div class="col-md-8">
+        {% render_lang_template "core/about_text" %}
+    </div>
+    <div class="col-md-2">
     </div>
 </div>
 
diff --git a/rdmo/core/templates/core/api.html b/rdmo/core/templates/core/api.html
index bc18cf7cae..91c84fd461 100644
--- a/rdmo/core/templates/core/api.html
+++ b/rdmo/core/templates/core/api.html
@@ -1,10 +1,8 @@
-{% extends 'core/base.html' %}
+{% extends 'core/main.html' %}
 {% load i18n %}
 {% load core_tags %}
 
-{% block content %}
-
-<div class="container page">
+{% block main %}
 
     <h1>API</h1>
 
@@ -52,6 +50,5 @@ <h2>Module endpoints</h2>
         <li><a href="{{ module_url }}">{{ module_url }}</a></li>
         {% endfor %}
     </ul>
-</div>
 
 {% endblock %}
diff --git a/rdmo/core/templates/core/back_to_project_link.html b/rdmo/core/templates/core/back_to_project_link.html
index aec65b1fb2..c1c260bf3d 100644
--- a/rdmo/core/templates/core/back_to_project_link.html
+++ b/rdmo/core/templates/core/back_to_project_link.html
@@ -1,5 +1,5 @@
 {% load i18n %}
 
 <li>
-    <a href="{% url 'project' project_id %}">{% trans 'Back to project' %}</a>
+    <a class="nav-link" href="{% url 'project' project_id %}">{% trans 'Back to project' %}</a>
 </li>
diff --git a/rdmo/core/templates/core/base.html b/rdmo/core/templates/core/base.html
index 875bbd4990..035468b44d 100644
--- a/rdmo/core/templates/core/base.html
+++ b/rdmo/core/templates/core/base.html
@@ -1,52 +1,34 @@
-{% load static compress core_tags i18n %}{% get_current_language as lang_code %}<!DOCTYPE html>
-<html lang="{{ lang_code }}">
+{% load static core_tags %}<!DOCTYPE html>
+<html>
 <head>
     {% include 'core/base_head.html' %}
 
     {% block css %}
+    <link rel="stylesheet" href="{% static 'core/css/bootstrap.css' %}" />
     <link rel="stylesheet" href="{% static 'core/css/base.css' %}" />
-
-    {% compress css %}
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'core/css/base.scss' %}" />
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'core/css/fonts.scss' %}" />
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'core/css/footer.scss' %}" />
-    <link rel="stylesheet" type="text/x-scss" href="{% static 'core/css/style.scss' %}" />
-    {% endcompress %}
-
+    <link rel="stylesheet" href="{% static 'core/css/app.css' %}" />
     {% endblock %}
 
     {% block js %}
+    <script src="{% static 'core/js/app.js' %}"></script>
     <script src="{% url 'javascript-catalog' %}"></script>
-    <script src="{% static 'core/js/base.js' %}"></script>
-    <script src="{% static 'core/js/utils.js' %}"></script>
     {% endblock %}
 
-    {% block head %}{% endblock %}
+    {% block head %}
+    {% endblock %}
 </head>
 
 <body>
 
-<!-- navigation -->
 {% include 'core/base_navigation.html' %}
-<!-- end navigation -->
 
-<!-- content -->
 <div class="content">
     {% block content %}{% endblock %}
 </div>
-<!-- end content -->
-
-<!-- footer -->
-{% include 'core/base_footer.html' %}
-<!-- end footer -->
 
 {% if not debug %}
-<!-- analytics -->
-{% include 'core/base_analytics.html' %}
-<!-- end analytics -->
+    {% include 'core/base_analytics.html' %}
 {% endif %}
 
-{% block extra_body %}{% endblock %}
-
 </body>
 </html>
diff --git a/rdmo/core/templates/core/base_footer.html b/rdmo/core/templates/core/base_footer.html
deleted file mode 100644
index a2f083eb53..0000000000
--- a/rdmo/core/templates/core/base_footer.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load i18n core_tags %}
-
-<footer>
-    <div class="container">
-        {% render_lang_template 'core/footer_text' %}
-    </div>
-</footer>
diff --git a/rdmo/core/templates/core/base_navigation.html b/rdmo/core/templates/core/base_navigation.html
index a29e63f15a..ea8627ac45 100644
--- a/rdmo/core/templates/core/base_navigation.html
+++ b/rdmo/core/templates/core/base_navigation.html
@@ -3,60 +3,59 @@
 {% load accounts_tags %}
 {% load rules %}
 
-<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="container">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"
-                    aria-label="{% trans 'Toggle navigation' %}">
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="{% url 'home' %}">{{ request.site.name }}</a>
-        </div>
+<nav class="navbar navbar-dark fixed-top navbar-expand-lg">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="{% url 'home' %}">{{ request.site.name }}</a>
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse"
+                aria-controls="navbar-collapse" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
+            <span class="navbar-toggler-icon"></span>
+        </button>
 
         <div class="collapse navbar-collapse" id="navbar-collapse">
-            <ul class="nav navbar-nav">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                 {% back_to_project_link %}
 
-                {% has_perm 'management.view_management' request.user as can_view_management %}
+                {% test_rule 'management.can_view_management' request.user request.site as can_view_management %}
 
                 {% if can_view_management %}
-                <li>
-                    <a href="{% url 'management' %}">{% trans 'Management' %}</a>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'management' %}">{% trans 'Management' %}</a>
                 </li>
                 {% endif %}
                 {% if user.is_superuser %}
-                <li>
-                    <a href="{% url 'admin:index' %}">{% trans 'Admin' %}</a>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'admin:index' %}">{% trans 'Admin' %}</a>
                 </li>
                 {% endif %}
             </ul>
 
             <ul class="nav navbar-nav navbar-right">
-                <li>
-                    <p class="navbar-text">
-                        <span id="pending"></span>
-                    </p>
-                </li>
+                <span id="pending" class="navbar-text"></span>
 
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans 'Language' %}<span class="caret"></span></a>
-                    <ul class="dropdown-menu">
+                <li class="nav-item dropdown">
+                    <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        {% get_current_language as LANGUAGE_CODE %}
+                        {{ LANGUAGE_CODE|upper }} <span class="caret">
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end">
                         {% i18n_switcher %}
                     </ul>
                 </li>
 
                 {% if user.is_authenticated %}
 
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% full_name user %}<span class="caret"></span></a>
-                    <ul class="dropdown-menu">
+                <li class="nav-item dropdown">
+                    <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        {% full_name user %}<span class="caret"></span>
+                    </a>
+
+                    <ul class="dropdown-menu dropdown-menu-end">
 
                         {% url 'about' as about_url %}
                         {% if about_url %}
-                        <li>
-                            <a href="{{ about_url }}">
+                        <li class="nav-item">
+                            <a href="{{ about_url }}" class="nav-link">
                                 {% trans 'About RDMO' %}
                             </a>
                         </li>
@@ -64,8 +63,8 @@
                         {% endif %}
 
                         {% if settings.PROFILE_UPDATE %}
-                        <li>
-                            <a href="{% url 'profile_update' %}">
+                        <li class="nav-item">
+                            <a href="{% url 'profile_update' %}" class="nav-link">
                                 {% trans 'Update profile' %}
                             </a>
                         </li>
@@ -80,36 +79,35 @@
                         {% endif %}
 
                         {% if settings.ACCOUNT_ALLOW_USER_TOKEN %}
-                        <li>
-                            <a href="{% url 'account_token' %}">
+                        <li class="nav-item">
+                            <a href="{% url 'account_token' %}" class="nav-link">
                                 {% trans 'API token' %}
                             </a>
                         </li>
                         {% endif %}
 
                         {% if settings.PROFILE_DELETE %}
-                        <li>
-                            <a href="{% url 'profile_remove' %}">
+                        <li class="nav-item">
+                            <a href="{% url 'profile_remove' %}" class="nav-link">
                                 {% trans 'Delete profile' %}
                             </a>
                         </li>
                         {% endif %}
 
-                        <li>
-                            <a href="{% url 'reset_overlays' %}">
-                                {% trans 'Reset tutorial overlays' %}
-                            </a>
-                        </li>
-
                         <li role="separator" class="divider"></li>
 
                         {% if settings.ACCOUNT or settings.SOCIALACCOUNT %}
-                        <li>
-                            {% include 'account/logout_form.html' %}
+                        <li class="nav-item">
+                            <form action="{{ settings.LOGOUT_URL }}" method="POST">
+                                {% csrf_token %}
+                                <button type="submit" class="nav-link link w-100">
+                                    {% trans 'Logout' %}
+                                </button>
+                            </form>
                         </li>
                         {% else %}
-                        <li>
-                            <a href="{{ settings.LOGOUT_URL }}">
+                        <li class="nav-item">
+                            <a href="{{ settings.LOGOUT_URL }}" class="nav-link">
                                 {% trans 'Logout' %}
                             </a>
                         </li>
@@ -117,14 +115,6 @@
                     </ul>
                 </li>
 
-                {% else %}
-
-                <li>
-                    <a href="{{ settings.LOGIN_URL }}">
-                        {% trans 'Login' %}
-                    </a>
-                </li>
-
                 {% endif %}
             </ul>
         </div>
diff --git a/rdmo/core/templates/core/base_navigation_account.html b/rdmo/core/templates/core/base_navigation_account.html
index f56897a132..8959e11434 100644
--- a/rdmo/core/templates/core/base_navigation_account.html
+++ b/rdmo/core/templates/core/base_navigation_account.html
@@ -1,8 +1,12 @@
 {% load i18n %}
 
-    <li>
-        <a href="{% url 'account_email' %}">{% trans 'Update e-mail' %}</a>
+    <li class="nav-item">
+        <a href="{% url 'account_email' %}" class="nav-link">
+            {% trans 'Update e-mail' %}
+        </a>
     </li>
-    <li>
-        <a href="{% url 'account_change_password' %}">{% trans 'Change password' %}</a>
+    <li class="nav-item">
+        <a href="{% url 'account_change_password' %}" class="nav-link">
+            {% trans 'Change password' %}
+        </a>
     </li>
diff --git a/rdmo/core/templates/core/base_navigation_socialaccount.html b/rdmo/core/templates/core/base_navigation_socialaccount.html
index 9062432af2..0b081bda8c 100644
--- a/rdmo/core/templates/core/base_navigation_socialaccount.html
+++ b/rdmo/core/templates/core/base_navigation_socialaccount.html
@@ -1,5 +1,7 @@
 {% load i18n %}
 
-    <li>
-        <a href="{% url 'socialaccount_connections' %}">{% trans 'Account connections' %}</a>
+    <li class="nav-item">
+        <a href="{% url 'socialaccount_connections' %}" class="nav-link">
+            {% trans 'Account connections' %}
+        </a>
     </li>
diff --git a/rdmo/core/templates/core/bootstrap_delete_form.html b/rdmo/core/templates/core/bootstrap_delete_form.html
deleted file mode 100644
index eb6d592b68..0000000000
--- a/rdmo/core/templates/core/bootstrap_delete_form.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% load i18n %}
-
-    <form method="post" action="">
-        {% csrf_token %}
-        <input type="hidden" name="next" value="{{ next }}" />
-
-        <input type="submit" value="{{ submit }}" class="btn btn-danger" />
-        <input type="submit" name="cancel" value="{% trans 'Cancel' %}" class="btn" />
-    </form>
diff --git a/rdmo/core/templates/core/bootstrap_form.html b/rdmo/core/templates/core/bootstrap_form.html
deleted file mode 100644
index 4cbced2125..0000000000
--- a/rdmo/core/templates/core/bootstrap_form.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{% load i18n %}
-
-    <form method="post" action="{{ action }}" novalidate>
-        {% csrf_token %}
-        <input type="hidden" name="next" value="{{ next }}" />
-
-        {% include 'core/bootstrap_form_fields.html' %}
-
-        {% if submit %}
-        <input type="submit" value="{{ submit }}" class="btn btn-primary" />
-        {% endif %}
-        {% if delete %}
-        <input type="submit" name="delete" value="{{ delete }}" class="btn btn-danger" />
-        {% endif %}
-        <input type="submit" name="cancel" value="{% trans 'Cancel' %}" class="btn" />
-    </form>
diff --git a/rdmo/core/templates/core/bootstrap_form_field.html b/rdmo/core/templates/core/bootstrap_form_field.html
deleted file mode 100644
index 3883cb53f2..0000000000
--- a/rdmo/core/templates/core/bootstrap_form_field.html
+++ /dev/null
@@ -1,81 +0,0 @@
-{% load i18n %}
-{% load widget_tweaks %}
-{% load core_tags %}
-
-<div class="form-group{% if field.errors %} has-error{% endif %} field-{{field.html_name}}">
-
-    {% with field|widget_type as type %}
-
-    {% if type == 'radio' or type == 'checkboxinput' or type == 'checkboxselectmultiple' %}
-        <strong class="mb-5">{{ field.label }}</strong>
-    {% else %}
-        <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
-    {% endif %}
-
-    {% if field.help_text %}
-    <div class="help-block info">
-        {{ field.help_text }}
-    </div>
-    {% endif %}
-
-    {% if type == 'radioselect' %}
-
-    {% for choice in field %}
-    <div class="radio">
-        <label>
-            {{ choice.tag }}
-            {{ choice.choice_label }}
-        </label>
-    </div>
-    {% endfor %}
-
-    {% elif type == 'yesno' %}
-
-    <div class="radio">
-    {% for choice in field %}
-        <label class="radio-inline">
-            {{ choice.tag }}
-            {{ choice.choice_label }}
-        </label>
-    {% endfor %}
-    </div>
-
-    {% elif type == 'checkboxinput' %}
-
-    <div class="checkbox">
-        <label>
-            {{ field }}
-            {{ field.label }}
-        </label>
-    </div>
-
-    {% elif type == 'checkboxselectmultiple' %}
-
-    {% for choice in field %}
-    <div class="checkbox">
-        <label>
-            {{ choice.tag }}
-            {{ choice.choice_label }}
-        </label>
-    </div>
-    {% endfor %}
-
-    {% else %}
-
-    {% render_field field class="form-control" %}
-
-    {% if type == 'selectmultiple' %}
-    <p class="help-block">
-    {% trans 'Hold down "Control", or "Command" on a Mac, to select more than one.' %}
-    </p>
-    {% endif %}
-
-    {% endif %}
-    {% endwith %}
-
-    {% if field.errors %}
-    <div class="help-block error">
-        <p class="text-danger">{{ field.errors.as_text}}</p>
-    </div>
-    {% endif %}
-</div>
diff --git a/rdmo/core/templates/core/bootstrap_form_fields.html b/rdmo/core/templates/core/bootstrap_form_fields.html
deleted file mode 100644
index 342e8bbd09..0000000000
--- a/rdmo/core/templates/core/bootstrap_form_fields.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% for hidden in form.hidden_fields %}
-    {{ hidden }}
-{% endfor %}
-
-{% for field in form.visible_fields %}
-    {% include 'core/bootstrap_form_field.html' with field=field %}
-{% endfor %}
-
-{% for error in form.non_field_errors %}
-<ul class="text-danger list-unstyled form-errors">
-    <li>{{ error }}</li>
-</ul>
-{% endfor %}
diff --git a/rdmo/core/templates/core/forms/bootstrap_checkbox.html b/rdmo/core/templates/core/forms/bootstrap_checkbox.html
new file mode 100644
index 0000000000..a80744592a
--- /dev/null
+++ b/rdmo/core/templates/core/forms/bootstrap_checkbox.html
@@ -0,0 +1,12 @@
+<div class="form-check mb-3">
+    <input type="checkbox" name="{{ field.name }}" id="{{ field.id_for_label }}"
+           {% if field.value %}checked{% endif %}
+           class="form-check-input {% if field.errors %}is-invalid{% endif %}"
+           aria-describedby="{{ field.id_for_label }}-help">
+
+    <label class="form-check-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
+
+    {% for error in field.errors %}
+    <div class="invalid-feedback">{{ error }}</div>
+    {% endfor %}
+</div>
diff --git a/rdmo/core/templates/core/forms/bootstrap_input.html b/rdmo/core/templates/core/forms/bootstrap_input.html
new file mode 100644
index 0000000000..733ad2d1f2
--- /dev/null
+++ b/rdmo/core/templates/core/forms/bootstrap_input.html
@@ -0,0 +1,17 @@
+<div class="mb-3">
+    <label for="{{ field.id_for_label }}" class="mb-1 text-bold">{{ field.label }}</label>
+
+    {% if field.help_text %}
+    <p id="{{ field.id_for_label }}-help" class="form-text text-muted mt-0 mb-1">
+        {{ field.help_text }}
+    </p>
+    {% endif %}
+
+    <input type="{{ field.widget_type }}" name="{{ field.name }}" value="{{ field.value|default_if_none:'' }}"
+           class="form-control {% if field.errors %}is-invalid{% endif %}" id="{{ field.id_for_label }}"
+           aria-describedby="{{ field.id_for_label }}-help" placeholder="{{ field.label }}">
+
+    {% for error in field.errors %}
+    <div class="invalid-feedback">{{ error }}</div>
+    {% endfor %}
+</div>
diff --git a/rdmo/core/templates/core/forms/bootstrap_textarea.html b/rdmo/core/templates/core/forms/bootstrap_textarea.html
new file mode 100644
index 0000000000..8f5b140148
--- /dev/null
+++ b/rdmo/core/templates/core/forms/bootstrap_textarea.html
@@ -0,0 +1,17 @@
+<div class="mb-3">
+    <label for="{{ field.id_for_label }}" class="mb-1 text-bold">{{ field.label }}</label>
+
+    {% if field.help_text %}
+    <p id="{{ field.id_for_label }}-help" class="form-text text-muted mt-0 mb-1">
+        {{ field.help_text }}
+    </p>
+    {% endif %}
+
+    <textarea name="{{ field.name }}" rows="4"
+              class="form-control {% if field.errors %}is-invalid{% endif %}" id="{{ field.id_for_label }}"
+              aria-describedby="{{ field.id_for_label }}-help" placeholder="{{ field.label }}"></textarea>
+
+    {% for error in field.errors %}
+    <div class="invalid-feedback">{{ error }}</div>
+    {% endfor %}
+</div>
diff --git a/rdmo/core/templates/core/home.html b/rdmo/core/templates/core/home.html
index 4c5cf20467..e6aa725ad1 100644
--- a/rdmo/core/templates/core/home.html
+++ b/rdmo/core/templates/core/home.html
@@ -1,64 +1,20 @@
 {% extends 'core/base.html' %}
-{% load i18n compress static core_tags %}
+{% load static %}
+{% load i18n %}
 
-{% block head %}
-{% compress css %}
-<link rel="stylesheet" type="text/x-scss" href="{% static 'core/css/header.scss' %}" />
-{% endcompress %}
-
-{% compress js %}
-{{ block.super }}
-<script type="text/javascript" src="{% static 'core/js/header.js' %}"></script>
-{% endcompress %}
+{% block js %}
+    {{ block.super }}
+    <script src="{% static 'core/js/bootstrap.js' %}"></script>
+    <script src="{% static 'core/js/home.js' %}"></script>
 {% endblock %}
 
 {% block content %}
 
-<header>
-    <div class="hidden-xs">
-        <div class="header-image header-image-0 visible">
-            <img src="{% static 'core/img/header/library.jpg' %}" alt="Stockholm Public Library"></img>
-            <p class="attribution">
-                <a href="https://www.flickr.com/photos/spam/5086168739">Stockholm Public Library (Samantha Marx)</a> / <a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>
-            </p>
-        </div>
-        <div class="header-image header-image-1">
-            <img src="{% static 'core/img/header/supercomputer.jpg' %}" alt="Discover Supercomputer 3"></img>
-            <p class="attribution">
-                <a href="https://www.flickr.com/photos/nasa_goddard/6559334541">Discover Supercomputer 3 (NASA Goddard Space Flight Center)</a> / <a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>
-            </p>
-        </div>
-        <div class="header-image header-image-2">
-            <img src="{% static 'core/img/header/collection.jpg' %}" alt=">Nasssammlung"></img>
-            <p class="attribution">
-                <a href="https://www.flickr.com/photos/bulle_de/9221247815">Nasssammlung (Christopher Bulle)</a> / <a href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a> <!-- spellchecker:disable-line -->
-            </p>
-        </div>
-    </div>
-    <div class="container header-text">
-
-        <h1>RDMO</h1>
-
-        <div class="row">
-            <div class="col-md-9">
-                <p>{% trans "A tool to support the planning, implementation, and organisation of research data management." %}</p>
-            </div>
-        </div>
-    </div>
-</header>
-
-<div class="container page">
-    <div class="row">
-        <div class="col-md-9">
-            {% render_lang_template "core/home_text" %}
-        </div>
-
-        <div class="col-md-3">
-            <h3>{% trans 'Login' %}</h3>
-
-            {% include 'account/login_form.html' %}
-        </div>
-    </div>
-</div>
+{% get_current_language as lang %}
+{% if lang == 'en' %}
+    {% include 'core/home_en.html' %}
+{% elif lang == 'de' %}
+    {% include 'core/home_de.html' %}
+{% endif %}
 
 {% endblock %}
diff --git a/rdmo/core/templates/core/home_de.html b/rdmo/core/templates/core/home_de.html
new file mode 100644
index 0000000000..d2cc079ee0
--- /dev/null
+++ b/rdmo/core/templates/core/home_de.html
@@ -0,0 +1,100 @@
+{% load static %}
+
+<header id="header" class="home">
+    {% include 'core/home_images.html' %}
+
+    <div class="container">
+        <div class="row justify-content-center text-center">
+            <div class="col-8">
+                <h1 class="mb-4">
+                    Research Data Management Organiser
+                </h1>
+                <p>
+                    A tool to support the planning, implementation, and organisation of research data management.
+                </p>
+
+                {% include 'core/home_login.html' %}
+            </div>
+        </div>
+    </div>
+</header>
+
+<main class="home">
+    <section>
+        <div class="container-md py-5">
+            <div class="row justify-content-center">
+                <div class="col-10">
+                    <h2>Lorem ipsum dolor sit amet</h2>
+
+                    <p>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    </p>
+
+                    <p>
+                       Lorem ipsum dolor sit amet:
+                    <p>
+
+                    <ul>
+                        <li>consetetur sadipscing elitr</li>
+                        <li>sed diam nonumy eirmod</li>
+                        <li>et justo duo dolores et ea rebum</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section>
+        <div class="container py-5">
+            <div class="row justify-content-center text-center">
+                <div class="col-6">
+                    <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr?</h2>
+
+                    <p>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    </p>
+
+                    <a href="">
+                        orem ipsum dolor
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section>
+        <div class="container py-5">
+            <div class="row justify-content-center text-center">
+                <div class="col-6">
+                    <p>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</main>
+
+<footer class="home">
+    <div class="container py-5 text-center">
+        <p>
+            Lorem ipsum: consetetur 6:30 – 8:30 Uhr
+        </p>
+
+        <p>
+            <a href="">Lorem</a>
+            <a href="">consetetur sadipscing</a>
+            <a href="">At vero eos et accusam</a>
+        </p>
+
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+        </p>
+
+        <div class="mt-5">
+            <a href="">
+                <img class="logo" src="{% static 'core/img/rdmo-logo.svg' %}" alt="RDMO logo"/>
+            </a>
+        </div>
+    </div>
+</footer>
\ No newline at end of file
diff --git a/rdmo/core/templates/core/home_en.html b/rdmo/core/templates/core/home_en.html
new file mode 100644
index 0000000000..e2600f0e32
--- /dev/null
+++ b/rdmo/core/templates/core/home_en.html
@@ -0,0 +1,100 @@
+{% load static %}
+
+<header id="header" class="home">
+    {% include 'core/home_images.html' %}
+
+    <div class="container">
+        <div class="row justify-content-center text-center">
+            <div class="col-8">
+                <h1 class="mb-4">
+                    Research Data Management Organiser
+                </h1>
+                <p>
+                    A tool to support the planning, implementation, and organisation of research data management.
+                </p>
+
+                {% include 'core/home_login.html' %}
+            </div>
+        </div>
+    </div>
+</header>
+
+<main class="home">
+    <section>
+        <div class="container-md py-5">
+            <div class="row justify-content-center">
+                <div class="col-10">
+                    <h2>Lorem ipsum dolor sit amet</h2>
+
+                    <p>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    </p>
+
+                    <p>
+                       Lorem ipsum dolor sit amet:
+                    <p>
+
+                    <ul>
+                        <li>consetetur sadipscing elitr</li>
+                        <li>sed diam nonumy eirmod</li>
+                        <li>et justo duo dolores et ea rebum</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section>
+        <div class="container py-5">
+            <div class="row justify-content-center text-center">
+                <div class="col-6">
+                    <h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr?</h2>
+
+                    <p>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+                    </p>
+
+                    <a href="">
+                        orem ipsum dolor
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section>
+        <div class="container py-5">
+            <div class="row justify-content-center text-center">
+                <div class="col-6">
+                    <p>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</main>
+
+<footer class="home">
+    <div class="container py-5 text-center">
+        <p>
+            Lorem ipsum: consetetur 6:30 – 8:30 Uhr
+        </p>
+
+        <p>
+            <a href="">Lorem</a>
+            <a href="">consetetur sadipscing</a>
+            <a href="">At vero eos et accusam</a>
+        </p>
+
+        <p>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+        </p>
+
+        <div class="mt-5">
+            <a href="">
+                <img class="logo" src="{% static 'core/img/rdmo-logo.svg' %}" alt="RDMO logo"/>
+            </a>
+        </div>
+    </div>
+</footer>
diff --git a/rdmo/core/templates/core/home_images.html b/rdmo/core/templates/core/home_images.html
new file mode 100644
index 0000000000..5319bdc959
--- /dev/null
+++ b/rdmo/core/templates/core/home_images.html
@@ -0,0 +1,13 @@
+{% load static %}
+{% load core_tags %}
+
+{% for image in settings.HOME_IMAGES %}
+<div class="header-image {% if forloop.first %}header-image-visible{% endif %}">
+    <img src="{% static image.src %}" alt="{{ image.alt }}">
+    <p class="attribution">{{ image.attribution|markdown }}</p>
+</div>
+{% endfor %}
+
+<script>
+    window.loopHeaderBackgroundImage({{ settings.HOME_IMAGES_TIMEOUT }})
+</script>
diff --git a/rdmo/core/templates/core/home_login.html b/rdmo/core/templates/core/home_login.html
new file mode 100644
index 0000000000..713933256a
--- /dev/null
+++ b/rdmo/core/templates/core/home_login.html
@@ -0,0 +1,15 @@
+<div class="d-flex flex-column gap-4 mt-4">
+    {% if settings.LOGIN_FORM %}
+    {% include 'account/login_form_inline.html' %}
+    {% endif %}
+
+    {% if settings.SHIBBOLETH %}
+    {% include 'account/login_shibboleth.html' %}
+    {% endif %}
+
+    {% if settings.SOCIALACCOUNT %}
+    <div class="d-flex flex-column flex-md-row flex-md-wrap align-items-md-start justify-content-center gap-2">
+        {% include "socialaccount/snippets/provider_list.html" with process="login" button_class="btn-light" %}
+    </div>
+    {% endif %}
+</div>
diff --git a/rdmo/core/templates/core/home_text_de.html b/rdmo/core/templates/core/home_text_de.html
deleted file mode 100644
index ff500446e4..0000000000
--- a/rdmo/core/templates/core/home_text_de.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<h2>Willkommen bei RDMO</h2>
-
-<p>
-    RDMO ist eine Webapplikation, die die strukturierte Planung, Umsetzung und Verwaltung der Daten in einem wissenschaftlichen Projekt unterstützt.<br />
-    Die gesammelten Informationen können in Forschungsworkflows weiterverwendet werden und zusätzlich in textueller Form ausgegeben werden -
-    als Datenmanagementplan für die Förderer oder als teil eines Forschungsberichts.
-</p>
-
-<p>
-    Wenn Sie mehr über die Nutzung von RDMO als Endnutzer oder Manager erfahren wollen, besuchen Sie <a href="https://rdmorganiser.github.io">rdmorganiser.github.io</a>.
-</p>
diff --git a/rdmo/core/templates/core/home_text_en.html b/rdmo/core/templates/core/home_text_en.html
deleted file mode 100644
index de9dcebfc2..0000000000
--- a/rdmo/core/templates/core/home_text_en.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<h2>Welcome to RDMO</h2>
-
-<p>
-  RDMO is a web application that supports the structured planning, realisation and management of data in a scientific project.<br />
-  The information collected can be used in research workflows and can also be output in textual form - as a data management plan for funders or as part of a research report.
-</p>
-
-<p>
-    For more information about the project visit <a href="https://rdmorganiser.github.io">rdmorganiser.github.io</a>.
-</p>
diff --git a/rdmo/core/templates/core/home_text_es.html b/rdmo/core/templates/core/home_text_es.html
deleted file mode 100644
index fce115f690..0000000000
--- a/rdmo/core/templates/core/home_text_es.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<h2>Bienvenido a RDMO</h2>
-
-<p>
-  RDMO es una aplicación web que apoya la planificación estructurada, la realización y la gestión de datos en un proyecto científico.<br />
-  La información recopilada puede utilizarse en flujos de trabajo de investigación y también puede ser exportada en forma de texto: como plan de gestión de datos para los financiadores o como parte de un informe de investigación.
-</p>
-
-<p>
-    Si desea obtener más información sobre el uso de RDMO como usuario final o gestor, visite <a href="https://rdmorganiser.github.io">rdmorganiser.github.io</a>.
-</p>
diff --git a/rdmo/core/templates/core/home_text_fr.html b/rdmo/core/templates/core/home_text_fr.html
deleted file mode 100644
index e4ace4f14b..0000000000
--- a/rdmo/core/templates/core/home_text_fr.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<h2>Bienvenue sur RDMO</h2>
-
-<p>
-  RDMO est une application web qui soutient la planification structurée, la mise en œuvre et la gestion des données dans un projet scientifique.<br />
-  Les informations collectées peuvent être réutilisées dans des workflows de recherche et peuvent en outre être éditées sous forme de texte -
-  comme plan de gestion des données pour les bailleurs de fonds ou comme partie d'un rapport de recherche.
-</p>
-
-<p>
-    Pour plus d'informations sur le projet, visitez <a href="https://rdmorganiser.github.io">rdmorganiser.github.io</a>.
-</p>
diff --git a/rdmo/core/templates/core/home_text_it.html b/rdmo/core/templates/core/home_text_it.html
deleted file mode 100644
index b0ca5c4409..0000000000
--- a/rdmo/core/templates/core/home_text_it.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<h2>Benvenuti a RDMO</h2>
-
-<p>
-  RDMO è un'applicazione web che supporta la pianificazione, la realizzazione e la gestione strutturata dei dati in un progetto scientifico.<br />
-  Le informazioni raccolte possono essere utilizzate nei flussi di lavoro della ricerca e possono anche essere prodotte in forma testuale - come piano di gestione dei dati per i finanziatori o come parte di una relazione di ricerca.
-</p>
-
-<p>
-    Maggiori informazioni sul progetto sono disponibili su <a href="https://rdmorganiser.github.io">rdmorganiser.github.io</a>.
-</p>
diff --git a/rdmo/core/templates/core/main.html b/rdmo/core/templates/core/main.html
new file mode 100644
index 0000000000..a185e4fe3c
--- /dev/null
+++ b/rdmo/core/templates/core/main.html
@@ -0,0 +1,17 @@
+{% extends 'core/base.html' %}
+{% load static %}
+
+{% block js %}
+    {{ block.super }}
+    <script src="{% static 'core/js/bootstrap.js' %}"></script>
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+    <main class="py-5">
+    {% block main %}{% endblock %}
+    </main>
+</div>
+
+{% endblock %}
diff --git a/rdmo/core/templates/core/page.html b/rdmo/core/templates/core/page.html
index d7e24c3a17..6b3f77fc50 100644
--- a/rdmo/core/templates/core/page.html
+++ b/rdmo/core/templates/core/page.html
@@ -1,16 +1,22 @@
 {% extends 'core/base.html' %}
+{% load static %}
+
+{% block js %}
+    {{ block.super }}
+    <script src="{% static 'core/js/bootstrap.js' %}"></script>
+{% endblock %}
 
 {% block content %}
 
-<div class="container">
+<main class="container">
     <div class="row">
-        <div class="page col-md-9">
+        <section class="page col-md-9 py-5">
             {% block page %}{% endblock %}
-        </div>
-        <div class="sidebar col-md-3">
+        </section>
+        <aside class="sidebar col-md-3 py-5">
             {% block sidebar %}{% endblock %}
-        </div>
+        </aside>
     </div>
-</div>
+</main>
 
 {% endblock %}
diff --git a/rdmo/core/templates/core/projects_page.html b/rdmo/core/templates/core/projects_page.html
deleted file mode 100644
index be3cc66d7f..0000000000
--- a/rdmo/core/templates/core/projects_page.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% extends 'core/base.html' %}
-
-{% block content %}
-
-<div class="container">
-    <div class="row">
-        <div class="page col-md-12">
-            {% block page %}{% endblock %}
-        </div>
-    </div>
-</div>
-
-{% endblock %}
diff --git a/rdmo/core/templates/core/upload_form.html b/rdmo/core/templates/core/upload_form.html
deleted file mode 100644
index 9823f1719a..0000000000
--- a/rdmo/core/templates/core/upload_form.html
+++ /dev/null
@@ -1,37 +0,0 @@
-{% load i18n %}
-{% load compress %}
-{% load static %}
-{% load core_tags %}
-
-<form id="upload-form" class="upload-form sidebar-form" action="{{ upload_url }}" method="POST" enctype="multipart/form-data">
-    {% csrf_token %}
-
-    <input type="hidden" name="method" value="upload_file" />
-
-    <div class="upload-form-field">
-        <input type="file" name="uploaded_file" aria-label="{% trans 'Upload file' %}"
-               {% if upload_accept %}accept="{{ upload_accept }}"{% endif %} />
-        <p>{% trans "Select file" %}</p>
-    </div>
-
-    <div class="sidebar-form-button">
-        <button type="submit" class="btn btn-primary" title="{% trans 'Upload' %}" aria-label="{% trans 'Upload' %}">
-            <i class="fa fa-arrow-right" aria-hidden="true"></i>
-        </button>
-    </div>
-</form>
-
-<script>
-    $(document).ready(function() {
-        $('#upload-form button[type="submit"]').prop('disabled', true)
-        $('#upload-form input').change(function() {
-            if (this.files[0] == null) {
-                $('#upload-form button[type="submit"]').prop('disabled', true)
-                $('#upload-form p').text('{% trans "Select file" %}')
-            } else {
-                $('#upload-form button[type="submit"]').prop('disabled', false)
-                $('#upload-form p').text(this.files[0].name);
-            }
-        });
-    });
-</script>
diff --git a/rdmo/core/templatetags/core_tags.py b/rdmo/core/templatetags/core_tags.py
index 530c5fb157..e6515b023b 100644
--- a/rdmo/core/templatetags/core_tags.py
+++ b/rdmo/core/templatetags/core_tags.py
@@ -22,9 +22,9 @@ def i18n_switcher():
     for language, language_string in settings.LANGUAGES:
         url = reverse('i18n_switcher', args=[language])
         if language == translation.get_language():
-            string += f"<li><a href=\"{url}\"><u>{language_string}</u></a></li>"
+            string += f"<li><a class=\"dropdown-item\" href=\"{url}\"><u>{language_string}</u></a></li>"
         else:
-            string += f"<li><a href=\"{url}\">{language_string}</a></li>"
+            string += f"<li><a class=\"dropdown-item\" href=\"{url}\">{language_string}</a></li>"
     return mark_safe(string)
 
 
@@ -50,6 +50,18 @@ def render_lang_template(template_name, escape_html=False):
     return ''
 
 
+@register.simple_tag()
+def bootstrap_form_field(field, **kwargs):
+    context = {
+        'field': field
+    }
+
+    if field.widget_type in ['text', 'email', 'password']:
+        return render_to_string('core/forms/bootstrap_input.html', context)
+    else:
+        return render_to_string(f'core/forms/bootstrap_{field.widget_type}.html', context)
+
+
 @register.simple_tag(takes_context=True)
 def bootstrap_form(context, **kwargs):
     form_context = {}
diff --git a/rdmo/core/tests/test_openapi.py b/rdmo/core/tests/test_openapi.py
index a12f319eff..6b26055b89 100644
--- a/rdmo/core/tests/test_openapi.py
+++ b/rdmo/core/tests/test_openapi.py
@@ -10,6 +10,7 @@
     'anonymous'
 )
 
+n_path = 137
 
 @pytest.mark.parametrize('username', users)
 def test_openapi_schema(db, client, login, settings, username):
@@ -21,8 +22,7 @@ def test_openapi_schema(db, client, login, settings, username):
         assert response.status_code == 200
         schema = yaml.safe_load(response.content)
         assert schema['openapi'] == '3.0.3'
-        assert len(schema['paths']) > 120
-        assert len(schema['paths']) < 140
+        assert len(schema['paths']) == 140
     else:
         assert response.status_code == 302
 
diff --git a/rdmo/core/tests/test_package_status.py b/rdmo/core/tests/test_package_status.py
index 2bd6ca4bf0..958c51a55e 100644
--- a/rdmo/core/tests/test_package_status.py
+++ b/rdmo/core/tests/test_package_status.py
@@ -1,58 +1,36 @@
 import json
 
-import pytest
-
 from django.core.management import call_command
 
 import yaml
 from packaging.version import Version
 
 
-def parse_js_version(version_str: str) -> Version:
-    stripped_version = version_str.lstrip("^~")
-    return Version(stripped_version)
-
 def test_makemigrations_has_no_changes(db, capsys):
     call_command("makemigrations", check=True, dry_run=True)
     captured = capsys.readouterr()
     assert "No changes detected" in captured.out
 
-@pytest.fixture(scope="session")
-def package_json():
-    with open("package.json") as f:
-        return json.load(f)
 
-@pytest.fixture(scope="session")
-def pre_commit_config():
+def test_package_json_and_pre_commit_versions_match():
     with open(".pre-commit-config.yaml") as f:
-        return yaml.safe_load(f)
-
-@pytest.fixture(scope="session")
-def package_json_versions(package_json):
-    versions = {
-        "eslint": parse_js_version(package_json["devDependencies"]["eslint"]),
-        "eslint-plugin-react": parse_js_version(package_json["devDependencies"]["eslint-plugin-react"]),
-        "react": parse_js_version(package_json["dependencies"]["react"]),
-    }
-    return versions
-
-@pytest.fixture(scope="session")
-def pre_commit_config_versions(pre_commit_config):
-    mirrors_eslint = "https://github.com/pre-commit/mirrors-eslint"
+        pre_commit_config = yaml.safe_load(f)
+
+    with open("package.json") as f:
+        package_json = json.load(f)
+
+    mirrors_eslint_url = "https://github.com/pre-commit/mirrors-eslint"
     for repo in pre_commit_config["repos"]:
-        if repo["repo"] == mirrors_eslint:
+        if repo["repo"] == mirrors_eslint_url:
             eslint_config = repo["hooks"][0]
             break
-    versions = {}
+
+    pre_commit_config_versions = {}
     for dependency in sorted(eslint_config["additional_dependencies"]):
         name, version = dependency.split("@")
-        versions[name] = parse_js_version(version)
-    return versions
-
-def test_package_json_and_pre_commit_versions_match(package_json_versions, pre_commit_config_versions):
-    eslint_plugin_react_package = package_json_versions.pop('eslint-plugin-react')
-    eslint_plugin_react_precommit = pre_commit_config_versions.pop('eslint-plugin-react')
-    assert eslint_plugin_react_package.major == eslint_plugin_react_precommit.major
-    assert abs(eslint_plugin_react_package.minor - eslint_plugin_react_precommit.minor) < 3
+        pre_commit_config_versions[name] = Version(version.lstrip("^~"))
 
-    assert package_json_versions == pre_commit_config_versions
+    for name, version in package_json["devDependencies"].items():
+        if name in pre_commit_config_versions:
+            assert pre_commit_config_versions[name].major == Version(version.strip('^~')).major, name
+            assert abs(pre_commit_config_versions[name].minor - Version(version.strip('^~')).minor) < 3
diff --git a/rdmo/core/tests/test_tags.py b/rdmo/core/tests/test_tags.py
index 0aa74a73fa..e97728aff5 100644
--- a/rdmo/core/tests/test_tags.py
+++ b/rdmo/core/tests/test_tags.py
@@ -19,6 +19,6 @@ def test_i18n_switcher(rf):
     rendered_template = Template(template).render(context)
     for language in settings.LANGUAGES:
         if language == settings.LANGUAGES[0]:
-            assert '<a href="/i18n/{}/"><u>{}</u></a>'.format(*language) in rendered_template
+            assert 'href="/i18n/{}/"><u>{}</u>'.format(*language) in rendered_template
         else:
-            assert'<a href="/i18n/{}/">{}</a>'.format(*language) in rendered_template
+            assert 'href="/i18n/{}/">{}'.format(*language) in rendered_template
diff --git a/rdmo/core/tests/test_utils.py b/rdmo/core/tests/test_utils.py
index 2c446d5192..eae862cbe7 100644
--- a/rdmo/core/tests/test_utils.py
+++ b/rdmo/core/tests/test_utils.py
@@ -42,7 +42,11 @@
 ]
 
 invalid_date_strings = [
-    ("2025-02-31","day is out of range for month"),
+    ("2025-02-31", (
+        "day is out of range for month",  # Python 3.10
+        "day 31 must be in range 1..28 for month 2 in year 2025"  # Python 3.14
+        )
+     ),
     ("2025-17-02", "month must be in 1..12"),
     ("99/99/9999", "Invalid date format"),
     ("abcd-ef-gh", "Invalid date format"),
@@ -91,11 +95,14 @@ def test_parse_date_from_string_valid_formats(settings, locale, date_string, exp
 
 @pytest.mark.parametrize("invalid_date, error_msg", invalid_date_strings)
 def test_parse_date_from_string_invalid_formats(settings, invalid_date, error_msg):
-    if not isinstance(invalid_date,str):
-        with pytest.raises(TypeError, match=error_msg):
+    patterns = error_msg if isinstance(error_msg, (tuple, list)) else (error_msg,)
+    match = "|".join(f"(?:{pattern})" for pattern in patterns)
+
+    if not isinstance(invalid_date, str):
+        with pytest.raises(TypeError, match=match):
             parse_date_from_string(invalid_date)
     else:
-        with pytest.raises(ValueError,match=error_msg):
+        with pytest.raises(ValueError, match=match):
             parse_date_from_string(invalid_date)
 
 
diff --git a/rdmo/core/urls/__init__.py b/rdmo/core/urls/__init__.py
index e575385582..be212fc975 100644
--- a/rdmo/core/urls/__init__.py
+++ b/rdmo/core/urls/__init__.py
@@ -6,7 +6,6 @@
 urlpatterns = [
     path('account/', include('rdmo.accounts.urls')),
     path('management/', include('rdmo.management.urls')),
-    path('overlays/', include('rdmo.overlays.urls')),
     path('projects/', include('rdmo.projects.urls')),
     path('services/', include('rdmo.services.urls')),
 
diff --git a/rdmo/core/urls/v1/__init__.py b/rdmo/core/urls/v1/__init__.py
index 31119717b6..5a321d5cce 100644
--- a/rdmo/core/urls/v1/__init__.py
+++ b/rdmo/core/urls/v1/__init__.py
@@ -6,7 +6,6 @@
     path('domain/', include('rdmo.domain.urls.v1')),
     path('management/', include('rdmo.management.urls.v1')),
     path('options/', include('rdmo.options.urls.v1')),
-    path('overlays/', include('rdmo.overlays.urls.v1')),
     path('projects/', include('rdmo.projects.urls.v1')),
     path('questions/', include('rdmo.questions.urls.v1')),
     path('tasks/', include('rdmo.tasks.urls.v1')),
diff --git a/rdmo/core/views.py b/rdmo/core/views.py
index f8d9603866..773a21cab2 100644
--- a/rdmo/core/views.py
+++ b/rdmo/core/views.py
@@ -68,7 +68,6 @@ def api(request):
                 'domain',
                 'management',
                 'options',
-                'overlays',
                 'projects',
                 'questions',
                 'tasks',
diff --git a/rdmo/management/assets/js/actions/actionTypes.js b/rdmo/management/assets/js/actions/actionTypes.js
new file mode 100644
index 0000000000..79158ecf28
--- /dev/null
+++ b/rdmo/management/assets/js/actions/actionTypes.js
@@ -0,0 +1,37 @@
+export const FETCH_ELEMENTS_INIT = 'FETCH_ELEMENTS_INIT'
+export const FETCH_ELEMENTS_SUCCESS = 'FETCH_ELEMENTS_SUCCESS'
+export const FETCH_ELEMENTS_ERROR = 'FETCH_ELEMENTS_ERROR'
+
+export const FETCH_ELEMENT_INIT = 'FETCH_ELEMENT_INIT'
+export const FETCH_ELEMENT_SUCCESS = 'FETCH_ELEMENT_SUCCESS'
+export const FETCH_ELEMENT_ERROR = 'FETCH_ELEMENT_ERROR'
+
+export const STORE_ELEMENT_INIT = 'STORE_ELEMENT_INIT'
+export const STORE_ELEMENT_SUCCESS = 'STORE_ELEMENT_SUCCESS'
+export const STORE_ELEMENT_ERROR = 'STORE_ELEMENT_ERROR'
+
+export const CREATE_ELEMENT_INIT = 'CREATE_ELEMENT_INIT'
+export const CREATE_ELEMENT_SUCCESS = 'CREATE_ELEMENT_SUCCESS'
+export const CREATE_ELEMENT_ERROR = 'CREATE_ELEMENT_ERROR'
+
+export const DELETE_ELEMENT_INIT = 'DELETE_ELEMENT_INIT'
+export const DELETE_ELEMENT_SUCCESS = 'DELETE_ELEMENT_SUCCESS'
+export const DELETE_ELEMENT_ERROR = 'DELETE_ELEMENT_ERROR'
+
+export const UPDATE_ELEMENT = 'UPDATE_ELEMENT'
+
+export const UPLOAD_IMPORT_FILE_INIT = 'UPLOAD_FILE_INIT'
+export const UPLOAD_IMPORT_FILE_SUCCESS = 'UPLOAD_FILE_SUCCESS'
+export const UPLOAD_IMPORT_FILE_ERROR = 'UPLOAD_FILE_ERROR'
+
+export const IMPORT_ELEMENTS_INIT = 'IMPORT_ELEMENTS_INIT'
+export const IMPORT_ELEMENTS_SUCCESS = 'IMPORT_ELEMENTS_SUCCESS'
+export const IMPORT_ELEMENTS_ERROR = 'IMPORT_ELEMENTS_ERROR'
+
+export const UPDATE_IMPORT_ELEMENT = 'UPDATE_IMPORT_ELEMENT'
+export const SELECT_IMPORT_ELEMENTS = 'SELECT_IMPORT_ELEMENTS'
+export const SELECT_CHANGED_IMPORT_ELEMENTS = 'SELECT_CHANGED_IMPORT_ELEMENTS'
+export const SHOW_IMPORT_ELEMENTS = 'SHOW_IMPORT_ELEMENTS'
+export const SHOW_CHANGED_IMPORT_ELEMENTS = 'SHOW_CHANGED_IMPORT_ELEMENTS'
+export const UPDATE_IMPORT_URI_PREFIX = 'UPDATE_IMPORT_URI_PREFIX'
+export const RESET_IMPORT_ELEMENTS = 'RESET_IMPORT_ELEMENTS'
diff --git a/rdmo/management/assets/js/actions/elementActions.js b/rdmo/management/assets/js/actions/elementActions.js
index 26790ec026..d19ad4d315 100644
--- a/rdmo/management/assets/js/actions/elementActions.js
+++ b/rdmo/management/assets/js/actions/elementActions.js
@@ -1,16 +1,19 @@
 import { get, isNil } from 'lodash'
 
-import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
 import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
 import { siteId } from 'rdmo/core/assets/js/utils/meta'
 
+import { elementTypes } from '../constants/elements'
+import { canMoveElement, findDescendants, moveElement, updateWarning } from '../utils/elements'
+import { updateLocation } from '../utils/location'
+
 import ConditionsApi from '../api/ConditionsApi'
 import DomainApi from '../api/DomainApi'
 import OptionsApi from '../api/OptionsApi'
 import QuestionsApi from '../api/QuestionsApi'
 import TasksApi from '../api/TasksApi'
 import ViewsApi from '../api/ViewsApi'
-
 import ConditionsFactory from '../factories/ConditionsFactory'
 import DomainFactory from '../factories/DomainFactory'
 import OptionsFactory from '../factories/OptionsFactory'
@@ -18,9 +21,7 @@ import QuestionsFactory from '../factories/QuestionsFactory'
 import TasksFactory from '../factories/TasksFactory'
 import ViewsFactory from '../factories/ViewsFactory'
 
-import { elementTypes } from '../constants/elements'
-import { updateLocation } from '../utils/location'
-import { canMoveElement, findDescendants, moveElement, updateWarning } from '../utils/elements'
+import * as actionTypes from './actionTypes'
 
 export function fetchElements(elementType) {
   const pendingId = `fetchElements/${elementType}`
@@ -96,20 +97,20 @@ export function fetchElements(elementType) {
 }
 
 export function fetchElementsInit(elementType) {
-  return {type: 'elements/fetchElementsInit', elementType}
+  return {type: actionTypes.FETCH_ELEMENTS_INIT, elementType}
 }
 
 export function fetchElementsSuccess(elements) {
-  return {type: 'elements/fetchElementsSuccess', elements}
+  return {type: actionTypes.FETCH_ELEMENTS_SUCCESS, elements}
 }
 
 export function fetchElementsError(error) {
-  return {type: 'elements/fetchElementsError', error}
+  return {type: actionTypes.FETCH_ELEMENTS_ERROR, error}
 }
 
 // fetch element
 
-export function fetchElement(elementType, elementId, elementAction=null) {
+export function fetchElement(elementType, elementId, elementAction = null) {
   const pendingId = `fetchElement/${elementType}/${elementId}` + (isNil(elementAction) ? '' : `/${elementAction}`)
 
   return function(dispatch, getState) {
@@ -167,7 +168,7 @@ export function fetchElement(elementType, elementId, elementAction=null) {
             QuestionsApi.fetchQuestionSets('index'),
             QuestionsApi.fetchQuestions('index')
           ]).then(([element, attributes, conditions, sections,
-                    questionsets, questions]) => {
+            questionsets, questions]) => {
             if (elementAction == 'copy') {
               delete element.sections
             }
@@ -192,14 +193,14 @@ export function fetchElement(elementType, elementId, elementAction=null) {
             QuestionsApi.fetchQuestionSets('index'),
             QuestionsApi.fetchQuestions('index')
           ]).then(([element, attributes, conditions, pages,
-                    questionsets, questions]) => {
+            questionsets, questions]) => {
             if (elementAction == 'copy') {
               delete element.pages
               delete element.parents
             }
 
             return {
-             element, attributes, conditions, pages, questionsets, questions
+              element, attributes, conditions, pages, questionsets, questions
             }
           })
         }
@@ -219,7 +220,7 @@ export function fetchElement(elementType, elementId, elementAction=null) {
             QuestionsApi.fetchPages('index'),
             QuestionsApi.fetchQuestionSets('index')
           ]).then(([element, attributes, optionsets, options, conditions,
-                    pages, questionsets]) => {
+            pages, questionsets]) => {
             if (elementAction == 'copy') {
               delete element.pages
               delete element.questionsets
@@ -246,17 +247,17 @@ export function fetchElement(elementType, elementId, elementAction=null) {
             QuestionsApi.fetchQuestions('index'),
             TasksApi.fetchTasks('index'),
           ]).then(([element, attributes, conditions, pages, questionsets,
-                    questions, tasks]) => {
-              if (elementAction == 'copy') {
-                delete element.conditions
-                delete element.pages
-                delete element.questionsets
-                delete element.questions
-                delete element.tasks
-              }
+            questions, tasks]) => {
+            if (elementAction == 'copy') {
+              delete element.conditions
+              delete element.pages
+              delete element.questionsets
+              delete element.questions
+              delete element.tasks
+            }
 
             return {
-            element, attributes, conditions, pages, questionsets, questions, tasks
+              element, attributes, conditions, pages, questionsets, questions, tasks
             }
           })
         }
@@ -310,17 +311,17 @@ export function fetchElement(elementType, elementId, elementAction=null) {
           QuestionsApi.fetchQuestions('index'),
           TasksApi.fetchTasks('index'),
         ]).then(([element, attributes, optionsets, options,
-                  pages, questionsets, questions, tasks]) => {
-           if (elementAction == 'copy') {
+          pages, questionsets, questions, tasks]) => {
+          if (elementAction == 'copy') {
             delete element.optionsets
             delete element.pages
             delete element.questionsets
             delete element.questions
             delete element.tasks
           }
-           return {
-             element, attributes, optionsets, options, pages, questionsets, questions, tasks
-           }
+          return {
+            element, attributes, optionsets, options, pages, questionsets, questions, tasks
+          }
         })
         break
 
@@ -366,15 +367,15 @@ export function fetchElement(elementType, elementId, elementAction=null) {
 }
 
 export function fetchElementInit(elementType, elementId, elementAction) {
-  return {type: 'elements/fetchElementInit', elementType, elementId, elementAction}
+  return {type: actionTypes.FETCH_ELEMENT_INIT, elementType, elementId, elementAction}
 }
 
 export function fetchElementSuccess(elements) {
-  return {type: 'elements/fetchElementSuccess', elements}
+  return {type: actionTypes.FETCH_ELEMENT_SUCCESS, elements}
 }
 
 export function fetchElementError(error) {
-  return {type: 'elements/fetchElementError', error}
+  return {type: actionTypes.FETCH_ELEMENT_ERROR, error}
 }
 
 // store element
@@ -450,20 +451,20 @@ export function storeElement(elementType, element, elementAction = null, back =
 }
 
 export function storeElementInit(element) {
-  return {type: 'elements/storeElementInit', element}
+  return {type: actionTypes.STORE_ELEMENT_INIT, element}
 }
 
 export function storeElementSuccess(element) {
-  return {type: 'elements/storeElementSuccess', element}
+  return {type: actionTypes.STORE_ELEMENT_SUCCESS, element}
 }
 
 export function storeElementError(element, error) {
-  return {type: 'elements/storeElementError', element, error}
+  return {type: actionTypes.STORE_ELEMENT_ERROR, element, error}
 }
 
 // createElement
 
-export function createElement(elementType, parent={}) {
+export function createElement(elementType, parent = {}) {
   const pendingId = `createElement/${elementType}`
 
   return function(dispatch, getState) {
@@ -500,7 +501,7 @@ export function createElement(elementType, parent={}) {
           QuestionsApi.fetchQuestionSets('index'),
           QuestionsApi.fetchQuestions('index')
         ]).then(([element, attributes, conditions,
-                  questionsets, questions]) => ({
+          questionsets, questions]) => ({
           element, parent, attributes, conditions, questionsets, questions
         }))
         break
@@ -513,7 +514,7 @@ export function createElement(elementType, parent={}) {
           QuestionsApi.fetchQuestionSets('index'),
           QuestionsApi.fetchQuestions('index')
         ]).then(([element, attributes, conditions,
-                  questionsets, questions]) => ({
+          questionsets, questions]) => ({
           element, parent, attributes, conditions, questionsets, questions
         }))
         break
@@ -528,9 +529,9 @@ export function createElement(elementType, parent={}) {
           QuestionsApi.fetchWidgetTypes(),
           QuestionsApi.fetchValueTypes()
         ]).then(([element, attributes, optionsets,
-                  options, conditions]) => ({
-            element, parent, attributes, optionsets, options, conditions
-          }))
+          options, conditions]) => ({
+          element, parent, attributes, optionsets, options, conditions
+        }))
         break
 
       case 'attributes':
@@ -538,8 +539,8 @@ export function createElement(elementType, parent={}) {
           DomainFactory.createAttribute(getState().config, parent),
           DomainApi.fetchAttributes('index'),
         ]).then(([element, attributes]) => ({
-            element, parent, attributes
-          }))
+          element, parent, attributes
+        }))
         break
 
       case 'optionsets':
@@ -547,8 +548,8 @@ export function createElement(elementType, parent={}) {
           OptionsFactory.createOptionSet(getState().config, parent),
           OptionsApi.fetchOptions('index'),
         ]).then(([element, options]) => ({
-            element, parent, options
-          }))
+          element, parent, options
+        }))
         break
 
       case 'options':
@@ -556,8 +557,8 @@ export function createElement(elementType, parent={}) {
           OptionsFactory.createOption(getState().config, parent),
           OptionsApi.fetchOptionSets('index'),
         ]).then(([element, optionsets]) => ({
-            element, parent, optionsets
-          }))
+          element, parent, optionsets
+        }))
         break
 
       case 'conditions':
@@ -566,8 +567,8 @@ export function createElement(elementType, parent={}) {
           DomainApi.fetchAttributes('index'),
           OptionsApi.fetchOptions('index'),
         ]).then(([element, attributes, options]) => ({
-            element, parent, attributes, options
-          }))
+          element, parent, attributes, options
+        }))
         break
 
       case 'tasks':
@@ -577,8 +578,8 @@ export function createElement(elementType, parent={}) {
           ConditionsApi.fetchConditions('index'),
           QuestionsApi.fetchCatalogs('index')
         ]).then(([element, attributes, conditions, catalogs]) => ({
-            element, attributes, conditions, catalogs
-          }))
+          element, attributes, conditions, catalogs
+        }))
         break
 
       case 'views':
@@ -599,15 +600,15 @@ export function createElement(elementType, parent={}) {
 }
 
 export function createElementInit(elementType) {
-  return {type: 'elements/createElementInit', elementType}
+  return {type: actionTypes.CREATE_ELEMENT_INIT, elementType}
 }
 
 export function createElementSuccess(elements) {
-  return {type: 'elements/createElementSuccess', elements}
+  return {type: actionTypes.CREATE_ELEMENT_SUCCESS, elements}
 }
 
 export function createElementError(error) {
-  return {type: 'elements/createElementError', error}
+  return {type: actionTypes.CREATE_ELEMENT_ERROR, error}
 }
 
 // delete element
@@ -677,21 +678,21 @@ export function deleteElement(elementType, element) {
 }
 
 export function deleteElementInit(element) {
-  return {type: 'elements/deleteElementInit', element}
+  return {type: actionTypes.DELETE_ELEMENT_INIT, element}
 }
 
 export function deleteElementSuccess(element) {
-  return {type: 'elements/deleteElementSuccess', element}
+  return {type: actionTypes.DELETE_ELEMENT_SUCCESS, element}
 }
 
 export function deleteElementError(element, error) {
-  return {type: 'elements/deleteElementError', element, error}
+  return {type: actionTypes.DELETE_ELEMENT_ERROR, element, error}
 }
 
 // update elements
 
 export function updateElement(element, values) {
-  return {type: 'elements/updateElement', element, values}
+  return {type: actionTypes.UPDATE_ELEMENT, element, values}
 }
 
 // move elements
@@ -703,9 +704,9 @@ export function dropElement(dragElement, dropElement, mode) {
       const element = {...getState().elements.element}
       const { dragParent, dropParent } = moveElement(element, dragElement, dropElement, mode)
 
-    dispatch(storeElement(elementTypes[dragParent.model], dragParent))
-    if (!isNil(dropParent)) {
-      dispatch(storeElement(elementTypes[dropParent.model], dropParent))
+      dispatch(storeElement(elementTypes[dragParent.model], dragParent))
+      if (!isNil(dropParent)) {
+        dispatch(storeElement(elementTypes[dropParent.model], dropParent))
       }
     }
   }
diff --git a/rdmo/management/assets/js/actions/importActions.js b/rdmo/management/assets/js/actions/importActions.js
index 0240cddcc6..cea606f78c 100644
--- a/rdmo/management/assets/js/actions/importActions.js
+++ b/rdmo/management/assets/js/actions/importActions.js
@@ -1,10 +1,11 @@
 import isNil from 'lodash/isNil'
 
-import ManagementApi from '../api/ManagementApi'
-
 import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
 
-import { fetchElements, fetchElement } from './elementActions'
+import ManagementApi from '../api/ManagementApi'
+
+import * as actionTypes from './actionTypes'
+import { fetchElement, fetchElements } from './elementActions'
 
 
 // upload file
@@ -24,15 +25,15 @@ export function uploadFile(file) {
 }
 
 export function uploadFileInit(file) {
-  return {type: 'import/uploadFileInit', file: file}
+  return {type: actionTypes.UPLOAD_IMPORT_FILE_INIT, file: file}
 }
 
 export function uploadFileSuccess(elements) {
-  return {type: 'import/uploadFileSuccess', elements}
+  return {type: actionTypes.UPLOAD_IMPORT_FILE_SUCCESS, elements}
 }
 
 export function uploadFileError(error) {
-  return {type: 'import/uploadFileError', error}
+  return {type: actionTypes.UPLOAD_IMPORT_FILE_ERROR, error}
 }
 
 // import elements
@@ -54,39 +55,39 @@ export function importElements() {
 }
 
 export function importElementsInit() {
-  return {type: 'import/importElementsInit'}
+  return {type: actionTypes.IMPORT_ELEMENTS_INIT}
 }
 
 export function importElementsSuccess(elements) {
-  return {type: 'import/importElementsSuccess', elements}
+  return {type: actionTypes.IMPORT_ELEMENTS_SUCCESS, elements}
 }
 
 export function importElementsError(error) {
-  return {type: 'import/importElementsError', error}
+  return {type: actionTypes.IMPORT_ELEMENTS_ERROR, error}
 }
 
 // update elements
 
 export function updateElement(element, values) {
-  return {type: 'import/updateElement', element, values}
+  return {type: actionTypes.UPDATE_IMPORT_ELEMENT, element, values}
 }
 
 export function selectElements(value) {
-  return {type: 'import/selectElements', value}
+  return {type: actionTypes.SELECT_IMPORT_ELEMENTS, value}
 }
 export function selectChangedElements(value) {
-  return {type: 'import/selectChangedElements', value}
+  return {type: actionTypes.SELECT_CHANGED_IMPORT_ELEMENTS, value}
 }
 
 export function showElements(value) {
-  return {type: 'import/showElements', value}
+  return {type: actionTypes.SHOW_IMPORT_ELEMENTS, value}
 }
 export function showChangedElements(value) {
-  return {type: 'import/showChangedElements', value}
+  return {type: actionTypes.SHOW_CHANGED_IMPORT_ELEMENTS, value}
 }
 
 export function updateUriPrefix(uriPrefix) {
-  return {type: 'import/updateUriPrefix', uriPrefix}
+  return {type: actionTypes.UPDATE_IMPORT_URI_PREFIX, uriPrefix}
 }
 
 export function resetElements() {
@@ -97,6 +98,6 @@ export function resetElements() {
     } else {
       dispatch(fetchElement(elementType, elementId, elementAction))
     }
-    dispatch({type: 'import/resetElements'})
+    dispatch({type: actionTypes.RESET_IMPORT_ELEMENTS})
   }
 }
diff --git a/rdmo/management/assets/js/components/Main.js b/rdmo/management/assets/js/components/Main.js
new file mode 100644
index 0000000000..92ef3622d9
--- /dev/null
+++ b/rdmo/management/assets/js/components/Main.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { get, isEmpty, isNil } from 'lodash'
+
+import { MainErrors } from '../components/common/Errors'
+import Edit from '../components/edit/Edit'
+import Elements from '../components/elements/Elements'
+import Import from '../components/import/Import'
+import Nested from '../components/nested/Nested'
+
+const Main = () => {
+  const config = useSelector((state) => state.config)
+  const elements = useSelector((state) => state.elements)
+  const imports = useSelector((state) => state.imports)
+
+  const { element, elementType, elementId, elementAction } = elements
+
+  const render = () => {
+    // check if anything was loaded yet
+    if (isNil(config.settings) || isNil(elementType)) {
+      return null
+    }
+
+    // check if an error occurred
+    if (!isNil(elements.errors.api)) {
+      return <MainErrors errors={elements.errors.api} />
+    } else if (get(elements, 'element.errors.api')) {
+      return <MainErrors errors={get(elements, 'element.errors.api')} />
+    } else if (!isNil(imports.errors.file)) {
+      return <MainErrors errors={imports.errors.file} />
+    }
+
+    if (!isEmpty(imports.elements)) {
+      return <Import />
+    }
+
+    // check if the nested components should be displayed
+    if (!isNil(element) && elementAction === 'nested') {
+      return <Nested />
+    }
+
+    // check if the edit components should be displayed
+    if (!isNil(element)) {
+      return <Edit />
+    }
+
+    // check if the list components should be displayed
+    if (isNil(elementId) && isNil(elementAction)) {
+      return <Elements />
+    }
+
+    // fetching the data is not complete yet, or no action was invoked yet
+    return null
+  }
+
+  return (
+    <div className="container-lg gx-0">
+      {render()}
+    </div>
+  )
+}
+
+export default Main
diff --git a/rdmo/management/assets/js/components/Sidebar.js b/rdmo/management/assets/js/components/Sidebar.js
new file mode 100644
index 0000000000..6123728851
--- /dev/null
+++ b/rdmo/management/assets/js/components/Sidebar.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { isEmpty, isNil } from 'lodash'
+
+import ElementsSidebar from '../components/sidebar/ElementsSidebar'
+import ImportSidebar from '../components/sidebar/ImportSidebar'
+
+const Sidebar = () => {
+  const config = useSelector((state) => state.config)
+  const imports = useSelector((state) => state.imports)
+
+  // check if anything was loaded yet
+  if (isNil(config.settings)) {
+    return null
+  }
+
+  if (isEmpty(imports.elements)) {
+    return <ElementsSidebar />
+  } else {
+    return <ImportSidebar />
+  }
+}
+
+export default Sidebar
diff --git a/rdmo/management/assets/js/components/common/Buttons.js b/rdmo/management/assets/js/components/common/Buttons.js
index 9b8afb9530..43458521f4 100644
--- a/rdmo/management/assets/js/components/common/Buttons.js
+++ b/rdmo/management/assets/js/components/common/Buttons.js
@@ -1,23 +1,41 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classNames from 'classnames'
 
-const BackButton = () => (
-  <button className="element-button btn btn-xs btn-default" onClick={() => history.back()}>
+const BackButton = ({ className }) => (
+  <button
+    className={classNames('element-button btn btn-sm btn-light border', className)}
+    onClick={() => history.back()}>
     {gettext('Back')}
   </button>
 )
 
-const SaveButton = ({ elementAction, onClick, disabled=false, back=false }) => {
-  let text, className = 'element-button btn btn-xs'
+BackButton.propTypes = {
+  className: PropTypes.string
+}
+
+const SaveButton = ({ elementAction, onClick, disabled = false, back = false }) => {
+  let text
+  let className
+
   if (elementAction == 'create') {
     text = back ? gettext('Create') : gettext('Create and continue editing')
-    className += back ? ' btn-success' : ' btn-default'
+    className = classNames('btn btn-sm', {
+      'btn-success': back,
+      'btn-light border': !back
+    })
   } else if (elementAction == 'copy') {
     text = back ? gettext('Copy') : gettext('Copy and continue editing')
-    className += back ? ' btn-info' : ' btn-default'
+    className = classNames('btn btn-sm', {
+      'btn-info': back,
+      'btn-light border': !back
+    })
   } else {
     text = back ? gettext('Save') : gettext('Save and continue editing')
-    className += back ? ' btn-primary' : ' btn-default'
+    className = classNames('btn btn-sm', {
+      'btn-primary': back,
+      'btn-light border': !back
+    })
   }
 
   return (
@@ -35,7 +53,7 @@ SaveButton.propTypes = {
 }
 
 const NewButton = ({ onClick }) => (
-  <button className="element-button btn btn-xs btn-success" onClick={() => onClick()}>
+  <button className="element-button btn btn-sm btn-success" onClick={() => onClick()}>
     {gettext('New')}
   </button>
 )
@@ -44,8 +62,8 @@ NewButton.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-const DeleteButton = ({ onClick, disabled=false }) => (
-  <button className="element-button btn btn-xs btn-danger" onClick={() => onClick()} disabled={disabled}>
+const DeleteButton = ({ onClick, disabled = false }) => (
+  <button className="element-button btn btn-sm btn-danger" onClick={() => onClick()} disabled={disabled}>
     {gettext('Delete')}
   </button>
 )
@@ -55,4 +73,4 @@ DeleteButton.propTypes = {
   disabled: PropTypes.bool
 }
 
-export { BackButton, SaveButton, NewButton, DeleteButton }
+export { BackButton, DeleteButton, NewButton, SaveButton }
diff --git a/rdmo/management/assets/js/components/common/Checkboxes.js b/rdmo/management/assets/js/components/common/Checkboxes.js
deleted file mode 100644
index 7265be5de0..0000000000
--- a/rdmo/management/assets/js/components/common/Checkboxes.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const Checkbox = ({ label, value, onChange }) => {
-  const checked = [true, 'true'].includes(value)  // values are stored as string in the local storage
-
-  return (
-    <span className="checkbox">
-      <label>
-          <input type="checkbox" checked={checked} onChange={() => onChange(!checked)} />
-          { label }
-      </label>
-    </span>
-  )
-}
-
-Checkbox.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]).isRequired,
-  onChange: PropTypes.func.isRequired
-}
-
-export { Checkbox }
diff --git a/rdmo/management/assets/js/components/common/DragAndDrop.js b/rdmo/management/assets/js/components/common/DragAndDrop.js
index 08e7d807a8..d7e17439d4 100644
--- a/rdmo/management/assets/js/components/common/DragAndDrop.js
+++ b/rdmo/management/assets/js/components/common/DragAndDrop.js
@@ -1,9 +1,12 @@
 import React, { useRef } from 'react'
-import { useDrag, useDrop } from 'react-dnd'
 import PropTypes from 'prop-types'
+import { useDrag, useDrop } from 'react-dnd'
+import { useDispatch } from 'react-redux'
 import classNames from 'classnames'
 
-const Drag = ({ element, show=true }) => {
+import { dropElement } from '../../actions/elementActions'
+
+const Drag = ({ element, show = true }) => {
   const dragRef = useRef(null)
 
   const [{}, drag] = useDrag(() => ({
@@ -13,9 +16,15 @@ const Drag = ({ element, show=true }) => {
 
   drag(dragRef)
 
-  return show && <span className="element-link drag">
-    <i className="fa fa-arrows drag" ref={dragRef} aria-hidden="true"></i>
-  </span>
+  const className = classNames('bi bi-arrows-move drag', {
+    'disabled': element.read_only
+  })
+
+  return show && (
+    <span className="drag">
+      <i className={className} ref={dragRef} aria-hidden="true"></i>
+    </span>
+  )
 }
 
 Drag.propTypes = {
@@ -23,7 +32,9 @@ Drag.propTypes = {
   show: PropTypes.bool
 }
 
-const Drop = ({ element, elementActions, indent=0, mode='in', children=null }) => {
+const Drop = ({ element, indent = 0, mode = 'in', children = null }) => {
+  const dispatch = useDispatch()
+
   const dropRef = useRef(null)
 
   let accept
@@ -49,7 +60,7 @@ const Drop = ({ element, elementActions, indent=0, mode='in', children=null }) =
       isOver: monitor.isOver()
     }),
     drop: (item) => {
-      elementActions.dropElement(item, element, mode)
+      dispatch(dropElement(item, element, mode))
     },
   }), [element])
 
@@ -65,13 +76,12 @@ const Drop = ({ element, elementActions, indent=0, mode='in', children=null }) =
   if (mode == 'in') {
     return <div className={dropClassName} ref={dropRef}>{children}</div>
   } else {
-    return <div className={dropClassName} ref={dropRef} style={{ marginLeft: 30 * indent }}></div>
+    return <div className={dropClassName} ref={dropRef} style={{ marginLeft: `${indent}rem` }}></div>
   }
 }
 
 Drop.propTypes = {
   element: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   mode: PropTypes.string,
   indent: PropTypes.number,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
diff --git a/rdmo/management/assets/js/components/common/Errors.js b/rdmo/management/assets/js/components/common/Errors.js
index 0e63a37dfd..cb2e5ed998 100644
--- a/rdmo/management/assets/js/components/common/Errors.js
+++ b/rdmo/management/assets/js/components/common/Errors.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import isString from 'lodash/isString'
+import { isEmpty, isString } from 'lodash'
 
 const MainErrors = ({ errors }) => {
   return (
@@ -11,7 +11,7 @@ const MainErrors = ({ errors }) => {
             <strong>{gettext('One or more errors occurred:')}</strong>
           </p>
           <ul className="mb-0">
-            { errors.map((error, index) => <li key={index}>{error}</li>) }
+            {errors.map((error, index) => <li key={index}>{error}</li>)}
           </ul>
         </div>
       </div>
@@ -24,7 +24,7 @@ MainErrors.propTypes = {
 }
 
 const ElementErrors = ({ element }) => {
-  if (element.errors) {
+  if (!isEmpty(element.errors)) {
     const errorList = Object.values(element.errors).flat().reduce((acc, cur) => {
       if (isString(cur)) {
         acc.push(cur)
@@ -37,7 +37,7 @@ const ElementErrors = ({ element }) => {
       return acc
     }, [])
 
-    return element.errors && (
+    return (
       <ul className="list-unstyled text-danger mb-0">
         {errorList.map((error, index) => <li key={index}>{error}</li>)}
       </ul>
@@ -51,4 +51,4 @@ ElementErrors.propTypes = {
   element: PropTypes.object.isRequired
 }
 
-export { MainErrors, ElementErrors }
+export { ElementErrors, MainErrors }
diff --git a/rdmo/management/assets/js/components/common/Filter.js b/rdmo/management/assets/js/components/common/Filter.js
index 13119a9143..d659a3ab3a 100644
--- a/rdmo/management/assets/js/components/common/Filter.js
+++ b/rdmo/management/assets/js/components/common/Filter.js
@@ -3,17 +3,15 @@ import PropTypes from 'prop-types'
 
 const FilterString = ({ value, onChange, label }) => {
   return (
-    <div className="form-group mb-0">
-      <div className="input-group">
-        <input type="text" className="form-control" placeholder={label} aria-label={label}
-               value={ value } onChange={e => onChange(e.target.value)}></input>
-        <span className="input-group-btn">
-          <button className="btn btn-default" onClick={() => onChange('')}
-                  title={gettext('Reset')} aria-label={gettext('Reset')}>
-            <span className="fa fa-times"></span>
-          </button>
-        </span>
-      </div>
+    <div className="input-group mb-2">
+      <input
+        type="text" className="form-control" placeholder={label} aria-label={label}
+        value={value} onChange={e => onChange(e.target.value)}></input>
+      <button
+        className="btn btn-light border" onClick={() => onChange('')}
+        title={gettext('Reset')} aria-label={gettext('Reset')}>
+        <strong className="bi bi-x-lg"></strong>
+      </button>
     </div>
   )
 }
@@ -26,9 +24,10 @@ FilterString.propTypes = {
 
 const FilterUriPrefix = ({ value, options, onChange }) => {
   return (
-    <div className="form-group mb-0">
-      <select className="form-control" value={value} aria-label={gettext('Filter URI prefix')}
-              onChange={event => onChange(event.target.value)}>
+    <div className="form-group mb-2">
+      <select
+        className="form-select" value={value} aria-label={gettext('Filter URI prefix')}
+        onChange={event => onChange(event.target.value)}>
         <option value="">{gettext('All URI prefixes')}</option>
         {
           options.map((option, index) => <option value={option} key={index}>{option}</option>)
@@ -46,10 +45,11 @@ FilterUriPrefix.propTypes = {
 
 const FilterSite = ({ value, options, onChange, label = 'Filter sites', allLabel = 'All sites' }) => {
   return (
-    <div className="form-group mb-0">
-      <select className="form-control" value={value} aria-label={label}
-              onChange={event => onChange(event.target.value)}>
-       <option value="">{gettext(allLabel)}</option>
+    <div className="form-group mb-2">
+      <select
+        className="form-select" value={value} aria-label={label}
+        onChange={event => onChange(event.target.value)}>
+        <option value="">{gettext(allLabel)}</option>
         {
           options.map((option, index) => <option value={option.id} key={index}>{option.name}</option>)
         }
@@ -66,4 +66,4 @@ FilterSite.propTypes = {
   allLabel: PropTypes.string
 }
 
-export { FilterString, FilterUriPrefix, FilterSite }
+export { FilterSite, FilterString, FilterUriPrefix }
diff --git a/rdmo/management/assets/js/components/common/Forms.js b/rdmo/management/assets/js/components/common/Forms.js
deleted file mode 100644
index e95382e633..0000000000
--- a/rdmo/management/assets/js/components/common/Forms.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import isNil from 'lodash/isNil'
-
-const UploadForm = ({ onSubmit }) => {
-  const [file, setFile] = useState(null)
-
-  const handleSubmit = event => {
-    event.preventDefault()
-    onSubmit(file)
-  }
-
-  return (
-    <form className="upload-form sidebar-form" onSubmit={handleSubmit}>
-      <div className="upload-form-field">
-        <input type="file" name="uploaded_file" aria-label={gettext('Upload file')}
-               onChange={event => setFile(event.target.files[0])} accept=".xml" />
-        <p>{file ? file.name : gettext('Select file')}</p>
-      </div>
-
-      <div className="sidebar-form-button">
-        <button type="submit" className="btn btn-primary" disabled={isNil(file)}
-                title={gettext('Upload')} aria-label={gettext('Upload')}
-                onClick={handleSubmit}>
-          <i className="fa fa-arrow-right" aria-hidden="true"></i>
-        </button>
-      </div>
-    </form>
-  )
-}
-
-UploadForm.propTypes = {
-  onSubmit: PropTypes.func.isRequired
-}
-
-export { UploadForm }
diff --git a/rdmo/management/assets/js/components/common/Icons.js b/rdmo/management/assets/js/components/common/Icons.js
index 162b1bec34..8210eab22f 100644
--- a/rdmo/management/assets/js/components/common/Icons.js
+++ b/rdmo/management/assets/js/components/common/Icons.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 const ReadOnlyIcon = ({ title, show }) => {
   return show && (
-    <i className="element-button fa fa-ban" title={title} aria-hidden="true"></i>
+    <i className="element-button bi bi-ban" title={title} aria-hidden="true"></i>
   )
 }
 
diff --git a/rdmo/management/assets/js/components/common/Labels.js b/rdmo/management/assets/js/components/common/Labels.js
deleted file mode 100644
index f0d3e3729e..0000000000
--- a/rdmo/management/assets/js/components/common/Labels.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-const Label = ({ text, type, onClick, show = true, className = '' }) => {
-  const labelClass = `label label-${type} ${className}`
-  return show && (
-    <span className={labelClass} onClick={onClick}>
-      {text}
-    </span>
-  )
-}
-
-Label.propTypes = {
-  text: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  show: PropTypes.bool,
-  className: PropTypes.string,
-}
-
-export default Label
diff --git a/rdmo/management/assets/js/components/common/Links.js b/rdmo/management/assets/js/components/common/Links.js
index c9454a91e0..ce044a3b51 100644
--- a/rdmo/management/assets/js/components/common/Links.js
+++ b/rdmo/management/assets/js/components/common/Links.js
@@ -7,8 +7,8 @@ import isUndefined from 'lodash/isUndefined'
 import Link from 'rdmo/core/assets/js/components/Link'
 import LinkButton from 'rdmo/core/assets/js/components/LinkButton'
 
-const NestedLink = ({ href, title, onClick, show=true }) => {
-  return show && <Link href={href} className="element-link fa fa-align-right flip" title={title} onClick={onClick} />
+const NestedLink = ({ href, title, onClick, show = true }) => {
+  return show && <Link href={href} className="element-link bi bi-list-nested" title={title} onClick={onClick} />
 }
 
 NestedLink.propTypes = {
@@ -18,8 +18,8 @@ NestedLink.propTypes = {
   show: PropTypes.bool
 }
 
-const EditLink = ({ href, title, onClick, disabled= false }) => {
-  return <Link href={href} className="element-link fa fa-pencil" title={title} onClick={onClick} disabled={disabled} />
+const EditLink = ({ href, title, onClick, disabled = false }) => {
+  return <Link href={href} className="element-link bi bi-pencil" title={title} onClick={onClick} disabled={disabled} />
 }
 
 EditLink.propTypes = {
@@ -30,7 +30,7 @@ EditLink.propTypes = {
 }
 
 const CopyLink = ({ href, title, onClick }) => {
-  return <Link href={href} className="element-link fa fa-copy" title={title} onClick={onClick} />
+  return <Link href={href} className="element-link bi bi-copy" title={title} onClick={onClick} />
 }
 
 CopyLink.propTypes = {
@@ -41,12 +41,13 @@ CopyLink.propTypes = {
 
 const AddLink = ({ title, altTitle, onClick, onAltClick, disabled }) => {
   if (isUndefined(onAltClick)) {
-    return <LinkButton className="element-btn-link fa fa-plus" title={title} onClick={onClick} disabled={disabled} />
+    return <LinkButton className="link bi bi-plus-lg" title={title} onClick={onClick} disabled={disabled} />
   } else {
     return (
       <span className="dropdown">
-        <button type="button" className="element-btn-link btn-link fa fa-plus" data-toggle="dropdown"
-                title={`${title}/${altTitle}`} aria-label={`${title}/${altTitle}`}>
+        <button
+          type="button" className="link btn-link bi bi-plus-lg" data-toggle="dropdown"
+          title={`${title}/${altTitle}`} aria-label={`${title}/${altTitle}`}>
         </button>
         <ul className="dropdown-menu">
           <li onClick={onClick}>
@@ -71,13 +72,16 @@ AddLink.propTypes = {
 
 const AvailableLink = ({ available, locked, title, onClick, disabled }) => {
   const className = classNames({
-    'element-btn-link fa': true,
-    'fa-toggle-on': available,
-    'fa-toggle-off': !available
+    'link bi': true,
+    'bi-toggle-on': available,
+    'bi-toggle-off': !available
   })
 
-  return <LinkButton className={className} title={locked ? gettext('Locked') : title}
-                     disabled={locked || disabled} onClick={onClick} />
+  return (
+    <LinkButton
+      className={className} title={locked ? gettext('Locked') : title}
+      disabled={locked || disabled} onClick={onClick} />
+  )
 }
 
 AvailableLink.propTypes = {
@@ -90,9 +94,9 @@ AvailableLink.propTypes = {
 
 const LockedLink = ({ locked, title, onClick, disabled }) => {
   const className = classNames({
-    'element-btn-link fa': true,
-    'fa-lock text-danger': locked,
-    'fa-unlock-alt': !locked
+    'link bi': true,
+    'bi-lock text-danger': locked,
+    'bi-unlock': !locked
   })
 
   return <LinkButton className={className} title={title} onClick={onClick} disabled={disabled} />
@@ -107,11 +111,11 @@ LockedLink.propTypes = {
 
 const ToggleCurrentSiteLink = ({ hasCurrentSite, onClick, show }) => {
   const className = classNames({
-    'element-btn-link fa': true,
-    'fa-plus-square': !hasCurrentSite,
-    'fa-minus-square': hasCurrentSite,
+    'link bi': true,
+    'bi-plus-square': !hasCurrentSite,
+    'bi-dash-square': hasCurrentSite,
   })
-  const title = hasCurrentSite ? gettext('Remove your site'): gettext('Add your site')
+  const title = hasCurrentSite ? gettext('Remove your site') : gettext('Add your site')
 
   return  show && <LinkButton className={className} title={title} onClick={onClick} />
 }
@@ -125,9 +129,9 @@ ToggleCurrentSiteLink.propTypes = {
 
 const ShowElementsLink = ({ showElements, show, onClick }) => {
   const className = classNames({
-    'element-btn-link fa': true,
-    'fa-chevron-down': showElements,
-    'fa-chevron-up': !showElements
+    'link bi': true,
+    'bi-chevron-down': showElements,
+    'bi-chevron-up': !showElements
   })
 
   const title = showElements ? gettext('Hide elements') : gettext('Show elements')
@@ -141,34 +145,50 @@ ShowElementsLink.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-const ExportLink = ({ exportUrl, title, exportFormats, csv=false, full=false }) => {
+const ExportLink = ({ exportUrl, title, exportFormats, csv = false, full = false }) => {
   return (
     <span className="dropdown">
-      <button type="button" className="element-btn-link btn-link fa fa-download" data-toggle="dropdown"
-              title={title} aria-label={title}></button>
-      <ul className="dropdown-menu">
-        <li><a href={exportUrl}>{gettext('XML')}</a></li>
+      <button
+        type="button" className="link link bi bi-download" data-bs-toggle="dropdown"
+        title={title} aria-label={title}></button>
+      <ul className="dropdown-menu dropdown-menu-end">
+        <li className="dropdown-item">
+          <a href={exportUrl}>{gettext('XML')}</a>
+        </li>
         {
-          full && <li><a href={exportUrl + '?full=true'}>{gettext('XML (full)')}</a></li>
+          full && (
+            <li className="dropdown-item">
+              <a href={exportUrl + '?full=true'}>{gettext('XML (full)')}</a>
+            </li>
+          )
         }
-        <li role="separator" className="divider"></li>
+        <li><hr className="dropdown-divider" /></li>
         {
-          csv && <>
-            <li><a href={`${exportUrl}csvcomma/`}>
-              {gettext('CSV comma separated')}
-            </a></li>
-            <li><a href={`${exportUrl}csvsemicolon/`}>
-              {gettext('CSV semicolon separated')}
-            </a></li>
-            <li role="separator" className="divider"></li>
-          </>
+          csv && (
+            <>
+              <li className="dropdown-item">
+                <a href={`${exportUrl}csvcomma/`}>
+                  {gettext('CSV comma separated')}
+                </a>
+              </li>
+              <li className="dropdown-item">
+                <a href={`${exportUrl}csvsemicolon/`}>
+                  {gettext('CSV semicolon separated')}
+                </a>
+              </li>
+              <li><hr className="dropdown-divider" /></li>
+            </>
+          )
         }
         {
-          exportFormats.map(([key, label], index) => <li key={index}>
-            <a href={`${exportUrl}${key}/`}
-               target={['pdf', 'html'].includes(key) ? '_blank' : '_self'}
-               rel="noreferrer">{label}</a>
-          </li>)
+          exportFormats.map(([key, label], index) => (
+            <li className="dropdown-item" key={index}>
+              <a
+                href={`${exportUrl}${key}/`}
+                target={['pdf', 'html'].includes(key) ? '_blank' : '_self'}
+                rel="noreferrer">{label}</a>
+            </li>
+          ))
         }
       </ul>
     </span>
@@ -184,14 +204,12 @@ ExportLink.propTypes = {
 }
 
 const ExtendLink = ({ extend, onClick }) => {
-  const className = classNames({
-    'element-link fa': true,
-    'fa-chevron-up': extend,
-    'fa-chevron-down': !extend
+  const className = classNames('element-link bi ms-1', {
+    'bi-chevron-up': extend,
+    'bi-chevron-down': !extend
   })
 
-  const title = extend ? gettext('Show less')
-                       : gettext('Show more')
+  const title = extend ? gettext('Show less') : gettext('Show more')
 
   return <Link className={className} title={title} onClick={onClick} />
 }
@@ -201,21 +219,26 @@ ExtendLink.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-const CodeLink = ({ className, uri, href, onClick, order }) => {
+const CodeLink = ({ className, type, uri, href, onClick, order }) => {
   return (
-    <>
+    <span className={classNames('d-flex gap-2', className)}>
       <Link href={href} onClick={onClick}>
-        <code className={className}>{uri}</code>
+        <code className={`code-${type}`}>{uri}</code>
       </Link>
-      {!isNil(order) ? (
-        <>{' '}<code className="code-order">{order}</code></>
-      ) : null}
-    </>
+      {
+        !isNil(order) && (
+          <span>
+            <code className="code-order">{order}</code>
+          </span>
+        )
+      }
+    </span>
   )
 }
 
 CodeLink.propTypes = {
-  className: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  type: PropTypes.string.isRequired,
   uri: PropTypes.string.isRequired,
   href: PropTypes.string,
   onClick: PropTypes.func.isRequired,
@@ -223,7 +246,7 @@ CodeLink.propTypes = {
 }
 
 const ErrorLink = ({ onClick }) => {
-  return <Link className="element-link fa fa-warning text-danger" onClick={onClick} />
+  return <Link className="element-link bi bi-exclamation-triangle text-danger" onClick={onClick} />
 }
 
 ErrorLink.propTypes = {
@@ -231,7 +254,7 @@ ErrorLink.propTypes = {
 }
 
 const WarningLink = ({ onClick }) => {
-  return <Link className="element-link fa fa-warning text-warning" onClick={onClick} />
+  return <Link className="element-link bi bi-exclamation-triangle text-warning" onClick={onClick} />
 }
 
 WarningLink.propTypes = {
@@ -241,9 +264,9 @@ WarningLink.propTypes = {
 const ShowLink = ({ show = false, onClick }) => {
   const title = show ? gettext('Hide') : gettext('Show')
   const className = classNames({
-    'element-link fa': true,
-    'fa-chevron-down': !show,
-    'fa-chevron-up': show
+    'element-link bi': true,
+    'bi-chevron-down': !show,
+    'bi-chevron-up': show
   })
 
   return <Link className={className} title={title} onClick={onClick} />
@@ -254,5 +277,19 @@ ShowLink.propTypes = {
   onClick: PropTypes.func.isRequired
 }
 
-export { EditLink, CopyLink, AddLink, AvailableLink, ToggleCurrentSiteLink, LockedLink, ShowElementsLink,
-         NestedLink, ExportLink, ExtendLink, CodeLink, ErrorLink, WarningLink, ShowLink }
+export {
+  AddLink,
+  AvailableLink,
+  CodeLink,
+  CopyLink,
+  EditLink,
+  ErrorLink,
+  ExportLink,
+  ExtendLink,
+  LockedLink,
+  NestedLink,
+  ShowElementsLink,
+  ShowLink,
+  ToggleCurrentSiteLink,
+  WarningLink
+}
diff --git a/rdmo/management/assets/js/components/common/Modals.js b/rdmo/management/assets/js/components/common/Modals.js
index 2dfa3c72ed..b8d2b2e740 100644
--- a/rdmo/management/assets/js/components/common/Modals.js
+++ b/rdmo/management/assets/js/components/common/Modals.js
@@ -9,7 +9,7 @@ const DeleteModal = ({ title, show, onClose, onDelete, children }) => {
         <h2 className="modal-title">{title}</h2>
       </Modal.Header>
       <Modal.Body>
-        { children }
+        {children}
       </Modal.Body>
       <Modal.Footer>
         <button type="button" className="btn btn-default" onClick={onClose}>
diff --git a/rdmo/management/assets/js/components/edit/Edit.js b/rdmo/management/assets/js/components/edit/Edit.js
new file mode 100644
index 0000000000..246b3b02a1
--- /dev/null
+++ b/rdmo/management/assets/js/components/edit/Edit.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import useScrollEffect from '../../hooks/useScrollEffect'
+
+import EditAttribute from './EditAttribute'
+import EditCatalog from './EditCatalog'
+import EditCondition from './EditCondition'
+import EditOption from './EditOption'
+import EditOptionSet from './EditOptionSet'
+import EditPage from './EditPage'
+import EditQuestion from './EditQuestion'
+import EditQuestionSet from './EditQuestionSet'
+import EditSection from './EditSection'
+import EditTask from './EditTask'
+import EditView from './EditView'
+
+const Edit = () => {
+  const { element, elementType } = useSelector((state) => state.elements)
+
+  useScrollEffect(elementType, element.id)
+
+  switch (elementType) {
+    case 'catalogs':
+      return <EditCatalog catalog={element} />
+    case 'sections':
+      return <EditSection section={element} />
+    case 'pages':
+      return <EditPage page={element} />
+    case 'questionsets':
+      return <EditQuestionSet questionset={element}  />
+    case 'questions':
+      return <EditQuestion question={element} />
+    case 'attributes':
+      return <EditAttribute attribute={element}  />
+    case 'optionsets':
+      return <EditOptionSet optionset={element} />
+    case 'options':
+      return <EditOption option={element} />
+    case 'conditions':
+      return <EditCondition condition={element} />
+    case 'tasks':
+      return <EditTask task={element} />
+    case 'views':
+      return <EditView view={element} />
+  }
+}
+
+export default Edit
diff --git a/rdmo/management/assets/js/components/edit/EditAttribute.js b/rdmo/management/assets/js/components/edit/EditAttribute.js
index 1d49213573..eff39cc86a 100644
--- a/rdmo/management/assets/js/components/edit/EditAttribute.js
+++ b/rdmo/management/assets/js/components/edit/EditAttribute.js
@@ -1,140 +1,170 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
 
-import Checkbox from './common/Checkbox'
-import Select from './common/Select'
-import Text from './common/Text'
-import Textarea from './common/Textarea'
-import UriPrefix from './common/UriPrefix'
+import Html from 'rdmo/core/assets/js/components/Html'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
+import { deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
 
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
 import AttributeInfo from '../info/AttributeInfo'
 import DeleteAttributeModal from '../modals/DeleteAttributeModal'
 
-import useDeleteModal from '../../hooks/useDeleteModal'
+import Checkbox from './common/Checkbox'
+import Select from './common/Select'
+import Text from './common/Text'
+import Textarea from './common/Textarea'
+import UriPrefix from './common/UriPrefix'
 
-const EditAttribute = ({ config, attribute, elements, elementActions }) => {
+const EditAttribute = ({ attribute }) => {
+  const dispatch = useDispatch()
 
-  const { sites } = config
-  const { elementAction, parent, attributes } = elements
+  const { sites, settings } = useSelector((state) => state.config)
+  const { elementAction, parent, attributes } = useSelector((state) => state.elements)
 
-  const editAttribute = (attribute) => elementActions.fetchElement('attributes', attribute)
-  const updateAttribute = (key, value) => elementActions.updateElement(attribute, {[key]: value})
-  const storeAttribute = (back) => elementActions.storeElement('attributes', attribute, elementAction, back)
-  const deleteAttribute = () => elementActions.deleteElement('attributes', attribute)
+  const editAttribute = (attribute) => dispatch(fetchElement('attributes', attribute))
+  const updateAttribute = (key, value) => dispatch(updateElement(attribute, {[key]: value}))
+  const storeAttribute = (back) => dispatch(storeElement('attributes', attribute, elementAction, back))
+  const deleteAttribute = () => dispatch(deleteElement('attributes', attribute))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <AttributeInfo attribute={attribute} elements={elements} elementActions={elementActions} />
+  const info = <AttributeInfo attribute={attribute} />
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {attribute.id ? gettext('Edit attribute') : gettext('Create attribute')}
+          </strong>
           <ReadOnlyIcon title={gettext('This attribute is read only')} show={attribute.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeAttribute} disabled={attribute.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeAttribute} disabled={attribute.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeAttribute}
+            disabled={attribute.read_only}
+            back={true}
+          />
         </div>
-        {
-          attribute.id ? <>
-            <strong>{gettext('Attribute')}{': '}</strong>
-            <code className="code-domain">{attribute.uri}</code>
-          </> : <strong>{gettext('Create attribute')}</strong>
-        }
       </div>
 
       {
-        parent && parent.attribute && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This attribute will be added to the attribute <code class="code-domain">%s</code>.'), [parent.attribute.uri])
-          }} />
-        </div>
+        parent && parent.attribute && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This attribute will be added to the attribute <code class="code-domain">%s</code>.'),
+              [parent.attribute.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        parent && parent.page && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This attribute will be added to the page <code class="code-questions">%s</code>.'), [parent.page.uri])
-          }} />
-        </div>
+        parent && parent.page && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This attribute will be added to the page <code class="code-questions">%s</code>.'),
+              [parent.page.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.questionset && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This attribute will be added to the question set <code class="code-questions">%s</code>.'), [parent.questionset.uri])
-          }} />
-        </div>
+        parent && parent.questionset && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This attribute will be added to the question set <code class="code-questions">%s</code>.'),
+              [parent.questionset.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.question && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This attribute will be added to the question <code class="code-questions">%s</code>.'), [parent.question.uri])
-          }} />
-        </div>
+        parent && parent.question && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This attribute will be added to the question <code class="code-questions">%s</code>.'),
+              [parent.question.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.condition && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This attribute will be added to the condition <code class="code-conditions">%s</code>.'), [parent.condition.uri])
-          }} />
-        </div>
+        parent && parent.condition && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This attribute will be added to the condition <code class="code-conditions">%s</code>.'),
+              [parent.condition.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        attribute.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        attribute.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={attribute} field="uri_prefix"
-                       onChange={updateAttribute} />
+            <UriPrefix element={attribute} field="uri_prefix" onChange={updateAttribute} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={attribute} field="key"
-                  onChange={updateAttribute} />
+            <Text element={attribute} field="key" onChange={updateAttribute} />
           </div>
         </div>
 
-        <Textarea config={config} element={attribute} field="comment"
-                  rows={4} onChange={updateAttribute} />
+        <Textarea element={attribute} field="comment" rows={4} onChange={updateAttribute} />
 
-        <Checkbox config={config} element={attribute} field="locked"
-                  onChange={updateAttribute} />
+        <Checkbox element={attribute} field="locked" onChange={updateAttribute} />
 
-        <Select config={config} element={attribute} field="parent"
-                options={attributes} onChange={updateAttribute} onEdit={editAttribute} />
+        <Select
+          element={attribute} field="parent" options={attributes}
+          onChange={updateAttribute} onEdit={editAttribute} />
 
-        {get(config, 'settings.multisite') && <Select config={config} element={attribute} field="editors"
-                                                      options={sites} onChange={updateAttribute} isMulti />}
+        {
+          settings.multisite && (
+            <Select element={attribute} field="editors" options={sites} onChange={updateAttribute} isMulti />
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {attribute.id && <DeleteButton onClick={openDeleteModal} disabled={attribute.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeAttribute} disabled={attribute.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeAttribute} disabled={attribute.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeAttribute}
+            disabled={attribute.read_only}
+            back={true}
+          />
         </div>
-        {attribute.id && <DeleteButton onClick={openDeleteModal} disabled={attribute.read_only} />}
       </div>
 
-      <DeleteAttributeModal attribute={attribute} info={info} show={showDeleteModal}
-                            onClose={closeDeleteModal} onDelete={deleteAttribute} />
+      <DeleteAttributeModal
+        attribute={attribute} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteAttribute} />
     </div>
   )
 }
 
 EditAttribute.propTypes = {
-  config: PropTypes.object.isRequired,
-  attribute: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  attribute: PropTypes.object.isRequired
 }
 
 export default EditAttribute
diff --git a/rdmo/management/assets/js/components/edit/EditCatalog.js b/rdmo/management/assets/js/components/edit/EditCatalog.js
index 883f431c60..ff361f4db2 100644
--- a/rdmo/management/assets/js/components/edit/EditCatalog.js
+++ b/rdmo/management/assets/js/components/edit/EditCatalog.js
@@ -1,9 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import CatalogInfo from '../info/CatalogInfo'
+import DeleteCatalogModal from '../modals/DeleteCatalogModal'
 
 import Checkbox from './common/Checkbox'
+import LanguageTabs from './common/LanguageTabs'
 import Number from './common/Number'
 import OrderedMultiSelect from './common/OrderedMultiSelect'
 import Select from './common/Select'
@@ -11,128 +19,122 @@ import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
-
-import CatalogInfo from '../info/CatalogInfo'
-import DeleteCatalogModal from '../modals/DeleteCatalogModal'
-
-import useDeleteModal from '../../hooks/useDeleteModal'
+const EditCatalog = ({ catalog }) => {
+  const dispatch = useDispatch()
 
-const EditCatalog = ({ config, catalog, elements, elementActions }) => {
+  const { groups, sites, settings } = useSelector((state) => state.config)
+  const { elementAction, sections } = useSelector((state) => state.elements)
 
-  const { sites, groups } = config
-  const { elementAction, sections } = elements
+  const updateCatalog = (key, value) => dispatch(updateElement(catalog, {[key]: value}))
+  const storeCatalog = (back) => dispatch(storeElement('catalogs', catalog, elementAction, back))
+  const deleteCatalog = () => dispatch(deleteElement('catalogs', catalog))
 
-  const updateCatalog = (key, value) => elementActions.updateElement(catalog, {[key]: value})
-  const storeCatalog = (back) => elementActions.storeElement('catalogs', catalog, elementAction, back)
-  const deleteCatalog = () => elementActions.deleteElement('catalogs', catalog)
-
-  const editSection = (value) => elementActions.fetchElement('sections', value.section)
-  const createSection = () => elementActions.createElement('sections', { catalog } )
+  const editSection = (value) => dispatch(fetchElement('sections', value.section))
+  const createSection = () => dispatch(createElement('sections', { catalog } ))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <CatalogInfo catalog={catalog} elements={elements} />
+  const info = <CatalogInfo catalog={catalog} />
 
   // for reasons unknown, the strings are not picked up by makemessages from the props
   const addSectionText = gettext('Add existing section')
   const createSectionText = gettext('Create new section')
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {catalog.id ? gettext('Edit catalog') : gettext('Create catalog')}
+          </strong>
           <ReadOnlyIcon title={gettext('This catalog is read only')} show={catalog.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeCatalog} disabled={catalog.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeCatalog} disabled={catalog.read_only} back={true}/>
         </div>
-        {
-          catalog.id ? <>
-            <strong>{gettext('Catalog')}{': '}</strong>
-            <code className="code-questions">{catalog.uri}</code>
-          </> : <strong>{gettext('Create catalog')}</strong>
-        }
       </div>
 
       {
-        catalog.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        catalog.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={catalog} field="uri_prefix" onChange={updateCatalog} />
+            <UriPrefix element={catalog} field="uri_prefix" onChange={updateCatalog} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={catalog} field="uri_path" onChange={updateCatalog} />
+            <Text element={catalog} field="uri_path" onChange={updateCatalog} />
           </div>
         </div>
 
-        <Textarea config={config} element={catalog} field="comment" rows={4} onChange={updateCatalog} />
+        <Textarea element={catalog} field="comment" rows={4} onChange={updateCatalog} />
 
         <div className="row">
           <div className="col-sm-4">
-            <Checkbox config={config} element={catalog} field="locked" onChange={updateCatalog} />
+            <Checkbox element={catalog} field="locked" onChange={updateCatalog} />
           </div>
           <div className="col-sm-4">
-            <Checkbox config={config} element={catalog} field="available" onChange={updateCatalog} />
+            <Checkbox element={catalog} field="available" onChange={updateCatalog} />
           </div>
           <div className="col-sm-4">
-            <Number config={config} element={catalog} field="order" onChange={updateCatalog} />
+            <Number element={catalog} field="order" onChange={updateCatalog} />
           </div>
         </div>
 
-        <Tabs id="#catalog-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab key={index} eventKey={index} title={lang}>
-                <Text config={config} element={catalog} field={`title_${lang_code }`}
-                      onChange={updateCatalog} />
-                <Textarea config={config} element={catalog} field={`help_${lang_code }`}
-                          rows={4} onChange={updateCatalog} />
-              </Tab>
-            ))
-          }
-        </Tabs>
-
-        <OrderedMultiSelect config={config} element={catalog} field="sections" options={sections}
-                            addText={addSectionText} createText={createSectionText}
-                            onChange={updateCatalog} onCreate={createSection} onEdit={editSection} />
-
-        {get(config, 'settings.groups') && <Select config={config} element={catalog} field="groups"
-                                                   options={groups} onChange={updateCatalog} isMulti />}
-
-        {get(config, 'settings.multisite') && <Select config={config} element={catalog} field="sites"
-                                                      options={sites} onChange={updateCatalog} isMulti />}
-
-        {get(config, 'settings.multisite') && <Select config={config} element={catalog} field="editors"
-                                                      options={sites} onChange={updateCatalog} isMulti />}
+        <LanguageTabs render={
+          (langCode) => (
+            <div>
+              <Text element={catalog} field={`title_${langCode }`} onChange={updateCatalog} />
+              <Textarea
+                element={catalog} field={`help_${langCode }`}
+                rows={4} onChange={updateCatalog} />
+            </div>
+          )
+        } />
+
+        <OrderedMultiSelect
+          element={catalog} field="sections" options={sections}
+          addText={addSectionText} createText={createSectionText}
+          onChange={updateCatalog} onCreate={createSection} onEdit={editSection} />
+
+        {
+          settings.groups && (
+            <Select element={catalog} field="groups" options={groups} onChange={updateCatalog} isMulti />
+          )
+        }
+        {
+          settings.multisite && (
+            <>
+              <Select element={catalog} field="sites" options={sites} onChange={updateCatalog} isMulti />
+              <Select element={catalog} field="editors" options={sites} onChange={updateCatalog} isMulti />
+            </>
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {catalog.id && <DeleteButton onClick={openDeleteModal} disabled={catalog.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeCatalog} disabled={catalog.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeCatalog} disabled={catalog.read_only} back={true} />
         </div>
-        {catalog.id && <DeleteButton onClick={openDeleteModal} disabled={catalog.read_only} />}
       </div>
 
-      <DeleteCatalogModal catalog={catalog} info={info} show={showDeleteModal}
-                          onClose={closeDeleteModal} onDelete={deleteCatalog} />
+      <DeleteCatalogModal
+        catalog={catalog} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteCatalog} />
     </div>
   )
 }
 
 EditCatalog.propTypes = {
-  config: PropTypes.object.isRequired,
-  catalog: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  catalog: PropTypes.object.isRequired
 }
 
 export default EditCatalog
diff --git a/rdmo/management/assets/js/components/edit/EditCondition.js b/rdmo/management/assets/js/components/edit/EditCondition.js
index 6f990441fa..02df05d3e1 100644
--- a/rdmo/management/assets/js/components/edit/EditCondition.js
+++ b/rdmo/management/assets/js/components/edit/EditCondition.js
@@ -1,151 +1,185 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
 
-import Checkbox from './common/Checkbox'
-import Select from './common/Select'
-import Text from './common/Text'
-import Textarea from './common/Textarea'
-import UriPrefix from './common/UriPrefix'
+import Html from 'rdmo/core/assets/js/components/Html'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
 
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
 import ConditionInfo from '../info/ConditionInfo'
 import DeleteConditionModal from '../modals/DeleteConditionModal'
 
-import useDeleteModal from '../../hooks/useDeleteModal'
+import Checkbox from './common/Checkbox'
+import Select from './common/Select'
+import Text from './common/Text'
+import Textarea from './common/Textarea'
+import UriPrefix from './common/UriPrefix'
 
-const EditCondition = ({ config, condition, elements, elementActions }) => {
+const EditCondition = ({ condition }) => {
+  const dispatch = useDispatch()
 
-  const { sites, relations } = config
-  const { elementAction, parent, attributes, options } = elements
+  const { sites, relations, settings } = useSelector((state) => state.config)
+  const { elementAction, parent, attributes, options } = useSelector((state) => state.elements)
 
-  const updateCondition = (key, value) => elementActions.updateElement(condition, {[key]: value})
-  const storeCondition = (back) => elementActions.storeElement('conditions', condition, elementAction, back)
-  const deleteCondition = () => elementActions.deleteElement('conditions', condition)
+  const updateCondition = (key, value) => dispatch(updateElement(condition, {[key]: value}))
+  const storeCondition = (back) => dispatch(storeElement('conditions', condition, elementAction, back))
+  const deleteCondition = () => dispatch(deleteElement('conditions', condition))
 
-  const editAttribute = (attribute) => elementActions.fetchElement('attributes', attribute)
-  const createAttribute = () => elementActions.createElement('attributes', { condition })
+  const editAttribute = (attribute) => dispatch(fetchElement('attributes', attribute))
+  const createAttribute = () => dispatch(createElement('attributes', { condition }))
 
-  const editOption = (option) => elementActions.fetchElement('options', option)
+  const editOption = (option) => dispatch(fetchElement('options', option))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <ConditionInfo condition={condition} elements={elements} elementActions={elementActions} />
+  const info = <ConditionInfo condition={condition} />
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {condition.id ? gettext('Edit condition') : gettext('Create condition')}
+          </strong>
           <ReadOnlyIcon title={gettext('This condition is read only')} show={condition.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeCondition} disabled={condition.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeCondition} disabled={condition.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeCondition}
+            disabled={condition.read_only}
+            back={true}
+          />
         </div>
-        {
-          condition.id ? <>
-            <strong>{gettext('Condition')}{': '}</strong>
-            <code className="code-conditions">{condition.uri}</code>
-          </> : <strong>{gettext('Create condition')}</strong>
-        }
       </div>
 
       {
-        parent && parent.optionset && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This condition will be added to the option set <code class="code-options">%s</code>.'), [parent.optionset.uri])
-          }} />
-        </div>
+        parent && parent.optionset && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This condition will be added to the option set <code class="code-options">%s</code>.'),
+              [parent.optionset.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.page && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This condition will be added to the page <code class="code-questions">%s</code>.'), [parent.page.uri])
-          }} />
-        </div>
+        parent && parent.page && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This condition will be added to the page <code class="code-questions">%s</code>.'),
+              [parent.page.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.questionset && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This condition will be added to the question set <code class="code-questions">%s</code>.'), [parent.questionset.uri])
-          }} />
-        </div>
+        parent && parent.questionset && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This condition will be added to the question set <code class="code-questions">%s</code>.'),
+              [parent.questionset.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.question && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This condition will be added to the question <code class="code-questions">%s</code>.'), [parent.question.uri])
-          }} />
-        </div>
+        parent && parent.question && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This condition will be added to the question <code class="code-questions">%s</code>.'),
+              [parent.question.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.task && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This condition will be added to the task <code class="code-tasks">%s</code>.'), [parent.task.uri])
-          }} />
-        </div>
+        parent && parent.task && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This condition will be added to the task <code class="code-tasks">%s</code>.'),
+              [parent.task.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        condition.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        condition.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={condition} field="uri_prefix"
-                       onChange={updateCondition} />
+            <UriPrefix element={condition} field="uri_prefix" onChange={updateCondition} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={condition} field="uri_path"
-                  onChange={updateCondition} />
+            <Text element={condition} field="uri_path" onChange={updateCondition} />
           </div>
         </div>
 
-        <Textarea config={config} element={condition} field="comment"
-                  rows={4} onChange={updateCondition} />
+        <Textarea element={condition} field="comment" rows={4} onChange={updateCondition} />
 
-        <Checkbox config={config} element={condition} field="locked"
-                  onChange={updateCondition} />
+        <Checkbox element={condition} field="locked" onChange={updateCondition} />
 
-        <Select config={config} element={condition} field="source" createText={gettext('Create new attribute')}
-                options={attributes} onChange={updateCondition} onCreate={createAttribute} onEdit={editAttribute} />
+        <Select
+          element={condition} field="source" createText={gettext('Create new attribute')}
+          options={attributes} onChange={updateCondition} onCreate={createAttribute} onEdit={editAttribute} />
 
-        <Select config={config} element={condition} field="relation"
-                options={relations} onChange={updateCondition} />
+        <Select element={condition} field="relation" options={relations} onChange={updateCondition} />
 
-        <Text config={config} element={condition} field="target_text" onChange={updateCondition} />
+        <Text element={condition} field="target_text" onChange={updateCondition} />
 
-        <Select config={config} element={condition} field="target_option"
-                options={options} onChange={updateCondition} onEdit={editOption} />
+        <Select
+          element={condition}
+          field="target_option"
+          options={options}
+          onChange={updateCondition}
+          onEdit={editOption}
+        />
 
-        {get(config, 'settings.multisite') && <Select config={config} element={condition} field="editors"
-                                                      options={sites} onChange={updateCondition} isMulti />}
+        {
+          settings.multisite && (
+            <Select element={condition} field="editors" options={sites} onChange={updateCondition} isMulti />
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {condition.id && <DeleteButton onClick={openDeleteModal} disabled={condition.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeCondition} disabled={condition.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeCondition} disabled={condition.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeCondition}
+            disabled={condition.read_only}
+            back={true}
+          />
         </div>
-        {condition.id && <DeleteButton onClick={openDeleteModal} disabled={condition.read_only} />}
       </div>
 
-      <DeleteConditionModal condition={condition} info={info} show={showDeleteModal}
-                            onClose={closeDeleteModal} onDelete={deleteCondition} />
+      <DeleteConditionModal
+        condition={condition} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteCondition} />
     </div>
   )
 }
 
 EditCondition.propTypes = {
-  config: PropTypes.object.isRequired,
-  condition: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  condition: PropTypes.object.isRequired
 }
 
 export default EditCondition
diff --git a/rdmo/management/assets/js/components/edit/EditOption.js b/rdmo/management/assets/js/components/edit/EditOption.js
index 83c0d4361f..4e510df6a4 100644
--- a/rdmo/management/assets/js/components/edit/EditOption.js
+++ b/rdmo/management/assets/js/components/edit/EditOption.js
@@ -1,148 +1,139 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { deleteElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import OptionInfo from '../info/OptionInfo'
+import DeleteOptionModal from '../modals/DeleteOptionModal'
 
 import Checkbox from './common/Checkbox'
+import LanguageTabs from './common/LanguageTabs'
 import Radio from './common/Radio'
 import Select from './common/Select'
 import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
-
-import OptionInfo from '../info/OptionInfo'
-import DeleteOptionModal from '../modals/DeleteOptionModal'
-
-import useDeleteModal from '../../hooks/useDeleteModal'
-
-const EditOption = ({ config, option, elements, elementActions }) => {
+const EditOption = ({ option }) => {
+  const dispatch = useDispatch()
 
-  const { additionalInputs, sites } = config
-  const { elementAction, parent } = elements
+  const { additionalInputs, sites, settings } = useSelector((state) => state.config)
+  const { elementAction, parent } = useSelector((state) => state.elements)
 
-  const updateOption = (key, value) => elementActions.updateElement(option, {[key]: value})
-  const storeOption = (back) => elementActions.storeElement('options', option, elementAction, back)
-  const deleteOption = () => elementActions.deleteElement('options', option)
+  const updateOption = (key, value) => dispatch(updateElement(option, {[key]: value}))
+  const storeOption = (back) => dispatch(storeElement('options', option, elementAction, back))
+  const deleteOption = () => dispatch(deleteElement('options', option))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <OptionInfo option={option} elements={elements} elementActions={elementActions} />
+  const info = <OptionInfo option={option} />
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {option.id ? gettext('Edit option') : gettext('Create option')}
+          </strong>
           <ReadOnlyIcon title={gettext('This option is read only')} show={option.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeOption} disabled={option.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeOption} disabled={option.read_only} back={true}/>
         </div>
-        {
-          option.id ? <>
-            <strong>{gettext('Option')}{': '}</strong>
-            <code className="code-options">{option.uri}</code>
-          </> : <strong>{gettext('Create option')}</strong>
-        }
       </div>
 
       {
-        parent && parent.optionset && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This option will be added to the option set <code class="code-options">%s</code>.'), [parent.optionset.uri])
-          }} />
-        </div>
+        parent && parent.optionset && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This option will be added to the option set <code class="code-options">%s</code>.'),
+              [parent.optionset.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        option.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        option.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={option} field="uri_prefix"
-                       onChange={updateOption} />
+            <UriPrefix element={option} field="uri_prefix" onChange={updateOption} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={option} field="uri_path"
-                  onChange={updateOption} />
+            <Text element={option} field="uri_path" onChange={updateOption} />
           </div>
         </div>
 
-        <Textarea config={config} element={option} field="comment"
-                  rows={4} onChange={updateOption} />
+        <Textarea element={option} field="comment" rows={4} onChange={updateOption} />
 
         <div className="row">
           <div className="col-sm-6">
-            <Checkbox config={config} element={option} field="locked"
-                      onChange={updateOption} />
+            <Checkbox element={option} field="locked" onChange={updateOption} />
           </div>
         </div>
 
-        <Tabs id="#option-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab key={index} eventKey={index} title={lang}>
-                <div className="row">
-                  <div className="col-sm-12">
-                    <Text config={config} element={option} field={`text_${lang_code }`}
-                          onChange={updateOption} />
-                    <Textarea config={config} element={option} field={`help_${lang_code }`}
-                              onChange={updateOption} />
-                    <Textarea config={config} element={option} field={`view_text_${lang_code }`}
-                              onChange={updateOption} />
-                  </div>
-                </div>
-              </Tab>
-            ))
-          }
-        </Tabs>
-
-        <Radio config={config} element={option} field="additional_input"
-               options={additionalInputs} onChange={updateOption} />
+        <LanguageTabs render={
+          (langCode) => (
+            <>
+              <Text element={option} field={`text_${langCode}`} onChange={updateOption} />
+              <Textarea element={option} field={`help_${langCode }`} onChange={updateOption} />
+              <Textarea element={option} field={`view_text_${langCode}`} onChange={updateOption} />
+            </>
+          )
+        } />
+
+        <Radio element={option} field="additional_input" options={additionalInputs} onChange={updateOption} />
         {
           (option.additional_input === 'text' || option.additional_input === 'textarea') &&
-          config.settings &&
-          <Tabs id="#option-tabs2" defaultActiveKey={0} animation={false}>
-            {config.settings.languages.map(([lang_code, lang], index) => (
-            <Tab key={index} eventKey={index} title={lang}>
-              <Textarea key={index} config={config} element={option} field={`default_text_${lang_code}`}
-                      rows={1} onChange={updateOption} />
-            </Tab>
-
-          ))}
-          </Tabs>
+          settings && (
+            <LanguageTabs render={
+              (langCode) => (
+                <Textarea element={option} field={`default_text_${langCode}`} rows={1} onChange={updateOption} />
+              )
+            } />
+          )
+        }
+
+        {
+          settings.multisite && (
+            <Select element={option} field="editors" options={sites} onChange={updateOption} isMulti />
+          )
         }
 
-        {get(config, 'settings.multisite') && <Select config={config} element={option} field="editors"
-                                                      options={sites} onChange={updateOption} isMulti />}
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {option.id && <DeleteButton onClick={openDeleteModal} disabled={option.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeOption} disabled={option.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeOption} disabled={option.read_only} back={true}/>
         </div>
-        {option.id && <DeleteButton onClick={openDeleteModal} disabled={option.read_only} />}
       </div>
 
-      <DeleteOptionModal option={option} info={info} show={showDeleteModal}
-                         onClose={closeDeleteModal} onDelete={deleteOption} />
+      <DeleteOptionModal
+        option={option} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteOption} />
     </div>
   )
 }
 
 EditOption.propTypes = {
-  config: PropTypes.object.isRequired,
-  option: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  option: PropTypes.object.isRequired
 }
 
 export default EditOption
diff --git a/rdmo/management/assets/js/components/edit/EditOptionSet.js b/rdmo/management/assets/js/components/edit/EditOptionSet.js
index f8d3e09265..77828ff168 100644
--- a/rdmo/management/assets/js/components/edit/EditOptionSet.js
+++ b/rdmo/management/assets/js/components/edit/EditOptionSet.js
@@ -1,135 +1,150 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import OptionSetInfo from '../info/OptionSetInfo'
+import DeleteOptionSetModal from '../modals/DeleteOptionSetModal'
 
 import Checkbox from './common/Checkbox'
+import MultiSelect from './common/MultiSelect'
 import Number from './common/Number'
 import OrderedMultiSelect from './common/OrderedMultiSelect'
-import MultiSelect from './common/MultiSelect'
 import Select from './common/Select'
 import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
+const EditOptionSet = ({ optionset }) => {
+  const dispatch = useDispatch()
 
-import OptionSetInfo from '../info/OptionSetInfo'
-import DeleteOptionSetModal from '../modals/DeleteOptionSetModal'
+  const { sites, providers, settings } = useSelector((state) => state.config)
+  const { elementAction, parent, conditions, options } = useSelector((state) => state.elements)
 
-import useDeleteModal from '../../hooks/useDeleteModal'
+  const updateOptionSet = (key, value) => dispatch(updateElement(optionset, {[key]: value}))
+  const storeOptionSet = (back) => dispatch(storeElement('optionsets', optionset, elementAction, back))
+  const deleteOptionSet = () => dispatch(deleteElement('optionsets', optionset))
 
-const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
+  const editOption = (value) => dispatch(fetchElement('options', value.option))
+  const createOption = () => dispatch(createElement('options', { optionset }))
 
-  const { sites, providers } = config
-  const { elementAction, parent, conditions, options } = elements
-
-  const updateOptionSet = (key, value) => elementActions.updateElement(optionset, {[key]: value})
-  const storeOptionSet = (back) => elementActions.storeElement('optionsets', optionset, elementAction, back)
-  const deleteOptionSet = () => elementActions.deleteElement('optionsets', optionset)
-
-  const editOption = (value) => elementActions.fetchElement('options', value.option)
-  const createOption = () => elementActions.createElement('options', { optionset })
-
-  const editCondition = (condition) => elementActions.fetchElement('conditions', condition)
-  const createCondition = () => elementActions.createElement('conditions', { optionset })
+  const editCondition = (condition) => dispatch(fetchElement('conditions', condition))
+  const createCondition = () => dispatch(createElement('conditions', { optionset }))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <OptionSetInfo optionset={optionset} elements={elements} elementActions={elementActions} />
+  const info = <OptionSetInfo optionset={optionset} />
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {optionset.id ? gettext('Edit optionset') : gettext('Create optionset')}
+          </strong>
           <ReadOnlyIcon title={gettext('This option set is read only')} show={optionset.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeOptionSet} disabled={optionset.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeOptionSet} disabled={optionset.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeOptionSet}
+            disabled={optionset.read_only}
+            back={true}
+          />
         </div>
-        {
-          optionset.id ? <>
-            <strong>{gettext('Option set')}{': '}</strong>
-            <code className="code-options">{optionset.uri}</code>
-          </> : <strong>{gettext('Create option set')}</strong>
-        }
       </div>
 
       {
-        parent && parent.question && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This option set will be added to the question <code class="code-questions">%s</code>.'), [parent.question.uri])
-          }} />
-        </div>
+        parent && parent.question && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This option set will be added to the question <code class="code-questions">%s</code>.'),
+              [parent.question.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        optionset.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        optionset.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={optionset} field="uri_prefix"
-                       onChange={updateOptionSet} />
+            <UriPrefix element={optionset} field="uri_prefix" onChange={updateOptionSet} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={optionset} field="uri_path"
-                  onChange={updateOptionSet} />
+            <Text element={optionset} field="uri_path" onChange={updateOptionSet} />
           </div>
         </div>
 
-        <Textarea config={config} element={optionset} field="comment"
-                  rows={4} onChange={updateOptionSet} />
+        <Textarea element={optionset} field="comment" rows={4} onChange={updateOptionSet} />
 
         <div className="row">
           <div className="col-sm-6">
-            <Checkbox config={config} element={optionset} field="locked"
-                      onChange={updateOptionSet} />
+            <Checkbox element={optionset} field="locked" onChange={updateOptionSet} />
           </div>
           <div className="col-sm-6">
-            <Number config={config} element={optionset} field="order"
-                    onChange={updateOptionSet} />
+            <Number element={optionset} field="order" onChange={updateOptionSet} />
           </div>
         </div>
 
-        <OrderedMultiSelect config={config} element={optionset} field="options" options={options}
-                            addText={gettext('Add existing option')} createText={gettext('Create new option')}
-                            onChange={updateOptionSet} onCreate={createOption} onEdit={editOption} />
+        <OrderedMultiSelect
+          element={optionset} field="options" options={options}
+          addText={gettext('Add existing option')} createText={gettext('Create new option')}
+          onChange={updateOptionSet} onCreate={createOption} onEdit={editOption} />
 
-        <MultiSelect config={config} element={optionset} field="conditions" options={conditions}
-                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
-                     onChange={updateOptionSet} onCreate={createCondition} onEdit={editCondition} />
+        <MultiSelect
+          element={optionset} field="conditions" options={conditions}
+          addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
+          onChange={updateOptionSet} onCreate={createCondition} onEdit={editCondition} />
 
-        <Select config={config} element={optionset} field="provider_key"
-                options={providers} onChange={updateOptionSet} />
+        <Select element={optionset} field="provider_key" options={providers} onChange={updateOptionSet} />
 
-        {get(config, 'settings.multisite') && <Select config={config} element={optionset} field="editors"
-                                                      options={sites} onChange={updateOptionSet} isMulti />}
+        {
+          settings.multisite && (
+            <Select
+              element={optionset} field="editors"
+              options={sites} onChange={updateOptionSet} isMulti />
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {optionset.id && <DeleteButton onClick={openDeleteModal} disabled={optionset.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeOptionSet} disabled={optionset.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeOptionSet} disabled={optionset.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeOptionSet}
+            disabled={optionset.read_only}
+            back={true}
+          />
         </div>
-        {optionset.id && <DeleteButton onClick={openDeleteModal} disabled={optionset.read_only} />}
       </div>
 
-      <DeleteOptionSetModal optionset={optionset} info={info} show={showDeleteModal}
-                            onClose={closeDeleteModal} onDelete={deleteOptionSet} />
+      <DeleteOptionSetModal
+        optionset={optionset} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteOptionSet} />
     </div>
   )
 }
 
 EditOptionSet.propTypes = {
-  config: PropTypes.object.isRequired,
-  optionset: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  optionset: PropTypes.object.isRequired
 }
 
 export default EditOptionSet
diff --git a/rdmo/management/assets/js/components/edit/EditPage.js b/rdmo/management/assets/js/components/edit/EditPage.js
index 6c25ab0d7f..a26dd1c940 100644
--- a/rdmo/management/assets/js/components/edit/EditPage.js
+++ b/rdmo/management/assets/js/components/edit/EditPage.js
@@ -1,11 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
-import isUndefined from 'lodash/isUndefined'
-import orderBy from 'lodash/orderBy'
+import { useDispatch, useSelector } from 'react-redux'
+import { isUndefined, orderBy } from 'lodash'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import PageInfo from '../info/PageInfo'
+import DeletePageModal from '../modals/DeletePageModal'
 
 import Checkbox from './common/Checkbox'
+import LanguageTabs from './common/LanguageTabs'
 import MultiSelect from './common/MultiSelect'
 import OrderedMultiSelect from './common/OrderedMultiSelect'
 import Select from './common/Select'
@@ -13,60 +22,55 @@ import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
-
-import PageInfo from '../info/PageInfo'
-import DeletePageModal from '../modals/DeletePageModal'
-
-import useDeleteModal from '../../hooks/useDeleteModal'
-
-const EditPage = ({ config, page, elements, elementActions }) => {
+const EditPage = ({ page }) => {
+  const dispatch = useDispatch()
 
-  const { sites } = config
-  const { elementAction, parent, attributes, conditions } = elements
+  const { sites, settings } = useSelector((state) => state.config)
+  const {
+    elementAction, parent, attributes, conditions, questions, questionsets
+  } = useSelector((state) => state.elements)
 
   const elementValues = orderBy(page.questions.concat(page.questionsets), ['order', 'uri'])
-  const elementOptions = elements.questions.map(question => ({
+  const elementOptions = questions.map(question => ({
     value: 'question-' + question.id,
     label: interpolate(gettext('Question: %s'), [question.uri])
-  })).concat(elements.questionsets.map(questionset => ({
+  })).concat(questionsets.map(questionset => ({
     value: 'questionset-' + questionset.id,
     label: interpolate(gettext('Question set: %s'), [questionset.uri])
   })))
 
   const updatePage = (key, value) => {
     if (key == 'elements') {
-      elementActions.updateElement(page, {
+      dispatch(updateElement(page, {
         questions: value.filter(e => !isUndefined(e.question)),
         questionsets: value.filter(e => !isUndefined(e.questionset))
-      })
+      }))
     } else {
-      elementActions.updateElement(page, { [key]: value })
+      dispatch(updateElement(page, { [key]: value }))
     }
   }
-  const storePage = (back) => elementActions.storeElement('pages', page, elementAction, back)
-  const deletePage = () => elementActions.deleteElement('pages', page)
+  const storePage = (back) => dispatch(storeElement('pages', page, elementAction, back))
+  const deletePage = () => dispatch(deleteElement('pages', page))
 
   const editElement = (value) => {
     if (value.questionset) {
-      elementActions.fetchElement('questionsets', value.questionset)
+      dispatch(fetchElement('questionsets', value.questionset))
     } else if (value.question) {
-      elementActions.fetchElement('questions', value.question)
+      dispatch(fetchElement('questions', value.question))
     }
   }
-  const createQuestionSet = () => elementActions.createElement('questionsets', { page })
-  const createQuestion = () => elementActions.createElement('questions', { page })
+  const createQuestionSet = () => dispatch(createElement('questionsets', { page }))
+  const createQuestion = () => dispatch(createElement('questions', { page }))
 
-  const editCondition = (condition) => elementActions.fetchElement('conditions', condition)
-  const createCondition = () => elementActions.createElement('conditions', { page })
+  const editCondition = (condition) => dispatch(fetchElement('conditions', condition))
+  const createCondition = () => dispatch(createElement('conditions', { page }))
 
-  const editAttribute = (attribute) => elementActions.fetchElement('attributes', attribute)
-  const createAttribute = () => elementActions.createElement('attributes', { page })
+  const editAttribute = (attribute) => dispatch(fetchElement('attributes', attribute))
+  const createAttribute = () => dispatch(createElement('attributes', { page }))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <PageInfo page={page} elements={elements} elementActions={elementActions} />
+  const info = <PageInfo page={page} />
 
   // for reasons unknown, the strings are not picked up by makemessages from the props
   const addElementText = gettext('Add existing element')
@@ -74,119 +78,113 @@ const EditPage = ({ config, page, elements, elementActions }) => {
   const createQuestionSetText = gettext('Create new question set')
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {page.id ? gettext('Edit page') : gettext('Create page')}
+          </strong>
           <ReadOnlyIcon title={gettext('This page is read only')} show={page.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storePage} disabled={page.read_only} />
           <SaveButton elementAction={elementAction} onClick={storePage} disabled={page.read_only} back={true}/>
         </div>
-        {
-          page.id ? <>
-            <strong>{gettext('Page')}{': '}</strong>
-            <code className="code-questions">{page.uri}</code>
-          </> : <strong>{gettext('Create page')}</strong>
-        }
       </div>
 
       {
-        parent && parent.section && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This page will be added to the section <code class="code-questions">%s</code>.'), [parent.section.uri])
-          }} />
-        </div>
+        parent && parent.section && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This page will be added to the section <code class="code-questions">%s</code>.'),
+              [parent.section.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        page.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        page.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={page} field="uri_prefix"
-                  onChange={updatePage} />
+            <UriPrefix element={page} field="uri_prefix" onChange={updatePage} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={page} field="uri_path"
-                  onChange={updatePage} />
+            <Text element={page} field="uri_path" onChange={updatePage} />
           </div>
         </div>
 
-        <Textarea config={config} element={page} field="comment"
-                  rows={4} onChange={updatePage} />
+        <Textarea element={page} field="comment" rows={4} onChange={updatePage} />
 
         <div className="row">
           <div className="col-sm-6">
-            <Checkbox config={config} element={page} field="locked"
-                      onChange={updatePage} />
+            <Checkbox element={page} field="locked" onChange={updatePage} />
           </div>
           <div className="col-sm-6">
-            <Checkbox config={config} element={page} field="is_collection"
-                      onChange={updatePage} />
+            <Checkbox element={page} field="is_collection" onChange={updatePage} />
           </div>
         </div>
 
-        <Tabs id="#page-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab key={index} eventKey={index} title={lang}>
-                <Text config={config} element={page} field={`title_${lang_code }`}
-                      onChange={updatePage} />
-                <Text config={config} element={page} field={`short_title_${lang_code }`}
-                      onChange={updatePage} />
-                <Textarea config={config} element={page} field={`help_${lang_code }`}
-                          rows={4} onChange={updatePage} />
-                <Text config={config} element={page} field={`verbose_name_${lang_code }`}
-                      onChange={updatePage} />
-              </Tab>
-            ))
-          }
-        </Tabs>
-
-
-
-        <Select config={config} element={page} field="attribute" createText={gettext('Create new attribute')}
-                options={attributes} onChange={updatePage} onCreate={createAttribute} onEdit={editAttribute} />
-
-        <OrderedMultiSelect config={config} element={page} field="elements"
-                            values={elementValues} options={elementOptions}
-                            addText={addElementText} createText={createQuestionText}
-                            altCreateText={createQuestionSetText}
-                            onChange={updatePage} onCreate={createQuestion} onAltCreate={createQuestionSet}
-                            onEdit={editElement} />
-
-        <MultiSelect config={config} element={page} field="conditions" options={conditions}
-                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
-                     onChange={updatePage} onCreate={createCondition} onEdit={editCondition} />
-
-        {get(config, 'settings.multisite') && <Select config={config} element={page} field="editors"
-                                                      options={sites} onChange={updatePage} isMulti />}
+        <LanguageTabs render={
+          (langCode) => (
+            <>
+              <Text element={page} field={`title_${langCode}`} onChange={updatePage} />
+              <Text element={page} field={`short_title_${langCode}`} onChange={updatePage} />
+              <Textarea element={page} field={`help_${langCode}`} rows={4} onChange={updatePage} />
+              <Text element={page} field={`verbose_name_${langCode}`} onChange={updatePage} />
+            </>
+          )
+        } />
+
+        <Select
+          element={page} field="attribute" createText={gettext('Create new attribute')}
+          options={attributes} onChange={updatePage} onCreate={createAttribute} onEdit={editAttribute} />
+
+        <OrderedMultiSelect
+          element={page} field="elements"
+          values={elementValues} options={elementOptions}
+          addText={addElementText} createText={createQuestionText}
+          altCreateText={createQuestionSetText}
+          onChange={updatePage} onCreate={createQuestion} onAltCreate={createQuestionSet}
+          onEdit={editElement} />
+
+        <MultiSelect
+          element={page} field="conditions" options={conditions}
+          addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
+          onChange={updatePage} onCreate={createCondition} onEdit={editCondition} />
+
+        {
+          settings.multisite && (
+            <Select element={page} field="editors" options={sites} onChange={updatePage} isMulti />
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {page.id && <DeleteButton onClick={openDeleteModal} disabled={page.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storePage} disabled={page.read_only} />
           <SaveButton elementAction={elementAction} onClick={storePage} disabled={page.read_only} back={true}/>
         </div>
-        {page.id && <DeleteButton onClick={openDeleteModal} disabled={page.read_only} />}
       </div>
 
-      <DeletePageModal page={page} info={info} show={showDeleteModal}
-                       onClose={closeDeleteModal} onDelete={deletePage} />
+      <DeletePageModal
+        page={page} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deletePage} />
     </div>
   )
 }
 
 EditPage.propTypes = {
-  config: PropTypes.object.isRequired,
-  page: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  page: PropTypes.object.isRequired
 }
 
 export default EditPage
diff --git a/rdmo/management/assets/js/components/edit/EditQuestion.js b/rdmo/management/assets/js/components/edit/EditQuestion.js
index 5fdf2502a0..9667446c5a 100644
--- a/rdmo/management/assets/js/components/edit/EditQuestion.js
+++ b/rdmo/management/assets/js/components/edit/EditQuestion.js
@@ -1,229 +1,239 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import QuestionInfo from '../info/QuestionInfo'
+import DeleteQuestionModal from '../modals/DeleteQuestionModal'
 
 import Checkbox from './common/Checkbox'
+import LanguageTabs from './common/LanguageTabs'
 import MultiSelect from './common/MultiSelect'
 import Select from './common/Select'
+import Tabs from './common/Tabs'
 import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
-
-import QuestionInfo from '../info/QuestionInfo'
-import DeleteQuestionModal from '../modals/DeleteQuestionModal'
+const EditQuestion = ({ question }) => {
+  const dispatch = useDispatch()
 
-import useDeleteModal from '../../hooks/useDeleteModal'
+  const { sites, widgetTypes, valueTypes, settings } = useSelector((state) => state.config)
+  const { elementAction, parent, attributes, optionsets, options, conditions } = useSelector((state) => state.elements)
 
-const EditQuestion = ({ config, question, elements, elementActions}) => {
+  const updateQuestion = (key, value) => dispatch(updateElement(question, { [key]: value }))
+  const storeQuestion = (back) => dispatch(storeElement('questions', question, elementAction, back))
+  const deleteQuestion = () => dispatch(deleteElement('questions', question))
 
-  const { sites, widgetTypes, valueTypes } = config
-  const { elementAction, parent, attributes, optionsets, options, conditions } = elements
+  const editOptionSet = (optionset) => dispatch(fetchElement('optionsets', optionset))
+  const createOptionSet = () => dispatch(createElement('optionsets', { question }))
 
-  const updateQuestion = (key, value) => elementActions.updateElement(question, {[key]: value})
-  const storeQuestion = (back) => elementActions.storeElement('questions', question, elementAction, back)
-  const deleteQuestion = () => elementActions.deleteElement('questions', question)
+  const editCondition = (condition) => dispatch(fetchElement('conditions', condition))
+  const createCondition = () => dispatch(createElement('conditions', { question }))
 
-  const editOptionSet = (optionset) => elementActions.fetchElement('optionsets', optionset)
-  const createOptionSet = () => elementActions.createElement('optionsets', { question })
-
-  const editCondition = (condition) => elementActions.fetchElement('conditions', condition)
-  const createCondition = () => elementActions.createElement('conditions', { question })
-
-  const editAttribute = (attribute) => elementActions.fetchElement('attributes', attribute)
-  const createAttribute = () => elementActions.createElement('attributes', { question })
+  const editAttribute = (attribute) => dispatch(fetchElement('attributes', attribute))
+  const createAttribute = () => dispatch(createElement('attributes', { question }))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <QuestionInfo question={question} elements={elements} elementActions={elementActions} />
+  const info = <QuestionInfo question={question} />
 
   // for reasons unknown, the strings are not picked up by makemessages from the props
   const addOptionText = gettext('Add existing optionset')
   const createOptionText = gettext('Create new optionset')
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {question.id ? gettext('Edit question') : gettext('Create question')}
+          </strong>
           <ReadOnlyIcon title={gettext('This question is read only')} show={question.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeQuestion} disabled={question.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeQuestion} disabled={question.read_only} back={true}/>
+          <SaveButton elementAction={elementAction} onClick={storeQuestion} disabled={question.read_only} back={true} />
         </div>
-        {
-          question.id ? <>
-            <strong>{gettext('Question')}{': '}</strong>
-            <code className="code-questions">{question.uri}</code>
-          </> : <strong>{gettext('Create question')}</strong>
-        }
       </div>
 
       {
-        parent && parent.page && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This question will be added to the page <code class="code-questions">%s</code>.'), [parent.page.uri])
-          }} />
-        </div>
+        parent && parent.page && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This question will be added to the page <code class="code-questions">%s</code>.'),
+              [parent.page.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.questionset && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This question will be added to the question set <code class="code-questions">%s</code>.'), [parent.questionset.uri])
-          }} />
-        </div>
+        parent && parent.questionset && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This question will be added to the question set <code class="code-questions">%s</code>.'),
+              [parent.questionset.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        question.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        question.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={question} field="uri_prefix"
-                  onChange={updateQuestion} />
+            <UriPrefix element={question} field="uri_prefix" onChange={updateQuestion} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={question} field="uri_path"
-                  onChange={updateQuestion} />
+            <Text element={question} field="uri_path" onChange={updateQuestion} />
           </div>
         </div>
 
-        <Textarea config={config} element={question} field="comment"
-                  rows={4} onChange={updateQuestion} />
+        <Textarea element={question} field="comment" rows={4} onChange={updateQuestion} />
 
         <div className="row">
           <div className="col-sm-4">
-            <Checkbox config={config} element={question} field="locked"
-                      onChange={updateQuestion} />
+            <Checkbox element={question} field="locked" onChange={updateQuestion} />
           </div>
           <div className="col-sm-4">
-            <Checkbox config={config} element={question} field="is_collection"
-                      onChange={updateQuestion} />
+            <Checkbox element={question} field="is_collection" onChange={updateQuestion} />
           </div>
           <div className="col-sm-4">
-            <Checkbox config={config} element={question} field="is_optional"
-                      onChange={updateQuestion} />
+            <Checkbox element={question} field="is_optional" onChange={updateQuestion} />
           </div>
         </div>
 
-        <Tabs id="#question-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab key={index} eventKey={index} title={lang}>
-                <Text config={config} element={question} field={`text_${lang_code }`}
-                      onChange={updateQuestion} />
-                <Textarea config={config} element={question} field={`help_${lang_code }`}
-                          rows={8} onChange={updateQuestion} />
-                <Text config={config} element={question} field={`verbose_name_${lang_code }`}
-                      onChange={updateQuestion} />
-              </Tab>
-            ))
-          }
-        </Tabs>
+        <LanguageTabs render={
+          (langCode) => (
+            <>
+              <Text element={question} field={`text_${langCode}`} onChange={updateQuestion} />
+              <Textarea element={question} field={`help_${langCode}`} rows={8} onChange={updateQuestion} />
+              <Text element={question} field={`verbose_name_${langCode}`} onChange={updateQuestion} />
+            </>
+          )
+        } />
 
-        <Select config={config} element={question} field="attribute" createText={gettext('Create new attribute')}
-                options={attributes} onChange={updateQuestion} onCreate={createAttribute} onEdit={editAttribute} />
+        <Select
+          element={question} field="attribute" createText={gettext('Create new attribute')}
+          options={attributes} onChange={updateQuestion} onCreate={createAttribute} onEdit={editAttribute} />
 
         <div className="row">
           <div className="col-sm-3">
-            <Select config={config} element={question} field="widget_type"
-                    options={widgetTypes} onChange={updateQuestion} />
+            <Select element={question} field="widget_type" options={widgetTypes} onChange={updateQuestion} />
           </div>
           <div className="col-sm-3">
-            <Select config={config} element={question} field="value_type"
-                    options={valueTypes} onChange={updateQuestion} />
+            <Select element={question} field="value_type" options={valueTypes} onChange={updateQuestion} />
           </div>
           <div className="col-sm-3">
-            <Text config={config} element={question} field="unit"
-                  onChange={updateQuestion} />
+            <Text element={question} field="unit" onChange={updateQuestion} />
           </div>
           <div className="col-sm-3">
-            <Text config={config} element={question} field="width"
-                  onChange={updateQuestion} />
+            <Text element={question} field="width" onChange={updateQuestion} />
           </div>
         </div>
 
-        <Tabs id="#question-tabs2" defaultActiveKey={0} animation={false}>
-          <Tab key={0} eventKey={0} title={gettext('Conditions')}>
-            <MultiSelect config={config} element={question} field="conditions" options={conditions}
-                         addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
-                         onChange={updateQuestion} onCreate={createCondition} onEdit={editCondition} />
-          </Tab>
-          <Tab key={1} eventKey={1} title={gettext('Option sets')}>
-            <MultiSelect config={config} element={question} field="optionsets" options={optionsets}
-                         addText={addOptionText} createText={createOptionText}
-                         onChange={updateQuestion} onCreate={createOptionSet} onEdit={editOptionSet} />
-          </Tab>
-          <Tab key={2} eventKey={2} title={gettext('Range')}>
-            <div className="row">
-              <div className="col-sm-4">
-                <Text config={config} element={question} field="minimum"
-                      onChange={updateQuestion} />
-              </div>
-              <div className="col-sm-4">
-                <Text config={config} element={question} field="maximum"
-                      onChange={updateQuestion} />
-              </div>
-              <div className="col-sm-4">
-                <Text config={config} element={question} field="step"
-                      onChange={updateQuestion} />
-              </div>
-            </div>
-          </Tab>
-          <Tab key={3} eventKey={3} title={gettext('Default')}>
-            {
-              config.settings && config.settings.languages.map((language, index) => (
-                <Textarea key={index} config={config} element={question} field={`default_text_${language[0]}`}
-                          rows={1} onChange={updateQuestion} />
-              ))
-            }
-            <div className="row">
-              <div className="col-sm-6">
-                <Select config={config} element={question} field="default_option"
-                        options={options} onChange={updateQuestion} />
-              </div>
-              <div className="col-sm-6">
-                <Text config={config} element={question} field="default_external_id"
-                      onChange={updateQuestion} />
-              </div>
-            </div>
-          </Tab>
-          {
-            get(config, 'settings.multisite') &&
-            <Tab key={4} eventKey={4} title={gettext('Editors')}>
-              <Select config={config} element={question} field="editors"
-                      options={sites} onChange={updateQuestion} isMulti />
-            </Tab>
+        <Tabs
+          labels={
+            [
+              gettext('Conditions'),
+              gettext('Option sets'),
+              gettext('Range'),
+              gettext('Default'),
+              ...(settings.multisite ? [gettext('Editors')] : [])
+            ]
           }
-        </Tabs>
+          tabs={
+            [
+              (
+                <MultiSelect
+                  key="conditions" element={question} field="conditions" options={conditions}
+                  addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
+                  onChange={updateQuestion} onCreate={createCondition} onEdit={editCondition} />
+              ),
+              (
+                <MultiSelect
+                  key="optionsets" element={question} field="optionsets" options={optionsets}
+                  addText={addOptionText} createText={createOptionText}
+                  onChange={updateQuestion} onCreate={createOptionSet} onEdit={editOptionSet} />
+              ),
+              (
+                <div key="range" className="row">
+                  <div className="col-sm-4">
+                    <Text element={question} field="minimum" onChange={updateQuestion} />
+                  </div>
+                  <div className="col-sm-4">
+                    <Text element={question} field="maximum" onChange={updateQuestion} />
+                  </div>
+                  <div className="col-sm-4">
+                    <Text element={question} field="step" onChange={updateQuestion} />
+                  </div>
+                </div>
+              ),
+              (
+                <div key="default">
+                  {
+                    settings.languages.map((language, index) => (
+                      <Textarea
+                        key={index} element={question} field={`default_text_${language[0]}`}
+                        rows={1} onChange={updateQuestion} />
+                    ))
+                  }
+                  <div className="row">
+                    <div className="col-sm-6">
+                      <Select element={question} field="default_option" options={options} onChange={updateQuestion} />
+                    </div>
+                    <div className="col-sm-6">
+                      <Text element={question} field="default_external_id" onChange={updateQuestion} />
+                    </div>
+                  </div>
+                </div>
+              ),
+              (
+                <Select
+                  key="editors"
+                  element={question}
+                  field="editors"
+                  options={sites}
+                  onChange={updateQuestion} isMulti
+                />
+              )
+            ]
+          }
+        />
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {question.id && <DeleteButton onClick={openDeleteModal} disabled={question.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeQuestion} disabled={question.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeQuestion} disabled={question.read_only} back={true}/>
+          <SaveButton elementAction={elementAction} onClick={storeQuestion} disabled={question.read_only} back={true} />
         </div>
-        {question.id && <DeleteButton onClick={openDeleteModal} disabled={question.read_only} />}
       </div>
 
-      <DeleteQuestionModal question={question} info={info} show={showDeleteModal}
-                           onClose={closeDeleteModal} onDelete={deleteQuestion} />
+      <DeleteQuestionModal
+        question={question} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteQuestion} />
     </div>
   )
 }
 
 EditQuestion.propTypes = {
-  config: PropTypes.object.isRequired,
-  question: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  question: PropTypes.object.isRequired
 }
 
 export default EditQuestion
diff --git a/rdmo/management/assets/js/components/edit/EditQuestionSet.js b/rdmo/management/assets/js/components/edit/EditQuestionSet.js
index 8736156615..9d29a157d2 100644
--- a/rdmo/management/assets/js/components/edit/EditQuestionSet.js
+++ b/rdmo/management/assets/js/components/edit/EditQuestionSet.js
@@ -1,72 +1,76 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
-import isUndefined from 'lodash/isUndefined'
-import orderBy from 'lodash/orderBy'
+import { useDispatch, useSelector } from 'react-redux'
+import { isUndefined, orderBy } from 'lodash'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import QuestionSetInfo from '../info/QuestionSetInfo'
+import DeleteQuestionSetModal from '../modals/DeleteQuestionSetModal'
 
 import Checkbox from './common/Checkbox'
-import OrderedMultiSelect from './common/OrderedMultiSelect'
+import LanguageTabs from './common/LanguageTabs'
 import MultiSelect from './common/MultiSelect'
+import OrderedMultiSelect from './common/OrderedMultiSelect'
 import Select from './common/Select'
 import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
-
-import QuestionSetInfo from '../info/QuestionSetInfo'
-import DeleteQuestionSetModal from '../modals/DeleteQuestionSetModal'
-
-import useDeleteModal from '../../hooks/useDeleteModal'
-
-const EditQuestionSet = ({ config, questionset, elements, elementActions }) => {
+const EditQuestionSet = ({ questionset }) => {
+  const dispatch = useDispatch()
 
-  const { sites } = config
-  const { elementAction, parent, attributes, conditions } = elements
+  const { sites, settings } = useSelector((state) => state.config)
+  const {
+    elementAction, parent, attributes, conditions, questions, questionsets
+  } = useSelector((state) => state.elements)
 
   const elementValues = orderBy(questionset.questions.concat(questionset.questionsets), ['order', 'uri'])
-  const elementOptions = elements.questions.map(question => ({
+  const elementOptions = questions.map(question => ({
     value: 'question-' + question.id,
     label: interpolate(gettext('Question: %s'), [question.uri])
-  })).concat(elements.questionsets.map(questionset => ({
+  })).concat(questionsets.map(questionset => ({
     value: 'questionset-' + questionset.id,
     label: interpolate(gettext('Question set: %s'), [questionset.uri])
   })))
 
   const updateQuestionSet = (key, value) => {
     if (key == 'elements') {
-      elementActions.updateElement(questionset, {
+      dispatch(updateElement(questionset, {
         questions: value.filter(e => !isUndefined(e.question)),
         questionsets: value.filter(e => !isUndefined(e.questionset))
-      })
+      }))
     } else {
-      elementActions.updateElement(questionset, { [key]: value })
+      dispatch(updateElement(questionset, { [key]: value }))
     }
   }
-  const storeQuestionSet = (back) => elementActions.storeElement('questionsets', questionset, elementAction, back)
-  const deleteQuestionSet = () => elementActions.deleteElement('questionsets', questionset)
+  const storeQuestionSet = (back) => dispatch(storeElement('questionsets', questionset, elementAction, back))
+  const deleteQuestionSet = () => dispatch(deleteElement('questionsets', questionset))
 
   const editElement = (value) => {
     if (value.questionset) {
-      elementActions.fetchElement('questionsets', value.questionset)
+      dispatch(fetchElement('questionsets', value.questionset))
     } else if (value.question) {
-      elementActions.fetchElement('questions', value.question)
+      dispatch(fetchElement('questions', value.question))
     }
   }
-  const createQuestionSet = () => elementActions.createElement('questionsets', { questionset })
-  const createQuestion = () => elementActions.createElement('questions', { questionset })
+  const createQuestionSet = () => dispatch(createElement('questionsets', { questionset }))
+  const createQuestion = () => dispatch(createElement('questions', { questionset }))
 
-  const editCondition = (condition) => elementActions.fetchElement('conditions', condition)
-  const createCondition = () => elementActions.createElement('conditions', { questionset })
+  const editCondition = (condition) => dispatch(fetchElement('conditions', condition))
+  const createCondition = () => dispatch(createElement('conditions', { questionset }))
 
-  const editAttribute = (attribute) => elementActions.fetchElement('attributes', attribute)
-  const createAttribute = () => elementActions.createElement('attributes', { questionset })
+  const editAttribute = (attribute) => dispatch(fetchElement('attributes', attribute))
+  const createAttribute = () => dispatch(createElement('attributes', { questionset }))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <QuestionSetInfo questionset={questionset} elements={elements} elementActions={elementActions} />
+  const info = <QuestionSetInfo questionset={questionset} />
 
   // for reasons unknown, the strings are not picked up by makemessages from the props
   const addElementText = gettext('Add existing element')
@@ -74,122 +78,133 @@ const EditQuestionSet = ({ config, questionset, elements, elementActions }) => {
   const createQuestionSetText = gettext('Create new question set')
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {questionset.id ? gettext('Edit questionset') : gettext('Create questionset')}
+          </strong>
           <ReadOnlyIcon title={gettext('This question set is read only')} show={questionset.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeQuestionSet} disabled={questionset.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeQuestionSet} disabled={questionset.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeQuestionSet}
+            disabled={questionset.read_only}
+            back={true}
+          />
         </div>
-        {
-          questionset.id ? <>
-            <strong>{gettext('Question set')}{': '}</strong>
-            <code className="code-questions">{questionset.uri}</code>
-          </> : <strong>{gettext('Create question set')}</strong>
-        }
       </div>
 
       {
-        parent && parent.page && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This question set will be added to the page <code class="code-questions">%s</code>.'), [parent.page.uri])
-          }} />
-        </div>
+        parent && parent.page && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This question set will be added to the page <code class="code-questions">%s</code>.'),
+              [parent.page.uri])
+            } />
+          </div>
+        )
       }
       {
-        parent && parent.questionset && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This question set will be added to the question set <code class="code-questions">%s</code>.'), [parent.questionset.uri])
-          }} />
-        </div>
+        parent && parent.questionset && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This question set will be added to the question set <code class="code-questions">%s</code>.'),
+              [parent.questionset.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        questionset.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        questionset.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={questionset} field="uri_prefix"
-                  onChange={updateQuestionSet} />
+            <UriPrefix element={questionset} field="uri_prefix" onChange={updateQuestionSet} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={questionset} field="uri_path"
-                  onChange={updateQuestionSet} />
+            <Text element={questionset} field="uri_path" onChange={updateQuestionSet} />
           </div>
         </div>
 
-        <Textarea config={config} element={questionset} field="comment"
-                  rows={4} onChange={updateQuestionSet} />
+        <Textarea element={questionset} field="comment" rows={4} onChange={updateQuestionSet} />
 
         <div className="row">
           <div className="col-sm-6">
-            <Checkbox config={config} element={questionset} field="locked"
-                      onChange={updateQuestionSet} />
+            <Checkbox element={questionset} field="locked" onChange={updateQuestionSet} />
           </div>
           <div className="col-sm-6">
-            <Checkbox config={config} element={questionset} field="is_collection"
-                      onChange={updateQuestionSet} />
+            <Checkbox element={questionset} field="is_collection" onChange={updateQuestionSet} />
           </div>
         </div>
 
-        <Tabs id="#catalog-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab className="pt-10" key={index} eventKey={index} title={lang}>
-                <Text config={config} element={questionset} field={`title_${lang_code }`}
-                      onChange={updateQuestionSet} />
-                <Textarea config={config} element={questionset} field={`help_${lang_code }`}
-                          rows={4} onChange={updateQuestionSet} />
-                <Text config={config} element={questionset} field={`verbose_name_${lang_code }`}
-                      onChange={updateQuestionSet} />
-              </Tab>
-            ))
-          }
-        </Tabs>
-
-        <Select config={config} element={questionset} field="attribute" createText={gettext('Create new attribute')}
-                options={attributes} onChange={updateQuestionSet} onCreate={createAttribute} onEdit={editAttribute} />
-
-        <OrderedMultiSelect config={config} element={questionset} field="elements"
-                            values={elementValues} options={elementOptions}
-                            addText={addElementText} createText={createQuestionText}
-                            altCreateText={createQuestionSetText}
-                            onChange={updateQuestionSet} onCreate={createQuestion} onAltCreate={createQuestionSet}
-                            onEdit={editElement}/>
-
-        <MultiSelect config={config} element={questionset} field="conditions" options={conditions}
-                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
-                     onChange={updateQuestionSet} onCreate={createCondition} onEdit={editCondition} />
-
-        {get(config, 'settings.multisite') && <Select config={config} element={questionset} field="editors"
-                                                      options={sites} onChange={updateQuestionSet} isMulti />}
+        <LanguageTabs render={
+          (langCode) => (
+            <>
+              <Text element={questionset} field={`title_${langCode}`} onChange={updateQuestionSet} />
+              <Textarea element={questionset} field={`help_${langCode}`} rows={4} onChange={updateQuestionSet} />
+              <Text element={questionset} field={`verbose_name_${langCode}`} onChange={updateQuestionSet} />
+            </>
+          )
+        } />
+
+        <Select
+          element={questionset} field="attribute" createText={gettext('Create new attribute')}
+          options={attributes} onChange={updateQuestionSet} onCreate={createAttribute} onEdit={editAttribute} />
+
+        <OrderedMultiSelect
+          element={questionset} field="elements"
+          values={elementValues} options={elementOptions}
+          addText={addElementText} createText={createQuestionText}
+          altCreateText={createQuestionSetText}
+          onChange={updateQuestionSet} onCreate={createQuestion} onAltCreate={createQuestionSet}
+          onEdit={editElement} />
+
+        <MultiSelect
+          element={questionset} field="conditions" options={conditions}
+          addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
+          onChange={updateQuestionSet} onCreate={createCondition} onEdit={editCondition} />
+
+        {
+          settings.multisite && (
+            <Select element={questionset} field="editors" options={sites} onChange={updateQuestionSet} isMulti />
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {questionset.id && <DeleteButton onClick={openDeleteModal} disabled={questionset.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeQuestionSet} disabled={questionset.read_only} />
-          <SaveButton elementAction={elementAction} onClick={storeQuestionSet} disabled={questionset.read_only} back={true}/>
+          <SaveButton
+            elementAction={elementAction}
+            onClick={storeQuestionSet}
+            disabled={questionset.read_only}
+            back={true}
+          />
         </div>
-        {questionset.id && <DeleteButton onClick={openDeleteModal} disabled={questionset.read_only} />}
       </div>
 
-      <DeleteQuestionSetModal questionset={questionset} info={info} show={showDeleteModal}
-                              onClose={closeDeleteModal} onDelete={deleteQuestionSet} />
+      <DeleteQuestionSetModal
+        questionset={questionset} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteQuestionSet} />
     </div>
   )
 }
 
 EditQuestionSet.propTypes = {
-  config: PropTypes.object.isRequired,
-  questionset: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  questionset: PropTypes.object.isRequired
 }
 
 export default EditQuestionSet
diff --git a/rdmo/management/assets/js/components/edit/EditSection.js b/rdmo/management/assets/js/components/edit/EditSection.js
index da22871f1a..d82d61ae0f 100644
--- a/rdmo/management/assets/js/components/edit/EditSection.js
+++ b/rdmo/management/assets/js/components/edit/EditSection.js
@@ -1,133 +1,133 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import SectionInfo from '../info/SectionInfo'
+import DeleteSectionModal from '../modals/DeleteSectionModal'
 
 import Checkbox from './common/Checkbox'
+import LanguageTabs from './common/LanguageTabs'
 import OrderedMultiSelect from './common/OrderedMultiSelect'
 import Select from './common/Select'
 import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
+const EditSection = ({ section }) => {
+  const dispatch = useDispatch()
 
-import SectionInfo from '../info/SectionInfo'
-import DeleteSectionModal from '../modals/DeleteSectionModal'
-
-import useDeleteModal from '../../hooks/useDeleteModal'
+  const { sites, settings } = useSelector((state) => state.config)
+  const { elementAction, parent, pages } = useSelector((state) => state.elements)
 
-const EditSection = ({ config, section, elements, elementActions }) => {
+  const updateSection = (key, value) => dispatch(updateElement(section, {[key]: value}))
+  const storeSection = (back) => dispatch(storeElement('sections', section, elementAction, back))
+  const deleteSection = () => dispatch(deleteElement('sections', section))
 
-  const { sites } = config
-  const { elementAction, parent, pages } = elements
-
-  const updateSection = (key, value) => elementActions.updateElement(section, {[key]: value})
-  const storeSection = (back) => elementActions.storeElement('sections', section, elementAction, back)
-  const deleteSection = () => elementActions.deleteElement('sections', section)
-
-  const editPage = (value) => elementActions.fetchElement('pages', value.page)
-  const createPage = () => elementActions.createElement('pages', { section })
+  const editPage = (value) => dispatch(fetchElement('pages', value.page))
+  const createPage = () => dispatch(createElement('pages', { section }))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <SectionInfo section={section} elements={elements} elementActions={elementActions} />
+  const info = <SectionInfo section={section} />
 
   // for reasons unknown, the strings are not picked up by makemessages from the props
   const addPageText = gettext('Add existing page')
   const createPageText = gettext('Create new page')
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {section.id ? gettext('Edit section') : gettext('Create section')}
+          </strong>
           <ReadOnlyIcon title={gettext('This section is read only')} show={section.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeSection} disabled={section.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeSection} disabled={section.read_only} back={true}/>
         </div>
-        {
-          section.id ? <>
-            <strong>{gettext('Section')}{': '}</strong>
-            <code className="code-questions">{section.uri}</code>
-          </> : <strong>{gettext('Create section')}</strong>
-        }
       </div>
 
       {
-        parent && parent.catalog && <div className="panel-body panel-border">
-          <p dangerouslySetInnerHTML={{
-            __html:interpolate(gettext('This section will be added to the catalog <code class="code-questions">%s</code>.'), [parent.catalog.uri])
-          }} />
-        </div>
+        parent && parent.catalog && (
+          <div className="card-body border-bottom">
+            <Html html={
+              interpolate(gettext(
+                'This section will be added to the catalog <code class="code-questions">%s</code>.'),
+              [parent.catalog.uri])
+            } />
+          </div>
+        )
       }
 
       {
-        section.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        section.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={section} field="uri_prefix"
-                       onChange={updateSection} />
+            <UriPrefix element={section} field="uri_prefix" onChange={updateSection} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={section} field="uri_path"
-                  onChange={updateSection} />
+            <Text element={section} field="uri_path" onChange={updateSection} />
           </div>
         </div>
 
-        <Textarea config={config} element={section} field="comment"
-                  rows={4} onChange={updateSection} />
-
-        <Checkbox config={config} element={section} field="locked"
-                  onChange={updateSection} />
-
-        <Tabs id="#section-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab key={index} eventKey={index} title={lang}>
-                <Text config={config} element={section} field={`title_${lang_code }`}
-                      onChange={updateSection} />
-                <Text config={config} element={section} field={`short_title_${lang_code }`}
-                      onChange={updateSection} />
-              </Tab>
-            ))
-          }
-        </Tabs>
-
-        <OrderedMultiSelect config={config} element={section} field="pages" options={pages}
-                            addText={addPageText} createText={createPageText}
-                            onChange={updateSection} onCreate={createPage} onEdit={editPage} />
-
-        {get(config, 'settings.multisite') && <Select config={config} element={section} field="editors"
-                                                      options={sites} onChange={updateSection} isMulti />}
+        <Textarea element={section} field="comment" rows={4} onChange={updateSection} />
+
+        <Checkbox element={section} field="locked" onChange={updateSection} />
+
+        <LanguageTabs render={
+          (langCode) => (
+            <div>
+              <Text element={section} field={`title_${langCode}`} onChange={updateSection} />
+              <Text element={section} field={`short_title_${langCode}`} onChange={updateSection} />
+            </div>
+          )
+        } />
+
+        <OrderedMultiSelect
+          element={section} field="pages" options={pages}
+          addText={addPageText} createText={createPageText}
+          onChange={updateSection} onCreate={createPage} onEdit={editPage} />
+
+        {
+          settings.multisite && (
+            <Select element={section} field="editors" options={sites} onChange={updateSection} isMulti />
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {section.id && <DeleteButton onClick={openDeleteModal} disabled={section.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeSection} disabled={section.read_only}  />
           <SaveButton elementAction={elementAction} onClick={storeSection} disabled={section.read_only} back={true}/>
         </div>
-          {section.id && <DeleteButton onClick={openDeleteModal} disabled={section.read_only} />}
       </div>
 
-      <DeleteSectionModal section={section} info={info} show={showDeleteModal}
-                          onClose={closeDeleteModal} onDelete={deleteSection} />
+      <DeleteSectionModal
+        section={section} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteSection} />
     </div>
   )
 }
 
 EditSection.propTypes = {
-  config: PropTypes.object.isRequired,
-  section: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  section: PropTypes.object.isRequired
 }
 
 export default EditSection
diff --git a/rdmo/management/assets/js/components/edit/EditTask.js b/rdmo/management/assets/js/components/edit/EditTask.js
index ba66dfe603..7266315d3b 100644
--- a/rdmo/management/assets/js/components/edit/EditTask.js
+++ b/rdmo/management/assets/js/components/edit/EditTask.js
@@ -1,9 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { createElement, deleteElement, fetchElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import TaskInfo from '../info/TaskInfo'
+import DeleteTaskModal from '../modals/DeleteTaskModal'
 
 import Checkbox from './common/Checkbox'
+import LanguageTabs from './common/LanguageTabs'
 import MultiSelect from './common/MultiSelect'
 import Number from './common/Number'
 import Select from './common/Select'
@@ -11,152 +19,137 @@ import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
-
-import TaskInfo from '../info/TaskInfo'
-import DeleteTaskModal from '../modals/DeleteTaskModal'
+const EditTask = ({ task }) => {
+  const dispatch = useDispatch()
 
-import useDeleteModal from '../../hooks/useDeleteModal'
+  const { sites, groups, settings } = useSelector((state) => state.config)
+  const { elementAction, attributes, catalogs, conditions } = useSelector((state) => state.elements)
 
-const EditTask = ({ config, task, elements, elementActions}) => {
+  const updateTask = (key, value) => dispatch(updateElement(task, {[key]: value}))
+  const storeTask = (back) => dispatch(storeElement('tasks', task, elementAction, back))
+  const deleteTask = () => dispatch(deleteElement('tasks', task))
 
-  const { sites, groups } = config
-  const { elementAction, attributes, catalogs, conditions } = elements
+  const editCondition = (condition) => dispatch(fetchElement('conditions', condition))
+  const createCondition = () => dispatch(createElement('conditions', { task }))
 
-  const updateTask = (key, value) => elementActions.updateElement(task, {[key]: value})
-  const storeTask = (back) => elementActions.storeElement('tasks', task, elementAction, back)
-  const deleteTask = () => elementActions.deleteElement('tasks', task)
-
-  const editCondition = (condition) => elementActions.fetchElement('conditions', condition)
-  const createCondition = () => elementActions.createElement('conditions', { task })
-
-  const editAttribute = (attribute) => elementActions.fetchElement('attributes', attribute)
+  const editAttribute = (attribute) => dispatch(fetchElement('attributes', attribute))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <TaskInfo task={task} elements={elements} />
+  const info = <TaskInfo task={task} />
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {task.id ? gettext('Edit task') : gettext('Create task')}
+          </strong>
           <ReadOnlyIcon title={gettext('This task is read only')} show={task.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeTask} disabled={task.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeTask} disabled={task.read_only} back={true}/>
         </div>
-        {
-          task.id ? <>
-            <strong>{gettext('Task')}{': '}</strong>
-            <code className="code-tasks">{task.uri}</code>
-          </> : <strong>{gettext('Create task')}</strong>
-        }
       </div>
 
       {
-        task.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        task.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={task} field="uri_prefix"
-                       onChange={updateTask} />
+            <UriPrefix element={task} field="uri_prefix" onChange={updateTask} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={task} field="uri_path"
-                  onChange={updateTask} />
+            <Text element={task} field="uri_path" onChange={updateTask} />
           </div>
         </div>
 
-        <Textarea config={config} element={task} field="comment"
-                  rows={4} onChange={updateTask} />
+        <Textarea element={task} field="comment" rows={4} onChange={updateTask} />
 
         <div className="row">
           <div className="col-sm-4">
-            <Checkbox config={config} element={task} field="locked"
-                      onChange={updateTask} />
+            <Checkbox element={task} field="locked" onChange={updateTask} />
           </div>
           <div className="col-sm-4">
-            <Checkbox config={config} element={task} field="available"
-                      onChange={updateTask} />
+            <Checkbox element={task} field="available" onChange={updateTask} />
           </div>
           <div className="col-sm-4">
-            <Number config={config} element={task} field="order"
-                    onChange={updateTask} />
+            <Number element={task} field="order" onChange={updateTask} />
           </div>
         </div>
 
-        <Tabs id="#task-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab key={index} eventKey={index} title={lang}>
-                <Text config={config} element={task} field={`title_${lang_code }`}
-                      onChange={updateTask} />
-                <Textarea config={config} element={task} field={`text_${lang_code }`}
-                          rows={8} onChange={updateTask} />
-              </Tab>
-            ))
-          }
-        </Tabs>
-
-        <MultiSelect config={config} element={task} field="conditions" options={conditions}
-                     addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
-                     onChange={updateTask} onCreate={createCondition} onEdit={editCondition} />
-
-        <Select config={config} element={task} field="start_attribute"
-                options={attributes} onChange={updateTask} onEdit={editAttribute} />
-
-        <Select config={config} element={task} field="end_attribute"
-                options={attributes} onChange={updateTask} onEdit={editAttribute} />
+        <LanguageTabs render={
+          (langCode) => (
+            <>
+              <Text element={task} field={`title_${langCode}`} onChange={updateTask} />
+              <Textarea element={task} field={`text_${langCode}`} rows={8} onChange={updateTask} />
+            </>
+          )
+        } />
+
+        <MultiSelect
+          element={task} field="conditions" options={conditions}
+          addText={gettext('Add existing condition')} createText={gettext('Create new condition')}
+          onChange={updateTask} onCreate={createCondition} onEdit={editCondition} />
+
+        <Select
+          element={task} field="start_attribute" options={attributes}
+          onChange={updateTask} onEdit={editAttribute} />
+
+        <Select
+          element={task} field="end_attribute" options={attributes}
+          onChange={updateTask} onEdit={editAttribute} />
 
         <div className="row">
           <div className="col-sm-6">
-            <Number config={config} element={task} field="days_before"
-                     onChange={updateTask} />
+            <Number element={task} field="days_before" onChange={updateTask} />
           </div>
           <div className="col-sm-6">
-            <Number config={config} element={task} field="days_after"
-                     onChange={updateTask} />
+            <Number element={task} field="days_after" onChange={updateTask} />
           </div>
         </div>
 
-        <Select config={config} element={task} field="catalogs"
-                options={catalogs} onChange={updateTask} isMulti />
-
-        {get(config, 'settings.groups') && <Select config={config} element={task} field="groups"
-                                                   options={groups} onChange={updateTask} isMulti />}
+        <Select element={task} field="catalogs" options={catalogs} onChange={updateTask} isMulti />
 
-        {get(config, 'settings.multisite') && <Select config={config} element={task} field="sites"
-                                                      options={sites} onChange={updateTask} isMulti />}
-
-        {get(config, 'settings.multisite') && <Select config={config} element={task} field="editors"
-                                                      options={sites} onChange={updateTask} isMulti />}
+        {
+          settings.groups && (
+            <Select element={task} field="groups" options={groups} onChange={updateTask} isMulti />
+          )
+        }
+        {
+          settings.multisite && (
+            <>
+              <Select element={task} field="sites" options={sites} onChange={updateTask} isMulti />
+              <Select element={task} field="editors" options={sites} onChange={updateTask} isMulti />
+            </>
+          )
+        }
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {task.id && <DeleteButton onClick={openDeleteModal} disabled={task.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeTask} disabled={task.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeTask} disabled={task.read_only} back={true}/>
         </div>
-        {task.id && <DeleteButton onClick={openDeleteModal} disabled={task.read_only} />}
       </div>
 
-      <DeleteTaskModal task={task} info={info} show={showDeleteModal}
-                       onClose={closeDeleteModal} onDelete={deleteTask} />
+      <DeleteTaskModal
+        task={task} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteTask} />
     </div>
   )
 }
 
 EditTask.propTypes = {
-  config: PropTypes.object.isRequired,
-  task: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  task: PropTypes.object.isRequired
 }
 
 export default EditTask
diff --git a/rdmo/management/assets/js/components/edit/EditView.js b/rdmo/management/assets/js/components/edit/EditView.js
index 416d450263..0e423fb291 100644
--- a/rdmo/management/assets/js/components/edit/EditView.js
+++ b/rdmo/management/assets/js/components/edit/EditView.js
@@ -1,139 +1,130 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Tabs, Tab } from 'react-bootstrap'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { deleteElement, storeElement, updateElement } from '../../actions/elementActions'
+import useDeleteModal from '../../hooks/useDeleteModal'
+
+import { BackButton, DeleteButton, SaveButton } from '../common/Buttons'
+import { ReadOnlyIcon } from '../common/Icons'
+import ViewInfo from '../info/ViewInfo'
+import DeleteViewModal from '../modals/DeleteViewModal'
 
-import CodeMirror from './common/CodeMirror'
 import Checkbox from './common/Checkbox'
+import CodeMirror from './common/CodeMirror'
+import LanguageTabs from './common/LanguageTabs'
 import Number from './common/Number'
 import Select from './common/Select'
 import Text from './common/Text'
 import Textarea from './common/Textarea'
 import UriPrefix from './common/UriPrefix'
 
-import { BackButton, SaveButton, DeleteButton } from '../common/Buttons'
-import { ReadOnlyIcon } from '../common/Icons'
-
-import ViewInfo from '../info/ViewInfo'
-import DeleteViewModal from '../modals/DeleteViewModal'
-
-import useDeleteModal from '../../hooks/useDeleteModal'
+const EditView = ({ view }) => {
+  const dispatch = useDispatch()
 
-const EditView = ({ config, view, elements, elementActions }) => {
+  const { sites, groups, settings } = useSelector((state) => state.config)
+  const { elementAction, catalogs } = useSelector((state) => state.elements)
 
-  const { sites, groups } = config
-  const { elementAction, catalogs } = elements
-
-  const updateView = (key, value) => elementActions.updateElement(view, {[key]: value})
-  const storeView = (back) => elementActions.storeElement('views', view, elementAction, back)
-  const deleteView = () => elementActions.deleteElement('views', view)
+  const updateView = (key, value) => dispatch(updateElement(view, {[key]: value}))
+  const storeView = (back) => dispatch(storeElement('views', view, elementAction, back))
+  const deleteView = () => dispatch(deleteElement('views', view))
 
   const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()
 
-  const info = <ViewInfo view={view} elements={elements} />
+  const info = <ViewInfo view={view} />
 
   return (
-    <div className="panel panel-default panel-edit">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex flex-wrap align-items-center gap-2">
+          <strong className="flex-grow-1">
+            {view.id ? gettext('Edit view') : gettext('Create view')}
+          </strong>
           <ReadOnlyIcon title={gettext('This view is read only')} show={view.read_only} />
           <BackButton />
           <SaveButton elementAction={elementAction} onClick={storeView} disabled={view.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeView} disabled={view.read_only} back={true}/>
         </div>
-        {
-          view.id ? <>
-            <strong>{gettext('View')}{': '}</strong>
-            <code className="code-views">{view.uri}</code>
-          </> : <strong>{gettext('Create view')}</strong>
-        }
       </div>
 
       {
-        view.id && <div className="panel-body panel-border">
-          { info }
-        </div>
+        view.id && (
+          <div className="card-body border-bottom">
+            {info}
+          </div>
+        )
       }
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className="col-sm-6">
-            <UriPrefix config={config} element={view} field="uri_prefix"
-                       onChange={updateView} />
+            <UriPrefix element={view} field="uri_prefix" onChange={updateView} />
           </div>
           <div className="col-sm-6">
-            <Text config={config} element={view} field="uri_path"
-                  onChange={updateView} />
+            <Text element={view} field="uri_path" onChange={updateView} />
           </div>
         </div>
 
-        <Textarea config={config} element={view} field="comment"
-                  rows={4} onChange={updateView} />
+        <Textarea element={view} field="comment" rows={4} onChange={updateView} />
 
         <div className="row">
           <div className="col-sm-4">
-            <Checkbox config={config} element={view} field="locked"
-                      onChange={updateView} />
+            <Checkbox element={view} field="locked" onChange={updateView} />
           </div>
           <div className="col-sm-4">
-            <Checkbox config={config} element={view} field="available"
-                      onChange={updateView} />
+            <Checkbox element={view} field="available" onChange={updateView} />
           </div>
           <div className="col-sm-4">
-            <Number config={config} element={view} field="order"
-                    onChange={updateView} />
+            <Number element={view} field="order" onChange={updateView} />
           </div>
         </div>
 
-        <Tabs id="#view-tabs" defaultActiveKey={0} animation={false}>
-          {
-            config.settings && config.settings.languages.map(([lang_code, lang], index) => (
-              <Tab className="pt-10" key={index} eventKey={index} title={lang}>
-                <Text config={config} element={view} field={`title_${lang_code }`}
-                      onChange={updateView} />
-                <Textarea config={config} element={view} field={`help_${lang_code }`}
-                          rows={8} onChange={updateView} />
-              </Tab>
-            ))
-          }
-        </Tabs>
-
-        <Select config={config} element={view} field="catalogs"
-                options={catalogs} onChange={updateView} isMulti />
-
-        {get(config, 'settings.groups') && <Select config={config} element={view} field="groups"
-                                                   options={groups} onChange={updateView} isMulti />}
-
-        {get(config, 'settings.multisite') && <Select config={config} element={view} field="sites"
-                                                      options={sites} onChange={updateView} isMulti />}
-
-        {get(config, 'settings.multisite') && <Select config={config} element={view} field="editors"
-                                                      options={sites} onChange={updateView} isMulti />}
-
-        <CodeMirror config={config} element={view} field="template"
-                    onChange={updateView} />
+        <LanguageTabs render={
+          (langCode) => (
+            <>
+              <Text element={view} field={`title_${langCode}`} onChange={updateView} />
+              <Textarea element={view} field={`help_${langCode}`} rows={8} onChange={updateView} className="mb-0"/>
+            </>
+          )
+        } />
+
+        <Select element={view} field="catalogs" options={catalogs} onChange={updateView} isMulti />
+
+        {
+          settings.groups && (
+            <Select element={view} field="groups" options={groups} onChange={updateView} isMulti />
+          )
+        }
+        {
+          settings.multisite && (
+            <>
+              <Select element={view} field="sites" options={sites} onChange={updateView} isMulti />
+              <Select element={view} field="editors" options={sites} onChange={updateView} isMulti />
+            </>
+          )
+        }
+
+        <CodeMirror element={view} field="template" onChange={updateView} />
       </div>
 
-      <div className="panel-footer">
-        <div className="pull-right">
-          <BackButton />
+      <div className="card-footer">
+        <div className="d-flex align-items-center gap-2">
+          {view.id && <DeleteButton onClick={openDeleteModal} disabled={view.read_only} />}
+          <BackButton className="ms-auto" />
           <SaveButton elementAction={elementAction} onClick={storeView} disabled={view.read_only} />
           <SaveButton elementAction={elementAction} onClick={storeView} disabled={view.read_only} back={true}/>
         </div>
-        {view.id && <DeleteButton onClick={openDeleteModal} disabled={view.read_only} />}
       </div>
 
-      <DeleteViewModal view={view} info={info} show={showDeleteModal}
-                       onClose={closeDeleteModal} onDelete={deleteView} />
+      <DeleteViewModal
+        view={view} info={info} show={showDeleteModal}
+        onClose={closeDeleteModal} onDelete={deleteView} />
     </div>
   )
 }
 
 EditView.propTypes = {
-  config: PropTypes.object.isRequired,
-  view: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  view: PropTypes.object.isRequired
 }
 
 export default EditView
diff --git a/rdmo/management/assets/js/components/edit/common/Checkbox.js b/rdmo/management/assets/js/components/edit/common/Checkbox.js
index 7cb6fee960..bd1d84d931 100644
--- a/rdmo/management/assets/js/components/edit/common/Checkbox.js
+++ b/rdmo/management/assets/js/components/edit/common/Checkbox.js
@@ -1,48 +1,43 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
-import get from 'lodash/get'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
+
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
 
-const Checkbox = ({ config, element, field, onChange }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+const Checkbox = ({ element, field, onChange }) => {
+  const { meta } = useSelector((state) => state.config)
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
-  })
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
   const checked = isNil(element[field]) ? '' : element[field]
 
   return (
-    <div className={className}>
-      <div className="checkbox">
-          <label>
-              <input id={id} type="checkbox" checked={checked} disabled={element.read_only}
-                     onChange={() => onChange(field, !checked)} />
-              <span>{label}</span>
-          </label>
+    <div className="mb-3">
+      <div className="form-check">
+        <input
+          type="checkbox"  id={id} disabled={element.read_only}
+          className={classNames('form-check-input', {'is-invalid': !isEmpty(errors)})}
+          checked={checked} onChange={() => onChange(field, !checked)} />
+        <label className="form-check-label" htmlFor={id}>{label}</label>
+
+        <ErrorList errors={errors} />
+        <HelpText help={help} />
       </div>
-
-      {help && <p className="help-block">{help}</p>}
-
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
     </div>
   )
 }
 
 Checkbox.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
   onChange: PropTypes.func,
diff --git a/rdmo/management/assets/js/components/edit/common/CodeMirror.js b/rdmo/management/assets/js/components/edit/common/CodeMirror.js
index 9c402b8b27..b9095622ab 100644
--- a/rdmo/management/assets/js/components/edit/common/CodeMirror.js
+++ b/rdmo/management/assets/js/components/edit/common/CodeMirror.js
@@ -1,47 +1,55 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
-import get from 'lodash/get'
-import ReactCodeMirror from '@uiw/react-codemirror'
+
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
+
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
 import { html } from '@codemirror/lang-html'
+import { EditorView } from '@codemirror/view'
+import ReactCodeMirror from '@uiw/react-codemirror'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+const CodeMirror = ({ element, field, onChange }) => {
+  const { meta } = useSelector((state) => state.config)
 
-const CodeMirror = ({ config, element, field, onChange }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
+  const className = classNames('codemirror form-control', {
+    'is-invalid': !isEmpty(errors),
+    'disabled': element.read_only
   })
 
   const value = isNil(element[field]) ? '' : element[field]
 
+  const extensions = [html()]
+
+  if (element.read_only) {
+    extensions.push(EditorView.editable.of(false))
+  }
+
   return (
-    <div className={className}>
+    <div className="mb-3">
       <label className="control-label" htmlFor={id}>{label}</label>
 
-      <ReactCodeMirror className="codemirror form-control" id={id} value={value} extensions={[html()]}
-                       onChange={(value) => onChange(field, value)} disabled={element.read_only} />
-
-      {help && <p className="help-block">{help}</p>}
+      <ReactCodeMirror
+        className={className} id={id} value={value} extensions={extensions}
+        onChange={(value) => onChange(field, value)} disabled={element.read_only} />
 
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 CodeMirror.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
   onChange: PropTypes.func
diff --git a/rdmo/management/assets/js/components/edit/common/ErrorList.js b/rdmo/management/assets/js/components/edit/common/ErrorList.js
new file mode 100644
index 0000000000..1b25776e0c
--- /dev/null
+++ b/rdmo/management/assets/js/components/edit/common/ErrorList.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { isEmpty } from 'lodash'
+
+const ErrorList = ({ errors }) => (
+  !isEmpty(errors) && (
+    <div className="invalid-feedback">
+      {errors.map((error, index) => <div key={index} className="mb-1">{error}</div>)}
+    </div>
+  )
+)
+
+ErrorList.propTypes = {
+  errors: PropTypes.array
+}
+
+export default ErrorList
diff --git a/rdmo/management/assets/js/components/edit/common/HelpText.js b/rdmo/management/assets/js/components/edit/common/HelpText.js
new file mode 100644
index 0000000000..4825adc113
--- /dev/null
+++ b/rdmo/management/assets/js/components/edit/common/HelpText.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { isEmpty } from 'lodash'
+
+const HelpText = ({ help }) => (
+  !isEmpty(help) && (
+    <div className="form-text">
+      {help}
+    </div>
+  )
+)
+
+HelpText.propTypes = {
+  help: PropTypes.string
+}
+
+export default HelpText
diff --git a/rdmo/management/assets/js/components/edit/common/LanguageTabs.js b/rdmo/management/assets/js/components/edit/common/LanguageTabs.js
new file mode 100644
index 0000000000..752ea8261b
--- /dev/null
+++ b/rdmo/management/assets/js/components/edit/common/LanguageTabs.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+
+import Tabs from './Tabs'
+
+const LanguageTabs = ({ render }) => {
+  const { settings } = useSelector((state) => state.config)
+
+  const labels = settings.languages.map(([, lang]) => lang)
+  const tabs = settings.languages.map(([lang_code]) => render(lang_code))
+
+  return settings && <Tabs labels={labels} tabs={tabs} />
+}
+
+LanguageTabs.propTypes = {
+  render: PropTypes.func,
+}
+
+export default LanguageTabs
diff --git a/rdmo/management/assets/js/components/edit/common/MultiSelect.js b/rdmo/management/assets/js/components/edit/common/MultiSelect.js
index 05bbc59575..dcf260df2e 100644
--- a/rdmo/management/assets/js/components/edit/common/MultiSelect.js
+++ b/rdmo/management/assets/js/components/edit/common/MultiSelect.js
@@ -1,28 +1,37 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import ReactSelect from 'react-select'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
-import get from 'lodash/get'
+
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
 
 import Link from 'rdmo/core/assets/js/components/Link'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
+
+const MultiSelect = ({ element, field, options, addText, createText, onChange, onCreate, onEdit }) => {
+  const { meta } = useSelector((state) => state.config)
 
-const MultiSelect = ({ config, element, field, options, addText, createText, onChange, onCreate, onEdit }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
   const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
+    'is-invalid': !isEmpty(errors)
   })
 
+  const selectClassNames = {
+    control: () => classNames('form-control', {
+      'is-invalid': !isEmpty(errors)
+    })
+  }
+
   const values = isNil(element[field]) ? [] : element[field]
 
   const selectOptions = options.map(option => ({
@@ -30,10 +39,6 @@ const MultiSelect = ({ config, element, field, options, addText, createText, onC
     label: option.uri || option.text || option.name
   }))
 
-  const styles = onEdit ? {
-    container: provided => ({...provided, marginRight: 8 + 12 + 4 + 11})
-  } : {}
-
   const handleAdd = () => {
     values.push(selectOptions[0].value)
     onChange(field, values)
@@ -54,55 +59,66 @@ const MultiSelect = ({ config, element, field, options, addText, createText, onC
   }
 
   return (
-    <div className={className}>
-      <div className="mb-5">
+    <div className="mb-3">
+      <div className="mb-2">
         <strong id={id}>{label}</strong>
       </div>
 
-      <div>
-      {
-        values.map((value, index) => {
-          const selectValue = selectOptions.find(option => (option.value == value))
-
-          return (
-            <div key={index} className="multi-select-item mb-10">
-              {
-                onEdit && <div className="multi-select-item-options">
-                  <Link className="fa fa-pencil" title={gettext('Edit')} onClick={() => handleEdit(index)} />
-                  <Link className="fa fa-times" title={gettext('Remove')} onClick={() => handleRemove(index)}
-                        disabled={element.read_only} />
+      <div className={className}>
+        {
+          values.map((value, index) => {
+            const selectValue = selectOptions.find(option => (option.value == value))
+
+            return (
+              <div key={index} className="d-flex align-items-center gap-2 mb-2">
+                <div className="flex-grow-1">
+                  <ReactSelect
+                    classNamePrefix="react-select" className="react-select" classNames={selectClassNames}
+                    options={selectOptions} value={selectValue} isDisabled={element.read_only}
+                    aria-labelledby={id} onChange={option => handleChange(option, index)} />
                 </div>
-              }
-
-              <ReactSelect classNamePrefix="react-select" className="react-select" styles={styles}
-                           options={selectOptions} value={selectValue} isDisabled={element.read_only}
-                           aria-labelledby={id} onChange={option => handleChange(option, index)} />
-            </div>
-          )
-        })
-      }
+                {
+                  onEdit && (
+                    <div className="d-flex align-items-center gap-1">
+                      <Link className="bi bi-pencil" title={gettext('Edit')} onClick={() => handleEdit(index)} />
+                      <Link
+                        className="bi bi-x-lg" title={gettext('Remove')} onClick={() => handleRemove(index)}
+                        disabled={element.read_only} />
+                    </div>
+                  )
+                }
+              </div>
+            )
+          })
+        }
       </div>
 
-      <button type="button" className="btn btn-primary btn-xs" onClick={() => handleAdd()} disabled={element.read_only}>
-        {addText}
-      </button>
-
-      {
-        onCreate &&
-        <button type="button" className="btn btn-success btn-xs ml-10" onClick={onCreate}
-                disabled={element.read_only || isNil(element.id)}
-                title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-          {createText}
+      <div className="d-flex align-items-center gap-2">
+        <button
+          type="button" className="btn btn-primary btn-sm" onClick={() => handleAdd()}
+          disabled={element.read_only}>
+          {addText}
         </button>
-      }
 
-      {help && <p className="help-block">{help}</p>}
+        {
+          onCreate && (
+            <button
+              type="button" className="btn btn-success btn-sm" onClick={onCreate}
+              disabled={element.read_only || isNil(element.id)}
+              title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
+              {createText}
+            </button>
+          )
+        }
+      </div>
+
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 MultiSelect.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
   options: PropTypes.array,
diff --git a/rdmo/management/assets/js/components/edit/common/Number.js b/rdmo/management/assets/js/components/edit/common/Number.js
index 10488d3ac4..e44eccdfca 100644
--- a/rdmo/management/assets/js/components/edit/common/Number.js
+++ b/rdmo/management/assets/js/components/edit/common/Number.js
@@ -1,45 +1,44 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
-import get from 'lodash/get'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
+
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
+
+const Number = ({ element, field, onChange }) => {
+  const { meta } = useSelector((state) => state.config)
 
-const Number = ({ config, element, field, onChange }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
+  const className = classNames('form-control', {
+    'is-invalid': !isEmpty(errors)
   })
 
   const value = isNil(element[field]) ? '' : element[field]
 
   return (
-    <div className={className}>
-      <label className="control-label" htmlFor={id}>{label}</label>
-
-      <input className="form-control" id={id} type="number" disabled={element.read_only}
-             value={value} onChange={event => onChange(field, event.target.value)} />
-
-      {help && <p className="help-block">{help}</p>}
-
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
+    <div className="mb-3">
+      <label className="form-label" htmlFor={id}>{label}</label>
+      <input
+        type="number" id={id} className={className} disabled={element.read_only}
+        value={value} onChange={event => onChange(field, event.target.value)} />
+
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 Number.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
   onChange: PropTypes.func
diff --git a/rdmo/management/assets/js/components/edit/common/OrderedMultiSelect.js b/rdmo/management/assets/js/components/edit/common/OrderedMultiSelect.js
index 548b4ee6f2..5c7c59e602 100644
--- a/rdmo/management/assets/js/components/edit/common/OrderedMultiSelect.js
+++ b/rdmo/management/assets/js/components/edit/common/OrderedMultiSelect.js
@@ -1,22 +1,28 @@
-import React, { Component, useRef } from 'react'
-import ReactSelect from 'react-select'
-import { useDrag, useDrop } from 'react-dnd'
+import React, { useRef } from 'react'
 import PropTypes from 'prop-types'
+import { useDrag, useDrop } from 'react-dnd'
+import { useSelector } from 'react-redux'
+import ReactSelect from 'react-select'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
-import isUndefined from 'lodash/isUndefined'
 import isNil from 'lodash/isNil'
 import isNumber from 'lodash/isNumber'
-import toNumber from 'lodash/toNumber'
-import get from 'lodash/get'
+import isUndefined from 'lodash/isUndefined'
 import maxBy from 'lodash/maxBy'
+import toNumber from 'lodash/toNumber'
+
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
 
 import Link from 'rdmo/core/assets/js/components/Link'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
 
-const OrderedMultiSelectItem = ({ index, field, selectValue, selectOptions, errors, disabled, ariaLabelledBy,
-                                  handleChange, handleEdit, handleRemove, handleDrag }) => {
+const OrderedMultiSelectItem = ({
+  index, field, selectValue, selectOptions, errors, disabled, ariaLabelledBy,
+  handleChange, handleEdit, handleRemove, handleDrag
+}) => {
   const dragRef = useRef(null)
   const dropRef = useRef(null)
 
@@ -36,14 +42,12 @@ const OrderedMultiSelectItem = ({ index, field, selectValue, selectOptions, erro
     },
   }))
 
-  const dropClassName = classNames({
-    'drop': true,
+  const dropClassName = classNames('drop', {
     'show': isDragging,
     'over': isOver
   })
 
-  const dragClassName = classNames({
-    'fa fa-arrows drag': true,
+  const dragClassName = classNames('bi bi-arrows-move drag', {
     disabled: disabled
   })
 
@@ -52,57 +56,61 @@ const OrderedMultiSelectItem = ({ index, field, selectValue, selectOptions, erro
     drop(dropRef)
   }
 
-  const styles = {
-    container: provided => ({...provided, marginRight: 8 + 12 + 4 + 11 + 4 + 14})
+  const itemErrors = isEmpty(errors) || isEmpty(errors[index]) ? [] : (
+    Object.values(errors[index]).reduce((itemErrors, values) => [...itemErrors, ...values]
+    ))
+
+  const className = classNames('d-flex align-items-center gap-2', {
+    'is-invalid': !isEmpty(itemErrors)
+  })
+
+  const selectClassNames = {
+    control: () => classNames('form-control', {
+      'is-invalid': !isEmpty(itemErrors)
+    })
   }
 
   return (
-    <>
-      <div className="ordered-multi-select-item">
-        <div className="ordered-multi-select-item-options">
-          <Link className="fa fa-pencil" title={gettext('Edit')}
-                onClick={() => handleEdit(index)} />
-          <Link className="fa fa-times" title={gettext('Remove')} disabled={disabled}
-                onClick={() => !disabled && handleRemove(index)} />
-          <i className={dragClassName} ref={dragRef} aria-hidden="true"></i>
-        </div>
-        <div className="ordered-multi-select-item-select">
-          <ReactSelect classNamePrefix="react-select" className="react-select"
-                       options={selectOptions} value={selectValue}
-                       onChange={option => handleChange(option, index)}
-                       menuPortalTarget={document.body} styles={styles} isDisabled={disabled}
-                       aria-labelledby={ariaLabelledBy} />
+    <div className="position-relative mb-2">
+      <div className={className}>
+        <div className="flex-grow-1">
+          <ReactSelect
+            classNamePrefix="react-select" className="react-select" classNames={selectClassNames}
+            options={selectOptions} value={selectValue}
+            onChange={option => handleChange(option, index)}
+            menuPortalTarget={document.body} isDisabled={disabled}
+            aria-labelledby={ariaLabelledBy} />
         </div>
-        {
-          errors && errors[index] &&
-          <ul className="help-block list-unstyled">
-            {
-              Object.keys(errors[index]).map((key, i1) => {
-                return errors[index][key].map((error, i2) => <li key={`${i1}-${i2}`}>{error}</li>)
-              })
-            }
-          </ul>
-        }
+        <Link
+          className="bi bi-pencil" title={gettext('Edit')}
+          onClick={() => handleEdit(index)} />
+        <Link
+          className="bi bi-x-lg" title={gettext('Remove')} disabled={disabled}
+          onClick={() => !disabled && handleRemove(index)} />
+        <i className={dragClassName} ref={dragRef} aria-hidden="true"></i>
       </div>
+
+      <ErrorList errors={itemErrors} />
+
       <div ref={dropRef} className={dropClassName}></div>
-    </>
+    </div>
   )
 }
 
-class OrderedMultiSelect extends Component {
 
-  constructor(props) {
-    super(props)
+const OrderedMultiSelect = ({
+  element, field, options, values,
+  addText, createText, altCreateText, onChange, onCreate, onAltCreate, onEdit
+}) => {
 
-    this.handleChange = this.handleChange.bind(this)
-    this.handleEdit = this.handleEdit.bind(this)
-    this.handleRemove = this.handleRemove.bind(this)
-    this.handleDrag = this.handleDrag.bind(this)
-  }
+  const { meta } = useSelector((state) => state.config)
 
-  getValues() {
-    const { field, values, element } = this.props
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
+  const getValues = () => {
     if (isUndefined(values)) {
       return isUndefined(element[field]) ? [] : [...element[field]]
     } else {
@@ -110,18 +118,14 @@ class OrderedMultiSelect extends Component {
     }
   }
 
-  getSelectOptions() {
-    const { options } = this.props
-
+  const getSelectOptions = () => {
     return options.map(option => ({
       value: option.value || option.id,
       label: option.label || option.uri || option.text || option.name
     }))
   }
 
-  parseValue(option) {
-    const { field } = this.props
-
+  const parseValue = (option) => {
     if (isNumber(option.value)) {
       return [field.slice(0, -1), option.value]
     } else {
@@ -130,7 +134,7 @@ class OrderedMultiSelect extends Component {
     }
   }
 
-  compareValue(option, value) {
+  const compareValue = (option, value) => {
     const valueField = Object.keys(value).filter(k => k != 'order')[0]
     if (isNumber(option.value)) {
       return option.value == value[valueField]
@@ -139,12 +143,11 @@ class OrderedMultiSelect extends Component {
     }
   }
 
-  handleAdd() {
-    const { field, onChange } = this.props
-    const values = this.getValues()
+  const handleAdd = () => {
+    const values = getValues()
 
     const maxValue = maxBy(values, 'order')
-    const [valueField, value] = this.parseValue(this.getSelectOptions()[0])
+    const [valueField, value] = parseValue(getSelectOptions()[0])
     values.push({
       [valueField]: value,
       order: maxValue ? maxValue.order + 1 : 0
@@ -153,14 +156,13 @@ class OrderedMultiSelect extends Component {
     onChange(field, values)
   }
 
-  handleChange(option, index) {
-    const { field, onChange } = this.props
-    const values = this.getValues()
+  const handleChange = (option, index) => {
+    const values = getValues()
 
     if (isNil(option)) {
       values[index] = null
     } else {
-      const [valueField, value] = this.parseValue(option)
+      const [valueField, value] = parseValue(option)
       values[index] = {
         [valueField]: value,
         order: values[index].order
@@ -170,25 +172,22 @@ class OrderedMultiSelect extends Component {
     onChange(field, values)
   }
 
-  handleEdit(index) {
-    const { onEdit } = this.props
-    const values = this.getValues()
+  const handleEdit = (index) => {
+    const values = getValues()
 
     onEdit(values[index])
   }
 
-  handleRemove(index) {
-    const { field, onChange } = this.props
-    const values = this.getValues()
+  const handleRemove = (index) => {
+    const values = getValues()
 
     values.splice(index, 1)
 
     onChange(field, values)
   }
 
-  handleDrag(dragIndex, dropIndex) {
-    const { field, onChange } = this.props
-    const values = this.getValues()
+  const handleDrag = (dragIndex, dropIndex) => {
+    const values = getValues()
 
     const dragValue = values[dragIndex]
     values.splice(dragIndex, 1)
@@ -202,69 +201,60 @@ class OrderedMultiSelect extends Component {
     onChange(field, values)
   }
 
-  render() {
-    const { config, element, field, addText, createText, altCreateText,
-            onCreate, onAltCreate } = this.props
-
-    const id = getId(element, field),
-          label = getLabel(config, element, field),
-          help = getHelp(config, element, field),
-          warnings = get(element, ['warnings', field]),
-          errors = get(element, ['errors', field])
-
-    const className = classNames({
-      'form-group': true,
-      'has-warning': !isEmpty(warnings),
-      'has-error': !isEmpty(errors)
-    })
-
-    return (
-      <div className={className}>
-        <div className="mb-5">
-          <strong id={id}>{label}</strong>
-        </div>
+  return (
+    <div className="mb-3">
+      <div className="mb-2">
+        <strong id={id}>{label}</strong>
+      </div>
 
-        <div>
+      <div>
         {
-          this.getValues().map((value, index) => {
-            const selectOptions = this.getSelectOptions()
-            const selectValue = selectOptions.find(option => this.compareValue(option, value))
+          getValues().map((value, index) => {
+            const selectOptions = getSelectOptions()
+            const selectValue = selectOptions.find(option => compareValue(option, value))
             return (
-              <OrderedMultiSelectItem key={index} index={index} field={field}
-                                      selectValue={selectValue} selectOptions={selectOptions}
-                                      errors={errors} handleChange={this.handleChange}
-                                      handleEdit={this.handleEdit} handleRemove={this.handleRemove}
-                                      handleDrag={this.handleDrag} ariaLabelledBy={id} disabled={element.read_only} />
+              <OrderedMultiSelectItem
+                key={index} index={index} field={field}
+                selectValue={selectValue} selectOptions={selectOptions}
+                errors={errors} handleChange={handleChange}
+                handleEdit={handleEdit} handleRemove={handleRemove}
+                handleDrag={handleDrag} ariaLabelledBy={id} disabled={element.read_only} />
             )
           })
         }
-        </div>
+      </div>
 
-        <button type="button" className="btn btn-primary btn-xs" onClick={() => this.handleAdd()}
-                disabled={element.read_only}>
+      <div className="d-flex align-items-center gap-2">
+        <button
+          type="button" className="btn btn-primary btn-sm" onClick={handleAdd}
+          disabled={element.read_only}>
           {addText}
         </button>
         {
-          onCreate &&
-          <button type="button" className="btn btn-success btn-xs ml-10" onClick={onCreate}
-                  disabled={element.read_only || isNil(element.id)}
-                  title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-            {createText}
-          </button>
+          onCreate && (
+            <button
+              type="button" className="btn btn-success btn-sm" onClick={onCreate}
+              disabled={element.read_only || isNil(element.id)}
+              title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
+              {createText}
+            </button>
+          )
         }
         {
-          onAltCreate &&
-          <button type="button" className="btn btn-success btn-xs ml-10" onClick={onAltCreate}
-                  disabled={element.read_only || isNil(element.id)}
-                  title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-            {altCreateText}
-          </button>
+          onAltCreate && (
+            <button
+              type="button" className="btn btn-success btn-sm" onClick={onAltCreate}
+              disabled={element.read_only || isNil(element.id)}
+              title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
+              {altCreateText}
+            </button>
+          )
         }
-
-        {help && <p className="help-block">{help}</p>}
       </div>
-    )
-  }
+
+      <HelpText help={help} />
+    </div>
+  )
 }
 
 OrderedMultiSelectItem.propTypes = {
@@ -282,10 +272,8 @@ OrderedMultiSelectItem.propTypes = {
 }
 
 OrderedMultiSelect.propTypes = {
-  config: PropTypes.object.isRequired,
   element: PropTypes.object.isRequired,
   field: PropTypes.string.isRequired,
-  fields: PropTypes.array,
   options: PropTypes.array.isRequired,
   values: PropTypes.array,
   addText: PropTypes.string.isRequired,
diff --git a/rdmo/management/assets/js/components/edit/common/Radio.js b/rdmo/management/assets/js/components/edit/common/Radio.js
index 6e2c530e97..6a16c2716b 100644
--- a/rdmo/management/assets/js/components/edit/common/Radio.js
+++ b/rdmo/management/assets/js/components/edit/common/Radio.js
@@ -1,55 +1,54 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
-import isEmpty from 'lodash/isEmpty'
-import isNil from 'lodash/isNil'
-import get from 'lodash/get'
+import { get, isEmpty, isNil, uniqueId } from 'lodash'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import { getHelp, getLabel } from 'rdmo/management/assets/js/utils/forms'
 
-const Radio = ({ config, element, field, options, onChange }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
-  })
+const Radio = ({ element, field, options, onChange }) => {
+  const { meta } = useSelector((state) => state.config)
+
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
   const value = isNil(element[field]) ? '' : element[field]
 
   return (
-    <div className={className}>
-      <label className="control-label" htmlFor={id}>{label}</label>
-
-      <div>
-      {
-        options.map((option, index) => (
-          <label key={index} className="radio-inline">
-            <input type="radio" name="inlineRadioOptions" disabled={element.read_only}
-                   checked={value === option.id}
-                   value={option.id} onChange={event => onChange(field, event.target.value)}/>
-            <span>{option.text}</span>
-          </label>
-        ))
-      }
+    <div className="mb-3">
+      <label className="control-label">{label}</label>
+
+      <div className="d-flex align-items-center gap-5">
+        {
+          options.map((option, index) => {
+            const radioId = uniqueId('radio-')
+
+            return (
+              <div key={index} className="form-check">
+                <input
+                  type="radio" id={radioId} disabled={element.read_only}
+                  className={classNames('form-check-input', {'is-invalid': !isEmpty(errors)})}
+                  checked={value === option.id} value={option.id}
+                  onChange={event => onChange(field, event.target.value)} />
+                <label className="form-check-label" htmlFor={radioId}>{option.text}</label>
+              </div>
+            )
+          })
+        }
       </div>
 
-      {help && <p className="help-block">{help}</p>}
-
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 Radio.propTypes = {
-  config: PropTypes.object,
+  className: PropTypes.array,
   element: PropTypes.object,
   field: PropTypes.string,
   options: PropTypes.array,
diff --git a/rdmo/management/assets/js/components/edit/common/Select.js b/rdmo/management/assets/js/components/edit/common/Select.js
index 0d1a0162a7..0ebd550cb1 100644
--- a/rdmo/management/assets/js/components/edit/common/Select.js
+++ b/rdmo/management/assets/js/components/edit/common/Select.js
@@ -1,40 +1,46 @@
 import React from 'react'
-import ReactSelect from 'react-select'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import ReactSelect from 'react-select'
 import classNames from 'classnames'
 import get from 'lodash/get'
 import isArray from 'lodash/isArray'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
 
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
+
 import Link from 'rdmo/core/assets/js/components/Link'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
 
-const Select = ({ config, element, field, options, createText, isMulti, onChange, onCreate, onEdit }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+const Select = ({ element, field, options, createText, isMulti, onChange, onCreate, onEdit }) => {
+  const { meta } = useSelector((state) => state.config)
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
+
+  const className = classNames('d-flex align-items-center gap-2', {
+    'is-invalid': !isEmpty(errors)
   })
 
+  const selectClassNames = {
+    control: () => classNames('form-control', {
+      'is-invalid': !isEmpty(errors)
+    })
+  }
+
   const selectOptions = options.map(option => ({
     value: option.id,
     label: option.uri || option.text || option.name
   }))
 
-  const selectValue = isArray(element[field]) ? selectOptions.filter(option => (element[field].includes(option.value)))
-                                              : selectOptions.find(option => (option.value == element[field]))
-
-  const styles = onEdit && selectValue ? {
-    container: provided => ({...provided, marginRight: 8 + 12})
-  } : {}
+  const selectValue = isArray(element[field]) ? (
+    selectOptions.filter(option => (element[field].includes(option.value)))
+  ) : selectOptions.find(option => (option.value == element[field]))
 
   const handleChange = (option) => {
     if (isNil(option)) {
@@ -47,44 +53,48 @@ const Select = ({ config, element, field, options, createText, isMulti, onChange
   }
 
   return (
-    <div className={className}>
-      <div className="mb-5">
+    <div className="mb-3">
+      <div className="mb-2">
         <strong id={id}>{label}</strong>
       </div>
 
-      <div className="select-item">
+      <div className={className}>
+        <div className="flex-grow-1">
+          <ReactSelect
+            classNamePrefix="react-select" className="react-select" classNames={selectClassNames}
+            options={selectOptions} value={selectValue} isMulti={isMulti} isClearable={true}
+            onChange={handleChange} isDisabled={element.read_only} aria-labelledby={id} />
+        </div>
         {
-          onEdit && selectValue && <div className="select-item-options">
-            <Link className="fa fa-pencil" title={gettext('Edit')}
-                  onClick={() => onEdit(selectValue.value)} disabled={isNil(selectValue)} />
-          </div>
+          onEdit && selectValue && (
+            <div>
+              <Link
+                className="bi bi-pencil" title={gettext('Edit')}
+                onClick={() => onEdit(selectValue.value)} disabled={isNil(selectValue)} />
+            </div>
+          )
         }
-
-        <ReactSelect classNamePrefix="react-select" className="react-select" isClearable={true}
-                     options={selectOptions} value={selectValue} isMulti={isMulti}
-                     onChange={handleChange} styles={styles} isDisabled={element.read_only} aria-labelledby={id} />
       </div>
 
-
       {
-        onCreate &&
-        <button type="button" className="btn btn-success btn-xs mt-10" onClick={onCreate} disabled={isNil(element.id)}
-                title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
-          {createText}
-        </button>
+        onCreate && (
+          <div className="mt-2">
+            <button
+              type="button" className="btn btn-success btn-sm" onClick={onCreate} disabled={isNil(element.id)}
+              title={isNil(element.id) ? gettext('For this action, the element must first be created.') : undefined}>
+              {createText}
+            </button>
+          </div>
+        )
       }
 
-      {help && <p className="help-block">{help}</p>}
-
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 Select.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
   options: PropTypes.array,
diff --git a/rdmo/management/assets/js/components/edit/common/Tabs.js b/rdmo/management/assets/js/components/edit/common/Tabs.js
new file mode 100644
index 0000000000..7db8c92c23
--- /dev/null
+++ b/rdmo/management/assets/js/components/edit/common/Tabs.js
@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+const Tabs = ({ labels, tabs }) => {
+  const [activeTab, setActiveTab] = useState(0)
+
+  return (
+    <div className="mb-3">
+      <ul className="nav nav-tabs">
+        {
+          labels.map((label, index) => (
+            <li key={index} className="nav-item">
+              <button
+                className={classNames('nav-link', {'active': index === activeTab})}
+                onClick={() => setActiveTab(index)}>{label}</button>
+            </li>
+          ))
+        }
+      </ul>
+
+      <div className="border-start border-end border-bottom rounded-bottom-2 p-3 pb-0 mb-3">
+        {tabs[activeTab]}
+      </div>
+    </div>
+  )
+}
+
+Tabs.propTypes = {
+  labels: PropTypes.array,
+  tabs: PropTypes.array
+}
+
+export default Tabs
diff --git a/rdmo/management/assets/js/components/edit/common/Text.js b/rdmo/management/assets/js/components/edit/common/Text.js
index c249bd11fb..b8fd2b655f 100644
--- a/rdmo/management/assets/js/components/edit/common/Text.js
+++ b/rdmo/management/assets/js/components/edit/common/Text.js
@@ -1,48 +1,46 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
-import get from 'lodash/get'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
+
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
+
+const Text = ({ element, field, onChange }) => {
+  const { meta } = useSelector((state) => state.config)
 
-const Text = ({ config, element, field, onChange }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
+  const className = classNames('form-control', {
+    'is-invalid': !isEmpty(errors)
   })
 
   const value = isNil(element[field]) ? '' : element[field]
 
   return (
-    <div className={className}>
-      <label className="control-label" htmlFor={id}>{label}</label>
-
-      <input className="form-control" id={id} type="text" disabled={element.read_only}
-             value={value} onChange={event => onChange(field, event.target.value)} />
-
-      {help && <p className="help-block">{help}</p>}
-
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
+    <div className="mb-3">
+      <label className="form-label" htmlFor={id}>{label}</label>
+      <input
+        type="text" id={id} className={className} disabled={element.read_only}
+        value={value} onChange={event => onChange(field, event.target.value)} />
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 Text.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 }
 
 export default Text
diff --git a/rdmo/management/assets/js/components/edit/common/Textarea.js b/rdmo/management/assets/js/components/edit/common/Textarea.js
index b6530f2c74..9fa3f97ebe 100644
--- a/rdmo/management/assets/js/components/edit/common/Textarea.js
+++ b/rdmo/management/assets/js/components/edit/common/Textarea.js
@@ -1,45 +1,43 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
-import get from 'lodash/get'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
+
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
+
+const Textarea = ({ element, field, rows, onChange }) => {
+  const { meta } = useSelector((state) => state.config)
 
-const Textarea = ({ config, element, field, rows, onChange }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
+  const className = classNames('form-control', {
+    'is-invalid': !isEmpty(errors)
   })
 
   const value = isNil(element[field]) ? '' : element[field]
 
   return (
-    <div className={className}>
-      <label className="control-label" htmlFor={id}>{label}</label>
-
-      <textarea className="form-control" id={id} rows={rows} type="text" disabled={element.read_only}
-                value={value} onChange={event => onChange(field, event.target.value)}  />
-
-      {help && <p className="help-block">{help}</p>}
-
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
+    <div className="mb-3">
+      <label className="form-label" htmlFor={id}>{label}</label>
+      <textarea
+        id={id} className={className} rows={rows} disabled={element.read_only}
+        value={value} onChange={event => onChange(field, event.target.value)}  />
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 Textarea.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
   rows: PropTypes.number,
diff --git a/rdmo/management/assets/js/components/edit/common/UriPrefix.js b/rdmo/management/assets/js/components/edit/common/UriPrefix.js
index 863de34057..c0945adc8d 100644
--- a/rdmo/management/assets/js/components/edit/common/UriPrefix.js
+++ b/rdmo/management/assets/js/components/edit/common/UriPrefix.js
@@ -1,55 +1,54 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import classNames from 'classnames'
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
-import get from 'lodash/get'
 
-import { getId, getLabel, getHelp } from 'rdmo/management/assets/js/utils/forms'
+import { getHelp, getId, getLabel } from 'rdmo/management/assets/js/utils/forms'
+
+import ErrorList from './ErrorList'
+import HelpText from './HelpText'
 
-const UriPrefix = ({ config, element, field, onChange }) => {
-  const id = getId(element, field),
-        label = getLabel(config, element, field),
-        help = getHelp(config, element, field),
-        warnings = get(element, ['warnings', field]),
-        errors = get(element, ['errors', field])
+const UriPrefix = ({ element, field, onChange }) => {
+  const { meta, settings } = useSelector((state) => state.config)
 
-  const className = classNames({
-    'form-group': true,
-    'has-warning': !isEmpty(warnings),
-    'has-error': !isEmpty(errors)
+  const id = getId(element, field)
+  const label = getLabel(element, field, meta)
+  const help = getHelp(element, field, meta)
+  const errors = get(element, ['errors', field])
+
+  const className = classNames('form-control', {
+    'is-invalid': !isEmpty(errors)
   })
 
   const value = isNil(element[field]) ? '' : element[field]
 
   return (
-    <div className={className}>
-      <label className="control-label" htmlFor={id}>{label}</label>
+    <div className="mb-3">
+      <label className="form-label" htmlFor={id}>{label}</label>
 
       <div className="input-group">
-        <input className="form-control" id={id} type="text" disabled={element.read_only}
-               value={value} onChange={event => onChange(field, event.target.value)} />
-
-        <span className="input-group-btn">
-          <button type="button" className="btn btn-default" disabled={element.read_only}
-            title={gettext('Insert default URI Prefix')} aria-label={gettext('Insert default URI Prefix')}
-            onClick={() => onChange(field, config.settings.default_uri_prefix)}>
-            <span className="fa fa-magic"></span>
-          </button>
-        </span>
+        <input
+          type="text" id={id} className={className} disabled={element.read_only}
+          value={value} onChange={event => onChange(field, event.target.value)} />
+
+        <button
+          type="button" className="btn btn-light border" disabled={element.read_only}
+          title={gettext('Insert default URI Prefix')} aria-label={gettext('Insert default URI Prefix')}
+          onClick={() => onChange(field, settings.default_uri_prefix)}>
+          <span className="bi bi-magic"></span>
+        </button>
       </div>
 
-      {help && <p className="help-block">{help}</p>}
-
-      {errors && <ul className="help-block list-unstyled">
-        {errors.map((error, index) => <li key={index}>{error}</li>)}
-      </ul>}
+      <ErrorList errors={errors} />
+      <HelpText help={help} />
     </div>
   )
 }
 
 UriPrefix.propTypes = {
-  config: PropTypes.object,
   element: PropTypes.object,
   field: PropTypes.string,
   onChange: PropTypes.func
diff --git a/rdmo/management/assets/js/components/element/Attribute.js b/rdmo/management/assets/js/components/element/Attribute.js
index 2cb4d87668..73cba75961 100644
--- a/rdmo/management/assets/js/components/element/Attribute.js
+++ b/rdmo/management/assets/js/components/element/Attribute.js
@@ -1,15 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
+import { createElement, fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AddLink, LockedLink, NestedLink, ExportLink, CodeLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
+import { AddLink, CodeLink, CopyLink, EditLink, ExportLink, LockedLink, NestedLink } from '../common/Links'
 
-const Attribute = ({ config, attribute, elementActions, display='list', indent=0,
-                     filter=null, filterEditors=false }) => {
+const Attribute = ({ attribute, display = 'list', indent = 0, filter = null, filterEditors = false }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, attribute)
 
@@ -18,34 +22,38 @@ const Attribute = ({ config, attribute, elementActions, display='list', indent=0
   const nestedUrl = buildPath('attributes', attribute.id, 'nested')
   const exportUrl = buildApiPath('domain', 'attributes', attribute.id, 'export')
 
-  const fetchEdit = () => elementActions.fetchElement('attributes', attribute.id)
-  const fetchCopy = () => elementActions.fetchElement('attributes', attribute.id, 'copy')
-  const fetchNested = () => elementActions.fetchElement('attributes', attribute.id, 'nested')
-  const toggleLocked = () => elementActions.storeElement('attributes', {...attribute, locked: !attribute.locked })
+  const fetchEdit = () => dispatch(fetchElement('attributes', attribute.id))
+  const fetchCopy = () => dispatch(fetchElement('attributes', attribute.id, 'copy'))
+  const fetchNested = () => dispatch(fetchElement('attributes', attribute.id, 'nested'))
+  const toggleLocked = () => dispatch(storeElement('attributes', {...attribute, locked: !attribute.locked }))
 
-  const createAttribute = () => elementActions.createElement('attributes', { attribute })
+  const createAttribute = () => dispatch(createElement('attributes', { attribute }))
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This attribute is read only')} show={attribute.read_only} />
-        <NestedLink title={gettext('View attribute nested')} href={nestedUrl} onClick={fetchNested}
-                    show={!attribute.is_leaf_node} />
-        <EditLink title={gettext('Edit attribute')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy attribute')} href={copyUrl} onClick={fetchCopy} />
-        <AddLink title={gettext('Add attribute')} onClick={createAttribute} disabled={attribute.read_only} />
-        <LockedLink title={attribute.locked ? gettext('Unlock attribute') : gettext('Lock attribute')}
-                    locked={attribute.locked} onClick={toggleLocked} disabled={attribute.read_only} />
-        <ExportLink title={gettext('Export attribute')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} csv={true} />
-      </div>
-      <div>
-        <p>
-          <strong>{gettext('Attribute')}{': '}</strong>
-          <CodeLink className="code-domain" uri={attribute.uri} href={editUrl} onClick={() => fetchEdit()} />
-        </p>
-        <ElementErrors element={attribute} />
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Attribute')}{':'}</strong>
+        <CodeLink
+          className="flex-grow-1" type="domain" uri={attribute.uri} href={editUrl}
+          onClick={() => fetchEdit()} />
+
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This attribute is read only')} show={attribute.read_only} />
+          <NestedLink
+            title={gettext('View attribute nested')} href={nestedUrl} onClick={fetchNested}
+            show={!attribute.is_leaf_node} />
+          <EditLink title={gettext('Edit attribute')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy attribute')} href={copyUrl} onClick={fetchCopy} />
+          <AddLink title={gettext('Add attribute')} onClick={createAttribute} disabled={attribute.read_only} />
+          <LockedLink
+            title={attribute.locked ? gettext('Unlock attribute') : gettext('Lock attribute')}
+            locked={attribute.locked} onClick={toggleLocked} disabled={attribute.read_only} />
+          <ExportLink
+            title={gettext('Export attribute')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} csv={true} />
+        </div>
       </div>
+      <ElementErrors element={attribute} />
     </div>
   )
 
@@ -53,23 +61,22 @@ const Attribute = ({ config, attribute, elementActions, display='list', indent=0
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'nested':
       return (
         <>
           {
-            showElement && <div className="panel panel-default" style={{ marginLeft: 30 * indent }}>
-              <div className="panel-body">
-                { elementNode }
+            <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
+              <div className="card-body">
+                {elementNode}
               </div>
             </div>
           }
           {
             attribute.elements.map((attribute, index) => (
-              <Attribute key={index} config={config} attribute={attribute} elementActions={elementActions}
-                         display="nested" filter={filter} indent={indent + 1} />
+              <Attribute key={index} attribute={attribute} display="nested" filter={filter} indent={indent + 1} />
             ))
           }
         </>
@@ -80,9 +87,7 @@ const Attribute = ({ config, attribute, elementActions, display='list', indent=0
 }
 
 Attribute.propTypes = {
-  config: PropTypes.object.isRequired,
   attribute: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
diff --git a/rdmo/management/assets/js/components/element/Catalog.js b/rdmo/management/assets/js/components/element/Catalog.js
index 8c3d0a8d16..d7b8edaaa5 100644
--- a/rdmo/management/assets/js/components/element/Catalog.js
+++ b/rdmo/management/assets/js/components/element/Catalog.js
@@ -1,19 +1,31 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import get from 'lodash/get'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 import { siteId } from 'rdmo/core/assets/js/utils/meta'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
+import { BackButton } from '../common/Buttons'
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AddLink, AvailableLink, ToggleCurrentSiteLink, LockedLink, NestedLink,
-         ExportLink, CodeLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
+import {
+  AddLink, AvailableLink, CodeLink, CopyLink, EditLink, ExportLink, LockedLink, NestedLink, ToggleCurrentSiteLink
+} from '../common/Links'
+
+const Catalog = ({
+  catalog, display = 'list', filter = false, filterSites = false, filterEditors = false,
+  backButton = false
+}) => {
+  const dispatch = useDispatch()
 
-const Catalog = ({ config, catalog, elementActions, display='list',
-                   filter=false, filterSites=false, filterEditors=false }) => {
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, filterSites, filterEditors, catalog)
 
@@ -22,48 +34,58 @@ const Catalog = ({ config, catalog, elementActions, display='list',
   const nestedUrl = buildPath('catalogs', catalog.id, 'nested')
   const exportUrl = buildApiPath('questions', 'catalogs', catalog.id, 'export')
 
-  const fetchEdit = () => elementActions.fetchElement('catalogs', catalog.id)
-  const fetchCopy = () => elementActions.fetchElement('catalogs', catalog.id, 'copy')
-  const fetchNested = () => elementActions.fetchElement('catalogs', catalog.id, 'nested')
+  const fetchEdit = () => dispatch(fetchElement('catalogs', catalog.id))
+  const fetchCopy = () => dispatch(fetchElement('catalogs', catalog.id, 'copy'))
+  const fetchNested = () => dispatch(fetchElement('catalogs', catalog.id, 'nested'))
+
+  const toggleAvailable = () => dispatch(storeElement('catalogs', {...catalog, available: !catalog.available }))
+  const toggleLocked = () => dispatch(storeElement('catalogs', {...catalog, locked: !catalog.locked }))
 
-  const toggleAvailable = () => elementActions.storeElement('catalogs', {...catalog, available: !catalog.available })
-  const toggleLocked = () => elementActions.storeElement('catalogs', {...catalog, locked: !catalog.locked })
+  const toggleCurrentSite = () => dispatch(storeElement('catalogs', catalog, 'toggle-site'))
 
-  const toggleCurrentSite = () => elementActions.storeElement('catalogs', catalog, 'toggle-site')
+  const createSection = () => dispatch(createElement('sections', { catalog }))
 
-  const createSection = () => elementActions.createElement('sections', { catalog })
+  const displayUriCatalogs = isTruthy(get(config, 'display.uri.catalogs', true))
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This catalog is read only')} show={catalog.read_only} />
-        <NestedLink title={gettext('View catalog nested')} href={nestedUrl} onClick={fetchNested} />
-        <EditLink title={gettext('Edit catalog')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy catalog')} href={copyUrl} onClick={fetchCopy} />
-        <AddLink title={gettext('Add section')} onClick={createSection} disabled={catalog.read_only} />
-        <AvailableLink title={catalog.available ? gettext('Make catalog unavailable')
-                                                : gettext('Make catalog available')}
-                       available={catalog.available} locked={catalog.locked} onClick={toggleAvailable}
-                       disabled={catalog.read_only} />
-        <ToggleCurrentSiteLink hasCurrentSite={config.settings.multisite ? catalog.sites.includes(siteId) : true}
-                       onClick={toggleCurrentSite}
-                       show={config.settings.multisite}/>
-        <LockedLink title={catalog.locked ? gettext('Unlock catalog') : gettext('Lock catalog')}
-                    locked={catalog.locked} onClick={toggleLocked} disabled={catalog.read_only} />
-        <ExportLink title={gettext('Export catalog')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} full={true} />
-      </div>
-      <div>
-        <p>
-          <strong>{gettext('Catalog')}{': '}</strong>
-          <span dangerouslySetInnerHTML={{ __html: catalog.title }}></span>
-        </p>
-        {
-          get(config, 'display.uri.catalogs', true) &&
-          <CodeLink className="code-questions" uri={catalog.uri} href={editUrl} onClick={() => fetchEdit()} />
-        }
-        <ElementErrors element={catalog} />
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Catalog')}{':'}</strong>
+        <div className="flex-grow-1">
+          <Html html={catalog.title} />
+        </div>
+
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This catalog is read only')} show={catalog.read_only} />
+          <NestedLink title={gettext('View catalog nested')} href={nestedUrl} onClick={fetchNested} />
+          <EditLink title={gettext('Edit catalog')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy catalog')} href={copyUrl} onClick={fetchCopy} />
+          <AddLink title={gettext('Add section')} onClick={createSection} disabled={catalog.read_only} />
+          <AvailableLink
+            title={
+              catalog.available ? gettext('Make catalog unavailable') : gettext('Make catalog available')
+            }
+            available={catalog.available} locked={catalog.locked} onClick={toggleAvailable}
+            disabled={catalog.read_only} />
+          <ToggleCurrentSiteLink
+            hasCurrentSite={config.settings.multisite ? catalog.sites.includes(siteId) : true}
+            onClick={toggleCurrentSite}
+            show={config.settings.multisite}/>
+          <LockedLink
+            title={catalog.locked ? gettext('Unlock catalog') : gettext('Lock catalog')}
+            locked={catalog.locked} onClick={toggleLocked} disabled={catalog.read_only} />
+          <ExportLink
+            title={gettext('Export catalog')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} full={true} />
+        </div>
+
+        {backButton && <BackButton />}
       </div>
+      {
+        displayUriCatalogs &&
+        <CodeLink type="questions" uri={catalog.uri} href={editUrl} onClick={() => fetchEdit()} />
+      }
+      <ElementErrors element={catalog} />
     </div>
   )
 
@@ -71,7 +93,7 @@ const Catalog = ({ config, catalog, elementActions, display='list',
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'plain':
@@ -80,13 +102,12 @@ const Catalog = ({ config, catalog, elementActions, display='list',
 }
 
 Catalog.propTypes = {
-  config: PropTypes.object.isRequired,
   catalog: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   filter: PropTypes.string,
   filterSites: PropTypes.bool,
-  filterEditors: PropTypes.bool
+  filterEditors: PropTypes.bool,
+  backButton: PropTypes.bool
 }
 
 export default Catalog
diff --git a/rdmo/management/assets/js/components/element/Condition.js b/rdmo/management/assets/js/components/element/Condition.js
index 8f3fdbe20a..c3a7845f73 100644
--- a/rdmo/management/assets/js/components/element/Condition.js
+++ b/rdmo/management/assets/js/components/element/Condition.js
@@ -1,14 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
+import { fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, LockedLink, ExportLink, CodeLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
+import { CodeLink, CopyLink, EditLink, ExportLink, LockedLink } from '../common/Links'
 
-const Condition = ({ config, condition, elementActions, filter=false, filterEditors=false }) => {
+const Condition = ({ condition, filter = false, filterEditors = false }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, condition)
 
@@ -16,38 +21,39 @@ const Condition = ({ config, condition, elementActions, filter=false, filterEdit
   const copyUrl = buildPath('conditions', condition.id, 'copy')
   const exportUrl = buildApiPath('conditions', 'conditions', condition.id, 'export')
 
-  const fetchEdit = () => elementActions.fetchElement('conditions', condition.id)
-  const fetchCopy = () => elementActions.fetchElement('conditions', condition.id, 'copy')
-  const toggleLocked = () => elementActions.storeElement('conditions', {...condition, locked: !condition.locked })
+  const fetchEdit = () => dispatch(fetchElement('conditions', condition.id))
+  const fetchCopy = () => dispatch(fetchElement('conditions', condition.id, 'copy'))
+  const toggleLocked = () => dispatch(storeElement('conditions', {...condition, locked: !condition.locked }))
 
   return showElement && (
     <li className="list-group-item">
-      <div className="element">
-        <div className="pull-right">
-          <ReadOnlyIcon title={gettext('This condition is read only')} show={condition.read_only} />
-          <EditLink title={gettext('Edit condition')} href={editUrl} onClick={fetchEdit} />
-          <CopyLink title={gettext('Copy condition')} href={copyUrl} onClick={fetchCopy} />
-          <LockedLink title={condition.locked ? gettext('Unlock condition') : gettext('Lock condition')}
-                      locked={condition.locked} onClick={toggleLocked} disabled={condition.read_only} />
-          <ExportLink title={gettext('Export condition')} exportUrl={exportUrl}
-                      exportFormats={config.settings.export_formats} full={true} />
-        </div>
-        <div>
-          <p>
-            <strong>{gettext('Condition')}{': '}</strong>
-            <CodeLink className="code-conditions" uri={condition.uri} href={editUrl} onClick={() => fetchEdit()} />
-          </p>
-          <ElementErrors element={condition} />
+      <div className="d-flex flex-column gap-2">
+        <div className="d-flex align-items-center gap-2">
+          <strong>{gettext('Condition')}{':'}</strong>
+          <CodeLink
+            className="flex-grow-1" type="conditions" uri={condition.uri} href={editUrl}
+            onClick={() => fetchEdit()} />
+
+          <div className="d-flex align-items-center gap-1">
+            <ReadOnlyIcon title={gettext('This condition is read only')} show={condition.read_only} />
+            <EditLink title={gettext('Edit condition')} href={editUrl} onClick={fetchEdit} />
+            <CopyLink title={gettext('Copy condition')} href={copyUrl} onClick={fetchCopy} />
+            <LockedLink
+              title={condition.locked ? gettext('Unlock condition') : gettext('Lock condition')}
+              locked={condition.locked} onClick={toggleLocked} disabled={condition.read_only} />
+            <ExportLink
+              title={gettext('Export condition')} exportUrl={exportUrl}
+              exportFormats={config.settings.export_formats} full={true} />
+          </div>
         </div>
+        <ElementErrors element={condition} />
       </div>
     </li>
   )
 }
 
 Condition.propTypes = {
-  config: PropTypes.object.isRequired,
   condition: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   filter: PropTypes.string,
   filterEditors: PropTypes.bool
 }
diff --git a/rdmo/management/assets/js/components/element/Option.js b/rdmo/management/assets/js/components/element/Option.js
index abc13c3ac8..7a34450db1 100644
--- a/rdmo/management/assets/js/components/element/Option.js
+++ b/rdmo/management/assets/js/components/element/Option.js
@@ -1,15 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import get from 'lodash/get'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, LockedLink, ExportLink, CodeLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
+import { CodeLink, CopyLink, EditLink, ExportLink, LockedLink } from '../common/Links'
 
-const Option = ({ config, option, elementActions, display='list', indent=0, filter=false, filterEditors=false }) => {
+const Option = ({ option, display = 'list', indent = 0, filter = false, filterEditors = false }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, option)
 
@@ -17,32 +26,37 @@ const Option = ({ config, option, elementActions, display='list', indent=0, filt
   const copyUrl = buildPath('options', option.id, 'copy')
   const exportUrl = buildApiPath('options', 'options', option.id, 'export')
 
-  const fetchEdit = () => elementActions.fetchElement('options', option.id)
-  const fetchCopy = () => elementActions.fetchElement('options', option.id, 'copy')
-  const toggleLocked = () => elementActions.storeElement('options', {...option, locked: !option.locked })
+  const fetchEdit = () => dispatch(fetchElement('options', option.id))
+  const fetchCopy = () => dispatch(fetchElement('options', option.id, 'copy'))
+  const toggleLocked = () => dispatch(storeElement('options', {...option, locked: !option.locked }))
+
+  const displayUriOptions = isTruthy(get(config, 'display.uri.options', true))
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This option is read only')} show={option.read_only} />
-        <EditLink title={gettext('Edit option')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy option')} href={copyUrl} onClick={fetchCopy} />
-        <LockedLink title={option.locked ? gettext('Unlock option') : gettext('Lock option')}
-                    locked={option.locked} onClick={toggleLocked} disabled={option.read_only} />
-        <ExportLink title={gettext('Export option')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} />
-      </div>
-      <div>
-        <p>
-          <strong>{gettext('Option')}{': '}</strong>
-          <span dangerouslySetInnerHTML={{ __html: option.text }}></span>
-        </p>
-        {
-          get(config, 'display.uri.options', true) &&
-          <CodeLink className="code-options" uri={option.uri} href={editUrl} onClick={() => fetchEdit()} />
-        }
-        <ElementErrors element={option} />
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Option')}{':'}</strong>
+        <div className="flex-grow-1">
+          <Html html={option.text} />
+        </div>
+
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This option is read only')} show={option.read_only} />
+          <EditLink title={gettext('Edit option')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy option')} href={copyUrl} onClick={fetchCopy} />
+          <LockedLink
+            title={option.locked ? gettext('Unlock option') : gettext('Lock option')}
+            locked={option.locked} onClick={toggleLocked} disabled={option.read_only} />
+          <ExportLink
+            title={gettext('Export option')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} />
+        </div>
       </div>
+      {
+        displayUriOptions &&
+        <CodeLink type="options" uri={option.uri} href={editUrl} onClick={() => fetchEdit()} />
+      }
+      <ElementErrors element={option} />
     </div>
   )
 
@@ -50,14 +64,14 @@ const Option = ({ config, option, elementActions, display='list', indent=0, filt
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'nested':
       return showElement && (
-        <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
-          <div className="panel-body">
-            { elementNode }
+        <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
+          <div className="card-body">
+            {elementNode}
           </div>
         </div>
       )
@@ -65,9 +79,7 @@ const Option = ({ config, option, elementActions, display='list', indent=0, filt
 }
 
 Option.propTypes = {
-  config: PropTypes.object.isRequired,
   option: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
diff --git a/rdmo/management/assets/js/components/element/OptionSet.js b/rdmo/management/assets/js/components/element/OptionSet.js
index 5cbcaea51a..bbc83d7406 100644
--- a/rdmo/management/assets/js/components/element/OptionSet.js
+++ b/rdmo/management/assets/js/components/element/OptionSet.js
@@ -1,16 +1,22 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import get from 'lodash/get'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement, fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AddLink, LockedLink, NestedLink,
-         ExportLink, CodeLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
+import { AddLink, CodeLink, CopyLink, EditLink,          ExportLink, LockedLink, NestedLink } from '../common/Links'
+
+const OptionSet = ({ optionset, display = 'list', filter = false, filterEditors = false }) => {
+  const dispatch = useDispatch()
 
-const OptionSet = ({ config, optionset, elementActions, display='list', filter=false, filterEditors=false }) => {
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, optionset)
 
@@ -21,46 +27,50 @@ const OptionSet = ({ config, optionset, elementActions, display='list', filter=f
 
   const getConditionUrl = (index) => buildPath(config.apiUrl, 'conditions', 'conditions', optionset.conditions[index])
 
-  const fetchEdit = () => elementActions.fetchElement('optionsets', optionset.id)
-  const fetchCopy = () => elementActions.fetchElement('optionsets', optionset.id, 'copy')
-  const fetchNested = () => elementActions.fetchElement('optionsets', optionset.id, 'nested')
-  const toggleLocked = () => elementActions.storeElement('optionsets', {...optionset, locked: !optionset.locked })
+  const fetchEdit = () => dispatch(fetchElement('optionsets', optionset.id))
+  const fetchCopy = () => dispatch(fetchElement('optionsets', optionset.id, 'copy'))
+  const fetchNested = () => dispatch(fetchElement('optionsets', optionset.id, 'nested'))
+  const toggleLocked = () => dispatch(storeElement('optionsets', {...optionset, locked: !optionset.locked }))
+
+  const createOption = () => dispatch(createElement('options', { optionset }))
+  const fetchCondition = (index) => dispatch(fetchElement('conditions', optionset.conditions[index]))
 
-  const createOption = () => elementActions.createElement('options', { optionset })
-  const fetchCondition = (index) => elementActions.fetchElement('conditions', optionset.conditions[index])
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This option set is read only')} show={optionset.read_only} />
-        <NestedLink title={gettext('View option set nested')} href={nestedUrl} onClick={fetchNested} />
-        <EditLink title={gettext('Edit option set')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy option set')} href={copyUrl} onClick={fetchCopy} />
-        <AddLink title={gettext('Add option')} onClick={createOption} disabled={optionset.read_only} />
-        <LockedLink title={optionset.locked ? gettext('Unlock option set') : gettext('Lock option set')}
-                    locked={optionset.locked} onClick={toggleLocked} disabled={optionset.read_only} />
-        <ExportLink title={gettext('Export option set')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} full={true} />
-      </div>
-      <div>
-        <p>
-          <strong>{gettext('Option set')}{': '}</strong>
-          <CodeLink className="code-options" uri={optionset.uri} href={editUrl} onClick={() => fetchEdit()} />
-        </p>
-        {
-          get(config, 'display.uri.conditions', true) && optionset.condition_uris.map((uri, index) => (
-            <p key={index}>
-              <CodeLink
-                className="code-conditions"
-                uri={uri}
-                href={getConditionUrl(index)}
-                onClick={() => fetchCondition(index)}
-              />
-            </p>
-          ))
-        }
-        <ElementErrors element={optionset} />
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Option set')}{':'}</strong>
+        <CodeLink
+          className="flex-grow-1" type="options" uri={optionset.uri} href={editUrl}
+          onClick={() => fetchEdit()} />
+
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This option set is read only')} show={optionset.read_only} />
+          <NestedLink title={gettext('View option set nested')} href={nestedUrl} onClick={fetchNested} />
+          <EditLink title={gettext('Edit option set')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy option set')} href={copyUrl} onClick={fetchCopy} />
+          <AddLink title={gettext('Add option')} onClick={createOption} disabled={optionset.read_only} />
+          <LockedLink
+            title={optionset.locked ? gettext('Unlock option set') : gettext('Lock option set')}
+            locked={optionset.locked} onClick={toggleLocked} disabled={optionset.read_only} />
+          <ExportLink
+            title={gettext('Export option set')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} full={true} />
+        </div>
       </div>
+      {
+        displayUriConditions && optionset.condition_uris.map((uri, index) => (
+          <CodeLink
+            key={index}
+            type="conditions"
+            uri={uri}
+            href={getConditionUrl(index)}
+            onClick={() => fetchCondition(index)}
+          />
+        ))
+      }
+      <ElementErrors element={optionset} />
     </div>
   )
 
@@ -68,7 +78,7 @@ const OptionSet = ({ config, optionset, elementActions, display='list', filter=f
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'plain':
@@ -77,9 +87,7 @@ const OptionSet = ({ config, optionset, elementActions, display='list', filter=f
 }
 
 OptionSet.propTypes = {
-  config: PropTypes.object.isRequired,
   optionset: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   filter: PropTypes.string,
   filterEditors: PropTypes.bool
diff --git a/rdmo/management/assets/js/components/element/Page.js b/rdmo/management/assets/js/components/element/Page.js
index f443331fd2..a3a2b0c45e 100644
--- a/rdmo/management/assets/js/components/element/Page.js
+++ b/rdmo/management/assets/js/components/element/Page.js
@@ -1,23 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import get from 'lodash/get'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, fetchElement, storeElement, toggleElements } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
-import QuestionSet from './QuestionSet'
-import Question from './Question'
+import { Drag, Drop } from '../common/DragAndDrop'
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AddLink, LockedLink, NestedLink,
-         ExportLink, CodeLink, ShowElementsLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
-import { Drag, Drop } from '../common/DragAndDrop'
+import {
+  AddLink, CodeLink, CopyLink, EditLink, ExportLink, LockedLink, NestedLink,
+  ShowElementsLink
+} from '../common/Links'
 
-const Page = ({ config, page, configActions, elementActions, display='list', indent=0,
-                filter=false, filterEditors=false, order }) => {
+import Question from './Question'
+import QuestionSet from './QuestionSet'
+
+const Page = ({ page, display = 'list', indent = 0, filter = false, filterEditors = false, order }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, page)
-  const showElements = get(config, `display.elements.pages.${page.id}`, true)
+  const showElements = isTruthy(get(config, `display.elements.pages.${page.id}`, true))
 
   const editUrl = buildPath('pages', page.id)
   const copyUrl = buildPath('pages', page.id, 'copy')
@@ -27,74 +38,86 @@ const Page = ({ config, page, configActions, elementActions, display='list', ind
 
   const getConditionUrl = (index) => buildPath('conditions', page.conditions[index])
 
-  const fetchEdit = () => elementActions.fetchElement('pages', page.id)
-  const fetchCopy = () => elementActions.fetchElement('pages', page.id, 'copy')
-  const fetchNested = () => elementActions.fetchElement('pages', page.id, 'nested')
-  const toggleLocked = () => elementActions.storeElement('pages', {...page, locked: !page.locked })
-  const toggleElements = () => elementActions.toggleElements(page)
+  const fetchEdit = () => dispatch(fetchElement('pages', page.id))
+  const fetchCopy = () => dispatch(fetchElement('pages', page.id, 'copy'))
+  const fetchNested = () => dispatch(fetchElement('pages', page.id, 'nested'))
+  const toggleLocked = () => dispatch(storeElement('pages', { ...page, locked: !page.locked }))
+  const toggleShowElements = () => dispatch(toggleElements(page))
 
-  const createQuestionSet = () => elementActions.createElement('questionsets', { page })
-  const createQuestion = () => elementActions.createElement('questions', { page })
+  const createQuestionSet = () => dispatch(createElement('questionsets', { page }))
+  const createQuestion = () => dispatch(createElement('questions', { page }))
 
-  const fetchAttribute = () => elementActions.fetchElement('attributes', page.attribute)
-  const fetchCondition = (index) => elementActions.fetchElement('conditions', page.conditions[index])
+  const fetchAttribute = () => dispatch(fetchElement('attributes', page.attribute))
+  const fetchCondition = (index) => dispatch(fetchElement('conditions', page.conditions[index]))
+
+  const displayUriPages = isTruthy(get(config, 'display.uri.pages', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This page is read only')} show={page.read_only} />
-        <NestedLink title={gettext('View page nested')} href={nestedUrl} onClick={fetchNested} show={display != 'nested'} />
-        <ShowElementsLink showElements={showElements} show={display == 'nested'} onClick={toggleElements} />
-        <EditLink title={gettext('Edit page')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy page')} href={copyUrl} onClick={fetchCopy} />
-        <AddLink title={gettext('Add question')} altTitle={gettext('Add question set')}
-                 onClick={createQuestion} onAltClick={createQuestionSet} disabled={page.read_only} />
-        <LockedLink title={page.locked ? gettext('Unlock page') : gettext('Lock page')}
-                    locked={page.locked} onClick={toggleLocked} disabled={page.read_only} />
-        <ExportLink title={gettext('Export page')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} full={true} />
-        <Drag element={page} show={display == 'nested'} />
-      </div>
-      <div>
-        <p>
-          <strong>{gettext('Page')}{': '}</strong>
-          <span dangerouslySetInnerHTML={{ __html: page.title }}></span>
-        </p>
-        {
-          get(config, 'display.uri.pages', true) && <p>
-            <CodeLink
-              className="code-questions"
-              uri={page.uri}
-              href={editUrl}
-              onClick={() => fetchEdit()}
-              order={order}
-            />
-          </p>
-        }
-        {
-          get(config, 'display.uri.attributes', true) && page.attribute_uri && <p>
-            <CodeLink
-              className="code-domain"
-              uri={page.attribute_uri}
-              href={attributeUrl}
-              onClick={() => fetchAttribute()}
-            />
-          </p>
-        }
-        {
-          get(config, 'display.uri.conditions', true) && page.condition_uris.map((uri, index) => (
-            <p key={index}>
-              <CodeLink
-                className="code-conditions"
-                uri={uri}
-                href={getConditionUrl(index)}
-                onClick={() => fetchCondition(index)}
-              />
-            </p>
-          ))
-        }
-        <ElementErrors element={page} />
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Page')}{':'}</strong>
+        <div className="flex-grow-1">
+          <Html html={page.title} />
+        </div>
+
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This page is read only')} show={page.read_only} />
+          <NestedLink
+            title={gettext('View page nested')}
+            href={nestedUrl}
+            onClick={fetchNested}
+            show={display != 'nested'}
+          />
+          <ShowElementsLink showElements={showElements} show={display == 'nested'} onClick={toggleShowElements} />
+          <EditLink title={gettext('Edit page')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy page')} href={copyUrl} onClick={fetchCopy} />
+          <AddLink
+            title={gettext('Add question')} altTitle={gettext('Add question set')}
+            onClick={createQuestion} onAltClick={createQuestionSet} disabled={page.read_only} />
+          <LockedLink
+            title={page.locked ? gettext('Unlock page') : gettext('Lock page')}
+            locked={page.locked} onClick={toggleLocked} disabled={page.read_only} />
+          <ExportLink
+            title={gettext('Export page')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} full={true} />
+          <Drag element={page} show={display == 'nested'} />
+        </div>
       </div>
+      {
+        displayUriPages && (
+          <CodeLink
+            type="questions"
+            uri={page.uri}
+            href={editUrl}
+            onClick={() => fetchEdit()}
+            order={order}
+          />
+        )
+      }
+      {
+        displayUriAttributes && page.attribute_uri && (
+          <CodeLink
+            type="domain"
+            uri={page.attribute_uri}
+            href={attributeUrl}
+            onClick={() => fetchAttribute()}
+          />
+        )
+      }
+      {
+        displayUriConditions && page.condition_uris.map((uri, index) => (
+          <CodeLink
+            key={index}
+            type="conditions"
+            uri={uri}
+            href={getConditionUrl(index)}
+            onClick={() => fetchCondition(index)}
+          />
+        ))
+      }
+      <ElementErrors element={page} />
     </div>
   )
 
@@ -102,18 +125,18 @@ const Page = ({ config, page, configActions, elementActions, display='list', ind
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'nested':
       return (
-        <>
+        <div className="position-relative">
           {
             showElement && (
-              <Drop element={page} elementActions={elementActions}>
-                <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
-                  <div className="panel-heading">
-                    { elementNode }
+              <Drop element={page}>
+                <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
+                  <div className="card-body">
+                    {elementNode}
                   </div>
                 </div>
               </Drop>
@@ -124,20 +147,24 @@ const Page = ({ config, page, configActions, elementActions, display='list', ind
               if (element.model == 'questions.questionset') {
                 const questionSetInfo = page.questionsets.find(info => info.questionset === element.id)
                 const questionSetOrder = questionSetInfo ? questionSetInfo.order : undefined
-                return <QuestionSet key={index} config={config} questionset={element}
-                                    configActions={configActions} elementActions={elementActions}
-                                    display="nested" filter={filter} indent={indent + 1} order={questionSetOrder} />
+                return (
+                  <QuestionSet
+                    key={index} config={config} questionset={element}
+                    display="nested" filter={filter} indent={indent + 1} order={questionSetOrder} />
+                )
               } else {
                 const questionInfo = page.questions.find(info => info.question === element.id)
                 const questionOrder = questionInfo ? questionInfo.order : undefined
-                return <Question key={index} config={config} question={element}
-                                 configActions={configActions} elementActions={elementActions}
-                                 display="nested" filter={filter} indent={indent + 1} order={questionOrder} />
+                return (
+                  <Question
+                    key={index} config={config} question={element}
+                    display="nested" filter={filter} indent={indent + 1} order={questionOrder} />
+                )
               }
             })
           }
-          <Drop element={page} elementActions={elementActions} indent={indent} mode="after" />
-        </>
+          <Drop element={page} indent={indent} mode="after" />
+        </div>
       )
     case 'plain':
       return elementNode
@@ -145,10 +172,7 @@ const Page = ({ config, page, configActions, elementActions, display='list', ind
 }
 
 Page.propTypes = {
-  config: PropTypes.object.isRequired,
   page: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
diff --git a/rdmo/management/assets/js/components/element/Question.js b/rdmo/management/assets/js/components/element/Question.js
index fd75d74474..7de0eeba08 100644
--- a/rdmo/management/assets/js/components/element/Question.js
+++ b/rdmo/management/assets/js/components/element/Question.js
@@ -1,17 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import { get, isEmpty } from 'lodash'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
+import { Drag, Drop } from '../common/DragAndDrop'
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, LockedLink, ExportLink, CodeLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
-import { Drag, Drop } from '../common/DragAndDrop'
+import { CodeLink, CopyLink, EditLink, ExportLink, LockedLink } from '../common/Links'
+
+const Question = ({ question, display = 'list', indent = 0, filter = false, filterEditors = false, order }) => {
+  const dispatch = useDispatch()
 
-const Question = ({ config, question, elementActions, display='list', indent=0,
-                    filter=false, filterEditors=false, order }) => {
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, question)
 
@@ -23,85 +31,100 @@ const Question = ({ config, question, elementActions, display='list', indent=0,
   const getConditionUrl = (index) => buildPath('conditions', question.conditions[index])
   const getOptionSetUrl = (index) => buildPath('optionsets', question.optionsets[index])
 
-  const fetchEdit = () => elementActions.fetchElement('questions', question.id)
-  const fetchCopy = () => elementActions.fetchElement('questions', question.id, 'copy')
-  const toggleLocked = () => elementActions.storeElement('questions', {...question, locked: !question.locked })
+  const fetchEdit = () => dispatch(fetchElement('questions', question.id))
+  const fetchCopy = () => dispatch(fetchElement('questions', question.id, 'copy'))
+  const toggleLocked = () => dispatch(storeElement('questions', {...question, locked: !question.locked }))
+
+  const fetchAttribute = () => dispatch(fetchElement('attributes', question.attribute))
+  const fetchCondition = (index) => dispatch(fetchElement('conditions', question.conditions[index]))
+  const fetchOptionSet = (index) => dispatch(fetchElement('optionsets', question.optionsets[index]))
+
+  const displayUriQuestions = isTruthy(get(config, 'display.uri.questions', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
+  const displayUriOptionSets = isTruthy(get(config, 'display.uri.optionsets', true))
 
-  const fetchAttribute = () => elementActions.fetchElement('attributes', question.attribute)
-  const fetchCondition = (index) => elementActions.fetchElement('conditions', question.conditions[index])
-  const fetchOptionSet = (index) => elementActions.fetchElement('optionsets', question.optionsets[index])
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This question is read only')} show={question.read_only} />
-        <EditLink title={gettext('Edit question')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy question')} href={copyUrl} onClick={fetchCopy} />
-        <LockedLink title={question.locked ? gettext('Unlock question') : gettext('Lock question')}
-                    locked={question.locked} onClick={toggleLocked} disabled={question.read_only} />
-        <ExportLink title={gettext('Export question')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} full={true} />
-        <Drag element={question} show={display == 'nested'} />
-      </div>
-      <div>
-        <p>
-          <strong>{gettext('Question')}{': '}</strong>
-          <span dangerouslySetInnerHTML={{ __html: question.text }}></span>
-        </p>
-        {
-          question.is_optional && <p>
-            <code className="code-optional" title={gettext('This is an optional question.')}>{gettext('optional')}</code>
-          </p>
-        }
-        {
-          (question.default_text || question.default_option || question.default_external_id) && <p>
-            <code className="code-default" title={gettext('This question has a default answer.')}>{gettext('default')}</code>
-          </p>
-        }
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Question')}{':'}</strong>
+        <div className="flex-grow-1">
+          <Html html={question.text} />
+        </div>
         {
-          get(config, 'display.uri.questions', true) && <p>
-            <CodeLink
-              className="code-questions"
-              uri={question.uri}
-              href={editUrl}
-              onClick={() => fetchEdit()}
-              order={order} />
-          </p>
-        }
-        {
-          get(config, 'display.uri.attributes', true) && question.attribute_uri && <p>
-            <CodeLink
-              className="code-domain"
-              uri={question.attribute_uri}
-              href={attributeUrl}
-              onClick={() => fetchAttribute()} />
-          </p>
-        }
-        {
-          get(config, 'display.uri.conditions', true) && question.condition_uris.map((uri, index) => (
-            <p key={index}>
-              <CodeLink
-                className="code-conditions"
-                uri={uri}
-                href={getConditionUrl(index)}
-                onClick={() => fetchCondition(index)} />
-            </p>
-          ))
+          question.is_optional && (
+            <div className="me-1">
+              <code className="code-optional" title={gettext('This is an optional question.')}>
+                {gettext('optional')}
+              </code>
+            </div>
+          )
         }
         {
-          get(config, 'display.uri.optionsets', true) && question.optionset_uris.map((uri, index) => (
-            <p key={index}>
-              <CodeLink
-                className="code-options"
-                uri={uri}
-                href={getOptionSetUrl(index)}
-                onClick={() => fetchOptionSet(index)} />
-            </p>
-          ))
+          (question.default_text || question.default_option || question.default_external_id) && (
+            <div className="me-1">
+              <code className="code-default" title={gettext('This question has a default answer.')}>
+                {gettext('default')}
+              </code>
+            </div>
+          )
         }
-        {
-          question.warning && (
-            <ul className="list-unstyled mb-0">
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This question is read only')} show={question.read_only} />
+          <EditLink title={gettext('Edit question')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy question')} href={copyUrl} onClick={fetchCopy} />
+          <LockedLink
+            title={question.locked ? gettext('Unlock question') : gettext('Lock question')}
+            locked={question.locked} onClick={toggleLocked} disabled={question.read_only} />
+          <ExportLink
+            title={gettext('Export question')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} full={true} />
+          <Drag element={question} show={display == 'nested'} />
+        </div>
+      </div>
+      {
+        displayUriQuestions && (
+          <CodeLink
+            type="questions"
+            uri={question.uri}
+            href={editUrl}
+            onClick={() => fetchEdit()}
+            order={order} />
+        )
+      }
+      {
+        displayUriAttributes && question.attribute_uri && (
+          <CodeLink
+            type="domain"
+            uri={question.attribute_uri}
+            href={attributeUrl}
+            onClick={() => fetchAttribute()} />
+        )
+      }
+      {
+        displayUriConditions && question.condition_uris.map((uri, index) => (
+          <CodeLink
+            key={index}
+            type="conditions"
+            uri={uri}
+            href={getConditionUrl(index)}
+            onClick={() => fetchCondition(index)} />
+        ))
+      }
+      {
+        displayUriOptionSets && question.optionset_uris.map((uri, index) => (
+          <CodeLink
+            key={index}
+            type="options"
+            uri={uri}
+            href={getOptionSetUrl(index)}
+            onClick={() => fetchOptionSet(index)} />
+        ))
+      }
+      {
+        !isEmpty(question.warning) && (
+          <ul className="list-unstyled mb-0">
             {
               question.warning.no_attribute && (
                 <li className="text-danger">
@@ -123,11 +146,10 @@ const Question = ({ config, question, elementActions, display='list', indent=0,
                 </li>
               )
             }
-            </ul>
-          )
-        }
-        <ElementErrors element={question} />
-      </div>
+          </ul>
+        )
+      }
+      <ElementErrors element={question} />
     </div>
   )
 
@@ -135,32 +157,29 @@ const Question = ({ config, question, elementActions, display='list', indent=0,
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'nested':
       return (
-        <>
+        <div className="position-relative">
           {
             showElement && (
-              <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
-                <div className="panel-body">
-                  { elementNode }
+              <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
+                <div className="card-body">
+                  {elementNode}
                 </div>
               </div>
             )
           }
-          <Drop element={question} elementActions={elementActions} indent={indent} mode="after" />
-        </>
+          <Drop element={question} indent={indent} mode="after" />
+        </div>
       )
   }
 }
 
 Question.propTypes = {
-  config: PropTypes.object.isRequired,
   question: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
diff --git a/rdmo/management/assets/js/components/element/QuestionSet.js b/rdmo/management/assets/js/components/element/QuestionSet.js
index a296ea98af..971baae4a0 100644
--- a/rdmo/management/assets/js/components/element/QuestionSet.js
+++ b/rdmo/management/assets/js/components/element/QuestionSet.js
@@ -1,22 +1,33 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import get from 'lodash/get'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, fetchElement, storeElement, toggleElements } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
-import Question from './Question'
+import { Drag, Drop } from '../common/DragAndDrop'
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AddLink, LockedLink,
-         NestedLink, ExportLink, CodeLink, ShowElementsLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
-import { Drag, Drop } from '../common/DragAndDrop'
+import {
+  AddLink, CodeLink, CopyLink, EditLink, ExportLink, LockedLink,
+  NestedLink, ShowElementsLink
+} from '../common/Links'
 
-const QuestionSet = ({ config, questionset, configActions, elementActions, display='list', indent=0,
-                       filter=false, filterEditors=false, order }) => {
+import Question from './Question'
+
+const QuestionSet = ({ questionset, display = 'list', indent = 0, filter = false, filterEditors = false, order }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, questionset)
-  const showElements = get(config, `display.elements.questionsets.${questionset.id}`, true)
+  const showElements = isTruthy(get(config, `display.elements.questionsets.${questionset.id}`, true))
 
   const editUrl = buildPath('questionsets', questionset.id)
   const copyUrl = buildPath('questionsets', questionset.id, 'copy')
@@ -26,74 +37,90 @@ const QuestionSet = ({ config, questionset, configActions, elementActions, displ
 
   const getConditionUrl = (index) => buildPath('conditions', questionset.conditions[index])
 
-  const fetchEdit = () => elementActions.fetchElement('questionsets', questionset.id)
-  const fetchCopy = () => elementActions.fetchElement('questionsets', questionset.id, 'copy')
-  const fetchNested = () => elementActions.fetchElement('questionsets', questionset.id, 'nested')
-  const toggleLocked = () => elementActions.storeElement('questionsets', {...questionset, locked: !questionset.locked })
-  const toggleElements = () => elementActions.toggleElements(questionset)
+  const fetchEdit = () => dispatch(fetchElement('questionsets', questionset.id))
+  const fetchCopy = () => dispatch(fetchElement('questionsets', questionset.id, 'copy'))
+  const fetchNested = () => dispatch(fetchElement('questionsets', questionset.id, 'nested'))
+  const toggleLocked = () => dispatch(storeElement('questionsets', { ...questionset, locked: !questionset.locked }))
+  const toggleShowElements = () => dispatch(toggleElements(questionset))
+
+  const createQuestionSet = () => dispatch(createElement('questionsets', { questionset }))
+  const createQuestion = () => dispatch(createElement('questions', { questionset }))
 
-  const createQuestionSet = () => elementActions.createElement('questionsets', { questionset })
-  const createQuestion = () => elementActions.createElement('questions', { questionset })
+  const fetchAttribute = () => dispatch(fetchElement('attributes', questionset.attribute))
+  const fetchCondition = (index) => dispatch(fetchElement('conditions', questionset.conditions[index]))
 
-  const fetchAttribute = () => elementActions.fetchElement('attributes', questionset.attribute)
-  const fetchCondition = (index) => elementActions.fetchElement('conditions', questionset.conditions[index])
+  const displayUriQuestionSets = isTruthy(get(config, 'display.uri.questionsets', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This question set is read only')} show={questionset.read_only} />
-        <NestedLink title={gettext('View question set nested')} href={nestedUrl} onClick={fetchNested} show={display != 'nested'} />
-        <ShowElementsLink showElements={showElements} show={display == 'nested'} onClick={toggleElements} />
-        <EditLink title={gettext('Edit question set')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy question set')} href={copyUrl} onClick={fetchCopy} />
-        <AddLink title={gettext('Add question')} altTitle={gettext('Add question set')}
-                 onClick={createQuestion} onAltClick={createQuestionSet} disabled={questionset.read_only} />
-        <LockedLink title={questionset.locked ? gettext('Unlock question set') : gettext('Lock question set')}
-                    locked={questionset.locked} onClick={toggleLocked} disabled={questionset.read_only} />
-        <ExportLink title={gettext('Export question set')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} full={true} />
-        <Drag element={questionset} show={display == 'nested'} />
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Question set')}{':'}</strong>
+        <div className="flex-grow-1">
+          <Html html={questionset.title} />
+        </div>
+
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This question set is read only')} show={questionset.read_only} />
+          <NestedLink
+            title={gettext('View question set nested')}
+            href={nestedUrl}
+            onClick={fetchNested}
+            show={display != 'nested'}
+          />
+          <ShowElementsLink showElements={showElements} show={display == 'nested'} onClick={toggleShowElements} />
+          <EditLink title={gettext('Edit question set')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy question set')} href={copyUrl} onClick={fetchCopy} />
+          <AddLink
+            title={gettext('Add question')} altTitle={gettext('Add question set')}
+            onClick={createQuestion} onAltClick={createQuestionSet} disabled={questionset.read_only} />
+          <LockedLink
+            title={questionset.locked ? gettext('Unlock question set') : gettext('Lock question set')}
+            locked={questionset.locked} onClick={toggleLocked} disabled={questionset.read_only} />
+          <ExportLink
+            title={gettext('Export question set')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} full={true} />
+          <Drag element={questionset} show={display == 'nested'} />
+        </div>
       </div>
-      <div>
-        <p>
-          <strong>{gettext('Question set')}{': '}</strong>
-          <span dangerouslySetInnerHTML={{ __html: questionset.title }}></span>
-        </p>
-        {
-          get(config, 'display.uri.questionsets', true) && <p>
+      {
+        displayUriQuestionSets && (
+          <span>
             <CodeLink
-              className="code-questions"
+              type="questions"
               uri={questionset.uri}
               href={editUrl}
               onClick={() => fetchEdit()}
               order={order}
             />
-          </p>
-        }
-        {
-          get(config, 'display.uri.attributes', true) && questionset.attribute_uri &&<p>
+          </span>
+        )
+      }
+      {
+        displayUriAttributes && questionset.attribute_uri && (
+          <span>
             <CodeLink
-              className="code-domain"
+              type="domain"
               uri={questionset.attribute_uri}
               href={attributeUrl}
               onClick={() => fetchAttribute()}
             />
-          </p>
-        }
-        {
-          get(config, 'display.uri.conditions', true) && questionset.condition_uris.map((uri, index) => (
-            <p key={index}>
-              <CodeLink
-                className="code-conditions"
-                uri={uri}
-                href={getConditionUrl(index)}
-                onClick={() => fetchCondition(index)}
-              />
-            </p>
-          ))
-        }
-        <ElementErrors element={questionset} />
-      </div>
+          </span>
+        )
+      }
+      {
+        displayUriConditions && questionset.condition_uris.map((uri, index) => (
+          <CodeLink
+            key={index}
+            type="conditions"
+            uri={uri}
+            href={getConditionUrl(index)}
+            onClick={() => fetchCondition(index)}
+          />
+        ))
+      }
+      <ElementErrors element={questionset} />
     </div>
   )
 
@@ -101,18 +128,18 @@ const QuestionSet = ({ config, questionset, configActions, elementActions, displ
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'nested':
       return (
-        <>
+        <div className="position-relative">
           {
             showElement && (
-              <Drop element={questionset} elementActions={elementActions}>
-                <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
-                  <div className="panel-heading">
-                    { elementNode }
+              <Drop element={questionset}>
+                <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
+                  <div className="card-body">
+                    {elementNode}
                   </div>
                 </div>
               </Drop>
@@ -123,20 +150,24 @@ const QuestionSet = ({ config, questionset, configActions, elementActions, displ
               if (element.model == 'questions.questionset') {
                 const questionSetInfo = questionset.questionsets.find(info => info.questionset === element.id)
                 const questionSetOrder = questionSetInfo ? questionSetInfo.order : undefined
-                return <QuestionSet key={index} config={config} questionset={element}
-                                    configActions={configActions} elementActions={elementActions}
-                                    display="nested" filter={filter} indent={indent + 1} order={questionSetOrder}  />
+                return (
+                  <QuestionSet
+                    key={index} config={config} questionset={element}
+                    display="nested" filter={filter} indent={indent + 1} order={questionSetOrder} />
+                )
               } else {
                 const questionInfo = questionset.questions.find(info => info.question === element.id)
                 const questionOrder = questionInfo ? questionInfo.order : undefined
-                return <Question key={index} config={config} question={element}
-                                 configActions={configActions} elementActions={elementActions}
-                                 display="nested" filter={filter} indent={indent + 1} order={questionOrder} />
+                return (
+                  <Question
+                    key={index} config={config} question={element}
+                    display="nested" filter={filter} indent={indent + 1} order={questionOrder} />
+                )
               }
             })
           }
-          <Drop element={questionset} elementActions={elementActions} indent={indent} mode="after" />
-        </>
+          <Drop element={questionset} indent={indent} mode="after" />
+        </div>
       )
     case 'plain':
       return elementNode
@@ -144,10 +175,7 @@ const QuestionSet = ({ config, questionset, configActions, elementActions, displ
 }
 
 QuestionSet.propTypes = {
-  config: PropTypes.object.isRequired,
   questionset: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
diff --git a/rdmo/management/assets/js/components/element/Section.js b/rdmo/management/assets/js/components/element/Section.js
index 3949530e39..94d971b6ad 100644
--- a/rdmo/management/assets/js/components/element/Section.js
+++ b/rdmo/management/assets/js/components/element/Section.js
@@ -1,65 +1,87 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { createElement, dropElement, fetchElement, storeElement, toggleElements } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
-import Page from './Page'
+import { Drag, Drop } from '../common/DragAndDrop'
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AddLink, LockedLink, NestedLink, ExportLink,
-         CodeLink, ShowElementsLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
-import { Drag, Drop } from '../common/DragAndDrop'
+import {
+  AddLink, CodeLink, CopyLink, EditLink, ExportLink,
+  LockedLink, NestedLink, ShowElementsLink
+} from '../common/Links'
+
+import Page from './Page'
+
 
+const Section = ({ section, display = 'list', indent = 0, filter = false, filterEditors = false, order }) => {
+  const dispatch = useDispatch()
 
-const Section = ({ config, section, configActions, elementActions, display='list', indent=0,
-                   filter=false, filterEditors=false, order }) => {
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, false, filterEditors, section)
-  const showElements = get(config, `display.elements.sections.${section.id}`, true)
+  const showElements = isTruthy(get(config, `display.elements.sections.${section.id}`, true))
 
   const editUrl = buildPath('sections', section.id)
   const copyUrl = buildPath('sections', section.id, 'copy')
   const nestedUrl = buildPath('sections', section.id, 'nested')
   const exportUrl = buildApiPath('questions', 'sections', section.id, 'export')
 
-  const fetchEdit = () => elementActions.fetchElement('sections', section.id)
-  const fetchCopy = () => elementActions.fetchElement('sections', section.id, 'copy')
-  const fetchNested = () => elementActions.fetchElement('sections', section.id, 'nested')
-  const toggleLocked = () => elementActions.storeElement('sections', {...section, locked: !section.locked })
-  const toggleElements = () => elementActions.toggleElements(section)
+  const fetchEdit = () => dispatch(fetchElement('sections', section.id))
+  const fetchCopy = () => dispatch(fetchElement('sections', section.id, 'copy'))
+  const fetchNested = () => dispatch(fetchElement('sections', section.id, 'nested'))
+  const toggleLocked = () => dispatch(storeElement('sections', { ...section, locked: !section.locked }))
+  const toggleShowElements = () => dispatch(toggleElements(section))
+
+  const createPage = () => dispatch(createElement('pages', { section }))
 
-  const createPage = () => elementActions.createElement('pages', { section })
+  const displayUriSections = isTruthy(get(config, 'display.uri.sections', true))
 
   const elementNode = (
-    <div className="element">
-      <div className="pull-right">
-        <ReadOnlyIcon title={gettext('This section is read only')} show={section.read_only} />
-        <NestedLink title={gettext('View section nested')} href={nestedUrl} onClick={fetchNested} show={display != 'nested'} />
-        <ShowElementsLink showElements={showElements} show={display == 'nested'} onClick={toggleElements} />
-        <EditLink title={gettext('Edit section')} href={editUrl} onClick={fetchEdit} />
-        <CopyLink title={gettext('Copy section')} href={copyUrl} onClick={fetchCopy} />
-        <AddLink title={gettext('Add page')} onClick={createPage} disabled={section.read_only} />
-        <LockedLink title={section.locked ? gettext('Unlock section')
-                                          : gettext('Lock section')}
-                    locked={section.locked} onClick={toggleLocked} disabled={section.read_only} />
-        <ExportLink title={gettext('Export section')} exportUrl={exportUrl}
-                    exportFormats={config.settings.export_formats} full={true} />
-        <Drag element={section} show={display == 'nested'} />
-      </div>
-      <div>
-        <p>
-          <strong>{gettext('Section')}{': '}</strong>
-          <span dangerouslySetInnerHTML={{ __html: section.title }}></span>
-        </p>
-        {
-          get(config, 'display.uri.sections', true) &&
-          <CodeLink className="code-questions" uri={section.uri} href={editUrl} onClick={() => fetchEdit()} order={order} />
-        }
-        <ElementErrors element={section} />
+    <div className="d-flex flex-column gap-2">
+      <div className="d-flex align-items-center gap-2">
+        <strong>{gettext('Section')}{':'}</strong>
+        <div className="flex-grow-1">
+          <Html html={section.title} />
+        </div>
+
+        <div className="d-flex align-items-center gap-1">
+          <ReadOnlyIcon title={gettext('This section is read only')} show={section.read_only} />
+          <NestedLink
+            title={gettext('View section nested')}
+            href={nestedUrl} onClick={fetchNested}
+            show={display != 'nested'}
+          />
+          <ShowElementsLink showElements={showElements} show={display == 'nested'} onClick={toggleShowElements} />
+          <EditLink title={gettext('Edit section')} href={editUrl} onClick={fetchEdit} />
+          <CopyLink title={gettext('Copy section')} href={copyUrl} onClick={fetchCopy} />
+          <AddLink title={gettext('Add page')} onClick={createPage} disabled={section.read_only} />
+          <LockedLink
+            title={
+              section.locked ? gettext('Unlock section') : gettext('Lock section')
+            }
+            locked={section.locked} onClick={toggleLocked} disabled={section.read_only}
+          />
+          <ExportLink
+            title={gettext('Export section')} exportUrl={exportUrl}
+            exportFormats={config.settings.export_formats} full={true} />
+          <Drag element={section} show={display == 'nested'} />
+        </div>
       </div>
+      {
+        displayUriSections &&
+        <CodeLink type="questions" uri={section.uri} href={editUrl} onClick={() => fetchEdit()} order={order} />
+      }
+      <ElementErrors element={section} />
     </div>
   )
 
@@ -67,26 +89,29 @@ const Section = ({ config, section, configActions, elementActions, display='list
     case 'list':
       return showElement && (
         <li className="list-group-item">
-          { elementNode }
+          {elementNode}
         </li>
       )
     case 'nested':
       return (
-        <>
+        <div className="position-relative">
           {
             showElement && (
-              <Drop element={section} elementActions={elementActions}>
-                <div className="panel panel-default panel-nested" style={{ marginLeft: 30 * indent }}>
-                  <div className="panel-heading">
-                    { elementNode }
+              <Drop element={section}>
+                <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--indent-factor))` }}>
+                  <div className="card-body">
+                    {elementNode}
                   </div>
                 </div>
               </Drop>
             )
           }
           {
-            !isEmpty(section.elements) &&
-            <Drop element={section.elements[0]} elementActions={elementActions} indent={indent + 1} mode="before" />
+            !isEmpty(section.elements) && (
+              <Drop
+                element={section.elements[0]} indent={indent + 1} mode="before"
+                dropElement={(...args) => dispatch(dropElement(...args))} />
+            )
           }
           {
             showElements && section.elements.map((page, index) => {
@@ -98,8 +123,6 @@ const Section = ({ config, section, configActions, elementActions, display='list
                   key={index}
                   config={config}
                   page={page}
-                  configActions={configActions}
-                  elementActions={elementActions}
                   display="nested"
                   filter={filter}
                   indent={indent + 1}
@@ -108,8 +131,8 @@ const Section = ({ config, section, configActions, elementActions, display='list
               )
             })
           }
-          <Drop element={section} elementActions={elementActions} indent={indent} mode="after" />
-        </>
+          <Drop element={section} indent={indent} mode="after" />
+        </div>
       )
     case 'plain':
       return elementNode
@@ -117,10 +140,7 @@ const Section = ({ config, section, configActions, elementActions, display='list
 }
 
 Section.propTypes = {
-  config: PropTypes.object.isRequired,
   section: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   display: PropTypes.string,
   indent: PropTypes.number,
   filter: PropTypes.string,
diff --git a/rdmo/management/assets/js/components/element/Task.js b/rdmo/management/assets/js/components/element/Task.js
index fde53d8f5f..99d5c8c0f1 100644
--- a/rdmo/management/assets/js/components/element/Task.js
+++ b/rdmo/management/assets/js/components/element/Task.js
@@ -1,17 +1,33 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import get from 'lodash/get'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 import { siteId } from 'rdmo/core/assets/js/utils/meta'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AvailableLink, LockedLink, ExportLink, CodeLink, ToggleCurrentSiteLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
+import {
+  AvailableLink,
+  CodeLink,
+  CopyLink,
+  EditLink,
+  ExportLink,
+  LockedLink,
+  ToggleCurrentSiteLink
+} from '../common/Links'
+
+const Task = ({ task, filter = false, filterSites = false, filterEditors = false }) => {
+  const dispatch = useDispatch()
 
-const Task = ({ config, task, elementActions, filter=false, filterSites=false, filterEditors=false }) => {
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, filterSites, filterEditors, task)
 
@@ -21,67 +37,72 @@ const Task = ({ config, task, elementActions, filter=false, filterSites=false, f
 
   const getConditionUrl = (index) => buildPath('conditions', task.conditions[index])
 
-  const fetchEdit = () => elementActions.fetchElement('tasks', task.id)
-  const fetchCopy = () => elementActions.fetchElement('tasks', task.id, 'copy')
-  const toggleAvailable = () => elementActions.storeElement('tasks', {...task, available: !task.available })
-  const toggleLocked = () => elementActions.storeElement('tasks', {...task, locked: !task.locked })
-  const toggleCurrentSite = () => elementActions.storeElement('tasks', task, 'toggle-site')
+  const fetchEdit = () => dispatch(fetchElement('tasks', task.id))
+  const fetchCopy = () => dispatch(fetchElement('tasks', task.id, 'copy'))
+  const toggleAvailable = () => dispatch(storeElement('tasks', { ...task, available: !task.available }))
+  const toggleLocked = () => dispatch(storeElement('tasks', { ...task, locked: !task.locked }))
+  const toggleCurrentSite = () => dispatch(storeElement('tasks', task, 'toggle-site'))
+
+  const fetchCondition = (index) => dispatch(fetchElement('conditions', task.conditions[index]))
 
-  const fetchCondition = (index) => elementActions.fetchElement('conditions', task.conditions[index])
+  const displayUriTasks = isTruthy(get(config, 'display.uri.tasks', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
 
   return showElement && (
     <li className="list-group-item">
-      <div className="element">
-        <div className="pull-right">
-          <ReadOnlyIcon title={gettext('This task is read only')} show={task.read_only} />
-          <EditLink title={gettext('Edit task')} href={editUrl} onClick={fetchEdit} />
-          <CopyLink title={gettext('Copy task')} href={copyUrl} onClick={fetchCopy} />
-          <AvailableLink title={task.available ? gettext('Make task unavailable')
-                                               : gettext('Make task available')}
-                         available={task.available} locked={task.locked} onClick={toggleAvailable}
-                         disabled={task.read_only} />
-          <ToggleCurrentSiteLink hasCurrentSite={config.settings.multisite ? task.sites.includes(siteId) : true}
-                         onClick={toggleCurrentSite}
-                         show={config.settings.multisite}/>
-          <LockedLink title={task.locked ? gettext('Unlock task') : gettext('Lock task')}
-                      locked={task.locked} onClick={toggleLocked} disabled={task.read_only} />
-          <ExportLink title={gettext('Export task')} exportUrl={exportUrl}
-                      exportFormats={config.settings.export_formats} full={true} />
-        </div>
-        <div>
-          <p>
-            <strong>{gettext('Task')}{': '}</strong>
-            <span dangerouslySetInnerHTML={{ __html: task.title }}></span>
-          </p>
-          {
-            get(config, 'display.uri.tasks', true) && <p>
-              <CodeLink className="code-tasks" uri={task.uri} href={editUrl} onClick={() => fetchEdit()} />
-            </p>
-          }
-          {
-            get(config, 'display.uri.conditions', true) && task.condition_uris.map((uri, index) => (
-              <p key={index}>
-                <CodeLink
-                  className="code-conditions"
-                  uri={uri}
-                  href={getConditionUrl(index)}
-                  onClick={() => fetchCondition(index)}
-                />
-              </p>
-            ))
-          }
-          <ElementErrors element={task} />
+      <div className="d-flex flex-column gap-2">
+        <div className="d-flex align-items-center gap-2">
+          <strong>{gettext('Task')}{':'}</strong>
+          <div className="flex-grow-1">
+            <Html html={task.title} />
+          </div>
+
+          <div className="d-flex align-items-center gap-1">
+            <ReadOnlyIcon title={gettext('This task is read only')} show={task.read_only} />
+            <EditLink title={gettext('Edit task')} href={editUrl} onClick={fetchEdit} />
+            <CopyLink title={gettext('Copy task')} href={copyUrl} onClick={fetchCopy} />
+            <AvailableLink
+              title={
+                task.available ? gettext('Make task unavailable') : gettext('Make task available')
+              }
+              available={task.available} locked={task.locked} onClick={toggleAvailable}
+              disabled={task.read_only} />
+            <ToggleCurrentSiteLink
+              hasCurrentSite={config.settings.multisite ? task.sites.includes(siteId) : true}
+              onClick={toggleCurrentSite}
+              show={config.settings.multisite} />
+            <LockedLink
+              title={task.locked ? gettext('Unlock task') : gettext('Lock task')}
+              locked={task.locked} onClick={toggleLocked} disabled={task.read_only} />
+            <ExportLink
+              title={gettext('Export task')} exportUrl={exportUrl}
+              exportFormats={config.settings.export_formats} full={true} />
+          </div>
         </div>
+        {
+          displayUriTasks && (
+            <CodeLink type="tasks" uri={task.uri} href={editUrl} onClick={() => fetchEdit()} />
+          )
+        }
+        {
+          displayUriConditions && task.condition_uris.map((uri, index) => (
+            <CodeLink
+              key={index}
+              type="conditions"
+              uri={uri}
+              href={getConditionUrl(index)}
+              onClick={() => fetchCondition(index)}
+            />
+          ))
+        }
+        <ElementErrors element={task} />
       </div>
     </li>
   )
 }
 
 Task.propTypes = {
-  config: PropTypes.object.isRequired,
   task: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   filter: PropTypes.string,
   filterSites: PropTypes.bool,
   filterEditors: PropTypes.bool
diff --git a/rdmo/management/assets/js/components/element/View.js b/rdmo/management/assets/js/components/element/View.js
index 299fa59f7b..4c32aadc69 100644
--- a/rdmo/management/assets/js/components/element/View.js
+++ b/rdmo/management/assets/js/components/element/View.js
@@ -1,16 +1,33 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import get from 'lodash/get'
 
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 import { siteId } from 'rdmo/core/assets/js/utils/meta'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { fetchElement, storeElement } from '../../actions/elementActions'
 import { filterElement } from '../../utils/filter'
 import { buildApiPath, buildPath } from '../../utils/location'
 
 import { ElementErrors } from '../common/Errors'
-import { EditLink, CopyLink, AvailableLink, LockedLink, ExportLink, CodeLink, ToggleCurrentSiteLink } from '../common/Links'
 import { ReadOnlyIcon } from '../common/Icons'
+import {
+  AvailableLink,
+  CodeLink,
+  CopyLink,
+  EditLink,
+  ExportLink,
+  LockedLink,
+  ToggleCurrentSiteLink
+} from '../common/Links'
+
+const View = ({ view, filter = false, filterSites = false, filterEditors = false }) => {
+  const dispatch = useDispatch()
 
-const View = ({ config, view, elementActions, filter=false, filterSites=false, filterEditors=false }) => {
+  const config = useSelector((state) => state.config)
 
   const showElement = filterElement(config, filter, filterSites, filterEditors, view)
 
@@ -18,51 +35,58 @@ const View = ({ config, view, elementActions, filter=false, filterSites=false, f
   const copyUrl = buildPath('views', view.id, 'copy')
   const exportUrl = buildApiPath('views', 'views', view.id, 'export')
 
-  const fetchEdit = () => elementActions.fetchElement('views', view.id)
-  const fetchCopy = () => elementActions.fetchElement('views', view.id, 'copy')
-  const toggleAvailable = () => elementActions.storeElement('views', {...view, available: !view.available })
-  const toggleLocked = () => elementActions.storeElement('views', {...view, locked: !view.locked })
-  const toggleCurrentSite = () => elementActions.storeElement('views', view, 'toggle-site')
+  const fetchEdit = () => dispatch(fetchElement('views', view.id))
+  const fetchCopy = () => dispatch(fetchElement('views', view.id, 'copy'))
+  const toggleAvailable = () => dispatch(storeElement('views', { ...view, available: !view.available }))
+  const toggleLocked = () => dispatch(storeElement('views', { ...view, locked: !view.locked }))
+  const toggleCurrentSite = () => dispatch(storeElement('views', view, 'toggle-site'))
+
+  const displayUriViews = isTruthy(get(config, 'display.uri.views', true))
 
   return showElement && (
     <li className="list-group-item">
-      <div className="element">
-        <div className="pull-right">
-          <ReadOnlyIcon title={gettext('This view is read only')} show={view.read_only} />
-          <EditLink title={gettext('Edit view')} href={editUrl} onClick={fetchEdit} />
-          <CopyLink title={gettext('Copy view')} href={copyUrl} onClick={fetchCopy} />
-          <AvailableLink title={view.available ? gettext('Make view unavailable')
-                                               : gettext('Make view available')}
-                         available={view.available} locked={view.locked} onClick={toggleAvailable}
-                         disabled={view.read_only} />
-          <ToggleCurrentSiteLink hasCurrentSite={config.settings.multisite ? view.sites.includes(siteId) : true}
-                         onClick={toggleCurrentSite}
-                         show={config.settings.multisite}/>
-          <LockedLink title={view.locked ? gettext('Unlock view') : gettext('Lock view')}
-                      locked={view.locked} onClick={toggleLocked} disabled={view.read_only} />
-          <ExportLink title={gettext('Export view')} exportUrl={exportUrl}
-                      exportFormats={config.settings.export_formats} />
-        </div>
-        <div>
-          <p>
-            <strong>{gettext('View')}{': '}</strong>
-            <span dangerouslySetInnerHTML={{ __html: view.title }}></span>
-          </p>
-          <p>
-            <CodeLink className="code-views" uri={view.uri} href={editUrl} onClick={() => fetchEdit()} />
-          </p>
-          <ElementErrors element={view} />
+      <div className="d-flex flex-column gap-2">
+        <div className="d-flex align-items-center gap-2">
+          <strong>{gettext('View')}{':'}</strong>
+          <div className="flex-grow-1">
+            <Html html={view.title} />
+          </div>
+
+          <div className="d-flex align-items-center gap-1">
+            <ReadOnlyIcon title={gettext('This view is read only')} show={view.read_only} />
+            <EditLink title={gettext('Edit view')} href={editUrl} onClick={fetchEdit} />
+            <CopyLink title={gettext('Copy view')} href={copyUrl} onClick={fetchCopy} />
+            <AvailableLink
+              title={
+                view.available ? gettext('Make view unavailable') : gettext('Make view available')
+              }
+              available={view.available} locked={view.locked} onClick={toggleAvailable}
+              disabled={view.read_only} />
+            <ToggleCurrentSiteLink
+              hasCurrentSite={config.settings.multisite ? view.sites.includes(siteId) : true}
+              onClick={toggleCurrentSite}
+              show={config.settings.multisite} />
+            <LockedLink
+              title={view.locked ? gettext('Unlock view') : gettext('Lock view')}
+              locked={view.locked} onClick={toggleLocked} disabled={view.read_only} />
+            <ExportLink
+              title={gettext('Export view')} exportUrl={exportUrl}
+              exportFormats={config.settings.export_formats} />
+          </div>
         </div>
+        {
+          displayUriViews && (
+            <CodeLink type="views" uri={view.uri} href={editUrl} onClick={() => fetchEdit()} />
+          )
+        }
+        <ElementErrors element={view} />
       </div>
     </li>
   )
 }
 
 View.propTypes = {
-  config: PropTypes.object.isRequired,
   view: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
   filter: PropTypes.string,
   filterSites: PropTypes.bool,
   filterEditors: PropTypes.bool
diff --git a/rdmo/management/assets/js/components/elements/Attributes.js b/rdmo/management/assets/js/components/elements/Attributes.js
index 66bb2a4023..b4f167d8c2 100644
--- a/rdmo/management/assets/js/components/elements/Attributes.js
+++ b/rdmo/management/assets/js/components/elements/Attributes.js
@@ -1,68 +1,76 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite } from '../common/Filter'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix } from '../common/Filter'
 import Attribute from '../element/Attribute'
 
-const Attributes = ({ config, attributes, configActions, elementActions }) => {
+const Attributes = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const attributes = useSelector((state) => state.elements.attributes)
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.attributes.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.attributes.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
-  const createAttribute = () => elementActions.createElement('attributes')
+  const updateFilterString = (value) => dispatch(updateConfig('filter.attributes.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.attributes.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
+  const createAttribute = () => dispatch(createElement('attributes'))
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Attributes')}</strong>
           <BackButton />
           <NewButton onClick={createAttribute} />
         </div>
-        <strong>{gettext('Attributes')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body pb-0">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.attributes.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter attributes')} />
+            <FilterString
+              value={get(config, 'filter.attributes.search', '')} onChange={updateFilterString}
+              label={gettext('Filter attributes')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.attributes.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(attributes)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.attributes.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(attributes)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        attributes.map((attribute, index) => (
-          <Attribute key={index} config={config} attribute={attribute}
-                     configActions={configActions} elementActions={elementActions}
-                     filter="attributes" filterEditors={true} />
-        ))
+        !isEmpty(attributes) && (
+          <ul className="list-group list-group-flush">
+            {
+              attributes.map((attribute, index) => (
+                <Attribute
+                  key={index} config={config} attribute={attribute}
+                  filter="attributes" filterEditors={true} />
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Attributes.propTypes = {
-  config: PropTypes.object.isRequired,
-  attributes: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Attributes
diff --git a/rdmo/management/assets/js/components/elements/Catalogs.js b/rdmo/management/assets/js/components/elements/Catalogs.js
index 6f2cac42e3..2dbfcfbac4 100644
--- a/rdmo/management/assets/js/components/elements/Catalogs.js
+++ b/rdmo/management/assets/js/components/elements/Catalogs.js
@@ -1,83 +1,99 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite} from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix} from '../common/Filter'
 import Catalog from '../element/Catalog'
 
-const Catalogs = ({ config, catalogs, configActions, elementActions }) => {
+const Catalogs = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const catalogs = useSelector((state) => state.elements.catalogs)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.catalogs.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.catalogs.uri_prefix', value))
+  const updateFilterSite = (value) => dispatch(updateConfig('filter.sites', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.catalogs.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.catalogs.uri_prefix', value)
-  const updateFilterSite = (value) => configActions.updateConfig('filter.sites', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
-  const updateDisplayCatalogURI = (value) => configActions.updateConfig('display.uri.catalogs', value)
+  const displayUriCatalogs = isTruthy(get(config, 'display.uri.catalogs', true))
 
-  const createCatalog = () => elementActions.createElement('catalogs')
+  const toggleDisplayUriCatalogs = () => dispatch(updateConfig('display.uri.catalogs', !displayUriCatalogs))
+
+  const createCatalog = () => dispatch(createElement('catalogs'))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Catalogs')}</strong>
           <BackButton />
           <NewButton onClick={createCatalog} />
         </div>
-        <strong>{gettext('Catalogs')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-4' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.catalogs.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter catalogs')} />
+            <FilterString
+              value={get(config, 'filter.catalogs.search', '')} onChange={updateFilterString}
+              label={gettext('Filter catalogs')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.catalogs.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(catalogs)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.catalogs.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(catalogs)} />
           </div>
           {
-            config.settings.multisite && <>
-              <div className="col-sm-2">
-                <FilterSite value={get(config, 'filter.sites', '')} onChange={updateFilterSite}
-                            options={config.sites} />
-              </div>
-              <div className="col-sm-2">
-                <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                            options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-              </div>
-            </>
+            config.settings.multisite && (
+              <>
+                <div className="col-sm-2">
+                  <FilterSite
+                    value={get(config, 'filter.sites', '')} onChange={updateFilterSite}
+                    options={config.sites} />
+                </div>
+                <div className="col-sm-2">
+                  <FilterSite
+                    value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                    options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+                </div>
+              </>
+            )
           }
         </div>
-        <div className="checkboxes">
-          <span className="mr-10">{gettext('Show URIs:')}</span>
-          <Checkbox label={<code className="code-questions">{gettext('Catalogs')}</code>}
-                    value={get(config, 'display.uri.catalogs', true)} onChange={updateDisplayCatalogURI} />
+        <div className="input-group input-group-sm">
+          <label className="input-group-text">{gettext('Show URIs')}</label>
+          <button type="button" onClick={toggleDisplayUriCatalogs} className={btnClass(displayUriCatalogs)}>
+            {gettext('Catalogs')}
+          </button>
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        catalogs.map((catalog, index) => (
-          <Catalog key={index} config={config} catalog={catalog}
-                   configActions={configActions} elementActions={elementActions}
-                   filter="catalogs" filterSites={true} filterEditors={true} />
-        ))
+        !isEmpty(catalogs) && (
+          <ul className="list-group list-group-flush">
+            {
+              catalogs.map((catalog, index) => (
+                <Catalog
+                  key={index} config={config} catalog={catalog}
+                  filter="catalogs" filterSites={true} filterEditors={true} />
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Catalogs.propTypes = {
-  config: PropTypes.object.isRequired,
-  catalogs: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Catalogs
diff --git a/rdmo/management/assets/js/components/elements/Conditions.js b/rdmo/management/assets/js/components/elements/Conditions.js
index ab1cf69932..c07aeb7fc0 100644
--- a/rdmo/management/assets/js/components/elements/Conditions.js
+++ b/rdmo/management/assets/js/components/elements/Conditions.js
@@ -1,69 +1,77 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite} from '../common/Filter'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix} from '../common/Filter'
 import Condition from '../element/Condition'
 
-const Conditions = ({ config, conditions, configActions, elementActions}) => {
+const Conditions = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const conditions = useSelector((state) => state.elements.conditions)
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.conditions.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.conditions.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const updateFilterString = (value) => dispatch(updateConfig('filter.conditions.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.conditions.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const createCondition = () => elementActions.createElement('conditions')
+  const createCondition = () => dispatch(createElement('conditions'))
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Conditions')}</strong>
           <BackButton />
           <NewButton onClick={createCondition} />
         </div>
-        <strong>{gettext('Conditions')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.conditions.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter conditions')} />
+            <FilterString
+              value={get(config, 'filter.conditions.search', '')} onChange={updateFilterString}
+              label={gettext('Filter conditions')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.conditions.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(conditions)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.conditions.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(conditions)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        conditions.map((condition, index) => (
-          <Condition key={index} config={config} condition={condition}
-                     configActions={configActions} elementActions={elementActions}
-                     filter="conditions" filterEditors={true} />
-        ))
+        !isEmpty(conditions) && (
+          <ul className="list-group list-group-flush">
+            {
+              conditions.map((condition, index) => (
+                <Condition
+                  key={index} config={config} condition={condition}
+                  filter="conditions" filterEditors={true} />
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Conditions.propTypes = {
-  config: PropTypes.object.isRequired,
-  conditions: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Conditions
diff --git a/rdmo/management/assets/js/components/elements/Elements.js b/rdmo/management/assets/js/components/elements/Elements.js
new file mode 100644
index 0000000000..d71fb2897e
--- /dev/null
+++ b/rdmo/management/assets/js/components/elements/Elements.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import useScrollEffect from '../../hooks/useScrollEffect'
+
+import Attributes from './Attributes'
+import Catalogs from './Catalogs'
+import Conditions from './Conditions'
+import Options from './Options'
+import OptionSets from './OptionSets'
+import Pages from './Pages'
+import Questions from './Questions'
+import QuestionSets from './QuestionSets'
+import Sections from './Sections'
+import Tasks from './Tasks'
+import Views from './Views'
+
+const Elements = () => {
+  const { elementType } = useSelector((state) => state.elements)
+
+  useScrollEffect(elementType)
+
+  switch (elementType) {
+    case 'catalogs':
+      return <Catalogs  />
+    case 'sections':
+      return <Sections  />
+    case 'pages':
+      return <Pages  />
+    case 'questionsets':
+      return <QuestionSets  />
+    case 'questions':
+      return <Questions  />
+    case 'attributes':
+      return <Attributes  />
+    case 'optionsets':
+      return <OptionSets  />
+    case 'options':
+      return <Options  />
+    case 'conditions':
+      return <Conditions  />
+    case 'tasks':
+      return <Tasks  />
+    case 'views':
+      return <Views  />
+  }
+}
+
+export default Elements
diff --git a/rdmo/management/assets/js/components/elements/OptionSets.js b/rdmo/management/assets/js/components/elements/OptionSets.js
index 5ebabf330f..020bcf0638 100644
--- a/rdmo/management/assets/js/components/elements/OptionSets.js
+++ b/rdmo/management/assets/js/components/elements/OptionSets.js
@@ -1,69 +1,77 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite } from '../common/Filter'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix } from '../common/Filter'
 import OptionSet from '../element/OptionSet'
 
-const OptionSets = ({ config, optionsets, configActions, elementActions}) => {
+const OptionSets = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const optionsets = useSelector((state) => state.elements.optionsets)
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.optionsets.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.optionsets.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const updateFilterString = (value) => dispatch(updateConfig('filter.optionsets.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.optionsets.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const createOptionSet = () => elementActions.createElement('optionsets')
+  const createOptionSet = () => dispatch(createElement('optionsets'))
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Option sets')}</strong>
           <BackButton />
           <NewButton onClick={createOptionSet} />
         </div>
-        <strong>{gettext('Option sets')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.optionsets.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter option sets')} />
+            <FilterString
+              value={get(config, 'filter.optionsets.search', '')} onChange={updateFilterString}
+              label={gettext('Filter option sets')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.optionsets.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(optionsets)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.optionsets.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(optionsets)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        optionsets.map((optionset, index) => (
-          <OptionSet key={index} config={config} optionset={optionset}
-                     configActions={configActions} elementActions={elementActions}
-                     filter="optionsets" filterEditors={true} />
-        ))
+        !isEmpty(optionsets) && (
+          <ul className="list-group list-group-flush">
+            {
+              optionsets.map((optionset, index) => (
+                <OptionSet
+                  key={index} config={config} optionset={optionset}
+                  filter="optionsets" filterEditors={true} />
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-OptionSets.propTypes = {
-  config: PropTypes.object.isRequired,
-  optionsets: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default OptionSets
diff --git a/rdmo/management/assets/js/components/elements/Options.js b/rdmo/management/assets/js/components/elements/Options.js
index b2533dc7d7..ab5cd405c1 100644
--- a/rdmo/management/assets/js/components/elements/Options.js
+++ b/rdmo/management/assets/js/components/elements/Options.js
@@ -1,77 +1,91 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix } from '../common/Filter'
 import Option from '../element/Option'
 
-const Options = ({ config, options, configActions, elementActions }) => {
+const Options = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const options = useSelector((state) => state.elements.options)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.options.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.options.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.options.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.options.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const displayUriOptions = isTruthy(get(config, 'display.uri.options', true))
 
-  const updateDisplayURI = (value) => configActions.updateConfig('display.uri.options', value)
+  const toggleDisplayUriOptions = () => dispatch(updateConfig('display.uri.options', !displayUriOptions))
 
-  const createOption = () => elementActions.createElement('options')
+  const createOption = () => dispatch(createElement('options'))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Options')}</strong>
           <BackButton />
           <NewButton onClick={createOption} />
         </div>
-        <strong>{gettext('Options')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.options.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter options')} />
+            <FilterString
+              value={get(config, 'filter.options.search', '')} onChange={updateFilterString}
+              label={gettext('Filter options')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.options.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(options)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.options.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(options)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
-        <div className="checkboxes">
-          <span className="mr-10">{gettext('Show URIs:')}</span>
-          <Checkbox label={<code className="code-options">{gettext('Options')}</code>}
-                    value={get(config, 'display.uri.options', true)} onChange={updateDisplayURI} />
+        <div className="input-group input-group-sm">
+          <label className="input-group-text">{gettext('Show URIs')}</label>
+          <button type="button" onClick={toggleDisplayUriOptions} className={btnClass(displayUriOptions)}>
+            {gettext('Options')}
+          </button>
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        options.map((option, index) => (
-          <Option key={index} config={config} option={option}
-                  configActions={configActions} elementActions={elementActions}
+        !isEmpty(options) && (
+          <ul className="list-group list-group-flush">
+            {
+              options.map((option, index) => (
+                <Option
+                  key={index} config={config} option={option}
                   filter="options" filterEditors={true} />
-        ))
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Options.propTypes = {
-  config: PropTypes.object.isRequired,
-  options: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Options
diff --git a/rdmo/management/assets/js/components/elements/Pages.js b/rdmo/management/assets/js/components/elements/Pages.js
index 31dcbaed88..615f668a2d 100644
--- a/rdmo/management/assets/js/components/elements/Pages.js
+++ b/rdmo/management/assets/js/components/elements/Pages.js
@@ -1,83 +1,102 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix } from '../common/Filter'
 import Page from '../element/Page'
 
-const Pages = ({ config, pages, configActions, elementActions }) => {
+const Pages = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const pages = useSelector((state) => state.elements.pages)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.pages.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.pages.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.pages.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.pages.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const displayUriPages = isTruthy(get(config, 'display.uri.pages', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
 
-  const updateDisplayPagesURI = (value) => configActions.updateConfig('display.uri.pages', value)
-  const updateDisplayAttributesURI = (value) => configActions.updateConfig('display.uri.attributes', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
+  const toggleDisplayUriPages = () => dispatch(updateConfig('display.uri.pages', !displayUriPages))
+  const toggleDisplayUriAttributes = () => dispatch(updateConfig('display.uri.attributes', !displayUriAttributes))
+  const toggleDisplayUriConditions = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
 
-  const createPage = () => elementActions.createElement('pages')
+  const createPage = () => dispatch(createElement('pages'))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Pages')}</strong>
           <BackButton />
           <NewButton onClick={createPage} />
         </div>
-        <strong>{gettext('Pages')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.pages.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter pages')} />
+            <FilterString
+              value={get(config, 'filter.pages.search', '')} onChange={updateFilterString}
+              label={gettext('Filter pages')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.pages.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(pages)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.pages.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(pages)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
-        <div className="checkboxes">
-          <span className="mr-10">{gettext('Show URIs:')}</span>
-          <Checkbox label={<code className="code-questions">{gettext('Pages')}</code>}
-                    value={get(config, 'display.uri.pages', true)} onChange={updateDisplayPagesURI} />
-          <Checkbox label={<code className="code-domain">{gettext('Attributes')}</code>}
-                    value={get(config, 'display.uri.attributes', true)} onChange={updateDisplayAttributesURI} />
-          <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                    value={get(config, 'display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
+        <div className="input-group input-group-sm mb-2">
+          <label className="input-group-text">{gettext('Show URIs')}</label>
+          <button type="button" onClick={toggleDisplayUriPages} className={btnClass(displayUriPages)}>
+            {gettext('Pages')}
+          </button>
+          <button type="button" onClick={toggleDisplayUriAttributes} className={btnClass(displayUriAttributes)}>
+            {gettext('Attributes')}
+          </button>
+          <button type="button" onClick={toggleDisplayUriConditions} className={btnClass(displayUriConditions)}>
+            {gettext('Conditions')}
+          </button>
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        pages.map((page, index) => (
-          <Page key={index} config={config} page={page}
-                configActions={configActions} elementActions={elementActions}
-                filter="pages" filterEditors={true} />
-        ))
+        !isEmpty(pages) && (
+          <ul className="list-group list-group-flush">
+            {
+              pages.map((page, index) => (
+                <Page
+                  key={index} config={config} page={page}
+                  filter="pages" filterEditors={true} />
+              ))
+            }
+          </ul>
+
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Pages.propTypes = {
-  config: PropTypes.object.isRequired,
-  pages: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Pages
diff --git a/rdmo/management/assets/js/components/elements/QuestionSets.js b/rdmo/management/assets/js/components/elements/QuestionSets.js
index 0234b31506..de45e32b4c 100644
--- a/rdmo/management/assets/js/components/elements/QuestionSets.js
+++ b/rdmo/management/assets/js/components/elements/QuestionSets.js
@@ -1,83 +1,102 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix } from '../common/Filter'
 import QuestionSet from '../element/QuestionSet'
 
-const QuestionSets = ({ config, questionsets, configActions, elementActions }) => {
+const QuestionSets = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const questionsets = useSelector((state) => state.elements.questionsets)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.questionsets.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.questionsets.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.questionsets.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.questionsets.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const displayUriQuestionSets = isTruthy(get(config, 'display.uri.questionsets', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
 
-  const updateDisplayQuestionSetsURI = (value) => configActions.updateConfig('display.uri.questionsets', value)
-  const updateDisplayAttributesURI = (value) => configActions.updateConfig('display.uri.attributes', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
+  const toggleDisplayUriQuestionSets = () => dispatch(updateConfig('display.uri.questionsets', !displayUriQuestionSets))
+  const toggleDisplayUriAttributes = () => dispatch(updateConfig('display.uri.attributes', !displayUriAttributes))
+  const toggleDisplayUriConditions = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
 
-  const createQuestionSet = () => elementActions.createElement('questionsets')
+  const createQuestionSet = () => dispatch(createElement('questionsets'))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Question sets')}</strong>
           <BackButton />
           <NewButton onClick={createQuestionSet} />
         </div>
-        <strong>{gettext('Question sets')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.questionsets.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter question sets')} />
+            <FilterString
+              value={get(config, 'filter.questionsets.search', '')} onChange={updateFilterString}
+              label={gettext('Filter question sets')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.questionsets.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(questionsets)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.questionsets.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(questionsets)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
-        <div className="checkboxes">
-          <span className="mr-10">{gettext('Show URIs:')}</span>
-          <Checkbox label={<code className="code-questions">{gettext('Question sets')}</code>}
-                    value={get(config, 'display.uri.questionsets', true)} onChange={updateDisplayQuestionSetsURI} />
-          <Checkbox label={<code className="code-domain">{gettext('Attributes')}</code>}
-                    value={get(config, 'display.uri.attributes', true)} onChange={updateDisplayAttributesURI} />
-          <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                    value={get(config, 'display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
+        <div className="input-group input-group-sm mb-2">
+          <label className="input-group-text">{gettext('Show URIs')}</label>
+          <button type="button" onClick={toggleDisplayUriQuestionSets} className={btnClass(displayUriQuestionSets)}>
+            {gettext('Question sets')}
+          </button>
+          <button type="button" onClick={toggleDisplayUriAttributes} className={btnClass(displayUriAttributes)}>
+            {gettext('Attributes')}
+          </button>
+          <button type="button" onClick={toggleDisplayUriConditions} className={btnClass(displayUriConditions)}>
+            {gettext('Conditions')}
+          </button>
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        questionsets.map((questionset, index) => (
-          <QuestionSet key={index} config={config} questionset={questionset}
-                       configActions={configActions} elementActions={elementActions}
-                       filter="questionsets" filterEditors={true} />
-        ))
+        !isEmpty(questionsets) && (
+          <ul className="list-group list-group-flush">
+            {
+              questionsets.map((questionset, index) => (
+                <QuestionSet
+                  key={index} config={config} questionset={questionset}
+                  filter="questionsets" filterEditors={true} />
+              ))
+            }
+          </ul>
+
+        )
       }
-      </ul>
     </div>
   )
 }
 
-QuestionSets.propTypes = {
-  config: PropTypes.object.isRequired,
-  questionsets: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default QuestionSets
diff --git a/rdmo/management/assets/js/components/elements/Questions.js b/rdmo/management/assets/js/components/elements/Questions.js
index c94b530c63..b060ce0f95 100644
--- a/rdmo/management/assets/js/components/elements/Questions.js
+++ b/rdmo/management/assets/js/components/elements/Questions.js
@@ -1,86 +1,105 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix } from '../common/Filter'
 import Question from '../element/Question'
 
-const Questions = ({ config, questions, configActions, elementActions }) => {
+const Questions = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const questions = useSelector((state) => state.elements.questions)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.questions.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.questions.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.questions.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.questions.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const displayUriQuestions = isTruthy(get(config, 'display.uri.questions', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
+  const displayUriOptionSets = isTruthy(get(config, 'display.uri.optionsets', true))
 
-  const updateDisplayQuestionsURI = (value) => configActions.updateConfig('display.uri.questions', value)
-  const updateDisplayAttributesURI = (value) => configActions.updateConfig('display.uri.attributes', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
-  const updateDisplayOptionSetURI = (value) => configActions.updateConfig('display.uri.optionsets', value)
+  const updateDisplayQuestionsURI = () => dispatch(updateConfig('display.uri.questions', !displayUriQuestions))
+  const updateDisplayAttributesURI = () => dispatch(updateConfig('display.uri.attributes', !displayUriAttributes))
+  const updateDisplayConditionsURI = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
+  const updateDisplayOptionSetURI = () => dispatch(updateConfig('display.uri.optionsets', !displayUriOptionSets))
 
-  const createQuestion = () => elementActions.createElement('questions')
+  const createQuestion = () => dispatch(createElement('questions'))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Questions')}</strong>
           <BackButton />
           <NewButton onClick={createQuestion} />
         </div>
-        <strong>{gettext('Questions')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.questions.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter questions')} />
+            <FilterString
+              value={get(config, 'filter.questions.search', '')} onChange={updateFilterString}
+              label={gettext('Filter questions')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.questions.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(questions)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.questions.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(questions)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
-        <div className="checkboxes">
-          <span className="mr-10">{gettext('Show URIs:')}</span>
-          <Checkbox label={<code className="code-questions">{gettext('Questions')}</code>}
-                    value={get(config, 'display.uri.questions', true)} onChange={updateDisplayQuestionsURI} />
-          <Checkbox label={<code className="code-domain">{gettext('Attributes')}</code>}
-                    value={get(config, 'display.uri.attributes', true)} onChange={updateDisplayAttributesURI} />
-          <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                    value={get(config, 'display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
-          <Checkbox label={<code className="code-options">{gettext('Option sets')}</code>}
-                    value={get(config, 'display.uri.optionsets', true)} onChange={updateDisplayOptionSetURI} />
+        <div className="input-group input-group-sm">
+          <label className="input-group-text">{gettext('Show URIs:')}</label>
+          <button type="button" onClick={updateDisplayQuestionsURI} className={btnClass(displayUriQuestions)}>
+            {gettext('Questions')}
+          </button>
+          <button type="button" onClick={updateDisplayAttributesURI} className={btnClass(displayUriAttributes)}>
+            {gettext('Attributes')}
+          </button>
+          <button type="button" onClick={updateDisplayConditionsURI} className={btnClass(displayUriConditions)}>
+            {gettext('Conditions')}
+          </button>
+          <button type="button" onClick={updateDisplayOptionSetURI} className={btnClass(displayUriOptionSets)}>
+            {gettext('Option sets')}
+          </button>
         </div>
       </div>
-
-      <ul className="list-group">
       {
-        questions.map((question, index) => (
-          <Question key={index} config={config} question={question}
-                    configActions={configActions} elementActions={elementActions}
-                    filter="questions" filterEditors={true} />
-        ))
+        !isEmpty(questions) && (
+          <ul className="list-group list-group-flush">
+            {
+              questions.map((question, index) => (
+                <Question
+                  key={index} config={config} question={question}
+                  filter="questions" filterEditors={true} />
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Questions.propTypes = {
-  config: PropTypes.object.isRequired,
-  questions: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Questions
diff --git a/rdmo/management/assets/js/components/elements/Sections.js b/rdmo/management/assets/js/components/elements/Sections.js
index 5f87865c45..0f8ac56a7e 100644
--- a/rdmo/management/assets/js/components/elements/Sections.js
+++ b/rdmo/management/assets/js/components/elements/Sections.js
@@ -1,77 +1,91 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix } from '../common/Filter'
 import Section from '../element/Section'
 
-const Sections = ({ config, sections, configActions, elementActions }) => {
+const Sections = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const sections = useSelector((state) => state.elements.sections)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.sections.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.sections.uri_prefix', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.sections.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.sections.uri_prefix', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const displayUriSections = isTruthy(get(config, 'display.uri.sections', true))
 
-  const updateDisplaySectionURI = (value) => configActions.updateConfig('display.uri.sections', value)
+  const toggleDisplayUriSections = () => dispatch(updateConfig('display.uri.sections', !displayUriSections))
 
-  const createSection = () => elementActions.createElement('sections')
+  const createSection = () => dispatch(createElement('sections'))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Sections')}</strong>
           <BackButton />
           <NewButton onClick={createSection} />
         </div>
-        <strong>{gettext('Sections')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-6' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.sections.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter sections')} />
+            <FilterString
+              value={get(config, 'filter.sections.search', '')} onChange={updateFilterString}
+              label={gettext('Filter sections')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.sections.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(sections)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.sections.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(sections)} />
           </div>
           {
-            config.settings.multisite && <div className="col-sm-2">
-              <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                          options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-            </div>
+            config.settings.multisite && (
+              <div className="col-sm-2">
+                <FilterSite
+                  value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                  options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+              </div>
+            )
           }
         </div>
-        <div className="checkboxes">
-          <span className="mr-10">{gettext('Show URIs:')}</span>
-          <Checkbox label={<code className="code-questions">{gettext('Sections')}</code>}
-                    value={get(config, 'display.uri.sections', true)} onChange={updateDisplaySectionURI} />
+        <div className="input-group input-group-sm">
+          <label className="input-group-text">{gettext('Show URIs')}</label>
+          <button type="button" onClick={toggleDisplayUriSections} className={btnClass(displayUriSections)}>
+            {gettext('Sections')}
+          </button>
         </div>
       </div>
 
-      <ul className="list-group">
       {
-        sections.map((section, index) => (
-          <Section key={index} config={config} section={section}
-                   configActions={configActions} elementActions={elementActions}
-                   filter="sections" filterEditors={true} />
-        ))
+        !isEmpty(sections) && (
+          <ul className="list-group list-group-flush">
+            {
+              sections.map((section, index) => (
+                <Section
+                  key={index} config={config} section={section}
+                  filter="sections" filterEditors={true} />
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Sections.propTypes = {
-  config: PropTypes.object.isRequired,
-  sections: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Sections
diff --git a/rdmo/management/assets/js/components/elements/Tasks.js b/rdmo/management/assets/js/components/elements/Tasks.js
index 4de33d4582..56cc2e3713 100644
--- a/rdmo/management/assets/js/components/elements/Tasks.js
+++ b/rdmo/management/assets/js/components/elements/Tasks.js
@@ -1,88 +1,105 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite} from '../common/Filter'
 import { BackButton, NewButton } from '../common/Buttons'
-import { Checkbox } from '../common/Checkboxes'
-
+import { FilterSite, FilterString, FilterUriPrefix} from '../common/Filter'
 import Task from '../element/Task'
 
-const Tasks = ({ config, tasks, configActions, elementActions }) => {
+const Tasks = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const tasks = useSelector((state) => state.elements.tasks)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.tasks.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.tasks.uri_prefix', value))
+  const updateFilterSite = (value) => dispatch(updateConfig('filter.sites', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
+
+  const displayUriTasks = isTruthy(get(config, 'display.uri.tasks', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.tasks.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.tasks.uri_prefix', value)
-  const updateFilterSite = (value) => configActions.updateConfig('filter.sites', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const updateDisplayUriTasks = () => dispatch(updateConfig('display.uri.tasks', !displayUriTasks))
+  const updateDisplayUriConditions = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
 
-  const updateDisplayTasksURI = (value) => configActions.updateConfig('display.uri.tasks', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
+  const createTask = () => dispatch(createElement('tasks'))
 
-  const createTask = () => elementActions.createElement('tasks')
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Tasks')}</strong>
           <BackButton />
           <NewButton onClick={createTask} />
         </div>
-        <strong>{gettext('Tasks')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-4' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.tasks.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter tasks')} />
+            <FilterString
+              value={get(config, 'filter.tasks.search', '')} onChange={updateFilterString}
+              label={gettext('Filter tasks')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.tasks.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(tasks)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.tasks.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(tasks)} />
           </div>
           {
-            config.settings.multisite && <>
-              <div className="col-sm-2">
-                <FilterSite value={get(config, 'filter.sites', '')} onChange={updateFilterSite}
-                            options={config.sites} />
-              </div>
-              <div className="col-sm-2">
-                <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                            options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-              </div>
-            </>
+            config.settings.multisite && (
+              <>
+                <div className="col-sm-2">
+                  <FilterSite
+                    value={get(config, 'filter.sites', '')} onChange={updateFilterSite}
+                    options={config.sites} />
+                </div>
+                <div className="col-sm-2">
+                  <FilterSite
+                    value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                    options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+                </div>
+              </>
+            )
           }
         </div>
-        <div className="checkboxes">
-          <span className="mr-10">{gettext('Show URIs:')}</span>
-          <Checkbox label={<code className="code-tasks">{gettext('Tasks')}</code>}
-                    value={get(config, 'display.uri.tasks', true)} onChange={updateDisplayTasksURI} />
-          <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                    value={get(config, 'display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
+        <div className="input-group input-group-sm">
+          <label className="input-group-text">{gettext('Show URIs')}</label>
+          <button type="button" onClick={updateDisplayUriTasks} className={btnClass(displayUriTasks)}>
+            {gettext('Tasks')}
+          </button>
+          <button type="button" onClick={updateDisplayUriConditions} className={btnClass(displayUriConditions)}>
+            {gettext('Conditions')}
+          </button>
         </div>
-
       </div>
 
-      <ul className="list-group">
       {
-        tasks.map((task, index) => (
-          <Task key={index} config={config} task={task}
-                configActions={configActions} elementActions={elementActions}
-                filter="tasks" filterSites={true} filterEditors={true} />
-        ))
+        !isEmpty(tasks) && (
+          <ul className="list-group list-group-flush">
+            {
+              tasks.map((task, index) => (
+                <Task
+                  key={index} config={config} task={task}
+                  filter="tasks" filterSites={true} filterEditors={true} />
+              ))
+            }
+          </ul>
+
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Tasks.propTypes = {
-  config: PropTypes.object.isRequired,
-  tasks: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Tasks
diff --git a/rdmo/management/assets/js/components/elements/Views.js b/rdmo/management/assets/js/components/elements/Views.js
index 2da62e7ee7..2cdc1a9892 100644
--- a/rdmo/management/assets/js/components/elements/Views.js
+++ b/rdmo/management/assets/js/components/elements/Views.js
@@ -1,76 +1,99 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { createElement } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix, FilterSite} from '../common/Filter'
 import { BackButton, NewButton } from '../common/Buttons'
-
+import { FilterSite, FilterString, FilterUriPrefix} from '../common/Filter'
 import View from '../element/View'
 
-const Views = ({ config, views, configActions, elementActions }) => {
+const Views = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+  const views = useSelector((state) => state.elements.views)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.views.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.views.uri_prefix', value))
+  const updateFilterSite = (value) => dispatch(updateConfig('filter.sites', value))
+  const updateFilterEditor = (value) => dispatch(updateConfig('filter.editors', value))
+
+  const displayUriViews = isTruthy(get(config, 'display.uri.views', true))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.views.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.views.uri_prefix', value)
-  const updateFilterSite = (value) => configActions.updateConfig('filter.sites', value)
-  const updateFilterEditor = (value) => configActions.updateConfig('filter.editors', value)
+  const updateDisplayUriViews = () => dispatch(updateConfig('display.uri.views', !displayUriViews))
 
-  const createView = () => elementActions.createElement('views')
+  const createView = () => dispatch(createElement('views'))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="panel panel-default">
-      <div className="panel-heading">
-        <div className="pull-right">
+    <div className="card card-tile">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong className="me-auto">{gettext('Views')}</strong>
           <BackButton />
           <NewButton onClick={createView} />
         </div>
-        <strong>{gettext('Views')}</strong>
       </div>
 
-      <div className="panel-body">
+      <div className="card-body">
         <div className="row">
           <div className={config.settings.multisite ? 'col-sm-4' : 'col-sm-8'}>
-            <FilterString value={get(config, 'filter.views.search', '')} onChange={updateFilterString}
-                          label={gettext('Filter views')} />
+            <FilterString
+              value={get(config, 'filter.views.search', '')} onChange={updateFilterString}
+              label={gettext('Filter views')} />
           </div>
           <div className="col-sm-4">
-            <FilterUriPrefix value={get(config, 'filter.views.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                             options={getUriPrefixes(views)} />
+            <FilterUriPrefix
+              value={get(config, 'filter.views.uri_prefix', '')} onChange={updateFilterUriPrefix}
+              options={getUriPrefixes(views)} />
           </div>
           {
-            config.settings.multisite && <>
-              <div className="col-sm-2">
-                <FilterSite value={get(config, 'filter.sites', '')} onChange={updateFilterSite}
-                            options={config.sites} />
-              </div>
-              <div className="col-sm-2">
-                <FilterSite value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
-                            options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
-              </div>
-            </>
+            config.settings.multisite && (
+              <>
+                <div className="col-sm-2">
+                  <FilterSite
+                    value={get(config, 'filter.sites', '')} onChange={updateFilterSite}
+                    options={config.sites} />
+                </div>
+                <div className="col-sm-2">
+                  <FilterSite
+                    value={get(config, 'filter.editors', '')} onChange={updateFilterEditor}
+                    options={config.sites} label={gettext('Filter editors')} allLabel={gettext('All editors')} />
+                </div>
+              </>
+            )
           }
         </div>
+        <div className="input-group input-group-sm">
+          <label className="input-group-text">{gettext('Show URIs')}</label>
+          <button type="button" onClick={updateDisplayUriViews} className={btnClass(displayUriViews)}>
+            {gettext('Views')}
+          </button>
+        </div>
       </div>
 
-      <ul className="list-group">
       {
-        views.map((view, index) => (
-          <View key={index} config={config} view={view}
-                configActions={configActions} elementActions={elementActions}
-                filter="views" filterSites={true} filterEditors={true} />
-        ))
+        !isEmpty(views) && (
+          <ul className="list-group list-group-flush">
+            {
+              views.map((view, index) => (
+                <View
+                  key={index} config={config} view={view}
+                  filter="views" filterSites={true} filterEditors={true} />
+              ))
+            }
+          </ul>
+        )
       }
-      </ul>
     </div>
   )
 }
 
-Views.propTypes = {
-  config: PropTypes.object.isRequired,
-  views: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
 export default Views
diff --git a/rdmo/management/assets/js/components/import/Import.js b/rdmo/management/assets/js/components/import/Import.js
new file mode 100644
index 0000000000..0301c2b7da
--- /dev/null
+++ b/rdmo/management/assets/js/components/import/Import.js
@@ -0,0 +1,75 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import get from 'lodash/get'
+
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { useImportElements } from '../../hooks/useImportElements'
+import filterElements from '../../utils/importFilters'
+
+import ErrorsAggregated from './common/ErrorsAggregated'
+import ImportFilters from './common/ImportFilters'
+import ImportInfo from './common/ImportInfo'
+import WarningsAggregated from './common/WarningsAggregated'
+
+import ImportElement from './ImportElement'
+import ImportSuccessElement from './ImportSuccessElement'
+
+
+const Import = () => {
+  const config = useSelector((state) => state.config)
+  const { file, elements, success } = useSelector((state) => state.imports)
+
+  // the elements are already processed by processElementDiffs in the importsReducer
+  const {
+    createdElements,
+    updatedElements,
+    changedElements,
+    importWarnings,
+    importErrors
+  } = useImportElements(elements)
+
+  const searchString = get(config, 'filter.import.elements.search', '')
+  const selectedUriPrefix = get(config, 'filter.import.elements.uri_prefix', '')
+  const selectFilterChanged = isTruthy(get(config, 'filter.import.elements.changed', false))
+
+  const filteredElements = filterElements(elements, selectFilterChanged, selectedUriPrefix, searchString)
+
+  return (
+    <div className="card">
+      <div className="card-header">
+        <div className="d-flex align-items-center gap-2">
+          <strong>{gettext('Import from')}</strong>
+          <div className="flex-grow-1">
+            <code className="code-import">{file.name}</code>
+          </div>
+
+          <ImportInfo
+            elementsLength={elements.length} createdLength={createdElements.length}
+            updatedLength={updatedElements.length} changedLength={changedElements.length}
+            warningsLength={importWarnings.length} errorsLength={importErrors.length}/>
+        </div>
+      </div>
+      <div className="card-body">
+        <ImportFilters
+          elements={elements} changedElements={changedElements}
+          filteredElements={filteredElements} success={success} />
+        <WarningsAggregated elements={importWarnings} />
+        <ErrorsAggregated elements={importErrors} />
+      </div>
+      <ul className="list-group list-group-flush">
+        {
+          filteredElements.map((element, index) => {
+            if (success) {
+              return <ImportSuccessElement key={index} element={element} />
+            } else {
+              return <ImportElement key={index} element={element} />
+            }
+          })
+        }
+      </ul>
+    </div>
+  )
+}
+
+export default Import
diff --git a/rdmo/management/assets/js/components/import/ImportAggregatedErrorsPanel.js b/rdmo/management/assets/js/components/import/ImportAggregatedErrorsPanel.js
deleted file mode 100644
index eedb678dee..0000000000
--- a/rdmo/management/assets/js/components/import/ImportAggregatedErrorsPanel.js
+++ /dev/null
@@ -1,57 +0,0 @@
-// ImportAggregatedErrorsPanel.js
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ShowLink } from '../common/Links'
-import { generateErrorMessageListItems } from './common/ErrorsListGroup'
-import get from 'lodash/get'
-import {isTruthy} from 'rdmo/core/assets/js/utils/config'
-
-// Function to aggregate unique errors from elements
-const aggregateUniqueErrors = (elements) => {
-  const allErrors = elements.reduce((acc, element) => {
-    return acc.concat(element.errors)
-  }, [])
-
-  // Filter out duplicate errors
-  const uniqueErrors = [...new Set(allErrors)]
-
-  return uniqueErrors
-}
-
-const ImportAggregatedErrorsPanel = ({ config, elements, configActions }) => {
-  const updateShowErrors = () => {
-    const currentVal = isTruthy(get(config, 'filter.import.errors.show', false))
-    configActions.updateConfig('filter.import.errors.show', !currentVal)
-  }
-
-  const showErrors = isTruthy(get(config, 'filter.import.errors.show', false))
-
-  // Aggregate all unique errors into a single flat array
-  const uniqueErrors = aggregateUniqueErrors(elements)
-
-  const errorsHeadingText = <strong onClick={updateShowErrors}>{gettext('Errors')} ({elements.length}) :</strong>
-
-  return ( uniqueErrors.length > 0 &&
-    <div className="panel panel-danger panel-import-errors mt-10">
-      <div className="panel-heading" onClick={updateShowErrors}>
-        {errorsHeadingText}
-        <div className="pull-right">
-          <ShowLink show={showErrors} onClick={() => {}}/>
-        </div>
-      </div>
-      {showErrors && (
-        <ul className="list-group mb-5 pb-5 pt-5 pl-5 pr-5">
-          {generateErrorMessageListItems(uniqueErrors)}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-ImportAggregatedErrorsPanel.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired
-}
-
-export default ImportAggregatedErrorsPanel
diff --git a/rdmo/management/assets/js/components/import/ImportAggregatedWarningsPanel.js b/rdmo/management/assets/js/components/import/ImportAggregatedWarningsPanel.js
deleted file mode 100644
index 199a04a8d0..0000000000
--- a/rdmo/management/assets/js/components/import/ImportAggregatedWarningsPanel.js
+++ /dev/null
@@ -1,57 +0,0 @@
-// ImportAggregatedWarningsPanel.js
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ShowLink } from '../common/Links'
-import { generateWarningListItems } from './common/WarningsListGroup'
-import {isTruthy} from 'rdmo/core/assets/js/utils/config'
-import get from 'lodash/get'
-
-// Function to aggregate warnings from elements
-const aggregateWarnings = (elements) => {
-  return elements.reduce((acc, element) => {
-    Object.entries(element.warnings).forEach(([uri, messages]) => {
-      acc.push({ elementWarnings: { [uri]: messages }, elementModel: element.model, elementURI: element.uri })
-    })
-    return acc
-  }, [])
-}
-
-const ImportAggregatedWarningsPanel = ({ config, elements, configActions }) => {
-  const updateShowWarnings = () => {
-    const currentVal = isTruthy(get(config, 'filter.import.warnings.show', false))
-    configActions.updateConfig('filter.import.warnings.show', !currentVal)
-  }
-
-  const showWarnings = isTruthy(get(config, 'filter.import.warnings.show', false))
-
-  // Aggregate all warnings into a single list
-  const aggregatedWarnings = aggregateWarnings(elements)
-
-  const warningsHeadingText = <strong onClick={updateShowWarnings}>{gettext('Warnings')} ({elements.length}):</strong>
-
-  return ( aggregatedWarnings.length > 0 &&
-    <div className="panel panel-warning panel-import-warnings mt-10">
-      <div className="panel-heading" onClick={updateShowWarnings}>
-        {warningsHeadingText}
-        <div className="pull-right">
-          <ShowLink show={showWarnings} onClick={() => {}}/>
-        </div>
-      </div>
-      {showWarnings && (
-        <ul className="list-group mb-5 pb-5 pt-5 pl-5 pr-5">
-          {aggregatedWarnings.map(({ elementWarnings, elementModel, elementURI }) =>
-            generateWarningListItems(elementWarnings, elementModel, elementURI)
-          )}
-        </ul>
-      )}
-    </div>
-  )
-}
-
-ImportAggregatedWarningsPanel.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired
-}
-
-export default ImportAggregatedWarningsPanel
diff --git a/rdmo/management/assets/js/components/import/ImportElement.js b/rdmo/management/assets/js/components/import/ImportElement.js
index 5ce87ba27c..7dde4e4024 100644
--- a/rdmo/management/assets/js/components/import/ImportElement.js
+++ b/rdmo/management/assets/js/components/import/ImportElement.js
@@ -1,39 +1,44 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
+import { isEmpty } from 'lodash'
 
-import {isEmpty} from 'lodash'
+import { updateElement } from '../../actions/importActions'
 
 import {
-  WarningLink,
-  ErrorLink,
-  ShowLink,
   AvailableLink,
+  ErrorLink,
   LockedLink,
+  ShowLink,
+  WarningLink,
 } from '../common/Links'
-import ImportSelectCheckbox from './common/ImportSelectCheckbox'
-import Errors from './common/Errors'
 
-import Warnings from './common/Warnings'
+import Errors from './common/Errors'
 import Fields from './common/Fields'
 import Form from './common/Form'
+import ImportSelectCheckbox from './common/ImportSelectCheckbox'
+import Warnings from './common/Warnings'
 
 
-const ImportElement = ({ config, element, importActions }) => {
-  const updateShowField = () => importActions.updateElement(element, {show: !element.show})
-  const toggleImport = () => importActions.updateElement(element, {import: !element.import})
-  const updateElement = (key, value) => importActions.updateElement(element, {[key]: value})
-  const toggleAvailable = () => importActions.updateElement(element, {available: !element.available})
+const ImportElement = ({ element }) => {
+  const dispatch = useDispatch()
+
+  const updateShowField = () => dispatch(updateElement(element, {show: !element.show}))
+  const toggleImport = () => dispatch(updateElement(element, {import: !element.import}))
+  const toggleAvailable = () => dispatch(updateElement(element, {available: !element.available}))
 
   return (
     <li className="list-group-item">
+      <div className="d-flex align-items-center gap-2">
+        <ImportSelectCheckbox element={element} toggleImport={toggleImport} updateShowField={updateShowField} />
 
-      <div className="pull-right">
         {
-          (isEmpty(element.errors) && ('available' in element)) &&
-           <AvailableLink available={element.available}
-                          locked={element.locked} onClick={toggleAvailable}
-                          title={element.available ? gettext('Make unavailable')
-                                         : gettext('Make available')}/>
+          (isEmpty(element.errors) && ('available' in element)) && (
+            <AvailableLink
+              available={element.available}
+              locked={element.locked} onClick={toggleAvailable}
+              title={element.available ? gettext('Make unavailable') : gettext('Make available')} />
+          )
         }
         {
           !isEmpty(element.warnings) &&
@@ -44,34 +49,34 @@ const ImportElement = ({ config, element, importActions }) => {
           <ErrorLink onClick={updateShowField} />
         }
         {
-          (element.updated && element.locked) &&
-          <LockedLink title={gettext('Locked')}
-                      locked={element.locked} onClick={updateShowField} disabled={true} />
-
+          (element.updated && element.locked) && (
+            <LockedLink
+              title={gettext('Locked')}
+              locked={element.locked} onClick={updateShowField} disabled={true} />
+          )
         }
         <ShowLink show={element.show} onClick={updateShowField} />
       </div>
 
-      <ImportSelectCheckbox element={element} toggleImport={toggleImport} updateShowField={updateShowField} />
-
       {
-        element.show && <>
-          <Form config={config} element={element} updateElement={updateElement} />
-          <Fields element={element} />
-          <Errors elementErrors={element.errors} />
-          <Warnings elementWarnings={element.warnings}
-                    elementModel={element.model} elementURI={element.uri}
-                    showTitle={true} shouldShowURI={false} />
-        </>
+        element.show && (
+          <div className="mt-2">
+            <Errors elementErrors={element.errors} />
+            <Warnings
+              elementWarnings={element.warnings}
+              elementModel={element.model} elementURI={element.uri}
+              showTitle={true} shouldShowURI={false} />
+            <Form element={element} />
+            <Fields element={element} />
+          </div>
+        )
       }
     </li>
   )
 }
 
 ImportElement.propTypes = {
-  config: PropTypes.object.isRequired,
-  element: PropTypes.object.isRequired,
-  importActions: PropTypes.object.isRequired
+  element: PropTypes.object.isRequired
 }
 
 export default ImportElement
diff --git a/rdmo/management/assets/js/components/import/ImportSuccessElement.js b/rdmo/management/assets/js/components/import/ImportSuccessElement.js
index 29eb616940..c5c3798a71 100644
--- a/rdmo/management/assets/js/components/import/ImportSuccessElement.js
+++ b/rdmo/management/assets/js/components/import/ImportSuccessElement.js
@@ -1,52 +1,66 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
 import { isEmpty } from 'lodash'
 
+import { updateElement } from '../../actions/importActions'
 import { codeClass, verboseNames } from '../../constants/elements'
-import Warnings from './common/Warnings'
-import Errors from './common/Errors'
-import {ChangedLabel, CreatedLabel} from './common/ImportLabels'
 
+import Errors from './common/Errors'
+import Warnings from './common/Warnings'
 
+const ImportSuccessElement = ({ element }) => {
+  const dispatch = useDispatch()
 
-const ImportSuccessElement = ({ element, importActions }) => {
+  const updateShowField = () => dispatch(updateElement(element, { show: !element.show }))
 
-  const updateShowField = () => importActions.updateElement(element, { show: !element.show })
   const changedLabelText = gettext('Changed')
   const createdLabelText = gettext('Created')
 
   return (
     <li className="list-group-item">
-      <div className="mb-5">
-        <strong>{verboseNames[element.model]}{' '}</strong>
+      <div className="d-flex align-items-center gap-2">
+        <strong>{verboseNames[element.model]}</strong>
         <code className={codeClass[element.model]}>{element.uri}</code>
 
-        <ChangedLabel text={changedLabelText} onClick={updateShowField} show={(element.changed && element.updated)} />
-
-        <CreatedLabel  text={createdLabelText} onClick={updateShowField} show={element.created} />
+        {
+          (element.changed && element.updated) && (
+            <span className="badge text-bg-info" onClick={updateShowField}>
+              {changedLabelText}
+            </span>
+          )
+        }
 
-       {
-        !isEmpty(element.errors) && (
-          <span className="text-danger">
-            {' '}{gettext('could not be imported')}
-            {(element.created || element.updated) && `, ${gettext('but could not be added to parent element')}`}
-            {'.'}
-          </span>
-        )
-      }
+        {
+          element.created && (
+            <span className="badge text-bg-success" onClick={updateShowField}>
+              {createdLabelText}
+            </span>
+          )
+        }
 
+        {
+          !isEmpty(element.errors) && (
+            <span className="text-danger">
+              {' '}{gettext('could not be imported')}
+              {(element.created || element.updated) && `, ${gettext('but could not be added to parent element')}`}
+              {'.'}
+            </span>
+          )
+        }
       </div>
+
       <Errors elementErrors={element.errors} />
-      <Warnings elementWarnings={element.warnings}
-                elementModel={element.model} elementURI={element.uri}
-                showTitle={true} shouldShowURI={false} />
+      <Warnings
+        elementWarnings={element.warnings}
+        elementModel={element.model} elementURI={element.uri}
+        showTitle={true} shouldShowURI={false} />
     </li>
   )
 }
 
 ImportSuccessElement.propTypes = {
-  element: PropTypes.object.isRequired,
-  importActions: PropTypes.object.isRequired
+  element: PropTypes.object.isRequired
 }
 
 export default ImportSuccessElement
diff --git a/rdmo/management/assets/js/components/import/common/Errors.js b/rdmo/management/assets/js/components/import/common/Errors.js
index 35af668236..96c4d010be 100644
--- a/rdmo/management/assets/js/components/import/common/Errors.js
+++ b/rdmo/management/assets/js/components/import/common/Errors.js
@@ -1,16 +1,16 @@
-// Errors.js
 import React from 'react'
 import PropTypes from 'prop-types'
-import ErrorsListGroup from './ErrorsListGroup'
 import isUndefined from 'lodash/isUndefined'
 
+import ErrorsListGroup from './ErrorsListGroup'
+
 const Errors = ({ elementErrors }) => {
   const show = !isUndefined(elementErrors) &&  elementErrors.length > 0
   const errorsHeadingText = <strong>{gettext('Errors')}</strong>
 
   return show && (
-    <div className="panel panel-danger mt-10 mb-0">
-      <div className="panel-heading">{errorsHeadingText}</div>
+    <div className="card text-bg-danger my-2">
+      <div className="card-header">{errorsHeadingText}</div>
       <ErrorsListGroup elementErrors={elementErrors} />
     </div>
   )
diff --git a/rdmo/management/assets/js/components/import/common/ErrorsAggregated.js b/rdmo/management/assets/js/components/import/common/ErrorsAggregated.js
new file mode 100644
index 0000000000..a6e50d8ee6
--- /dev/null
+++ b/rdmo/management/assets/js/components/import/common/ErrorsAggregated.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get } from 'lodash'
+
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { generateErrorMessageListItems } from './ErrorsListGroup'
+
+// Function to aggregate unique errors from elements
+const aggregateUniqueErrors = (elements) => {
+  const allErrors = elements.reduce((acc, element) => {
+    return acc.concat(element.errors)
+  }, [])
+
+  // Filter out duplicate errors
+  const uniqueErrors = [...new Set(allErrors)]
+
+  return uniqueErrors
+}
+
+const ErrorsAggregated = ({ elements }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+
+  const updateShowErrors = () => {
+    const currentVal = isTruthy(get(config, 'filter.import.errors.show', false))
+    dispatch(updateConfig('filter.import.errors.show', !currentVal))
+  }
+
+  const showErrors = isTruthy(get(config, 'filter.import.errors.show', false))
+
+  // Aggregate all unique errors into a single flat array
+  const uniqueErrors = aggregateUniqueErrors(elements)
+
+  const errorsHeadingText = <strong onClick={updateShowErrors}>{gettext('Errors')} ({elements.length}) :</strong>
+
+  return ( uniqueErrors.length > 0 && (
+    <div className="card text-bg-danger mt-2">
+      <div className="card-header cursor-pointer" onClick={updateShowErrors}>
+        <div className="d-flex align-items-center">
+          <div className="flex-grow-1">
+            {errorsHeadingText}
+          </div>
+          <span className={classNames('bi', {'bi-chevron-down': !showErrors, 'bi-chevron-up': showErrors})}></span>
+        </div>
+      </div>
+      {
+        showErrors && (
+          <ul className="list-group list-group-flush">
+            {generateErrorMessageListItems(uniqueErrors)}
+          </ul>
+        )
+      }
+    </div>
+  )
+  )
+}
+
+ErrorsAggregated.propTypes = {
+  elements: PropTypes.array.isRequired
+}
+
+export default ErrorsAggregated
diff --git a/rdmo/management/assets/js/components/import/common/ErrorsListGroup.js b/rdmo/management/assets/js/components/import/common/ErrorsListGroup.js
index c6f209938b..c8137120ec 100644
--- a/rdmo/management/assets/js/components/import/common/ErrorsListGroup.js
+++ b/rdmo/management/assets/js/components/import/common/ErrorsListGroup.js
@@ -6,10 +6,8 @@ import uniqueId from 'lodash/uniqueId'
 // Helper function to generate error messages
 export const generateErrorMessageListItems = (messages) =>
   messages.map(message => (
-    <li className="list-group-item text-danger" key={uniqueId('error-message')}>
-      <div className="text-danger">
-        {message}
-      </div>
+    <li className="list-group-item" key={uniqueId('error-message')}>
+      {message}
     </li>
   ))
 
@@ -18,7 +16,7 @@ const ErrorsListGroup = ({ elementErrors }) => {
   const uniqueErrors = [...new Set(elementErrors)]
 
   return (
-    <ul className="list-group">
+    <ul className="list-group list-group-flush">
       {generateErrorMessageListItems(uniqueErrors)}
     </ul>
   )
diff --git a/rdmo/management/assets/js/components/import/common/FieldRow.js b/rdmo/management/assets/js/components/import/common/Field.js
similarity index 50%
rename from rdmo/management/assets/js/components/import/common/FieldRow.js
rename to rdmo/management/assets/js/components/import/common/Field.js
index 33a9229763..3663e6693c 100644
--- a/rdmo/management/assets/js/components/import/common/FieldRow.js
+++ b/rdmo/management/assets/js/components/import/common/Field.js
@@ -1,23 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import uniqueId from 'lodash/uniqueId'
-import FieldRowValue from './FieldRowValue'
+
 import FieldRowDiffs from './FieldRowDiffs'
+import FieldRowValue from './FieldRowValue'
 
 const FieldRow = ({ element, keyName, value }) => {
 
   return (
-    <div>
-      <div className="row" key={uniqueId()}>
-        <div className="col-sm-3 mb-5 mt-5">
-          <code className="code-import">{keyName}</code>
-        </div>
-      </div>
-      <div className="row" key={uniqueId()}>
+    <div className="import-card card mb-2">
+      <div className="card-body">
+        <small>{keyName}</small>
+
         <FieldRowValue value={value} />
-        {element.updated && element.changed && keyName in element.updated_and_changed && (
-          <FieldRowDiffs element={element} field={keyName} />
-        )}
+
+        {
+          element.updated && element.changed && keyName in element.updated_and_changed && (
+            <FieldRowDiffs element={element} field={keyName} />
+          )
+        }
       </div>
     </div>
   )
diff --git a/rdmo/management/assets/js/components/import/common/FieldRowDiffs.js b/rdmo/management/assets/js/components/import/common/FieldRowDiffs.js
index 8bfe470552..058cbf8695 100644
--- a/rdmo/management/assets/js/components/import/common/FieldRowDiffs.js
+++ b/rdmo/management/assets/js/components/import/common/FieldRowDiffs.js
@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import isEmpty from 'lodash/isEmpty'
 import ReactDiffViewer from 'react-diff-viewer-continued'
+import isEmpty from 'lodash/isEmpty'
 
-import Warnings from './Warnings'
 import Errors from './Errors'
+import Warnings from './Warnings'
 
 const FieldRowDiffs = ({ element, field }) => {
   if (isEmpty(element.updated_and_changed[field])) {
-      return null
+    return null
   }
   const fieldDiffData = element.updated_and_changed[field]
   const newVal = fieldDiffData.newValue.toString() ?? ''
@@ -32,31 +32,34 @@ const FieldRowDiffs = ({ element, field }) => {
     },
   }
 
-  return (changed &&
-     <div className="field-diff col-sm-12 mt-10 mb-10">
+  return (changed && (
+    <div className="field-diff mt-1">
       <ReactDiffViewer
-          styles={newStyles}
-          oldValue={oldVal}
-          newValue={newVal}
-          splitView={splitView}
-          hideLineNumbers={hideLineNumbers}
-          // leftTitle={leftTitle}
-          // rightTitle={rightTitle}
-          >
-          </ReactDiffViewer>
+        styles={newStyles}
+        oldValue={oldVal}
+        newValue={newVal}
+        splitView={splitView}
+        hideLineNumbers={hideLineNumbers}
+      />
       {
-        !isEmpty(warnings) && <>
-          <Warnings elementWarnings={fieldDiffData.warnings}
-                    elementModel={element.model} elementURI={element.uri}
-                    showTitle={true} shouldShowURI={false}/>
-        </>
+        !isEmpty(warnings) && (
+          <>
+            <Warnings
+              elementWarnings={fieldDiffData.warnings}
+              elementModel={element.model} elementURI={element.uri}
+              showTitle={true} shouldShowURI={false}/>
+          </>
+        )
       }
       {
-        !isEmpty(errors) && <>
-          <Errors element={fieldDiffData} />
-        </>
+        !isEmpty(errors) && (
+          <>
+            <Errors element={fieldDiffData} />
+          </>
+        )
       }
-      </div>
+    </div>
+  )
   )
 }
 
diff --git a/rdmo/management/assets/js/components/import/common/FieldRowValue.js b/rdmo/management/assets/js/components/import/common/FieldRowValue.js
index 7d633fd153..8eff710578 100644
--- a/rdmo/management/assets/js/components/import/common/FieldRowValue.js
+++ b/rdmo/management/assets/js/components/import/common/FieldRowValue.js
@@ -1,26 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import uniqueId from 'lodash/uniqueId'
-import isString from 'lodash/isString'
 import isPlainObject from 'lodash/isPlainObject'
+import isString from 'lodash/isString'
 import isUndefined from 'lodash/isUndefined'
 import truncate from 'lodash/truncate'
-import {codeClass} from '../../../constants/elements'
+import uniqueId from 'lodash/uniqueId'
+
+import { codeClass } from '../../../constants/elements'
 
 
 const FieldRowValue = ({ value }) => {
   return  (
-    <div className="col-sm-12">
+    <div className="mt-1">
       {
         Array.isArray(value) && (
-        <ul className="list-unstyled mb-0">
-          {value.map((el) => (
-            <li key={uniqueId()}>
-              <code className={codeClass[el.model]}>{el.uri}</code>
-            </li>
-          ))}
-        </ul>
-      )
+          <ul className="list-unstyled">
+            {
+              value.map((el) => (
+                <li key={uniqueId()}>
+                  <code className={codeClass[el.model]}>{el.uri}</code>
+                </li>
+              ))
+            }
+          </ul>
+        )
       }
       {
         isPlainObject(value) && !isUndefined(value.uri) &&
diff --git a/rdmo/management/assets/js/components/import/common/Fields.js b/rdmo/management/assets/js/components/import/common/Fields.js
index f49217bebd..835e2ba4db 100644
--- a/rdmo/management/assets/js/components/import/common/Fields.js
+++ b/rdmo/management/assets/js/components/import/common/Fields.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import uniqueId from 'lodash/uniqueId'
-import FieldRow from './FieldRow'
 import isString from 'lodash/isString'
 
+import Field from './Field'
+
 const excludeKeys = [
   'import',
   'key',
@@ -38,18 +38,20 @@ export const serializeValue = (value) => {
 const Fields = ({ element }) => {
 
   return (
-    <div className="mt-10">
-      {Object.entries(element)
-        .sort()
-        .map(([key, value]) => {
-          if (!excludeKeys.includes(key)) {
-            const serializedValue = serializeValue(value)
-            if (serializedValue !== '' || (element.changedFields?.includes(key))) {
-              return <FieldRow key={uniqueId()} element={element} keyName={key} value={serializedValue} />
+    <div>
+      {
+        Object.entries(element)
+          .sort()
+          .map(([key, value]) => {
+            if (!excludeKeys.includes(key)) {
+              const serializedValue = serializeValue(value)
+              if (serializedValue !== '' || (element.changedFields?.includes(key))) {
+                return <Field key={key} element={element} keyName={key} value={serializedValue} />
+              }
             }
-          }
-          return null
-        })}
+            return null
+          })
+      }
     </div>
   )
 }
diff --git a/rdmo/management/assets/js/components/import/common/Form.js b/rdmo/management/assets/js/components/import/common/Form.js
index fa872b4efa..effa9d22cc 100644
--- a/rdmo/management/assets/js/components/import/common/Form.js
+++ b/rdmo/management/assets/js/components/import/common/Form.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
 import isUndefined from 'lodash/isUndefined'
 
+import { updateElement } from '../../../actions/importActions'
+
 import Key from './Key'
 import UriPath from './UriPath'
 import UriPrefix from './UriPrefix'
 
-const Form = ({ config, element, updateElement }) => {
+const Form = ({ element }) => {
+  const dispatch = useDispatch()
+
+  const handleChange = (key, value) => dispatch(updateElement(element, { [key]: value }))
+
   return (
-    <div className="row mt-10">
+    <div className="row">
       <div className="col-sm-6">
-        <UriPrefix config={config} element={element} onChange={updateElement} />
+        <UriPrefix element={element} onChange={handleChange} />
       </div>
       <div className="col-sm-6">
         {
-          isUndefined(element.uri_path) ? <Key config={config} element={element} onChange={updateElement} />
-                                        : <UriPath config={config} element={element} onChange={updateElement} />
+          isUndefined(element.uri_path) ? (
+            <Key element={element} onChange={handleChange} />
+          ) : <UriPath element={element} onChange={handleChange} />
         }
       </div>
     </div>
@@ -23,9 +31,7 @@ const Form = ({ config, element, updateElement }) => {
 }
 
 Form.propTypes = {
-  config: PropTypes.object.isRequired,
-  element: PropTypes.object.isRequired,
-  updateElement: PropTypes.func.isRequired
+  element: PropTypes.object.isRequired
 }
 
 export default Form
diff --git a/rdmo/management/assets/js/components/import/common/ImportFilters.js b/rdmo/management/assets/js/components/import/common/ImportFilters.js
index a53cda74c6..d96593d35c 100644
--- a/rdmo/management/assets/js/components/import/common/ImportFilters.js
+++ b/rdmo/management/assets/js/components/import/common/ImportFilters.js
@@ -1,56 +1,75 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {FilterString, FilterUriPrefix} from '../../common/Filter'
-import get from 'lodash/get'
-import {getUriPrefixes} from '../../../utils/filter'
-import {Checkbox} from '../../common/Checkboxes'
-
-const ImportFilters = ({ config, elements, changedElements, filteredElements, configActions, success= false}) => {
-  const updateFilterString = (value) => configActions.updateConfig('filter.import.elements.search', value)
-  const getValueFilterString = () => get(config, 'filter.import.elements.search', '')
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.import.elements.uri_prefix', value)
-  const getValueFilterUriPrefix = () => get(config, 'filter.import.elements.uri_prefix', '')
-  const updateFilterChanged = (value) => configActions.updateConfig('filter.import.elements.changed', value)
-  const getValueFilterChanged = () => get(config, 'filter.import.elements.changed', false)
+import { useDispatch, useSelector } from 'react-redux'
+import { get, isEmpty } from 'lodash'
+
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { getUriPrefixes } from '../../../utils/filter'
+
+import { FilterString, FilterUriPrefix } from '../../common/Filter'
+
+const ImportFilters = ({ elements, changedElements, filteredElements, success = false }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+
+  const filterString = get(config, 'filter.import.elements.search', '')
+  const filterUriPrefix = get(config, 'filter.import.elements.uri_prefix', '')
+  const filterChanged = isTruthy(get(config, 'filter.import.elements.changed', false))
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.import.elements.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.import.elements.uri_prefix', value))
+  const updateFilterChanged = () => dispatch(updateConfig('filter.import.elements.changed', !filterChanged))
 
   const filterCheckBoxText = interpolate(
-    success ? gettext('Show only created and changed elements (%s)')
-            : gettext('Show only new and changed elements (%s)'),
+    success ? (
+      gettext('Show only created and changed elements (%s)')
+    ) : gettext('Show only new and changed elements (%s)'),
     [changedElements.length]
   )
 
-  return ( elements.length > 0 &&
-    <div className="row">
-      <div className={'col-sm-8'}>
-        <FilterString value={getValueFilterString()} onChange={updateFilterString}
-                      label={gettext('Filter URI')}/>
-      </div>
-      <div className="col-sm-4">
-        <FilterUriPrefix value={getValueFilterUriPrefix()}
-                         onChange={updateFilterUriPrefix}
-                         options={getUriPrefixes(elements)}/>
-      </div>
-
-      {elements.length > 0 && (
-        <div className="horizontal-container">
-          <div className="checkboxes">
-            <Checkbox label={filterCheckBoxText}
-                      value={getValueFilterChanged()} onChange={updateFilterChanged} />
-          </div>
-          <span className="shown-info">
-            {gettext('Shown')}: {filteredElements.length} / {elements.length}
-          </span>
+  return !isEmpty(elements) && (
+    <>
+      <div className="row">
+        <div className={'col-sm-8'}>
+          <FilterString
+            value={filterString} onChange={updateFilterString}
+            label={gettext('Filter URI')} />
         </div>
-      )}
-  </div>)
+        <div className="col-sm-4">
+          <FilterUriPrefix
+            value={filterUriPrefix}
+            onChange={updateFilterUriPrefix}
+            options={getUriPrefixes(elements)} />
+        </div>
+      </div>
+      {
+        elements.length > 0 && (
+          <>
+            <div className="form-check mb-2">
+              <input
+                className="form-check-input" type="checkbox" id="import-filter-changed"
+                checked={filterChanged} onChange={updateFilterChanged} />
+              <label className="form-check-label" htmlFor="import-filter-changed">
+                {filterCheckBoxText}
+              </label>
+            </div>
+            <div>
+              {gettext('Shown')}: {filteredElements.length} / {elements.length}
+            </div>
+          </>
+        )
+      }
+    </>
+  )
 }
 
 ImportFilters.propTypes = {
-  config: PropTypes.object.isRequired,
   elements: PropTypes.array.isRequired,
   changedElements: PropTypes.array.isRequired,
   filteredElements: PropTypes.array.isRequired,
-  configActions: PropTypes.object.isRequired,
   success: PropTypes.bool
 }
 
diff --git a/rdmo/management/assets/js/components/import/common/ImportInfo.js b/rdmo/management/assets/js/components/import/common/ImportInfo.js
index d1fbf9722b..b9c3e9f857 100644
--- a/rdmo/management/assets/js/components/import/common/ImportInfo.js
+++ b/rdmo/management/assets/js/components/import/common/ImportInfo.js
@@ -4,18 +4,18 @@ import {isUndefined} from 'lodash'
 
 const renderElementLengthInfo = (label, length) => (
   length > 0 && (
-    <span className='ml-5'>{gettext(label)}: {length} </span>
+    <span className="ml-5">{gettext(label)}: {length} </span>
   )
 )
 
 const ImportInfo = ({
-                      elementsLength,
-                      updatedLength,
-                      createdLength,
-                      changedLength,
-                      warningsLength,
-                      errorsLength
-                    }) => {
+  elementsLength,
+  updatedLength,
+  createdLength,
+  changedLength,
+  warningsLength,
+  errorsLength
+}) => {
   if (isUndefined(elementsLength) || elementsLength === 0) {
     return null
   }
diff --git a/rdmo/management/assets/js/components/import/common/ImportLabels.js b/rdmo/management/assets/js/components/import/common/ImportLabels.js
deleted file mode 100644
index b44fb7b3f1..0000000000
--- a/rdmo/management/assets/js/components/import/common/ImportLabels.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Label from 'rdmo/management/assets/js/components/common/Labels'
-
-const ChangedLabel = ({ text, onClick, show }) => {
-  return <Label text={text}
-                type="info"
-                onClick={onClick}
-                className={'ml-5'}
-                show={show} />
-}
-
-ChangedLabel.propTypes = {
-  text: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  show: PropTypes.bool,
-}
-
-const CreatedLabel = ({ text, onClick, show }) => {
-    return <Label text={text}
-                type="success"
-                onClick={onClick}
-                className={'ml-5'}
-                show={show} />
-}
-
-CreatedLabel.propTypes = {
-  text: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  show: PropTypes.bool,
-}
-
-export { ChangedLabel, CreatedLabel }
diff --git a/rdmo/management/assets/js/components/import/common/ImportSelectCheckbox.js b/rdmo/management/assets/js/components/import/common/ImportSelectCheckbox.js
index 53f4189301..beca7d5bd6 100644
--- a/rdmo/management/assets/js/components/import/common/ImportSelectCheckbox.js
+++ b/rdmo/management/assets/js/components/import/common/ImportSelectCheckbox.js
@@ -1,25 +1,49 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { uniqueId } from 'lodash'
+
+import { elementModules, verboseNames } from '../../../constants/elements'
+
 import { CodeLink } from '../../common/Links'
-import { codeClass, verboseNames } from '../../../constants/elements'
-import {ChangedLabel, CreatedLabel} from './ImportLabels'
 
 const ImportSelectCheckbox = ({ element, toggleImport, updateShowField }) => {
+  const id = uniqueId('import-checkbox-')
   const changedLabelText = gettext('Changed')
   const createdLabelText = gettext('New')
+
   return (
-    <div className="checkbox">
-    <label className="mr-5">
-      <input type="checkbox" checked={element.import} onChange={toggleImport} />
-      <strong>{verboseNames[element.model]}{' '}</strong>
-    </label>
-    <CodeLink className={codeClass[element.model]} uri={element.uri} onClick={updateShowField} />
-
-    <ChangedLabel text={changedLabelText} show={(element.changed && element.updated)} />
-
-    <CreatedLabel text={createdLabelText} show={element.created} />
-  </div>
-)}
+    <>
+      <div className="form-check">
+        <input
+          type="checkbox" htmlFor={id} className="form-check-input" checked={element.import}
+          onChange={toggleImport} />
+        <label className="form-check-label" htmlFor={id}>{verboseNames[element.model]}</label>
+      </div>
+
+      <CodeLink
+        className="flex-grow-1"
+        type={elementModules[element.model]}
+        uri={element.uri} onClick={updateShowField}
+      />
+
+      {
+        (element.changed && element.updated) && (
+          <span className="badge text-bg-info">
+            {changedLabelText}
+          </span>
+        )
+      }
+
+      {
+        element.created && (
+          <span className="badge text-bg-success">
+            {createdLabelText}
+          </span>
+        )
+      }
+    </>
+  )
+}
 
 ImportSelectCheckbox.propTypes = {
   element: PropTypes.object.isRequired,
diff --git a/rdmo/management/assets/js/components/import/common/Key.js b/rdmo/management/assets/js/components/import/common/Key.js
index fe63bac327..1436dd698f 100644
--- a/rdmo/management/assets/js/components/import/common/Key.js
+++ b/rdmo/management/assets/js/components/import/common/Key.js
@@ -3,17 +3,18 @@ import PropTypes from 'prop-types'
 import uniqueId from 'lodash/uniqueId'
 
 const Key = ({ element, onChange }) => {
-  const id = uniqueId('key-'),
-        value = element.key ?? ''
+  const id = uniqueId('key-')
+  const value = element.key ?? ''
 
   return (
-    <div className="form-group mb-0">
-      <label className="control-label" htmlFor={id}>
+    <div className="mb-2">
+      <label className="form-label" htmlFor={id}>
         <small>{gettext('Key')}</small>
       </label>
 
-      <input className="form-control input-sm" id={id} type="text"
-             value={value} onChange={event => onChange('key', event.target.value)} />
+      <input
+        className="form-control input-sm" id={id} type="text"
+        value={value} onChange={event => onChange('key', event.target.value)} />
     </div>
   )
 }
diff --git a/rdmo/management/assets/js/components/import/common/UriPath.js b/rdmo/management/assets/js/components/import/common/UriPath.js
index 62e9d99be1..a029ee94cc 100644
--- a/rdmo/management/assets/js/components/import/common/UriPath.js
+++ b/rdmo/management/assets/js/components/import/common/UriPath.js
@@ -3,17 +3,18 @@ import PropTypes from 'prop-types'
 import uniqueId from 'lodash/uniqueId'
 
 const UriPath = ({ element, onChange }) => {
-  const id = uniqueId('uriPath-'),
-        value = element.uri_path ?? ''
+  const id = uniqueId('uriPath-')
+  const value = element.uri_path ?? ''
 
   return (
-    <div className="form-group mb-0">
-      <label className="control-label" htmlFor={id}>
+    <div className="mb-2">
+      <label className="form-label" htmlFor={id}>
         <small>{gettext('URI path')}</small>
       </label>
 
-      <input className="form-control input-sm" id={id} type="text"
-             value={value} onChange={event => onChange('uri_path', event.target.value)} />
+      <input
+        className="form-control input-sm" id={id} type="text"
+        value={value} onChange={event => onChange('uri_path', event.target.value)} />
     </div>
   )
 }
diff --git a/rdmo/management/assets/js/components/import/common/UriPrefix.js b/rdmo/management/assets/js/components/import/common/UriPrefix.js
index f1660a406c..c7fcf728a0 100644
--- a/rdmo/management/assets/js/components/import/common/UriPrefix.js
+++ b/rdmo/management/assets/js/components/import/common/UriPrefix.js
@@ -1,35 +1,37 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import uniqueId from 'lodash/uniqueId'
 
-const UriPrefix = ({ config, element, onChange }) => {
-  const id = uniqueId('uriPrefix-'),
-        value = element.uri_prefix
+const UriPrefix = ({ element, onChange }) => {
+  const config = useSelector((state) => state.config)
+
+  const id = uniqueId('uriPrefix-')
+  const value = element.uri_prefix
 
   return (
-    <div className="form-group mb-0">
-      <label className="control-label" htmlFor={id}>
+    <div className="mb-2">
+      <label className="form-label" htmlFor={id}>
         <small>{gettext('URI prefix')}</small>
       </label>
 
       <div className="input-group">
-        <input className="form-control input-sm" id={id} type="text"
-               value={value} onChange={event => onChange('uri_prefix', event.target.value)} />
+        <input
+          className="form-control input-sm" id={id} type="text"
+          value={value} onChange={event => onChange('uri_prefix', event.target.value)} />
 
-        <span className="input-group-btn">
-          <button type="button" className="btn btn-default btn-sm"
-            title={gettext('Insert default URI Prefix')} aria-label={gettext('Insert default URI Prefix')}
-            onClick={() => onChange('uri_prefix', config.settings.default_uri_prefix)}>
-            <span className="fa fa-magic"></span>
-          </button>
-        </span>
+        <button
+          type="button" className="btn btn-sm btn-light border"
+          title={gettext('Insert default URI Prefix')} aria-label={gettext('Insert default URI Prefix')}
+          onClick={() => onChange('uri_prefix', config.settings.default_uri_prefix)}>
+          <span className="bi bi-magic"></span>
+        </button>
       </div>
     </div>
   )
 }
 
 UriPrefix.propTypes = {
-  config: PropTypes.object.isRequired,
   element: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired
 }
diff --git a/rdmo/management/assets/js/components/import/common/Warnings.js b/rdmo/management/assets/js/components/import/common/Warnings.js
index 109c9294be..5f11b1aad9 100644
--- a/rdmo/management/assets/js/components/import/common/Warnings.js
+++ b/rdmo/management/assets/js/components/import/common/Warnings.js
@@ -1,15 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import WarningsListGroup from './WarningsListGroup'
 import isUndefined from 'lodash/isUndefined'
 
-const Warnings = ({elementWarnings, elementModel, elementURI, shouldShowURI = true}) => {
+import WarningsListGroup from './WarningsListGroup'
+
+const Warnings = ({ elementWarnings, elementModel, elementURI, shouldShowURI = true }) => {
   const show = !isUndefined(elementWarnings) && Object.keys(elementWarnings).length > 0
   const warningsHeadingText = <strong>{gettext('Warnings')}</strong>
 
   return show && (
-    <div className="panel panel-warning mt-10 mb-0">
-      <div className="panel-heading">{warningsHeadingText}</div>
+    <div className="card text-bg-warning my-2">
+      <div className="card-header">{warningsHeadingText}</div>
       <WarningsListGroup
         elementWarnings={elementWarnings}
         elementModel={elementModel}
diff --git a/rdmo/management/assets/js/components/import/common/WarningsAggregated.js b/rdmo/management/assets/js/components/import/common/WarningsAggregated.js
new file mode 100644
index 0000000000..de8a0c583c
--- /dev/null
+++ b/rdmo/management/assets/js/components/import/common/WarningsAggregated.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get } from 'lodash'
+
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
+
+import { generateWarningListItems } from './WarningsListGroup'
+
+// Function to aggregate warnings from elements
+const aggregateWarnings = (elements) => {
+  return elements.reduce((acc, element) => {
+    Object.entries(element.warnings).forEach(([uri, messages]) => {
+      acc.push({ elementWarnings: { [uri]: messages }, elementModel: element.model, elementURI: element.uri })
+    })
+    return acc
+  }, [])
+}
+
+const WarningsAggregated = ({ elements }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+
+  const updateShowWarnings = () => {
+    const currentVal = isTruthy(get(config, 'filter.import.warnings.show', false))
+    dispatch(updateConfig('filter.import.warnings.show', !currentVal))
+  }
+
+  const showWarnings = isTruthy(get(config, 'filter.import.warnings.show', false))
+
+  // Aggregate all warnings into a single list
+  const aggregatedWarnings = aggregateWarnings(elements)
+
+  const warningsHeadingText = <strong onClick={updateShowWarnings}>{gettext('Warnings')} ({elements.length}):</strong>
+
+  return ( aggregatedWarnings.length > 0 && (
+    <div className="card text-bg-warning mt-2">
+      <div className="card-header cursor-pointer" onClick={updateShowWarnings}>
+        <div className="d-flex align-items-center">
+          <div className="flex-grow-1">
+            {warningsHeadingText}
+          </div>
+          <span className={classNames('bi', {'bi-chevron-down': !showWarnings, 'bi-chevron-up': showWarnings})}></span>
+        </div>
+      </div>
+      {
+        showWarnings && (
+          <ul className="list-group list-group-flush">
+            {
+              aggregatedWarnings.map(({ elementWarnings, elementModel, elementURI }) =>
+                generateWarningListItems(elementWarnings, elementModel, elementURI)
+              )
+            }
+          </ul>
+        )
+      }
+    </div>
+  )
+  )
+}
+
+WarningsAggregated.propTypes = {
+  elements: PropTypes.array.isRequired
+}
+
+export default WarningsAggregated
diff --git a/rdmo/management/assets/js/components/import/common/WarningsListGroup.js b/rdmo/management/assets/js/components/import/common/WarningsListGroup.js
index 7caf8c6d2d..c5d0ad3810 100644
--- a/rdmo/management/assets/js/components/import/common/WarningsListGroup.js
+++ b/rdmo/management/assets/js/components/import/common/WarningsListGroup.js
@@ -2,21 +2,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import uniqueId from 'lodash/uniqueId'
-import { codeClass, verboseNames } from '../../../constants/elements'
+
+import { elementModules, verboseNames } from '../../../constants/elements'
 
 // Helper function to generate warning messages
 export const generateWarningListItems = (elementWarnings, elementModel, elementURI, shouldShowURI = true) =>
   Object.values(elementWarnings).flatMap((messages) =>
     messages.map(message => (
       <li className="list-group-item" key={uniqueId('warning-uri-message')}>
-        {shouldShowURI && elementModel && elementURI && (
-          <>
-            <strong>{verboseNames[elementModel]}{' '}</strong>
-            <code className={codeClass[elementModel]}>{elementURI}</code>
-            <br />
-          </>
-        )}
-        <div className="text-warning">
+        {
+          shouldShowURI && elementModel && elementURI && (
+            <div className="mb-1">
+              <strong>{verboseNames[elementModel]}{' '}</strong>
+              <code className={elementModules[elementModel]}>{elementURI}</code>
+            </div>
+          )
+        }
+        <div>
           {message}
         </div>
       </li>
@@ -25,7 +27,7 @@ export const generateWarningListItems = (elementWarnings, elementModel, elementU
 
 const WarningsListGroup = ({ elementWarnings, elementModel, elementURI, shouldShowURI }) => {
   return (
-    <ul className="list-group">
+    <ul className="list-group list-group-flush">
       {generateWarningListItems(elementWarnings, elementModel, elementURI, shouldShowURI)}
     </ul>
   )
diff --git a/rdmo/management/assets/js/components/info/AttributeInfo.js b/rdmo/management/assets/js/components/info/AttributeInfo.js
index 9aac6441d2..e3ec3bd6a3 100644
--- a/rdmo/management/assets/js/components/info/AttributeInfo.js
+++ b/rdmo/management/assets/js/components/info/AttributeInfo.js
@@ -1,11 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const AttributeInfo = ({ attribute, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const AttributeInfo = ({ attribute }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [extendAttributes, toggleAttributes] = useBool(false)
   const [extendConditions, toggleConditions] = useBool(false)
@@ -21,110 +28,117 @@ const AttributeInfo = ({ attribute, elements, elementActions }) => {
   const questions = elements.questions.filter(e => attribute.questions.includes(e.id))
   const tasks = elements.tasks.filter(e => attribute.tasks.includes(e.id))
 
-  const fetchAttribute = (attribute) => elementActions.fetchElement('attributes', attribute.id)
-  const fetchCondition = (condition) => elementActions.fetchElement('conditions', condition.id)
-  const fetchPage = (page) => elementActions.fetchElement('pages', page.id)
-  const fetchQuestionSet = (questionset) => elementActions.fetchElement('questionsets', questionset.id)
-  const fetchQuestion = (question) => elementActions.fetchElement('questions', question.id)
-  const fetchTask = (task) => elementActions.fetchElement('tasks', task.id)
+  const fetchAttribute = (attribute) => dispatch(fetchElement('attributes', attribute.id))
+  const fetchCondition = (condition) => dispatch(fetchElement('conditions', condition.id))
+  const fetchPage = (page) => dispatch(fetchElement('pages', page.id))
+  const fetchQuestionSet = (questionset) => dispatch(fetchElement('questionsets', questionset.id))
+  const fetchQuestion = (question) => dispatch(fetchElement('questions', question.id))
+  const fetchTask = (task) => dispatch(fetchElement('tasks', task.id))
 
   return (
-    <div className="element-info">
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This attribute is used for <b>%s values</b> in <b>one project</b>.',
             'This attribute is used for <b>%s values</b> in <b>%s projects</b>.',
-            attribute.projects_count), [attribute.values_count, attribute.projects_count])}} />
+            attribute.projects_count), [attribute.values_count, attribute.projects_count])
+        } />
       </p>
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This attribute has <b>one descendant</b>.',
             'This attribute has <b>%s descendants</b>.',
             attributes.length
-          ), [attributes.length])}} />
+          ), [attributes.length])
+        } />
         {attributes.length > 0 && <ExtendLink extend={extendAttributes} onClick={toggleAttributes} />}
       </p>
       {
         extendAttributes && attributes.map((attribute, index) => (
-          <p key={index}>
-            <CodeLink className="code-domain" uri={attribute.uri} onClick={() => fetchAttribute(attribute)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="domain" uri={attribute.uri} onClick={() => fetchAttribute(attribute)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This attribute is used in <b>one condition</b>.',
             'This attribute is used in <b>%s conditions</b>.',
-            conditions.length), [conditions.length])}} />
+            conditions.length), [conditions.length])
+        } />
         {conditions.length > 0 && <ExtendLink extend={extendConditions} onClick={toggleConditions} />}
       </p>
       {
         extendConditions && conditions.map((condition, index) => (
           <p key={index}>
-            <CodeLink className="code-conditions" uri={condition.uri} onClick={() => fetchCondition(condition)} />
+            <CodeLink type="conditions" uri={condition.uri} onClick={() => fetchCondition(condition)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This attribute is used in <b>one page</b>.',
             'This attribute is used in <b>%s pages</b>.',
-            pages.length), [pages.length])}} />
+            pages.length), [pages.length])
+        } />
         {pages.length > 0 && <ExtendLink extend={extendPages} onClick={togglePages} />}
       </p>
       {
         extendPages && pages.map((page, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={page.uri} onClick={() => fetchPage(page)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={page.uri} onClick={() => fetchPage(page)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This attribute is used in <b>one questionset</b>.',
             'This attribute is used in <b>%s questionsets</b>.',
-            questionsets.length), [questionsets.length])}} />
+            questionsets.length), [questionsets.length])
+        } />
         {questionsets.length > 0 && <ExtendLink extend={extendQuestionSets} onClick={toggleQuestionSets} />}
       </p>
       {
         extendQuestionSets && questionsets.map((questionset, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This attribute is used in <b>one question</b>.',
             'This attribute is used in <b>%s questions</b>.',
-            questions.length), [questions.length])}} />
+            questions.length), [questions.length])
+        } />
         {questions.length > 0 && <ExtendLink extend={extendQuestions} onClick={toggleQuestions} />}
       </p>
       {
         extendQuestions && questions.map((question, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={question.uri} onClick={() => fetchQuestion(question)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={question.uri} onClick={() => fetchQuestion(question)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This attribute is used in <b>one task</b>.',
             'This attribute is used in <b>%s tasks</b>.',
-            tasks.length), [tasks.length])}} />
+            tasks.length), [tasks.length])
+        } />
         {tasks.length > 0 && <ExtendLink extend={extendTasks} onClick={toggleTasks} />}
       </p>
       {
         extendTasks && tasks.map((task, index) => (
-          <p key={index}>
-            <CodeLink className="code-tasks" uri={task.uri} onClick={() => fetchTask(task)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="tasks" uri={task.uri} onClick={() => fetchTask(task)} />
           </p>
         ))
       }
@@ -133,9 +147,7 @@ const AttributeInfo = ({ attribute, elements, elementActions }) => {
 }
 
 AttributeInfo.propTypes = {
-  attribute: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  attribute: PropTypes.object.isRequired
 }
 
 export default AttributeInfo
diff --git a/rdmo/management/assets/js/components/info/CatalogInfo.js b/rdmo/management/assets/js/components/info/CatalogInfo.js
index 8de5d27edc..1f9f40bc53 100644
--- a/rdmo/management/assets/js/components/info/CatalogInfo.js
+++ b/rdmo/management/assets/js/components/info/CatalogInfo.js
@@ -1,14 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
 const CatalogInfo = ({ catalog }) => {
   return (
-    <div className="element-info">
-      <p dangerouslySetInnerHTML={{
-        __html: interpolate(ngettext(
+    <div className="mb-2">
+      <Html html={
+        interpolate(ngettext(
           'This catalog is used in <b>one project</b>.',
           'This catalog is used in <b>%s projects</b>.',
-          catalog.projects_count), [catalog.projects_count])}} />
+          catalog.projects_count), [catalog.projects_count])
+      } />
     </div>
   )
 }
diff --git a/rdmo/management/assets/js/components/info/ConditionInfo.js b/rdmo/management/assets/js/components/info/ConditionInfo.js
index 1492ab06c8..77dc147952 100644
--- a/rdmo/management/assets/js/components/info/ConditionInfo.js
+++ b/rdmo/management/assets/js/components/info/ConditionInfo.js
@@ -1,11 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const ConditionInfo = ({ condition, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const ConditionInfo = ({ condition }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [extendOptionSets, toggleOptionSets] = useBool(false)
   const [extendPages, togglePages] = useBool(false)
@@ -19,86 +26,91 @@ const ConditionInfo = ({ condition, elements, elementActions }) => {
   const questions = elements.questions.filter(e => condition.questions.includes(e.id))
   const tasks = elements.tasks.filter(e => condition.tasks.includes(e.id))
 
-  const fetchOptionSet = (optionset) => elementActions.fetchElement('optionsets', optionset.id)
-  const fetchPage = (page) => elementActions.fetchElement('pages', page.id)
-  const fetchQuestionSet = (questionset) => elementActions.fetchElement('questionsets', questionset.id)
-  const fetchQuestion = (question) => elementActions.fetchElement('questions', question.id)
-  const fetchTask = (task) => elementActions.fetchElement('tasks', task.id)
+  const fetchOptionSet = (optionset) => dispatch(fetchElement('optionsets', optionset.id))
+  const fetchPage = (page) => dispatch(fetchElement('pages', page.id))
+  const fetchQuestionSet = (questionset) => dispatch(fetchElement('questionsets', questionset.id))
+  const fetchQuestion = (question) => dispatch(fetchElement('questions', question.id))
+  const fetchTask = (task) => dispatch(fetchElement('tasks', task.id))
 
   return (
-    <div className="element-info">
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This condition is used for <b>one optionset</b>.',
             'This condition is used for <b>%s optionsets</b>.',
-            optionsets.length), [optionsets.length])}} />
+            optionsets.length), [optionsets.length])
+        } />
         {optionsets.length > 0 && <ExtendLink extend={extendOptionSets} onClick={toggleOptionSets} />}
       </p>
       {
         extendOptionSets && optionsets.map((optionset, index) => (
-          <p key={index}>
-            <CodeLink className="code-options" uri={optionset.uri} onClick={() => fetchOptionSet(optionset)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="options" uri={optionset.uri} onClick={() => fetchOptionSet(optionset)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This condition is used for <b>one page</b>.',
             'This condition is used for <b>%s pages</b>.',
-            pages.length), [pages.length])}} />
+            pages.length), [pages.length])
+        } />
         {pages.length > 0 && <ExtendLink extend={extendPages} onClick={togglePages} />}
       </p>
       {
         extendPages && pages.map((page, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={page.uri} onClick={() => fetchPage(page)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={page.uri} onClick={() => fetchPage(page)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This condition is used for <b>one questionset</b>.',
             'This condition is used for <b>%s questionsets</b>.',
-            questionsets.length), [questionsets.length])}} />
+            questionsets.length), [questionsets.length])
+        } />
         {questionsets.length > 0 && <ExtendLink extend={extendQuestionSets} onClick={toggleQuestionSets} />}
       </p>
       {
         extendQuestionSets && questionsets.map((questionset, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This condition is used for <b>one question</b>.',
             'This condition is used for <b>%s questions</b>.',
-            questions.length), [questions.length])}} />
+            questions.length), [questions.length])
+        } />
         {questions.length > 0 && <ExtendLink extend={extendQuestions} onClick={toggleQuestion} />}
       </p>
       {
         extendQuestions && questions.map((question, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={question.uri} onClick={() => fetchQuestion(question)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={question.uri} onClick={() => fetchQuestion(question)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This condition is used for <b>one task</b>.',
             'This condition is used for <b>%s tasks</b>.',
-            tasks.length), [tasks.length])}} />
+            tasks.length), [tasks.length])
+        } />
         {tasks.length > 0 && <ExtendLink extend={extendTasks} onClick={toggleTasks} />}
       </p>
       {
         extendTasks && tasks.map((task, index) => (
-          <p key={index}>
-            <CodeLink className="code-tasks" uri={task.uri} onClick={() => fetchTask(task)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="tasks" uri={task.uri} onClick={() => fetchTask(task)} />
           </p>
         ))
       }
@@ -107,9 +119,7 @@ const ConditionInfo = ({ condition, elements, elementActions }) => {
 }
 
 ConditionInfo.propTypes = {
-  condition: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  condition: PropTypes.object.isRequired
 }
 
 export default ConditionInfo
diff --git a/rdmo/management/assets/js/components/info/OptionInfo.js b/rdmo/management/assets/js/components/info/OptionInfo.js
index 597e50c55d..8e0197dd18 100644
--- a/rdmo/management/assets/js/components/info/OptionInfo.js
+++ b/rdmo/management/assets/js/components/info/OptionInfo.js
@@ -1,38 +1,49 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const OptionInfo = ({ option, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const OptionInfo = ({ option }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [extendConditions, toggleConditions] = useBool(false)
 
   const conditions = elements.conditions.filter(e => option.conditions.includes(e.id))
 
-  const fetchCondition = (condition) => elementActions.fetchElement('conditions', condition.id)
+  const fetchCondition = (condition) => dispatch(fetchElement('conditions', condition.id))
 
   return (
-    <div className="element-info">
-      <p dangerouslySetInnerHTML={{
-        __html: interpolate(ngettext(
-          'This option is used for <b>%s values</b> in <b>one project</b>.',
-          'This option is used for <b>%s values</b> in <b>%s projects</b>.',
-          option.projects_count), [option.values_count, option.projects_count])}} />
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
+            'This option is used for <b>%s values</b> in <b>one project</b>.',
+            'This option is used for <b>%s values</b> in <b>%s projects</b>.',
+            option.projects_count), [option.values_count, option.projects_count])
+        } />
+      </p>
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This option is used in <b>one condition</b>.',
             'This option is used in <b>%s conditions</b>.',
             conditions.length
-          ), [conditions.length])}} />
+          ), [conditions.length])
+        } />
         {conditions.length > 0 && <ExtendLink extend={extendConditions} onClick={toggleConditions} />}
       </p>
       {
         extendConditions && conditions.map((condition, index) => (
-          <p key={index}>
-            <CodeLink className="code-conditions" uri={condition.uri} onClick={() => fetchCondition(condition)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="conditions" uri={condition.uri} onClick={() => fetchCondition(condition)} />
           </p>
         ))
       }
@@ -41,9 +52,7 @@ const OptionInfo = ({ option, elements, elementActions }) => {
 }
 
 OptionInfo.propTypes = {
-  option: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  option: PropTypes.object.isRequired
 }
 
 export default OptionInfo
diff --git a/rdmo/management/assets/js/components/info/OptionSetInfo.js b/rdmo/management/assets/js/components/info/OptionSetInfo.js
index 7019e0c444..c1882ee5e6 100644
--- a/rdmo/management/assets/js/components/info/OptionSetInfo.js
+++ b/rdmo/management/assets/js/components/info/OptionSetInfo.js
@@ -1,32 +1,40 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const OptionSetInfo = ({ optionset, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const OptionSetInfo = ({ optionset }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [extendQuestions, toggleQuestions] = useBool(false)
 
   const questions = elements.questions.filter(e => optionset.questions.includes(e.id))
 
-  const fetchQuestion = (question) => elementActions.fetchElement('questions', question.id)
+  const fetchQuestion = (question) => dispatch(fetchElement('questions', question.id))
 
   return (
-    <div className="element-info">
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This option set is used in <b>one question</b>.',
             'This option set is used in <b>%s questions</b>.',
-            questions.length), [questions.length])}} />
+            questions.length), [questions.length])
+        } />
         {questions.length > 0 && <ExtendLink extend={extendQuestions} onClick={toggleQuestions} />}
       </p>
       {
         extendQuestions && questions.map((question, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={question.uri} onClick={() => fetchQuestion(question)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={question.uri} onClick={() => fetchQuestion(question)} />
           </p>
         ))
       }
@@ -35,9 +43,7 @@ const OptionSetInfo = ({ optionset, elements, elementActions }) => {
 }
 
 OptionSetInfo.propTypes = {
-  optionset: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  optionset: PropTypes.object.isRequired
 }
 
 export default OptionSetInfo
diff --git a/rdmo/management/assets/js/components/info/PageInfo.js b/rdmo/management/assets/js/components/info/PageInfo.js
index 0dfb75f9e8..36ee63e3fe 100644
--- a/rdmo/management/assets/js/components/info/PageInfo.js
+++ b/rdmo/management/assets/js/components/info/PageInfo.js
@@ -1,32 +1,40 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const PageInfo = ({ page, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const PageInfo = ({ page }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [extendSections, toggleSections] = useBool(false)
 
   const sections = elements.sections.filter(e => page.sections.includes(e.id))
 
-  const fetchSection = (section) => elementActions.fetchElement('sections', section.id)
+  const fetchSection = (section) => dispatch(fetchElement('sections', section.id))
 
   return (
-    <div className="element-info">
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This page is used in <b>one section</b>.',
             'This page is used in <b>%s sections</b>.',
-            sections.length), [sections.length])}} />
+            sections.length), [sections.length])
+        } />
         {sections.length > 0 && <ExtendLink extend={extendSections} onClick={toggleSections} />}
       </p>
       {
         extendSections && sections.map((section, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={section.uri} onClick={() => fetchSection(section)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={section.uri} onClick={() => fetchSection(section)} />
           </p>
         ))
       }
@@ -35,9 +43,7 @@ const PageInfo = ({ page, elements, elementActions }) => {
 }
 
 PageInfo.propTypes = {
-  page: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  page: PropTypes.object.isRequired
 }
 
 export default PageInfo
diff --git a/rdmo/management/assets/js/components/info/QuestionInfo.js b/rdmo/management/assets/js/components/info/QuestionInfo.js
index 74fd9dcc12..27d4234d3c 100644
--- a/rdmo/management/assets/js/components/info/QuestionInfo.js
+++ b/rdmo/management/assets/js/components/info/QuestionInfo.js
@@ -1,11 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const QuestionInfo = ({ question, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const QuestionInfo = ({ question }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [extendPages, togglePages] = useBool(false)
   const [extendQuestionSet, toggleQuestionSets] = useBool(false)
@@ -13,38 +20,40 @@ const QuestionInfo = ({ question, elements, elementActions }) => {
   const pages = elements.pages.filter(e => question.pages.includes(e.id))
   const questionsets = elements.questionsets.filter(e => question.questionsets.includes(e.id))
 
-  const fetchPage = (page) => elementActions.fetchElement('pages', page.id)
-  const fetchQuestionSet = (questionset) => elementActions.fetchElement('questionsets', questionset.id)
+  const fetchPage = (page) => dispatch(fetchElement('pages', page.id))
+  const fetchQuestionSet = (questionset) => dispatch(fetchElement('questionsets', questionset.id))
 
   return (
-    <div className="element-info">
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This question is used in <b>one page</b>.',
             'This question is used in <b>%s pages</b>.',
-            pages.length), [pages.length])}} />
+            pages.length), [pages.length])
+        } />
         {pages.length > 0 && <ExtendLink extend={extendPages} onClick={togglePages} />}
       </p>
       {
         extendPages && pages.map((page, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={page.uri} onClick={() => fetchPage(page)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={page.uri} onClick={() => fetchPage(page)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This question set is used in <b>one question set</b>.',
             'This question set is used in <b>%s question sets</b>.',
-            questionsets.length), [questionsets.length])}} />
+            questionsets.length), [questionsets.length])
+        } />
         {questionsets.length > 0 && <ExtendLink extend={extendQuestionSet} onClick={toggleQuestionSets} />}
       </p>
       {
         extendQuestionSet && questionsets.map((questionset, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
           </p>
         ))
       }
@@ -53,9 +62,7 @@ const QuestionInfo = ({ question, elements, elementActions }) => {
 }
 
 QuestionInfo.propTypes = {
-  question: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  question: PropTypes.object.isRequired
 }
 
 export default QuestionInfo
diff --git a/rdmo/management/assets/js/components/info/QuestionSetInfo.js b/rdmo/management/assets/js/components/info/QuestionSetInfo.js
index 051ff6ab3f..b08955314f 100644
--- a/rdmo/management/assets/js/components/info/QuestionSetInfo.js
+++ b/rdmo/management/assets/js/components/info/QuestionSetInfo.js
@@ -1,11 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const QuestionSetInfo = ({ questionset, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const QuestionSetInfo = ({ questionset }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [extendPages, togglePages] = useBool(false)
   const [extendQuestionSet, toggleQuestionSets] = useBool(false)
@@ -13,38 +20,40 @@ const QuestionSetInfo = ({ questionset, elements, elementActions }) => {
   const pages = elements.pages.filter(e => questionset.pages.includes(e.id))
   const questionsets = elements.questionsets.filter(e => questionset.parents.includes(e.id))
 
-  const fetchPage = (page) => elementActions.fetchElement('pages', page.id)
-  const fetchQuestionSet = (questionset) => elementActions.fetchElement('questionsets', questionset.id)
+  const fetchPage = (page) => dispatch(fetchElement('pages', page.id))
+  const fetchQuestionSet = (questionset) => dispatch(fetchElement('questionsets', questionset.id))
 
   return (
-    <div className="element-info">
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This question set is used in <b>one page</b>.',
             'This question set is used in <b>%s pages</b>.',
-            pages.length), [pages.length])}} />
+            pages.length), [pages.length])
+        } />
         {pages.length > 0 && <ExtendLink extend={extendPages} onClick={togglePages} />}
       </p>
       {
         extendPages && pages.map((page, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={page.uri} onClick={() => fetchPage(page)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={page.uri} onClick={() => fetchPage(page)} />
           </p>
         ))
       }
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This question set is used in <b>one question set</b>.',
             'This question set is used in <b>%s question sets</b>.',
-            questionsets.length), [questionsets.length])}} />
+            questionsets.length), [questionsets.length])
+        } />
         {questionsets.length > 0 && <ExtendLink extend={extendQuestionSet} onClick={toggleQuestionSets} />}
       </p>
       {
         extendQuestionSet && questionsets.map((questionset, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={questionset.uri} onClick={() => fetchQuestionSet(questionset)} />
           </p>
         ))
       }
@@ -53,9 +62,7 @@ const QuestionSetInfo = ({ questionset, elements, elementActions }) => {
 }
 
 QuestionSetInfo.propTypes = {
-  questionset: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  questionset: PropTypes.object.isRequired
 }
 
 export default QuestionSetInfo
diff --git a/rdmo/management/assets/js/components/info/SectionInfo.js b/rdmo/management/assets/js/components/info/SectionInfo.js
index b5ac81f0fb..f971686d7d 100644
--- a/rdmo/management/assets/js/components/info/SectionInfo.js
+++ b/rdmo/management/assets/js/components/info/SectionInfo.js
@@ -1,32 +1,40 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { ExtendLink, CodeLink } from '../common/Links'
+import Html from 'rdmo/core/assets/js/components/Html'
 
+import { fetchElement } from '../../actions/elementActions'
 import useBool from '../../hooks/useBool'
 
-const SectionInfo = ({ section, elements, elementActions }) => {
+import { CodeLink, ExtendLink } from '../common/Links'
+
+const SectionInfo = ({ section }) => {
+  const dispatch = useDispatch()
+
+  const elements = useSelector((state) => state.elements)
 
   const [showCatalogs, toggleCatalogs] = useBool(false)
 
   const catalogs = elements.catalogs.filter(e => section.catalogs.includes(e.id))
 
-  const fetchCatalog = (catalog) => elementActions.fetchElement('catalogs', catalog.id)
+  const fetchCatalog = (catalog) => dispatch(fetchElement('catalogs', catalog.id))
 
   return (
-    <div className="element-info">
-      <p>
-        <span dangerouslySetInnerHTML={{
-          __html: interpolate(ngettext(
+    <div className="mb-2">
+      <p className="mb-1">
+        <Html html={
+          interpolate(ngettext(
             'This section is used in <b>one catalog</b>.',
             'This section is used in <b>%s catalogs</b>.',
-            catalogs.length), [catalogs.length])}} />
+            catalogs.length), [catalogs.length])
+        } />
         {catalogs.length > 0 && <ExtendLink extend={showCatalogs} onClick={toggleCatalogs} />}
       </p>
       {
         showCatalogs && catalogs.map((catalog, index) => (
-          <p key={index}>
-            <CodeLink className="code-questions" uri={catalog.uri} onClick={() => fetchCatalog(catalog)} />
+          <p className="mb-1" key={index}>
+            <CodeLink type="questions" uri={catalog.uri} onClick={() => fetchCatalog(catalog)} />
           </p>
         ))
       }
@@ -35,9 +43,7 @@ const SectionInfo = ({ section, elements, elementActions }) => {
 }
 
 SectionInfo.propTypes = {
-  section: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  section: PropTypes.object.isRequired
 }
 
 export default SectionInfo
diff --git a/rdmo/management/assets/js/components/info/TaskInfo.js b/rdmo/management/assets/js/components/info/TaskInfo.js
index 16bc33890c..af11d030d5 100644
--- a/rdmo/management/assets/js/components/info/TaskInfo.js
+++ b/rdmo/management/assets/js/components/info/TaskInfo.js
@@ -1,15 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
 const TaskInfo = ({ task }) => {
   return (
-    <div className="element-info">
-      <p dangerouslySetInnerHTML={{
-        __html: interpolate(ngettext(
+    <div className="mb-2">
+      <Html html={
+        interpolate(ngettext(
           'This task is used in <b>one project</b>.',
           'This task is used in <b>%s projects</b>.',
           task.projects_count
-        ), [task.projects_count])}} />
+        ), [task.projects_count])
+      } />
     </div>
   )
 }
diff --git a/rdmo/management/assets/js/components/info/ViewInfo.js b/rdmo/management/assets/js/components/info/ViewInfo.js
index d52ee545fb..03c8f3b17b 100644
--- a/rdmo/management/assets/js/components/info/ViewInfo.js
+++ b/rdmo/management/assets/js/components/info/ViewInfo.js
@@ -1,15 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Html from 'rdmo/core/assets/js/components/Html'
+
 const ViewInfo = ({ view }) => {
   return (
-    <div className="element-info">
-      <p dangerouslySetInnerHTML={{
-        __html: interpolate(ngettext(
+    <div className="mb-2">
+      <Html html={
+        interpolate(ngettext(
           'This view is used in <b>one project</b>.',
           'This view is used in <b>%s projects</b>.',
           view.projects_count
-        ), [view.projects_count])}} />
+        ), [view.projects_count])
+      } />
     </div>
   )
 }
diff --git a/rdmo/management/assets/js/components/main/Edit.js b/rdmo/management/assets/js/components/main/Edit.js
deleted file mode 100644
index 4e20597bee..0000000000
--- a/rdmo/management/assets/js/components/main/Edit.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import EditAttribute from '../edit/EditAttribute'
-import EditCatalog from '../edit/EditCatalog'
-import EditCondition from '../edit/EditCondition'
-import EditOption from '../edit/EditOption'
-import EditOptionSet from '../edit/EditOptionSet'
-import EditPage from '../edit/EditPage'
-import EditQuestion from '../edit/EditQuestion'
-import EditQuestionSet from '../edit/EditQuestionSet'
-import EditSection from '../edit/EditSection'
-import EditTask from '../edit/EditTask'
-import EditView from '../edit/EditView'
-
-import useScrollEffect from '../../hooks/useScrollEffect'
-
-const Edit = ({ config, elements, elementActions }) => {
-  const { element, elementType } = elements
-
-  useScrollEffect(elementType, element.id)
-
-  switch (elementType) {
-    case 'catalogs':
-      return <EditCatalog config={config} catalog={element} elements={elements} elementActions={elementActions} />
-    case 'sections':
-      return <EditSection config={config} section={element} elements={elements} elementActions={elementActions} />
-    case 'pages':
-      return <EditPage config={config} page={element} elements={elements} elementActions={elementActions} />
-    case 'questionsets':
-      return <EditQuestionSet config={config} questionset={element} elements={elements} elementActions={elementActions} />
-    case 'questions':
-      return <EditQuestion config={config} question={element} elements={elements} elementActions={elementActions} />
-    case 'attributes':
-      return <EditAttribute config={config} attribute={element} elements={elements} elementActions={elementActions} />
-    case 'optionsets':
-      return <EditOptionSet config={config} optionset={element} elements={elements} elementActions={elementActions} />
-    case 'options':
-      return <EditOption config={config} option={element} elements={elements} elementActions={elementActions} />
-    case 'conditions':
-      return <EditCondition config={config} condition={element} elements={elements} elementActions={elementActions} />
-    case 'tasks':
-      return <EditTask config={config} task={element} elements={elements} elementActions={elementActions} />
-    case 'views':
-      return <EditView config={config} view={element} elements={elements} elementActions={elementActions} />
-  }
-}
-
-Edit.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
-export default Edit
diff --git a/rdmo/management/assets/js/components/main/Elements.js b/rdmo/management/assets/js/components/main/Elements.js
deleted file mode 100644
index 24e3dd4810..0000000000
--- a/rdmo/management/assets/js/components/main/Elements.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Attributes from '../elements/Attributes'
-import Catalogs from '../elements/Catalogs'
-import Conditions from '../elements/Conditions'
-import Options from '../elements/Options'
-import OptionSets from '../elements/OptionSets'
-import Pages from '../elements/Pages'
-import Questions from '../elements/Questions'
-import QuestionSets from '../elements/QuestionSets'
-import Sections from '../elements/Sections'
-import Tasks from '../elements/Tasks'
-import Views from '../elements/Views'
-
-import useScrollEffect from '../../hooks/useScrollEffect'
-
-const Elements = ({ config, elements, configActions, elementActions }) => {
-  const { elementType } = elements
-
-  useScrollEffect(elementType)
-
-  switch (elementType) {
-    case 'catalogs':
-      return <Catalogs config={config} catalogs={elements.catalogs}
-                       configActions={configActions} elementActions={elementActions} />
-    case 'sections':
-      return <Sections config={config} sections={elements.sections}
-                       configActions={configActions} elementActions={elementActions} />
-    case 'pages':
-      return <Pages config={config} pages={elements.pages}
-                    configActions={configActions} elementActions={elementActions} />
-    case 'questionsets':
-      return <QuestionSets config={config} questionsets={elements.questionsets}
-                           configActions={configActions} elementActions={elementActions} />
-    case 'questions':
-      return <Questions config={config} questions={elements.questions}
-                        configActions={configActions} elementActions={elementActions} />
-    case 'attributes':
-      return <Attributes config={config} attributes={elements.attributes}
-                         configActions={configActions} elementActions={elementActions} />
-    case 'optionsets':
-      return <OptionSets config={config} optionsets={elements.optionsets}
-                         configActions={configActions} elementActions={elementActions} />
-    case 'options':
-      return <Options config={config} options={elements.options}
-                      configActions={configActions} elementActions={elementActions} />
-    case 'conditions':
-      return <Conditions config={config} conditions={elements.conditions}
-                         configActions={configActions} elementActions={elementActions} />
-    case 'tasks':
-      return <Tasks config={config} tasks={elements.tasks}
-                    configActions={configActions} elementActions={elementActions} />
-    case 'views':
-      return <Views config={config} views={elements.views}
-                    configActions={configActions} elementActions={elementActions} />
-  }
-}
-
-Elements.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
-export default Elements
diff --git a/rdmo/management/assets/js/components/main/Import.js b/rdmo/management/assets/js/components/main/Import.js
deleted file mode 100644
index 8f27c8d35d..0000000000
--- a/rdmo/management/assets/js/components/main/Import.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import get from 'lodash/get'
-
-import ImportElement from '../import/ImportElement'
-import ImportSuccessElement from '../import/ImportSuccessElement'
-import ImportAggregatedWarningsPanel from '../import/ImportAggregatedWarningsPanel'
-import ImportAggregatedErrorsPanel from '../import/ImportAggregatedErrorsPanel'
-import ImportInfo from '../import/common/ImportInfo'
-import ImportFilters from '../import/common/ImportFilters'
-import useFilteredElements from '../../utils/importFilters'
-import {useImportElements} from '../../hooks/useImportElements'
-
-
-const Import = ({ config, imports, configActions, importActions }) => {
-  const { file, elements, success } = imports
-    // the elements are already processed by processElementDiffs in the importsReducer
-   const {
-    createdElements,
-    updatedElements,
-    changedElements,
-    importWarnings,
-    importErrors
-  } = useImportElements(elements)
-
-  const searchString = get(config, 'filter.import.elements.search', '')
-  const selectedUriPrefix = get(config, 'filter.import.elements.uri_prefix', '')
-  const selectFilterChanged = get(config, 'filter.import.elements.changed', false)
-
-  const filteredElements = useFilteredElements(elements, selectFilterChanged, selectedUriPrefix, searchString)
-
-  return (
-    <div className='panel panel-default panel-import'>
-      <div className='panel-heading'>
-        <strong>{gettext('Import')} from: {file.name}</strong>
-        <ImportInfo elementsLength={elements.length} createdLength={createdElements.length}
-                        updatedLength={updatedElements.length} changedLength={changedElements.length}
-                        warningsLength={importWarnings.length} errorsLength={importErrors.length}/>
-
-      </div>
-      <div className="panel-body">
-        {
-          <ImportFilters config={config} elements={elements}
-                         changedElements={changedElements}
-                         filteredElements={filteredElements}
-                         configActions={configActions}
-                         success={success} />
-        }
-        {
-          <ImportAggregatedWarningsPanel config={config} elements={importWarnings}
-                                         importActions={importActions}
-                                         configActions={configActions} />
-        }
-        {
-          <ImportAggregatedErrorsPanel config={config} elements={importErrors}
-                                       importActions={importActions}
-                                       configActions={configActions} />
-        }
-      </div>
-        <ul className='list-group'>
-          {
-            filteredElements.map((element, index) => {
-              if (success) {
-                return <ImportSuccessElement key={index} element={element}
-                                             importActions={importActions}/>
-              } else {
-                return <ImportElement key={index} element={element} config={config}
-                                      importActions={importActions}/>
-              }
-            })
-          }
-        </ul>
-  </div>
-  )
-}
-
-Import.propTypes = {
-  config: PropTypes.object.isRequired,
-  imports: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  importActions: PropTypes.object.isRequired
-}
-
-export default Import
diff --git a/rdmo/management/assets/js/components/main/Nested.js b/rdmo/management/assets/js/components/main/Nested.js
deleted file mode 100644
index 8d3b9f25fd..0000000000
--- a/rdmo/management/assets/js/components/main/Nested.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import NestedAttribute from '../nested/NestedAttribute'
-import NestedCatalog from '../nested/NestedCatalog'
-import NestedOptionSet from '../nested/NestedOptionSet'
-import NestedPage from '../nested/NestedPage'
-import NestedQuestionSet from '../nested/NestedQuestionSet'
-import NestedSection from '../nested/NestedSection'
-
-import useScrollEffect from '../../hooks/useScrollEffect'
-
-const Nested = ({ config, elements, configActions, elementActions }) => {
-  const { element, elementType } = elements
-
-  useScrollEffect(elementType, element.id, 'nested')
-
-  switch (elementType) {
-    case 'catalogs':
-      return <NestedCatalog config={config} catalog={element}
-                            configActions={configActions} elementActions={elementActions} />
-    case 'sections':
-      return <NestedSection config={config} section={element}
-                            configActions={configActions} elementActions={elementActions} />
-    case 'pages':
-      return <NestedPage config={config} page={element}
-                         configActions={configActions} elementActions={elementActions} />
-    case 'questionsets':
-      return <NestedQuestionSet config={config} questionset={element}
-                                configActions={configActions} elementActions={elementActions} />
-    case 'attributes':
-      return <NestedAttribute config={config} attribute={element}
-                              configActions={configActions} elementActions={elementActions} />
-    case 'optionsets':
-      return <NestedOptionSet config={config} optionset={element}
-                              configActions={configActions} elementActions={elementActions} />
-  }
-}
-
-Nested.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
-}
-
-export default Nested
diff --git a/rdmo/management/assets/js/components/modals/DeleteAttributeModal.js b/rdmo/management/assets/js/components/modals/DeleteAttributeModal.js
index 98aa9d12b9..1ee00ecbab 100644
--- a/rdmo/management/assets/js/components/modals/DeleteAttributeModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteAttributeModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteAttributeModal = ({ attribute, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete attribute')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete attribute')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the attribute:')}
     </p>
     <p>
       <code className="code-domain">{attribute.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteAttributeModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteCatalogModal.js b/rdmo/management/assets/js/components/modals/DeleteCatalogModal.js
index 005ed3003d..7e43c05191 100644
--- a/rdmo/management/assets/js/components/modals/DeleteCatalogModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteCatalogModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteCatalogModal = ({ catalog, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete catalog')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete catalog')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the catalog:')}
     </p>
     <p>
       <code className="code-questions">{catalog.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('Those projects will not be usable afterwards.')} {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteCatalogModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteConditionModal.js b/rdmo/management/assets/js/components/modals/DeleteConditionModal.js
index 7072dc630a..71d882e767 100644
--- a/rdmo/management/assets/js/components/modals/DeleteConditionModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteConditionModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteConditionModal = ({ condition, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete condition')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete condition')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the condition:')}
     </p>
     <p>
       <code className="code-conditions">{condition.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteConditionModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteOptionModal.js b/rdmo/management/assets/js/components/modals/DeleteOptionModal.js
index dc52b2c807..c5ec972aaa 100644
--- a/rdmo/management/assets/js/components/modals/DeleteOptionModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteOptionModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteOptionModal = ({ option, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete option')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete option')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the option:')}
     </p>
     <p>
       <code className="code-options">{option.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteOptionModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteOptionSetModal.js b/rdmo/management/assets/js/components/modals/DeleteOptionSetModal.js
index f7c9b8e46d..e1495e0955 100644
--- a/rdmo/management/assets/js/components/modals/DeleteOptionSetModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteOptionSetModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteOptionSetModal = ({ optionset, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete option set')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete optionset')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the option set:')}
     </p>
     <p>
       <code className="code-options">{optionset.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteOptionSetModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeletePageModal.js b/rdmo/management/assets/js/components/modals/DeletePageModal.js
index 2694a69e04..f6cc41fe7c 100644
--- a/rdmo/management/assets/js/components/modals/DeletePageModal.js
+++ b/rdmo/management/assets/js/components/modals/DeletePageModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeletePageModal = ({ page, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete page')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete page')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the page:')}
     </p>
     <p>
       <code className="code-questions">{page.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeletePageModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteQuestionModal.js b/rdmo/management/assets/js/components/modals/DeleteQuestionModal.js
index fe4eb76a03..4bc70101fb 100644
--- a/rdmo/management/assets/js/components/modals/DeleteQuestionModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteQuestionModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteQuestionModal = ({ question, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete question')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete question')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the question:')}
     </p>
     <p>
       <code className="code-questions">{question.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteQuestionModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteQuestionSetModal.js b/rdmo/management/assets/js/components/modals/DeleteQuestionSetModal.js
index abc9ae1ec5..9839b2b233 100644
--- a/rdmo/management/assets/js/components/modals/DeleteQuestionSetModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteQuestionSetModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteQuestionSetModal = ({ questionset, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete question set')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete questionset')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the question set:')}
     </p>
     <p>
       <code className="code-questions">{questionset.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteQuestionSetModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteSectionModal.js b/rdmo/management/assets/js/components/modals/DeleteSectionModal.js
index 7e35dc2d2a..9b406336eb 100644
--- a/rdmo/management/assets/js/components/modals/DeleteSectionModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteSectionModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteSectionModal = ({ section, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete section')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete section')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the section:')}
     </p>
     <p>
       <code className="code-questions">{section.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteSectionModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteTaskModal.js b/rdmo/management/assets/js/components/modals/DeleteTaskModal.js
index 105194733d..9c7cd1b8e0 100644
--- a/rdmo/management/assets/js/components/modals/DeleteTaskModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteTaskModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteTaskModal = ({ task, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete catalog')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete task')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the task:')}
     </p>
     <p>
       <code className="code-tasks">{task.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('The task will be removed from these projects.')} {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteTaskModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/modals/DeleteViewModal.js b/rdmo/management/assets/js/components/modals/DeleteViewModal.js
index b98cef7d9f..abfda80636 100644
--- a/rdmo/management/assets/js/components/modals/DeleteViewModal.js
+++ b/rdmo/management/assets/js/components/modals/DeleteViewModal.js
@@ -1,21 +1,29 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { DeleteModal } from '../common/Modals'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const DeleteViewModal = ({ view, info, show, onClose, onDelete }) => (
-  <DeleteModal title={gettext('Delete catalog')} show={show} onClose={onClose} onDelete={onDelete}>
+  <Modal
+    title={gettext('Delete view')}
+    show={show}
+    onClose={onClose}
+    onSubmit={onDelete}
+    submitLabel={gettext('Delete')}
+    submitProps={{ className: 'btn btn-danger' }}
+    size="modal-lg"
+  >
     <p>
       {gettext('You are about to permanently delete the view:')}
     </p>
     <p>
       <code className="code-views">{view.uri}</code>
     </p>
-    { info }
+    {info}
     <p className="text-danger">
       {gettext('The view will be removed from these projects.')} {gettext('This action cannot be undone!')}
     </p>
-  </DeleteModal>
+  </Modal>
 )
 
 DeleteViewModal.propTypes = {
diff --git a/rdmo/management/assets/js/components/nested/Nested.js b/rdmo/management/assets/js/components/nested/Nested.js
new file mode 100644
index 0000000000..5a5d8b334d
--- /dev/null
+++ b/rdmo/management/assets/js/components/nested/Nested.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import useScrollEffect from '../../hooks/useScrollEffect'
+
+import NestedAttribute from './NestedAttribute'
+import NestedCatalog from './NestedCatalog'
+import NestedOptionSet from './NestedOptionSet'
+import NestedPage from './NestedPage'
+import NestedQuestionSet from './NestedQuestionSet'
+import NestedSection from './NestedSection'
+
+const Nested = () => {
+  const { element, elementType } = useSelector((state) => state.elements)
+
+  useScrollEffect(elementType, element.id, 'nested')
+
+  switch (elementType) {
+    case 'catalogs':
+      return <NestedCatalog catalog={element} />
+    case 'sections':
+      return <NestedSection section={element} />
+    case 'pages':
+      return <NestedPage page={element} />
+    case 'questionsets':
+      return <NestedQuestionSet questionset={element} />
+    case 'attributes':
+      return <NestedAttribute attribute={element} />
+    case 'optionsets':
+      return <NestedOptionSet optionset={element} />
+  }
+}
+
+export default Nested
diff --git a/rdmo/management/assets/js/components/nested/NestedAttribute.js b/rdmo/management/assets/js/components/nested/NestedAttribute.js
index befaf54b3b..5b4e8a609b 100644
--- a/rdmo/management/assets/js/components/nested/NestedAttribute.js
+++ b/rdmo/management/assets/js/components/nested/NestedAttribute.js
@@ -1,39 +1,41 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import { get } from 'lodash'
+
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
 
 import { getUriPrefixes } from '../../utils/filter'
 
 import { FilterString, FilterUriPrefix } from '../common/Filter'
-import { BackButton } from '../common/Buttons'
-
 import Attribute from '../element/Attribute'
 
-const NestedAttribute = ({ config, attribute, configActions, elementActions }) => {
+const NestedAttribute = ({ attribute }) => {
+  const dispatch = useDispatch()
 
-  const updateFilterString = (uri) => configActions.updateConfig('filter.attribute.search', uri)
-  const updateFilterUriPrefix = (uriPrefix) => configActions.updateConfig('filter.attribute.uri_prefix', uriPrefix)
+  const config = useSelector((state) => state.config)
+
+  const updateFilterString = (uri) => dispatch(updateConfig('filter.attribute.search', uri))
+  const updateFilterUriPrefix = (uriPrefix) => dispatch(updateConfig('filter.attribute.uri_prefix', uriPrefix))
 
   return (
     <>
-      <div className="panel panel-default panel-nested">
-        <div className="panel-heading">
-          <div className="pull-right">
-            <BackButton />
-          </div>
-          <Attribute config={config} attribute={attribute}
-                     configActions={configActions} elementActions={elementActions} display="plain" />
+      <div className="card">
+        <div className="card-header">
+          <Attribute attribute={attribute} display="plain" backButton={true} />
         </div>
 
-        <div className="panel-body">
+        <div className="card-body pb-0">
           <div className="row">
             <div className="col-sm-8">
-              <FilterString value={get(config, 'filter.attribute.search', '')} onChange={updateFilterString}
-                            label={gettext('Filter attributes')} />
+              <FilterString
+                value={get(config, 'filter.attribute.search', '')} onChange={updateFilterString}
+                label={gettext('Filter attributes')} />
             </div>
             <div className="col-sm-4">
-              <FilterUriPrefix value={get(config, 'filter.attribute.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                               options={getUriPrefixes(attribute.elements)} />
+              <FilterUriPrefix
+                value={get(config, 'filter.attribute.uri_prefix', '')} onChange={updateFilterUriPrefix}
+                options={getUriPrefixes(attribute.elements)} />
             </div>
           </div>
         </div>
@@ -41,9 +43,7 @@ const NestedAttribute = ({ config, attribute, configActions, elementActions }) =
 
       {
         attribute.elements.map((attribute, index) => (
-          <Attribute key={index} config={config} attribute={attribute}
-                     configActions={configActions} elementActions={elementActions}
-                     display="nested" filter="attribute" indent={1} />
+          <Attribute key={index} attribute={attribute} display="nested" filter="attribute" indent={1} />
         ))
       }
     </>
@@ -51,10 +51,7 @@ const NestedAttribute = ({ config, attribute, configActions, elementActions }) =
 }
 
 NestedAttribute.propTypes = {
-  config: PropTypes.object.isRequired,
-  attribute: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  attribute: PropTypes.object.isRequired
 }
 
 export default NestedAttribute
diff --git a/rdmo/management/assets/js/components/nested/NestedCatalog.js b/rdmo/management/assets/js/components/nested/NestedCatalog.js
index 69720e8f97..11eba75707 100644
--- a/rdmo/management/assets/js/components/nested/NestedCatalog.js
+++ b/rdmo/management/assets/js/components/nested/NestedCatalog.js
@@ -1,119 +1,143 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
-import isEmpty from 'lodash/isEmpty'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
-import Link from 'rdmo/core/assets/js/components/Link'
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 
+import { toggleDescendants } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
-import { FilterString, FilterUriPrefix } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
-import { BackButton } from '../common/Buttons'
-import { Drop } from '../common/DragAndDrop'
 
+import { Drop } from '../common/DragAndDrop'
+import { FilterString, FilterUriPrefix } from '../common/Filter'
 import Catalog from '../element/Catalog'
 import Section from '../element/Section'
 
-const NestedCatalog = ({ config, catalog, configActions, elementActions }) => {
+const NestedCatalog = ({ catalog }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
+
+  const updateFilterString = (value) => dispatch(updateConfig('filter.catalog.search', value))
+  const updateFilterUriPrefix = (value) => dispatch(updateConfig('filter.catalog.uri_prefix', value))
 
-  const updateFilterString = (value) => configActions.updateConfig('filter.catalog.search', value)
-  const updateFilterUriPrefix = (value) => configActions.updateConfig('filter.catalog.uri_prefix', value)
+  const toggleSections = () => dispatch(toggleDescendants(catalog, 'sections'))
+  const togglePages = () => dispatch(toggleDescendants(catalog, 'pages'))
+  const toggleQuestionSets = () => dispatch(toggleDescendants(catalog, 'questionsets'))
 
-  const toggleSections = () => elementActions.toggleDescendants(catalog, 'sections')
-  const togglePages = () => elementActions.toggleDescendants(catalog, 'pages')
-  const toggleQuestionSets = () => elementActions.toggleDescendants(catalog, 'questionsets')
+  const displayUriCatalogs = isTruthy(get(config, 'display.uri.catalogs', true))
+  const displayUriSections = isTruthy(get(config, 'display.uri.sections', true))
+  const displayUriPages = isTruthy(get(config, 'display.uri.pages', true))
+  const displayUriQuestionSets = isTruthy(get(config, 'display.uri.questionsets', true))
+  const displayUriQuestions = isTruthy(get(config, 'display.uri.questions', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
+  const displayUriOptionSets = isTruthy(get(config, 'display.uri.optionsets', true))
 
-  const updateDisplayCatalogURI = (value) => configActions.updateConfig('display.uri.catalogs', value)
-  const updateDisplaySectionsURI = (value) => configActions.updateConfig('display.uri.sections', value)
-  const updateDisplayPagesURI = (value) => configActions.updateConfig('display.uri.pages', value)
-  const updateDisplayQuestionSetsURI = (value) => configActions.updateConfig('display.uri.questionsets', value)
-  const updateDisplayQuestionsURI = (value) => configActions.updateConfig('display.uri.questions', value)
-  const updateDisplayAttributesURI = (value) => configActions.updateConfig('display.uri.attributes', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
-  const updateDisplayOptionSetURI = (value) => configActions.updateConfig('display.uri.optionsets', value)
+  const toggleDisplayUriCatalogs = () => dispatch(updateConfig('display.uri.catalogs', !displayUriCatalogs))
+  const toggleDisplayUriSections = () => dispatch(updateConfig('display.uri.sections', !displayUriSections))
+  const toggleDisplayUriPages = () => dispatch(updateConfig('display.uri.pages', !displayUriPages))
+  const toggleDisplayUriQuestionSets = () => dispatch(updateConfig('display.uri.questionsets', !displayUriQuestionSets))
+  const toggleDisplayUriQuestions = () => dispatch(updateConfig('display.uri.questions', !displayUriQuestions))
+  const toggleDisplayUriAttributes = () => dispatch(updateConfig('display.uri.attributes', !displayUriAttributes))
+  const toggleDisplayUriConditions = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
+  const toggleDisplayUriOptionSets = () => dispatch(updateConfig('display.uri.optionsets', !displayUriOptionSets))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <>
-      <div className="panel panel-default panel-nested">
-        <div className="panel-heading">
-          <div className="pull-right">
-            <BackButton />
-          </div>
-          <Catalog config={config} catalog={catalog}
-                   configActions={configActions} elementActions={elementActions} display="plain" />
+    <div className="position-relative">
+      <div className="card card-tile">
+        <div className="card-header">
+          <Catalog catalog={catalog} display="plain" backButton={true} />
         </div>
 
-        <div className="panel-body">
+        <div className="card-body">
           <div className="row">
             <div className="col-sm-8">
-              <FilterString value={get(config, 'filter.catalog.search', '')} onChange={updateFilterString}
-                            label={gettext('Filter catalogs')} />
+              <FilterString
+                value={get(config, 'filter.catalog.search', '')} onChange={updateFilterString}
+                label={gettext('Filter catalogs')} />
             </div>
             <div className="col-sm-4">
-              <FilterUriPrefix value={get(config, 'filter.catalog.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                               options={getUriPrefixes(catalog.elements)} />
+              <FilterUriPrefix
+                value={get(config, 'filter.catalog.uri_prefix', '')} onChange={updateFilterUriPrefix}
+                options={getUriPrefixes(catalog.elements)} />
             </div>
           </div>
-          <div className="mt-10">
-            <span className="mr-10">{gettext('Toggle elements:')}</span>
-            <Link className="mr-10" onClick={toggleSections}>{gettext('Sections')}</Link>
-            <Link className="mr-10" onClick={togglePages}>{gettext('Pages')}</Link>
-            <Link className="mr-10" onClick={toggleQuestionSets}>{gettext('Question sets')}</Link>
+          <div className="input-group input-group-sm mb-2">
+            <label className="input-group-text">{gettext('Show URIs')}</label>
+            <button type="button" onClick={toggleDisplayUriCatalogs} className={btnClass(displayUriCatalogs)}>
+              {gettext('Catalogs')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriSections} className={btnClass(displayUriSections)}>
+              {gettext('Sections')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriPages} className={btnClass(displayUriPages)}>
+              {gettext('Pages')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriQuestionSets} className={btnClass(displayUriQuestionSets)}>
+              {gettext('Question sets')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriQuestions} className={btnClass(displayUriQuestions)}>
+              {gettext('Questions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriAttributes} className={btnClass(displayUriAttributes)}>
+              {gettext('Attributes')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriConditions} className={btnClass(displayUriConditions)}>
+              {gettext('Conditions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriOptionSets} className={btnClass(displayUriOptionSets)}>
+              {gettext('Option sets')}
+            </button>
           </div>
-          <div className="checkboxes">
-            <span className="mr-10">{gettext('Show URIs:')}</span>
-            <Checkbox label={<code className="code-questions">{gettext('Catalogs')}</code>}
-                      value={get(config, 'display.uri.catalogs', true)} onChange={updateDisplayCatalogURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Sections')}</code>}
-                      value={get(config, 'display.uri.sections', true)} onChange={updateDisplaySectionsURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Pages')}</code>}
-                      value={get(config, 'display.uri.pages', true)} onChange={updateDisplayPagesURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Question sets')}</code>}
-                      value={get(config, 'display.uri.questionsets', true)} onChange={updateDisplayQuestionSetsURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Questions')}</code>}
-                      value={get(config, 'display.uri.questions', true)} onChange={updateDisplayQuestionsURI} />
-            <Checkbox label={<code className="code-domain">{gettext('Attributes')}</code>}
-                      value={get(config, 'display.uri.attributes', true)} onChange={updateDisplayAttributesURI} />
-            <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                      value={get(config, 'display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
-            <Checkbox label={<code className="code-options">{gettext('Option sets')}</code>}
-                      value={get(config, 'display.uri.optionsets', true)} onChange={updateDisplayOptionSetURI} />
+          <div className="input-group input-group-sm">
+            <label className="input-group-text">{gettext('Toggle elements')}</label>
+            <button type="button" onClick={toggleSections} className="btn btn-outline-primary border">
+              {gettext('Sections')}
+            </button>
+            <button type="button" onClick={togglePages} className="btn btn-outline-primary border">
+              {gettext('Pages')}
+            </button>
+            <button type="button" onClick={toggleQuestionSets} className="btn btn-outline-primary border">
+              {gettext('Question sets')}
+            </button>
           </div>
         </div>
+
+        <div className="card-body">
+          {
+            !isEmpty(catalog.elements) &&
+            <Drop element={catalog.elements[0]} indent={0} mode="before" />
+          }
+          {
+            catalog.elements.map((section, index) => {
+              const sectionInfo = catalog.sections.find(info => info.section === section.id)
+              const sectionOrder = sectionInfo ? sectionInfo.order : undefined
+
+              return (
+                <Section
+                  key={index}
+                  section={section}
+                  display="nested"
+                  filter="catalog"
+                  indent={0}
+                  order={sectionOrder}
+                />
+              )
+            })
+          }
+        </div>
       </div>
-      {
-        !isEmpty(catalog.elements) &&
-        <Drop element={catalog.elements[0]} elementActions={elementActions} indent={0} mode="before" />
-      }
-      {
-        catalog.elements.map((section, index) => {
-          const sectionInfo = catalog.sections.find(info => info.section === section.id)
-          const sectionOrder = sectionInfo ? sectionInfo.order : undefined
-
-          return (
-            <Section key={index}
-              config={config}
-              section={section}
-              configActions={configActions}
-              elementActions={elementActions}
-              display="nested"
-              filter="catalog"
-              indent={0}
-              order={sectionOrder}
-            />
-          )
-        })
-      }
-
-    </>
+    </div>
   )
 }
 
 NestedCatalog.propTypes = {
-  config: PropTypes.object.isRequired,
-  catalog: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  catalog: PropTypes.object.isRequired
 }
 
 export default NestedCatalog
diff --git a/rdmo/management/assets/js/components/nested/NestedOptionSet.js b/rdmo/management/assets/js/components/nested/NestedOptionSet.js
index 63f8c4bd2f..a995c2b89b 100644
--- a/rdmo/management/assets/js/components/nested/NestedOptionSet.js
+++ b/rdmo/management/assets/js/components/nested/NestedOptionSet.js
@@ -1,58 +1,64 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get } from 'lodash'
+
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 
 import { getUriPrefixes } from '../../utils/filter'
 
 import { FilterString, FilterUriPrefix } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
-import { BackButton } from '../common/Buttons'
-
 import Option from '../element/Option'
 import OptionSet from '../element/OptionSet'
 
-const NestedOptionSet = ({ config, optionset, configActions, elementActions }) => {
+const NestedOptionSet = ({ optionset }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector((state) => state.config)
 
-  const updateFilterString = (uri) => configActions.updateConfig('filter.optionset.search', uri)
-  const updateFilterUriPrefix = (uriPrefix) => configActions.updateConfig('filter.optionset.uri_prefix', uriPrefix)
+  const updateFilterString = (uri) => dispatch(updateConfig('filter.optionset.search', uri))
+  const updateFilterUriPrefix = (uriPrefix) => dispatch(updateConfig('filter.optionset.uri_prefix', uriPrefix))
 
-  const updateDisplayURI = (value) => configActions.updateConfig('display.uri.options', value)
+  const displayUriOptions = isTruthy(get(config, 'display.uri.options', true))
+
+  const toggleDisplayUriOptions = () => dispatch(updateConfig('display.uri.options', !displayUriOptions))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
     <>
-      <div className="panel panel-default panel-nested">
-        <div className="panel-heading">
-          <div className="pull-right">
-            <BackButton />
-          </div>
-          <OptionSet config={config} optionset={optionset}
-                     configActions={configActions} elementActions={elementActions} display="plain" />
+      <div className="card">
+        <div className="card-header">
+          <OptionSet optionset={optionset} display="plain" backButton={true} />
         </div>
 
-        <div className="panel-body">
+        <div className="card-body">
           <div className="row">
             <div className="col-sm-8">
-              <FilterString value={get(config, 'filter.optionset.search', '')} onChange={updateFilterString}
-                            label={gettext('Filter option sets')} />
+              <FilterString
+                value={get(config, 'filter.optionset.search', '')} onChange={updateFilterString}
+                label={gettext('Filter option sets')} />
             </div>
             <div className="col-sm-4">
-              <FilterUriPrefix value={get(config, 'filter.optionset.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                               options={getUriPrefixes(optionset.elements)} />
+              <FilterUriPrefix
+                value={get(config, 'filter.optionset.uri_prefix', '')} onChange={updateFilterUriPrefix}
+                options={getUriPrefixes(optionset.elements)} />
             </div>
           </div>
-          <div className="checkboxes">
-            <span className="mr-10">{gettext('Show URIs:')}</span>
-            <Checkbox label={<code className="code-options">{gettext('Options')}</code>}
-                      value={get(config, 'display.uri.options', true)} onChange={updateDisplayURI} />
+          <div className="input-group input-group-sm">
+            <label className="input-group-text">{gettext('Show URIs')}</label>
+            <button type="button" onClick={toggleDisplayUriOptions} className={btnClass(displayUriOptions)}>
+              {gettext('Options')}
+            </button>
           </div>
         </div>
       </div>
 
       {
         optionset.elements.map((option, index) => (
-          <Option key={index} config={config} option={option}
-                  configActions={configActions} elementActions={elementActions}
-                  display="nested" filter="optionset" indent={1} />
+          <Option key={index} option={option} display="nested" filter="optionset" indent={1} />
         ))
       }
     </>
@@ -60,10 +66,7 @@ const NestedOptionSet = ({ config, optionset, configActions, elementActions }) =
 }
 
 NestedOptionSet.propTypes = {
-  config: PropTypes.object.isRequired,
-  optionset: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  optionset: PropTypes.object.isRequired
 }
 
 export default NestedOptionSet
diff --git a/rdmo/management/assets/js/components/nested/NestedPage.js b/rdmo/management/assets/js/components/nested/NestedPage.js
index d4cb75548d..e83bcb6c39 100644
--- a/rdmo/management/assets/js/components/nested/NestedPage.js
+++ b/rdmo/management/assets/js/components/nested/NestedPage.js
@@ -1,92 +1,101 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
-import isEmpty from 'lodash/isEmpty'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
-import Link from 'rdmo/core/assets/js/components/Link'
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 
+import { toggleDescendants } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
-import { BackButton } from '../common/Buttons'
 import { Drop } from '../common/DragAndDrop'
-
+import { FilterString, FilterUriPrefix } from '../common/Filter'
 import Page from '../element/Page'
-import QuestionSet from '../element/QuestionSet'
 import Question from '../element/Question'
+import QuestionSet from '../element/QuestionSet'
 
-const NestedPage = ({ config, page, configActions, elementActions }) => {
+const NestedPage = ({ page }) => {
+  const dispatch = useDispatch()
 
-  const updateFilterString = (uri) => configActions.updateConfig('filter.page.search', uri)
-  const updateFilterUriPrefix = (uriPrefix) => configActions.updateConfig('filter.page.uri_prefix', uriPrefix)
+  const config = useSelector((state) => state.config)
 
-  const toggleQuestionSets = () => elementActions.toggleDescendants(page, 'questionsets')
+  const updateFilterString = (uri) => dispatch(updateConfig('filter.page.search', uri))
+  const updateFilterUriPrefix = (uriPrefix) => dispatch(updateConfig('filter.page.uri_prefix', uriPrefix))
 
-  const updateDisplayPagesURI = (value) => configActions.updateConfig('display.uri.pages', value)
-  const updateDisplayQuestionSetsURI = (value) => configActions.updateConfig('display.uri.questionsets', value)
-  const updateDisplayQuestionsURI = (value) => configActions.updateConfig('display.uri.questions', value)
-  const updateDisplayAttributesURI = (value) => configActions.updateConfig('display.uri.attributes', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
-  const updateDisplayOptionSetURI = (value) => configActions.updateConfig('display.uri.optionsets', value)
+  const toggleQuestionSets = () => dispatch(toggleDescendants(page, 'questionsets'))
+
+  const displayUriQuestionSets = isTruthy(get(config, 'display.uri.questionsets', true))
+  const displayUriQuestions = isTruthy(get(config, 'display.uri.questions', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
+  const displayUriOptionSets = isTruthy(get(config, 'display.uri.optionsets', true))
+
+  const toggleDisplayUriQuestionSets = () => dispatch(updateConfig('display.uri.questionsets', !displayUriQuestionSets))
+  const toggleDisplayUriQuestions = () => dispatch(updateConfig('display.uri.questions', !displayUriQuestions))
+  const toggleDisplayUriAttributes = () => dispatch(updateConfig('display.uri.attributes', !displayUriAttributes))
+  const toggleDisplayUriConditions = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
+  const toggleDisplayUriOptionSets = () => dispatch(updateConfig('display.uri.optionsets', !displayUriOptionSets))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
     <>
-      <div className="panel panel-default panel-nested">
-        <div className="panel-heading">
-          <div className="pull-right">
-            <BackButton />
-          </div>
-          <Page config={config} page={page}
-                configActions={configActions} elementActions={elementActions} display="plain" />
+      <div className="card">
+        <div className="card-header">
+          <Page page={page} display="plain" backButton={true} />
         </div>
 
-        <div className="panel-body">
+        <div className="card-body">
           <div className="row">
             <div className="col-sm-8">
-              <FilterString value={get(config, 'filter.page.search', '')} onChange={updateFilterString}
-                            label={gettext('Filter pages')} />
+              <FilterString
+                value={get(config, 'filter.page.search', '')} onChange={updateFilterString}
+                label={gettext('Filter pages')} />
             </div>
             <div className="col-sm-4">
-              <FilterUriPrefix value={get(config, 'filter.page.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                               options={getUriPrefixes(page.elements)} />
+              <FilterUriPrefix
+                value={get(config, 'filter.page.uri_prefix', '')} onChange={updateFilterUriPrefix}
+                options={getUriPrefixes(page.elements)} />
             </div>
           </div>
-          <div className="mt-10">
-            <span className="mr-10">{gettext('Show elements:')}</span>
-            <Link className="mr-10" onClick={toggleQuestionSets}>{gettext('Question sets')}</Link>
+          <div className="input-group input-group-sm mb-2">
+            <label className="input-group-text">{gettext('Show URIs')}</label>
+            <button type="button" onClick={toggleDisplayUriQuestionSets} className={btnClass(displayUriQuestionSets)}>
+              {gettext('Question sets')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriQuestions} className={btnClass(displayUriQuestions)}>
+              {gettext('Questions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriAttributes} className={btnClass(displayUriAttributes)}>
+              {gettext('Attributes')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriConditions} className={btnClass(displayUriConditions)}>
+              {gettext('Conditions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriOptionSets} className={btnClass(displayUriOptionSets)}>
+              {gettext('Option sets')}
+            </button>
           </div>
-          <div className="checkboxes">
-            <span className="mr-10">{gettext('Show URIs:')}</span>
-            <Checkbox label={<code className="code-questions">{gettext('Pages')}</code>}
-                      value={get(config, 'config.display.uri.pages', true)} onChange={updateDisplayPagesURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Question sets')}</code>}
-                      value={get(config, 'config.display.uri.questionsets', true)} onChange={updateDisplayQuestionSetsURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Questions')}</code>}
-                      value={get(config, 'config.display.uri.questions', true)} onChange={updateDisplayQuestionsURI} />
-            <Checkbox label={<code className="code-domain">{gettext('Attributes')}</code>}
-                      value={get(config, 'config.display.uri.attributes', true)} onChange={updateDisplayAttributesURI} />
-            <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                      value={get(config, 'config.display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
-            <Checkbox label={<code className="code-options">{gettext('Option sets')}</code>}
-                      value={get(config, 'config.display.uri.optionsets', true)} onChange={updateDisplayOptionSetURI} />
+          <div className="input-group input-group-sm">
+            <label className="input-group-text">{gettext('Toggle elements')}</label>
+            <button type="button" onClick={toggleQuestionSets} className="btn btn-outline-primary border">
+              {gettext('Question sets')}
+            </button>
           </div>
         </div>
       </div>
       {
         !isEmpty(page.elements) &&
-        <Drop element={page.elements[0]} elementActions={elementActions} indent={1} mode="before" />
+        <Drop element={page.elements[0]} indent={1} mode="before" />
       }
       {
         page.elements.map((element, index) => {
           if (element.model == 'questions.questionset') {
-            return <QuestionSet key={index} config={config} questionset={element}
-                                configActions={configActions} elementActions={elementActions}
-                                display="nested" filter="page" indent={1} />
+            return <QuestionSet key={index} questionset={element} display="nested" filter="page" indent={1} />
           } else {
-            return <Question key={index} config={config} question={element}
-                             configActions={configActions} elementActions={elementActions}
-                             display="nested" filter="page" indent={1} />
+            return <Question key={index} question={element} display="nested" filter="page" indent={1} />
           }
         })
       }
@@ -95,10 +104,7 @@ const NestedPage = ({ config, page, configActions, elementActions }) => {
 }
 
 NestedPage.propTypes = {
-  config: PropTypes.object.isRequired,
-  page: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  page: PropTypes.object.isRequired
 }
 
 export default NestedPage
diff --git a/rdmo/management/assets/js/components/nested/NestedQuestionSet.js b/rdmo/management/assets/js/components/nested/NestedQuestionSet.js
index 986e84e309..7469daf496 100644
--- a/rdmo/management/assets/js/components/nested/NestedQuestionSet.js
+++ b/rdmo/management/assets/js/components/nested/NestedQuestionSet.js
@@ -1,88 +1,100 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
-import isEmpty from 'lodash/isEmpty'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
-import Link from 'rdmo/core/assets/js/components/Link'
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 
+import { toggleDescendants } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
-import { BackButton } from '../common/Buttons'
 import { Drop } from '../common/DragAndDrop'
-
-import QuestionSet from '../element/QuestionSet'
+import { FilterString, FilterUriPrefix } from '../common/Filter'
 import Question from '../element/Question'
+import QuestionSet from '../element/QuestionSet'
 
-const NestedQuestionSet = ({ config, questionset, configActions, elementActions }) => {
+const NestedQuestionSet = ({ questionset }) => {
+  const dispatch = useDispatch()
 
-  const updateFilterString = (uri) => configActions.updateConfig('filter.questionset.search', uri)
-  const updateFilterUriPrefix = (uriPrefix) => configActions.updateConfig('filter.questionset.uri_prefix', uriPrefix)
+  const config = useSelector((state) => state.config)
 
-  const toggleQuestionSets = () => elementActions.toggleDescendants(questionset, 'questionsets')
+  const updateFilterString = (uri) => dispatch(updateConfig('filter.questionset.search', uri))
+  const updateFilterUriPrefix = (uriPrefix) => dispatch(updateConfig('filter.questionset.uri_prefix', uriPrefix))
 
-  const updateDisplayQuestionSetsURI = (value) => configActions.updateConfig('display.uri.questionsets', value)
-  const updateDisplayQuestionsURI = (value) => configActions.updateConfig('display.uri.questions', value)
-  const updateDisplayAttributesURI = (value) => configActions.updateConfig('display.uri.attributes', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
-  const updateDisplayOptionSetURI = (value) => configActions.updateConfig('display.uri.optionsets', value)
+  const toggleQuestionSets = () => dispatch(toggleDescendants(questionset, 'questionsets'))
+
+  const displayUriQuestionSets = isTruthy(get(config, 'display.uri.questionsets', true))
+  const displayUriQuestions = isTruthy(get(config, 'display.uri.questions', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
+  const displayUriOptionSets = isTruthy(get(config, 'display.uri.optionsets', true))
+
+  const toggleDisplayUriQuestionSets = () => dispatch(updateConfig('display.uri.questionsets', !displayUriQuestionSets))
+  const toggleDisplayUriQuestions = () => dispatch(updateConfig('display.uri.questions', !displayUriQuestions))
+  const toggleDisplayUriAttributes = () => dispatch(updateConfig('display.uri.attributes', !displayUriAttributes))
+  const toggleDisplayUriConditions = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
+  const toggleDisplayUriOptionSets = () => dispatch(updateConfig('display.uri.optionsets', !displayUriOptionSets))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
     <>
-      <div className="panel panel-default panel-nested">
-        <div className="panel-heading">
-          <div className="pull-right">
-            <BackButton />
-          </div>
-          <QuestionSet config={config} questionset={questionset}
-                       configActions={configActions} elementActions={elementActions} display="plain" />
+      <div className="card">
+        <div className="card-header">
+          <QuestionSet questionset={questionset} display="plain" backButton={true} />
         </div>
 
-        <div className="panel-body">
+        <div className="card-body">
           <div className="row">
             <div className="col-sm-8">
-              <FilterString value={get(config, 'filter.questionset.search', '')} onChange={updateFilterString}
-                            label={gettext('Filter question sets')} />
+              <FilterString
+                value={get(config, 'filter.questionset.search', '')} onChange={updateFilterString}
+                label={gettext('Filter question sets')} />
             </div>
             <div className="col-sm-4">
-              <FilterUriPrefix value={get(config, 'filter.questionset.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                               options={getUriPrefixes(questionset.elements)} />
+              <FilterUriPrefix
+                value={get(config, 'filter.questionset.uri_prefix', '')} onChange={updateFilterUriPrefix}
+                options={getUriPrefixes(questionset.elements)} />
             </div>
           </div>
-          <div className="mt-10">
-            <span className="mr-10">{gettext('Show elements:')}</span>
-            <Link className="mr-10" onClick={toggleQuestionSets}>{gettext('Question sets')}</Link>
+          <div className="input-group input-group-sm mb-2">
+            <label className="input-group-text">{gettext('Show URIs')}</label>
+            <button type="button" onClick={toggleDisplayUriQuestionSets} className={btnClass(displayUriQuestionSets)}>
+              {gettext('Question sets')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriQuestions} className={btnClass(displayUriQuestions)}>
+              {gettext('Questions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriAttributes} className={btnClass(displayUriAttributes)}>
+              {gettext('Attributes')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriConditions} className={btnClass(displayUriConditions)}>
+              {gettext('Conditions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriOptionSets} className={btnClass(displayUriOptionSets)}>
+              {gettext('Option sets')}
+            </button>
           </div>
-          <div className="checkboxes">
-            <span className="mr-10">{gettext('Show URIs:')}</span>
-            <Checkbox label={<code className="code-questions">{gettext('Question sets')}</code>}
-                      value={get(config, 'display.uri.questionsets', true)} onChange={updateDisplayQuestionSetsURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Questions')}</code>}
-                      value={get(config, 'display.uri.questions', true)} onChange={updateDisplayQuestionsURI} />
-            <Checkbox label={<code className="code-domain">{gettext('Attributes')}</code>}
-                      value={get(config, 'display.uri.attributes', true)} onChange={updateDisplayAttributesURI} />
-            <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                      value={get(config, 'display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
-            <Checkbox label={<code className="code-options">{gettext('Option sets')}</code>}
-                      value={get(config, 'display.uri.optionsets', true)} onChange={updateDisplayOptionSetURI} />
+          <div className="input-group input-group-sm">
+            <label className="input-group-text">{gettext('Toggle elements')}</label>
+            <button type="button" onClick={toggleQuestionSets} className="btn btn-outline-primary border">
+              {gettext('Question sets')}
+            </button>
           </div>
         </div>
       </div>
       {
         !isEmpty(questionset.elements) &&
-        <Drop element={questionset.elements[0]} elementActions={elementActions} indent={1} mode="before" />
+        <Drop element={questionset.elements[0]} indent={1} mode="before" />
       }
       {
         questionset.elements.map((element, index) => {
           if (element.model == 'questions.questionset') {
-            return <QuestionSet key={index} config={config} questionset={element}
-                                configActions={configActions} elementActions={elementActions}
-                                display="nested" filter="questionset" indent={1} />
+            return <QuestionSet key={index} questionset={element} display="nested" filter="questionset" indent={1} />
           } else {
-            return <Question key={index} config={config} question={element}
-                             configActions={configActions} elementActions={elementActions}
-                             display="nested" filter="questionset" indent={1} />
+            return <Question key={index} question={element} display="nested" filter="questionset" indent={1} />
           }
         })
       }
@@ -91,10 +103,7 @@ const NestedQuestionSet = ({ config, questionset, configActions, elementActions
 }
 
 NestedQuestionSet.propTypes = {
-  config: PropTypes.object.isRequired,
   questionset: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
 }
 
 export default NestedQuestionSet
diff --git a/rdmo/management/assets/js/components/nested/NestedSection.js b/rdmo/management/assets/js/components/nested/NestedSection.js
index e381ee59ad..6b497192c7 100644
--- a/rdmo/management/assets/js/components/nested/NestedSection.js
+++ b/rdmo/management/assets/js/components/nested/NestedSection.js
@@ -1,91 +1,113 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
-import isEmpty from 'lodash/isEmpty'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { get, isEmpty } from 'lodash'
 
-import Link from 'rdmo/core/assets/js/components/Link'
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { isTruthy } from 'rdmo/core/assets/js/utils/config'
 
+import { toggleDescendants } from '../../actions/elementActions'
 import { getUriPrefixes } from '../../utils/filter'
 
-import { FilterString, FilterUriPrefix } from '../common/Filter'
-import { Checkbox } from '../common/Checkboxes'
-import { BackButton } from '../common/Buttons'
 import { Drop } from '../common/DragAndDrop'
-
-import Section from '../element/Section'
+import { FilterString, FilterUriPrefix } from '../common/Filter'
 import Page from '../element/Page'
+import Section from '../element/Section'
 
-const NestedSection = ({ config, section, configActions, elementActions }) => {
+const NestedSection = ({ section }) => {
+  const dispatch = useDispatch()
 
-  const updateFilterString = (uri) => configActions.updateConfig('filter.section.search', uri)
-  const updateFilterUriPrefix = (uriPrefix) => configActions.updateConfig('filter.section.uri_prefix', uriPrefix)
+  const config = useSelector((state) => state.config)
 
-  const togglePages = () => elementActions.toggleDescendants(section, 'pages')
-  const toggleQuestionSets = () => elementActions.toggleDescendants(section, 'questionsets')
+  const updateFilterString = (uri) => dispatch(updateConfig('filter.section.search', uri))
+  const updateFilterUriPrefix = (uriPrefix) => dispatch(updateConfig('filter.section.uri_prefix', uriPrefix))
 
-  const updateDisplaySectionURI = (value) => configActions.updateConfig('display.uri.sections', value)
-  const updateDisplayPagesURI = (value) => configActions.updateConfig('display.uri.pages', value)
-  const updateDisplayQuestionSetsURI = (value) => configActions.updateConfig('display.uri.questionsets', value)
-  const updateDisplayQuestionsURI = (value) => configActions.updateConfig('display.uri.questions', value)
-  const updateDisplayAttributesURI = (value) => configActions.updateConfig('display.uri.attributes', value)
-  const updateDisplayConditionsURI = (value) => configActions.updateConfig('display.uri.conditions', value)
-  const updateDisplayOptionSetURI = (value) => configActions.updateConfig('display.uri.optionsets', value)
+  const togglePages = () => dispatch(toggleDescendants(section, 'pages'))
+  const toggleQuestionSets = () => dispatch(toggleDescendants(section, 'questionsets'))
+
+  const displayUriSections = isTruthy(get(config, 'display.uri.sections', true))
+  const displayUriPages = isTruthy(get(config, 'display.uri.pages', true))
+  const displayUriQuestionSets = isTruthy(get(config, 'display.uri.questionsets', true))
+  const displayUriQuestions = isTruthy(get(config, 'display.uri.questions', true))
+  const displayUriAttributes = isTruthy(get(config, 'display.uri.attributes', true))
+  const displayUriConditions = isTruthy(get(config, 'display.uri.conditions', true))
+  const displayUriOptionSets = isTruthy(get(config, 'display.uri.optionsets', true))
+
+  const toggleDisplayUriSections = () => dispatch(updateConfig('display.uri.sections', !displayUriSections))
+  const toggleDisplayUriPages = () => dispatch(updateConfig('display.uri.pages', !displayUriPages))
+  const toggleDisplayUriQuestionSets = () => dispatch(updateConfig('display.uri.questionsets', !displayUriQuestionSets))
+  const toggleDisplayUriQuestions = () => dispatch(updateConfig('display.uri.questions', !displayUriQuestions))
+  const toggleDisplayUriAttributes = () => dispatch(updateConfig('display.uri.attributes', !displayUriAttributes))
+  const toggleDisplayUriConditions = () => dispatch(updateConfig('display.uri.conditions', !displayUriConditions))
+  const toggleDisplayUriOptionSets = () => dispatch(updateConfig('display.uri.optionsets', !displayUriOptionSets))
+
+  const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
     <>
-      <div className="panel panel-default panel-nested">
-        <div className="panel-heading">
-          <div className="pull-right">
-            <BackButton />
-          </div>
-          <Section config={config} section={section}
-                   configActions={configActions} elementActions={elementActions} display="plain" />
+      <div className="card">
+        <div className="card-header">
+          <Section section={section} display="plain" backButton={true} />
         </div>
 
-        <div className="panel-body">
+        <div className="card-body">
           <div className="row">
             <div className="col-sm-8">
-              <FilterString value={get(config, 'filter.section.search', '')} onChange={updateFilterString}
-                            label={gettext('Filter sections')} />
+              <FilterString
+                value={get(config, 'filter.section.search', '')} onChange={updateFilterString}
+                label={gettext('Filter sections')} />
             </div>
             <div className="col-sm-4">
-              <FilterUriPrefix value={get(config, 'filter.section.uri_prefix', '')} onChange={updateFilterUriPrefix}
-                               options={getUriPrefixes(section.elements)} />
+              <FilterUriPrefix
+                value={get(config, 'filter.section.uri_prefix', '')} onChange={updateFilterUriPrefix}
+                options={getUriPrefixes(section.elements)} />
             </div>
           </div>
-          <div className="mt-10">
-            <span className="mr-10">{gettext('Show elements:')}</span>
-            <Link className="mr-10" onClick={togglePages}>{gettext('Pages')}</Link>
-            <Link className="mr-10" onClick={toggleQuestionSets}>{gettext('Question sets')}</Link>
+          <div className="input-group input-group-sm mb-2">
+            <label className="input-group-text">{gettext('Show URIs')}</label>
+            <button type="button" onClick={toggleDisplayUriSections} className={btnClass(displayUriSections)}>
+              {gettext('Sections')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriPages} className={btnClass(displayUriPages)}>
+              {gettext('Pages')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriQuestionSets} className={btnClass(displayUriQuestionSets)}>
+              {gettext('Question sets')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriQuestions} className={btnClass(displayUriQuestions)}>
+              {gettext('Questions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriAttributes} className={btnClass(displayUriAttributes)}>
+              {gettext('Attributes')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriConditions} className={btnClass(displayUriConditions)}>
+              {gettext('Conditions')}
+            </button>
+            <button type="button" onClick={toggleDisplayUriOptionSets} className={btnClass(displayUriOptionSets)}>
+              {gettext('Option sets')}
+            </button>
           </div>
-          <div className="checkboxes">
-            <span className="mr-10">{gettext('Show URIs:')}</span>
-            <Checkbox label={<code className="code-questions">{gettext('Sections')}</code>}
-                      value={get(config, 'config.display.uri.sections', true)} onChange={updateDisplaySectionURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Pages')}</code>}
-                      value={get(config, 'config.display.uri.pages', true)} onChange={updateDisplayPagesURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Question sets')}</code>}
-                      value={get(config, 'config.display.uri.questionsets', true)} onChange={updateDisplayQuestionSetsURI} />
-            <Checkbox label={<code className="code-questions">{gettext('Questions')}</code>}
-                      value={get(config, 'config.display.uri.questions', true)} onChange={updateDisplayQuestionsURI} />
-            <Checkbox label={<code className="code-domain">{gettext('Attributes')}</code>}
-                      value={get(config, 'config.display.uri.attributes', true)} onChange={updateDisplayAttributesURI} />
-            <Checkbox label={<code className="code-conditions">{gettext('Conditions')}</code>}
-                      value={get(config, 'config.display.uri.conditions', true)} onChange={updateDisplayConditionsURI} />
-            <Checkbox label={<code className="code-options">{gettext('Option sets')}</code>}
-                      value={get(config, 'config.display.uri.optionsets', true)} onChange={updateDisplayOptionSetURI} />
+          <div className="input-group input-group-sm">
+            <label className="input-group-text">{gettext('Toggle elements')}</label>
+            <button type="button" onClick={togglePages} className="btn btn-outline-primary border">
+              {gettext('Pages')}
+            </button>
+            <button type="button" onClick={toggleQuestionSets} className="btn btn-outline-primary border">
+              {gettext('Question sets')}
+            </button>
           </div>
         </div>
       </div>
       {
         !isEmpty(section.elements) &&
-        <Drop element={section.elements[0]} elementActions={elementActions} indent={1} mode="before" />
+        <Drop element={section.elements[0]} indent={1} mode="before" />
       }
       {
         section.elements.map((page, index) => (
-          <Page key={index} config={config} page={page}
-                configActions={configActions} elementActions={elementActions}
-                display="nested" filter="section" indent={1} />
+          <Page
+            key={index} config={config} page={page}
+            display="nested" filter="section" indent={1} />
         ))
       }
     </>
@@ -93,10 +115,7 @@ const NestedSection = ({ config, section, configActions, elementActions }) => {
 }
 
 NestedSection.propTypes = {
-  config: PropTypes.object.isRequired,
-  section: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired
+  section: PropTypes.object.isRequired
 }
 
 export default NestedSection
diff --git a/rdmo/management/assets/js/components/sidebar/ElementsSidebar.js b/rdmo/management/assets/js/components/sidebar/ElementsSidebar.js
index c451ebf1f2..a2811f83df 100644
--- a/rdmo/management/assets/js/components/sidebar/ElementsSidebar.js
+++ b/rdmo/management/assets/js/components/sidebar/ElementsSidebar.js
@@ -1,145 +1,162 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import isNil from 'lodash/isNil'
-import invert from 'lodash/invert'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+import { invert, isEmpty, isNil } from 'lodash'
 
-import { elementTypes, elementModules } from '../../constants/elements'
+import Link from 'rdmo/core/assets/js/components/Link'
+import Select from 'rdmo/core/assets/js/components/Select'
 
-import { buildApiPath, buildPath } from '../../utils/location'
+import { fetchElements } from '../../actions/elementActions'
+import { uploadFile } from '../../actions/importActions'
+import { elementModules, elementTypes } from '../../constants/elements'
 import { getExportParams } from '../../utils/filter'
+import { buildApiPath, buildPath } from '../../utils/location'
 
-import Link from 'rdmo/core/assets/js/components/Link'
+const navigation = {
+  catalogs: gettext('Catalogs'),
+  sections: gettext('Sections'),
+  pages: gettext('Pages'),
+  questionsets: gettext('Question sets'),
+  questions: gettext('Questions'),
+  attributes: gettext('Attributes'),
+  optionsets: gettext('Option sets'),
+  options: gettext('Options'),
+  conditions: gettext('Conditions'),
+  tasks: gettext('Tasks'),
+  views: gettext('Views'),
+}
 
-import { UploadForm } from '../common/Forms'
+const icons = {
+  catalogs: 'book',
+  sections: 'files',
+  pages: 'file',
+  questionsets: 'question-square',
+  questions: 'question-circle',
+  attributes: 'code-slash',
+  optionsets: 'card-checklist',
+  options: 'list-check',
+  conditions: 'check-circle',
+  tasks: 'exclamation-circle',
+  views: 'file-earmark-text',
+}
+
+const ElementsSidebar = () => {
+  const dispatch = useDispatch()
 
-const ElementsSidebar = ({ config, elements, elementActions, importActions }) => {
-  const { elementType, elementId } = elements
+  const config = useSelector((state) => state.config)
+  const { elementType, elementId } = useSelector((state) => state.elements)
 
   const model = invert(elementTypes)[elementType]
-  const exportUrl = isNil(elementId) ? buildApiPath(elementModules[model], elementType, 'export')
-                                     : buildApiPath(elementModules[model], elementType, elementId, 'export')
+  const exportUrl = isNil(elementId) ? (
+    buildApiPath(elementModules[model], elementType, 'export')
+  ) : buildApiPath(elementModules[model], elementType, elementId, 'export')
   const exportParams = isNil(config.filter) ? '' : getExportParams(config.filter[elementType])
 
+  const handleExport = (key) => {
+
+    const getUrl = () => {
+      let url = exportUrl
+
+      if (key == 'xml') {
+        url += '?'
+      } else if (key == 'xml_full') {
+        url += '?full=true'
+      } else {
+        url += `${key}?`
+      }
+
+      url += `&${exportParams}`
+
+      return url
+    }
+
+    const a = document.createElement('a')
+    a.href = getUrl()
+    a.target = ['pdf', 'html'].includes(key) ? '_blank' : '_self'
+    a.click()
+  }
+
+  const handleFileUpload = (event) => {
+    if (!isEmpty(event.target.files)) {
+      dispatch(uploadFile(event.target.files[0]))
+    }
+  }
+
+  const exportOptions = [
+    { value: 'xml', label: gettext('XML') }
+  ]
+
+  if ([
+    'catalogs', 'sections', 'pages', 'questionsets', 'questions', 'optionsets', 'conditions', 'tasks'
+  ].includes(elementType)) {
+    exportOptions.push(
+      { value: 'xml_full', label: gettext('XML (full)') }
+    )
+  }
+
+  if (elementType == 'attributes') {
+    exportOptions.push(
+      { value: 'csvcomma', label: gettext('CSV comma separated') },
+      { value: 'csvsemicolon', label: gettext('CSV semicolon separated') }
+    )
+  }
+
+  if (config.settings.export_formats) {
+    exportOptions.push(...config.settings.export_formats.map(([key, label]) => (
+      { value: key, label }
+    )))
+  }
+
   return (
-    <div className="elements-sidebar">
-      <h2>Navigation</h2>
-
-      <ul className="list-unstyled">
-        <li>
-          <Link href={buildPath('catalogs')}
-                onClick={() => elementActions.fetchElements('catalogs')}>{gettext('Catalogs')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('sections')}
-                onClick={() => elementActions.fetchElements('sections')}>{gettext('Sections')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('pages')}
-                onClick={() => elementActions.fetchElements('pages')}>{gettext('Pages')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('questionsets')}
-                onClick={() => elementActions.fetchElements('questionsets')}>{gettext('Question sets')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('questions')}
-                onClick={() => elementActions.fetchElements('questions')}>{gettext('Questions')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('attributes')}
-                onClick={() => elementActions.fetchElements('attributes')}>{gettext('Attributes')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('optionsets')}
-                onClick={() => elementActions.fetchElements('optionsets')}>{gettext('Option sets')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('options')}
-                onClick={() => elementActions.fetchElements('options')}>{gettext('Options')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('conditions')}
-                onClick={() => elementActions.fetchElements('conditions')}>{gettext('Conditions')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('tasks')}
-                onClick={() => elementActions.fetchElements('tasks')}>{gettext('Tasks')}</Link>
-        </li>
-        <li>
-          <Link href={buildPath('views')}
-                onClick={() => elementActions.fetchElements('views')}>{gettext('Views')}</Link>
-        </li>
-      </ul>
-
-      <h2>Export</h2>
-
-      <p className="text-muted">
-        {gettext('Export all visible elements.')}
-      </p>
+    <div className="d-flex flex-column">
+      <h2 className="px-3 mb-4">
+        {gettext('Management')}
+      </h2>
 
-      <ul className="list-unstyled">
-        <li>
-          <a href={`${exportUrl}?${exportParams}`}>{gettext('XML')}</a>
-        </li>
+      <nav className="nav nav-pills nav-fill flex-column mb-4">
         {
-          [
-            'catalogs',
-            'sections',
-            'pages',
-            'questionsets',
-            'questions',
-            'optionsets',
-            'conditions',
-            'tasks'
-          ].includes(elementType) && (
-            <li>
-              <a href={`${exportUrl}?full=true&${exportParams}`}>{gettext('XML (full)')}</a>
-            </li>
-          )
+          Object.entries(navigation).map(([et, label]) => (
+            <Link
+              key={et}
+              href={buildPath(et)}
+              className={classNames('nav-link text-start', { active: elementType === et })}
+              onClick={() => dispatch(fetchElements(et))}>
+              <div className="d-flex align-items-center gap-2">
+                <i className={`bi bi-${icons[et]}`} aria-hidden="true" />
+                {label}
+              </div>
+            </Link>
+          ))
         }
-      </ul>
+      </nav>
 
-      <ul className="list-unstyled">
-        {
-          elementType == 'attributes' && <>
-            <li>
-              <a href={`${exportUrl}csvcomma/?${exportParams}`}>
-                {gettext('CSV comma separated')}
-              </a>
-            </li>
-            <li>
-              <a href={`${exportUrl}csvsemicolon/?${exportParams}`}>
-                {gettext('CSV semicolon separated')}
-              </a>
-            </li>
-          </>
-        }
-        {
-          config.settings.export_formats &&
-          config.settings.export_formats.map(([key, label], index) => <li key={index}>
-            <a href={`${exportUrl}${key}/?${exportParams}`}
-               target={['pdf', 'html'].includes(key) ? '_blank' : '_self'}
-               rel="noreferrer">{label}</a>
-          </li>)
-        }
-      </ul>
+      <h3 className="px-3 my-2">
+        {gettext('Export')}
+      </h3>
+
+      <p className="text-muted px-3 my-2">
+        {gettext('Export all visible elements.')}
+      </p>
+
+      <div className="text-muted px-3 mb-4">
+        <Select options={exportOptions} onChange={handleExport} placeholder={gettext('Select format ...')} />
+      </div>
 
-      <h2>Import</h2>
+      <h3 className="px-3 mb-2">
+        {gettext('Import')}
+      </h3>
 
-      <p className="text-muted">
+      <p className="text-muted px-3 mb-2">
         {gettext('Import an RDMO XML file.')}
       </p>
 
-      <UploadForm onSubmit={file => importActions.uploadFile(file)} />
+      <div className="text-muted px-3">
+        <input
+          className="form-control" type="file" id="fileUpload" name="uploaded_file"
+          onChange={handleFileUpload} />
+      </div>
     </div>
   )
 }
 
-ElementsSidebar.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
-  importActions: PropTypes.object.isRequired
-}
-
 export default ElementsSidebar
diff --git a/rdmo/management/assets/js/components/sidebar/ImportSidebar.js b/rdmo/management/assets/js/components/sidebar/ImportSidebar.js
index ca02eb629e..a9219fe668 100644
--- a/rdmo/management/assets/js/components/sidebar/ImportSidebar.js
+++ b/rdmo/management/assets/js/components/sidebar/ImportSidebar.js
@@ -1,16 +1,22 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
 
-import Link from 'rdmo/core/assets/js/components/Link'
-import {useImportElements} from '../../hooks/useImportElements'
+import {
+  importElements, resetElements, selectChangedElements,
+  selectElements, showChangedElements, showElements, updateUriPrefix
+} from '../../actions/importActions'
+import { useImportElements } from '../../hooks/useImportElements'
 
 
-const ImportSidebar = ({ config, imports, importActions }) => {
-  const { elements, success } = imports
+const ImportSidebar = () => {
+  const dispatch = useDispatch()
 
-   const {
+  const { settings } = useSelector((state) => state.config)
+  const { elements, success } = useSelector((state) => state.imports)
+
+  const {
     changedElements,
   } = useImportElements(elements)
 
@@ -18,9 +24,9 @@ const ImportSidebar = ({ config, imports, importActions }) => {
   const [uriPrefix, setUriPrefix] = useState('')
   const disabled = isNil(uriPrefix) || isEmpty(uriPrefix)
 
-  const updateUriPrefix = () => {
+  const handleUpdateUriPrefix = () => {
     if (!disabled) {
-      importActions.updateUriPrefix(uriPrefix)
+      dispatch(updateUriPrefix(uriPrefix))
     }
   }
 
@@ -30,7 +36,7 @@ const ImportSidebar = ({ config, imports, importActions }) => {
         <h2>{gettext('Import successful')}</h2>
 
         <p className="import-buttons">
-          <button type="button" className="btn btn-default" onClick={() => importActions.resetElements()}>
+          <button type="button" className="btn btn-light border" onClick={() => dispatch(resetElements())}>
             {gettext('Back')}
           </button>
         </p>
@@ -39,95 +45,114 @@ const ImportSidebar = ({ config, imports, importActions }) => {
   } else {
     return (
       <div className="import-sidebar">
-        <h2>{gettext('Import elements')}</h2>
-        <p className="import-buttons">
-          <button type="button" className="btn btn-success" onClick={() => importActions.importElements()}>
+
+        <div className="px-3 my-4">
+          <h3>{gettext('Import elements')}</h3>
+        </div>
+
+        <div className="d-flex align-items-center gap-2 px-3 my-3">
+          <button type="button" className="btn btn-success flex-grow-1" onClick={() => dispatch(importElements())}>
             {interpolate(ngettext('Import one element', 'Import %s elements', count), [count])}
           </button>
-          <button type="button" className="btn btn-default" onClick={() => importActions.resetElements()}>
+          <button type="button" className="btn btn-light border" onClick={() => dispatch(resetElements())}>
             {gettext('Back')}
           </button>
-        </p>
+        </div>
 
-        <h2>{gettext('Selection')}</h2>
-
-        <ul className="list-unstyled">
-          <li>
-            <Link onClick={() => importActions.selectElements(true)}>
-              {gettext('Select all')}
-            </Link>
-          </li>
-          {changedElements.length > 0 &&
-            <li>
-              <Link onClick={() => importActions.selectChangedElements(true)}>
+        <div className="px-3 my-4">
+          <h3>{gettext('Selection')}</h3>
+        </div>
+
+        <div className="d-flex flex-column gap-2 px-3 my-3">
+          <button
+            type="button" className="btn btn-light border text-start"
+            onClick={() => dispatch(selectElements(true))}>
+            {gettext('Select all')}
+          </button>
+          {
+            changedElements.length > 0 && (
+              <button
+                type="button" className="btn btn-light border text-start"
+                onClick={() => dispatch(selectChangedElements(true))}>
                 {gettext('Select changed')}
-              </Link>
-            </li>
+              </button>
+            )
           }
-          <li>
-            <Link onClick={() => importActions.selectElements(false)}>
-              {gettext('Deselect all')}
-            </Link>
-          </li>
-          {changedElements.length > 0 &&
-            <li>
-              <Link onClick={() => importActions.selectChangedElements(false)}>
+          <button
+            type="button" className="btn btn-light border text-start"
+            onClick={() => dispatch(selectElements(false))}>
+            {gettext('Deselect all')}
+          </button>
+          {
+            changedElements.length > 0 && (
+              <button
+                type="button" className="btn btn-light border text-start"
+                onClick={() => dispatch(selectChangedElements(false))}>
                 {gettext('Deselect changed')}
-              </Link>
-            </li>
+              </button>
+            )
           }
-        </ul>
-
-          <h2>{gettext('Show')}</h2>
-          <ul className="list-unstyled">
-          <li>
-            <Link onClick={() => importActions.showElements(true)}>
-              {gettext('Show all')}
-            </Link>
-          </li>
-          {changedElements.length > 0 &&
-            <li>
-              <Link onClick={() => importActions.showChangedElements(true)}>
+        </div>
+
+        <div className="px-3 my-4">
+          <h3>{gettext('Show')}</h3>
+        </div>
+
+        <div className="d-flex flex-column gap-2 px-3 my-4">
+          <button
+            type="button" className="btn btn-light border text-start"
+            onClick={() => dispatch(showElements(true))}>
+            {gettext('Show all')}
+          </button>
+          {
+            changedElements.length > 0 && (
+              <button
+                type="button" className="btn btn-light border text-start"
+                onClick={() => dispatch(showChangedElements(true))}>
                 {gettext('Show changes')}
-              </Link>
-            </li>
-          }
-          <li>
-            <Link onClick={() => importActions.showElements(false)}>
-              {gettext('Hide all')}
-            </Link>
-          </li>
-            {changedElements.length > 0 &&
-              <li>
-                <Link onClick={() => importActions.showChangedElements(false)}>
-                  {gettext('Hide changes')}
-                </Link>
-              </li>
-            }
-          </ul>
-
-        <h2>{gettext('URI prefix')}</h2>
-
-        <div className="form-group">
-          <div className="input-group">
-            <input className="form-control" type="text"
-                   placeholder={gettext('URI prefix')} aria-label={gettext('URI prefix')}
-                   value={uriPrefix} onChange={event => setUriPrefix(event.target.value)} />
-
-            <span className="input-group-btn">
-              <button type="button" className="btn btn-default"
-                title={gettext('Insert default URI Prefix')}
-                aria-label={gettext('Insert default URI Prefix')}
-                onClick={() => setUriPrefix(config.settings.default_uri_prefix)}>
-                <span className="fa fa-magic"></span>
               </button>
-              <button type="button" className="btn btn-primary" disabled={disabled}
-                title={gettext('Set URI prefix for all elements')}
-                aria-label={gettext('Set URI prefix for all elements')}
-                onClick={updateUriPrefix}>
-                <span className="fa fa-arrow-right"></span>
+            )
+          }
+          <button
+            type="button" className="btn btn-light border text-start"
+            onClick={() => dispatch(showElements(false))}>
+            {gettext('Hide all')}
+          </button>
+          {
+            changedElements.length > 0 && (
+              <button
+                type="button" className="btn btn-light border text-start"
+                onClick={() => dispatch(showChangedElements(false))}>
+                {gettext('Hide changes')}
               </button>
-            </span>
+            )
+          }
+        </div>
+
+        <div className="px-3 my-4">
+          <h3>{gettext('URI prefix')}</h3>
+
+          <div className="input-group">
+            <input
+              type="text" className="form-control"
+              placeholder={gettext('URI prefix')} aria-label={gettext('URI prefix')}
+              value={uriPrefix} onChange={event => setUriPrefix(event.target.value)} />
+
+            <button
+              type="button" className="btn btn-light border"
+              title={gettext('Insert default URI Prefix')}
+              aria-label={gettext('Insert default URI Prefix')}
+              onClick={() => setUriPrefix(settings.default_uri_prefix)}>
+              <span className="bi bi-magic"></span>
+            </button>
+
+            <button
+              type="button" className="btn btn-primary" disabled={disabled}
+              title={gettext('Set URI prefix for all elements')}
+              aria-label={gettext('Set URI prefix for all elements')}
+              onClick={handleUpdateUriPrefix}>
+              <span className="bi bi-arrow-right"></span>
+            </button>
           </div>
         </div>
       </div>
@@ -135,10 +160,4 @@ const ImportSidebar = ({ config, imports, importActions }) => {
   }
 }
 
-ImportSidebar.propTypes = {
-  config: PropTypes.object.isRequired,
-  imports: PropTypes.object.isRequired,
-  importActions: PropTypes.object.isRequired
-}
-
 export default ImportSidebar
diff --git a/rdmo/management/assets/js/constants/elements.js b/rdmo/management/assets/js/constants/elements.js
index 112dd13fa8..0e82046408 100644
--- a/rdmo/management/assets/js/constants/elements.js
+++ b/rdmo/management/assets/js/constants/elements.js
@@ -54,4 +54,4 @@ const verboseNames = {
   'views.view': gettext('View')
 }
 
-export { elementTypes, elementModules, codeClass, verboseNames }
+export { codeClass, elementModules, elementTypes, verboseNames }
diff --git a/rdmo/management/assets/js/containers/Main.js b/rdmo/management/assets/js/containers/Main.js
deleted file mode 100644
index dca83c3dce..0000000000
--- a/rdmo/management/assets/js/containers/Main.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import get from 'lodash/get'
-import isEmpty from 'lodash/isEmpty'
-import isNil from 'lodash/isNil'
-
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-
-import * as elementActions from '../actions/elementActions'
-import * as importActions from '../actions/importActions'
-
-import { MainErrors } from '../components/common/Errors'
-
-import Edit from '../components/main/Edit'
-import Elements from '../components/main/Elements'
-import Import from '../components/main/Import'
-import Nested from '../components/main/Nested'
-
-const Main = ({ config, elements, imports, configActions, elementActions, importActions }) => {
-  const { element, elementType, elementId, elementAction } = elements
-
-  // check if anything was loaded yet
-  if (isNil(config.settings) || isNil(elementType)) {
-    return null
-  }
-
-  // check if an error occurred
-  if (!isNil(elements.errors.api)) {
-    return <MainErrors errors={elements.errors.api} />
-  } else if (get(elements, 'element.errors.api')) {
-    return <MainErrors errors={get(elements, 'element.errors.api')} />
-  } else if (!isNil(imports.errors.file)) {
-    return <MainErrors errors={imports.errors.file} />
-  }
-
-  if (!isEmpty(imports.elements)) {
-    return <Import config={config} imports={imports}
-                   configActions={configActions} importActions={importActions} />
-  }
-
-  // check if the nested components should be displayed
-  if (!isNil(element) && elementAction === 'nested') {
-    return <Nested config={config} elements={elements}
-                   configActions={configActions} elementActions={elementActions} />
-  }
-
-  // check if the edit components should be displayed
-  if (!isNil(element)) {
-    return <Edit config={config} elements={elements}
-                 configActions={configActions} elementActions={elementActions} />
-  }
-
-  // check if the list components should be displayed
-  if (isNil(elementId) && isNil(elementAction)) {
-    return <Elements config={config} elements={elements}
-                     configActions={configActions} elementActions={elementActions} />
-  }
-
-  // fetching the data is not complete yet, or no action was invoked yet
-  return null
-}
-
-Main.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  imports: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
-  importActions: PropTypes.object.isRequired
-}
-
-function mapStateToProps(state) {
-  return {
-    config: state.config,
-    elements: state.elements,
-    imports: state.imports
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    configActions: bindActionCreators(configActions, dispatch),
-    elementActions: bindActionCreators(elementActions, dispatch),
-    importActions: bindActionCreators(importActions, dispatch)
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Main)
diff --git a/rdmo/management/assets/js/containers/Sidebar.js b/rdmo/management/assets/js/containers/Sidebar.js
deleted file mode 100644
index da04378164..0000000000
--- a/rdmo/management/assets/js/containers/Sidebar.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { isEmpty, isNil } from 'lodash'
-
-import * as elementActions from '../actions/elementActions'
-import * as importActions from '../actions/importActions'
-
-import ElementsSidebar from '../components/sidebar/ElementsSidebar'
-import ImportSidebar from '../components/sidebar/ImportSidebar'
-
-const Sidebar = ({ config, elements, imports, elementActions, importActions }) => {
-  // check if anything was loaded yet
-  if (isNil(config.settings)) {
-    return null
-  }
-
-  if (isEmpty(imports.elements)) {
-    return <ElementsSidebar config={config} elements={elements}
-                            elementActions={elementActions} importActions={importActions} />
-  } else {
-    return <ImportSidebar config={config} imports={imports} importActions={importActions} />
-  }
-}
-
-Sidebar.propTypes = {
-  config: PropTypes.object.isRequired,
-  elements: PropTypes.object.isRequired,
-  imports: PropTypes.object.isRequired,
-  elementActions: PropTypes.object.isRequired,
-  importActions: PropTypes.object.isRequired
-}
-
-function mapStateToProps(state) {
-  return {
-    config: state.config,
-    elements: state.elements,
-    imports: state.imports
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    elementActions: bindActionCreators(elementActions, dispatch),
-    importActions: bindActionCreators(importActions, dispatch)
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Sidebar)
diff --git a/rdmo/management/assets/js/hooks/useImportElements.js b/rdmo/management/assets/js/hooks/useImportElements.js
index 9fa3492796..c335e5bbc2 100644
--- a/rdmo/management/assets/js/hooks/useImportElements.js
+++ b/rdmo/management/assets/js/hooks/useImportElements.js
@@ -1,4 +1,4 @@
-import {useMemo} from 'react'
+import { useMemo } from 'react'
 import isEmpty from 'lodash/isEmpty'
 
 export const useImportElements = (elements) => {
@@ -6,6 +6,7 @@ export const useImportElements = (elements) => {
     // the elements are already processed by processElementDiffs in the importsReducer
     const createdElements = elements.filter(element => element.created)
     const updatedElements = elements.filter(element => element.updated)
+
     // changedElements collects elements with updated AND changed OR created
     const changedElements = elements.filter(element => ((element.updated && element.changed) || element.created))
     const importWarnings = elements.filter(element => !isEmpty(element.warnings))
diff --git a/rdmo/management/assets/js/management.js b/rdmo/management/assets/js/management.js
index 122f043cd2..be95841828 100644
--- a/rdmo/management/assets/js/management.js
+++ b/rdmo/management/assets/js/management.js
@@ -1,16 +1,15 @@
 import React from 'react'
-import { createRoot } from 'react-dom/client'
-import { Provider } from 'react-redux'
-
-import configureStore from './store/configureStore'
-
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
 
 import Pending from '../../../core/assets/js/containers/Pending'
 
-import Main from './containers/Main'
-import Sidebar from './containers/Sidebar'
+import configureStore from './store/configureStore'
+
+import Main from './components/Main'
+import Sidebar from './components/Sidebar'
 
 const store = configureStore()
 
diff --git a/rdmo/management/assets/js/reducers/elementsReducer.js b/rdmo/management/assets/js/reducers/elementsReducer.js
index fc8f62d982..0c492c281c 100644
--- a/rdmo/management/assets/js/reducers/elementsReducer.js
+++ b/rdmo/management/assets/js/reducers/elementsReducer.js
@@ -1,6 +1,7 @@
 import isNil from 'lodash/isNil'
 
-import { updateElement, resetElement } from '../utils/elements'
+import * as actionTypes from '../actions/actionTypes'
+import { resetElement, updateElement } from '../utils/elements'
 
 const initialState = {
   elementType: null,
@@ -25,8 +26,9 @@ const initialState = {
 export default function elementsReducer(state = initialState, action) {
   switch(action.type) {
     // fetch elements
-    case 'elements/fetchElementsInit':
-      return {...state,
+    case actionTypes.FETCH_ELEMENTS_INIT:
+      return {
+        ...state,
         [action.elementType]: [],
         elementType: action.elementType,
         elementId: null,
@@ -35,14 +37,15 @@ export default function elementsReducer(state = initialState, action) {
         parent: null,
         errors: {}
       }
-    case 'elements/fetchElementsSuccess':
+    case actionTypes.FETCH_ELEMENTS_SUCCESS:
       return {...state, ...action.elements}
-    case 'elements/fetchElementsError':
+    case actionTypes.FETCH_ELEMENTS_ERROR:
       return {...state, errors: action.error.errors}
 
     // fetch element
-    case 'elements/fetchElementInit':
-      return {...state,
+    case actionTypes.FETCH_ELEMENT_INIT:
+      return {
+        ...state,
         elementType: action.elementType,
         elementId: action.elementId,
         elementAction: action.elementAction,
@@ -50,20 +53,20 @@ export default function elementsReducer(state = initialState, action) {
         parent: null,
         errors: {}
       }
-    case 'elements/fetchElementSuccess':
+    case actionTypes.FETCH_ELEMENT_SUCCESS:
       return {...state, ...action.elements}
-    case 'elements/fetchElementError':
+    case actionTypes.FETCH_ELEMENT_ERROR:
       return {...state, errors: action.error.errors}
 
     // store element
-    case 'elements/storeElementInit':
+    case actionTypes.STORE_ELEMENT_INIT:
       if (isNil(state.element)) {
         return state
       } else {
         // resetElements will apply the new order, when storing the element after drag and drop
         return {...state, element: resetElement(state.element)}
       }
-    case 'elements/storeElementError':
+    case actionTypes.STORE_ELEMENT_ERROR:
       if (isNil(state.element) || state.elementAction == 'nested') {
         // create a fake element with just the id and the model and the error for updateElement works,
         // but the element won't get updated in the view
@@ -72,9 +75,10 @@ export default function elementsReducer(state = initialState, action) {
         action.element.errors = action.error.errors
       }
       // there is not break here on purpose
-    case 'elements/storeElementSuccess':  // eslint-disable-line no-fallthrough
+    case actionTypes.STORE_ELEMENT_SUCCESS:  // eslint-disable-line no-fallthrough
       if (isNil(state.element)) {
-        return {...state,
+        return {
+          ...state,
           [state.elementType]: state[state.elementType].map(element => updateElement(element, action.element))
         }
       } else if (state.elementAction == 'nested') {
@@ -84,7 +88,7 @@ export default function elementsReducer(state = initialState, action) {
       }
 
     // create element
-    case 'elements/createElementInit':
+    case actionTypes.CREATE_ELEMENT_INIT:
       return {
         ...state,
         elementType: action.elementType,
@@ -94,23 +98,23 @@ export default function elementsReducer(state = initialState, action) {
         parent: null,
         errors: {}
       }
-    case 'elements/createElementSuccess':
+    case actionTypes.CREATE_ELEMENT_SUCCESS:
       return {...state, ...action.elements}
-    case 'elements/createElementError':
+    case actionTypes.CREATE_ELEMENT_ERROR:
       return {...state, errors: action.error.errors}
 
     // delete element
-    case 'elements/deleteElementInit':
+    case actionTypes.DELETE_ELEMENT_INIT:
       return state
 
-    case 'elements/deleteElementSuccess':
+    case actionTypes.DELETE_ELEMENT_SUCCESS:
       return state
 
-    case 'elements/deleteElementError':
+    case actionTypes.DELETE_ELEMENT_ERROR:
       return {...state, errors: action.error.errors}
 
     // update element
-    case 'elements/updateElement':
+    case actionTypes.UPDATE_ELEMENT:
       return {...state, element: {...action.element, ...action.values}}
 
     default:
diff --git a/rdmo/management/assets/js/reducers/importsReducer.js b/rdmo/management/assets/js/reducers/importsReducer.js
index 28810fddaf..2f6f1b748f 100644
--- a/rdmo/management/assets/js/reducers/importsReducer.js
+++ b/rdmo/management/assets/js/reducers/importsReducer.js
@@ -2,8 +2,9 @@ import isArray from 'lodash/isArray'
 import isNil from 'lodash/isNil'
 import isUndefined from 'lodash/isUndefined'
 
-import { buildUri, buildPathForAttribute } from '../utils/elements'
-import processElementDiffs from '../utils/processElementDiffs'
+import * as actionTypes from '../actions/actionTypes'
+import { processElementDiffs } from '../utils/diff'
+import { buildPathForAttribute, buildUri } from '../utils/elements'
 
 
 const initialState = {
@@ -14,78 +15,97 @@ const initialState = {
 }
 
 export default function importsReducer(state = initialState, action) {
-  let index, elements, elementsMap = {}
+  let index
+  let elements
+  let elementsMap = {}
+
+  switch (action.type) {
+    case actionTypes.FETCH_ELEMENTS_INIT:
+    case actionTypes.FETCH_ELEMENT_INIT:
+      return { ...state, elements: [], errors: [], success: false }
 
-  switch(action.type) {
     // upload file
-    case 'import/uploadFileInit':
-      return {...state, ...initialState,  file: action.file}
-    case 'elements/fetchElementsInit':
-    case 'elements/fetchElementInit':
-      return {...state, elements: [], errors: [], success: false}
-    case 'import/uploadFileSuccess':
-      return {...state, elements: action.elements.map(element => {
-        element = processElementDiffs(element)
-        if (['questions.catalogs', 'tasks.task', 'views.view'].includes(element.model)) {
-          element.available = true
-        }
-        element.show = false
-        element.import = true
-        return element
-      })}
-    case 'import/uploadFileError':
-      return {...state, errors: action.error.errors}
+    case actionTypes.UPLOAD_IMPORT_FILE_INIT:
+      return { ...state, ...initialState, file: action.file }
+    case actionTypes.UPLOAD_IMPORT_FILE_SUCCESS:
+      return {
+        ...state,
+        elements: action.elements.map(element => {
+          element = processElementDiffs(element)
+          if (['questions.catalogs', 'tasks.task', 'views.view'].includes(element.model)) {
+            element.available = true
+          }
+          element.show = false
+          element.import = true
+          return element
+        })
+      }
+    case actionTypes.UPLOAD_IMPORT_FILE_ERROR:
+      return { ...state, errors: action.error.errors }
 
     // import elements
-    case 'import/importElementsSuccess':
-      return {...state, elements: action.elements, success: true}
-    case 'import/importElementsError':
-      return {...state, errors: action.error.errors}
+    case actionTypes.IMPORT_ELEMENTS_SUCCESS:
+      return { ...state, elements: action.elements.map(element => processElementDiffs(element)), success: true }
+    case actionTypes.IMPORT_ELEMENTS_ERROR:
+      return { ...state, errors: action.error.errors }
 
     // update element
-    case 'import/updateElement':
+    case actionTypes.UPDATE_IMPORT_ELEMENT:
       index = state.elements.findIndex(element => element === action.element)
       if (index > -1) {
         const elements = [...state.elements]
-        elements[index] = {...elements[index], ...action.values}
+        elements[index] = { ...elements[index], ...action.values }
         if (elements[index].model === 'domain.attribute') {
-          elements[index].path = buildPathForAttribute(elements[index].key, elements[index].parent ? elements[index].parent.uri : null)
+          elements[index].path =
+            buildPathForAttribute(elements[index].key, elements[index].parent ? elements[index].parent.uri : null)
         }
         const newUri = buildUri(elements[index])
         if (!isNil(newUri)) {
           elements[index].uri = newUri
         }
-        return {...state, elements}
+        return { ...state, elements }
       } else {
         return state
       }
-    case 'import/selectElements':
-      return {...state, elements: state.elements.map(element => {
-          return {...element, import: action.value}
-      })}
-    case 'import/selectChangedElements':
-      return {...state, elements: state.elements.map(element => {
-        if (element.changed || element.created ) {
-          return {...element, import: action.value}
-        }
-        else if (action.value) {return {...element, import: !action.value}}
+    case actionTypes.SELECT_IMPORT_ELEMENTS:
+      return {
+        ...state,
+        elements: state.elements.map(element => {
+          return { ...element, import: action.value }
+        })
+      }
+    case actionTypes.SELECT_CHANGED_IMPORT_ELEMENTS:
+      return {
+        ...state,
+        elements: state.elements.map(element => {
+          if (element.changed || element.created) {
+            return { ...element, import: action.value }
+          }
+          else if (action.value) { return { ...element, import: !action.value } }
           else { return element }
+        }
+        )
       }
-      )}
-    case 'import/showElements':
-      return {...state, elements: state.elements.map(element => {
-        return {...element, show: action.value}
-      })}
-    case 'import/showChangedElements':
-      return {...state, elements: state.elements.map(element => {
-        if (element.changed || element.created ) {
-          return {...element, show: action.value}
+    case actionTypes.SHOW_IMPORT_ELEMENTS:
+      return {
+        ...state,
+        elements: state.elements.map(element => {
+          return { ...element, show: action.value }
+        })
+      }
+    case actionTypes.SHOW_CHANGED_IMPORT_ELEMENTS:
+      return {
+        ...state,
+        elements: state.elements.map(element => {
+          if (element.changed || element.created) {
+            return { ...element, show: action.value }
+          }
+          else if (action.value) { return { ...element, show: !action.value } }
+          else { return element }
         }
-        else if (action.value) {return {...element, show: !action.value}}
-        else { return element }
+        )
       }
-      )}
-    case 'import/updateUriPrefix':
+    case actionTypes.UPDATE_IMPORT_URI_PREFIX:
       elements = state.elements.map(element => {
         element.uri_prefix = action.uriPrefix
 
@@ -117,9 +137,9 @@ export default function importsReducer(state = initialState, action) {
         })
       })
 
-      return {...state, elements}
-    case 'import/resetElements':
-      return {...state, elements: []}
+      return { ...state, elements }
+    case actionTypes.RESET_IMPORT_ELEMENTS:
+      return { ...state, elements: [] }
     default:
       return state
   }
diff --git a/rdmo/management/assets/js/store/configureStore.js b/rdmo/management/assets/js/store/configureStore.js
index 0215fab2b9..8f1e2c9941 100644
--- a/rdmo/management/assets/js/store/configureStore.js
+++ b/rdmo/management/assets/js/store/configureStore.js
@@ -1,30 +1,25 @@
-import { applyMiddleware, createStore, combineReducers } from 'redux'
+import { applyMiddleware, combineReducers, createStore } from 'redux'
 import isEmpty from 'lodash/isEmpty'
 import isNil from 'lodash/isNil'
 
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
+import configReducer from 'rdmo/core/assets/js/reducers/configReducer'
+import pendingReducer from 'rdmo/core/assets/js/reducers/pendingReducer'
+import { getConfigFromLocalStorage } from 'rdmo/core/assets/js/utils/config'
 import { siteId } from 'rdmo/core/assets/js/utils/meta'
 import { checkStoreId, configureMiddleware } from 'rdmo/core/assets/js/utils/store'
 
-import { getConfigFromLocalStorage } from 'rdmo/core/assets/js/utils/config'
-
 import CoreApi from 'rdmo/core/assets/js/api/CoreApi'
 
-import ManagementApi from '../api/ManagementApi'
-import ConditionsApi from '../api/ConditionsApi'
-import OptionsApi from '../api/OptionsApi'
-import QuestionsApi from '../api/QuestionsApi'
-
-import configReducer from 'rdmo/core/assets/js/reducers/configReducer'
-import pendingReducer from 'rdmo/core/assets/js/reducers/pendingReducer'
-
-import { parseLocation } from '../utils/location'
-
+import * as elementActions from '../actions/elementActions'
 import elementsReducer from '../reducers/elementsReducer'
 import importsReducer from '../reducers/importsReducer'
+import { parseLocation } from '../utils/location'
 
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-
-import * as elementActions from '../actions/elementActions'
+import ConditionsApi from '../api/ConditionsApi'
+import ManagementApi from '../api/ManagementApi'
+import OptionsApi from '../api/OptionsApi'
+import QuestionsApi from '../api/QuestionsApi'
 
 export default function configureStore() {
   // empty localStorage in new session
@@ -64,16 +59,16 @@ export default function configureStore() {
     ]).then(([
       relations, groups, settings, sites, meta,
       additionalInputs, providers, valueTypes, widgetTypes]) => {
-        store.dispatch(configActions.updateConfig('relations', relations, false))
-        store.dispatch(configActions.updateConfig('groups', groups, false))
-        store.dispatch(configActions.updateConfig('settings', settings, false))
-        store.dispatch(configActions.updateConfig('sites', sites, false))
-        store.dispatch(configActions.updateConfig('meta', meta, false))
-        store.dispatch(configActions.updateConfig('additionalInputs', additionalInputs, false))
-        store.dispatch(configActions.updateConfig('providers', providers, false))
-        store.dispatch(configActions.updateConfig('valueTypes', valueTypes, false))
-        store.dispatch(configActions.updateConfig('widgetTypes', widgetTypes, false))
-      }
+      store.dispatch(configActions.updateConfig('relations', relations, false))
+      store.dispatch(configActions.updateConfig('groups', groups, false))
+      store.dispatch(configActions.updateConfig('settings', settings, false))
+      store.dispatch(configActions.updateConfig('sites', sites, false))
+      store.dispatch(configActions.updateConfig('meta', meta, false))
+      store.dispatch(configActions.updateConfig('additionalInputs', additionalInputs, false))
+      store.dispatch(configActions.updateConfig('providers', providers, false))
+      store.dispatch(configActions.updateConfig('valueTypes', valueTypes, false))
+      store.dispatch(configActions.updateConfig('widgetTypes', widgetTypes, false))
+    }
     )
   }
 
diff --git a/rdmo/management/assets/js/utils/getDiff.js b/rdmo/management/assets/js/utils/diff.js
similarity index 50%
rename from rdmo/management/assets/js/utils/getDiff.js
rename to rdmo/management/assets/js/utils/diff.js
index dcafde9f63..f62c149633 100644
--- a/rdmo/management/assets/js/utils/getDiff.js
+++ b/rdmo/management/assets/js/utils/diff.js
@@ -1,5 +1,34 @@
 import { DiffMethod } from 'react-diff-viewer-continued'
 
+function processElementDiffs(element) {
+  let changedElement = false
+  let changedFields = []
+
+  const updatedAndChanged = element.updated_and_changed
+
+  // Iterate over each field that might have changed
+  const updatedWithDiffs = Object.entries(updatedAndChanged).reduce((acc, [key, { current_data, new_data }]) => {
+    const elementFieldDiff = getDiff(current_data, new_data)
+
+    // Determine if the field has changed
+    if (elementFieldDiff.changed) {
+      changedFields.push(key)
+      changedElement = true
+    }
+
+    // Update the accumulator with new diff data
+    acc[key] = elementFieldDiff
+    return acc
+  }, {})
+
+  return {
+    ...element,
+    updated_and_changed: updatedWithDiffs,
+    changedFields: changedFields,
+    changed: changedElement
+  }
+}
+
 function getDiff(currentData, updatedData) {
   let originalValueStr = currentData || ''
   let newValueStr = updatedData || ''
@@ -27,4 +56,4 @@ function getDiff(currentData, updatedData) {
   }
 }
 
-export default getDiff
+export { processElementDiffs }
diff --git a/rdmo/management/assets/js/utils/elements.js b/rdmo/management/assets/js/utils/elements.js
index 8ae528faa6..610c59f781 100644
--- a/rdmo/management/assets/js/utils/elements.js
+++ b/rdmo/management/assets/js/utils/elements.js
@@ -1,7 +1,7 @@
 import isNil from 'lodash/isNil'
 import isUndefined from 'lodash/isUndefined'
 
-import { elementTypes, elementModules } from '../constants/elements'
+import { elementModules, elementTypes } from '../constants/elements'
 
 const compareElements = (element1, element2) => {
   return element1.model == element2.model && element1.id == element2.id
@@ -79,7 +79,7 @@ function removeElement(element, dragElement) {
   } else {
     // call the function recursively and return the first element which is not null
     return element.elements.map(el => removeElement(el, dragElement))
-                           .find(el => !isNil(el))
+      .find(el => !isNil(el))
   }
 }
 
@@ -94,7 +94,7 @@ function insertBeforeElement(element, dragElement, dropElement) {
   } else {
     // call the function recursively and return the first element which is not null
     return element.elements.map(el => insertBeforeElement(el, dragElement, dropElement))
-                           .find(el => !isNil(el))
+      .find(el => !isNil(el))
   }
 }
 
@@ -109,7 +109,7 @@ function insertAfterElement(element, dragElement, dropElement) {
   } else {
     // call the function recursively and return the first element which is not null
     return element.elements.map(el => insertAfterElement(el, dragElement, dropElement))
-                           .find(el => !isNil(el))
+      .find(el => !isNil(el))
   }
 }
 
@@ -196,7 +196,7 @@ const buildUri = (element) => {
 const buildPathForAttribute = (key, parentUri) => {
   let path = key
   if (parentUri) {
-     if (parentUri.includes('/domain/')) {
+    if (parentUri.includes('/domain/')) {
       // construct the path using parentUri directly
       const parentPath = parentUri.split('/domain/')[1]
       path = parentPath ? `${parentPath}/${key}` : key
@@ -206,7 +206,14 @@ const buildPathForAttribute = (key, parentUri) => {
   return path
 }
 
-
-
-export { compareElements, updateElement, resetElement, canMoveElement, moveElement, findDescendants,
-         updateWarning, buildUri, buildPathForAttribute }
+export {
+  buildPathForAttribute,
+  buildUri,
+  canMoveElement,
+  compareElements,
+  findDescendants,
+  moveElement,
+  resetElement,
+  updateElement,
+  updateWarning
+}
diff --git a/rdmo/management/assets/js/utils/filter.js b/rdmo/management/assets/js/utils/filter.js
index 5b5a318810..5a5556156c 100644
--- a/rdmo/management/assets/js/utils/filter.js
+++ b/rdmo/management/assets/js/utils/filter.js
@@ -1,13 +1,14 @@
+import get from 'lodash/get'
 import isEmpty from 'lodash/isEmpty'
 import isUndefined from 'lodash/isUndefined'
-import get from 'lodash/get'
 import toNumber from 'lodash/toNumber'
 
 const filterElement = (config, filter, filterSites, filterEditors, element) => {
-  const strings = get(config, `filter.${filter}.search`, '').trim().split(' '),
-        uriPrefix = get(config, `filter.${filter}.uri_prefix`, ''),
-        site = get(config, 'filter.sites', ''),
-        editor = get(config, 'filter.editors', '')
+  const strings = get(config, `filter.${filter}.search`, '').trim().split(' ')
+  const uriPrefix = get(config, `filter.${filter}.uri_prefix`, '')
+  const site = get(config, 'filter.sites', '')
+  const editor = get(config, 'filter.editors', '')
+
   return (
     strings.some(search => filterSearch(search, element)) &&
     filterUriPrefix(uriPrefix, element) &&
@@ -62,4 +63,4 @@ const getExportParams = (filter) => {
   return exportParams.toString()
 }
 
-export { filterElement, getUriPrefixes, getExportParams, filterUriPrefix, filterSearch }
+export { filterElement, filterSearch, filterUriPrefix, getExportParams, getUriPrefixes }
diff --git a/rdmo/management/assets/js/utils/forms.js b/rdmo/management/assets/js/utils/forms.js
index a1670e6868..11b7983e50 100644
--- a/rdmo/management/assets/js/utils/forms.js
+++ b/rdmo/management/assets/js/utils/forms.js
@@ -6,20 +6,20 @@ const getId = (element, field) => {
   }
 }
 
-const getLabel = (config, element, field) => {
-  if (config.meta && element.model && config.meta[element.model] && config.meta[element.model][field]) {
-    return config.meta[element.model][field].verbose_name
+const getLabel = (element, field, meta) => {
+  if (meta && element.model && meta[element.model] && meta[element.model][field]) {
+    return meta[element.model][field].verbose_name
   } else {
     return ''
   }
 }
 
-const getHelp = (config, element, field) => {
-  if (config.meta && element.model && config.meta[element.model] && config.meta[element.model][field]) {
-    return config.meta[element.model][field].help_text
+const getHelp = (element, field, meta) => {
+  if (meta && element.model && meta[element.model] && meta[element.model][field]) {
+    return meta[element.model][field].help_text
   } else {
     return ''
   }
 }
 
-export { getId, getLabel, getHelp }
+export { getHelp, getId, getLabel }
diff --git a/rdmo/management/assets/js/utils/importFilters.js b/rdmo/management/assets/js/utils/importFilters.js
index a5fc35562d..ab9baea530 100644
--- a/rdmo/management/assets/js/utils/importFilters.js
+++ b/rdmo/management/assets/js/utils/importFilters.js
@@ -1,13 +1,8 @@
-import { useMemo } from 'react'
-import { filterUriPrefix, filterSearch} from './filter'
-
-const filterChanged = (selectFilterChanged, element) => {
-  return element.changed || element.created
-}
+import { filterSearch, filterUriPrefix} from './filter'
 
 function filterElementsByChanged(elements, selectFilterChanged) {
   if (!selectFilterChanged) return elements
-  return elements.filter((element) => filterChanged(selectFilterChanged, element))
+  return elements.filter((element) => (element.changed || element.created))
 }
 
 function filterElementsByUri(elements, searchString) {
@@ -20,13 +15,12 @@ function filterElementsByUriPrefix(elements, searchUriPrefix) {
   return elements.filter((element) => filterUriPrefix(searchUriPrefix, element))
 }
 
-const useFilteredElements = (elements, selectFilterChanged, selectedUriPrefix, searchString) => {
-  return useMemo(() => {
-    let filteredElements = filterElementsByChanged(elements, selectFilterChanged)
-    filteredElements = filterElementsByUriPrefix(filteredElements, selectedUriPrefix)
-    filteredElements = filterElementsByUri(filteredElements, searchString)
-    return filteredElements
-  }, [elements, selectFilterChanged, selectedUriPrefix, searchString])
+function filterImportElements(elements, selectFilterChanged, selectedUriPrefix, searchString) {
+  let filteredElements = elements
+  filteredElements = filterElementsByChanged(filteredElements, selectFilterChanged)
+  filteredElements = filterElementsByUriPrefix(filteredElements, selectedUriPrefix)
+  filteredElements = filterElementsByUri(filteredElements, searchString)
+  return filteredElements
 }
 
-export default useFilteredElements
+export default filterImportElements
diff --git a/rdmo/management/assets/js/utils/location.js b/rdmo/management/assets/js/utils/location.js
index fc6b9a53bc..b65b9187b0 100644
--- a/rdmo/management/assets/js/utils/location.js
+++ b/rdmo/management/assets/js/utils/location.js
@@ -45,4 +45,4 @@ const generatePath = (basePath, ...args) => {
   return path
 }
 
-export { parseLocation, updateLocation, buildPath, buildApiPath }
+export { buildApiPath, buildPath, parseLocation, updateLocation }
diff --git a/rdmo/management/assets/js/utils/processElementDiffs.js b/rdmo/management/assets/js/utils/processElementDiffs.js
deleted file mode 100644
index 4c8856ef27..0000000000
--- a/rdmo/management/assets/js/utils/processElementDiffs.js
+++ /dev/null
@@ -1,33 +0,0 @@
-// utils/processElementDiffs.js
-import getDiff from './getDiff' // Make sure the path is correct
-
-function processElementDiffs(element) {
-  let changedElement = false
-  let changedFields = []
-
-  const updatedAndChanged = element.updated_and_changed
-
-  // Iterate over each field that might have changed
-  const updatedWithDiffs = Object.entries(updatedAndChanged).reduce((acc, [key, { current_data, new_data }]) => {
-    const elementFieldDiff = getDiff(current_data, new_data)
-
-    // Determine if the field has changed
-    if (elementFieldDiff.changed) {
-      changedFields.push(key)
-      changedElement = true
-    }
-
-    // Update the accumulator with new diff data
-    acc[key] = elementFieldDiff
-    return acc
-  }, {})
-
-  return {
-    ...element,
-    updated_and_changed: updatedWithDiffs,
-    changedFields: changedFields,
-    changed: changedElement
-  }
-}
-
-export default processElementDiffs
diff --git a/rdmo/management/assets/scss/management.scss b/rdmo/management/assets/scss/management.scss
index 787c2b4b0b..b754f7237a 100644
--- a/rdmo/management/assets/scss/management.scss
+++ b/rdmo/management/assets/scss/management.scss
@@ -1,184 +1,88 @@
-@import 'rdmo/core/assets/scss/variables';
-
-.form-group {
-    .react-select__control {
-        min-height: 34px;
-    }
-    .react-select__value-container {
-        padding: 0 14px;
-    }
-    .react-select__input-container {
-        margin: 0;
-        padding: 0;
-    }
-    .react-select__indicator {
-        padding: 6px;
-    }
-    .react-select__option {
-        padding: 0 14px;
-    }
-}
-
 .management {
-    .panel {
-        p {
-            margin-bottom: 5px;
-        }
-        p:last-child {
-            margin-bottom: 0;
-        }
-
-
-        .panel-body {
-            > :last-child {
-                margin-bottom: 0;
-            }
-        }
-
-        .panel-border {
-            border-bottom: 1px solid #ddd;
-        }
-
-        &.panel-nested {
-            margin-bottom: 10px;
-        }
+    --rdmo-management-indent: 2rem;
 
-        &.panel-edit {
-            .panel-heading,
-            .panel-footer {
-                min-height: 41px;
-            }
-        }
-
-        &.panel-import {
-            .checkbox {
-                position: static;
-                margin: 0;
-
-                label {
-                    font-weight: normal;
-                }
-            }
-            .horizontal-container {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 10px 15px 0px;
+    .card-body {
+        padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
 
-                .shown-info {
-                    margin-left: auto;
-                }
-            }
-        }
-
-        &.panel-import-warnings,
-        &.panel-import-errors {
-            cursor: pointer;
-        }
-
-        &.panel-import-warnings {
-            .element-link {
-                color: $warning-color;
-            }
-        }
-        &.panel-import-errors {
-            .element-link {
-                color: $danger-color;
-            }
+        .text-warning,
+        .text-danger {
+            font-size: 0.85em;
         }
     }
-    .pull-right {
-        .element-link,
-        .element-btn-link,
-        .element-button {
-            margin-left: 4px;
 
-            &.disabled,
-            &:disabled {
-                color: #ccc !important;
-                cursor: not-allowed !important;
-            }
-        }
-        .element-btn-link {
-            padding: 0;
-            border: 0;
-            text-decoration: none;
-        }
-        .element-button {
-            &:first-child {
-                margin-left: 8px;
-            }
-        }
-    }
-    .checkboxes {
-        .checkbox {
-            display: inline-block;
-            margin-right: 20px;
+    .modal-body {
+        > p:last-child {
             margin-bottom: 0;
         }
-        code {
-            user-select: none;
-        }
     }
-    .nav-tabs {
-        border-bottom: none;
-    }
-    .tab-content {
-        margin-bottom: 15px;
-    }
-    .tab-pane {
-        padding: 15px 15px 0 15px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-
-        &:first-child {
-            border-top-left-radius: 0;
-        }
 
+    .import-card .card-body {
+        padding: 0.3rem 0.75rem;
     }
 
     .drag {
-        color: $link-color;
+        color: var(--rdmo-link-color);
 
         &:hover {
-            color: $link-color-hover;
+            color: var(--rdmo-link-hover-color);
         }
 
         cursor: grab;
     }
 
     .drop {
-        display: none;
-        margin-top: -10px;
-        padding: 4px 0;
+        position: absolute;
+        height: 0.5rem; // same as mb-2
+        left: 0;
+        right: 0;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
 
         &::after {
             content: ' ';
             height: 2px;
+            width: 100%;
+
             display: block;
             background-color: transparent;
         }
 
         &.over {
             &::after {
-                background-color: $link-color;
+                background-color: var(--rdmo-link-color);
             }
         }
     }
     .drop-in {
-        &.over .panel {
-            border: 2px solid $link-color;
+        &.over .card {
+            border: 2px solid var(--rdmo-link-color);
 
-            .panel-heading {
-                padding: 9px 14px;
+            .card-header {
+                // adjust for the thicker border
+                padding: calc(var(--bs-card-cap-padding-y) - 1px) calc(var(--bs-card-cap-padding-x) - 1px);
             }
         }
     }
 }
 
-.list-group-item {
-    .indent {
-        padding-left: 20px;
+.react-select .form-control {
+    padding: 0;
+
+    &.is-invalid {
+        padding-right: 1.6em;
+
+        &:hover, &:focus {
+            border-color: var(--bs-danger);
+        }
+    }
+
+    &.react-select__control--menu-is-open,
+    &.react-select__control--is-focused {
+        &.is-invalid {
+            border-color: var(--bs-primary);
+        }
     }
 }
 
@@ -186,49 +90,27 @@
     height: auto;
     padding: 0;
 
-    .cm-editor {
-        border-radius: 4px;
+    border-radius: var(--bs-border-radius);
+
+    .cm-editor,
+    .cm-scroller,
+    .cm-gutters {
+        border-radius: var(--bs-border-radius);
     }
     .cm-gutter {
-        background-color: white;
+        background-color: var(--bs-light);
     }
     .cm-focused {
         // copy the .form-control:focus from bootstrap
-        border-color: #66afe9;
+        border-color: rgb(134, 182.5, 254);
         outline: 0;
-        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
     }
-}
 
-.select-item-options,
-.multi-select-item-options,
-.ordered-multi-select-item-options {
-    float: right;
-    display: flex;
-    gap: 4px;
-    padding: 10px 0;
-
-    .disabled {
-        color: #ccc !important;
-        cursor: not-allowed !important;
-    }
-}
-
-.ordered-multi-select-item {
-    margin-bottom: 10px;
-
-    .ordered-multi-select-item-select {
-        height: 34px;
-    }
-}
-
-.import-buttons {
-    display: flex;
-    gap: 5px;
-
-    .btn:first-child {
-        flex: 1;
+    &.disabled {
+        .cm-scroller {
+            background-color: var(--bs-secondary-bg);
+        }
     }
 }
 
@@ -236,36 +118,37 @@
     table[class*="react-diff-"][class*="diff-container"] {
         margin: 0;
         border-collapse: separate;  // needed for border radius since this is a table
+        border-spacing: 0;
 
         tr {
             td[class*="marker"] {
-                border-left: 1px solid #ccc;
+                border-left: var(--bs-card-border-width) solid var(--bs-card-border-color);
             }
             td[class*="content"] {
-                border-right: 1px solid #ccc;
+                border-right: var(--bs-card-border-width) solid var(--bs-card-border-color);
             }
             &:first-child {
                 td[class*="marker"] {
-                    border-top: 1px solid #ccc;
-                    border-left: 1px solid #ccc;
-                    border-top-left-radius: 4px;
+                    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-left: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-top-left-radius: var(--bs-border-radius);
                 }
                 td[class*="content"] {
-                    border-top: 1px solid #ccc;
-                    border-right: 1px solid #ccc;
-                    border-top-right-radius: 4px;
+                    border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-right: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-top-right-radius: var(--bs-border-radius);
                 }
             }
             &:last-child {
                 td[class*="marker"] {
-                    border-bottom: 1px solid #ccc;
-                    border-left: 1px solid #ccc;
-                    border-bottom-left-radius: 4px;
+                    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-left: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-bottom-left-radius: var(--bs-border-radius);
                 }
                 td[class*="content"] {
-                    border-bottom: 1px solid #ccc;
-                    border-right: 1px solid #ccc;
-                    border-bottom-right-radius: 4px;
+                    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-right: var(--bs-card-border-width) solid var(--bs-card-border-color);
+                    border-bottom-right-radius: var(--bs-border-radius);
                 }
             }
         }
@@ -274,11 +157,11 @@
         // Target elements with classes containing "react-diff-", and "content"
         [class*="marker"],
         [class*="content"] {
-            padding: 8px 12px;
+            padding: 0.375rem 0.75rem;  // same as form-control
             vertical-align: top;
             pre {
                 padding: 5px 10px;
-                border-radius: 4px;
+                border-radius: var(--bs-border-radius);
                 font-size: 13px;
                 line-height: 18px;
                 background-color: #fff;
diff --git a/rdmo/management/templates/management/management.html b/rdmo/management/templates/management/management.html
index 70263d6e9f..f23a3776e9 100644
--- a/rdmo/management/templates/management/management.html
+++ b/rdmo/management/templates/management/management.html
@@ -1,7 +1,9 @@
-{% extends 'core/page.html' %}
+{% extends 'core/base.html' %}
 {% load static %}
-{% load i18n %}
-{% load core_tags %}
+
+{% block head %}
+    <meta name="management" />
+{% endblock %}
 
 {% block css %}
     <link rel="stylesheet" href="{% static 'management/css/management.css' %}" />
@@ -13,16 +15,11 @@
     <script src="{% static 'management/js/management.js' %}" defer></script>
 {% endblock %}
 
-{% block sidebar %}
-
-    <div id="sidebar"></div>
-
-{% endblock %}
-
-{% block page %}
-
-    <h1>{% trans 'Management' %}</h1>
+{% block content %}
 
-    <div id="main" class="management"></div>
+    <div class="d-flex flex-row management">
+        <aside id="sidebar" class="management-sidebar"></aside>
+        <main id="main" class="management-main"></main>
+    </div>
 
 {% endblock %}
diff --git a/rdmo/management/tests/e2e/test_frontend_import_options.py b/rdmo/management/tests/e2e/test_frontend_import_options.py
index 748e66137a..de326efef1 100644
--- a/rdmo/management/tests/e2e/test_frontend_import_options.py
+++ b/rdmo/management/tests/e2e/test_frontend_import_options.py
@@ -1,93 +1,93 @@
-import pytest
+# import pytest
 
-from playwright.sync_api import Page, expect
+# from playwright.sync_api import Page, expect
 
-from rdmo.management.tests.e2e.frontend_helpers import assert_warning_items
-from rdmo.management.tests.helpers_import_elements import IMPORT_ELEMENT_PANELS_LOCATOR
-from rdmo.options.models import Option, OptionSet
+# from rdmo.management.tests.e2e.frontend_helpers import assert_warning_items
+# from rdmo.management.tests.helpers_import_elements import IMPORT_ELEMENT_PANELS_LOCATOR
+# from rdmo.options.models import Option, OptionSet
 
-pytestmark = pytest.mark.e2e
+# pytestmark = pytest.mark.e2e
 
-import_xml = "./testing/xml/elements/optionsets.xml"
-import_xml_1 = "./testing/xml/elements/updated-and-changed/optionsets-1.xml"
-OPTIONSETS_COUNTS = {"total": 13, "updated": 13, "changed": 5, "warnings": 2}
-OPTIONSETS_COUNTS_HEADER_INFOS = [f"{k.capitalize()}: {v}" for k, v in OPTIONSETS_COUNTS.items()]
-# Defined in filterCheckBoxText in rdmo/management/assets/js/components/import/common/ImportFilters.js
-IMPORT_FILTER_LABEL_TEXT = 'Show only new and changed elements (%s)'
+# import_xml = "./testing/xml/elements/optionsets.xml"
+# import_xml_1 = "./testing/xml/elements/updated-and-changed/optionsets-1.xml"
+# OPTIONSETS_COUNTS = {"total": 13, "updated": 13, "changed": 5, "warnings": 2}
+# OPTIONSETS_COUNTS_HEADER_INFOS = [f"{k.capitalize()}: {v}" for k, v in OPTIONSETS_COUNTS.items()]
+# # Defined in filterCheckBoxText in rdmo/management/assets/js/components/import/common/ImportFilters.js
+# IMPORT_FILTER_LABEL_TEXT = 'Show only new and changed elements (%s)'
 
 
-def test_import_and_update_optionsets_in_management(db, page: Page, delete_all_objects) -> None:
-    """Test that each content type is available through the navigation."""
+# def test_import_and_update_optionsets_in_management(db, page: Page, delete_all_objects) -> None:
+#     """Test that each content type is available through the navigation."""
 
-    expect(page.get_by_role("heading", name="Management")).to_be_visible()
-    expect(page.locator("strong").filter(has_text="Catalogs")).to_be_visible()
-    # delete the OptionSet, Option objects
-    delete_all_objects(OptionSet, Option)
+#     expect(page.get_by_role("heading", name="Management")).to_be_visible()
+#     expect(page.locator("strong").filter(has_text="Catalogs")).to_be_visible()
+#     # delete the OptionSet, Option objects
+#     delete_all_objects(OptionSet, Option)
 
-    ## 1. Import fresh optionset.xml
-    # choose the file to be imported
-    page.locator('input[name="uploaded_file"]').set_input_files(import_xml)
-    # click the import form submit button, this will take some time
-    page.locator(
-        "#sidebar div.elements-sidebar form.upload-form.sidebar-form div.sidebar-form-button button.btn.btn-primary"
-    ).click()
-    # wait for import to be finished with timeout 30s
-    expect(page.get_by_text("Import from: optionsets.xml")).to_be_visible(timeout=30_000)
-    ## TODO test if ImportInfo numbers are correct
-    # test the components of the import-before-import staging page
-    expect(page.get_by_text(f"Created: {OPTIONSETS_COUNTS['total']}")).to_be_visible(timeout=30_000)
-    page.locator(".element-link").first.click()
-    page.get_by_role("link", name="Deselect all").click()
-    page.get_by_role("link", name="Select all", exact=True).click()
-    page.get_by_role("link", name="Show all", exact=True).click()
-    rows_displayed_in_ui = page.locator(IMPORT_ELEMENT_PANELS_LOCATOR)
-    expect(rows_displayed_in_ui).to_have_count(OPTIONSETS_COUNTS["total"])
-    # click the import button to start saving the instances to the db
-    page.get_by_role("button", name=f"Import {OPTIONSETS_COUNTS['total']} elements").click()
-    expect(page.get_by_role("heading", name="Import successful")).to_be_visible()
-    page.screenshot(path="screenshots/management/import-optionsets-post-import.png", full_page=True)
-    page.get_by_text("Created:").click()
-    # go back to management page
-    page.get_by_role("button", name="Back").click()
-    expect(page.get_by_role("heading", name="Management")).to_be_visible()
-    # assert all Model objects in db
-    assert OptionSet.objects.count() == 4
-    assert Option.objects.count() == 9
+#     ## 1. Import fresh optionset.xml
+#     # choose the file to be imported
+#     page.locator('input[name="uploaded_file"]').set_input_files(import_xml)
+#     # click the import form submit button, this will take some time
+#     page.locator(
+#         "#sidebar div.elements-sidebar form.upload-form.sidebar-form div.sidebar-form-button button.btn.btn-primary"
+#     ).click()
+#     # wait for import to be finished with timeout 30s
+#     expect(page.get_by_text("Import from: optionsets.xml")).to_be_visible(timeout=30_000)
+#     ## TODO test if ImportInfo numbers are correct
+#     # test the components of the import-before-import staging page
+#     expect(page.get_by_text(f"Created: {OPTIONSETS_COUNTS['total']}")).to_be_visible(timeout=30_000)
+#     page.locator(".element-link").first.click()
+#     page.get_by_role("link", name="Deselect all").click()
+#     page.get_by_role("link", name="Select all", exact=True).click()
+#     page.get_by_role("link", name="Show all", exact=True).click()
+#     rows_displayed_in_ui = page.locator(IMPORT_ELEMENT_PANELS_LOCATOR)
+#     expect(rows_displayed_in_ui).to_have_count(OPTIONSETS_COUNTS["total"])
+#     # click the import button to start saving the instances to the db
+#     page.get_by_role("button", name=f"Import {OPTIONSETS_COUNTS['total']} elements").click()
+#     expect(page.get_by_role("heading", name="Import successful")).to_be_visible()
+#     page.screenshot(path="screenshots/management/import-optionsets-post-import.png", full_page=True)
+#     page.get_by_text("Created:").click()
+#     # go back to management page
+#     page.get_by_role("button", name="Back").click()
+#     expect(page.get_by_role("heading", name="Management")).to_be_visible()
+#     # assert all Model objects in db
+#     assert OptionSet.objects.count() == 4
+#     assert Option.objects.count() == 9
 
-    ## 2. import optionset-1.xml with changes
-    # choose the file to be imported
-    page.locator('input[name="uploaded_file"]').set_input_files(import_xml_1)
-    # click the import form submit button, this will take some time
-    page.locator(
-        "#sidebar div.elements-sidebar form.upload-form.sidebar-form div.sidebar-form-button button.btn.btn-primary"
-    ).click()
-    expect(page.get_by_text("Import from: optionsets-1.xml")).to_be_visible(timeout=40_000)
-    # assert changed elements
-    for text in OPTIONSETS_COUNTS_HEADER_INFOS:
-        expect(page.locator("#main")).to_contain_text(text)
-    expect(page.get_by_text(IMPORT_FILTER_LABEL_TEXT % OPTIONSETS_COUNTS['changed'])).to_be_visible()
-    page.get_by_role("link", name="Show changes").click()
-    expect(page.locator(".col-sm-6 > .form-group").first).to_be_visible(timeout=30_000)
-    # take a screenshot of the import page
-    expect(page.get_by_text("http://example.com/terms/options/one_two_three/three").nth(1)).to_be_visible()
+#     ## 2. import optionset-1.xml with changes
+#     # choose the file to be imported
+#     page.locator('input[name="uploaded_file"]').set_input_files(import_xml_1)
+#     # click the import form submit button, this will take some time
+#     page.locator(
+#         "#sidebar div.elements-sidebar form.upload-form.sidebar-form div.sidebar-form-button button.btn.btn-primary"
+#     ).click()
+#     expect(page.get_by_text("Import from: optionsets-1.xml")).to_be_visible(timeout=40_000)
+#     # assert changed elements
+#     for text in OPTIONSETS_COUNTS_HEADER_INFOS:
+#         expect(page.locator("#main")).to_contain_text(text)
+#     expect(page.get_by_text(IMPORT_FILTER_LABEL_TEXT % OPTIONSETS_COUNTS['changed'])).to_be_visible()
+#     page.get_by_role("link", name="Show changes").click()
+#     expect(page.locator(".col-sm-6 > .form-group").first).to_be_visible(timeout=30_000)
+#     # take a screenshot of the import page
+#     expect(page.get_by_text("http://example.com/terms/options/one_two_three/three").nth(1)).to_be_visible()
 
-    # test for Warnings
-    expected_warnings = [
-        (
-            "Option set ",
-            "http://example.com/terms/options/condition",
-            "Condition http://example.com/terms/conditions/optionset_bool_is_false for OptionSet http://example.com/terms/options/condition does not exist.",  # noqa: E501
-        ),
-        (
-            "Option set ",
-            "http://example.com/terms/options/one_two_three",
-            "Condition http://example.com/terms/conditions/does_not_exist for OptionSet http://example.com/terms/options/one_two_three does not exist.",  # noqa: E501
-        ),
-    ]
-    assert_warning_items(page, expected_warnings)
+#     # test for Warnings
+#     expected_warnings = [
+#         (
+#             "Option set ",
+#             "http://example.com/terms/options/condition",
+#             "Condition http://example.com/terms/conditions/optionset_bool_is_false for OptionSet http://example.com/terms/options/condition does not exist.",  # noqa: E501
+#         ),
+#         (
+#             "Option set ",
+#             "http://example.com/terms/options/one_two_three",
+#             "Condition http://example.com/terms/conditions/does_not_exist for OptionSet http://example.com/terms/options/one_two_three does not exist.",  # noqa: E501
+#         ),
+#     ]
+#     assert_warning_items(page, expected_warnings)
 
-    ## TODO add test for errors
+#     ## TODO add test for errors
 
-    page.locator("body").press("Home")
-    expect(page.get_by_role("link", name="Management", exact=True)).to_be_visible()
-    page.screenshot(path="screenshots/management/import-optionsets-1-changes.png", full_page=True)
+#     page.locator("body").press("Home")
+#     expect(page.get_by_role("link", name="Management", exact=True)).to_be_visible()
+#     page.screenshot(path="screenshots/management/import-optionsets-1-changes.png", full_page=True)
diff --git a/rdmo/management/tests/e2e/test_frontend_import_questions.py b/rdmo/management/tests/e2e/test_frontend_import_questions.py
index 512e0b5ef9..b2e7b8d199 100644
--- a/rdmo/management/tests/e2e/test_frontend_import_questions.py
+++ b/rdmo/management/tests/e2e/test_frontend_import_questions.py
@@ -1,52 +1,54 @@
-import pytest
+# import pytest
 
-from playwright.sync_api import expect
+# from playwright.sync_api import expect
 
-from rdmo.management.tests.helpers_import_elements import IMPORT_ELEMENT_PANELS_LOCATOR_SHOWN
-from rdmo.questions.models import Catalog, Question, Section
-from rdmo.questions.models import Page as PageModel
-from rdmo.questions.models.questionset import QuestionSet
+# from rdmo.management.tests.helpers_import_elements import IMPORT_ELEMENT_PANELS_LOCATOR_SHOWN
+# from rdmo.questions.models import Catalog, Question, Section
+# from rdmo.questions.models import Page as PageModel
+# from rdmo.questions.models.questionset import QuestionSet
 
-pytestmark = pytest.mark.e2e
+# pytestmark = pytest.mark.e2e
 
 
-def test_import_catalogs_in_management(db, page, delete_all_objects) -> None:
-    """Test that the catalogs.xml can be imported correctly."""
+# def test_import_catalogs_in_management(db, page, delete_all_objects) -> None:
+#     """Test that the catalogs.xml can be imported correctly."""
 
-    expect(page.get_by_role("heading", name="Management")).to_be_visible()
-    expect(page.locator("strong").filter(has_text="Catalogs")).to_be_visible()
-    # all Catalog related objects are deleted
-    delete_all_objects(Catalog, Section, PageModel, QuestionSet, Question)
-    # choose the file to be imported
-    page.locator('input[name="uploaded_file"]').set_input_files("./testing/xml/elements/catalogs.xml")
-    # click the import form submit button, this will take some time
-    page.locator(
-        "#sidebar div.elements-sidebar form.upload-form.sidebar-form div.sidebar-form-button button.btn.btn-primary"
-    ).click()
-    # wait for import to be finished with timeout 30s
-    expect(page.get_by_text("Import from: catalogs.xml")).to_be_visible(timeout=30_000)
-    ## TODO test if ImportInfo numbers are correct
-    # test the components of the import-before-import staging page
-    page.locator(".element-link").first.click()
-    page.get_by_role("link", name="Deselect all").click()
-    page.get_by_role("link", name="Select all", exact=True).click()
-    page.get_by_role("link", name="Show all").click()
-    rows_displayed_in_ui_show = page.locator(IMPORT_ELEMENT_PANELS_LOCATOR_SHOWN).get_by_text("URI prefix", exact=True)
-    expect(rows_displayed_in_ui_show).to_have_count(148)
-    page.get_by_role("link", name="Hide all").click()
-    expect(rows_displayed_in_ui_show).to_have_count(0)
-    page.screenshot(path="screenshots/management/import-catalogs-pre.png", full_page=True)
-    # click the import button to start saving the instances to the db
-    page.get_by_role("button", name="Import 148 elements").click()
-    expect(page.get_by_role("heading", name="Import successful")).to_be_visible(timeout=20_000)
-    page.screenshot(path="screenshots/management/import-catalogs-post.png", full_page=True)
-    page.get_by_text("Created:").click()
-    # go back to management page
-    page.get_by_role("button", name="Back").click()
-    expect(page.get_by_role("heading", name="Management")).to_be_visible()
-    # assert all Model objects in db
-    assert Catalog.objects.count() == 2
-    assert Section.objects.count() == 6
-    assert PageModel.objects.count() == 48
-    assert QuestionSet.objects.count() == 3
-    assert Question.objects.count() == 89
+#     expect(page.get_by_role("heading", name="Management")).to_be_visible()
+#     expect(page.locator("strong").filter(has_text="Catalogs")).to_be_visible()
+#     # all Catalog related objects are deleted
+#     delete_all_objects(Catalog, Section, PageModel, QuestionSet, Question)
+#     # choose the file to be imported
+#     page.locator('input[name="uploaded_file"]').set_input_files("./testing/xml/elements/catalogs.xml")
+#     # click the import form submit button, this will take some time
+#     page.locator(
+#         "#sidebar div.elements-sidebar form.upload-form.sidebar-form div.sidebar-form-button button.btn.btn-primary"
+#     ).click()
+#     # wait for import to be finished with timeout 30s
+#     expect(page.get_by_text("Import from: catalogs.xml")).to_be_visible(timeout=30_000)
+#     ## TODO test if ImportInfo numbers are correct
+#     # test the components of the import-before-import staging page
+#     page.locator(".element-link").first.click()
+#     page.get_by_role("link", name="Deselect all").click()
+#     page.get_by_role("link", name="Select all", exact=True).click()
+#     page.get_by_role("link", name="Show all").click()
+#     rows_displayed_in_ui_show = (
+#         page.locator(IMPORT_ELEMENT_PANELS_LOCATOR_SHOWN).get_by_text("URI prefix", exact=True)
+#     )
+#     expect(rows_displayed_in_ui_show).to_have_count(148)
+#     page.get_by_role("link", name="Hide all").click()
+#     expect(rows_displayed_in_ui_show).to_have_count(0)
+#     page.screenshot(path="screenshots/management/import-catalogs-pre.png", full_page=True)
+#     # click the import button to start saving the instances to the db
+#     page.get_by_role("button", name="Import 148 elements").click()
+#     expect(page.get_by_role("heading", name="Import successful")).to_be_visible(timeout=20_000)
+#     page.screenshot(path="screenshots/management/import-catalogs-post.png", full_page=True)
+#     page.get_by_text("Created:").click()
+#     # go back to management page
+#     page.get_by_role("button", name="Back").click()
+#     expect(page.get_by_role("heading", name="Management")).to_be_visible()
+#     # assert all Model objects in db
+#     assert Catalog.objects.count() == 2
+#     assert Section.objects.count() == 6
+#     assert PageModel.objects.count() == 48
+#     assert QuestionSet.objects.count() == 3
+#     assert Question.objects.count() == 89
diff --git a/rdmo/management/tests/e2e/test_frontend_management_elements.py b/rdmo/management/tests/e2e/test_frontend_management_elements.py
index 9ca313234b..ef2891a7e0 100644
--- a/rdmo/management/tests/e2e/test_frontend_management_elements.py
+++ b/rdmo/management/tests/e2e/test_frontend_management_elements.py
@@ -5,8 +5,8 @@
 
 from playwright.sync_api import Page, expect
 
-from rdmo.conditions.models import Condition
-from rdmo.domain.models import Attribute
+# from rdmo.conditions.models import Condition
+# from rdmo.domain.models import Attribute
 from rdmo.management.tests.helpers_models import ModelHelper, model_helpers
 from rdmo.questions.models import Catalog
 
@@ -53,38 +53,43 @@ def test_management_nested_view(page: Page, helper: ModelHelper) -> None:
     # Open nested view for element type
     if helper.has_nested:
         page.get_by_title(f"View {helper.verbose_name} nested").first.click()
-        expect(page.locator(".panel-default").first).to_be_visible()
-        expect(page.locator(".panel-default > .panel-body").first).to_be_visible()
+        expect(page.locator(".card").first).to_be_visible()
+        expect(page.locator(".card > .card-body").first).to_be_visible()
 
 
-@pytest.mark.parametrize("page", ["page_single", "page_multisite"], indirect=True)
-@pytest.mark.parametrize("helper", model_helpers)
-def test_management_create_model(page: Page, helper: ModelHelper) -> None:
-    """Test management UI can create objects in the database."""
-    num_objects_at_start = helper.model.objects.count()
-    page.goto(f"/management/{helper.url}")
-    # click "New" button
-    page.get_by_role("button", name="New").click()
-    # fill mandatory fields
-    value = "some-value"
-    page.get_by_label(helper.form_field).fill(value)
-    if helper.model == Condition:
-        # conditions need to have a source attribute
-        source_form = page.locator(".form-group").filter(has_text="Source").locator(".select-item > .react-select")
-        source_form.click()
-        page.keyboard.type(Attribute.objects.first().uri)
-        page.keyboard.press("Enter")
+# @pytest.mark.parametrize("page", ["page_single", "page_multisite"], indirect=True)
+# @pytest.mark.parametrize("helper", model_helpers)
+# def test_management_create_model(page: Page, helper: ModelHelper) -> None:
+#     """Test management UI can create objects in the database."""
+#     num_objects_at_start = helper.model.objects.count()
+#     page.goto(f"/management/{helper.url}")
 
-    # save
-    page.get_by_role("button", name="Create").nth(1).click()
-    # check if new item is in list
-    items_in_ui = page.locator(".list-group > .list-group-item")
-    expect(items_in_ui).to_have_count(num_objects_at_start + 1)
+#     # click "New" button
+#     page.get_by_role("button", name="New").click()
+
+#     # fill mandatory fields
+#     value = "some-value"
+#     page.get_by_label(helper.form_field).fill(value)
+
+#     if helper.model == Condition:
+#         # conditions need to have a source attribute
+#         source_form = page.locator(".form-group").filter(has_text="Source").locator(".select-item > .react-select")
+#         source_form.click()
+#         page.keyboard.type(Attribute.objects.first().uri)
+#         page.keyboard.press("Enter")
+
+#     # save
+#     page.get_by_role("button", name="Create").nth(1).click()
+
+#     # check if new item is in list
+#     items_in_ui = page.locator(".list-group > .list-group-item")
+#     expect(items_in_ui).to_have_count(num_objects_at_start + 1)
+
+#     num_objects_after_save = helper.model.objects.count()
+#     assert num_objects_after_save - num_objects_at_start == 1
+#     query = {helper.db_field: value}
+#     assert helper.model.objects.get(**query)
 
-    num_objects_after_save = helper.model.objects.count()
-    assert num_objects_after_save - num_objects_at_start == 1
-    query = {helper.db_field: value}
-    assert helper.model.objects.get(**query)
 
 @pytest.mark.parametrize("page", ["page_single", "page_multisite"], indirect=True)
 @pytest.mark.parametrize("helper", model_helpers)
diff --git a/rdmo/management/utils.py b/rdmo/management/utils.py
index cff679811b..a3a55bb142 100644
--- a/rdmo/management/utils.py
+++ b/rdmo/management/utils.py
@@ -1,4 +1,3 @@
-
 def replace_uri_in_template_string(template: str, source_uri: str, target_uri: str) -> str:
     replacements = [
         (f"'{source_uri}'", f"'{target_uri}'"),
diff --git a/rdmo/overlays/__init__.py b/rdmo/overlays/__init__.py
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/rdmo/overlays/admin.py b/rdmo/overlays/admin.py
deleted file mode 100644
index ee663ac45c..0000000000
--- a/rdmo/overlays/admin.py
+++ /dev/null
@@ -1,10 +0,0 @@
-from django.contrib import admin
-
-from .models import Overlay
-
-
-@admin.register(Overlay)
-class OverlayAdmin(admin.ModelAdmin):
-    search_fields = ('user__username', 'url_name', 'current')
-    list_display = ('user', 'site', 'url_name', 'current')
-    list_filter = ('url_name', 'current')
diff --git a/rdmo/overlays/apps.py b/rdmo/overlays/apps.py
deleted file mode 100644
index d88b9f23df..0000000000
--- a/rdmo/overlays/apps.py
+++ /dev/null
@@ -1,7 +0,0 @@
-from django.apps import AppConfig
-from django.utils.translation import gettext_lazy as _
-
-
-class OverlayConfig(AppConfig):
-    name = 'rdmo.overlays'
-    verbose_name = _('Overlays')
diff --git a/rdmo/overlays/migrations/0001_initial.py b/rdmo/overlays/migrations/0001_initial.py
deleted file mode 100644
index 7421f04089..0000000000
--- a/rdmo/overlays/migrations/0001_initial.py
+++ /dev/null
@@ -1,33 +0,0 @@
-# Generated by Django 2.2.18 on 2021-03-22 15:47
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-
-
-class Migration(migrations.Migration):
-
-    initial = True
-
-    dependencies = [
-        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
-        ('sites', '0002_alter_domain_unique'),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name='Overlay',
-            fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('url_name', models.SlugField(help_text='The url_name for this overlay.', max_length=128, verbose_name='Url name')),
-                ('current', models.SlugField(blank=True, help_text='The current state for this overlay.', max_length=128, verbose_name='Current')),
-                ('site', models.ForeignKey(help_text='The site for this overlay.', null=True, on_delete=django.db.models.deletion.SET_NULL, to='sites.Site', verbose_name='Site')),
-                ('user', models.ForeignKey(help_text='The user for this overlay.', on_delete=django.db.models.deletion.CASCADE, related_name='overlays', to=settings.AUTH_USER_MODEL, verbose_name='User')),
-            ],
-            options={
-                'verbose_name': 'Overlay',
-                'verbose_name_plural': 'Overlays',
-                'ordering': ('user', 'url_name'),
-            },
-        ),
-    ]
diff --git a/rdmo/overlays/migrations/__init__.py b/rdmo/overlays/migrations/__init__.py
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/rdmo/overlays/models.py b/rdmo/overlays/models.py
deleted file mode 100644
index 16703a497b..0000000000
--- a/rdmo/overlays/models.py
+++ /dev/null
@@ -1,36 +0,0 @@
-from django.conf import settings
-from django.contrib.sites.models import Site
-from django.db import models
-from django.utils.translation import gettext_lazy as _
-
-
-class Overlay(models.Model):
-
-    user = models.ForeignKey(
-        settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='overlays',
-        verbose_name=_('User'),
-        help_text=_('The user for this overlay.')
-    )
-    site = models.ForeignKey(
-        Site, on_delete=models.SET_NULL, null=True,
-        verbose_name=_('Site'),
-        help_text=_('The site for this overlay.')
-    )
-    url_name = models.SlugField(
-        max_length=128,
-        verbose_name=_('Url name'),
-        help_text=_('The url_name for this overlay.')
-    )
-    current = models.SlugField(
-        max_length=128, blank=True,
-        verbose_name=_('Current'),
-        help_text=_('The current state for this overlay.')
-    )
-
-    class Meta:
-        ordering = ('user', 'url_name')
-        verbose_name = _('Overlay')
-        verbose_name_plural = _('Overlays')
-
-    def __str__(self):
-        return f'{self.user} / {self.url_name}'
diff --git a/rdmo/overlays/static/overlays/css/overlays.scss b/rdmo/overlays/static/overlays/css/overlays.scss
deleted file mode 100644
index 0d1a2a60b7..0000000000
--- a/rdmo/overlays/static/overlays/css/overlays.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@import 'core/css/variables';
-
-.overlay {
-    display: none;
-}
-
-// hide popovers on mobile
-@media (max-width: $screen-sm-max) {
-    .popover {
-        position: fixed;
-        top: 60px !important;
-        left: 20px !important;
-        right: 20px !important;
-
-        &.top {
-            margin-top: 0;
-        }
-
-        .arrow {
-            display: none;
-        }
-    }
-}
-
-.popover-buttons {
-    margin-top: 9px;
-    text-align: right;
-}
diff --git a/rdmo/overlays/static/overlays/js/overlays.js b/rdmo/overlays/static/overlays/js/overlays.js
deleted file mode 100644
index 09833dc7f9..0000000000
--- a/rdmo/overlays/static/overlays/js/overlays.js
+++ /dev/null
@@ -1,77 +0,0 @@
-function initOverlays(url_name) {
-    var baseurl = $('meta[name="baseurl"').attr('content');
-    var csrftoken = getCookie('csrftoken');
-    var defaults = {
-        html: true,
-        sanitize: false,
-        trigger: 'manual',
-        template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>',
-        viewport: {
-            selector: '.content > .container',
-            padding: 10
-        }
-    };
-
-    function showPopover(response) {
-        // close all popovers
-        $("[aria-describedby^='popover']").popover('hide');
-
-        if (response.overlay) {
-            var elementId = '#' + response.overlay,
-                overlayId = '#' + response.overlay + '-overlay'
-            var opts = $.extend({}, defaults, $(overlayId).data(), {
-                'content': $(overlayId).html(),
-            })
-
-            // if overlay element does not exist, proceed with next overlay
-            if (!$(elementId).length) {
-                fetchResponse('next');
-                return;
-            }
-
-            // show popover
-            $(elementId).popover(opts).popover('show');
-
-            // bind buttons
-            $('.popover-next').unbind().click(function() {
-                fetchResponse('next');
-            });
-            $('.popover-dismiss').unbind().click(function() {
-                fetchResponse('dismiss');
-            });
-        }
-
-        if (response.last) {
-            $('.popover-next').hide();
-            $('.popover-dismiss').addClass('btn-primary');
-        }
-    }
-
-    function getCookie(name) {
-        // from https://docs.djangoproject.com/en/stable/ref/csrf/
-        let cookieValue = null;
-        if (document.cookie && document.cookie !== '') {
-            const cookies = document.cookie.split(';');
-            for (let i = 0; i < cookies.length; i++) {
-                const cookie = cookies[i].trim();
-                // Does this cookie string begin with the name we want?
-                if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    break;
-                }
-            }
-        }
-        return cookieValue;
-    }
-
-    function fetchResponse(action) {
-        $.ajax({
-            url: baseurl + 'api/v1/overlays/overlays/' + url_name + '/' + action + '/',
-            type: 'POST',
-            headers: {'X-CSRFToken': csrftoken},
-            success: showPopover
-        });
-    }
-
-    fetchResponse('current');
-}
diff --git a/rdmo/overlays/templates/overlays/buttons.html b/rdmo/overlays/templates/overlays/buttons.html
deleted file mode 100644
index db3b6fb05b..0000000000
--- a/rdmo/overlays/templates/overlays/buttons.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% load i18n %}
-
-<div class="popover-buttons">
-    <button type="button" class="btn btn-sm popover-dismiss" title="Dismiss all tips on this page">{% trans 'Dismiss' %}</button>
-    <button type="button" class="btn btn-primary btn-sm popover-next">{% trans 'Next tip' %}</button>
-</div>
diff --git a/rdmo/overlays/templates/overlays/reset_overlays.html b/rdmo/overlays/templates/overlays/reset_overlays.html
deleted file mode 100644
index 9faedfe846..0000000000
--- a/rdmo/overlays/templates/overlays/reset_overlays.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-
-{% block page %}
-
-    <h1>{% trans "Reset tutorial overlays" %}</h1>
-
-    <p>
-        {% trans 'RDMO uses overlays to introduce its functionality to new users. After that, these overlays will no longer be displayed. Please click the button below if you want to go through the tutorials again.' %}
-    </p>
-
-    <form method="post">
-        {% csrf_token %}
-        <input type="hidden" name="next" value="{{ next }}" />
-        <input type="submit" class="btn btn-primary" value="{% trans 'Reset overlays' %}" />
-    </form>
-
-{% endblock %}
diff --git a/rdmo/overlays/tests/__init__.py b/rdmo/overlays/tests/__init__.py
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/rdmo/overlays/tests/test_views.py b/rdmo/overlays/tests/test_views.py
deleted file mode 100644
index 8f6fa8aa0e..0000000000
--- a/rdmo/overlays/tests/test_views.py
+++ /dev/null
@@ -1,38 +0,0 @@
-import pytest
-
-from django.urls import reverse
-
-from ..models import Overlay
-
-users = (
-    ('user', 'user'),
-    ('anonymous', None)
-)
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_reset_overlays_get(db, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('reset_overlays')
-    response = client.get(url)
-    if password:
-        assert response.status_code == 200
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_reset_overlays_post(db, client, username, password):
-    client.login(username=username, password=password)
-
-    if password:
-        assert Overlay.objects.filter(user__username=username).exists() is True
-
-    url = reverse('reset_overlays')
-    response = client.post(url)
-    if password:
-        assert response.status_code == 302
-        assert Overlay.objects.filter(user__username=username).exists() is False
-    else:
-        assert response.status_code == 302
diff --git a/rdmo/overlays/tests/test_viewsets.py b/rdmo/overlays/tests/test_viewsets.py
deleted file mode 100644
index 931a71944a..0000000000
--- a/rdmo/overlays/tests/test_viewsets.py
+++ /dev/null
@@ -1,70 +0,0 @@
-import pytest
-
-from django.urls import reverse
-
-from ..models import Overlay
-
-users = (
-    ('user', 'user'),
-    ('anonymous', None)
-)
-
-urlnames = {
-    'current': 'v1-overlays:overlay-current',
-    'next': 'v1-overlays:overlay-next',
-    'dismiss': 'v1-overlays:overlay-dismiss'
-}
-
-url_names = [
-    'projects'
-]
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('url_name', url_names)
-def test_current(db, client, username, password, url_name):
-    client.login(username=username, password=password)
-
-    url = reverse(urlnames['current'], args=[url_name])
-    response = client.post(url)
-
-    if password:
-        assert response.status_code == 200
-        assert Overlay.objects.get(user__username=username, url_name=url_name).current == response.json().get('overlay')
-    else:
-        assert response.status_code == 401
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('url_name', url_names)
-def test_next(db, client, username, password, url_name):
-    client.login(username=username, password=password)
-
-    url = reverse(urlnames['next'], args=[url_name])
-    response = client.post(url)
-
-    if password:
-        assert response.status_code == 200
-        assert response.json().get('overlay') == Overlay.objects.get(
-            user__username=username, url_name=url_name
-        ).current
-    else:
-        assert response.status_code == 401
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('url_name', url_names)
-def test_dismiss(db, client, username, password, url_name):
-    client.login(username=username, password=password)
-
-    url = reverse(urlnames['dismiss'], args=[url_name])
-    response = client.post(url)
-
-    if password:
-        assert response.status_code == 200
-        assert response.json().get('overlay') == ''
-        assert response.json().get('overlay') == Overlay.objects.get(
-            user__username=username, url_name=url_name
-        ).current
-    else:
-        assert response.status_code == 401
diff --git a/rdmo/overlays/urls/__init__.py b/rdmo/overlays/urls/__init__.py
deleted file mode 100644
index abe848d210..0000000000
--- a/rdmo/overlays/urls/__init__.py
+++ /dev/null
@@ -1,7 +0,0 @@
-from django.urls import path
-
-from ..views import reset_overlays
-
-urlpatterns = [
-    path('reset/', reset_overlays, name='reset_overlays')
-]
diff --git a/rdmo/overlays/urls/v1.py b/rdmo/overlays/urls/v1.py
deleted file mode 100644
index 9054f26c1d..0000000000
--- a/rdmo/overlays/urls/v1.py
+++ /dev/null
@@ -1,14 +0,0 @@
-from django.urls import include, path
-
-from rest_framework import routers
-
-from ..viewsets import OverlayViewSet
-
-app_name = 'v1-overlays'
-
-router = routers.DefaultRouter()
-router.register(r'overlays', OverlayViewSet, basename='overlay')
-
-urlpatterns = [
-    path('', include(router.urls)),
-]
diff --git a/rdmo/overlays/views.py b/rdmo/overlays/views.py
deleted file mode 100644
index 2665dc7bfe..0000000000
--- a/rdmo/overlays/views.py
+++ /dev/null
@@ -1,21 +0,0 @@
-import logging
-
-from django.contrib.auth.decorators import login_required
-from django.shortcuts import redirect, render
-
-from rdmo.core.utils import get_next, get_referer_path_info
-
-from .models import Overlay
-
-logger = logging.getLogger(__name__)
-
-
-@login_required()
-def reset_overlays(request):
-    if request.method == 'POST':
-        Overlay.objects.filter(user=request.user).delete()
-        return redirect(get_next(request))
-
-    return render(request, 'overlays/reset_overlays.html', {
-        'next': get_referer_path_info(request, default='/')
-    })
diff --git a/rdmo/overlays/viewsets.py b/rdmo/overlays/viewsets.py
deleted file mode 100644
index 20a1aa3895..0000000000
--- a/rdmo/overlays/viewsets.py
+++ /dev/null
@@ -1,72 +0,0 @@
-from django.conf import settings
-from django.contrib.sites.models import Site
-
-from rest_framework.decorators import action
-from rest_framework.exceptions import NotFound
-from rest_framework.permissions import IsAuthenticated
-from rest_framework.response import Response
-from rest_framework.viewsets import ViewSet
-
-from .models import Overlay
-
-
-class OverlayViewSet(ViewSet):
-
-    @action(detail=False, methods=['post'], url_path='(?P<url_name>[-\\w]+)/current',
-            permission_classes=[IsAuthenticated])
-    def current(self, request, url_name=None):
-        site = Site.objects.get_current()
-        overlays = settings.OVERLAYS.get(url_name)[:]
-
-        if not overlays:
-            raise NotFound()
-
-        try:
-            overlay = Overlay.objects.get(user=request.user, site=site, url_name=url_name)
-        except Overlay.DoesNotExist:
-            overlay = Overlay.objects.create(user=request.user, site=site, url_name=url_name, current=overlays[0])
-
-        return Response({
-            'overlay': overlay.current,
-            'last': overlay.current == overlays[-1]
-        })
-
-    @action(detail=False, methods=['post'], url_path='(?P<url_name>[-\\w]+)/next',
-            permission_classes=[IsAuthenticated])
-    def next(self, request, url_name=None):
-        site = Site.objects.get_current()
-        overlays = settings.OVERLAYS.get(url_name)[:]
-        if not overlays:
-            raise NotFound()
-
-        try:
-            overlay = Overlay.objects.get(user=request.user, site=site, url_name=url_name)
-            try:
-                overlay.current = overlays[overlays.index(overlay.current) + 1]
-            except (IndexError, ValueError):
-                overlay.current = ''
-            overlay.save()
-        except Overlay.DoesNotExist:
-            overlay = Overlay.objects.create(user=request.user, site=site, url_name=url_name, current=overlays[0])
-
-        return Response({
-            'overlay': overlay.current,
-            'last': overlay.current == overlays[-1]
-        })
-
-    @action(detail=False, methods=['post'], url_path='(?P<url_name>[-\\w]+)/dismiss',
-            permission_classes=[IsAuthenticated])
-    def dismiss(self, request, url_name=None):
-        site = Site.objects.get_current()
-        overlays = settings.OVERLAYS.get(url_name)[:]
-        if not overlays:
-            raise NotFound()
-
-        try:
-            overlay = Overlay.objects.get(user=request.user, site=site, url_name=url_name)
-            overlay.current = ''
-            overlay.save()
-        except Overlay.DoesNotExist:
-            overlay = Overlay.objects.create(user=request.user, site=site, url_name=url_name, current='')
-
-        return Response({'overlay': overlay.current})
diff --git a/rdmo/projects/assets/js/common/actions/actionTypes.js b/rdmo/projects/assets/js/common/actions/actionTypes.js
new file mode 100644
index 0000000000..4fc31fa59f
--- /dev/null
+++ b/rdmo/projects/assets/js/common/actions/actionTypes.js
@@ -0,0 +1,3 @@
+export const FETCH_ROLES_INIT = 'FETCH_ROLES_INIT'
+export const FETCH_ROLES_SUCCESS = 'FETCH_ROLES_SUCCESS'
+export const FETCH_ROLES_ERROR = 'FETCH_ROLES_ERROR'
diff --git a/rdmo/projects/assets/js/common/actions/rolesActions.js b/rdmo/projects/assets/js/common/actions/rolesActions.js
new file mode 100644
index 0000000000..f695f82cd9
--- /dev/null
+++ b/rdmo/projects/assets/js/common/actions/rolesActions.js
@@ -0,0 +1,31 @@
+import RoleApi from '../api/RoleApi'
+
+import { FETCH_ROLES_ERROR, FETCH_ROLES_INIT, FETCH_ROLES_SUCCESS } from './actionTypes'
+
+export function fetchRoles() {
+  return function (dispatch) {
+    dispatch(fetchRolesInit())
+
+    return RoleApi.fetchRoles()
+      .then((roles) => {
+        const mappedRoles = roles.map(role => ({
+          value: role.id,
+          label: role.text,
+        }))
+        dispatch(fetchRolesSuccess(mappedRoles))
+      })
+      .catch((errors) => dispatch(fetchRolesError(errors)))
+  }
+}
+
+export function fetchRolesInit() {
+  return { type: FETCH_ROLES_INIT }
+}
+
+export function fetchRolesSuccess(roles) {
+  return { type: FETCH_ROLES_SUCCESS, roles }
+}
+
+export function fetchRolesError(errors) {
+  return { type: FETCH_ROLES_ERROR, errors }
+}
diff --git a/rdmo/projects/assets/js/common/api/CatalogApi.js b/rdmo/projects/assets/js/common/api/CatalogApi.js
new file mode 100644
index 0000000000..03470c1aaa
--- /dev/null
+++ b/rdmo/projects/assets/js/common/api/CatalogApi.js
@@ -0,0 +1,9 @@
+import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
+
+class CatalogApi extends BaseApi {
+  static fetchCatalogs() {
+    return this.get('/api/v1/projects/catalogs/')
+  }
+}
+
+export default CatalogApi
diff --git a/rdmo/projects/assets/js/common/api/RoleApi.js b/rdmo/projects/assets/js/common/api/RoleApi.js
new file mode 100644
index 0000000000..3f05d5a850
--- /dev/null
+++ b/rdmo/projects/assets/js/common/api/RoleApi.js
@@ -0,0 +1,9 @@
+import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
+
+class RoleApi extends BaseApi {
+  static fetchRoles() {
+    return this.get('/api/v1/projects/roles/')
+  }
+}
+
+export default RoleApi
diff --git a/rdmo/projects/assets/js/common/reducers/rolesReducer.js b/rdmo/projects/assets/js/common/reducers/rolesReducer.js
new file mode 100644
index 0000000000..7d87a20d09
--- /dev/null
+++ b/rdmo/projects/assets/js/common/reducers/rolesReducer.js
@@ -0,0 +1,19 @@
+import { FETCH_ROLES_ERROR, FETCH_ROLES_INIT, FETCH_ROLES_SUCCESS } from '../actions/actionTypes'
+
+const initialState = {
+  roles: [],
+  errors: null,
+}
+
+export default function rolesReducer(state = initialState, action) {
+  switch (action.type) {
+    case FETCH_ROLES_INIT:
+      return { ...state, errors: null }
+    case FETCH_ROLES_SUCCESS:
+      return { ...state, roles: action.roles }
+    case FETCH_ROLES_ERROR:
+      return { ...state, errors: action.errors.errors }
+    default:
+      return state
+  }
+}
diff --git a/rdmo/projects/assets/js/interview.js b/rdmo/projects/assets/js/interview.js
index 97435a43f5..16b0c7044d 100644
--- a/rdmo/projects/assets/js/interview.js
+++ b/rdmo/projects/assets/js/interview.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import { createRoot } from 'react-dom/client'
-import { Provider } from 'react-redux'
-
-import configureStore from './interview/store/configureStore'
-
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
 
 import Pending from '../../../core/assets/js/containers/Pending'
 
+import configureStore from './interview/store/configureStore'
+
 import Main from './interview/containers/Main'
 import Sidebar from './interview/containers/Sidebar'
 
diff --git a/rdmo/projects/assets/js/interview/actions/contactActions.js b/rdmo/projects/assets/js/interview/actions/contactActions.js
index 472afd6bca..42b70acceb 100644
--- a/rdmo/projects/assets/js/interview/actions/contactActions.js
+++ b/rdmo/projects/assets/js/interview/actions/contactActions.js
@@ -1,19 +1,19 @@
-import ContactApi from '../api/ContactApi'
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
 
 import { projectId } from '../utils/meta'
 
+import ContactApi from '../api/ContactApi'
+
 import {
+  CLOSE_CONTACT,
+  FETCH_CONTACT_ERROR,
   FETCH_CONTACT_INIT,
   FETCH_CONTACT_SUCCESS,
-  FETCH_CONTACT_ERROR,
-  SEND_CONTACT_INIT,
-  SEND_CONTACT_SUCCESS,
   SEND_CONTACT_ERROR,
-  CLOSE_CONTACT
+  SEND_CONTACT_INIT,
+  SEND_CONTACT_SUCCESS
 } from './actionTypes'
 
-import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
-
 export function fetchContact({ questionset, question, values }) {
   const pendingId = 'fetchContact'
 
diff --git a/rdmo/projects/assets/js/interview/actions/interviewActions.js b/rdmo/projects/assets/js/interview/actions/interviewActions.js
index a066c88d2d..5bc919f237 100644
--- a/rdmo/projects/assets/js/interview/actions/interviewActions.js
+++ b/rdmo/projects/assets/js/interview/actions/interviewActions.js
@@ -1,60 +1,56 @@
 import { first, isEmpty, isNil } from 'lodash'
 
-import PageApi from '../api/PageApi'
-import ProjectApi from '../api/ProjectApi'
-import ValueApi from '../api/ValueApi'
-
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
 import { elementTypes } from 'rdmo/management/assets/js/constants/elements'
 
-import { updateProgress } from './projectActions'
-
 import { updateLocation } from '../utils/location'
-
+import { projectId } from '../utils/meta'
 import { updateOptions } from '../utils/options'
 import { initPage } from '../utils/page'
-import { copyResolvedConditions, getDescendants, gatherSets, initSets } from '../utils/set'
-import { gatherDefaultValues, initValues, compareValues, isEmptyValue } from '../utils/value'
-import { projectId } from '../utils/meta'
+import { copyResolvedConditions, gatherSets, getDescendants, initSets } from '../utils/set'
+import { compareValues, gatherDefaultValues, initValues, isEmptyValue } from '../utils/value'
 
-import ValueFactory from '../factories/ValueFactory'
+import PageApi from '../api/PageApi'
+import ProjectApi from '../api/ProjectApi'
+import ValueApi from '../api/ValueApi'
 import SetFactory from '../factories/SetFactory'
+import ValueFactory from '../factories/ValueFactory'
 
 import {
-  NOOP,
-  FETCH_PAGE_INIT,
-  FETCH_PAGE_SUCCESS,
-  FETCH_PAGE_ERROR,
+  COPY_SET_ERROR,
+  COPY_SET_INIT,
+  COPY_SET_SUCCESS,
+  CREATE_SET,
+  CREATE_VALUE,
+  DELETE_SET_ERROR,
+  DELETE_SET_INIT,
+  DELETE_SET_SUCCESS,
+  DELETE_VALUE_ERROR,
+  DELETE_VALUE_INIT,
+  DELETE_VALUE_SUCCESS,
+  FETCH_NAVIGATION_ERROR,
   FETCH_NAVIGATION_INIT,
   FETCH_NAVIGATION_SUCCESS,
-  FETCH_NAVIGATION_ERROR,
+  FETCH_OPTIONS_ERROR,
   FETCH_OPTIONS_INIT,
   FETCH_OPTIONS_SUCCESS,
-  FETCH_OPTIONS_ERROR,
+  FETCH_PAGE_ERROR,
+  FETCH_PAGE_INIT,
+  FETCH_PAGE_SUCCESS,
+  FETCH_VALUES_ERROR,
   FETCH_VALUES_INIT,
   FETCH_VALUES_SUCCESS,
-  FETCH_VALUES_ERROR,
+  NOOP,
+  RESOLVE_CONDITION_ERROR,
   RESOLVE_CONDITION_INIT,
   RESOLVE_CONDITION_SUCCESS,
-  RESOLVE_CONDITION_ERROR,
-  CREATE_VALUE,
-  UPDATE_VALUE,
+  STORE_VALUE_ERROR,
   STORE_VALUE_INIT,
   STORE_VALUE_SUCCESS,
-  STORE_VALUE_ERROR,
-  DELETE_VALUE_INIT,
-  DELETE_VALUE_SUCCESS,
-  DELETE_VALUE_ERROR,
-  CREATE_SET,
-  DELETE_SET_INIT,
-  DELETE_SET_SUCCESS,
-  DELETE_SET_ERROR,
-  COPY_SET_INIT,
-  COPY_SET_SUCCESS,
-  COPY_SET_ERROR
+  UPDATE_VALUE
 } from './actionTypes'
-
-import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
-import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
+import { updateProgress } from './projectActions'
 
 export function fetchPage(pageId, back) {
   const pendingId = 'fetchPage'
@@ -74,8 +70,7 @@ export function fetchPage(pageId, back) {
       dispatch(fetchPageSuccess(null, true))
       dispatch(removeFromPending(pendingId))
     } else {
-      const promise = isNil(pageId) ? PageApi.fetchContinue(projectId)
-                                    : PageApi.fetchPage(projectId, pageId, back)
+      const promise = isNil(pageId) ? PageApi.fetchContinue(projectId) : PageApi.fetchPage(projectId, pageId, back)
       return promise
         .then((page) => {
           updateLocation(page.id)
@@ -147,7 +142,7 @@ export function fetchNavigationError(error) {
 export function fetchOptionsets(page) {
   return (dispatch) => {
     page.optionsets.filter((optionset) => (optionset.has_provider && !optionset.has_search))
-                   .forEach((optionset) => dispatch(fetchOptions(page, optionset)))
+      .forEach((optionset) => dispatch(fetchOptions(page, optionset)))
   }
 }
 
@@ -225,13 +220,13 @@ export function resolveConditions(page, sets) {
     // loop over set to evaluate conditions
     sets.forEach((set) => {
       page.questionsets.filter((questionset) => questionset.has_conditions)
-                       .forEach((questionset) => dispatch(resolveCondition(questionset, set)))
+        .forEach((questionset) => dispatch(resolveCondition(questionset, set)))
 
       page.questions.filter((question) => question.has_conditions)
-                    .forEach((question) => dispatch(resolveCondition(question, set)))
+        .forEach((question) => dispatch(resolveCondition(question, set)))
 
       page.optionsets.filter((optionset) => optionset.has_conditions)
-                     .forEach((optionset) => dispatch(resolveCondition(optionset, set)))
+        .forEach((optionset) => dispatch(resolveCondition(optionset, set)))
     })
   }
 }
@@ -375,7 +370,7 @@ export function updateValue(value, attrs, store = true) {
   if (store) {
     return storeValue(ValueFactory.update(value, attrs))
   } else {
-     return {type: UPDATE_VALUE, value, attrs}
+    return {type: UPDATE_VALUE, value, attrs}
   }
 }
 
@@ -684,7 +679,7 @@ export function copySet(currentSet, copySetValue, attrs) {
     if (isNil(value)) {
       // gather all values for the currentSet and it's descendants
       const { values: currentValues } = getDescendants(getState().interview.values,
-                                                       getState().interview.sets, currentSet)
+        getState().interview.sets, currentSet)
 
       // store each value in currentSet with the new set_index
       promise = Promise.all(
diff --git a/rdmo/projects/assets/js/interview/actions/projectActions.js b/rdmo/projects/assets/js/interview/actions/projectActions.js
index 4ce3a3baa5..15255968da 100644
--- a/rdmo/projects/assets/js/interview/actions/projectActions.js
+++ b/rdmo/projects/assets/js/interview/actions/projectActions.js
@@ -1,21 +1,21 @@
-import ProjectApi from '../api/ProjectApi'
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
 
 import { projectId } from '../utils/meta'
 
+import ProjectApi from '../api/ProjectApi'
+
 import {
+  FETCH_OVERVIEW_ERROR,
   FETCH_OVERVIEW_INIT,
   FETCH_OVERVIEW_SUCCESS,
-  FETCH_OVERVIEW_ERROR,
+  FETCH_PROGRESS_ERROR,
   FETCH_PROGRESS_INIT,
   FETCH_PROGRESS_SUCCESS,
-  FETCH_PROGRESS_ERROR,
+  UPDATE_PROGRESS_ERROR,
   UPDATE_PROGRESS_INIT,
   UPDATE_PROGRESS_SUCCESS,
-  UPDATE_PROGRESS_ERROR,
 } from './actionTypes'
 
-import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
-
 export function fetchOverview() {
   return (dispatch) => {
     dispatch(addToPending('fetchOverview'))
@@ -51,14 +51,14 @@ export function fetchProgress() {
     dispatch(fetchProgressInit())
 
     return ProjectApi.fetchProgress(projectId)
-    .then((progress) => {
-      dispatch(removeFromPending('fetchProgress'))
-      dispatch(fetchProgressSuccess(progress))
-    })
-    .catch((error) => {
-      dispatch(removeFromPending('fetchProgress'))
-      dispatch(fetchProgressError(error))
-    })
+      .then((progress) => {
+        dispatch(removeFromPending('fetchProgress'))
+        dispatch(fetchProgressSuccess(progress))
+      })
+      .catch((error) => {
+        dispatch(removeFromPending('fetchProgress'))
+        dispatch(fetchProgressError(error))
+      })
   }
 }
 
diff --git a/rdmo/projects/assets/js/interview/api/ValueApi.js b/rdmo/projects/assets/js/interview/api/ValueApi.js
index 6e59895ab4..af1d0b7442 100644
--- a/rdmo/projects/assets/js/interview/api/ValueApi.js
+++ b/rdmo/projects/assets/js/interview/api/ValueApi.js
@@ -1,7 +1,9 @@
-import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
-import { encodeParams } from 'rdmo/core/assets/js/utils/api'
 import { isUndefined } from 'lodash'
 
+import { encodeParams } from 'rdmo/core/assets/js/utils/api'
+
+import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
+
 class ValueApi extends BaseApi {
 
   static fetchValues(projectId, params) {
diff --git a/rdmo/projects/assets/js/interview/components/main/Contact.js b/rdmo/projects/assets/js/interview/components/main/Contact.js
index 84d88109d1..f96d92d546 100644
--- a/rdmo/projects/assets/js/interview/components/main/Contact.js
+++ b/rdmo/projects/assets/js/interview/components/main/Contact.js
@@ -1,9 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import Modal from 'rdmo/core/assets/js/components/Modal'
-
 import Html from 'rdmo/core/assets/js/components/Html'
+import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const Contact = ({ templates, contact, sendContact, closeContact }) => {
   const { showModal, values: initialValues, errors } = contact
@@ -27,46 +26,48 @@ const Contact = ({ templates, contact, sendContact, closeContact }) => {
         submitLabel={gettext('Send message')}
         onSubmit={onSubmit}
         onClose={onClose}
-        modalProps={{
-          bsSize: 'lg'
-        }}>
-          <Html html={templates.project_interview_contact_help} />
-          <form onSubmit={onSubmit}>
-            <div className="form-group">
-              <label htmlFor="interview-question-contact-subject">Subject</label>
-              <input
-                type="text"
-                id="interview-question-contact-subject"
-                className="form-control"
-                value={values.subject || ''}
-                onChange={event => setValues({ ...values, subject: event.target.value })}
-              />
-              <ul className="help-block list-unstyled">
-                {
-                  errors && errors.subject && errors.subject.map((error, errorIndex) => (
-                    <li key={errorIndex} className="text-danger">{errors.subject}</li>
-                  ))
-                }
-              </ul>
-            </div>
-            <div className="form-group">
-              <label htmlFor="interview-question-contact-message">Message</label>
-              <textarea
-                rows="12"
-                id="interview-question-contact-message"
-                className="form-control"
-                value={values.message || ''}
-                onChange={event => setValues({...values, message: event.target.value })}
-              />
-              <ul className="help-block list-unstyled">
-                {
-                  errors && errors.message && errors.message.map((error, errorIndex) => (
-                    <li key={errorIndex} className="text-danger">{errors.message}</li>
-                  ))
-                }
-              </ul>
-            </div>
-          </form>
+        modalProps={
+          {
+            bsSize: 'lg'
+          }
+        }>
+        <Html html={templates.project_interview_contact_help} />
+        <form onSubmit={onSubmit}>
+          <div className="form-group">
+            <label htmlFor="interview-question-contact-subject">Subject</label>
+            <input
+              type="text"
+              id="interview-question-contact-subject"
+              className="form-control"
+              value={values.subject || ''}
+              onChange={event => setValues({ ...values, subject: event.target.value })}
+            />
+            <ul className="help-block list-unstyled">
+              {
+                errors && errors.subject && errors.subject.map((error, errorIndex) => (
+                  <li key={errorIndex} className="text-danger">{errors.subject}</li>
+                ))
+              }
+            </ul>
+          </div>
+          <div className="form-group">
+            <label htmlFor="interview-question-contact-message">Message</label>
+            <textarea
+              rows="12"
+              id="interview-question-contact-message"
+              className="form-control"
+              value={values.message || ''}
+              onChange={event => setValues({...values, message: event.target.value })}
+            />
+            <ul className="help-block list-unstyled">
+              {
+                errors && errors.message && errors.message.map((error, errorIndex) => (
+                  <li key={errorIndex} className="text-danger">{errors.message}</li>
+                ))
+              }
+            </ul>
+          </div>
+        </form>
       </Modal>
     </>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/Done.js b/rdmo/projects/assets/js/interview/components/main/Done.js
index 6798fb4e53..68e5a696e8 100644
--- a/rdmo/projects/assets/js/interview/components/main/Done.js
+++ b/rdmo/projects/assets/js/interview/components/main/Done.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 
 import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
 
-import { projectId }  from '../../utils/meta'
-
 import Html from 'rdmo/core/assets/js/components/Html'
 
+import { projectId }  from '../../utils/meta'
+
 const Done = ({ templates }) => {
 
   const projectUrl = `${baseUrl}/projects/${projectId}/`
diff --git a/rdmo/projects/assets/js/interview/components/main/Search.js b/rdmo/projects/assets/js/interview/components/main/Search.js
index 674dca2759..2d2cfab40e 100644
--- a/rdmo/projects/assets/js/interview/components/main/Search.js
+++ b/rdmo/projects/assets/js/interview/components/main/Search.js
@@ -12,9 +12,8 @@ const Search = ({ page, question, attribute, values, setValues, collection = fal
   const key = (values.project ? values.project.id : '') + (values.snapshot ? '-all' : '')
 
   // compile a list of possible options to restrict the search, only include optionsets without provider
-  const options = isNil(question) ? []
-                                  : question.optionsets.filter(optionset => !optionset.has_provider)
-                                                       .flatMap(optionset => optionset.options.map(option => option.id))
+  const options = isNil(question) ? [] : question.optionsets.filter(optionset => !optionset.has_provider)
+    .flatMap(optionset => optionset.options.map(option => option.id))
 
   const handleLoadValues = useDebouncedCallback((search, callback) => {
     ValueApi.searchValues({
@@ -56,92 +55,109 @@ const Search = ({ page, question, attribute, values, setValues, collection = fal
 
   const handleLoadProjects = useDebouncedCallback((search, callback) => {
     ProjectApi.fetchProjects({ search })
-              .then(response => callback(response.results.map(project => pick(project, 'id', 'title'))))
+      .then(response => callback(response.results.map(project => pick(project, 'id', 'title'))))
   }, 500)
 
-  return <>
-    <AsyncSelect
-      key={key}
-      classNamePrefix="react-select"
-      className='react-select'
-      placeholder={gettext('Search for project or snapshot title, or answer text ...')}
-      noOptionsMessage={() => gettext(
-        'No answers match your search.'
-      )}
-      loadingMessage={() => gettext('Loading ...')}
-      options={[]}
-      value={values.value}
-      onChange={(value) => setValues({ ...values, value })}
-      getOptionValue={(value) => value}
-      getOptionLabel={(value) => value.value_label}
-      formatOptionLabel={(value) => {
-        const truncatedLabel = truncate(value.value_label, {'length': 256, 'omission': ' [...]'})
+  return (
+    <>
+      <AsyncSelect
+        key={key}
+        classNamePrefix="react-select"
+        className="react-select"
+        placeholder={gettext('Search for project or snapshot title, or answer text ...')}
+        noOptionsMessage={
+          () => gettext(
+            'No answers match your search.'
+          )
+        }
+        loadingMessage={() => gettext('Loading ...')}
+        options={[]}
+        value={values.value}
+        onChange={(value) => setValues({ ...values, value })}
+        getOptionValue={(value) => value}
+        getOptionLabel={(value) => value.value_label}
+        formatOptionLabel={
+          (value) => {
+            const truncatedLabel = truncate(value.value_label, {'length': 256, 'omission': ' [...]'})
 
-        return (
-          <div>
-            {gettext('Project')} <strong>{value.project_label}</strong>
-            {
-              value.snapshot_label && <>
+            return (
+              <div>
+                {gettext('Project')} <strong>{value.project_label}</strong>
+                {
+                  value.snapshot_label && (
+                    <>
+                      <span className="mr-5 ml-5">&rarr;</span>
+                      {gettext('Snapshot')} <strong>{value.snapshot_label}</strong>
+                    </>
+                  )
+                }
+                {
+                  value.set_label && (
+                    <>
+                      <span className="mr-5 ml-5">&rarr;</span>
+                      {gettext('Tab')} <strong>{value.set_label}</strong>
+                    </>
+                  )
+                }
                 <span className="mr-5 ml-5">&rarr;</span>
-                {gettext('Snapshot')} <strong>{value.snapshot_label}</strong>
-              </>
-            }
-            {
-              value.set_label && <>
-                <span className="mr-5 ml-5">&rarr;</span>
-                {gettext('Tab')} <strong>{value.set_label}</strong>
-              </>
-            }
-            <span className="mr-5 ml-5">&rarr;</span>
-            {
-              isNil(page) ? <>{gettext('Tab')} <strong>{truncatedLabel}</strong></> : truncatedLabel
-            }
-          </div>
-        )
-      }}
-      loadOptions={handleLoadValues}
-      defaultOptions
-      isClearable
-      backspaceRemovesValue={true}
-    />
-
-    <AsyncSelect
-      classNamePrefix='react-select'
-      className='react-select mt-10'
-      placeholder={gettext('Restrict the search to a particular project ...')}
-      noOptionsMessage={() => gettext(
-        'No projects matching your search.'
-      )}
-      loadingMessage={() => gettext('Loading ...')}
-      options={[]}
-      value={values.project}
-      onChange={(project) => setValues({
-        ...values,
-        value: (isEmpty(project) || project == values.project) ? values.value : '',  // reset value
-        project: project
-      })}
-      getOptionValue={(project) => project}
-      getOptionLabel={(project) => project.title}
-      loadOptions={handleLoadProjects}
-      defaultOptions
-      isClearable
-      backspaceRemovesValue={true}
-    />
+                {
+                  isNil(page) ? <>{gettext('Tab')} <strong>{truncatedLabel}</strong></> : truncatedLabel
+                }
+              </div>
+            )
+          }
+        }
+        loadOptions={handleLoadValues}
+        defaultOptions
+        isClearable
+        backspaceRemovesValue={true}
+      />
 
-    <div className="checkbox">
-      <label>
-        <input
-          type="checkbox"
-          checked={values.snapshot}
-          onChange={() => setValues({
+      <AsyncSelect
+        classNamePrefix="react-select"
+        className="react-select mt-10"
+        placeholder={gettext('Restrict the search to a particular project ...')}
+        noOptionsMessage={
+          () => gettext(
+            'No projects matching your search.'
+          )
+        }
+        loadingMessage={() => gettext('Loading ...')}
+        options={[]}
+        value={values.project}
+        onChange={
+          (project) => setValues({
             ...values,
-            value: values.snapshot ? '' : values.value,  // reset value
-            snapshot: !values.snapshot })}
-        />
-        <span>{gettext('Include snapshots in the search')}</span>
-      </label>
-    </div>
-  </>
+            value: (isEmpty(project) || project == values.project) ? values.value : '',  // reset value
+            project: project
+          })
+        }
+        getOptionValue={(project) => project}
+        getOptionLabel={(project) => project.title}
+        loadOptions={handleLoadProjects}
+        defaultOptions
+        isClearable
+        backspaceRemovesValue={true}
+      />
+
+      <div className="checkbox">
+        <label>
+          <input
+            type="checkbox"
+            checked={values.snapshot}
+            onChange={
+              () => setValues({
+                ...values,
+                value: values.snapshot ? '' : values.value,  // reset value
+                snapshot: !values.snapshot
+              })
+            }
+          />
+          <span>{gettext('Include snapshots in the search')}</span>
+        </label>
+      </div>
+    </>
+  )
 }
 
 Search.propTypes = {
diff --git a/rdmo/projects/assets/js/interview/components/main/page/Page.js b/rdmo/projects/assets/js/interview/components/main/page/Page.js
index d6b8b7c679..100defa6d8 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/Page.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/Page.js
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import get from 'lodash/get'
 import { isNil, minBy } from 'lodash'
+import get from 'lodash/get'
 
 import Question from '../question/Question'
 import QuestionSet from '../questionset/QuestionSet'
@@ -11,9 +11,11 @@ import PageHead from './PageHead'
 import PageHelp from './PageHelp'
 import PageManagement from './PageManagement'
 
-const Page = ({ config, settings, templates, overview, page, sets, values, fetchPage, fetchContact,
-                createValue, updateValue, deleteValue, copyValue,
-                activateSet, createSet, updateSet, deleteSet, copySet }) => {
+const Page = ({
+  config, settings, templates, overview, page, sets, values, fetchPage, fetchContact,
+  createValue, updateValue, deleteValue, copyValue,
+  activateSet, createSet, updateSet, deleteSet, copySet
+}) => {
 
   const currentSetPrefix = ''
 
@@ -109,19 +111,25 @@ const Page = ({ config, settings, templates, overview, page, sets, values, fetch
                     templates={templates}
                     page={page}
                     question={element}
-                    sets={sets.filter((set) => (
-                      set.set_prefix == currentSetPrefix
-                    ))}
-                    values={values.filter((value) => (
-                      value.attribute == element.attribute &&
-                      value.set_prefix == currentSetPrefix &&
-                      value.set_index == currentSetIndex
-                    ))}
-                    siblings={values.filter((value) => (
-                      value.attribute == element.attribute &&
-                      value.set_prefix == currentSetPrefix &&
-                      value.set_index != currentSetIndex
-                    ))}
+                    sets={
+                      sets.filter((set) => (
+                        set.set_prefix == currentSetPrefix
+                      ))
+                    }
+                    values={
+                      values.filter((value) => (
+                        value.attribute == element.attribute &&
+                        value.set_prefix == currentSetPrefix &&
+                        value.set_index == currentSetIndex
+                      ))
+                    }
+                    siblings={
+                      values.filter((value) => (
+                        value.attribute == element.attribute &&
+                        value.set_prefix == currentSetPrefix &&
+                        value.set_index != currentSetIndex
+                      ))
+                    }
                     disabled={disabled}
                     isManager={isManager}
                     currentSet={currentSet}
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageButtons.js b/rdmo/projects/assets/js/interview/components/main/page/PageButtons.js
index 1194ac0ae9..c5646deea1 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageButtons.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageButtons.js
@@ -6,20 +6,23 @@ const PageButtons = ({ page, fetchPage }) => {
     <>
       <div className="interview-buttons">
         <div className="pull-right">
-          <button type="button" onClick={() => fetchPage(page.prev_page, true)} disabled={!page.prev_page}
-                  className="btn btn-default">
+          <button
+            type="button" onClick={() => fetchPage(page.prev_page, true)} disabled={!page.prev_page}
+            className="btn btn-default">
             {gettext('Back')}
           </button>
           {' '}
           {
             page.next_page ? (
-              <button type="button" onClick={() => fetchPage(page.next_page)}
-                      className="btn btn-primary">
+              <button
+                type="button" onClick={() => fetchPage(page.next_page)}
+                className="btn btn-primary">
                 {gettext('Proceed')}
               </button>
             ) : (
-              <button type="button" onClick={() => fetchPage('done')}
-                      className="btn btn-primary">
+              <button
+                type="button" onClick={() => fetchPage('done')}
+                className="btn btn-primary">
                 {gettext('Complete questionnaire')}
               </button>
             )
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHead.js b/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
index df5674260b..161fffcf39 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHead.js
@@ -10,11 +10,12 @@ import { generateSetIndex } from '../../../utils/set'
 import PageHeadDeleteModal from './PageHeadDeleteModal'
 import PageHeadFormModal from './PageHeadFormModal'
 import PageHeadReuseModal from './PageHeadReuseModal'
-
 import PageTabsHelp from './PageTabsHelp'
 
-const PageHead = ({ templates, page, sets, values, disabled, currentSet,
-                    activateSet, createSet, updateSet, deleteSet, copySet }) => {
+const PageHead = ({
+  templates, page, sets, values, disabled, currentSet,
+  activateSet, createSet, updateSet, deleteSet, copySet
+}) => {
 
   const currentSetValue = isNil(currentSet) ? null : (
     values.find((value) => (
@@ -133,19 +134,23 @@ const PageHead = ({ templates, page, sets, values, disabled, currentSet,
                 <div className="interview-page-tabs-buttons">
                   {
                     page.attribute && (
-                      <button role="button" className="btn-link fa fa-pencil"
-                              title={labels.edit} onClick={updateModal.open} />
+                      <button
+                        role="button" className="btn-link fa fa-pencil"
+                        title={labels.edit} onClick={updateModal.open} />
                     )
                   }
-                  <button role="button" className="btn-link fa fa-copy"
-                          title={labels.copy} aria-label={labels.copy}
-                          onClick={copyModal.open} />
-                  <button role="button" className="btn-link fa fa-arrow-circle-down"
-                          title={labels.reuse} aria-label={labels.reuse}
-                          onClick={importModal.open} />
-                  <button role="button" className="btn-link fa fa-trash"
-                          title={labels.remove} aria-label={labels.remove}
-                          onClick={deleteModal.open} />
+                  <button
+                    role="button" className="btn-link fa fa-copy"
+                    title={labels.copy} aria-label={labels.copy}
+                    onClick={copyModal.open} />
+                  <button
+                    role="button" className="btn-link fa fa-arrow-circle-down"
+                    title={labels.reuse} aria-label={labels.reuse}
+                    onClick={importModal.open} />
+                  <button
+                    role="button" className="btn-link fa fa-trash"
+                    title={labels.remove} aria-label={labels.remove}
+                    onClick={deleteModal.open} />
                 </div>
               )
             }
@@ -160,58 +165,60 @@ const PageHead = ({ templates, page, sets, values, disabled, currentSet,
       }
 
       {
-        !disabled && <>
-        <PageHeadFormModal
-          title={gettext('Create tab')}
-          submitLabel={gettext('Create')}
-          submitColor="success"
-          show={createModal.show}
-          attribute={page.attribute}
-          reuse={true}
-          onClose={createModal.close}
-          onSubmit={handleCreate}
-        />
-        <PageHeadFormModal
-          title={gettext('Copy tab')}
-          submitLabel={gettext('Copy')}
-          submitColor="info"
-          show={copyModal.show}
-          attribute={page.attribute}
-          onClose={copyModal.close}
-          onSubmit={handleCopy}
-        />
-        {
-          currentSetValue && (
+        !disabled && (
+          <>
             <PageHeadFormModal
-              title={gettext('Update tab')}
-              submitLabel={gettext('Update')}
-              submitColor="primary"
-              show={updateModal.show}
+              title={gettext('Create tab')}
+              submitLabel={gettext('Create')}
+              submitColor="success"
+              show={createModal.show}
               attribute={page.attribute}
-              initial={currentSetValue.text}
-              onClose={updateModal.close}
-              onSubmit={handleUpdate}
+              reuse={true}
+              onClose={createModal.close}
+              onSubmit={handleCreate}
             />
-          )
-        }
-        {
-          currentSetValue && (
-            <PageHeadReuseModal
-              show={importModal.show}
+            <PageHeadFormModal
+              title={gettext('Copy tab')}
+              submitLabel={gettext('Copy')}
+              submitColor="info"
+              show={copyModal.show}
               attribute={page.attribute}
-              onClose={importModal.close}
-              onSubmit={handleImport}
+              onClose={copyModal.close}
+              onSubmit={handleCopy}
             />
-          )
-        }
-        <PageHeadDeleteModal
-          name={currentSetValue ? currentSetValue.text : null}
-          show={deleteModal.show}
-          onClose={deleteModal.close}
-          onSubmit={handleDelete}
-        />
-      </>
-    }
+            {
+              currentSetValue && (
+                <PageHeadFormModal
+                  title={gettext('Update tab')}
+                  submitLabel={gettext('Update')}
+                  submitColor="primary"
+                  show={updateModal.show}
+                  attribute={page.attribute}
+                  initial={currentSetValue.text}
+                  onClose={updateModal.close}
+                  onSubmit={handleUpdate}
+                />
+              )
+            }
+            {
+              currentSetValue && (
+                <PageHeadReuseModal
+                  show={importModal.show}
+                  attribute={page.attribute}
+                  onClose={importModal.close}
+                  onSubmit={handleImport}
+                />
+              )
+            }
+            <PageHeadDeleteModal
+              name={currentSetValue ? currentSetValue.text : null}
+              show={deleteModal.show}
+              onClose={deleteModal.close}
+              onSubmit={handleDelete}
+            />
+          </>
+        )
+      }
     </div>
   )
 }
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHeadDeleteModal.js b/rdmo/projects/assets/js/interview/components/main/page/PageHeadDeleteModal.js
index 64f4dfa1a4..91f2007e73 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHeadDeleteModal.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHeadDeleteModal.js
@@ -1,18 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Html from 'rdmo/core/assets/js/components/Html'
 import Modal from 'rdmo/core/assets/js/components/Modal'
 
 const PageHeadDeleteModal = ({ name, show, onClose, onSubmit }) => {
   return (
-    <Modal title={gettext('Delete tab')} show={show} submitLabel={gettext('Delete')}
-           submitProps={{className: 'btn btn-danger'}}
-           onClose={onClose} onSubmit={onSubmit}>
+    <Modal
+      title={gettext('Delete tab')} show={show} submitLabel={gettext('Delete')}
+      submitProps={{ className: 'btn btn-danger' }}
+      onClose={onClose} onSubmit={onSubmit}>
       {
         name ? (
-          <p dangerouslySetInnerHTML={{
-          __html: interpolate(gettext('You are about to permanently delete the tab named: <strong>%s</strong>'), [name])
-          }}></p>
+          <Html html={
+            interpolate(gettext('You are about to permanently delete the tab named: <strong>%s</strong>'), [name])
+          } />
         ) : (
           <p>{gettext('You are about to permanently delete this tab.')}</p>
         )
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js b/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js
index a5f050bef7..429c1cd099 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHeadFormModal.js
@@ -1,12 +1,14 @@
-import React, { useState, useRef, useEffect } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { isEmpty, isNil } from 'lodash'
 
 import useLsState from 'rdmo/core/assets/js/hooks/useLsState'
-import useFocusEffect from '../../../hooks/useFocusEffect'
 
 import Modal from 'rdmo/core/assets/js/components/Modal'
+
+import useFocusEffect from '../../../hooks/useFocusEffect'
+
 import Search from '../Search'
 
 const PageHeadFormModal = ({ title, submitLabel, submitColor, show, attribute, reuse, initial, onClose, onSubmit }) => {
@@ -51,8 +53,9 @@ const PageHeadFormModal = ({ title, submitLabel, submitColor, show, attribute, r
   useFocusEffect(ref, show)
 
   return (
-    <Modal title={title} show={show} submitLabel={submitLabel} submitProps={{className: `btn btn-${submitColor}`}}
-           onClose={onClose} onSubmit={handleSubmit} disableSubmit={errors}>
+    <Modal
+      title={title} show={show} submitLabel={submitLabel} submitProps={{className: `btn btn-${submitColor}`}}
+      onClose={onClose} onSubmit={handleSubmit} disableSubmit={errors}>
       {
         isNil(attribute) ? (
           <div>
@@ -71,11 +74,13 @@ const PageHeadFormModal = ({ title, submitLabel, submitColor, show, attribute, r
                 type="text"
                 value={values.text}
                 onChange={(event) => setValues({ ...values, text: event.target.value })}
-                onKeyPress={(event) => {
-                  if (event.code === 'Enter') {
-                    handleSubmit()
+                onKeyPress={
+                  (event) => {
+                    if (event.code === 'Enter') {
+                      handleSubmit()
+                    }
                   }
-                }}
+                }
               />
 
               <p className="help-block mb-0">{gettext('Please give the tab a meaningful name.')}</p>
@@ -90,8 +95,12 @@ const PageHeadFormModal = ({ title, submitLabel, submitColor, show, attribute, r
                   <Search attribute={attribute} values={values} setValues={setValues} />
 
                   <p className="help-block mb-0">
-                    {gettext('You can populate this tab with answers from a similar tab in any ' +
-                             'project you are allowed to access.')}
+                    {
+                      gettext(
+                        'You can populate this tab with answers from a similar tab in any ' +
+                        'project you are allowed to access.'
+                      )
+                    }
                   </p>
                 </div>
               )
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHeadReuseModal.js b/rdmo/projects/assets/js/interview/components/main/page/PageHeadReuseModal.js
index 56f359779b..ade3647c7a 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHeadReuseModal.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHeadReuseModal.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { isEmpty } from 'lodash'
@@ -40,9 +40,10 @@ const PageHeadReuseModal = ({ show, attribute, onClose, onSubmit }) => {
   }, [values, values.value])
 
   return (
-    <Modal title={gettext('Reuse tab')} show={show} submitLabel={gettext('Reuse')}
-           submitProps={{className: 'btn btn-primary'}}
-           onClose={onClose} onSubmit={handleSubmit}>
+    <Modal
+      title={gettext('Reuse tab')} show={show} submitLabel={gettext('Reuse')}
+      submitProps={{className: 'btn btn-primary'}}
+      onClose={onClose} onSubmit={handleSubmit}>
       <div className={classNames({'form-group': true, 'has-error': errors.value })}>
         <label className="control-label">
           {gettext('Answers')}
@@ -51,9 +52,13 @@ const PageHeadReuseModal = ({ show, attribute, onClose, onSubmit }) => {
         <Search attribute={attribute} values={values} setValues={setValues} />
 
         <p className="help-block mb-0">
-          {gettext('You can populate this tab with answers from a similar tab in any ' +
-                   'project you have access to. This only affects questions that ' +
-                   'don\'t already have an answer.')}
+          {
+            gettext(
+              'You can populate this tab with answers from a similar tab in any ' +
+              'project you have access to. This only affects questions that ' +
+              'don\'t already have an answer.'
+            )
+          }
         </p>
       </div>
     </Modal>
diff --git a/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js b/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
index 00d9ab1d05..9213878548 100644
--- a/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/page/PageHelp.js
@@ -4,9 +4,11 @@ import PropTypes from 'prop-types'
 import Html from 'rdmo/core/assets/js/components/Html'
 
 const PageHelp = ({ page }) => {
-  return <div className="interview-page-help" >
-    <Html html={page.help} />
-  </div>
+  return (
+    <div className="interview-page-help" >
+      <Html html={page.help} />
+    </div>
+  )
 }
 
 PageHelp.propTypes = {
diff --git a/rdmo/projects/assets/js/interview/components/main/question/Question.js b/rdmo/projects/assets/js/interview/components/main/question/Question.js
index 0f2e81ab60..9513fad97e 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/Question.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/Question.js
@@ -13,8 +13,10 @@ import QuestionText from './QuestionText'
 import QuestionWarning from './QuestionWarning'
 import QuestionWidget from './QuestionWidget'
 
-const Question = ({ config, settings, templates, page, question, sets, values, siblings, disabled, isManager,
-                    currentSet, createValue, updateValue, deleteValue, copyValue, fetchContact }) => {
+const Question = ({
+  config, settings, templates, page, question, sets, values, siblings, disabled, isManager,
+  currentSet, createValue, updateValue, deleteValue, copyValue, fetchContact
+}) => {
   return checkQuestion(question, currentSet) && (
     <div className={`interview-question col-md-${question.width || '12'}`}>
       <QuestionOptional question={question} />
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js
index b368699895..0dcae84e6f 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionAddValue.js
@@ -17,8 +17,9 @@ const AddValue = ({ question, values, currentSet, disabled, createValue }) => {
   }
 
   return !disabled && question.is_collection && (
-    <button type="button" className="btn btn-success btn-xs add-value-button" onClick={handleClick}
-            title={gettext('Add answer')} aria-label={gettext('Add answer')}>
+    <button
+      type="button" className="btn btn-success btn-xs add-value-button" onClick={handleClick}
+      title={gettext('Add answer')} aria-label={gettext('Add answer')}>
       <i className="fa fa-plus fa-btn" aria-hidden="true"></i> {upperFirst(question.verbose_name)}
     </button>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
index f37fac2a78..de3e1bd3aa 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 
 const QuestionContact = ({ settings, question, values, fetchContact }) => {
   return settings.project_contact && (
-    <button type="button "className="btn btn-link btn-contact"
-            title={gettext('Contact support')} aria-label={gettext('Contact support')}
-            onClick={() => fetchContact({ question, values })}>
+    <button
+      type="button "className="btn btn-link btn-contact"
+      title={gettext('Contact support')} aria-label={gettext('Contact support')}
+      onClick={() => fetchContact({ question, values })}>
       <i className="fa fa-commenting-o" aria-hidden="true"></i>
     </button>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValue.js
index 4bb18ca242..bf9ca0ef58 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValue.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValue.js
@@ -9,9 +9,10 @@ const QuestionCopyValue = ({ question, value, siblings, copyValue }) => {
     !question.is_collection &&
     !isEmptyValue(value) &&
     siblings.some((value) => isEmptyValue(value)) && (
-      <button type="button" className="btn btn-link btn-apply-to-all" onClick={() => copyValue(question, value)}
-              title={gettext('Apply this answer to all tabs where this question is empty')}
-              aria-label={gettext('Apply this answer to all tabs where this question is empty')}>
+      <button
+        type="button" className="btn btn-link btn-apply-to-all" onClick={() => copyValue(question, value)}
+        title={gettext('Apply this answer to all tabs where this question is empty')}
+        aria-label={gettext('Apply this answer to all tabs where this question is empty')}>
         <i className="fa fa-arrow-circle-right fa-btn" aria-hidden="true"></i>
       </button>
     )
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValues.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValues.js
index 6c55dec48a..54f2154a2b 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValues.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionCopyValues.js
@@ -6,13 +6,18 @@ import { isEmptyValue } from '../../../utils/value'
 
 const QuestionCopyValues = ({ question, sets, values, siblings, currentSet, copyValue }) => {
   const button = question.widget_type == 'checkbox' ? (
-    <button className="btn btn-link btn-apply-to-all" onClick={() => copyValue(question, ...values)}
-            title={gettext('Apply this answer to all tabs where this question is empty')}
-            aria-label={gettext('Apply this answer to all tabs where this question is empty')}>
+    <button
+      className="btn btn-link btn-apply-to-all" onClick={() => copyValue(question, ...values)}
+      title={gettext('Apply this answer to all tabs where this question is empty')}
+      aria-label={gettext('Apply this answer to all tabs where this question is empty')}>
       <i className="fa fa-arrow-circle-right fa-btn" aria-hidden="true"></i>
     </button>
   ) : (
-    <button type="button" className="btn btn-primary btn-xs copy-value-button ml-10" onClick={() => copyValue(question, ...values)}>
+    <button
+      type="button"
+      className="btn btn-primary btn-xs copy-value-button ml-10"
+      onClick={() => copyValue(question, ...values)}
+    >
       <i className="fa fa-arrow-circle-right fa-btn" aria-hidden="true"></i> {gettext('Apply to all')}
     </button>
   )
@@ -20,19 +25,19 @@ const QuestionCopyValues = ({ question, sets, values, siblings, currentSet, copy
   const hasValues = values.some((value) => !isEmptyValue(value))
 
   const hasEmptySiblings = sets.filter((set) => (
-      (set.set_prefix == currentSet.set_prefix) &&
-      (set.set_index != currentSet.set_index) &&
-      (set.element == question.parent)
-    )).some((set) => {
-      // loop over all other sets and filter siblings accordingly
-      const setSiblings = siblings.filter((value) => (
-        (value.set_prefix == set.set_prefix) &&
-        (value.set_index == set.set_index)
-      ))
-
-      // check if this set has no sibling at all (for checkboxes) or if they are empty
-      return isEmpty(setSiblings) || setSiblings.some((value) => isEmptyValue(value))
-    })
+    (set.set_prefix == currentSet.set_prefix) &&
+    (set.set_index != currentSet.set_index) &&
+    (set.element == question.parent)
+  )).some((set) => {
+    // loop over all other sets and filter siblings accordingly
+    const setSiblings = siblings.filter((value) => (
+      (value.set_prefix == set.set_prefix) &&
+      (value.set_index == set.set_index)
+    ))
+
+    // check if this set has no sibling at all (for checkboxes) or if they are empty
+    return isEmpty(setSiblings) || setSiblings.some((value) => isEmptyValue(value))
+  })
 
   return (
     question.is_collection &&
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js
index 6448d6a9bf..c99ea4b798 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValue.js
@@ -7,8 +7,9 @@ const QuestionEraseValue = ({ value, disabled, updateValue }) => {
   }
 
   return !disabled && (
-    <button type="button" className="btn btn-link btn-erase-value" onClick={handleEraseValue}
-            title={gettext('Erase input')} aria-label={gettext('Erase input')}>
+    <button
+      type="button" className="btn btn-link btn-erase-value" onClick={handleEraseValue}
+      title={gettext('Erase input')} aria-label={gettext('Erase input')}>
       <i className="fa fa-eraser fa-btn" aria-hidden="true"></i>
     </button>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValues.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValues.js
index 726945f7f3..b261ba80a5 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValues.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionEraseValues.js
@@ -7,8 +7,9 @@ const QuestionEraseValues = ({ values, disabled, deleteValue }) => {
   }
 
   return !disabled && (
-    <button type="button" className="btn btn-link btn-erase-value" onClick={handleEraseValue}
-            title={gettext('Erase input')} aria-label={gettext('Erase input')}>
+    <button
+      type="button" className="btn btn-link btn-erase-value" onClick={handleEraseValue}
+      title={gettext('Erase input')} aria-label={gettext('Erase input')}>
       <i className="fa fa-eraser fa-btn" aria-hidden="true"></i>
     </button>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js
index a575f40845..a6d7bb3865 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionError.js
@@ -8,7 +8,7 @@ const getMessage = (error) => {
       return gettext('This field could not be saved, since somebody else did so while you were editing.' +
                      ' You will need to reload the page to make changes, but your input will be overwritten.')
     } else if (error.errors.quota) {
-       return gettext('You reached the file quota for this project.')
+      return gettext('You reached the file quota for this project.')
     } else if (error.errors.text) {
       return error.errors.text
     }
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js
index 47970cdb3f..dc4f4d4080 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionHelp.js
@@ -2,18 +2,20 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { getQuestionHelpId } from '../../../utils/question'
-
 import Html from 'rdmo/core/assets/js/components/Html'
 
+import { getQuestionHelpId } from '../../../utils/question'
+
 const QuestionHelp = ({ question }) => {
   const classnames = classNames('interview-question-help', {
     'text-muted': question.is_optional
   })
 
-  return <div className={classnames} >
-    <Html id={getQuestionHelpId(question)} html={question.help} />
-  </div>
+  return (
+    <div className={classnames} >
+      <Html id={getQuestionHelpId(question)} html={question.help} />
+    </div>
+  )
 }
 
 QuestionHelp.propTypes = {
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionRemoveValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionRemoveValue.js
index 47a12fd2bf..59edbdf150 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionRemoveValue.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionRemoveValue.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types'
 
 const QuestionRemoveValue = ({ question, values, value, disabled, deleteValue }) => {
   return !disabled && (question.is_collection || values.length > 1) && (
-    <button type="button" className="btn btn-link btn-remove-value" onClick={() => deleteValue(value)}
-            title={gettext('Remove answer')} aria-label={gettext('Remove answer')}>
+    <button
+      type="button" className="btn btn-link btn-remove-value" onClick={() => deleteValue(value)}
+      title={gettext('Remove answer')} aria-label={gettext('Remove answer')}>
       <i className="fa fa-times fa-btn" aria-hidden="true"></i>
     </button>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js
index aa4103266f..7dc08935de 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValue.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { isEmpty } from 'lodash'
@@ -50,47 +50,55 @@ const QuestionReuseValue = ({ page, question, value, disabled, updateValue }) =>
     }
   }, [formValues, formValues.value])
 
-  const modalButtons = <>
-    {
-      ['text', 'textarea'].includes(question.widget_type) && (
-        <button type="button" className="btn btn-primary" onClick={() => handleSubmit('append')}>
-          {gettext('Append')}
-        </button>
-      )
-    }
-    <button type="button" className="btn btn-primary" onClick={() => handleSubmit('replace')}>
-      {gettext('Replace')}
-    </button>
-  </>
-
-  return !disabled && <>
-    <button type="button" className="btn btn-link btn-reuse-value" onClick={() => setShow(true)}
-            title={gettext('Reuse answer')} aria-label={gettext('Reuse answer')}>
-      <i className="fa fa-arrow-circle-down fa-btn" aria-hidden="true"></i>
-    </button>
-
-    <Modal title={gettext('Reuse answer')} show={show} buttons={modalButtons}
-           onClose={() => setShow(false)} >
-      <div className={classNames({'form-group': true, 'has-error': formErrors.value })}>
-        <label className="control-label" htmlFor="interview-page-tabs-modal-form-import">
-          {gettext('Answer')}
-        </label>
-
-        <Search
-          page={page}
-          question={question}
-          attribute={value.attribute}
-          values={formValues}
-          setValues={setFormValues}
-        />
-
-        <p className="help-block mb-0">
-          {gettext('You can reuse an answer from a similar question in any ' +
-                   'project you have access to.')}
-        </p>
-      </div>
-    </Modal>
-  </>
+  const modalButtons = (
+    <>
+      {
+        ['text', 'textarea'].includes(question.widget_type) && (
+          <button type="button" className="btn btn-primary" onClick={() => handleSubmit('append')}>
+            {gettext('Append')}
+          </button>
+        )
+      }
+      <button type="button" className="btn btn-primary" onClick={() => handleSubmit('replace')}>
+        {gettext('Replace')}
+      </button>
+    </>
+  )
+
+  return !disabled && (
+    <>
+      <button
+        type="button" className="btn btn-link btn-reuse-value" onClick={() => setShow(true)}
+        title={gettext('Reuse answer')} aria-label={gettext('Reuse answer')}>
+        <i className="fa fa-arrow-circle-down fa-btn" aria-hidden="true"></i>
+      </button>
+
+      <Modal
+        title={gettext('Reuse answer')} show={show} buttons={modalButtons}
+        onClose={() => setShow(false)} >
+        <div className={classNames({'form-group': true, 'has-error': formErrors.value })}>
+          <label className="control-label" htmlFor="interview-page-tabs-modal-form-import">
+            {gettext('Answer')}
+          </label>
+
+          <Search
+            page={page}
+            question={question}
+            attribute={value.attribute}
+            values={formValues}
+            setValues={setFormValues}
+          />
+
+          <p className="help-block mb-0">
+            {
+              gettext('You can reuse an answer from a similar question in any ' +
+                   'project you have access to.')
+            }
+          </p>
+        </div>
+      </Modal>
+    </>
+  )
 }
 
 QuestionReuseValue.propTypes = {
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js
index aeb7c0e727..5e0fe28ebd 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionReuseValues.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { isEmpty, isNil } from 'lodash'
@@ -75,37 +75,43 @@ const QuestionReuseValues = ({ page, question, values, disabled, createValues, u
     }
   }, [formValues, formValues.value])
 
-  return !disabled && <>
-    <button type="button" className="btn btn-link btn-reuse-value"
-            title={gettext('Reuse answers')} aria-label={gettext('Reuse answers')}
-            onClick={() => setShow(true)}>
-      <i className="fa fa-arrow-circle-down fa-btn" aria-hidden="true"></i>
-    </button>
-
-    <Modal title={gettext('Reuse answer')} show={show} submitLabel={gettext('Replace')}
-           submitProps={{className: 'btn btn-primary'}}
-           onClose={() => setShow(false)} onSubmit={handleSubmit}>
-      <div className={classNames({'form-group': true, 'has-error': formErrors.value })}>
-        <label className="control-label" htmlFor="interview-page-tabs-modal-form-import">
-          {gettext('Answer')}
-        </label>
-
-        <Search
-          page={page}
-          question={question}
-          attribute={question.attribute}
-          values={formValues}
-          setValues={setFormValues}
-          collection={true}
-        />
-
-        <p className="help-block mb-0">
-          {gettext('You can reuse an answer from a similar question in any ' +
-                   'project you have access to.')}
-        </p>
-      </div>
-    </Modal>
-  </>
+  return !disabled && (
+    <>
+      <button
+        type="button" className="btn btn-link btn-reuse-value"
+        title={gettext('Reuse answers')} aria-label={gettext('Reuse answers')}
+        onClick={() => setShow(true)}>
+        <i className="fa fa-arrow-circle-down fa-btn" aria-hidden="true"></i>
+      </button>
+
+      <Modal
+        title={gettext('Reuse answer')} show={show} submitLabel={gettext('Replace')}
+        submitProps={{className: 'btn btn-primary'}}
+        onClose={() => setShow(false)} onSubmit={handleSubmit}>
+        <div className={classNames({'form-group': true, 'has-error': formErrors.value })}>
+          <label className="control-label" htmlFor="interview-page-tabs-modal-form-import">
+            {gettext('Answer')}
+          </label>
+
+          <Search
+            page={page}
+            question={question}
+            attribute={question.attribute}
+            values={formValues}
+            setValues={setFormValues}
+            collection={true}
+          />
+
+          <p className="help-block mb-0">
+            {
+              gettext('You can reuse an answer from a similar question in any ' +
+                   'project you have access to.')
+            }
+          </p>
+        </div>
+      </Modal>
+    </>
+  )
 }
 
 QuestionReuseValues.propTypes = {
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js
index 961a361a5e..bc2e11a071 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionSuccess.js
@@ -4,9 +4,11 @@ import classNames from 'classnames'
 
 const QuestionSuccess = ({ value }) => {
   return (
-    <div className={classNames('success-indicator text-success', {
-      'show': value.success
-    })}>
+    <div className={
+      classNames('success-indicator text-success', {
+        'show': value.success
+      })
+    }>
       <i className="fa fa-check fa-btn" aria-hidden="true"></i>
     </div>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js
index f5d25c37d5..e4888567de 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionText.js
@@ -2,10 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { getQuestionTextId } from '../../../utils/question'
-
 import Html from 'rdmo/core/assets/js/components/Html'
 
+import { getQuestionTextId } from '../../../utils/question'
+
 const QuestionText = ({ question }) => {
   const classnames = classNames({
     'form-label': true,
diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionWidget.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionWidget.js
index e7bc82b52e..47ad03449c 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionWidget.js
@@ -7,8 +7,8 @@ import FileWidget from '../widget/FileWidget'
 import RadioWidget from '../widget/RadioWidget'
 import RangeWidget from '../widget/RangeWidget'
 import SelectWidget from '../widget/SelectWidget'
-import TextWidget from '../widget/TextWidget'
 import TextareaWidget from '../widget/TextareaWidget'
+import TextWidget from '../widget/TextWidget'
 import YesNoWidget from '../widget/YesNoWidget'
 
 const QuestionWidget = (props) => {
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
index a5a75b5643..fdd39dc9b2 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSet.js
@@ -15,9 +15,11 @@ import QuestionSetHelpTemplate from './QuestionSetHelpTemplate'
 import QuestionSetManagement from './QuestionSetManagement'
 import QuestionSetRemoveSet from './QuestionSetRemoveSet'
 
-const QuestionSet = ({ config, settings, templates, page, questionset, sets, values, disabled, isManager,
-                       parentSet, createSet, updateSet, deleteSet, copySet,
-                       createValue, updateValue, deleteValue, copyValue, fetchContact }) => {
+const QuestionSet = ({
+  config, settings, templates, page, questionset, sets, values, disabled, isManager,
+  parentSet, createSet, updateSet, deleteSet, copySet,
+  createValue, updateValue, deleteValue, copyValue, fetchContact
+}) => {
 
   const setPrefix = getChildPrefix(parentSet)
 
@@ -42,8 +44,19 @@ const QuestionSet = ({ config, settings, templates, page, questionset, sets, val
               currentSets.map((set, setIndex) => (
                 <div key={setIndex} className="interview-block">
                   <div className="interview-block-options">
-                    <QuestionSetCopySet questionset={questionset} sets={sets} currentSet={set} disabled={disabled} copySet={copySet} />
-                    <QuestionSetRemoveSet questionset={questionset} currentSet={set} disabled={disabled} deleteSet={deleteSet} />
+                    <QuestionSetCopySet
+                      questionset={questionset}
+                      sets={sets}
+                      currentSet={set}
+                      disabled={disabled}
+                      copySet={copySet}
+                    />
+                    <QuestionSetRemoveSet
+                      questionset={questionset}
+                      currentSet={set}
+                      disabled={disabled}
+                      deleteSet={deleteSet}
+                    />
                   </div>
                   <div className="row">
                     {
@@ -83,19 +96,25 @@ const QuestionSet = ({ config, settings, templates, page, questionset, sets, val
                                 templates={templates}
                                 page={page}
                                 question={element}
-                                sets={sets.filter((set) => (
-                                  set.set_prefix == setPrefix
-                                ))}
-                                values={values.filter((value) => (
-                                  value.attribute == element.attribute &&
-                                  value.set_prefix == set.set_prefix &&
-                                  value.set_index == set.set_index
-                                ))}
-                                siblings={values.filter((value) => (
-                                  value.attribute == element.attribute &&
-                                  value.set_prefix == set.set_prefix &&
-                                  value.set_index != set.set_index
-                                ))}
+                                sets={
+                                  sets.filter((set) => (
+                                    set.set_prefix == setPrefix
+                                  ))
+                                }
+                                values={
+                                  values.filter((value) => (
+                                    value.attribute == element.attribute &&
+                                    value.set_prefix == set.set_prefix &&
+                                    value.set_index == set.set_index
+                                  ))
+                                }
+                                siblings={
+                                  values.filter((value) => (
+                                    value.attribute == element.attribute &&
+                                    value.set_prefix == set.set_prefix &&
+                                    value.set_index != set.set_index
+                                  ))
+                                }
                                 disabled={disabled}
                                 isManager={isManager}
                                 currentSet={set}
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js
index fb00af9f0f..f5adb7dd4e 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetAddSet.js
@@ -15,9 +15,10 @@ const QuestionSetAddSet = ({ questionset, sets, setPrefix, disabled, createSet }
   }
 
   return !disabled && questionset.is_collection && (
-    <button type="button" className="btn btn-success btn-add-set"
-            title={'Add block'} aria-label={'Add block'}
-            onClick={handleClick}>
+    <button
+      type="button" className="btn btn-success btn-add-set"
+      title={'Add block'} aria-label={'Add block'}
+      onClick={handleClick}>
       <i className="fa fa-plus fa-btn" aria-hidden="true"></i> {upperFirst(questionset.verbose_name)}
     </button>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
index 6a6e2bc171..86741c9d93 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetCopySet.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Modal from 'rdmo/core/assets/js/components/Modal'
-
 import useModal from 'rdmo/core/assets/js/hooks/useModal'
 
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
 import { generateSetIndex } from '../../../utils/set'
 
 const QuestionCopySet = ({ questionset, sets, currentSet, disabled, copySet }) => {
@@ -22,15 +22,17 @@ const QuestionCopySet = ({ questionset, sets, currentSet, disabled, copySet }) =
 
   return !disabled && questionset.is_collection && (
     <>
-      <button type="button" className="btn btn-link btn-copy-set"
-              title={'Copy block'} aria-label={'Copy block'}
-              onClick={modal.open}>
+      <button
+        type="button" className="btn btn-link btn-copy-set"
+        title={'Copy block'} aria-label={'Copy block'}
+        onClick={modal.open}>
         <i className="fa fa-copy fa-btn" aria-hidden="true"></i>
       </button>
 
-      <Modal title={gettext('Copy block')} show={modal.show} submitLabel={gettext('Copy')}
-             submitProps={{className: 'btn btn-info'}}
-             onClose={modal.close} onSubmit={handleCopySet}>
+      <Modal
+        title={gettext('Copy block')} show={modal.show} submitLabel={gettext('Copy')}
+        submitProps={{className: 'btn btn-info'}}
+        onClose={modal.close} onSubmit={handleCopySet}>
       </Modal>
     </>
   )
diff --git a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
index 285b3f5fb9..3d1db41939 100644
--- a/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
+++ b/rdmo/projects/assets/js/interview/components/main/questionset/QuestionSetRemoveSet.js
@@ -16,15 +16,17 @@ const QuestionRemoveSet = ({ questionset, currentSet, disabled, deleteSet }) =>
 
   return !disabled && questionset.is_collection && (
     <>
-      <button type="button" className="btn btn-link btn-remove-set"
-              title={'Remove block'} aria-label={'Remove block'}
-              onClick={modal.open}>
+      <button
+        type="button" className="btn btn-link btn-remove-set"
+        title={'Remove block'} aria-label={'Remove block'}
+        onClick={modal.open}>
         <i className="fa fa-times fa-btn" aria-hidden="true"></i>
       </button>
 
-      <Modal title={gettext('Remove block')} show={modal.show} submitLabel={gettext('Remove')}
-             submitProps={{className: 'btn btn-danger'}}
-             onClose={modal.close} onSubmit={handleRemoveSet}>
+      <Modal
+        title={gettext('Remove block')} show={modal.show} submitLabel={gettext('Remove')}
+        submitProps={{className: 'btn btn-danger'}}
+        onClose={modal.close} onSubmit={handleRemoveSet}>
         <p>{gettext('You are about to permanently remove this block.')}</p>
         <p className="text-danger">{gettext('This action cannot be undone!')}</p>
       </Modal>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
index 026599b8e5..3869aa1e24 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxInput.js
@@ -8,8 +8,8 @@ import useAdditionalInputs from '../../../hooks/useAdditionalInputs'
 import useAdjustLabel from '../../../hooks/useAdjustLabel'
 import useIdle from '../../../hooks/useIdle'
 
-import AdditionalTextInput from './common/AdditionalTextInput'
 import AdditionalTextareaInput from './common/AdditionalTextareaInput'
+import AdditionalTextInput from './common/AdditionalTextInput'
 import OptionHelp from './common/OptionHelp'
 import OptionText from './common/OptionText'
 
@@ -28,7 +28,7 @@ const CheckboxInput = ({ question, value, option, optionIndex, disabled, onCreat
   })
 
   const handleCreate = (option, optionIndex, additionalInput) => {
-  if (option.has_provider) {
+    if (option.has_provider) {
       onCreate([{
         external_id: option.id,
         text: option.text,
@@ -103,10 +103,12 @@ const CheckboxInput = ({ question, value, option, optionIndex, disabled, onCreat
                 className="ml-10"
                 inputValue={getAdditionalInput(option)}
                 disabled={disabled}
-                onChange={(additionalInput) => {
-                  setAdditionalInput(option, additionalInput)
-                  handleAdditionalInputChange(value, option, additionalInput)
-                }}
+                onChange={
+                  (additionalInput) => {
+                    setAdditionalInput(option, additionalInput)
+                    handleAdditionalInputChange(value, option, additionalInput)
+                  }
+                }
               />
               <OptionHelp className="ml-10" option={option} />
             </>
@@ -119,10 +121,12 @@ const CheckboxInput = ({ question, value, option, optionIndex, disabled, onCreat
               <AdditionalTextareaInput
                 inputValue={getAdditionalInput(option)}
                 disabled={disabled}
-                onChange={(additionalInput) => {
-                  setAdditionalInput(option, additionalInput)
-                  handleAdditionalInputChange(value, option, additionalInput)
-                }}
+                onChange={
+                  (additionalInput) => {
+                    setAdditionalInput(option, additionalInput)
+                    handleAdditionalInputChange(value, option, additionalInput)
+                  }
+                }
               />
               <div>
                 <OptionHelp option={option} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
index c5d7721556..1c0b830171 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/CheckboxWidget.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
 import { gatherOptions } from '../../../utils/options'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
 
 import QuestionCopyValues from '../question/QuestionCopyValues'
 import QuestionEraseValues from '../question/QuestionEraseValues'
@@ -12,8 +12,10 @@ import QuestionSuccess from '../question/QuestionSuccess'
 
 import CheckboxInput from './CheckboxInput'
 
-const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, disabled,
-                          createValue, updateValue, deleteValue, copyValue }) => {
+const CheckboxWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
 
   const handleCreateValue = (attrsList) => {
     attrsList.forEach(attrs => {
@@ -36,9 +38,10 @@ const CheckboxWidget = ({ page, question, sets, values, siblings, currentSet, di
       <div className="interview-widget">
         <div className="interview-input checkbox-input">
           <div className="buttons-wrapper">
-            <fieldset className="checkbox-control"
-                      aria-labelledby={getQuestionTextId(question)}
-                      aria-describedby={getQuestionHelpId(question)}>
+            <fieldset
+              className="checkbox-control"
+              aria-labelledby={getQuestionTextId(question)}
+              aria-describedby={getQuestionHelpId(question)}>
               {
                 gatherOptions(question, currentSet).map((option, optionIndex) => {
                   const value = values.find((value) => (
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
index 917e745a9d..91297b92a5 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/DateInput.js
@@ -8,7 +8,7 @@ import { isEmpty } from 'lodash'
 
 import { getDateFormat, getLocale, parseDate } from 'rdmo/core/assets/js/utils/date'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
 import { isDefaultValue } from '../../../utils/value'
 
 const DateInput = ({ question, value, disabled, updateValue, buttons }) => {
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
index f31db081c1..bc29011618 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/DateWidget.js
@@ -13,8 +13,10 @@ import QuestionSuccess from '../question/QuestionSuccess'
 
 import DateInput from './DateInput'
 
-const DateWidget = ({ page, question, sets, values, siblings, currentSet, disabled,
-                      createValue, updateValue, deleteValue, copyValue }) => {
+const DateWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
   return (
     <div className="interview-widgets">
       {
@@ -27,26 +29,28 @@ const DateWidget = ({ page, question, sets, values, siblings, currentSet, disabl
                 disabled={disabled}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionReuseValue
-                      page={page}
-                      question={question}
-                      value={value}
-                      disabled={disabled}
-                      updateValue={updateValue}
-                    />
-                    <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
-                    <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionReuseValue
+                        page={page}
+                        question={question}
+                        value={value}
+                        disabled={disabled}
+                        updateValue={updateValue}
+                      />
+                      <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
+                      <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
index 4fd21c1fa2..b73991e7d6 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/FileInput.js
@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames'
 import { useDropzone } from 'react-dropzone'
+import classNames from 'classnames'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
 
 const FileInput = ({ question, value, disabled, updateValue, buttons }) => {
   const onDrop = useCallback(acceptedFiles => {
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js
index 8e37767774..a68521b218 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/FileWidget.js
@@ -23,18 +23,20 @@ const FileWidget = ({ question, values, currentSet, disabled, createValue, updat
                 disabled={disabled}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
index 28a22ffa54..3722e4005a 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RadioInput.js
@@ -4,14 +4,13 @@ import classNames from 'classnames'
 import { useDebouncedCallback } from 'use-debounce'
 import { isEmpty } from 'lodash'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
-import { isDefaultValue } from '../../../utils/value'
-
 import useAdditionalInputs from '../../../hooks/useAdditionalInputs'
 import useAdjustLabel from '../../../hooks/useAdjustLabel'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
+import { isDefaultValue } from '../../../utils/value'
 
-import AdditionalTextInput from './common/AdditionalTextInput'
 import AdditionalTextareaInput from './common/AdditionalTextareaInput'
+import AdditionalTextInput from './common/AdditionalTextInput'
 import OptionHelp from './common/OptionHelp'
 import OptionText from './common/OptionText'
 
@@ -60,9 +59,10 @@ const RadioInput = ({ question, value, options, disabled, updateValue, buttons }
     <div ref={ref} className="interview-input radio-input">
       <div className="buttons-wrapper">
         {buttons}
-        <fieldset className={classnames}
-                  aria-labelledby={getQuestionTextId(question)}
-                  aria-describedby={getQuestionHelpId(question)}>
+        <fieldset
+          className={classnames}
+          aria-labelledby={getQuestionTextId(question)}
+          aria-describedby={getQuestionHelpId(question)}>
           {
             isEmpty(options) ? (
               <div className="text-muted">{gettext('No options are available.')}</div>
@@ -91,10 +91,12 @@ const RadioInput = ({ question, value, options, disabled, updateValue, buttons }
                             className="ml-10"
                             inputValue={getAdditionalInput(option)}
                             disabled={disabled}
-                            onChange={(additionalInput) => {
-                              setAdditionalInput(option, additionalInput)
-                              handleAdditionalInputChange(value, option, additionalInput)
-                            }}
+                            onChange={
+                              (additionalInput) => {
+                                setAdditionalInput(option, additionalInput)
+                                handleAdditionalInputChange(value, option, additionalInput)
+                              }
+                            }
                           />
                           <OptionHelp className="ml-10" option={option} />
                         </>
@@ -107,10 +109,12 @@ const RadioInput = ({ question, value, options, disabled, updateValue, buttons }
                           <AdditionalTextareaInput
                             inputValue={getAdditionalInput(option)}
                             disabled={disabled}
-                            onChange={(additionalInput) => {
-                              setAdditionalInput(option, additionalInput)
-                              handleAdditionalInputChange(value, option, additionalInput)
-                            }}
+                            onChange={
+                              (additionalInput) => {
+                                setAdditionalInput(option, additionalInput)
+                                handleAdditionalInputChange(value, option, additionalInput)
+                              }
+                            }
                           />
                           <div>
                             <OptionHelp option={option} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
index 76d3bede3c..bf80b590d3 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RadioWidget.js
@@ -15,8 +15,10 @@ import QuestionSuccess from '../question/QuestionSuccess'
 
 import RadioInput from './RadioInput'
 
-const RadioWidget = ({ page, question, sets, values, siblings, currentSet, disabled,
-                       createValue, updateValue, deleteValue, copyValue }) => {
+const RadioWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
   return (
     <div className="interview-widgets">
       {
@@ -30,26 +32,28 @@ const RadioWidget = ({ page, question, sets, values, siblings, currentSet, disab
                 disabled={disabled}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionReuseValue
-                      page={page}
-                      question={question}
-                      value={value}
-                      disabled={disabled}
-                      updateValue={updateValue}
-                    />
-                    <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
-                    <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionReuseValue
+                        page={page}
+                        question={question}
+                        value={value}
+                        disabled={disabled}
+                        updateValue={updateValue}
+                      />
+                      <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
+                      <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
index 28b749d213..0840a2aa98 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeInput.js
@@ -1,10 +1,10 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
-import { useDebouncedCallback } from 'use-debounce'
 import classNames from 'classnames'
+import { useDebouncedCallback } from 'use-debounce'
 import { isNil, toString } from 'lodash'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
 import { isDefaultValue } from '../../../utils/value'
 
 import Unit from './common/Unit'
@@ -63,10 +63,12 @@ const RangeInput = ({ question, value, disabled, updateValue, buttons }) => {
         aria-describedby={getQuestionHelpId(question)}
         disabled={disabled}
         value={inputValue}
-        onChange={(event) => {
-          setInputValue(event.target.value)
-          handleChange(value, event.target.value)
-        }}
+        onChange={
+          (event) => {
+            setInputValue(event.target.value)
+            handleChange(value, event.target.value)
+          }
+        }
       />
       <Unit unit={question.unit} inputValue={inputValue} />
       {buttons}
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
index 966ef71eb1..0352fbbbb2 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/RangeWidget.js
@@ -15,8 +15,10 @@ import QuestionSuccess from '../question/QuestionSuccess'
 
 import RangeInput from './RangeInput'
 
-const RangeWidget = ({ page, question, sets, values, siblings, currentSet, disabled,
-                       createValue, updateValue, deleteValue, copyValue }) => {
+const RangeWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
 
   const handleCreateValue = (value) => {
     initRange(question, value)
@@ -40,26 +42,28 @@ const RangeWidget = ({ page, question, sets, values, siblings, currentSet, disab
                 disabled={disabled}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionReuseValue
-                      page={page}
-                      question={question}
-                      value={value}
-                      disabled={disabled}
-                      updateValue={updateValue}
-                    />
-                    <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
-                    <QuestionEraseValue value={value} disabled={disabled} updateValue={handleEraseValue}/>
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionReuseValue
+                        page={page}
+                        question={question}
+                        value={value}
+                        disabled={disabled}
+                        updateValue={updateValue}
+                      />
+                      <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
+                      <QuestionEraseValue value={value} disabled={disabled} updateValue={handleEraseValue}/>
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
index ea5362ac6d..c10d9dc7ee 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectInput.js
@@ -1,19 +1,19 @@
 import React, { useState } from 'react'
+import PropTypes from 'prop-types'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
-import CreatableSelect from 'react-select/creatable'
 import CreatableAsyncSelect from 'react-select/async-creatable'
-
-import PropTypes from 'prop-types'
+import CreatableSelect from 'react-select/creatable'
 import classNames from 'classnames'
-import { isEmpty, isNil } from 'lodash'
 import { useDebouncedCallback } from 'use-debounce'
+import { isEmpty, isNil } from 'lodash'
 
-import ProjectApi from '../../../api/ProjectApi'
 import { projectId } from '../../../utils/meta'
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
-import { isDefaultValue } from '../../../utils/value'
 import { getValueOption } from '../../../utils/options'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
+import { isDefaultValue } from '../../../utils/value'
+
+import ProjectApi from '../../../api/ProjectApi'
 
 import OptionHelp from './common/OptionHelp'
 import OptionText from './common/OptionText'
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/SelectValueContainer.js b/rdmo/projects/assets/js/interview/components/main/widget/SelectValueContainer.js
index a063be8d60..1a9daae450 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectValueContainer.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectValueContainer.js
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { components } from 'react-select'
 
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
index 10d18b8be9..70f51d5541 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/SelectWidget.js
@@ -15,8 +15,10 @@ import QuestionSuccess from '../question/QuestionSuccess'
 
 import SelectInput from './SelectInput'
 
-const SelectWidget = ({ page, question, sets, values, siblings, currentSet, disabled, creatable,
-                        createValue, updateValue, deleteValue, copyValue }) => {
+const SelectWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled, creatable,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
   return (
     <div className="interview-widgets">
       {
@@ -31,26 +33,28 @@ const SelectWidget = ({ page, question, sets, values, siblings, currentSet, disa
                 creatable={creatable}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionReuseValue
-                      page={page}
-                      question={question}
-                      value={value}
-                      disabled={disabled}
-                      updateValue={updateValue}
-                    />
-                    <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
-                    <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionReuseValue
+                        page={page}
+                        question={question}
+                        value={value}
+                        disabled={disabled}
+                        updateValue={updateValue}
+                      />
+                      <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
+                      <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
index ed541f978a..672fd95343 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextInput.js
@@ -1,12 +1,11 @@
-import React, { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useDebouncedCallback } from 'use-debounce'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
-import { isDefaultValue } from '../../../utils/value'
-
 import useFocusEffect from '../../../hooks/useFocusEffect'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
+import { isDefaultValue } from '../../../utils/value'
 
 import Unit from './common/Unit'
 
@@ -45,10 +44,12 @@ const TextInput = ({ question, value, disabled, updateValue, buttons }) => {
           aria-labelledby={getQuestionTextId(question)}
           aria-describedby={getQuestionHelpId(question)}
           value={inputValue}
-          onChange={(event) => {
-            setInputValue(event.target.value)
-            handleChange(value, event.target.value)
-          }}
+          onChange={
+            (event) => {
+              setInputValue(event.target.value)
+              handleChange(value, event.target.value)
+            }
+          }
         />
       </div>
       <Unit unit={question.unit} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
index 704c5e0738..37ec1be3a5 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextWidget.js
@@ -6,14 +6,16 @@ import QuestionCopyValue from '../question/QuestionCopyValue'
 import QuestionCopyValues from '../question/QuestionCopyValues'
 import QuestionDefault from '../question/QuestionDefault'
 import QuestionError from '../question/QuestionError'
-import QuestionReuseValue from '../question/QuestionReuseValue'
 import QuestionRemoveValue from '../question/QuestionRemoveValue'
+import QuestionReuseValue from '../question/QuestionReuseValue'
 import QuestionSuccess from '../question/QuestionSuccess'
 
 import TextInput from './TextInput'
 
-const TextWidget = ({ page, question, sets, values, siblings, currentSet, disabled,
-                      createValue, updateValue, deleteValue, copyValue }) => {
+const TextWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
   return (
     <div className="interview-widgets">
       {
@@ -26,25 +28,27 @@ const TextWidget = ({ page, question, sets, values, siblings, currentSet, disabl
                 disabled={disabled}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionReuseValue
-                      page={page}
-                      question={question}
-                      value={value}
-                      disabled={disabled}
-                      updateValue={updateValue}
-                    />
-                    <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionReuseValue
+                        page={page}
+                        question={question}
+                        value={value}
+                        disabled={disabled}
+                        updateValue={updateValue}
+                      />
+                      <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
index 51634dc8ca..02a0a3532c 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextareaInput.js
@@ -1,12 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { useDebouncedCallback } from 'use-debounce'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
-import { isDefaultValue } from '../../../utils/value'
-
 import useFocusEffect from '../../../hooks/useFocusEffect'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
+import { isDefaultValue } from '../../../utils/value'
 
 import Unit from './common/Unit'
 
@@ -37,10 +36,12 @@ const TextareaInput = ({ question, value, disabled, updateValue, buttons }) => {
           aria-labelledby={getQuestionTextId(question)}
           aria-describedby={getQuestionHelpId(question)}
           value={inputValue}
-          onChange={(event) => {
-            setInputValue(event.target.value)
-            handleChange(value, event.target.value)
-          }}
+          onChange={
+            (event) => {
+              setInputValue(event.target.value)
+              handleChange(value, event.target.value)
+            }
+          }
         />
         {buttons}
       </div>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
index b80aa7f09b..87b148baf5 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/TextareaWidget.js
@@ -12,8 +12,10 @@ import QuestionSuccess from '../question/QuestionSuccess'
 
 import TextareaInput from './TextareaInput'
 
-const TextareaWidget = ({ page, question, sets, values, siblings, currentSet, disabled,
-                          createValue, updateValue, deleteValue, copyValue }) => {
+const TextareaWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
   return (
     <div className="interview-widgets">
       {
@@ -26,25 +28,27 @@ const TextareaWidget = ({ page, question, sets, values, siblings, currentSet, di
                 disabled={disabled}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionReuseValue
-                      page={page}
-                      question={question}
-                      value={value}
-                      disabled={disabled}
-                      updateValue={updateValue}
-                    />
-                    <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionReuseValue
+                        page={page}
+                        question={question}
+                        value={value}
+                        disabled={disabled}
+                        updateValue={updateValue}
+                      />
+                      <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
index b3a61cf5de..a8c514c29c 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/YesNoInput.js
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { getQuestionTextId, getQuestionHelpId } from '../../../utils/question'
+import { getQuestionHelpId, getQuestionTextId } from '../../../utils/question'
 import { isDefaultValue } from '../../../utils/value'
 
 import Unit from './common/Unit'
@@ -24,32 +24,37 @@ const YesNoInput = ({ question, value, disabled, updateValue, buttons }) => {
     <div className="interview-input yesno-input">
       <div className="buttons-wrapper">
         {buttons}
-        <fieldset className={classnames}
-                  aria-labelledby={getQuestionTextId(question)}
-                  aria-describedby={getQuestionHelpId(question)}>
+        <fieldset
+          className={classnames}
+          aria-labelledby={getQuestionTextId(question)}
+          aria-describedby={getQuestionHelpId(question)}>
           <label>
-              <input
-                type="radio"
-                value="1"
-                disabled={disabled}
-                checked={inputValue == '1'}
-                onChange={(event) => {
+            <input
+              type="radio"
+              value="1"
+              disabled={disabled}
+              checked={inputValue == '1'}
+              onChange={
+                (event) => {
                   setInputValue(event.target.value)
                   handleChange(value, event.target.value)
-                }} />
-              <span>{gettext('Yes')}</span>
+                }
+              } />
+            <span>{gettext('Yes')}</span>
           </label>
           <label>
-              <input
-                type="radio"
-                value="0"
-                checked={inputValue == '0'}
-                disabled={disabled}
-                onChange={(event) => {
+            <input
+              type="radio"
+              value="0"
+              checked={inputValue == '0'}
+              disabled={disabled}
+              onChange={
+                (event) => {
                   setInputValue(event.target.value)
                   handleChange(value, event.target.value)
-                }} />
-              <span>{gettext('No')}</span>
+                }
+              } />
+            <span>{gettext('No')}</span>
           </label>
         </fieldset>
       </div>
diff --git a/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js b/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
index e26fb903af..64486d1e0d 100644
--- a/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
+++ b/rdmo/projects/assets/js/interview/components/main/widget/YesNoWidget.js
@@ -13,8 +13,10 @@ import QuestionSuccess from '../question/QuestionSuccess'
 
 import YesNoInput from './YesNoInput'
 
-const YesNoWidget = ({ page, question, sets, values, siblings, currentSet, disabled,
-                       createValue, updateValue, deleteValue, copyValue }) => {
+const YesNoWidget = ({
+  page, question, sets, values, siblings, currentSet, disabled,
+  createValue, updateValue, deleteValue, copyValue
+}) => {
   return (
     <div className="interview-widgets">
       {
@@ -27,26 +29,28 @@ const YesNoWidget = ({ page, question, sets, values, siblings, currentSet, disab
                 disabled={disabled}
                 updateValue={updateValue}
                 buttons={
-                  <div className="buttons">
-                    <QuestionSuccess value={value}/>
-                    <QuestionReuseValue
-                      page={page}
-                      question={question}
-                      value={value}
-                      disabled={disabled}
-                      updateValue={updateValue}
-                    />
-                    <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
-                    <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
-                    <QuestionRemoveValue
-                      question={question}
-                      values={values}
-                      value={value}
-                      disabled={disabled}
-                      deleteValue={deleteValue}
-                    />
-                    <QuestionDefault question={question} value={value} />
-                  </div>
+                  (
+                    <div className="buttons">
+                      <QuestionSuccess value={value}/>
+                      <QuestionReuseValue
+                        page={page}
+                        question={question}
+                        value={value}
+                        disabled={disabled}
+                        updateValue={updateValue}
+                      />
+                      <QuestionCopyValue question={question} value={value} siblings={siblings} copyValue={copyValue} />
+                      <QuestionEraseValue value={value} disabled={disabled} updateValue={updateValue}/>
+                      <QuestionRemoveValue
+                        question={question}
+                        values={values}
+                        value={value}
+                        disabled={disabled}
+                        deleteValue={deleteValue}
+                      />
+                      <QuestionDefault question={question} value={value} />
+                    </div>
+                  )
                 }
               />
               <QuestionError value={value} />
diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js b/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js
index 0ead61f78e..0e5592a97b 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Buttons.js
@@ -10,15 +10,17 @@ const Buttons = ({ next, prev, help, fetchPage }) => {
 
       <div className="interview-buttons">
         <div className="pull-right">
-          <button type="button" onClick={() => fetchPage(next)} disabled={!next}
-                  className="btn btn-default btn-xs">
+          <button
+            type="button" onClick={() => fetchPage(next)} disabled={!next}
+            className="btn btn-default btn-xs">
             {gettext('Proceed')}
           </button>
         </div>
 
         <div>
-          <button type="button" onClick={() => fetchPage(prev, true)} disabled={!prev}
-                  className="btn btn-default btn-xs">
+          <button
+            type="button" onClick={() => fetchPage(prev, true)} disabled={!prev}
+            className="btn btn-default btn-xs">
             {gettext('Back')}
           </button>
         </div>
diff --git a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
index c7f5826aa5..0bbf632516 100644
--- a/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
+++ b/rdmo/projects/assets/js/interview/components/sidebar/Navigation.js
@@ -15,40 +15,41 @@ const Navigation = ({ overview, currentPage, navigation, help, fetchPage }) => {
       <ul className="list-unstyled interview-navigation">
         {
           navigation.map((section, sectionIndex) => (
-              <li key={sectionIndex}>
-                <NavigationLink
-                  element={section}
-                  href={`/projects/${overview.id}/interview/${section.first}/`}
-                  onClick={() => fetchPage(section.first)}
-                />
-                {
-                  section.pages && (
-                    <ul className="list-unstyled">
-                      {
-                        section.pages.map((page, pageIndex) => (
-                            <li key={pageIndex} className={classNames({
-                              'active': currentPage ? page.id == currentPage.id : false})
-                            }>
-                              {
-                                page.show ? (
-                                  <NavigationLink
-                                    element={page}
-                                    href={`/projects/${overview.id}/interview/${page.id}/`}
-                                    onClick={() => fetchPage(page.id)}
-                                  />
-                                ) : (
-                                  <span className="text-muted">{page.title}</span>
-                                )
-                              }
-                            </li>
-                          )
-                        )
-                      }
-                    </ul>
-                  )
-                }
-              </li>
-            )
+            <li key={sectionIndex}>
+              <NavigationLink
+                element={section}
+                href={`/projects/${overview.id}/interview/${section.first}/`}
+                onClick={() => fetchPage(section.first)}
+              />
+              {
+                section.pages && (
+                  <ul className="list-unstyled">
+                    {
+                      section.pages.map((page, pageIndex) => (
+                        <li
+                          key={pageIndex} className={
+                            classNames({'active': currentPage ? page.id == currentPage.id : false})
+                          }>
+                          {
+                            page.show ? (
+                              <NavigationLink
+                                element={page}
+                                href={`/projects/${overview.id}/interview/${page.id}/`}
+                                onClick={() => fetchPage(page.id)}
+                              />
+                            ) : (
+                              <span className="text-muted">{page.title}</span>
+                            )
+                          }
+                        </li>
+                      )
+                      )
+                    }
+                  </ul>
+                )
+              }
+            </li>
+          )
           )
         }
       </ul>
diff --git a/rdmo/projects/assets/js/interview/constants/management.js b/rdmo/projects/assets/js/interview/constants/management.js
index c6d90e5783..601fe762ff 100644
--- a/rdmo/projects/assets/js/interview/constants/management.js
+++ b/rdmo/projects/assets/js/interview/constants/management.js
@@ -1,6 +1,6 @@
 export const managementHelp = gettext(
-    'These links take you directly to the elements in the management interface. ' +
-    ' This part of the page is visible to you, because you are either an Admin, ' +
-    ' Editor, or Reviewer. It is not displayed for regular users. It can be disabled' +
-    ' in the sidebar.'
+  'These links take you directly to the elements in the management interface. ' +
+  'This part of the page is visible to you, because you are either an Admin, ' +
+  'Editor, or Reviewer. It is not displayed for regular users. It can be disabled ' +
+  'in the sidebar.'
 )
diff --git a/rdmo/projects/assets/js/interview/containers/Main.js b/rdmo/projects/assets/js/interview/containers/Main.js
index 5fb0ada894..713915ba42 100644
--- a/rdmo/projects/assets/js/interview/containers/Main.js
+++ b/rdmo/projects/assets/js/interview/containers/Main.js
@@ -1,23 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
 
+import * as contactActions from '../actions/contactActions'
+import * as interviewActions from '../actions/interviewActions'
 import { hasErrors, isReady } from '../utils/interview'
 
 import Breadcrumb from '../components/main/Breadcrumb'
 import Contact from '../components/main/Contact'
 import Done from '../components/main/Done'
-import Page from '../components/main/page/Page'
 import Errors from '../components/main/Errors'
+import Page from '../components/main/page/Page'
 
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-
-import * as contactActions from '../actions/contactActions'
-import * as interviewActions from '../actions/interviewActions'
-
-const Main = ({ config, settings, templates, project, interview, contact,
-                interviewActions, contactActions }) => {
+const Main = ({
+  config, settings, templates, project, interview, contact,
+  interviewActions, contactActions
+}) => {
 
   if (hasErrors(project, interview)) {
     return (
diff --git a/rdmo/projects/assets/js/interview/containers/Sidebar.js b/rdmo/projects/assets/js/interview/containers/Sidebar.js
index 19b2ce762c..75e76aabe1 100644
--- a/rdmo/projects/assets/js/interview/containers/Sidebar.js
+++ b/rdmo/projects/assets/js/interview/containers/Sidebar.js
@@ -1,21 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
 
-import { isReady } from '../utils/interview'
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
 
 import Html from 'rdmo/core/assets/js/components/Html'
 
+import * as interviewActions from '../actions/interviewActions'
+import { isReady } from '../utils/interview'
+
 import Buttons from '../components/sidebar/Buttons'
 import Navigation from '../components/sidebar/Navigation'
 import Overview from '../components/sidebar/Overview'
 import Progress from '../components/sidebar/Progress'
 
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-
-import * as interviewActions from '../actions/interviewActions'
-
 // eslint-disable-next-line no-unused-vars
 const Sidebar = ({ config, settings, templates, user, project, interview, configActions, interviewActions }) => {
   if (isReady(interview)) {
diff --git a/rdmo/projects/assets/js/interview/factories/ValueFactory.js b/rdmo/projects/assets/js/interview/factories/ValueFactory.js
index 326fea6c1c..f47b931820 100644
--- a/rdmo/projects/assets/js/interview/factories/ValueFactory.js
+++ b/rdmo/projects/assets/js/interview/factories/ValueFactory.js
@@ -4,8 +4,10 @@ import { projectId } from '../utils/meta'
 
 class ValueFactory {
 
-  static create({ attribute, set_prefix, set_index, collection_index, set_collection,
-                  text, option, file, external_id, unit, value_type }) {
+  static create({
+    attribute, set_prefix, set_index, collection_index, set_collection,
+    text, option, file, external_id, unit, value_type
+  }) {
     const value = {
       tmp_id: uniqueId('tmp_'),
       project: projectId,
diff --git a/rdmo/projects/assets/js/interview/hooks/useAdditionalInputs.js b/rdmo/projects/assets/js/interview/hooks/useAdditionalInputs.js
index a3be4a2558..4d5bfc9e41 100644
--- a/rdmo/projects/assets/js/interview/hooks/useAdditionalInputs.js
+++ b/rdmo/projects/assets/js/interview/hooks/useAdditionalInputs.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { get, isNil } from 'lodash'
 
 const useAdditionalInputs = (value, options) => {
diff --git a/rdmo/projects/assets/js/interview/hooks/useFocusEffect.js b/rdmo/projects/assets/js/interview/hooks/useFocusEffect.js
index ca5eedc190..80f06ad3d5 100644
--- a/rdmo/projects/assets/js/interview/hooks/useFocusEffect.js
+++ b/rdmo/projects/assets/js/interview/hooks/useFocusEffect.js
@@ -1,6 +1,5 @@
-import { isNil } from 'lodash'
-
 import { useEffect } from 'react'
+import { isNil } from 'lodash'
 
 const useFocusEffect = (ref, show) => {
   useEffect(() => {
diff --git a/rdmo/projects/assets/js/interview/hooks/useIdle.js b/rdmo/projects/assets/js/interview/hooks/useIdle.js
index 80c03d700f..aca5e8c938 100644
--- a/rdmo/projects/assets/js/interview/hooks/useIdle.js
+++ b/rdmo/projects/assets/js/interview/hooks/useIdle.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 const useIdle = (dependencies) => {
   const [idle, setIdle] = useState(true)
diff --git a/rdmo/projects/assets/js/interview/reducers/contactReducer.js b/rdmo/projects/assets/js/interview/reducers/contactReducer.js
index 013efec3b8..c638b293a7 100644
--- a/rdmo/projects/assets/js/interview/reducers/contactReducer.js
+++ b/rdmo/projects/assets/js/interview/reducers/contactReducer.js
@@ -1,11 +1,11 @@
 import {
+  CLOSE_CONTACT,
+  FETCH_CONTACT_ERROR,
   FETCH_CONTACT_INIT,
   FETCH_CONTACT_SUCCESS,
-  FETCH_CONTACT_ERROR,
-  SEND_CONTACT_INIT,
-  SEND_CONTACT_SUCCESS,
   SEND_CONTACT_ERROR,
-  CLOSE_CONTACT
+  SEND_CONTACT_INIT,
+  SEND_CONTACT_SUCCESS
 } from '../actions/actionTypes'
 
 const initialState = {
diff --git a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
index 5d7d15c3e2..9293b3e899 100644
--- a/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
+++ b/rdmo/projects/assets/js/interview/reducers/interviewReducer.js
@@ -1,34 +1,34 @@
 import {
-  FETCH_PAGE_INIT,
-  FETCH_PAGE_SUCCESS,
-  FETCH_PAGE_ERROR,
+  COPY_SET_ERROR,
+  COPY_SET_INIT,
+  COPY_SET_SUCCESS,
+  CREATE_SET,
+  CREATE_VALUE,
+  DELETE_SET_ERROR,
+  DELETE_SET_INIT,
+  DELETE_SET_SUCCESS,
+  DELETE_VALUE_ERROR,
+  DELETE_VALUE_INIT,
+  DELETE_VALUE_SUCCESS,
+  FETCH_NAVIGATION_ERROR,
   FETCH_NAVIGATION_INIT,
   FETCH_NAVIGATION_SUCCESS,
-  FETCH_NAVIGATION_ERROR,
+  FETCH_OPTIONS_ERROR,
   FETCH_OPTIONS_INIT,
   FETCH_OPTIONS_SUCCESS,
-  FETCH_OPTIONS_ERROR,
+  FETCH_PAGE_ERROR,
+  FETCH_PAGE_INIT,
+  FETCH_PAGE_SUCCESS,
+  FETCH_VALUES_ERROR,
   FETCH_VALUES_INIT,
   FETCH_VALUES_SUCCESS,
-  FETCH_VALUES_ERROR,
+  RESOLVE_CONDITION_ERROR,
   RESOLVE_CONDITION_INIT,
   RESOLVE_CONDITION_SUCCESS,
-  RESOLVE_CONDITION_ERROR,
-  CREATE_VALUE,
-  UPDATE_VALUE,
+  STORE_VALUE_ERROR,
   STORE_VALUE_INIT,
   STORE_VALUE_SUCCESS,
-  STORE_VALUE_ERROR,
-  DELETE_VALUE_INIT,
-  DELETE_VALUE_SUCCESS,
-  DELETE_VALUE_ERROR,
-  CREATE_SET,
-  DELETE_SET_INIT,
-  DELETE_SET_SUCCESS,
-  DELETE_SET_ERROR,
-  COPY_SET_INIT,
-  COPY_SET_SUCCESS,
-  COPY_SET_ERROR
+  UPDATE_VALUE
 } from '../actions/actionTypes'
 
 const initialState = {
@@ -52,20 +52,26 @@ export default function interviewReducer(state = initialState, action) {
     case FETCH_OPTIONS_SUCCESS:
       return { ...state, page: action.page }
     case RESOLVE_CONDITION_SUCCESS:
-      return { ...state, sets: state.sets.map(
-        (set) => (
-          (set.set_prefix == action.set.set_prefix) &&
+      return {
+        ...state,
+        sets: state.sets.map(
+          (set) => (
+            (set.set_prefix == action.set.set_prefix) &&
           (set.set_index == action.set.set_index)
-        ) ? {
-          ...set, [action.elementType]: {...set[action.elementType], [action.elementId]: action.result}
-        } : set
-      )}
+          ) ? {
+              ...set, [action.elementType]: {...set[action.elementType], [action.elementId]: action.result}
+            } : set
+        )
+      }
     case CREATE_VALUE:
       return { ...state, values: [...state.values, action.value] }
     case UPDATE_VALUE:
-      return { ...state, values: state.values.map(
-        (value) => value.id == action.value.id ? {...value, ...action.attrs} : value
-      )}
+      return {
+        ...state,
+        values: state.values.map(
+          (value) => value.id == action.value.id ? {...value, ...action.attrs} : value
+        )
+      }
     case STORE_VALUE_SUCCESS:
       if (state.values.some((value) => (value.id || value.tmp_id) == action.valueId)) {
         return {
@@ -101,14 +107,14 @@ export default function interviewReducer(state = initialState, action) {
     case RESOLVE_CONDITION_INIT:
       return { ...state, errors: [] }
     case STORE_VALUE_INIT:
-       return {
+      return {
         ...state,
         values: state.values.map((value) => (
           (value.id || value.tmp_id) == action.valueId ? {...value, error: null, pending: true} : value
         ))
       }
     case DELETE_VALUE_INIT:
-       return {
+      return {
         ...state,
         values: state.values.map((value) => (
           (value.id || value.tmp_id) == action.valueId ? {...value, pending: true} : value
@@ -125,8 +131,9 @@ export default function interviewReducer(state = initialState, action) {
       return { ...state, errors: [...state.errors, { actionType: action.type, ...action.error }] }
     case STORE_VALUE_ERROR:
       if (action.valueIndex > -1) {
-         return {
-          ...state, values: state.values.map((value, valueIndex) => (
+        return {
+          ...state,
+          values: state.values.map((value, valueIndex) => (
             valueIndex == action.valueIndex ? {...value, error: action.error, pending: false} : value
           ))
         }
diff --git a/rdmo/projects/assets/js/interview/reducers/projectReducer.js b/rdmo/projects/assets/js/interview/reducers/projectReducer.js
index 9c76494822..18e49c705f 100644
--- a/rdmo/projects/assets/js/interview/reducers/projectReducer.js
+++ b/rdmo/projects/assets/js/interview/reducers/projectReducer.js
@@ -1,13 +1,13 @@
 import {
+  FETCH_OVERVIEW_ERROR,
   FETCH_OVERVIEW_INIT,
   FETCH_OVERVIEW_SUCCESS,
-  FETCH_OVERVIEW_ERROR,
+  FETCH_PROGRESS_ERROR,
   FETCH_PROGRESS_INIT,
   FETCH_PROGRESS_SUCCESS,
-  FETCH_PROGRESS_ERROR,
+  UPDATE_PROGRESS_ERROR,
   UPDATE_PROGRESS_INIT,
   UPDATE_PROGRESS_SUCCESS,
-  UPDATE_PROGRESS_ERROR,
 } from '../actions/actionTypes'
 
 const initialState = {
diff --git a/rdmo/projects/assets/js/interview/store/configureStore.js b/rdmo/projects/assets/js/interview/store/configureStore.js
index afc28b9975..f0c5269f0c 100644
--- a/rdmo/projects/assets/js/interview/store/configureStore.js
+++ b/rdmo/projects/assets/js/interview/store/configureStore.js
@@ -1,26 +1,22 @@
-import { applyMiddleware, createStore, combineReducers } from 'redux'
-
-import { getConfigFromLocalStorage, isTruthy } from 'rdmo/core/assets/js/utils/config'
-import { checkStoreId, configureMiddleware } from 'rdmo/core/assets/js/utils/store'
+import { applyMiddleware, combineReducers, createStore } from 'redux'
 
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
+import * as settingsActions from 'rdmo/core/assets/js/actions/settingsActions'
+import * as templateActions from 'rdmo/core/assets/js/actions/templateActions'
+import * as userActions from 'rdmo/core/assets/js/actions/userActions'
 import configReducer from 'rdmo/core/assets/js/reducers/configReducer'
 import pendingReducer from 'rdmo/core/assets/js/reducers/pendingReducer'
 import settingsReducer from 'rdmo/core/assets/js/reducers/settingsReducer'
 import templateReducer from 'rdmo/core/assets/js/reducers/templateReducer'
 import userReducer from 'rdmo/core/assets/js/reducers/userReducer'
+import { getConfigFromLocalStorage, isTruthy } from 'rdmo/core/assets/js/utils/config'
+import { checkStoreId, configureMiddleware } from 'rdmo/core/assets/js/utils/store'
 
+import * as interviewActions from '../actions/interviewActions'
+import * as projectActions from '../actions/projectActions'
 import contactReducer from '../reducers/contactReducer'
 import interviewReducer from '../reducers/interviewReducer'
 import projectReducer from '../reducers/projectReducer'
-
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-import * as settingsActions from 'rdmo/core/assets/js/actions/settingsActions'
-import * as templateActions from 'rdmo/core/assets/js/actions/templateActions'
-import * as userActions from 'rdmo/core/assets/js/actions/userActions'
-
-import * as interviewActions from '../actions/interviewActions'
-import * as projectActions from '../actions/projectActions'
-
 import { parseLocation } from '../utils/location'
 
 export default function configureStore() {
diff --git a/rdmo/projects/assets/js/interview/utils/interview.js b/rdmo/projects/assets/js/interview/utils/interview.js
index 8f4988c5f3..7a1aa40375 100644
--- a/rdmo/projects/assets/js/interview/utils/interview.js
+++ b/rdmo/projects/assets/js/interview/utils/interview.js
@@ -11,4 +11,4 @@ const hasErrors = (project, interview) => {
   return !(isEmpty(project.errors) && isEmpty(interview.errors))
 }
 
-export { isReady, hasErrors }
+export { hasErrors, isReady }
diff --git a/rdmo/projects/assets/js/interview/utils/location.js b/rdmo/projects/assets/js/interview/utils/location.js
index b47b08b6f9..2933203606 100644
--- a/rdmo/projects/assets/js/interview/utils/location.js
+++ b/rdmo/projects/assets/js/interview/utils/location.js
@@ -1,4 +1,5 @@
 import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
+
 import { projectId } from '../utils/meta'
 
 const parseLocation = () => {
@@ -28,4 +29,4 @@ const buildPath = (pageId) => {
   return `${baseUrl}/projects/${projectId}/interview/${pageId}/`
 }
 
-export { parseLocation, updateLocation, buildPath }
+export { buildPath, parseLocation, updateLocation }
diff --git a/rdmo/projects/assets/js/interview/utils/options.js b/rdmo/projects/assets/js/interview/utils/options.js
index c1859016f4..4e0ecd945e 100644
--- a/rdmo/projects/assets/js/interview/utils/options.js
+++ b/rdmo/projects/assets/js/interview/utils/options.js
@@ -57,4 +57,4 @@ const getValueOption = (options, value) => {
   }
 }
 
-export { gatherOptions, updateOptions, getValueOption }
+export { gatherOptions, getValueOption, updateOptions }
diff --git a/rdmo/projects/assets/js/interview/utils/page.js b/rdmo/projects/assets/js/interview/utils/page.js
index 5977bd535e..650100f276 100644
--- a/rdmo/projects/assets/js/interview/utils/page.js
+++ b/rdmo/projects/assets/js/interview/utils/page.js
@@ -66,4 +66,4 @@ const initQuestion = (question, questionset) => {
 
 const initPage = (page) => initQuestionSet(page)
 
-export { checkQuestionSet, checkQuestion, initPage }
+export { checkQuestion, checkQuestionSet, initPage }
diff --git a/rdmo/projects/assets/js/interview/utils/set.js b/rdmo/projects/assets/js/interview/utils/set.js
index c9aebfd48b..aab1f6eac4 100644
--- a/rdmo/projects/assets/js/interview/utils/set.js
+++ b/rdmo/projects/assets/js/interview/utils/set.js
@@ -1,4 +1,4 @@
-import { isEmpty, isNil, toNumber, toString, last, sortBy } from 'lodash'
+import { isEmpty, isNil, last, sortBy, toNumber, toString } from 'lodash'
 
 import SetFactory from '../factories/SetFactory'
 
@@ -126,19 +126,19 @@ export const initSets = (sets, element, set_prefix) => {
   // recursively loop over the current sets the current questionsets
   currentSets.forEach((set) => {
     currentQuestionsets.forEach((questionset) => {
-        initSets(sets, questionset, getChildPrefix(set))
-      })
+      initSets(sets, questionset, getChildPrefix(set))
+    })
   })
 }
 
 export const createSetIfNotExisting = (sets, set) => {
-    if (!sets.find((s) => ((
-      (s.set_prefix === set.set_prefix) &&
+  if (!sets.find((s) => ((
+    (s.set_prefix === set.set_prefix) &&
       (s.set_index === set.set_index) &&
       (s.element === set.element)
-    )))) {
-      sets.push(SetFactory.create(set))
-    }
+  )))) {
+    sets.push(SetFactory.create(set))
+  }
 }
 
 export const copyResolvedConditions = (originalSets, sets) => {
diff --git a/rdmo/projects/assets/js/interview/utils/value.js b/rdmo/projects/assets/js/interview/utils/value.js
index 58e509a4d7..1f3635eec5 100644
--- a/rdmo/projects/assets/js/interview/utils/value.js
+++ b/rdmo/projects/assets/js/interview/utils/value.js
@@ -1,4 +1,4 @@
-import { isNil, isEmpty, toString } from 'lodash'
+import { isEmpty, isNil, toString } from 'lodash'
 
 import ValueFactory from '../factories/ValueFactory'
 
@@ -112,4 +112,4 @@ const isEmptyValue = (value) => {
   )
 }
 
-export { isDefaultValue, gatherDefaultValues, initValues, initRange, compareValues, isEmptyValue }
+export { compareValues, gatherDefaultValues, initRange, initValues, isDefaultValue, isEmptyValue }
diff --git a/rdmo/projects/assets/js/project.js b/rdmo/projects/assets/js/project.js
new file mode 100644
index 0000000000..a178bf7880
--- /dev/null
+++ b/rdmo/projects/assets/js/project.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
+
+import Pending from '../../../core/assets/js/containers/Pending'
+
+import configureStore from './project/store/configureStore'
+
+import Main from './project/components/Main'
+import Sidebar from './project/components/Sidebar'
+
+const store = configureStore()
+
+createRoot(document.getElementById('main')).render(
+  <DndProvider backend={HTML5Backend}>
+    <Provider store={store}>
+      <Main />
+    </Provider>
+  </DndProvider>
+)
+
+createRoot(document.getElementById('sidebar')).render(
+  <Provider store={store}>
+    <Sidebar />
+  </Provider>
+)
+
+createRoot(document.getElementById('pending')).render(
+  <Provider store={store}>
+    <Pending />
+  </Provider>
+)
diff --git a/rdmo/projects/assets/js/project/actions/actionTypes.js b/rdmo/projects/assets/js/project/actions/actionTypes.js
new file mode 100644
index 0000000000..e6c8bf8d66
--- /dev/null
+++ b/rdmo/projects/assets/js/project/actions/actionTypes.js
@@ -0,0 +1,66 @@
+export const FETCH_PROJECT_INIT = 'FETCH_PROJECT_INIT'
+export const FETCH_PROJECT_SUCCESS = 'FETCH_PROJECT_SUCCESS'
+export const FETCH_PROJECT_ERROR = 'FETCH_PROJECT_ERROR'
+export const UPDATE_PROJECT_INIT = 'UPDATE_PROJECT_INIT'
+export const UPDATE_PROJECT_SUCCESS = 'UPDATE_PROJECT_SUCCESS'
+export const UPDATE_PROJECT_ERROR = 'UPDATE_PROJECT_ERROR'
+export const DELETE_PROJECT_INIT = 'DELETE_PROJECT_INIT'
+export const DELETE_PROJECT_SUCCESS = 'DELETE_PROJECT_SUCCESS'
+export const DELETE_PROJECT_ERROR = 'DELETE_PROJECT_ERROR'
+
+export const FETCH_PROJECT_INVITES_INIT = 'FETCH_PROJECT_INVITES_INIT'
+export const FETCH_PROJECT_INVITES_SUCCESS = 'FETCH_PROJECT_INVITES_SUCCESS'
+export const FETCH_PROJECT_INVITES_ERROR = 'FETCH_PROJECT_INVITES_ERROR'
+export const CREATE_PROJECT_MEMBER_INIT = 'CREATE_PROJECT_MEMBER_INIT'
+export const CREATE_PROJECT_MEMBER_SUCCESS = 'CREATE_PROJECT_MEMBER_SUCCESS'
+export const CREATE_PROJECT_MEMBER_ERROR = 'CREATE_PROJECT_MEMBER_ERROR'
+export const SEND_INVITE_INIT = 'SEND_INVITE_INIT'
+export const SEND_INVITE_SUCCESS = 'SEND_INVITE_SUCCESS'
+export const SEND_INVITE_ERROR = 'SEND_INVITE_ERROR'
+export const UPDATE_PROJECT_MEMBER_INIT = 'UPDATE_PROJECT_MEMBER_INIT'
+export const UPDATE_PROJECT_MEMBER_SUCCESS = 'UPDATE_PROJECT_MEMBER_SUCCESS'
+export const UPDATE_PROJECT_MEMBER_ERROR = 'UPDATE_PROJECT_MEMBER_ERROR'
+export const DELETE_PROJECT_MEMBER_INIT = 'DELETE_PROJECT_MEMBER_INIT'
+export const DELETE_PROJECT_MEMBER_SUCCESS = 'DELETE_PROJECT_MEMBER_SUCCESS'
+export const DELETE_PROJECT_MEMBER_ERROR = 'DELETE_PROJECT_MEMBER_ERROR'
+export const UPDATE_PROJECT_INVITE_INIT = 'UPDATE_PROJECT_INVITE_INIT'
+export const UPDATE_PROJECT_INVITE_SUCCESS = 'UPDATE_PROJECT_INVITE_SUCCESS'
+export const UPDATE_PROJECT_INVITE_ERROR = 'UPDATE_PROJECT_INVITE_ERROR'
+export const DELETE_PROJECT_INVITE_INIT = 'DELETE_PROJECT_INVITE_INIT'
+export const DELETE_PROJECT_INVITE_SUCCESS = 'DELETE_PROJECT_INVITE_SUCCESS'
+export const DELETE_PROJECT_INVITE_ERROR = 'DELETE_PROJECT_INVITE_ERROR'
+export const LEAVE_PROJECT_INIT = 'LEAVE_PROJECT_INIT'
+export const LEAVE_PROJECT_SUCCESS = 'LEAVE_PROJECT_SUCCESS'
+export const LEAVE_PROJECT_ERROR = 'LEAVE_PROJECT_ERROR'
+
+export const CREATE_SNAPSHOT_INIT = 'CREATE_SNAPSHOT_INIT'
+export const CREATE_SNAPSHOT_SUCCESS = 'CREATE_SNAPSHOT_SUCCESS'
+export const CREATE_SNAPSHOT_ERROR = 'CREATE_SNAPSHOT_ERROR'
+export const UPDATE_SNAPSHOT_INIT = 'UPDATE_SNAPSHOT_INIT'
+export const UPDATE_SNAPSHOT_SUCCESS = 'UPDATE_SNAPSHOT_SUCCESS'
+export const UPDATE_SNAPSHOT_ERROR = 'UPDATE_SNAPSHOT_ERROR'
+export const ROLLBACK_SNAPSHOT_INIT = 'ROLLBACK_SNAPSHOT_INIT'
+export const ROLLBACK_SNAPSHOT_SUCCESS = 'ROLLBACK_SNAPSHOT_SUCCESS'
+export const ROLLBACK_SNAPSHOT_ERROR = 'ROLLBACK_SNAPSHOT_ERROR'
+export const DELETE_SNAPSHOT_INIT = 'DELETE_SNAPSHOT_INIT'
+export const DELETE_SNAPSHOT_SUCCESS = 'DELETE_SNAPSHOT_SUCCESS'
+export const DELETE_SNAPSHOT_ERROR = 'DELETE_SNAPSHOT_ERROR'
+
+export const FETCH_ANSWERS_INIT = 'FETCH_ANSWERS_INIT'
+export const FETCH_ANSWERS_SUCCESS = 'FETCH_ANSWERS_SUCCESS'
+export const FETCH_ANSWERS_ERROR = 'FETCH_ANSWERS_ERROR'
+export const FETCH_VIEW_INIT = 'FETCH_VIEW_INIT'
+export const FETCH_VIEW_SUCCESS = 'FETCH_VIEW_SUCCESS'
+export const FETCH_VIEW_ERROR = 'FETCH_VIEW_ERROR'
+
+export const DOWNLOAD_ANSWERS_INIT = 'DOWNLOAD_ANSWERS_INIT'
+export const DOWNLOAD_ANSWERS_SUCCESS = 'DOWNLOAD_ANSWERS_SUCCESS'
+export const DOWNLOAD_ANSWERS_ERROR = 'DOWNLOAD_ANSWERS_ERROR'
+
+export const DOWNLOAD_VIEW_INIT = 'DOWNLOAD_VIEW_INIT'
+export const DOWNLOAD_VIEW_SUCCESS = 'DOWNLOAD_VIEW_SUCCESS'
+export const DOWNLOAD_VIEW_ERROR = 'DOWNLOAD_VIEW_ERROR'
+
+export const SET_PROJECT_ANSWERS = 'SET_PROJECT_ANSWERS'
+export const CLEAR_CURRENT_VIEW = 'CLEAR_CURRENT_VIEW'
+export const CLEAR_PROJECT_ERRORS = 'CLEAR_PROJECT_ERRORS'
diff --git a/rdmo/projects/assets/js/project/actions/projectActions.js b/rdmo/projects/assets/js/project/actions/projectActions.js
new file mode 100644
index 0000000000..5745d50e3f
--- /dev/null
+++ b/rdmo/projects/assets/js/project/actions/projectActions.js
@@ -0,0 +1,469 @@
+import { isNil } from 'lodash'
+
+import { updateConfig } from 'rdmo/core/assets/js/actions/configActions'
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
+import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
+
+import CatalogApi from 'rdmo/projects/assets/js/common/api/CatalogApi'
+
+import { locationKeys, updateLocation } from '../utils/location'
+import { projectId } from '../utils/meta'
+
+import ProjectApi from '../api/ProjectApi'
+
+import * as actionTypes from './actionTypes'
+
+// asynchronous actions
+
+export function navigateDashboard(location) {
+  return (dispatch) => {
+    // update the location in the url
+    updateLocation(location)
+
+    // update the location in the config store
+    locationKeys.forEach(key => dispatch(updateConfig(key, location[key] ?? null, false)))
+
+    if (!isNil(location.viewId)) {
+      dispatch(fetchView(location.snapshotId, location.viewId))
+    } else if (location.detail == 'answers') {
+      dispatch(fetchAnswers(location.snapshotId))
+    } else {
+      dispatch({ type: actionTypes.CLEAR_CURRENT_VIEW })
+    }
+  }
+}
+
+// project
+
+export function fetchProject() {
+
+  return function (dispatch) {
+    dispatch(addToPending('fetchProject'))
+    dispatch({ type: actionTypes.FETCH_PROJECT_INIT })
+
+    return Promise.all([
+      ProjectApi.fetchProject(projectId),
+      ProjectApi.fetchProjectHierarchy(projectId),
+      ProjectApi.fetchProjectSnapshots(projectId),
+      ProjectApi.fetchProjectViews(projectId),
+      ProjectApi.fetchProjectAnswers(projectId),
+      ProjectApi.fetchProjectTasks(projectId),
+      ProjectApi.fetchProjectMemberships(projectId),
+      ProjectApi.fetchProjectMembershipHierarchy(projectId),
+      CatalogApi.fetchCatalogs()
+    ])
+      .then(([project, hierarchy, snapshots, views, answers, tasks, memberships, membershipHierarchy, catalogs]) => {
+        const projectData = {
+          project,
+          hierarchy,
+          snapshots,
+          views,
+          answers,
+          tasks,
+          memberships: [...memberships, ...membershipHierarchy],
+          catalogs
+        }
+
+        dispatch(removeFromPending('fetchProject'))
+        dispatch({ type: actionTypes.FETCH_PROJECT_SUCCESS, project: projectData })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('fetchProject'))
+        dispatch({ type: actionTypes.FETCH_PROJECT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function updateProject(data) {
+  return function (dispatch, getState) {
+    const state = getState()
+    const currentBundle = state.project?.project
+    const id = data?.id ?? currentBundle?.project?.id
+
+    if (!id) {
+      console.warn('No project ID available for update.')
+      return
+    }
+
+    dispatch(addToPending('updateProject'))
+    dispatch({ type: actionTypes.UPDATE_PROJECT_INIT })
+
+    return ProjectApi.updateProject(id, data)
+      .then(() =>
+        Promise.all([
+          ProjectApi.fetchProject(id),
+          ProjectApi.fetchProjectHierarchy(id),
+        ])
+      )
+      .then(([project, hierarchy]) => {
+        const updatedBundle = {
+          ...currentBundle,
+          // only these two are refreshed from server:
+          project,
+          hierarchy,
+          // everything else stays untouched:
+          // snapshots: currentBundle.snapshots,
+          // projectViews: currentBundle.projectViews,
+          // projectAnswers: currentBundle.projectAnswers,
+          // tasks: currentBundle.tasks,
+          // memberships: currentBundle.memberships,
+          // catalogs: currentBundle.catalogs,
+        }
+
+        dispatch(removeFromPending('updateProject'))
+        dispatch({ type: actionTypes.UPDATE_PROJECT_SUCCESS, project: updatedBundle })
+      })
+      .catch((error) => {
+        dispatch(removeFromPending('updateProject'))
+        dispatch({ type: actionTypes.UPDATE_PROJECT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function deleteProject(id) {
+  return function (dispatch) {
+    const idToDelete = id ?? projectId
+
+    dispatch(addToPending('deleteProject'))
+    dispatch({ type: actionTypes.DELETE_PROJECT_INIT })
+
+    return ProjectApi.deleteProject(idToDelete)
+      .then(() => {
+        dispatch(removeFromPending('deleteProject'))
+        dispatch({ type: actionTypes.DELETE_PROJECT_SUCCESS, projectId: idToDelete })
+
+        if (!id) {
+          window.location.href = `${baseUrl}/projects/`
+        }
+      })
+      .catch((error) => {
+        dispatch(removeFromPending('deleteProject'))
+        dispatch({ type: actionTypes.DELETE_PROJECT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+// memberships / invites / leave
+
+export function fetchProjectInvites() {
+  return function (dispatch) {
+    dispatch(addToPending('fetchProjectInvites'))
+    dispatch({ type: actionTypes.FETCH_PROJECT_INVITES_INIT })
+
+    return ProjectApi.fetchProjectInvites(projectId)
+      .then(invites => {
+        dispatch(removeFromPending('fetchProjectInvites'))
+        dispatch({ type: actionTypes.FETCH_PROJECT_INVITES_SUCCESS, invites })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('fetchProjectInvites'))
+        dispatch({ type: actionTypes.FETCH_PROJECT_INVITES_ERROR, error })
+      })
+  }
+}
+
+export function createProjectMember(data) {
+  return function (dispatch) {
+    dispatch(addToPending('createProjectMember'))
+    dispatch({ type: actionTypes.CREATE_PROJECT_MEMBER_INIT })
+
+    return ProjectApi.createMember(projectId, data)
+      .then(member => {
+        dispatch(removeFromPending('createProjectMember'))
+        dispatch({ type: actionTypes.CREATE_PROJECT_MEMBER_SUCCESS, member })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('createProjectMember'))
+        dispatch({ type: actionTypes.CREATE_PROJECT_MEMBER_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function updateProjectMember(membershipId, data) {
+  return function (dispatch, getState) {
+    dispatch(addToPending('updateProjectMember'))
+    dispatch({ type: actionTypes.UPDATE_PROJECT_MEMBER_INIT })
+
+    return ProjectApi.updateMember(projectId, membershipId, data)
+      .then(member => {
+        dispatch({ type: actionTypes.UPDATE_PROJECT_MEMBER_SUCCESS, member: { ...member, id: membershipId } })
+
+        // membership updates can lead to a permission change for owner <-> last owner cases
+        // project with permissions needs to be fetched
+        const state = getState()
+        const currentBundle = state.project.project
+        return ProjectApi.fetchProject(projectId).then(project => ({ project, currentBundle }))
+      })
+      .then(({ project, currentBundle }) => {
+        const updatedBundle = {
+          ...currentBundle,
+          project
+        }
+
+        dispatch(removeFromPending('updateProjectMember'))
+        dispatch({ type: actionTypes.UPDATE_PROJECT_SUCCESS, project: updatedBundle })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('updateProjectMember'))
+        dispatch({ type: actionTypes.UPDATE_PROJECT_MEMBER_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function deleteProjectMember(membershipId) {
+  return function (dispatch) {
+    dispatch(addToPending('deleteProjectMember'))
+    dispatch({ type: actionTypes.DELETE_PROJECT_MEMBER_INIT })
+
+    return ProjectApi.deleteMember(projectId, membershipId)
+      .then(() => {
+        dispatch(removeFromPending('deleteProjectMember'))
+        dispatch({ type: actionTypes.DELETE_PROJECT_MEMBER_SUCCESS, membershipId })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('deleteProjectMember'))
+        dispatch({ type: actionTypes.DELETE_PROJECT_MEMBER_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function sendProjectInvite(data) {
+  return function (dispatch) {
+    dispatch(addToPending('sendInvite'))
+    dispatch({ type: actionTypes.SEND_INVITE_INIT })
+
+    return ProjectApi.sendInvite(projectId, data)
+      .then(invite => {
+        dispatch(removeFromPending('sendInvite'))
+        dispatch({ type: actionTypes.SEND_INVITE_SUCCESS, invite })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('sendInvite'))
+        dispatch({ type: actionTypes.SEND_INVITE_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function updateProjectInvite(inviteId, data) {
+  return function (dispatch) {
+    dispatch(addToPending('updateProjectInvite'))
+    dispatch({ type: actionTypes.UPDATE_PROJECT_INVITE_INIT })
+
+    return ProjectApi.updateInvite(projectId, inviteId, data)
+      .then(invite => {
+        dispatch(removeFromPending('updateProjectInvite'))
+        dispatch({ type: actionTypes.UPDATE_PROJECT_INVITE_SUCCESS, invite: { ...invite, id: inviteId } })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('updateProjectInvite'))
+        dispatch({ type: actionTypes.UPDATE_PROJECT_INVITE_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function deleteProjectInvite(inviteId) {
+  return function (dispatch) {
+    dispatch(addToPending('deleteProjectInvite'))
+    dispatch({ type: actionTypes.DELETE_PROJECT_INVITE_INIT })
+
+    return ProjectApi.deleteInvite(projectId, inviteId)
+      .then(() => {
+        dispatch(removeFromPending('deleteProjectInvite'))
+        dispatch({ type: actionTypes.DELETE_PROJECT_INVITE_SUCCESS, inviteId })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('deleteProjectInvite'))
+        dispatch({ type: actionTypes.DELETE_PROJECT_INVITE_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function leaveProject(membershipId, { redirect = false } = {}) {
+  return function (dispatch) {
+    dispatch(addToPending('leaveProject'))
+    dispatch({ type: actionTypes.LEAVE_PROJECT_INIT })
+
+    return ProjectApi.leaveProject(projectId)
+      .then(() => {
+        dispatch(removeFromPending('leaveProject'))
+        dispatch({ type: actionTypes.LEAVE_PROJECT_SUCCESS, membershipId })
+        if (redirect) {
+          window.location.href = `${baseUrl}/projects/`
+          return
+        }
+      })
+      .catch(error => {
+        dispatch(removeFromPending('leaveProject'))
+        dispatch({ type: actionTypes.LEAVE_PROJECT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+// snapshots
+
+export function createSnapshot(data) {
+  return function (dispatch) {
+    dispatch(addToPending('createSnapshot'))
+    dispatch({ type: actionTypes.CREATE_SNAPSHOT_INIT })
+
+    return ProjectApi.createSnapshot(projectId, data)
+      .then(snapshot => {
+        dispatch(removeFromPending('createSnapshot'))
+        dispatch({ type: actionTypes.CREATE_SNAPSHOT_SUCCESS, snapshot })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('createSnapshot'))
+        dispatch({ type: actionTypes.CREATE_SNAPSHOT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function updateSnapshot(snapshotId, data) {
+  return function (dispatch) {
+    dispatch(addToPending('updateSnapshot'))
+    dispatch({ type: actionTypes.UPDATE_SNAPSHOT_INIT })
+
+    return ProjectApi.updateSnapshot(projectId, snapshotId, data)
+      .then(snapshot => {
+        dispatch(removeFromPending('updateSnapshot'))
+        dispatch({ type: actionTypes.UPDATE_SNAPSHOT_SUCCESS, snapshot })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('updateSnapshot'))
+        dispatch({ type: actionTypes.UPDATE_SNAPSHOT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function deleteSnapshot(snapshotId) {
+  return function (dispatch) {
+    dispatch(addToPending('deleteSnapshot'))
+    dispatch({ type: actionTypes.DELETE_SNAPSHOT_INIT })
+
+    return ProjectApi.deleteSnapshot(projectId, snapshotId)
+      .then(() => {
+        dispatch(removeFromPending('deleteSnapshot'))
+        dispatch({ type: actionTypes.DELETE_SNAPSHOT_SUCCESS, snapshotId })
+      })
+      .catch(error => {
+        dispatch(removeFromPending('deleteSnapshot'))
+        dispatch({ type: actionTypes.DELETE_SNAPSHOT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function rollbackSnapshot(snapshotId) {
+  return function (dispatch) {
+    dispatch(addToPending('rollbackSnapshot'))
+    dispatch({ type: actionTypes.ROLLBACK_SNAPSHOT_INIT })
+
+    return ProjectApi.rollbackSnapshot(projectId, snapshotId)
+      .then(snapshot => {
+        dispatch(removeFromPending('rollbackSnapshot'))
+        dispatch({ type: actionTypes.ROLLBACK_SNAPSHOT_SUCCESS, snapshot })
+        dispatch(fetchProject())
+      })
+      .catch(error => {
+        dispatch(removeFromPending('rollbackSnapshot'))
+        dispatch({ type: actionTypes.ROLLBACK_SNAPSHOT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+// answers / views
+
+export function fetchAnswers(snapshotId) {
+  const pendingId = isNil(snapshotId) ? `fetchView/${snapshotId}` : 'fetchAnswers'
+
+  return function (dispatch) {
+    dispatch(addToPending(pendingId))
+    dispatch({ type: actionTypes.FETCH_ANSWERS_INIT })
+
+    return ProjectApi.fetchProjectAnswers(projectId, snapshotId)
+      .then(view => {
+        dispatch(removeFromPending(pendingId))
+        dispatch({ type: actionTypes.FETCH_ANSWERS_SUCCESS, view })
+        return view
+      })
+      .catch(error => {
+        dispatch(removeFromPending(pendingId))
+        dispatch({ type: actionTypes.FETCH_ANSWERS_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function fetchView(snapshotId, viewId) {
+  const pendingId = isNil(snapshotId) ? `fetchView/${snapshotId}/${viewId}` : `fetchView/${viewId}`
+
+  return function (dispatch) {
+    dispatch(addToPending(pendingId))
+    dispatch({ type: actionTypes.FETCH_VIEW_INIT })
+
+    return ProjectApi.fetchProjectView(projectId, snapshotId, viewId)
+      .then(view => {
+        dispatch(removeFromPending(pendingId))
+        dispatch({ type: actionTypes.FETCH_VIEW_SUCCESS, view })
+      })
+      .catch(error => {
+        dispatch(removeFromPending(pendingId))
+        dispatch({ type: actionTypes.FETCH_VIEW_ERROR, error })
+      })
+  }
+}
+
+// download
+
+export function downloadAnswers(snapshotId, format) {
+  return function (dispatch) {
+    dispatch(addToPending('downloadAnswers'))
+    dispatch({ type: actionTypes.DOWNLOAD_ANSWERS_INIT })
+
+    return ProjectApi.downloadProjectAnswers(projectId, snapshotId, format)
+      .then(() => dispatch({ type: actionTypes.DOWNLOAD_ANSWERS_SUCCESS }))
+      .catch(error => dispatch({ type: actionTypes.DOWNLOAD_ANSWERS_ERROR, error }))
+      .finally(() => dispatch(removeFromPending('downloadAnswers')))
+  }
+}
+
+export function downloadView(snapshotId, viewId, format) {
+  return function (dispatch) {
+    dispatch(addToPending('downloadView'))
+    dispatch({ type: actionTypes.DOWNLOAD_VIEW_INIT })
+
+    return ProjectApi.downloadProjectView(projectId, snapshotId, viewId, format)
+      .then(() => dispatch({ type: actionTypes.DOWNLOAD_VIEW_SUCCESS }))
+      .catch(error => dispatch({ type: actionTypes.DOWNLOAD_VIEW_ERROR, error }))
+      .finally(() => dispatch(removeFromPending('downloadView')))
+  }
+}
+
+// synchronous actions
+
+export function clearProjectErrors() {
+  return { type: actionTypes.CLEAR_PROJECT_ERRORS }
+}
+
+export function clearCurrentView() {
+  return { type: actionTypes.CLEAR_CURRENT_VIEW }
+}
+
+export function setProjectAnswers(view) {
+  return function (dispatch) {
+    dispatch({ type: actionTypes.SET_PROJECT_ANSWERS, view })
+  }
+}
diff --git a/rdmo/projects/assets/js/project/api/ProjectApi.js b/rdmo/projects/assets/js/project/api/ProjectApi.js
new file mode 100644
index 0000000000..24b6ac9b83
--- /dev/null
+++ b/rdmo/projects/assets/js/project/api/ProjectApi.js
@@ -0,0 +1,130 @@
+import { isNil } from 'lodash'
+
+import { encodeParams } from 'rdmo/core/assets/js/utils/api'
+
+import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
+
+export default class ProjectApi extends BaseApi {
+
+  static fetchProject(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/`)
+  }
+
+  static fetchProjectHierarchy(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/hierarchy/`)
+  }
+
+  static fetchProjectSnapshots(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/snapshots/`)
+  }
+
+  static fetchProjectTasks(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/issues/`)
+  }
+
+  static fetchProjectMemberships(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/memberships/`)
+  }
+
+  static fetchProjectMembershipHierarchy(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/memberships/hierarchy/`)
+  }
+
+  static fetchProjectInvites(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/invites/`)
+  }
+
+  static fetchProjects(params) {
+    return this.get(`/api/v1/projects/projects/?${encodeParams(params)}`)
+  }
+
+  static updateProject(projectId, data) {
+    return this.put(`/api/v1/projects/projects/${projectId}/`, data)
+  }
+
+  static deleteProject(projectId) {
+    return this.delete(`/api/v1/projects/projects/${projectId}/`)
+  }
+
+  static createMember(projectId, data) {
+    return this.post(`/api/v1/projects/projects/${projectId}/memberships/`, data)
+  }
+
+  static updateMember(projectId, membershipId, data) {
+    return this.put(`/api/v1/projects/projects/${projectId}/memberships/${membershipId}/`, data)
+  }
+
+  static deleteMember(projectId, membershipId) {
+    return this.delete(`/api/v1/projects/projects/${projectId}/memberships/${membershipId}/`)
+  }
+
+  static leaveProject(projectId) {
+    return this.delete(`/api/v1/projects/projects/${projectId}/memberships/leave/`)
+  }
+
+  static sendInvite(projectId, data) {
+    return this.post(`/api/v1/projects/projects/${projectId}/invites/`, data)
+  }
+
+  static updateInvite(projectId, inviteId, data) {
+    return this.put(`/api/v1/projects/projects/${projectId}/invites/${inviteId}/`, data)
+  }
+
+  static deleteInvite(projectId, inviteId) {
+    return this.delete(`/api/v1/projects/projects/${projectId}/invites/${inviteId}/`)
+  }
+
+  static createSnapshot(projectId, data) {
+    return this.post(`/api/v1/projects/projects/${projectId}/snapshots/`, data)
+  }
+
+  static updateSnapshot(projectId, snapshotId, data) {
+    return this.put(`/api/v1/projects/projects/${projectId}/snapshots/${snapshotId}/`, data)
+  }
+
+  static deleteSnapshot(projectId, snapshotId) {
+    return this.delete(`/api/v1/projects/projects/${projectId}/snapshots/${snapshotId}/`)
+  }
+
+  static rollbackSnapshot(projectId, snapshotId) {
+    return this.post(`/api/v1/projects/projects/${projectId}/snapshots/${snapshotId}/rollback/`)
+  }
+
+  static fetchProjectAnswers(projectId, snapshotId) {
+    if (isNil(snapshotId)) {
+      return this.get(`/api/v1/projects/projects/${projectId}/answers/`)
+    } else {
+      return this.get(`/api/v1/projects/projects/${projectId}/snapshots/${snapshotId}/answers/`)
+    }
+  }
+
+  static downloadProjectAnswers(projectId, snapshotId, format) {
+    if (isNil(snapshotId)) {
+      return this.download(`/api/v1/projects/projects/${projectId}/answers/export/${format}/`)
+    } else {
+      return this.download(`/api/v1/projects/projects/${projectId}/snapshots/${snapshotId}/answers/export/${format}/`)
+    }
+  }
+
+  static fetchProjectViews(projectId) {
+    return this.get(`/api/v1/projects/projects/${projectId}/views/`)
+  }
+
+  static fetchProjectView(projectId, snapshotId, viewId) {
+    if (isNil(snapshotId)) {
+      return this.get(`/api/v1/projects/projects/${projectId}/views/${viewId}/`)
+    } else {
+      return this.get(`/api/v1/projects/projects/${projectId}/snapshots/${snapshotId}/views/${viewId}/`)
+    }
+  }
+
+  static downloadProjectView(projectId, snapshotId, viewId, format) {
+    if (isNil(snapshotId)) {
+      return this.download(`/api/v1/projects/projects/${projectId}/views/${viewId}/export/${format}/`)
+    } else {
+      return this.download(
+        `/api/v1/projects/projects/${projectId}/snapshots/${snapshotId}/views/${viewId}/export/${format}/`
+      )
+    }
+  }
+}
diff --git a/rdmo/projects/assets/js/project/components/Form.js b/rdmo/projects/assets/js/project/components/Form.js
new file mode 100644
index 0000000000..6c474c4695
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/Form.js
@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+
+import Input from 'rdmo/core/assets/js/components/Input'
+import InputDebounced from 'rdmo/core/assets/js/components/InputDebounced'
+import Textarea from 'rdmo/core/assets/js/components/Textarea'
+import TextareaDebounced from 'rdmo/core/assets/js/components/TextareaDebounced'
+
+const TestForm = ({  }) => {
+
+  const [values, setValues] = useState({})
+  const [errors, setErrors] = useState({})
+
+  const handleSubmit = (event) => {
+    event.preventDefault()
+    console.log('submit!')
+  }
+
+  const fakeError = () => {
+    setErrors({ text: ['There is something wrong here...']})
+  }
+
+  const reset = () => {
+    setValues({})
+    setErrors({})
+  }
+
+  console.log(values)
+
+  return (
+    <form className="mt-5 mb-5" onSubmit={handleSubmit}>
+      <Input
+        className="mb-4"
+        label={gettext('Input')}
+        help={gettext('Help, I need somebody, help!')}
+        errors={errors.text}
+        value={values.text || ''}
+        onChange={(text) => setValues({ ...values, text })}
+      />
+
+      <InputDebounced
+        className="mb-4"
+        label={gettext('InputDebounced')}
+        help={gettext('Help, I need somebody, help!')}
+        errors={errors.textDebounced}
+        value={values.textDebounced || ''}
+        onChange={(textDebounced) => setValues({ ...values, textDebounced })}
+      />
+
+      <Textarea
+        rows="4"
+        className="mb-4"
+        label={gettext('Textarea')}
+        help={gettext('Help, I need somebody, help!')}
+        errors={errors.textarea}
+        value={values.textarea || ''}
+        onChange={(textarea) => setValues({ ...values, textarea })}
+      />
+
+      <TextareaDebounced
+        rows="4"
+        className="mb-4"
+        label={gettext('TextareaDebounced')}
+        help={gettext('Help, I need somebody, help!')}
+        errors={errors.textareaDebounced}
+        value={values.textareaDebounced || ''}
+        onChange={(textareaDebounced) => setValues({ ...values, textareaDebounced })}
+      />
+
+      <div className="d-flex gap-2">
+        <button type="submit" className="btn btn-primary" onClick={handleSubmit}>{gettext('Submit')}</button>
+        <button type="button" className="btn btn-danger" onClick={fakeError}>{gettext('Fake an error')}</button>
+        <button type="button" className="btn btn-secondary" onClick={reset}>{gettext('Reset')}</button>
+      </div>
+    </form>
+  )
+}
+
+export default TestForm
diff --git a/rdmo/projects/assets/js/project/components/Main.js b/rdmo/projects/assets/js/project/components/Main.js
new file mode 100644
index 0000000000..4b70086cd8
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/Main.js
@@ -0,0 +1,45 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import Dashboard from './areas/Dashboard'
+import Documents from './areas/Documents'
+import Information from './areas/Information'
+import Interview from './areas/Interview'
+import Memberships from './areas/Memberships'
+import Plugins from './areas/Plugins'
+import Snapshots from './areas/Snapshots'
+import View from './helper/View'
+
+const Main = () => {
+  const { area, snapshotId } = useSelector((state) => state.config)
+  const { project, currentView } = useSelector((state) => state.project)
+
+  const renderArea = () => {
+    switch (area) {
+      case 'dashboard':
+        return <Dashboard />
+      case 'interview':
+        return <Interview />
+      case 'documents':
+        return currentView ? <View /> : <Documents />
+      case 'snapshots':
+        return currentView ? <View /> : (snapshotId ? <Documents /> : <Snapshots />)
+      case 'information':
+        return <Information />
+      case 'memberships':
+        return <Memberships />
+      case 'plugins':
+        return <Plugins />
+      default:
+        return <h2>Page Not Found</h2>
+    }
+  }
+
+  return area && project && (
+    <div className="container-lg gx-0">
+      {renderArea()}
+    </div>
+  )
+}
+
+export default Main
diff --git a/rdmo/projects/assets/js/project/components/Sidebar.js b/rdmo/projects/assets/js/project/components/Sidebar.js
new file mode 100644
index 0000000000..bc7e9232bc
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/Sidebar.js
@@ -0,0 +1,98 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+
+import { Link } from 'rdmo/core/assets/js/components'
+import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
+
+import { navigateDashboard } from '../actions/projectActions'
+import { buildPath } from '../utils/location'
+
+const Sidebar = () => {
+  const dispatch = useDispatch()
+
+  const { area } = useSelector((state) => state.config)
+  const { project } = useSelector((state) => state.project)
+
+  const catalog = project?.catalogs.find(catalog => catalog.id == project.project.catalog)
+
+  const menuItems = [
+    {
+      title: '',
+      items: [
+        { area: 'dashboard', name: gettext('Dashboard'), icon: 'bi-grid' }
+      ],
+    },
+    {
+      title: gettext('Data management plan'),
+      items: [
+        { area: 'interview', name: gettext('Interview'), icon: 'bi-clipboard-check' },
+        { area: 'documents', name: gettext('Documents'), icon: 'bi-file-text' },
+        { area: 'snapshots', name: gettext('Snapshots'), icon: 'bi-stack' },
+      ],
+    },
+    {
+      title: gettext('Settings'),
+      items: [
+        { area: 'information', name: gettext('Project information'), icon: 'bi-info-square' },
+        { area: 'memberships', name: gettext('Membership'), icon: 'bi-people' },
+        { area: 'plugins', name: gettext('Plugins'), icon: 'bi-wrench' },
+      ],
+    },
+  ]
+
+  return project && (
+    <div className="d-flex flex-column h-100">
+      <div className="d-none d-lg-block card w-100 mb-3">
+        <div className="card-body py-2">
+          <h2 className="font-large mb-2">{project.project.title}</h2>
+          <p className="font-normal text-muted m-0">{catalog.title}</p>
+        </div>
+      </div>
+
+      <div className="flex-lg-grow-1">
+        {
+          menuItems.map((group, groupIndex) => (
+            <div key={groupIndex}>
+              {
+                group.title && <h3 className="d-none d-lg-block font-normal px-3 my-3">{group.title}</h3>
+              }
+
+              <nav className="nav nav-pills nav-fill flex-column">
+                {
+                  group.items.map((item, itemIndex) => (
+                    <Link
+                      key={itemIndex}
+                      href={buildPath({ area: item.area })}
+                      title={item.name}
+                      className={classNames('nav-link', { active: area === item.area })}
+                      onClick={() => dispatch(navigateDashboard({ area: item.area }))}
+                    >
+                      <div className="d-flex align-items-center gap-2">
+                        <i className={`bi ${item.icon}`}></i>
+                        <span className="d-none d-lg-inline">{item.name}</span>
+                      </div>
+                    </Link>
+                  ))
+                }
+              </nav>
+            </div>
+          ))
+        }
+      </div>
+
+      <hr />
+
+      <div className="text-center text-lg-start ms-lg-2 pb-3">
+        <a href={`${baseUrl}/projects/`}>
+          <i className="bi bi-arrow-left"></i>
+          <span className="d-none d-lg-inline ms-2">
+            {gettext('Back to projects overview')}
+          </span>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default Sidebar
diff --git a/rdmo/projects/assets/js/project/components/areas/Dashboard.js b/rdmo/projects/assets/js/project/components/areas/Dashboard.js
new file mode 100644
index 0000000000..35ee866304
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/Dashboard.js
@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+
+import Tooltip from 'rdmo/core/assets/js/components/Tooltip'
+
+import { TileGrid } from '../helper'
+
+const Dashboard = () => {
+  const [tileSize, setTileSize] = useState('normal')
+
+  const toggleSize = () => {
+    setTileSize((prevSize) => {
+      if (prevSize === 'compact') return 'normal'
+      if (prevSize === 'normal') return 'fullWidth'
+      return 'compact'
+    })
+  }
+
+  const tiles = [
+    { title: 'Tile 1', content: <p>Content 1</p> },
+    { title: 'Tile 2', content: <p>Content 2</p> },
+    { title: 'Tile 3', content: <p>Content 3</p> },
+    { title: 'Tile 4', content: <p>Content 4</p> },
+    { title: 'Tile 5', content: <p>Content 5</p> },
+    { title: 'Tile 6', content: <p>Content 6</p> },
+  ]
+
+  return (
+    <div>
+      <h1>{gettext('Dashboard')}</h1>
+
+      <div className="mt-5">
+        <button className="btn btn-primary mb-3" onClick={toggleSize}>
+              Toggle Tile Size (Current: {tileSize})
+        </button>
+
+        <TileGrid tiles={tiles} size={tileSize} />
+
+        <div>
+          <Tooltip title={<>TITLE</>} placement="top">
+            <span>TOOLTIP</span>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Dashboard
diff --git a/rdmo/projects/assets/js/project/components/areas/Documents.js b/rdmo/projects/assets/js/project/components/areas/Documents.js
new file mode 100644
index 0000000000..b820226f5d
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/Documents.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { isNil } from 'lodash'
+
+import { downloadAnswers, downloadView, navigateDashboard } from '../../actions/projectActions'
+
+import SnapshotsDropdown from '../helper/SnapshotsDropdown'
+import ViewTile from '../helper/ViewTile'
+
+const Documents = () => {
+  const dispatch = useDispatch()
+
+  const { snapshotId, viewId, detail } = useSelector((state) => state.config)
+  const { views } = useSelector((state) => state.project.project) ?? {}
+  const area = snapshotId ? 'snapshots' : 'documents'
+
+  const handleSnapshotChange = (snapshot) => {
+    if (isNil(snapshot)) {
+      dispatch(navigateDashboard({ area: 'documents', viewId, detail }))
+    } else {
+      dispatch(navigateDashboard({ area: 'snapshots', snapshotId: snapshot.id, viewId, detail }))
+    }
+  }
+
+  return (
+    <div className="project-documents">
+      <div className="d-lg-flex justify-content-between align-items-center mb-5">
+        <h1 className="mb-lg-0">{gettext('Documents')}</h1>
+        <SnapshotsDropdown onChange={handleSnapshotChange}/>
+      </div>
+
+      <h2>{gettext('Data management plans')}</h2>
+      <div className="row mb-4">
+        {
+          views.map((view) => (
+            <div key={view.id} className="col-lg-6">
+              <ViewTile
+                title={view.title}
+                help={view.help}
+                onClick={() => dispatch(navigateDashboard({ area, snapshotId, viewId: view.id }))}
+                onExport={(format) => dispatch(downloadView(null, view.id, format))}
+              />
+            </div>
+          ))
+        }
+      </div>
+
+      <h2>{gettext('Additional documents')}</h2>
+      <div className="row mb-4">
+        <div className="col-lg-6">
+          <ViewTile
+            title={gettext('List all questions')}
+            help={gettext('Overview of all questions')}
+            onClick={() => dispatch(navigateDashboard({ area, snapshotId, detail: 'questions' }))}
+            onExport={(format) => {console.log(format)}}
+          />
+        </div>
+        <div className="col-lg-6">
+          <ViewTile
+            title={gettext('List all answers')}
+            help={gettext('Overview of all questions and answers')}
+            onClick={() => dispatch(navigateDashboard({ area, snapshotId, detail: 'answers' }))}
+            onExport={(format) => dispatch(downloadAnswers(null, format))}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Documents
diff --git a/rdmo/projects/assets/js/project/components/areas/Information.js b/rdmo/projects/assets/js/project/components/areas/Information.js
new file mode 100644
index 0000000000..284e2b52c6
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/Information.js
@@ -0,0 +1,43 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+import HierarchyTree from './information/HierarchyTree'
+import ProjectDelete from './information/ProjectDelete'
+import ProjectForm from './information/ProjectForm'
+
+const Information = () => {
+  const { hierarchy, project } = useSelector((state) => state.project.project) ?? {}
+  const perms = project?.permissions ?? {}
+
+  return (
+    <div className="project-information">
+      <h1 className="mb-5">{gettext('Project information')}</h1>
+
+      <div className="card card-tile mb-4">
+        <div className="card-body">
+          <ProjectForm disabled={!perms.can_change_project} />
+        </div>
+      </div>
+
+      <div className="card card-tile mb-4">
+        <div className="card-body">
+          <h3>{gettext('Project hierarchy')}</h3>
+          <HierarchyTree hierarchy={hierarchy} />
+        </div>
+      </div>
+
+      {
+        perms.can_delete_project && (
+          <div className="card card-tile mb-4">
+            <div className="card-body">
+              <h3>{gettext('Delete project')}</h3>
+              <ProjectDelete />
+            </div>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default Information
diff --git a/rdmo/projects/assets/js/project/components/areas/Interview.js b/rdmo/projects/assets/js/project/components/areas/Interview.js
new file mode 100644
index 0000000000..95b01fe3e9
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/Interview.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Interview = () => {
+  return (
+    <div className="project-interview">
+      <h1>{gettext('Interview')}</h1>
+    </div>
+  )
+}
+
+export default Interview
diff --git a/rdmo/projects/assets/js/project/components/areas/Memberships.js b/rdmo/projects/assets/js/project/components/areas/Memberships.js
new file mode 100644
index 0000000000..bdfb74f960
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/Memberships.js
@@ -0,0 +1,50 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { isEmpty } from 'lodash'
+
+import { useModal } from 'rdmo/core/assets/js/hooks'
+
+import MembershipInviteModal from './memberships/MembershipInviteModal'
+import MembershipTable from './memberships/MembershipTable'
+
+const Memberships = () => {
+  const { show: showInvite, open: openInvite, close: closeInvite } = useModal()
+
+  const { memberships, project } = useSelector((state) => state.project.project) ?? {}
+  const { invites } = useSelector((state) => state.project)
+  const perms = project?.permissions ?? {}
+
+  return (
+    <>
+      <div className="d-lg-flex justify-content-between align-items-center mb-5">
+        <h1 className="mb-lg-0">{gettext('Memberships')}</h1>
+        {
+          perms.can_add_invite && (
+            <button type="button" className="btn link small" onClick={openInvite}>
+              <i className="bi bi-plus" aria-hidden="true"></i> {gettext('Add member')}
+            </button>
+          )
+        }
+      </div>
+      {
+        !isEmpty(memberships) && (
+          <MembershipTable persons={memberships} type="memberships" />
+        )
+      }
+      {
+        !isEmpty(invites) && (
+          <>
+            <div className="d-flex justify-content-between align-items-center mb-3">
+              <h2 className="mb-0">{gettext('Invites')}</h2>
+            </div>
+            <MembershipTable persons={invites} type="invites" />
+          </>
+        )
+      }
+
+      <MembershipInviteModal show={showInvite} onClose={closeInvite} />
+    </>
+  )
+}
+
+export default Memberships
diff --git a/rdmo/projects/assets/js/project/components/areas/Plugins.js b/rdmo/projects/assets/js/project/components/areas/Plugins.js
new file mode 100644
index 0000000000..cfb5c978dc
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/Plugins.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Plugins = () => {
+  return (
+    <div className="project-plugins">
+      <h1 className="mb-5">{gettext('Plugins')}</h1>
+    </div>
+  )
+}
+
+export default Plugins
diff --git a/rdmo/projects/assets/js/project/components/areas/Snapshots.js b/rdmo/projects/assets/js/project/components/areas/Snapshots.js
new file mode 100644
index 0000000000..39ce23ebe3
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/Snapshots.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { isEmpty } from 'lodash'
+
+import { useModal } from 'rdmo/core/assets/js/hooks'
+
+import SnapshotModal from './snapshots/SnapshotModal'
+import SnapshotTable from './snapshots/SnapshotTable'
+
+const Snapshots = () => {
+  const { show: showSnapshot, open: openSnapshot, close: closeSnapshot } = useModal()
+
+  const { snapshots, project } = useSelector((state) => state.project.project) ?? {}
+  const perms = project?.permissions ?? {}
+
+  return (
+    <div className="project-snapshots">
+      <div className="d-lg-flex justify-content-between align-items-center mb-5">
+        <h1 className="mb-lg-0">{gettext('Snapshots')}</h1>
+        {
+          perms.can_add_snapshot && (
+            <button type="button" className="btn link small" onClick={openSnapshot}>
+              <i className="bi bi-plus" aria-hidden="true"></i> {gettext('Create snapshot')}
+            </button>
+          )
+        }
+      </div>
+      {
+        !isEmpty(snapshots) && perms.can_view_snapshot && (
+          <SnapshotTable snapshots={snapshots} />
+        )
+      }
+      <SnapshotModal show={showSnapshot} onClose={closeSnapshot} />
+    </div>
+  )
+}
+
+export default Snapshots
diff --git a/rdmo/projects/assets/js/project/components/areas/information/HierarchyTree.js b/rdmo/projects/assets/js/project/components/areas/information/HierarchyTree.js
new file mode 100644
index 0000000000..b00dabf33b
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/information/HierarchyTree.js
@@ -0,0 +1,109 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
+
+const HierarchyTree = ({ hierarchy }) => {
+  const isCurrentNode = (node) => node?.current === true || node?.current === 'true'
+
+  const linkOrText = (node) => {
+    const isCurrent = isCurrentNode(node)
+    const content = (node?.permissions?.can_view_project && !isCurrent) ? (
+      <a href={`${baseUrl}/projects/${node.id}`}>{node.title}</a>
+    ) : <>{node.title}</>
+
+    return isCurrent ? <span>{content}</span> : content
+  }
+
+  const renderFullSubtree = (node) => {
+    if (!node?.children?.length) return null
+    return (
+      <ul>
+        {
+          node.children.map(child => (
+            <li key={child.id}>
+              {linkOrText(child)}
+              {renderFullSubtree(child)}
+            </li>
+          ))
+        }
+      </ul>
+    )
+  }
+
+  const pathToCurrent = (node) => {
+    if (!node) return null
+    if (node.current) return [node]
+    for (const child of (node.children || [])) {
+      const path = pathToCurrent(child)
+      if (path) return [node, ...path]
+    }
+    return null
+  }
+
+  const pathToCurrentFromRoot = (root) => {
+    if (Array.isArray(root)) {
+      for (const n of root) {
+        const p = pathToCurrent(n)
+        if (p) return p
+      }
+      return null
+    }
+    return pathToCurrent(root)
+  }
+
+  const path = pathToCurrentFromRoot(hierarchy)
+  if (!path || path.length === 0) return null
+
+  const renderPath = (idx) => {
+    const node = path[idx]
+    const isAtCurrentInPath = idx === path.length - 1
+
+    if (idx === 0) {
+      return (
+        <>
+          {linkOrText(node)}
+          {
+            isAtCurrentInPath ? renderFullSubtree(node) : <ul>{renderPath(idx + 1)}</ul>
+          }
+        </>
+      )
+    }
+
+    return (
+      <li key={node.id}>
+        {linkOrText(node)}
+        {
+          isAtCurrentInPath ? renderFullSubtree(node) : <ul>{renderPath(idx + 1)}</ul>
+        }
+      </li>
+    )
+  }
+
+  return (
+    <div className="project-hierarchy">
+      {renderPath(0)}
+    </div>
+  )
+}
+
+const nodeShape = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  title: PropTypes.string.isRequired,
+  current: PropTypes.bool,
+  permissions: PropTypes.shape({
+    can_view_project: PropTypes.bool,
+    can_change_project: PropTypes.bool,
+    can_delete_project: PropTypes.bool
+  }),
+  children: PropTypes.array
+})
+PropTypes.arrayOf(() => nodeShape)
+HierarchyTree.propTypes = {
+  hierarchy: PropTypes.oneOfType([
+    nodeShape,
+    PropTypes.arrayOf(nodeShape)
+  ]).isRequired
+}
+
+export default HierarchyTree
diff --git a/rdmo/projects/assets/js/project/components/areas/information/ProjectDelete.js b/rdmo/projects/assets/js/project/components/areas/information/ProjectDelete.js
new file mode 100644
index 0000000000..9e246e5a4b
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/information/ProjectDelete.js
@@ -0,0 +1,32 @@
+import React, { useState } from 'react'
+import { useSelector } from 'react-redux'
+
+import ProjectDeleteModal from './ProjectDeleteModal'
+const ProjectDelete = () => {
+  const { project } = useSelector((state) => state.project.project)
+
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  const openConfirm = () => setShowConfirm(true)
+  const closeConfirm = () => setShowConfirm(false)
+
+  return (
+    <div>
+      <p className="mb-2">
+        {gettext('This action cannot be undone. The project will be permanently removed!')}
+      </p>
+
+      <button className="btn btn-danger" onClick={openConfirm}>
+        {gettext('Delete project')}
+      </button>
+
+      <ProjectDeleteModal
+        project={project}
+        show={showConfirm}
+        onClose={closeConfirm}
+      />
+    </div>
+  )
+}
+
+export default ProjectDelete
diff --git a/rdmo/projects/assets/js/project/components/areas/information/ProjectDeleteModal.js b/rdmo/projects/assets/js/project/components/areas/information/ProjectDeleteModal.js
new file mode 100644
index 0000000000..2869444cd1
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/information/ProjectDeleteModal.js
@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+import { deleteProject } from '../../../actions/projectActions'
+
+const ProjectDeleteModal = ({
+  project = null,
+  id = null,
+  show,
+  onClose,
+  onDeleted = () => { },
+}) => {
+  const dispatch = useDispatch()
+
+  const handleDelete = () => {
+    const action = id ? deleteProject(id) : deleteProject()
+
+    return dispatch(action).then(() => {
+      onClose()
+      onDeleted()
+    })
+  }
+
+  return (
+    <Modal
+      title={gettext('Delete project')}
+      show={show}
+      onClose={onClose}
+      onSubmit={handleDelete}
+      submitLabel={gettext('Delete project')}
+      submitProps={{ className: 'btn btn-danger' }}
+    >
+      <Html
+        html={
+          interpolate(
+            gettext('Are you sure you want to delete the project <b>%s</b>?'),
+            [project?.title ?? '']
+          )
+        }
+      />
+      <p>{gettext('This action cannot be undone.')}</p>
+    </Modal>
+  )
+}
+
+ProjectDeleteModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  project: PropTypes.shape({
+    title: PropTypes.string,
+  }),
+  onDeleted: PropTypes.func,
+}
+
+export default ProjectDeleteModal
diff --git a/rdmo/projects/assets/js/project/components/areas/information/ProjectForm.js b/rdmo/projects/assets/js/project/components/areas/information/ProjectForm.js
new file mode 100644
index 0000000000..97c7835ed5
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/information/ProjectForm.js
@@ -0,0 +1,344 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import AsyncSelect from 'react-select/async'
+import { useDebouncedCallback } from 'use-debounce'
+
+import Input from 'rdmo/core/assets/js/components/forms/Input'
+import Select from 'rdmo/core/assets/js/components/forms/Select'
+import Textarea from 'rdmo/core/assets/js/components/forms/Textarea'
+import Html from 'rdmo/core/assets/js/components/Html'
+import Tooltip from 'rdmo/core/assets/js/components/Tooltip'
+
+import { copyProject, createProject } from '../../../../projects/actions/projectsActions'
+import { updateProject } from '../../../actions/projectActions'
+import { useFieldErrors } from '../../../hooks/useFieldErrors'
+
+import ProjectApi from '../../../api/ProjectApi'
+
+const ProjectForm = ({
+  catalogs: catalogsProp = null,
+  disabled,
+  formId = 'project-form',
+  currentProject = null,
+  mode = 'edit',
+  onSave,
+  submitMode = 'auto'
+}) => {
+  const dispatch = useDispatch()
+  const errors = useFieldErrors()
+  const templates = useSelector((state) => state.templates)
+  const selectCatalog = useSelector((state) => state.settings?.project_select_catalog)
+  const storeData = useSelector((state) => state.project?.project)
+
+  const project = currentProject ?? storeData?.project
+  const catalogs = catalogsProp ?? storeData?.catalogs
+
+  const [formData, setFormData] = useState(project || {})
+
+  const [enableParent, setEnableParent] = useState(!!project?.parent)
+  const [parentOptions, setParentOptions] = useState(() => {
+    if (mode === 'edit' && project?.parent) {
+      return [{ value: project.parent, label: project.parent_title }]
+    }
+    return []
+  })
+  const [parentFetchError, setParentFetchError] = useState(null)
+
+  useEffect(() => {
+    if (mode !== 'copy') return
+    if (!currentProject?.parent) return
+
+    ProjectApi.fetchProject(currentProject.parent)
+      .then(parent => {
+        setParentOptions([{
+          value: parent.id,
+          label: parent.title
+        }])
+      })
+      .catch(() => {
+        setParentFetchError(interpolate(gettext('You do not have permission to use the original parent project "%s".'),
+          [currentProject?.parent_title])
+        )
+      })
+  }, [])
+
+  const catalogOptions = useMemo(
+    () => (catalogs || [])
+      .filter(catalog => catalog.available)
+      .map(catalog => ({
+        value: catalog.id,
+        label: (
+          <>
+            {catalog.title}{' '}
+            <Tooltip
+              title={catalog.help || gettext('No help available for this catalog.')}
+              placement="right"
+            >
+              <i
+                className="bi bi-info-circle ms-2"
+                tabIndex={0}
+                role="img"
+                aria-label={gettext('Catalog help')}
+                style={{ cursor: 'help' }}
+              />
+            </Tooltip>
+          </>
+        )
+      })),
+    [catalogs]
+  )
+
+  const saveProject = (currentFormData) => {
+    if (mode === 'create') {
+      return dispatch(createProject(currentFormData))
+    }
+
+    if (mode === 'copy') {
+      return dispatch(copyProject(currentProject.id, currentFormData))
+    }
+
+    const currentProjectParent = project?.parent ?? null
+    const currentFormDataParent = currentFormData.parent ?? null
+
+    const payload = { ...currentFormData }
+
+    if (currentProjectParent === currentFormDataParent) {
+      delete payload.parent
+    }
+
+    return dispatch(updateProject(payload))
+  }
+
+  const debouncedSaveShort = useDebouncedCallback(saveProject, 500)
+  const debouncedSaveLong = useDebouncedCallback(saveProject, 1500)
+
+  const handleChange = (key, value) => {
+    const updatedFormData = { ...formData, [key]: value }
+    setFormData(updatedFormData)
+
+    if (submitMode !== 'auto') return
+
+    if (key === 'description') {
+      debouncedSaveLong(updatedFormData)
+    } else {
+      debouncedSaveShort(updatedFormData)
+    }
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    saveProject({ ...formData })?.then(() => onSave?.())
+  }
+
+  const handleLoadProjects = useDebouncedCallback((search, callback) => {
+    ProjectApi.fetchProjects({ search })
+      .then(response => {
+        const options = response.results
+          .filter(p => !project?.id || p.id !== project?.id)
+          .map(project => ({
+            value: project.id,
+            label: project.title
+          }))
+        setParentOptions(options)
+        callback(options)
+      })
+  }, 500)
+
+  // Fetch a first page only when the menu is opened and nothing is selected/loaded yet
+  const handleMenuOpen = () => {
+    if (enableParent || submitMode === 'submit') {
+      ProjectApi.fetchProjects({ search: '' }).then(({ results }) => {
+        const options = results
+          .filter(p => !project?.id || p.id !== project?.id)
+          .map(p => ({ value: p.id, label: p.title }))
+        if (project?.parent && !options.some(opt => opt.value === formData.parent)) {
+          options.unshift({
+            value: project.parent,
+            label: project.parent_title
+          })
+        }
+        setParentOptions(options)
+      })
+    }
+  }
+
+  return (
+    <form id={formId} className="container mt-3" onSubmit={submitMode === 'submit' ? handleSubmit : undefined}>
+      <Input
+        className="mb-3 form-label"
+        label={gettext('Title')}
+        help={<Html html={templates.project_view_title_help} />}
+        value={formData.title || ''}
+        onChange={(value) => handleChange('title', value)}
+        errors={errors.title}
+        isDisabled={disabled}
+      />
+
+      <Textarea
+        className="mb-3 form-label"
+        label={gettext('Description')}
+        help={<Html html={templates.project_view_description_help} />}
+        rows={4}
+        value={formData.description || ''}
+        onChange={(value) => handleChange('description', value)}
+        errors={errors.description}
+        isDisabled={disabled}
+      />
+
+      {/* TODO feature project phase */}
+      {/*
+      <Select
+        className="mb-3 form-label fw-bold"
+        label={gettext('Project phase')}
+        help={gettext('The phase of the project at this time.')}
+        // "Die Phase, in der sich Ihr Projekt zum aktuellen Zeitpunkt befindet."
+        isClearable={true}
+        options={[
+          { value: 'antragstellung', label: 'Antragstellung' },
+          { value: 'durchführung', label: 'Durchführung' },
+          { value: 'abschluss', label: 'Abschluss' }
+        ]}
+        value={formData.phase || ''}
+        onChange={(value) => handleChange('phase', value)}
+        errors={errors.phase}
+        placeholder={gettext('Select project phase')}
+      />
+      */}
+
+      <div className="mb-3">
+        <label className="form-label mb-0">{gettext('Catalog')}</label>
+        <div className="form-text mb-2">{gettext('The catalog used for this project.')}</div>
+
+        {
+          selectCatalog == 'select' ? (
+            <Select
+              className="mt-2"
+              placeholder={gettext('Select catalog')}
+              isClearable={false}
+              isDisabled={disabled}
+              options={catalogOptions}
+              value={formData.catalog}
+              onChange={(value) => handleChange('catalog', value)}
+            />
+          ) : (
+            catalogOptions.map((opt) => (
+              <div key={opt.value} className="form-check">
+                <input
+                  type="radio"
+                  className="form-check-input"
+                  id={`catalog-${opt.value}`}
+                  name="catalog"
+                  value={opt.value}
+                  checked={formData.catalog === opt.value}
+                  onChange={(e) => handleChange('catalog', Number(e.target.value))}
+                  disabled={disabled}
+                />
+                <label className="form-check-label" htmlFor={`catalog-${opt.value}`}>
+                  {opt.label}
+                </label>
+              </div>
+            ))
+          )
+        }
+
+        {
+          errors.catalog?.map((err, i) => (
+            <div key={i} className="text-danger mt-1">{err}</div>
+          ))
+        }
+      </div>
+
+      <div className="mb-3">
+        {
+          submitMode === 'auto' && (
+            < div className="form-check form-switch">
+              <input
+                type="checkbox"
+                className="form-check-input"
+                id="parentToggle"
+                checked={enableParent}
+                disabled={disabled}
+                onChange={(e) => setEnableParent(e.target.checked)}
+              />
+              <label className="form-label fw-bold m-0" htmlFor="parentToggle">
+                {gettext('Select parent project')}
+              </label>
+            </div>
+          )
+        }
+        {
+          submitMode == 'submit' && (
+            <label className="form-label fw-bold m-0" htmlFor="parentToggle">
+              {gettext('Select parent project')}
+            </label>
+          )
+        }
+        <div className="form-text">
+          <Html html={templates.project_view_parent_help} />
+        </div>
+
+        <AsyncSelect
+          classNamePrefix="react-select"
+          className="react-select mt-10"
+          placeholder={gettext('Search projects ...')}
+          noOptionsMessage={() => gettext('No projects matching your search.')}
+          loadingMessage={() => gettext('Loading ...')}
+          defaultOptions={parentOptions}
+          value={parentOptions.find(p => p.value === formData.parent) || null}
+          onChange={(option) => handleChange('parent', option ? option.value : null)}
+          getOptionValue={(project) => project.value}
+          getOptionLabel={(project) => project.label}
+          isDisabled={(!enableParent && submitMode === 'auto') || disabled}
+          loadOptions={handleLoadProjects}
+          onMenuOpen={handleMenuOpen}
+          isClearable
+          backspaceRemovesValue={true}
+        />
+
+        {
+          errors.parent?.map((err, i) => (
+            <div key={i} className="text-danger mt-1">{err}</div>
+          ))
+        }
+
+        {
+          parentFetchError && (
+            <div className="text-danger mt-1">
+              {parentFetchError}
+            </div>
+          )
+        }
+        {/* TODO feature inherit parent defaults / mode create */}
+        {/* <div className="form-check mt-2">
+          <input
+            type="checkbox"
+            className="form-check-input"
+            id="inheritDefaults"
+            checked={!!formData.inheritDefaults}
+            onChange={(e) => handleChange('inheritDefaults', e.target.checked)}
+            disabled={!enableParent}
+          />
+          <label
+            className={`form-check-label ${!enableParent ? 'text-muted' : ''}`}
+            htmlFor="inheritDefaults"
+          >
+            Default-Werte aus übergeordnetem Projekt übernehmen
+          </label>
+        </div> */}
+      </div>
+    </form >
+  )
+}
+
+ProjectForm.propTypes = {
+  catalogs: PropTypes.array,
+  disabled: PropTypes.bool,
+  formId: PropTypes.string,
+  currentProject: PropTypes.object,
+  mode: PropTypes.oneOf(['edit', 'copy', 'create']),
+  onSave: PropTypes.func,
+  submitMode: PropTypes.oneOf(['auto', 'submit']),
+}
+
+export default ProjectForm
diff --git a/rdmo/projects/assets/js/project/components/areas/memberships/MembershipDeleteModal.js b/rdmo/projects/assets/js/project/components/areas/memberships/MembershipDeleteModal.js
new file mode 100644
index 0000000000..3ec975e08f
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/memberships/MembershipDeleteModal.js
@@ -0,0 +1,95 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+import { deleteProjectInvite, deleteProjectMember, leaveProject } from '../../../actions/projectActions'
+import { useFieldErrors } from '../../../hooks/useFieldErrors'
+
+const MembershipDeleteModal = ({
+  type, show, person, onClose, isAdminOrSiteManager = false,
+  isCurrentUser = false
+}) => {
+  const dispatch = useDispatch()
+  const { project } = useSelector((state) => state.project.project) ?? {}
+  const errors = useFieldErrors()
+
+  const name = person.user?.full_name || person.email || ''
+
+  const text = (type == 'memberships') ? (
+    isCurrentUser ? gettext('Leave project') : gettext('Delete membership')
+  ) : gettext('Delete invite')
+
+  return (
+    <Modal
+      title={text}
+      show={show}
+      onClose={onClose}
+      onSubmit={
+        async () => {
+          try {
+            if (type == 'memberships') {
+              isCurrentUser ? (
+                await dispatch(leaveProject(person.id, { redirect: !isAdminOrSiteManager }))
+              ) : await dispatch(deleteProjectMember(person.id))
+            } else {
+              await dispatch(deleteProjectInvite(person.id))
+            }
+            onClose()
+          } catch {
+            // keep modal open on error
+          }
+        }
+      }
+      submitLabel={text}
+      submitProps={{ className: 'btn btn-danger' }}
+      size="modal-md"
+    >
+      <Html
+        html={
+          isCurrentUser ? interpolate(
+            gettext('You are about to leave the project <b>%s</b>. If you want to access this project again, ' +
+              'somebody will need to invite you!'),
+            [project?.title ?? '']
+          ) : (
+            (type == 'memberships') ? interpolate(
+              gettext('You are about to remove the user <b>%s</b> from the project <b>%s</b>.'),
+              [name, project?.title ?? '']
+            ) : interpolate(
+              gettext('You are about to remove the invite of <b>%s</b> from the project <b>%s</b>.'),
+              [name, project?.title ?? '']
+            )
+          )
+        }
+      />
+      {
+        errors.non_field_errors?.map((err, i) => (
+          <div key={i} className="text-danger mt-1">{err}</div>
+        ))
+      }
+    </Modal>
+  )
+}
+
+MembershipDeleteModal.propTypes = {
+  type: PropTypes.oneOf(['memberships', 'invites']),
+  show: PropTypes.bool.isRequired,
+  person: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    user: PropTypes.shape({
+      first_name: PropTypes.string,
+      last_name: PropTypes.string,
+      full_name: PropTypes.string,
+      email: PropTypes.string,
+    }),
+    email: PropTypes.string,
+  }),
+  onClose: PropTypes.func.isRequired,
+  isAdminOrSiteManager: PropTypes.bool,
+  isMember: PropTypes.bool,
+  isCurrentUser: PropTypes.bool,
+}
+
+export default MembershipDeleteModal
diff --git a/rdmo/projects/assets/js/project/components/areas/memberships/MembershipInviteModal.js b/rdmo/projects/assets/js/project/components/areas/memberships/MembershipInviteModal.js
new file mode 100644
index 0000000000..762b52efd5
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/memberships/MembershipInviteModal.js
@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { isEmpty } from 'lodash'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+import Modal from 'rdmo/core/assets/js/components/Modal'
+import Tooltip from 'rdmo/core/assets/js/components/Tooltip'
+
+import { clearProjectErrors, createProjectMember, sendProjectInvite } from '../../../actions/projectActions'
+import { useFieldErrors } from '../../../hooks/useFieldErrors'
+
+const initialForm = { lookup: '', role: 'author' }
+
+const MembershipInviteModal = ({ show, onClose }) => {
+  const dispatch = useDispatch()
+  const templates = useSelector((state) => state.templates)
+  const { project } = useSelector((state) => state.project.project) || {}
+  const errors = useFieldErrors()
+  const perms = project?.permissions || {}
+  const roleOptions = useSelector((state) => state.roles?.roles) || []
+
+  const [formData, setFormData] = useState(initialForm)
+  const [silently, setSilently] = useState(false)
+
+  useEffect(() => {
+    if (show) {
+      setFormData(initialForm)
+      setSilently(false)
+      dispatch(clearProjectErrors())
+    }
+  }, [show])
+
+  const setField = (key, value) => {
+    setFormData(prev => ({ ...prev, [key]: value }))
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    try {
+      await dispatch(silently ? createProjectMember(formData) : sendProjectInvite(formData))
+      onClose()
+    } catch {
+      // keep modal open; errors are shown via useFieldErrors
+    }
+  }
+
+  return (
+    <Modal
+      title={gettext('Invite member to project')}
+      show={show}
+      onClose={onClose}
+      onSubmit={() => { }} // render the Modal's submit button
+      submitLabel={gettext('Invite member')}
+      submitProps={{ type: 'submit', form: 'invite-member-form' }}
+      size="modal-lg"
+    >
+      <form id="invite-member-form" onSubmit={handleSubmit}>
+        <Html html={templates.project_view_invite_member} />
+        {/* User */}
+        <div className="mb-3">
+          <label className="form-label fw-bold" htmlFor="invite-lookup">
+            {gettext('User')}
+          </label>
+          <input
+            id="invite-lookup"
+            type="text"
+            className="form-control mt-2"
+            name="lookup"
+            placeholder={gettext('Username or e-mail')}
+            required
+            value={formData.lookup}
+            onChange={(e) => setField('lookup', e.target.value)}
+          />
+          {
+            errors.lookup?.map((err, i) => (
+              <div key={i} className="text-danger mt-1">{err}</div>
+            ))
+          }
+        </div>
+        {/* Role */}
+        <div className="mb-3">
+          <label className="form-label fw-bold">{gettext('Role')}</label>
+          {
+            roleOptions.map(({ value, label }) => (
+              <div className="form-check d-flex align-items-center" key={value}>
+                <input
+                  className="form-check-input"
+                  type="radio"
+                  id={`role-${value}`}
+                  name="role"
+                  value={value}
+                  checked={formData.role === value}
+                  onChange={() => setField('role', value)}
+                />
+                <label className="form-check-label ms-2" htmlFor={`role-${value}`}>
+                  {label}
+                </label>
+                <Tooltip
+                  title={
+                    (
+                      <Html
+                        html={templates[`project_view_${value}_info`]}
+                      />
+                    )
+                  }
+                  placement="right"
+                >
+                  <i
+                    className="bi bi-info-circle ms-2"
+                    tabIndex={0}
+                    role="img"
+                    aria-label={gettext('Role information')}
+                    style={{ cursor: 'pointer' }}
+                  />
+                </Tooltip>
+              </div>
+            ))
+          }
+          {
+            errors.role?.map((err, i) => (
+              <div key={i} className="text-danger mt-1">{err}</div>
+            ))
+          }
+        </div>
+        {/* Add member silently */}
+        {
+          perms.can_add_membership && (
+            <div>
+              <label className="form-label fw-bold">{gettext('Add member silently')}</label>
+              <Html html={templates.project_view_invite_member_silently_help} />
+              <div className="form-check mt-1">
+                <input
+                  className="form-check-input"
+                  type="checkbox"
+                  id="silently"
+                  name="silently"
+                  checked={silently}
+                  onChange={(e) => setSilently(e.target.checked)}
+                />
+                <label className="form-check-label" htmlFor="silently">
+                  {gettext('Add member silently')}
+                </label>
+              </div>
+            </div>
+          )
+        }
+        {
+          !isEmpty(errors) && (
+            <div className="mt-3">
+              {
+                errors.non_field_errors?.map((err, i) => (
+                  <div key={i} className="text-danger mt-1">{err}</div>
+                ))
+              }
+            </div>
+          )
+        }
+      </form>
+    </Modal>
+  )
+}
+
+MembershipInviteModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+}
+
+export default MembershipInviteModal
diff --git a/rdmo/projects/assets/js/project/components/areas/memberships/MembershipTable.js b/rdmo/projects/assets/js/project/components/areas/memberships/MembershipTable.js
new file mode 100644
index 0000000000..7de7315db1
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/memberships/MembershipTable.js
@@ -0,0 +1,152 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import classNames from 'classnames'
+
+import { useModal } from 'rdmo/core/assets/js/hooks'
+
+import Select from 'rdmo/core/assets/js/components/Select'
+
+import { updateProjectInvite, updateProjectMember } from '../../../actions/projectActions'
+
+import MembershipDeleteModal from './MembershipDeleteModal'
+
+const MembershipTable = ({ persons, type }) => {
+  const dispatch = useDispatch()
+  const currentUser = useSelector((state) => state.user.currentUser)
+  const { project } = useSelector((state) => state.project.project) || {}
+  const perms = project?.permissions || {}
+  const roleOptions = useSelector((state) => state.roles?.roles) || []
+  const { show: showConfirm, open: openConfirm, close: closeConfirm } = useModal()
+  const [modalState, setModalState] = useState(null)
+
+  const isAdminOrSiteManager = currentUser?.is_superuser || currentUser?.is_site_manager
+
+  const openDeleteModal = (person, isCurrentUser) => {
+    setModalState({ person, isCurrentUser })
+    openConfirm()
+  }
+
+  const closeDeleteModal = () => {
+    setModalState(null)
+    closeConfirm()
+  }
+
+  const uniquePersons = (type === 'memberships') ? persons.filter(
+    (p, i, arr) => arr.findIndex(x => x.user?.id === p.user?.id) === i
+  ) : persons
+
+  return (
+    <div>
+      <table className="table align-middle">
+        <thead>
+          <tr>
+            <th style={{ width: '35%' }}>{gettext('Name')}</th>
+            <th style={{ width: '40%' }}>{gettext('Email')}</th>
+            <th style={{ width: '20%' }}>{gettext('Role')}</th>
+            <th style={{ width: '5%' }}></th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            uniquePersons?.map((person, index) => {
+              const isCurrentUser = person.user?.id === currentUser?.id
+              const isOwner = isCurrentUser && person.role == 'owner'
+
+              const showMemberAction = (type === 'memberships') && (
+                isCurrentUser ? perms.can_leave_project : perms.can_delete_membership
+              )
+              const showInviteAction = (type === 'invites') && perms.can_delete_invite
+              const showActions = (
+                showMemberAction || showInviteAction || isAdminOrSiteManager
+              ) && !person.project // do not show action buttons for hierarchy roles
+
+              const emailAddress = person.user?.email || person?.email
+              const hierarchyRole = person?.project ? interpolate(gettext('%s of %s'), [
+                roleOptions.find(opt => opt.value === person.role)?.label || '',
+                person.project.title
+              ]) : null
+
+              return (
+                <tr key={index}>
+                  <td><strong>{person?.user?.first_name} {person?.user?.last_name}</strong></td>
+                  <td>
+                    {
+                      emailAddress && (
+                        <a href={`mailto:${emailAddress}`} className="link-success text-decoration-underline">
+                          {emailAddress}
+                        </a>
+                      )
+                    }
+                  </td>
+                  <td>
+                    {
+                      hierarchyRole ? <div className="mb-1">{hierarchyRole}</div> : (
+                        <Select
+                          options={roleOptions}
+                          value={person.role}
+                          onChange={
+                            (newRole) => {
+                              if (!newRole) return
+                              (type === 'memberships') ? (
+                                dispatch(updateProjectMember(person.id, { role: newRole }))
+                              ) : dispatch(updateProjectInvite(person.id, { role: newRole }))
+                            }
+                          }
+                          isClearable={false}
+                          isDisabled={
+                            (
+                              (type === 'memberships') ? (
+                                !perms.can_change_membership || (isOwner && !isAdminOrSiteManager)
+                              ) : !perms.can_change_invite
+                            )
+                          }
+                        />
+                      )
+                    }
+                  </td>
+                  <td className="text-end">
+                    {
+                      showActions && (
+                        <button
+                          type="button" className="btn link"
+                          aria-label={isCurrentUser ? gettext('Leave') : gettext('Remove')}
+                          title={isCurrentUser ? gettext('Leave') : gettext('Remove')}
+                          onClick={() => openDeleteModal(person, isCurrentUser)}
+                        >
+                          <i
+                            className={classNames('bi', isCurrentUser ? 'bi-box-arrow-right' : 'bi-person-x')}
+                            aria-hidden="true"
+                          />
+                        </button>
+                      )
+                    }
+                  </td>
+                </tr>
+              )
+            })
+          }
+        </tbody>
+      </table>
+      {
+        modalState && (
+          <MembershipDeleteModal
+            type={type}
+            show={showConfirm}
+            person={modalState.person}
+            onClose={closeDeleteModal}
+            isAdminOrSiteManager={isAdminOrSiteManager}
+            isCurrentUser={modalState.isCurrentUser}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+MembershipTable.propTypes = {
+  persons: PropTypes.array.isRequired,
+  type: PropTypes.oneOf(['memberships', 'invites'])
+}
+
+export default MembershipTable
diff --git a/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotDeleteModal.js b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotDeleteModal.js
new file mode 100644
index 0000000000..3f2696a7c0
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotDeleteModal.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+import { deleteSnapshot } from '../../../actions/projectActions'
+import { useFieldErrors } from '../../../hooks/useFieldErrors'
+
+const SnapshotDeleteModal = ({ show, onClose, snapshot }) => {
+  const dispatch = useDispatch()
+  const errors = useFieldErrors()
+  const handleSubmit = () => {
+    try {
+      dispatch(deleteSnapshot(snapshot.id))
+      onClose()
+    } catch {
+      // keep modal open; errors are shown via useFieldErrors
+    }
+  }
+
+  return (
+    <Modal
+      title={gettext('Delete snapshot')}
+      show={show}
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      submitLabel={gettext('Delete')}
+      submitProps={{ className: 'btn btn-danger' }}
+      size="modal-lg"
+    >
+      <Html
+        html={
+          `<p>${interpolate(
+            gettext('You are about to delete snapshot <b>%s</b>.'),
+            [snapshot?.title]
+          )
+          }</p>`
+        }
+      />
+      {
+        errors.non_field_errors?.map((err, i) => (
+          <div key={i} className="text-danger mt-1">{err}</div>
+        ))
+      }
+    </Modal>
+  )
+}
+
+SnapshotDeleteModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  snapshot: PropTypes.object,
+}
+
+export default SnapshotDeleteModal
diff --git a/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotModal.js b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotModal.js
new file mode 100644
index 0000000000..02870fd43b
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotModal.js
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { Input, Textarea } from 'rdmo/core/assets/js/components/forms'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+import { clearProjectErrors, createSnapshot, updateSnapshot } from '../../../actions/projectActions'
+import { useFieldErrors } from '../../../hooks/useFieldErrors'
+
+const initialForm = { title: '', description: '' }
+
+const SnapshotModal = ({ show, onClose, snapshot }) => {
+  const templates = useSelector((state) => state.templates)
+  const dispatch = useDispatch()
+  const errors = useFieldErrors()
+
+  const [formData, setFormData] = useState(initialForm)
+
+  const isEdit = !!(snapshot && snapshot.id)
+  const formId = isEdit ? 'update-snapshot-form' : 'create-snapshot-form'
+
+  useEffect(() => {
+    if (show) {
+      if (isEdit) {
+        setFormData({
+          title: snapshot.title,
+          description: snapshot.description
+        })
+      } else {
+        setFormData(initialForm)
+      }
+      dispatch(clearProjectErrors())
+    }
+  }, [show, snapshot, dispatch])
+
+  const setField = (key, value) => {
+    setFormData(prev => ({ ...prev, [key]: value }))
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    try {
+      if (snapshot && snapshot.id) {
+        dispatch(updateSnapshot(snapshot.id, formData))
+      } else {
+        dispatch(createSnapshot(formData))
+      }
+      onClose()
+    } catch {
+      // keep modal open; errors are shown via useFieldErrors
+    }
+  }
+
+  return (
+    <Modal
+      title={isEdit ? gettext('Update snapshot') : gettext('Create new snapshot')}
+      show={show}
+      onClose={onClose}
+      onSubmit={() => { }} // render the Modal's submit button
+      submitLabel={isEdit ? gettext('Update snapshot') : gettext('Create snapshot')}
+      submitProps={{ type: 'submit', form: formId }}
+      size="modal-lg"
+    >
+      <form id={formId} onSubmit={handleSubmit}>
+        <Input
+          id="snapshot-title"
+          type="text"
+          className="mt-2"
+          label={gettext('Title')}
+          name="title"
+          required
+          value={formData.title}
+          onChange={(value) => setField('title', value)}
+        />
+        <Textarea
+          id="snapshot-description"
+          className="mt-2"
+          help={<Html html={templates.project_view_snapshot_description_help} />}
+          label={gettext('Description')}
+          name="description"
+          value={formData.description}
+          onChange={(value) => setField('description', value)}
+          rows={4}
+        />
+
+        {
+          errors.non_field_errors?.map((err, i) => (
+            <div key={i} className="text-danger mt-1">{err}</div>
+          ))
+        }
+      </form>
+    </Modal>
+  )
+}
+
+SnapshotModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  snapshot: PropTypes.object,
+}
+
+export default SnapshotModal
diff --git a/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotRollbackModal.js b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotRollbackModal.js
new file mode 100644
index 0000000000..3f3c3cee9e
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotRollbackModal.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch } from 'react-redux'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+import { rollbackSnapshot } from '../../../actions/projectActions'
+import { useFieldErrors } from '../../../hooks/useFieldErrors'
+
+const SnapshotRollbackModal = ({ show, onClose, snapshot }) => {
+  const dispatch = useDispatch()
+  const errors = useFieldErrors()
+  const handleSubmit = () => {
+    try {
+      dispatch(rollbackSnapshot(snapshot.id))
+      onClose()
+    } catch {
+      // keep modal open; errors are shown via useFieldErrors
+    }
+  }
+
+  return (
+    <Modal
+      title={gettext('Roll back to snapshot')}
+      show={show}
+      onClose={onClose}
+      onSubmit={handleSubmit}
+      submitLabel={gettext('Roll back')}
+      submitProps={{ className: 'btn btn-danger' }}
+      size="modal-lg"
+    >
+      <Html
+        html={
+          `<p>${interpolate(
+            gettext('You are about to roll back all values to the snapshot <b>%s</b>.'),
+            [snapshot?.title]
+          )
+          }</p>` +
+          `<p>${gettext('All newer changes will be permanently discarded.')}</p>` +
+          `<p>${gettext('This action cannot be undone!')}</p>`
+        }
+      />
+      {
+        errors.non_field_errors?.map((err, i) => (
+          <div key={i} className="text-danger mt-1">{err}</div>
+        ))
+      }
+    </Modal>
+  )
+}
+
+SnapshotRollbackModal.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  snapshot: PropTypes.object,
+}
+
+export default SnapshotRollbackModal
diff --git a/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotTable.js b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotTable.js
new file mode 100644
index 0000000000..201f670911
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/areas/snapshots/SnapshotTable.js
@@ -0,0 +1,154 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { Link } from 'rdmo/core/assets/js/components'
+import { useFormattedDateTime } from 'rdmo/core/assets/js/hooks'
+import { useModal } from 'rdmo/core/assets/js/hooks'
+import { language } from 'rdmo/core/assets/js/utils'
+
+import { navigateDashboard } from '../../../actions/projectActions'
+import { buildPath } from '../../../utils/location'
+
+import SnapshotDeleteModal from './SnapshotDeleteModal'
+import SnapshotModal from './SnapshotModal'
+import SnapshotRollbackModal from './SnapshotRollbackModal'
+
+const SnapshotTable = ({ snapshots }) => {
+  const dispatch = useDispatch()
+  const { project } = useSelector((state) => state.project.project) || {}
+  const perms = project?.permissions || {}
+
+  const updateModal = useModal()
+  const rollbackModal = useModal()
+  const deleteModal = useModal()
+  const [selectedSnapshot, setSelectedSnapshot] = useState(null)
+
+  const openRollbackModal = (snapshot) => {
+    setSelectedSnapshot(snapshot)
+    rollbackModal.open()
+  }
+
+  const openUpdateModal = (snapshot) => {
+    setSelectedSnapshot(snapshot)
+    updateModal.open()
+  }
+
+  const openDeleteModal = (snapshot) => {
+    setSelectedSnapshot(snapshot)
+    deleteModal.open()
+  }
+
+  return (
+    <div>
+      <table className="table">
+        <thead>
+          <tr>
+            <th style={{ width: '35%' }}>{gettext('Snapshot')}</th>
+            <th style={{ width: '40%' }}>{gettext('Description')}</th>
+            <th style={{ width: '15%' }}>{gettext('Created')}</th>
+            <th style={{ width: '10%' }}></th>
+          </tr>
+        </thead>
+        <tbody>
+          {
+            snapshots?.map((snapshot) => {
+              const documentsLocation = { area: 'snapshots', snapshotId: snapshot.id }
+              return (
+                <tr key={snapshot.id}>
+                  <td>
+                    <strong>{snapshot.title}</strong>
+                  </td>
+                  <td>
+                    {snapshot.description}
+                  </td>
+                  <td>
+                    {useFormattedDateTime(snapshot.created, language)}
+                  </td>
+                  <td>
+                    <div className="d-flex justify-content-end align-items-center gap-1">
+                      {
+                        perms.can_view_snapshot && (
+                          <Link
+                            title={gettext('View documents')}
+                            href={buildPath(documentsLocation)}
+                            onClick={() => dispatch(navigateDashboard(documentsLocation))}
+                          >
+                            <i className={'bi bi-file-text'} aria-hidden="true" />
+                          </Link>
+                        )
+                      }
+                      {
+                        perms.can_change_snapshot && (
+                          <button
+                            type="button"
+                            className="link"
+                            aria-label={gettext('Update snapshot')}
+                            title={gettext('Update snapshot')}
+                            onClick={() => openUpdateModal(snapshot)}
+                          >
+                            <i className={'bi bi-pencil'} aria-hidden="true" />
+                          </button>
+                        )
+                      }
+                      {
+                        perms.can_rollback_snapshot && (
+                          <button
+                            type="button"
+                            className="link"
+                            aria-label={gettext('Rollback to snapshot')}
+                            title={gettext('Rollback to snapshot')}
+                            onClick={() => openRollbackModal(snapshot)}
+                          >
+                            <i className={'bi bi-reply-fill'} aria-hidden="true" />
+                          </button>
+                        )
+                      }
+                      {
+                        perms.can_delete_snapshot && (
+                          <button
+                            type="button"
+                            className="link"
+                            aria-label={gettext('Delete snapshot')}
+                            title={gettext('Delete snapshot')}
+                            onClick={() => openDeleteModal(snapshot)}
+                          >
+                            <i className={'bi bi-trash'} aria-hidden="true" />
+                          </button>
+                        )
+                      }
+                    </div>
+                  </td>
+                </tr>
+              )
+            })
+          }
+        </tbody>
+      </table>
+      {
+        selectedSnapshot && (
+          <>
+            <SnapshotModal
+              show={updateModal.show}
+              onClose={updateModal.close}
+              snapshot={selectedSnapshot} />
+            <SnapshotRollbackModal
+              show={rollbackModal.show}
+              onClose={rollbackModal.close}
+              snapshot={selectedSnapshot} />
+            <SnapshotDeleteModal
+              show={deleteModal.show}
+              onClose={deleteModal.close}
+              snapshot={selectedSnapshot} />
+          </>
+        )
+      }
+    </div>
+  )
+}
+
+SnapshotTable.propTypes = {
+  snapshots: PropTypes.array.isRequired,
+}
+
+export default SnapshotTable
diff --git a/rdmo/projects/assets/js/project/components/helper/ExportsDropdown.js b/rdmo/projects/assets/js/project/components/helper/ExportsDropdown.js
new file mode 100644
index 0000000000..475e645ce6
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/helper/ExportsDropdown.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { Dropdown } from 'bootstrap'
+import classNames from 'classnames'
+
+const ExportsDropdown = ({ onExport, align = 'end' }) => {
+
+  const exportFormats = useSelector((state) => state.settings.export_formats) ?? {}
+
+
+  const handleClick = (event, format) => {
+    event.stopPropagation()
+    onExport(format)
+
+    // ensure that the dropdown is closed
+    const dropdownElement = event.currentTarget.closest('.dropdown')?.querySelector('[data-bs-toggle="dropdown"]')
+    const dropdown = Dropdown.getInstance(dropdownElement)
+    dropdown?.hide()
+  }
+
+  return (
+    <div className={classNames('dropdown', {'dropdown-menu-end': align == 'end'})}>
+      <button
+        type="button"
+        className="link text-nowrap"
+        data-bs-toggle="dropdown"
+        data-bs-popper-config='{"strategy":"fixed"}'
+        aria-expanded="false"
+        onClick={(event) => event.stopPropagation()}
+        title={gettext('Download')}
+      >
+        {gettext('Download')} <i className="bi bi-caret-down-fill ms-1" />
+      </button>
+
+      <ul className="dropdown-menu">
+        {
+          exportFormats.map(([format, label]) => (
+            <li key={format}>
+              <button className="dropdown-item" onClick={(event) => handleClick(event, format)}>
+                {label}
+              </button>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  )
+}
+
+ExportsDropdown.propTypes = {
+  onExport: PropTypes.func.isRequired,
+  align: PropTypes.oneOf(['start', 'end'])
+}
+
+export default ExportsDropdown
diff --git a/rdmo/projects/assets/js/project/components/helper/SnapshotsDropdown.js b/rdmo/projects/assets/js/project/components/helper/SnapshotsDropdown.js
new file mode 100644
index 0000000000..fe14c914b8
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/helper/SnapshotsDropdown.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { Dropdown } from 'bootstrap'
+import classNames from 'classnames'
+import { isNil } from 'lodash'
+
+const SnapshotsDropdown = ({ onChange }) => {
+  const { snapshotId } = useSelector((state) => state.config)
+  const { snapshots } = useSelector((state) => state.project?.project)
+
+  const currentLabel = gettext('Current data')
+  const currentSnapshot = snapshots.find(snapshot => snapshot.id == snapshotId)
+
+  const handleClick = (event, snapshot) => {
+    event.stopPropagation()
+
+    onChange(snapshot)
+
+    // ensure that the dropdown is closed
+    const dropdownElement = event.currentTarget.closest('.dropdown')?.querySelector('[data-bs-toggle="dropdown"]')
+    const dropdown = Dropdown.getInstance(dropdownElement)
+    dropdown?.hide()
+  }
+
+  return (
+    <div className="dropdown dropdown-menu-end">
+      <button
+        type="button"
+        className="link text-nowrap"
+        data-bs-toggle="dropdown"
+        data-bs-popper-config='{"strategy":"fixed"}'
+        aria-expanded="false"
+        onClick={(event) => event.stopPropagation()}
+        title={gettext('Snapshots')}
+      >
+        <span>{currentSnapshot ? currentSnapshot?.title : currentLabel}</span>
+        <i className="bi bi-caret-down-fill ms-1" />
+      </button>
+
+      <ul className="dropdown-menu">
+        <button
+          className={classNames('dropdown-item', { active: isNil(snapshotId) })}
+          onClick={(event) => handleClick(event, null)}>
+          {currentLabel}
+        </button>
+        {
+          snapshots.map((snapshot) => (
+            <li key={snapshot.id}>
+              <button
+                className={classNames('dropdown-item', {active: snapshot.id == snapshotId})}
+                onClick={(event) => handleClick(event, snapshot)}>
+                {snapshot.title}
+              </button>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  )
+}
+
+SnapshotsDropdown.propTypes = {
+  onChange: PropTypes.func.isRequired
+}
+
+export default SnapshotsDropdown
diff --git a/rdmo/projects/assets/js/project/components/helper/Tile.js b/rdmo/projects/assets/js/project/components/helper/Tile.js
new file mode 100644
index 0000000000..e4a53c2b0d
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/helper/Tile.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Tile = ({ title, children, className = '', size = 'normal', style = 'normal', onClick }) => {
+  const sizeClasses = {
+    compact: 'col-12 col-md-4',  // 3 tiles per row
+    normal: 'col-12 col-md-6',   // 2 tiles per row
+    fullWidth: 'col-12',         // 1 tile per row
+  }
+
+  const tileStyleClass = style === 'warning' ? 'tile-warning' : ''
+
+  return (
+    <div className={`mb-4 ${sizeClasses[size]} ${className}`}>
+      {title && <h2 className="fw-bold mb-2">{title}</h2>}
+      <div
+        className={`card border-0 bg-white rounded-3 shadow-sm p-0 ${tileStyleClass}`}
+        style={onClick ? { cursor: 'pointer' } : undefined}
+        onClick={onClick}
+      >
+        <div className="card-body">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+Tile.propTypes = {
+  title: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['compact', 'normal', 'fullWidth']),
+  style: PropTypes.oneOf(['normal', 'warning']),
+  onClick: PropTypes.func,
+}
+
+export default Tile
diff --git a/rdmo/projects/assets/js/project/components/helper/TileGrid.js b/rdmo/projects/assets/js/project/components/helper/TileGrid.js
new file mode 100644
index 0000000000..61a1974e19
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/helper/TileGrid.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Tile from './Tile'
+
+const TileGrid = ({ tiles, size = 'normal' }) => {
+  return (
+    <div className="container-fluid">
+      <div className="row">
+        {
+          tiles.map((tile, index) => (
+            <Tile key={index} title={tile.title} size={size}>
+              {tile.content}
+            </Tile>
+          ))
+        }
+      </div>
+    </div>
+  )
+}
+
+TileGrid.propTypes = {
+  tiles: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      content: PropTypes.node.isRequired,
+    })
+  ).isRequired,
+  size: PropTypes.oneOf(['compact', 'normal', 'fullWidth']),
+}
+
+export default TileGrid
diff --git a/rdmo/projects/assets/js/project/components/helper/View.js b/rdmo/projects/assets/js/project/components/helper/View.js
new file mode 100644
index 0000000000..bd816b0cf4
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/helper/View.js
@@ -0,0 +1,56 @@
+import React from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { isNil } from 'lodash'
+
+import Html from 'rdmo/core/assets/js/components/Html'
+
+import { downloadAnswers, downloadView, navigateDashboard } from '../../actions/projectActions'
+
+import ExportsDropdown from './ExportsDropdown'
+import SnapshotsDropdown from './SnapshotsDropdown'
+
+const View = () => {
+  const dispatch = useDispatch()
+
+  const { snapshotId, viewId, detail } = useSelector((state) => state.config)
+  const { currentView } = useSelector((state) => state.project)
+
+  const handleSnapshotChange = (snapshot) => {
+    if (isNil(snapshot)) {
+      dispatch(navigateDashboard({ area: 'documents', snapshotId: null, viewId, detail }))
+    } else {
+      dispatch(navigateDashboard({ area: 'snapshots', snapshotId: snapshot.id, viewId, detail }))
+    }
+  }
+
+  const handleExport = (format) => {
+    if (detail == 'answers') {
+      dispatch(downloadAnswers(snapshotId, format))
+    } else if (!isNil(viewId)) {
+      dispatch(downloadView(snapshotId, viewId, format))
+    }
+  }
+
+  const handleBack = () => {
+    if (isNil(snapshotId)) {
+      dispatch(navigateDashboard({ area: 'documents' }))
+    } else {
+      dispatch(navigateDashboard({ area: 'snapshots', snapshotId }))
+    }
+  }
+
+  return currentView && (
+    <div className="project-view">
+      <div className="float-end d-flex gap-3">
+        <button className="link" onClick={handleBack}>
+          <i className="bi bi-arrow-left"></i> {gettext('Back')}
+        </button>
+        <SnapshotsDropdown onChange={handleSnapshotChange}/>
+        <ExportsDropdown onExport={handleExport} />
+      </div>
+      <Html html={currentView.html} />
+    </div>
+  )
+}
+
+export default View
diff --git a/rdmo/projects/assets/js/project/components/helper/ViewTile.js b/rdmo/projects/assets/js/project/components/helper/ViewTile.js
new file mode 100644
index 0000000000..2b920b97ca
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/helper/ViewTile.js
@@ -0,0 +1,37 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Img from 'rdmo/core/assets/js/components/Img'
+import Truncate from 'rdmo/core/assets/js/components/Truncate'
+
+import ExportsDropdown from './ExportsDropdown'
+
+const ViewTile = ({ title, help, onClick, onExport }) => (
+  <div className="card card-tile cursor-pointer mb-4" onClick={onClick}>
+    <div className="d-flex">
+      <Img src="/core/img/document.png" className="img-fluid" alt={gettext('Document image')} />
+      <div className="card-body overflow-hidden">
+        <div className="d-flex flex-column justify-content-center h-100 foo">
+          <div>
+            <h3 className="card-title mb-2">
+              <Truncate text={title} selector=".card-body" />
+            </h3>
+            <p className="card-text text-muted mb-2">
+              <Truncate text={help} selector=".card-body" />
+            </p>
+            <ExportsDropdown onExport={onExport} align="start" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+ViewTile.propTypes = {
+  title: PropTypes.string.isRequired,
+  help: PropTypes.string,
+  onClick: PropTypes.func,
+  onExport: PropTypes.func
+}
+
+export default ViewTile
diff --git a/rdmo/projects/assets/js/project/components/helper/index.js b/rdmo/projects/assets/js/project/components/helper/index.js
new file mode 100644
index 0000000000..fafb2dc329
--- /dev/null
+++ b/rdmo/projects/assets/js/project/components/helper/index.js
@@ -0,0 +1,2 @@
+export { default as Tile } from './Tile'
+export { default as TileGrid } from './TileGrid'
diff --git a/rdmo/projects/assets/js/project/hooks/useFieldErrors.js b/rdmo/projects/assets/js/project/hooks/useFieldErrors.js
new file mode 100644
index 0000000000..966ac62e2e
--- /dev/null
+++ b/rdmo/projects/assets/js/project/hooks/useFieldErrors.js
@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import { useSelector } from 'react-redux'
+
+const EMPTY_ERRORS = {}
+
+export const useFieldErrors = () => {
+  // const rawErrors = useSelector((state) => state.project?.errors?.[0]?.errors) || EMPTY_ERRORS
+  const rawErrors = useSelector((state) =>
+    state.project?.errors?.[0]?.errors ||
+    state.projects?.errors?.[0]?.errors ||
+    state.projects?.errors ||
+    EMPTY_ERRORS
+  ) || EMPTY_ERRORS
+
+  return useMemo(() => (
+    Object.fromEntries(
+      Object.entries(rawErrors).map(([field, err]) => [
+        field,
+        Array.isArray(err) ? err : err != null ? [err] : []
+      ])
+    )
+  ), [rawErrors])
+}
diff --git a/rdmo/projects/assets/js/project/reducers/projectReducer.js b/rdmo/projects/assets/js/project/reducers/projectReducer.js
new file mode 100644
index 0000000000..4001f4e3d6
--- /dev/null
+++ b/rdmo/projects/assets/js/project/reducers/projectReducer.js
@@ -0,0 +1,154 @@
+import * as actionTypes from '../actions/actionTypes'
+
+const initialState = {
+  project: null,
+  invites: null,
+  errors: [],
+  currentView: null,
+}
+
+const clearErrors = (state) => ({
+  ...state,
+  errors: []
+})
+
+const appendError = (state, action) => ({
+  ...state,
+  errors: [...state.errors, { actionType: action.type, ...action.error }]
+})
+
+export default function projectReducer(state = initialState, action) {
+  switch (action.type) {
+    // INIT actions - clear errors
+    case actionTypes.FETCH_PROJECT_INIT:
+    case actionTypes.UPDATE_PROJECT_INIT:
+    case actionTypes.DELETE_PROJECT_INIT:
+    case actionTypes.FETCH_PROJECT_INVITES_INIT:
+    case actionTypes.CREATE_PROJECT_MEMBER_INIT:
+    case actionTypes.UPDATE_PROJECT_MEMBER_INIT:
+    case actionTypes.DELETE_PROJECT_MEMBER_INIT:
+    case actionTypes.SEND_INVITE_INIT:
+    case actionTypes.UPDATE_PROJECT_INVITE_INIT:
+    case actionTypes.DELETE_PROJECT_INVITE_INIT:
+    case actionTypes.LEAVE_PROJECT_INIT:
+    case actionTypes.CREATE_SNAPSHOT_INIT:
+    case actionTypes.UPDATE_SNAPSHOT_INIT:
+    case actionTypes.DELETE_SNAPSHOT_INIT:
+    case actionTypes.FETCH_ANSWERS_INIT:
+    case actionTypes.FETCH_VIEW_INIT:
+    case actionTypes.CLEAR_PROJECT_ERRORS:
+      return clearErrors(state)
+    // ERROR actions - append error
+    case actionTypes.FETCH_PROJECT_ERROR:
+    case actionTypes.UPDATE_PROJECT_ERROR:
+    case actionTypes.DELETE_PROJECT_ERROR:
+    case actionTypes.FETCH_PROJECT_INVITES_ERROR:
+    case actionTypes.CREATE_PROJECT_MEMBER_ERROR:
+    case actionTypes.UPDATE_PROJECT_MEMBER_ERROR:
+    case actionTypes.DELETE_PROJECT_MEMBER_ERROR:
+    case actionTypes.SEND_INVITE_ERROR:
+    case actionTypes.UPDATE_PROJECT_INVITE_ERROR:
+    case actionTypes.DELETE_PROJECT_INVITE_ERROR:
+    case actionTypes.LEAVE_PROJECT_ERROR:
+    case actionTypes.CREATE_SNAPSHOT_ERROR:
+    case actionTypes.UPDATE_SNAPSHOT_ERROR:
+    case actionTypes.DELETE_SNAPSHOT_ERROR:
+    case actionTypes.FETCH_ANSWERS_ERROR:
+    case actionTypes.FETCH_VIEW_ERROR:
+      return appendError(state, action)
+    case actionTypes.FETCH_PROJECT_SUCCESS:
+      return { ...state, project: action.project }
+    case actionTypes.UPDATE_PROJECT_SUCCESS:
+      return { ...state, project: action.project }
+    case actionTypes.DELETE_PROJECT_SUCCESS:
+      return { ...state, project: null }
+    case actionTypes.FETCH_PROJECT_INVITES_SUCCESS:
+      return { ...state, invites: action.invites }
+    case actionTypes.CREATE_PROJECT_MEMBER_SUCCESS:
+      return {
+        ...state,
+        project: { ...state.project, memberships: [...(state.project?.memberships || []), action.member] }
+      }
+    case actionTypes.UPDATE_PROJECT_MEMBER_SUCCESS:
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          memberships: state.project?.memberships.map(m => (m.id == action.member.id ? (
+            { ...m, role: action.member.role }
+          ) : m))
+        }
+      }
+    case actionTypes.DELETE_PROJECT_MEMBER_SUCCESS: {
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          memberships: state.project.memberships?.filter(m => m.id !== action.membershipId)
+        }
+      }
+    }
+    case actionTypes.SEND_INVITE_SUCCESS:
+      return { ...state, invites: [...state.invites, action.invite] }
+    case actionTypes.UPDATE_PROJECT_INVITE_SUCCESS:
+      return {
+        ...state,
+        invites: state.invites?.map(i => (i.id == action.invite.id ? { ...i, role: action.invite.role } : i))
+      }
+    case actionTypes.DELETE_PROJECT_INVITE_SUCCESS: {
+      return { ...state, invites: state.invites.filter(i => i.id !== action.inviteId) }
+    }
+    case actionTypes.LEAVE_PROJECT_SUCCESS: {
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          memberships: state.project.memberships?.filter(m => m.id !== action.membershipId)
+        }
+      }
+    }
+    case actionTypes.CREATE_SNAPSHOT_SUCCESS:
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          snapshots: [action.snapshot, ...(state.project?.snapshots || [])]
+        }
+      }
+    case actionTypes.DELETE_SNAPSHOT_SUCCESS: {
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          snapshots: state.project?.snapshots.filter(s => s.id !== action.snapshotId)
+        }
+      }
+    }
+
+    case actionTypes.UPDATE_SNAPSHOT_SUCCESS: {
+      return {
+        ...state,
+        project: {
+          ...state.project,
+          snapshots: state.project?.snapshots.map(s =>
+            s.id === action.snapshot.id ? { ...s, ...action.snapshot } : s
+          )
+        }
+      }
+    }
+    case actionTypes.FETCH_ANSWERS_SUCCESS:
+    case actionTypes.FETCH_VIEW_SUCCESS:
+    case actionTypes.SET_PROJECT_ANSWERS:
+      return {
+        ...state,
+        currentView: action.view
+      }
+    case actionTypes.CLEAR_CURRENT_VIEW:
+      return {
+        ...state,
+        currentView: null
+      }
+    default:
+      return state
+  }
+}
diff --git a/rdmo/projects/assets/js/project/store/configureStore.js b/rdmo/projects/assets/js/project/store/configureStore.js
new file mode 100644
index 0000000000..f140f6ed7f
--- /dev/null
+++ b/rdmo/projects/assets/js/project/store/configureStore.js
@@ -0,0 +1,88 @@
+import { applyMiddleware, combineReducers, createStore } from 'redux'
+import thunk from 'redux-thunk'
+
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
+import * as settingsActions from 'rdmo/core/assets/js/actions/settingsActions'
+import * as templateActions from 'rdmo/core/assets/js/actions/templateActions'
+import * as userActions from 'rdmo/core/assets/js/actions/userActions'
+import configReducer from 'rdmo/core/assets/js/reducers/configReducer'
+import pendingReducer from 'rdmo/core/assets/js/reducers/pendingReducer'
+import settingsReducer from 'rdmo/core/assets/js/reducers/settingsReducer'
+import templateReducer from 'rdmo/core/assets/js/reducers/templateReducer'
+import userReducer from 'rdmo/core/assets/js/reducers/userReducer'
+import { getConfigFromLocalStorage } from 'rdmo/core/assets/js/utils/config'
+import { checkStoreId } from 'rdmo/core/assets/js/utils/store'
+
+import * as rolesActions from '../../common/actions/rolesActions'
+import rolesReducer from '../../common/reducers/rolesReducer'
+import * as projectActions from '../actions/projectActions'
+import projectReducer from '../reducers/projectReducer'
+import { parseLocation } from '../utils/location'
+import { projectId } from '../utils/meta'
+
+export default function configureStore() {
+  // empty localStorage in new session
+  checkStoreId()
+
+  const middlewares = [thunk]
+
+  if (process.env.NODE_ENV === 'development') {
+    const { logger } = require('redux-logger')
+    middlewares.push(logger)
+  }
+
+  const rootReducer = combineReducers({
+    config: configReducer,
+    pending: pendingReducer,
+    project: projectReducer,
+    settings: settingsReducer,
+    templates: templateReducer,
+    user: userReducer,
+    roles: rolesReducer
+  })
+
+  const initialState = {
+    config: {
+      prefix: 'rdmo.project'
+    }
+  }
+
+  const store = createStore(
+    rootReducer,
+    initialState,
+    applyMiddleware(...middlewares)
+  )
+
+  const initDashboardFromLocation = () => {
+    const location = parseLocation()
+    store.dispatch(projectActions.navigateDashboard(location))
+  }
+
+  // this event is triggered when the page first loads
+  window.addEventListener('load', () => {
+    getConfigFromLocalStorage('rdmo.project').forEach(([path, value]) => {
+      store.dispatch(configActions.updateConfig(path, value))
+    })
+
+    Promise.all([
+      store.dispatch(settingsActions.fetchSettings()),
+      store.dispatch(templateActions.fetchTemplates()),
+      store.dispatch(userActions.fetchCurrentUser()),
+      store.dispatch(projectActions.fetchProject()),
+      store.dispatch(rolesActions.fetchRoles())
+    ]).then(() => {
+      const permissions = store.getState().project.project.project.permissions
+      if (permissions.can_view_invite) {
+        store.dispatch(projectActions.fetchProjectInvites(projectId))
+      }
+      initDashboardFromLocation()
+    })
+  })
+
+  // this event is triggered when when the forward/back buttons are used
+  window.addEventListener('popstate', () => {
+    initDashboardFromLocation()
+  })
+
+  return store
+}
diff --git a/rdmo/projects/assets/js/project/utils/location.js b/rdmo/projects/assets/js/project/utils/location.js
new file mode 100644
index 0000000000..369e20eb06
--- /dev/null
+++ b/rdmo/projects/assets/js/project/utils/location.js
@@ -0,0 +1,57 @@
+import { isNil } from 'lodash'
+
+import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
+
+import { projectId } from '../utils/meta'
+
+export const locationKeys = ['area', 'snapshotId', 'viewId', 'detail']
+
+export const parseLocation = () => {
+  let pathname = window.location.pathname
+  let location = {
+    'area': 'dashboard'
+  }
+
+  if (pathname.length > 1) {
+    pathname = pathname.replace(/\/+$/, '')
+  }
+
+  const patterns = [
+    /\/projects\/\d+\/(?<area>(snapshots))\/(?<snapshotId>\d+)\/views\/(?<viewId>\d+)[/]*$/,
+    /\/projects\/\d+\/(?<area>(snapshots))\/(?<snapshotId>\d+)\/(?<detail>[a-z-]+)[/]*$/,
+    /\/projects\/\d+\/(?<area>(snapshots))\/(?<snapshotId>\d+)[/]*$/,
+    /\/projects\/\d+\/(?<area>[a-z-]+)\/views\/(?<viewId>\d+)[/]*$/,
+    /\/projects\/\d+\/(?<area>[a-z-]+)\/(?<detail>[a-z-]+)[/]*$/,
+    /\/projects\/\d+\/(?<area>[a-z-]+)[/]*$/
+  ]
+
+  for (const pattern of patterns) {
+    const match = pathname.match(pattern)
+    if (match) {
+      location = match.groups
+      break
+    }
+  }
+
+  return location
+}
+
+export const updateLocation = (location) => {
+  const pathname = buildPath(location)
+  if (pathname != window.location.pathname) {
+    history.pushState(null, null, pathname)
+  }
+}
+
+export const buildPath = ({ area, snapshotId, viewId, detail }) => {
+  const segments = [baseUrl, 'projects', projectId]
+
+  if (!isNil(area) && area != 'dashboard') {
+    segments.push(area)
+  }
+  if (!isNil(snapshotId)) segments.push(snapshotId)
+  if (!isNil(viewId)) segments.push('views', viewId)
+  if (!isNil(detail)) segments.push(detail)
+
+  return segments.join('/') + '/'
+}
diff --git a/rdmo/projects/assets/js/project/utils/meta.js b/rdmo/projects/assets/js/project/utils/meta.js
new file mode 100644
index 0000000000..1894773146
--- /dev/null
+++ b/rdmo/projects/assets/js/project/utils/meta.js
@@ -0,0 +1,4 @@
+// take the baseurl from the <head> of the django template
+import { toNumber } from 'lodash'
+
+export const projectId = toNumber((document.querySelector('meta[name="project"]')?.content || '').replace(/\/+$/, '')) || null
diff --git a/rdmo/projects/assets/js/projects.js b/rdmo/projects/assets/js/projects.js
index 5cab9b99d0..25c050eada 100644
--- a/rdmo/projects/assets/js/projects.js
+++ b/rdmo/projects/assets/js/projects.js
@@ -1,15 +1,14 @@
 import React from 'react'
-import { createRoot } from 'react-dom/client'
-import { Provider } from 'react-redux'
-
-import configureStore from './projects/store/configureStore'
-
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
 
 import Pending from '../../../core/assets/js/containers/Pending'
 
-import Main from './projects/containers/Main'
+import configureStore from './projects/store/configureStore'
+
+import Main from './projects/components/Main'
 
 const store = configureStore()
 
diff --git a/rdmo/projects/assets/js/projects/actions/actionTypes.js b/rdmo/projects/assets/js/projects/actions/actionTypes.js
index 58da0a80ba..db0c1b9791 100644
--- a/rdmo/projects/assets/js/projects/actions/actionTypes.js
+++ b/rdmo/projects/assets/js/projects/actions/actionTypes.js
@@ -16,3 +16,11 @@ export const FETCH_FILETYPES_SUCCESS = 'FETCH_FILETYPES_SUCCESS'
 export const FETCH_IMPORT_URLS_ERROR = 'FETCH_IMPORT_URLS_ERROR'
 export const FETCH_IMPORT_URLS_INIT = 'FETCH_IMPORT_URLS_INIT'
 export const FETCH_IMPORT_URLS_SUCCESS = 'FETCH_IMPORT_URLS_SUCCESS'
+export const CREATE_PROJECT_INIT = 'CREATE_PROJECT_INIT'
+export const CREATE_PROJECT_SUCCESS = 'CREATE_PROJECT_SUCCESS'
+export const CREATE_PROJECT_ERROR = 'CREATE_PROJECT_ERROR'
+export const COPY_PROJECT_INIT = 'COPY_PROJECT_INIT'
+export const COPY_PROJECT_SUCCESS = 'COPY_PROJECT_SUCCESS'
+export const COPY_PROJECT_ERROR = 'COPY_PROJECT_ERROR'
+export const UPDATE_PROJECT_INIT = 'UPDATE_PROJECT_INIT'
+export const UPDATE_PROJECT_ERROR = 'UPDATE_PROJECT_ERROR'
diff --git a/rdmo/projects/assets/js/projects/actions/projectsActions.js b/rdmo/projects/assets/js/projects/actions/projectsActions.js
index 91101c3c9a..a2e1c0519c 100644
--- a/rdmo/projects/assets/js/projects/actions/projectsActions.js
+++ b/rdmo/projects/assets/js/projects/actions/projectsActions.js
@@ -1,12 +1,16 @@
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
+import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
+import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
+
 import ProjectsApi from '../api/ProjectsApi'
 
 import {
-  FETCH_PROJECTS_ERROR,
-  FETCH_PROJECTS_INIT,
-  FETCH_PROJECTS_SUCCESS,
-  FETCH_INVITATIONS_ERROR,
-  FETCH_INVITATIONS_INIT,
-  FETCH_INVITATIONS_SUCCESS,
+  COPY_PROJECT_ERROR,
+  COPY_PROJECT_INIT,
+  COPY_PROJECT_SUCCESS,
+  CREATE_PROJECT_ERROR,
+  CREATE_PROJECT_INIT,
+  CREATE_PROJECT_SUCCESS,
   FETCH_CATALOGS_ERROR,
   FETCH_CATALOGS_INIT,
   FETCH_CATALOGS_SUCCESS,
@@ -16,19 +20,21 @@ import {
   FETCH_IMPORT_URLS_ERROR,
   FETCH_IMPORT_URLS_INIT,
   FETCH_IMPORT_URLS_SUCCESS,
+  FETCH_INVITATIONS_ERROR,
+  FETCH_INVITATIONS_INIT,
+  FETCH_INVITATIONS_SUCCESS,
+  FETCH_PROJECTS_ERROR,
+  FETCH_PROJECTS_INIT,
+  FETCH_PROJECTS_SUCCESS,
   UPLOAD_PROJECT_ERROR,
   UPLOAD_PROJECT_INIT,
-  UPLOAD_PROJECT_SUCCESS
+  UPLOAD_PROJECT_SUCCESS,
 } from './actionTypes'
 
-import { addToPending, removeFromPending } from 'rdmo/core/assets/js/actions/pendingActions'
-
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-
 export function fetchProjects(pageReset = true) {
   const pendingId = 'fetchProjects'
 
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     if (pageReset === true) {
       dispatch(configActions.updateConfig('params.page', '1'))
     }
@@ -37,8 +43,9 @@ export function fetchProjects(pageReset = true) {
     dispatch(addToPending(pendingId))
     dispatch(fetchProjectsInit())
 
-    const action = () => myProjects ? ProjectsApi.fetchUserProjects(params || {})
-                                    : ProjectsApi.fetchProjects(params || {})
+    const action = () => myProjects ? (
+      ProjectsApi.fetchUserProjects(params || {})
+    ) : ProjectsApi.fetchProjects(params || {})
 
     return dispatch(action)
       .then(projects => dispatch(fetchProjectsSuccess(projects, !pageReset)))
@@ -48,57 +55,128 @@ export function fetchProjects(pageReset = true) {
 }
 
 export function fetchProjectsInit() {
-  return {type: FETCH_PROJECTS_INIT}
+  return { type: FETCH_PROJECTS_INIT }
 }
 
 export function fetchProjectsSuccess(projects, shouldConcatenate) {
-  return {type: FETCH_PROJECTS_SUCCESS, projects, shouldConcatenate}
+  return { type: FETCH_PROJECTS_SUCCESS, projects, shouldConcatenate }
 }
 
 export function fetchProjectsError(error) {
-  return function(dispatch) {
+  return function (dispatch) {
     if (error.constructor.name === 'BadRequestError' && error.errors.catalog) {
       dispatch(configActions.deleteConfig('params.catalog'))
       dispatch(fetchProjects())
     } else {
-      dispatch({type: FETCH_PROJECTS_ERROR, error})
+      dispatch({ type: FETCH_PROJECTS_ERROR, error })
     }
   }
 }
 
+export function createProject(data) {
+  return function (dispatch) {
+    dispatch(addToPending('createProject'))
+    dispatch({ type: CREATE_PROJECT_INIT })
+
+    return ProjectsApi.createProject(data)
+      .then(project => {
+        dispatch(removeFromPending('createProject'))
+        dispatch({ type: CREATE_PROJECT_SUCCESS, project })
+
+        window.location.href = `${baseUrl}/projects/${project.id}/`
+      })
+      .catch(error => {
+        dispatch(removeFromPending('createProject'))
+        dispatch({ type: CREATE_PROJECT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function copyProject(id, data) {
+  return function (dispatch) {
+    dispatch(addToPending('copyProject'))
+    dispatch({ type: COPY_PROJECT_INIT })
+
+    return ProjectsApi.copyProject(id, data)
+      .then(project => {
+        dispatch(removeFromPending('copyProject'))
+        dispatch({ type: COPY_PROJECT_SUCCESS, project })
+
+        window.location.href = `${baseUrl}/projects/${project.id}/`
+      })
+      .catch(error => {
+        dispatch(removeFromPending('copyProject'))
+        dispatch({ type: COPY_PROJECT_ERROR, error })
+        throw error
+      })
+  }
+}
+
+export function refetchLoadedPages() {
+  const pendingId = 'fetchProjects'
+
+  return function (dispatch, getState) {
+    const { params, myProjects } = getState().config
+    const currentPage = parseInt(params?.page ?? '1', 10)
+    const baseParams = { ...(params || {}) }
+
+    const fetchPage = (nextParams) => (
+      myProjects ? ProjectsApi.fetchUserProjects(nextParams) : ProjectsApi.fetchProjects(nextParams)
+    )
+
+    dispatch(addToPending(pendingId))
+
+    return Promise.all(
+      Array.from({ length: currentPage }, (_, index) => {
+        const page = (index + 1).toString()
+        return fetchPage({ ...baseParams, page })
+      })
+    )
+      .then(responses => {
+        const lastResponse = responses[responses.length - 1]
+
+        const mergedProjects = {
+          ...lastResponse,
+          results: responses.flatMap(response => response.results)
+        }
+
+        return dispatch(fetchProjectsSuccess(mergedProjects, false))
+      })
+      .catch(error => dispatch(fetchProjectsError(error)))
+      .finally(() => dispatch(removeFromPending(pendingId)))
+  }
+}
+
 export function fetchCatalogs() {
   const pendingId = 'fetchCatalogs'
 
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(addToPending(pendingId))
     dispatch(fetchCatalogsInit())
 
-    const action = (dispatch) => ProjectsApi.fetchCatalogs().then(catalogs => {
-      dispatch(fetchCatalogsSuccess(catalogs))
-    })
-
-    return dispatch(action)
+    return ProjectsApi.fetchCatalogs().then(catalogs => dispatch(fetchCatalogsSuccess(catalogs)))
       .catch(error => dispatch(fetchCatalogsError(error)))
       .finally(() => dispatch(removeFromPending(pendingId)))
   }
 }
 
 export function fetchCatalogsInit() {
-  return {type: FETCH_CATALOGS_INIT}
+  return { type: FETCH_CATALOGS_INIT }
 }
 
 export function fetchCatalogsSuccess(catalogs) {
-  return {type: FETCH_CATALOGS_SUCCESS, catalogs}
+  return { type: FETCH_CATALOGS_SUCCESS, catalogs }
 }
 
 export function fetchCatalogsError(error) {
-  return {type: FETCH_CATALOGS_ERROR, error}
+  return { type: FETCH_CATALOGS_ERROR, error }
 }
 
 export function fetchAllowedFileTypes() {
   const pendingId = 'fetchAllowedFileTypes'
 
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(addToPending(pendingId))
     dispatch(fetchAllowedFileTypesInit())
 
@@ -113,21 +191,21 @@ export function fetchAllowedFileTypes() {
 }
 
 export function fetchAllowedFileTypesInit() {
-  return {type: FETCH_FILETYPES_INIT}
+  return { type: FETCH_FILETYPES_INIT }
 }
 
 export function fetchAllowedFileTypesSuccess(allowedTypes) {
-  return {type: FETCH_FILETYPES_SUCCESS, allowedTypes}
+  return { type: FETCH_FILETYPES_SUCCESS, allowedTypes }
 }
 
 export function fetchAllowedFileTypesError(error) {
-  return {type: FETCH_FILETYPES_ERROR, error}
+  return { type: FETCH_FILETYPES_ERROR, error }
 }
 
 export function fetchImportUrls() {
   const pendingId = 'fetchImportUrls'
 
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(addToPending(pendingId))
     dispatch(fetchImportUrlsInit())
 
@@ -142,21 +220,21 @@ export function fetchImportUrls() {
 }
 
 export function fetchImportUrlsInit() {
-  return {type: FETCH_IMPORT_URLS_INIT}
+  return { type: FETCH_IMPORT_URLS_INIT }
 }
 
 export function fetchImportUrlsSuccess(importUrls) {
-  return {type: FETCH_IMPORT_URLS_SUCCESS, importUrls}
+  return { type: FETCH_IMPORT_URLS_SUCCESS, importUrls }
 }
 
 export function fetchImportUrlsError(error) {
-  return {type: FETCH_IMPORT_URLS_ERROR, error}
+  return { type: FETCH_IMPORT_URLS_ERROR, error }
 }
 
 export function fetchInvitations() {
-  const pendingId = 'fetchImportUrls'
+  const pendingId = 'fetchInvitations'
 
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(addToPending(pendingId))
     dispatch(fetchInvitationsInit())
 
@@ -171,21 +249,21 @@ export function fetchInvitations() {
 }
 
 export function fetchInvitationsInit() {
-  return {type: FETCH_INVITATIONS_INIT}
+  return { type: FETCH_INVITATIONS_INIT }
 }
 
 export function fetchInvitationsSuccess(invites) {
-  return {type: FETCH_INVITATIONS_SUCCESS, invites}
+  return { type: FETCH_INVITATIONS_SUCCESS, invites }
 }
 
 export function fetchInvitationsError(error) {
-  return {type: FETCH_INVITATIONS_ERROR, error}
+  return { type: FETCH_INVITATIONS_ERROR, error }
 }
 
 export function uploadProject(url, file) {
   const pendingId = 'uploadProject'
 
-  return function(dispatch) {
+  return function (dispatch) {
     dispatch(addToPending(pendingId))
     dispatch(uploadProjectInit())
 
@@ -197,13 +275,13 @@ export function uploadProject(url, file) {
 }
 
 export function uploadProjectInit() {
-  return {type: UPLOAD_PROJECT_INIT}
+  return { type: UPLOAD_PROJECT_INIT }
 }
 
 export function uploadProjectSuccess(project) {
-  return {type: UPLOAD_PROJECT_SUCCESS, project}
+  return { type: UPLOAD_PROJECT_SUCCESS, project }
 }
 
 export function uploadProjectError(error) {
-  return {type: UPLOAD_PROJECT_ERROR, error}
+  return { type: UPLOAD_PROJECT_ERROR, error }
 }
diff --git a/rdmo/projects/assets/js/projects/api/ProjectsApi.js b/rdmo/projects/assets/js/projects/api/ProjectsApi.js
index c6ce660171..28a5a0d9dc 100644
--- a/rdmo/projects/assets/js/projects/api/ProjectsApi.js
+++ b/rdmo/projects/assets/js/projects/api/ProjectsApi.js
@@ -1,8 +1,10 @@
 import Cookies from 'js-cookie'
-import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
+
 import { encodeParams } from 'rdmo/core/assets/js/utils/api'
 import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
 
+import BaseApi from 'rdmo/core/assets/js/api/BaseApi'
+
 class ProjectsApi extends BaseApi {
 
   static fetchProjects(params) {
@@ -15,8 +17,22 @@ class ProjectsApi extends BaseApi {
     return this.get(url)
   }
 
+  static createProject(data) {
+    return this.post('/api/v1/projects/projects/', data)
+  }
+
+  static copyProject(id, data) {
+    return this.post(`/api/v1/projects/projects/${id}/copy/`, data)
+  }
+
   static fetchCatalogs() {
-    return this.get('/api/v1/projects/catalogs/')
+    return fetch('/api/v1/projects/catalogs/').then(response => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        throw new Error(response.statusText)
+      }
+    })
   }
 
   static fetchAllowedFileTypes() {
@@ -36,30 +52,30 @@ class ProjectsApi extends BaseApi {
     formData.append('method', 'upload_file')
     formData.append('uploaded_file', file)
     return fetch(baseUrl + url, {
-        method: 'POST',
-        headers: {
-            'X-CSRFToken': Cookies.get('csrftoken'),
-        },
-        body: formData
+      method: 'POST',
+      headers: {
+        'X-CSRFToken': Cookies.get('csrftoken'),
+      },
+      body: formData
     }).catch(error => {
-        throw new Error(`API error: ${error.message}`)
+      throw new Error(`API error: ${error.message}`)
     }).then(response => {
-        if (response.ok) {
-            if (response.url) {
-                // open in new window:
-                // window.open(response.url, '_blank')
-                // open in same window:
-                window.location.href = response.url
-            } else {
-                throw new Error('Response does not contain a URL')
-            }
-        } else if (response.status == 400) {
-            return response.json().then(errors => {
-                throw new Error(`Validation error: ${JSON.stringify(errors)}`)
-            })
+      if (response.ok) {
+        if (response.url) {
+          // open in new window:
+          // window.open(response.url, '_blank')
+          // open in same window:
+          window.location.href = response.url
         } else {
-            throw new Error(`API error: ${response.statusText} (${response.status})`)
+          throw new Error('Response does not contain a URL')
         }
+      } else if (response.status == 400) {
+        return response.json().then(errors => {
+          throw new Error(`Validation error: ${JSON.stringify(errors)}`)
+        })
+      } else {
+        throw new Error(`API error: ${response.statusText} (${response.status})`)
+      }
     })
   }
 
diff --git a/rdmo/projects/assets/js/projects/components/Main.js b/rdmo/projects/assets/js/projects/components/Main.js
new file mode 100644
index 0000000000..cb69cf792c
--- /dev/null
+++ b/rdmo/projects/assets/js/projects/components/Main.js
@@ -0,0 +1,469 @@
+import React, { useState } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { get, isEmpty } from 'lodash'
+
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
+import { Link, SearchField } from 'rdmo/core/assets/js/components'
+import { useFormattedDateTime, useModal, useScrollToTop } from 'rdmo/core/assets/js/hooks'
+import { language } from 'rdmo/core/assets/js/utils'
+import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
+
+import Modal from 'rdmo/core/assets/js/components/Modal'
+
+import * as projectsActions from '../actions/projectsActions'
+import { HEADER_FORMATTERS, SORTABLE_COLUMNS } from '../utils'
+
+import ProjectDeleteModal from '../../project/components/areas/information/ProjectDeleteModal'
+import ProjectForm from '../../project/components/areas/information/ProjectForm'
+
+import { PendingInvitations, ProjectFilters, ProjectImport, Table } from './helper'
+
+const Main = () => {
+  const dispatch = useDispatch()
+
+  const config = useSelector(state => state.config)
+  const projectsObject = useSelector(state => state.projects)
+  const currentUserObject = useSelector(state => state.currentUser)
+
+  const [selectedProject, setSelectedProject] = useState(null)
+
+  const { showTopButton, scrollToTop } = useScrollToTop()
+
+  const { show: showInvitations, open: openInvitations, close: closeInvitations } = useModal()
+  const { show: showImport, open: openImport, close: closeImport } = useModal()
+  const { show: showEdit, open: openEdit, close: closeEdit } = useModal()
+  const { show: showCreate, open: openCreate, close: closeCreate } = useModal()
+  const { show: showDelete, open: openDelete, close: closeDelete } = useModal()
+  const { show: showCopy, open: openCopy, close: closeCopy } = useModal()
+
+  if (!projectsObject.ready) return null
+  const { allowedTypes, catalogs, importUrls, invites, projects, projectsCount, hasNext } = projectsObject
+  const { currentUser } = currentUserObject
+  const { myProjects } = config
+
+  const invitationsModalProps = {
+    title: gettext('Pending invitations'),
+    show: showInvitations,
+    onClose: closeInvitations
+  }
+
+  const importModalProps = {
+    title: gettext('Import project'),
+    show: showImport,
+    onClose: closeImport
+  }
+
+  const createModalProps = {
+    title: gettext('Create new project'),
+    size: 'modal-lg',
+    show: showCreate,
+    onClose: closeCreate,
+    onSubmit: () => { },
+    submitLabel: gettext('Create project'),
+    submitProps: {
+      type: 'submit',
+      form: 'project-create-form'
+    }
+  }
+
+  const handleCloseCopy = () => {
+    setSelectedProject(null)
+    closeCopy()
+  }
+
+  const copyModalProps = {
+    title: gettext('Copy project'),
+    size: 'modal-lg',
+    show: showCopy,
+    onClose: handleCloseCopy,
+    onSubmit: () => { },
+    submitLabel: gettext('Copy project'),
+    submitProps: {
+      type: 'submit',
+      form: 'project-copy-form'
+    }
+  }
+
+  const handleCloseEdit = () => {
+    setSelectedProject(null)
+    closeEdit()
+  }
+
+  const editModalProps = {
+    title: gettext('Update project'),
+    size: 'modal-lg',
+    show: showEdit,
+    onClose: handleCloseEdit,
+    onSubmit: () => { },
+    submitLabel: gettext('Update project'),
+    submitProps: {
+      type: 'submit',
+      form: 'project-edit-form'
+    }
+  }
+
+  const handleCloseDelete = () => {
+    setSelectedProject(null)
+    closeDelete()
+  }
+
+  const displayMessage = interpolate(
+    gettext('%s of %s projects are displayed'),
+    [projects.length > projectsCount ? projectsCount : projects.length, projectsCount]
+  )
+
+  const getProgressString = (row) => {
+    return (row.progress_total ? interpolate(gettext('%s of %s'), [row.progress_count ?? 0, row.progress_total]) : null)
+  }
+
+  const isAdminOrSiteManager = currentUser.is_superuser || currentUser.is_site_manager
+
+  const searchString = get(config, 'params.search', '')
+  const updateSearchString = (value) => {
+    value ? (dispatch(configActions.updateConfig('params.search', value))
+    ) : dispatch(configActions.deleteConfig('params.search'))
+  }
+
+  const viewLinkText = myProjects ? gettext('View all projects') : gettext('View my projects')
+  const headline = myProjects ? gettext('My projects') : gettext('All projects')
+
+  // inlining the title attributes caused problems with django's translation system
+  const labels = {
+    copy: gettext('Copy project'),
+    update: gettext('Update project'),
+    delete: gettext('Delete project')
+  }
+
+  const handleView = () => {
+    dispatch(configActions.updateConfig('myProjects', !myProjects))
+    dispatch(projectsActions.fetchProjects())
+  }
+
+  const handleImport = (file) => {
+    dispatch(projectsActions.uploadProject('/projects/import/', file))
+  }
+
+  const buildAncestorLink = (ancestors) => {
+    if (!Array.isArray(ancestors) || ancestors.length === 0) return null
+
+    const current = ancestors[ancestors.length - 1]
+    const href = `${baseUrl}/projects/${current.id}`
+
+    const parts = ancestors.map((ancestor, ancestorIndex) => {
+      const content = ancestorIndex === ancestors.length - 1 ? (
+        <span className="fw-bold">{ancestor.title}</span>
+      ) : ancestor.title
+
+      return (
+        <React.Fragment key={ancestorIndex}>
+          {ancestorIndex > 0 && ' / '}
+          {content}
+        </React.Fragment>
+      )
+    })
+
+    return <a href={href}>{parts}</a>
+  }
+
+  const renderTitle = (row) => {
+    const catalog = catalogs.find(c => c.id === row.catalog)
+
+    return (
+      <div>
+        {buildAncestorLink(row.ancestors)}
+        {
+          catalog && (
+            <div className="text-secondary">{catalog.title}</div>
+          )
+        }
+      </div>
+    )
+  }
+
+  const loadMore = () => {
+    const page = get(config, 'params.page') ?? 1
+    dispatch(configActions.updateConfig('params.page', (parseInt(page) + 1).toString()))
+    dispatch(projectsActions.fetchProjects(false))
+  }
+
+  const renderLoadButtons = () => {
+    return (
+      <div className="d-flex position-relative">
+        {
+          projects.length > 0 && showTopButton && (
+            <button
+              type="button" className="btn btn-light btn-rounded font-small" onClick={scrollToTop}
+              title={gettext('Scroll to top')} aria-label={gettext('Scroll to top')}>
+              <i className="bi bi-arrow-up" aria-hidden="true"></i>
+            </button>
+          )
+        }
+        {
+          hasNext && (
+            <button
+              type="button" onClick={loadMore}
+              className="btn btn-light btn-rounded font-small position-absolute start-50 translate-middle-x">
+              {gettext('Load more')}
+            </button>
+          )
+        }
+      </div>
+    )
+  }
+
+  const ordering = get(config, 'params.ordering')
+  const sortOrder = ordering ? (ordering.startsWith('-') ? 'desc' : 'asc') : undefined
+  const sortColumn = ordering ? (ordering.startsWith('-') ? ordering.substring(1) : ordering) : undefined
+
+  const handleHeaderClick = (column) => {
+    if (sortColumn === column) {
+      if (sortOrder === 'asc') {
+        dispatch(configActions.updateConfig('params.ordering', `-${column}`))
+      } else if (sortOrder === 'desc') {
+        dispatch(configActions.deleteConfig('params.ordering'))
+      } else {
+        dispatch(configActions.updateConfig('params.ordering', column))
+      }
+    } else {
+      dispatch(configActions.updateConfig('params.ordering', column))
+    }
+    dispatch(projectsActions.fetchProjects())
+  }
+
+  /* order of elements in 'visibleColumns' corresponds to order of columns in table */
+  const visibleColumns = myProjects ? (
+    ['title', 'progress', 'role', 'last_changed', 'actions']
+  ) : (
+    ['title', 'progress', 'owner', 'created', 'last_changed', 'actions']
+  )
+
+  const columnWidths = myProjects ? (
+    ['40%', '16%', '20%', '18%', '6%']
+  ) : (
+    ['30%', '16%', '16%', '16%', '16%', '6%']
+  )
+
+  const cellFormatters = {
+    title: (_content, row) => renderTitle(row),
+    role: (_content, row) => {
+      const highestRoleString = (row.highest_role && row.highest_role.project_id != row.id) ? (
+        <>
+          {interpolate(gettext('%s of '), [row.highest_role.role_display])}
+          <a href={`${baseUrl}/projects/${row.highest_role.project_id}`}>
+            {row.highest_role.project_title}
+          </a>
+        </>
+      ) : null
+
+      return (
+        <>
+          {
+            row.current_role && <div>{row.current_role.role_display}</div>
+          }
+          {
+            row.highest_role && <div className="text-secondary">{highestRoleString}</div>
+          }
+          {
+            row.visibility && <div className="text-secondary">{row.visibility}</div>
+          }
+        </>
+      )
+    },
+    owner: (_content, row) => (
+      <>
+        <div>
+          {row.owners.map(owner => owner.full_name).join('; ')}
+        </div>
+        {
+          row.visibility && <div className="text-secondary">{row.visibility}</div>
+        }
+      </>
+    ),
+    progress: (_content, row) => getProgressString(row),
+    created: content => useFormattedDateTime(content, language),
+    last_changed: content => useFormattedDateTime(content, language),
+    actions: (_content, row) => {
+      const perms = row.permissions || {}
+      return (
+        <div className="d-flex align-items-center gap-1">
+          <Link
+            className="bi bi-copy"
+            title={labels.copy}
+            onClick={
+              () => {
+                setSelectedProject(row)
+                openCopy()
+              }
+            }
+          />
+          {
+            perms.can_change_project && (
+              <Link
+                className="bi bi-pencil"
+                title={labels.update}
+                onClick={
+                  () => {
+                    setSelectedProject(row)
+                    openEdit()
+                  }
+                }
+              />
+            )
+          }
+          {
+            perms.can_delete_project && (
+              <Link
+                className="bi bi-trash"
+                title={labels.delete}
+                onClick={
+                  () => {
+                    setSelectedProject(row)
+                    openDelete()
+                  }
+                }
+              />
+            )
+          }
+        </div>
+      )
+    }
+  }
+
+  return (
+    <div className="px-4 py-5">
+      <div className="container gx-0">
+        <div className="projects">
+          <div className="d-flex align-items-center gap-3 mb-3">
+            <h1 className="me-auto mb-0">{headline}</h1>
+            {
+              !isEmpty(invites) && myProjects && (
+                <button type="button" className="link" onClick={openInvitations}>
+                  <div className="d-flex align-items-center gap-1">
+                    <span className="badge rounded-pill text-bg-primary">
+                      {invites.length}
+                    </span>
+                    {gettext('Pending invitations')}
+                  </div>
+                </button>
+              )
+            }
+            {
+              isAdminOrSiteManager && (
+                <button type="button" className="link font-small" onClick={handleView}>
+                  {viewLinkText}
+                </button>
+              )
+            }
+            <button type="button" className="link font-small" onClick={openImport}>
+              <i className="bi bi-download" aria-hidden="true"></i> {gettext('Import project')}
+            </button>
+            <button type="button" className="link font-small" onClick={openCreate}>
+              <i className="bi bi-plus" aria-hidden="true"></i> {gettext('New project')}
+            </button>
+          </div>
+
+          <div className="projects-form my-5">
+            <div className="text-muted mb-3">
+              {displayMessage}
+            </div>
+            <div className="search-container">
+              <SearchField
+                value={searchString}
+                onChange={updateSearchString}
+                onSearch={() => dispatch(projectsActions.fetchProjects())}
+                placeholder={gettext('Search projects')}
+                className="search-field"
+              />
+            </div>
+            <ProjectFilters
+              catalogs={catalogs ?? []}
+              isAdminOrSiteManager={isAdminOrSiteManager}
+            />
+          </div>
+
+          <Table
+            cellFormatters={cellFormatters}
+            columnWidths={columnWidths}
+            data={projects}
+            headerFormatters={HEADER_FORMATTERS}
+            onHeaderClick={handleHeaderClick}
+            sortableColumns={SORTABLE_COLUMNS}
+            sortColumn={sortColumn}
+            sortOrder={sortOrder}
+            visibleColumns={visibleColumns}
+          />
+
+          {renderLoadButtons()}
+
+          <Modal {...invitationsModalProps}>
+            <PendingInvitations invitations={invites} />
+          </Modal>
+
+          <Modal {...importModalProps}>
+            <ProjectImport
+              allowedTypes={allowedTypes}
+              handleImport={handleImport}
+              importUrls={importUrls ?? []} />
+          </Modal>
+          <Modal {...editModalProps}>
+            {
+              selectedProject && (
+                <ProjectForm
+                  key={`edit-${selectedProject.id}`}
+                  disabled={false}
+                  formId="project-edit-form"
+                  submitMode="submit"
+                  mode="edit"
+                  currentProject={selectedProject}
+                  catalogs={catalogs ?? []}
+                  onSave={
+                    () => {
+                      handleCloseEdit()
+                      dispatch(projectsActions.refetchLoadedPages())
+                    }
+                  }
+                />
+              )
+            }
+          </Modal>
+          <Modal {...copyModalProps}>
+            {
+              selectedProject && (
+                <ProjectForm
+                  key={`copy-${selectedProject.id}`}
+                  disabled={false}
+                  formId="project-copy-form"
+                  submitMode="submit"
+                  mode="copy"
+                  currentProject={selectedProject}
+                  catalogs={catalogs ?? []}
+                  onSave={handleCloseCopy}
+                />
+              )
+            }
+          </Modal>
+          <Modal {...createModalProps}>
+            <ProjectForm
+              key={`create-${showCreate}`}
+              disabled={false}
+              formId="project-create-form"
+              submitMode="submit"
+              mode="create"
+              catalogs={catalogs ?? []}
+              onSave={closeCreate}
+            />
+          </Modal>
+          <ProjectDeleteModal
+            project={selectedProject}
+            id={selectedProject?.id}
+            show={showDelete}
+            onClose={handleCloseDelete}
+            onDeleted={() => dispatch(projectsActions.refetchLoadedPages())}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Main
diff --git a/rdmo/projects/assets/js/projects/components/helper/PendingInvitations.js b/rdmo/projects/assets/js/projects/components/helper/PendingInvitations.js
index 0a28a26459..c5e59dcfe3 100644
--- a/rdmo/projects/assets/js/projects/components/helper/PendingInvitations.js
+++ b/rdmo/projects/assets/js/projects/components/helper/PendingInvitations.js
@@ -1,34 +1,55 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 
 import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
 
-import { ROLE_LABELS } from '../../utils'
-
 const PendingInvitations = ({ invitations }) => {
+  const roleOptions = useSelector((state) => state.roles?.roles) || []
 
-  return (
-      invitations?.map(item => (
-        <div key={item.id} className="row-container">
-          <div className="w-100 mb-5">
-            <b>{item.title}</b>
-          </div>
-          <div className="w-50">
-            {ROLE_LABELS[item.role]}
-          </div>
-          <div className="w-50 align-right">
-            <button type="button" className="btn btn-xs btn-success ml-10"
-                    onClick={() => { window.location.href = `${baseUrl}/projects/join/${item.token}/` }}>
-              {gettext('Accept')}
-            </button>
-            <button type="button" className="btn btn-xs btn-danger ml-10"
-                    onClick={() => { window.location.href = `${baseUrl}/projects/cancel/${item.token}/` }}>
-              {gettext('Decline')}
-            </button>
+  return invitations?.map((item) => {
+    const roleLabel = roleOptions.find(
+      (option) => option.value === item.role
+    )?.label
+
+    return (
+      <div key={item.id} className="row g-2 align-items-center">
+        <div className="mb-1">
+          <b>{item.title}</b>
+        </div>
+
+        <div className="d-flex gap-2">
+          <div className="me-auto">
+            {roleLabel && interpolate(gettext('Role: %s'), [roleLabel])}
           </div>
+
+          <button
+            type="button"
+            className="btn btn-sm btn-success"
+            onClick={
+              () => {
+                window.location.href = `${baseUrl}/projects/join/${item.token}/`
+              }
+            }
+          >
+            {gettext('Accept')}
+          </button>
+
+          <button
+            type="button"
+            className="btn btn-sm btn-danger"
+            onClick={
+              () => {
+                window.location.href = `${baseUrl}/projects/cancel/${item.token}/`
+              }
+            }
+          >
+            {gettext('Decline')}
+          </button>
         </div>
-      ))
-  )
+      </div>
+    )
+  })
 }
 
 PendingInvitations.propTypes = {
diff --git a/rdmo/projects/assets/js/projects/components/helper/ProjectFilters.js b/rdmo/projects/assets/js/projects/components/helper/ProjectFilters.js
index de71c31f15..847bd85ec9 100644
--- a/rdmo/projects/assets/js/projects/components/helper/ProjectFilters.js
+++ b/rdmo/projects/assets/js/projects/components/helper/ProjectFilters.js
@@ -1,28 +1,37 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import DatePicker from 'react-datepicker'
-import { formatISO, set, isValid, parseISO } from 'date-fns'
+import { useDispatch, useSelector } from 'react-redux'
+import { formatISO, isValid, parseISO, set } from 'date-fns'
 import { get } from 'lodash'
 
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
+import { Select } from 'rdmo/core/assets/js/components'
 import { getDateFormat, getLocale, parseDate } from 'rdmo/core/assets/js/utils/date'
 
-import { Link, Select } from 'rdmo/core/assets/js/components'
+import * as projectsActions from '../../actions/projectsActions'
+
+const ProjectFilters = ({ catalogs, isAdminOrSiteManager }) => {
+  const dispatch = useDispatch()
+
+  const config = useSelector(state => state.config)
+  const roleOptions = useSelector(state => state.roles?.roles) || []
 
-const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsActions }) => {
   const showFilters = [true, 'true'].includes(get(config, 'showFilters', false))
-  const toggleFilters = () => configActions.updateConfig('showFilters', !showFilters)
+  const toggleFilters = () => dispatch(configActions.updateConfig('showFilters', !showFilters))
 
   const resetAllFilters = () => {
-    configActions.deleteConfig('params.catalog')
-    configActions.deleteConfig('params.created_after')
-    configActions.deleteConfig('params.created_before')
-    configActions.deleteConfig('params.last_changed_after')
-    configActions.deleteConfig('params.last_changed_before')
-    configActions.updateConfig('params.page', '1')
-    projectsActions.fetchProjects()
+    dispatch(configActions.deleteConfig('params.catalog'))
+    dispatch(configActions.deleteConfig('params.role'))
+    dispatch(configActions.deleteConfig('params.created_after'))
+    dispatch(configActions.deleteConfig('params.created_before'))
+    dispatch(configActions.deleteConfig('params.last_changed_after'))
+    dispatch(configActions.deleteConfig('params.last_changed_before'))
+    dispatch(configActions.updateConfig('params.page', '1'))
+    dispatch(projectsActions.fetchProjects())
   }
 
-  const catalogOptions = catalogs?.filter(catalog => isManager || catalog.available)
+  const catalogOptions = catalogs?.filter(catalog => isAdminOrSiteManager || catalog.available)
     .map(catalog => ({
       value: catalog.id.toString(),
       label: (
@@ -31,31 +40,47 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
         </span>
       ),
     }))
-
   const selectedCatalog = get(config, 'params.catalog', '')
+  const handleCatalogFilterChange = (value) => {
+    value ? (
+      dispatch(configActions.updateConfig('params.catalog', value))
+    ) : (
+      dispatch(configActions.deleteConfig('params.catalog'))
+    )
+    dispatch(projectsActions.fetchProjects())
+  }
 
-  const updateCatalogFilter = (value) => {
-    value ? configActions.updateConfig('params.catalog', value) : configActions.deleteConfig('params.catalog')
-    projectsActions.fetchProjects()
+  const selectedRole = get(config, 'params.role', '')
+  const handleRoleFilterChange = (value) => {
+    value ? (
+      dispatch(configActions.updateConfig('params.role', value))
+    ) : (
+      dispatch(configActions.deleteConfig('params.role'))
+    )
+    dispatch(projectsActions.fetchProjects())
   }
 
   const handleDateChange = (type, date) => {
     if (type.endsWith('_after')) {
       if (date) {
         const startOfDayDate = set(date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 })
-        configActions.updateConfig(`params.${type}`, formatISO(startOfDayDate, { representation: 'complete' }))
+        dispatch(
+          configActions.updateConfig(`params.${type}`, formatISO(startOfDayDate, { representation: 'complete' }))
+        )
       } else {
-        configActions.deleteConfig(`params.${type}`)
+        dispatch(configActions.deleteConfig(`params.${type}`))
       }
     } else if (type.endsWith('_before')) {
       if (date) {
         const endOfDayDate = set(date, { hours: 23, minutes: 59, seconds: 59, milliseconds: 999 })
-        configActions.updateConfig(`params.${type}`, formatISO(endOfDayDate, { representation: 'complete' }))
+        dispatch(
+          configActions.updateConfig(`params.${type}`, formatISO(endOfDayDate, { representation: 'complete' }))
+        )
       } else {
-        configActions.deleteConfig(`params.${type}`)
+        dispatch(configActions.deleteConfig(`params.${type}`))
       }
     }
-    projectsActions.fetchProjects()
+    dispatch(projectsActions.fetchProjects())
   }
 
   const handleDateChangeRaw = (type, event) => {
@@ -72,63 +97,71 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
 
   return (
     <>
-      {showFilters && (
-        <div className="panel panel-default panel-filters mt-10 mb-0">
-          <div className="panel-body">
+      {
+        showFilters && (
+          <div className="mt-2">
             <div className="row">
-              <div className={`col-md-${isManager ? 4 : 8}`}>
-                <label className="control-label text-muted">{gettext('Filter by catalog')}</label>
-                <div className="search-container">
-                  <Select
-                    className="select-custom"
-                    onChange={updateCatalogFilter}
-                    options={catalogOptions ?? []}
-                    placeholder={gettext('Select catalog')}
-                    value={selectedCatalog}
-                  />
-                </div>
+              <div className={`col-md-${isAdminOrSiteManager ? 2 : 4}`}>
+                <label className="form-label text-secondary">{gettext('Filter by catalog')}</label>
+                <Select
+                  onChange={handleCatalogFilterChange}
+                  options={catalogOptions ?? []}
+                  placeholder={gettext('Select catalog')}
+                  value={selectedCatalog}
+                />
               </div>
-              {isManager && (
-                <div className="col-md-4">
-                  <label className="control-label text-muted">{gettext('Filter by created date')}</label>
-                  <div className="projects-datepicker">
-                    <div className="row">
-                      <div className="col-md-6">
-                        <DatePicker
-                          autoComplete="off"
-                          className="form-control"
-                          dateFormat={getDateFormat()}
-                          id="created-after-date-picker"
-                          isClearable
-                          locale={getLocale()}
-                          onChange={date => handleDateChange('created_after', date)}
-                          onChangeRaw={event => handleDateChangeRaw('created_after', event)}
-                          placeholderText={gettext('Select start date')}
-                          selected={getSelected('created_after')}
-                          openToDate={getSelected('created_after')}
-                        />
-                      </div>
-                      <div className="col-md-6">
-                        <DatePicker
-                          autoComplete="off"
-                          className="form-control"
-                          dateFormat={getDateFormat()}
-                          id="created-before-date-picker"
-                          isClearable
-                          locale={getLocale()}
-                          onChange={date => handleDateChange('created_before', date)}
-                          onChangeRaw={event => handleDateChangeRaw('created_before', event)}
-                          placeholderText={gettext('Select end date')}
-                          selected={getSelected('created_before')}
-                          openToDate={getSelected('created_before')}
-                        />
+              <div className={`col-md-${isAdminOrSiteManager ? 2 : 4}`}>
+                <label className="form-label text-secondary">{gettext('Filter by role')}</label>
+                <Select
+                  onChange={handleRoleFilterChange}
+                  options={roleOptions}
+                  placeholder={gettext('Select role')}
+                  value={selectedRole}
+                />
+              </div>
+              {
+                isAdminOrSiteManager && (
+                  <div className="col-md-4">
+                    <label className="form-label text-muted">{gettext('Filter by created date')}</label>
+                    <div className="projects-datepicker">
+                      <div className="row">
+                        <div className="col-md-6">
+                          <DatePicker
+                            autoComplete="off"
+                            className="form-control"
+                            dateFormat={getDateFormat()}
+                            id="created-after-date-picker"
+                            isClearable
+                            locale={getLocale()}
+                            onChange={date => handleDateChange('created_after', date)}
+                            onChangeRaw={event => handleDateChangeRaw('created_after', event)}
+                            placeholderText={gettext('Select start date')}
+                            selected={getSelected('created_after')}
+                            openToDate={getSelected('created_after')}
+                          />
+                        </div>
+                        <div className="col-md-6">
+                          <DatePicker
+                            autoComplete="off"
+                            className="form-control"
+                            dateFormat={getDateFormat()}
+                            id="created-before-date-picker"
+                            isClearable
+                            locale={getLocale()}
+                            onChange={date => handleDateChange('created_before', date)}
+                            onChangeRaw={event => handleDateChangeRaw('created_before', event)}
+                            placeholderText={gettext('Select end date')}
+                            selected={getSelected('created_before')}
+                            openToDate={getSelected('created_before')}
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              )}
+                )
+              }
               <div className="col-md-4">
-                <label className="control-label text-muted">{gettext('Filter by last changed date')}</label>
+                <label className="form-label text-muted">{gettext('Filter by last changed date')}</label>
                 <div className="projects-datepicker">
                   <div className="row">
                     <div className="col-md-6">
@@ -166,17 +199,23 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
               </div>
             </div>
           </div>
-        </div>
-      )}
-      <div className="pull-right mt-5">
-        {showFilters && !Object.keys(config.params).every(key => ['ordering', 'page', 'search', 'user'].includes(key)) && (
-          <Link className="element-link mr-10 mb-10" onClick={resetAllFilters}>
-            {gettext('Reset all filters')}
-          </Link>
-        )}
-        <Link className="element-link mb-10" onClick={toggleFilters}>
-          {showFilters ? gettext('Hide filters') : gettext('Show filters')}
-        </Link>
+        )
+      }
+      <div className="d-flex justify-content-between mt-2">
+        <button type="button" className="link font-small" onClick={toggleFilters}>
+          <i className="bi bi-filter"></i> {
+            showFilters ? gettext('Hide additional filters') : gettext('Show additional filters')
+          }
+        </button>
+        {
+          showFilters && (
+            !Object.keys(config.params).every(key => ['ordering', 'page', 'search', 'user'].includes(key)) && (
+              <button type="button" className="link font-small" onClick={resetAllFilters}>
+                <i className="bi bi-x-circle"></i> {gettext('Reset all filters')}
+              </button>
+            )
+          )
+        }
       </div>
     </>
   )
@@ -184,10 +223,7 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
 
 ProjectFilters.propTypes = {
   catalogs: PropTypes.arrayOf(PropTypes.object).isRequired,
-  config: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  isManager: PropTypes.bool.isRequired,
-  projectsActions: PropTypes.object.isRequired,
+  isAdminOrSiteManager: PropTypes.bool.isRequired,
 }
 
 export default ProjectFilters
diff --git a/rdmo/projects/assets/js/projects/components/helper/ProjectImport.js b/rdmo/projects/assets/js/projects/components/helper/ProjectImport.js
index fccf9b4139..a9973d4a30 100644
--- a/rdmo/projects/assets/js/projects/components/helper/ProjectImport.js
+++ b/rdmo/projects/assets/js/projects/components/helper/ProjectImport.js
@@ -1,22 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { UploadDropZone } from 'rdmo/core/assets/js/components'
+import Dropzone from 'rdmo/core/assets/js/components/Dropzone'
 
-const ProjectImport = ({ allowedTypes, handleImport, importUrls}) => {
+const ProjectImport = ({ allowedTypes, handleImport, importUrls }) => {
 
   const renderDirectImportLinks = () => {
     return (
-      <div className="mt-10">
-        <label className="control-label">{gettext('Import directly')}</label>
-        <ul className='list-unstyled mb-0'>
-        {importUrls.map((url) => (
-          <li key={url.key}>
-            <a href={url.href} target='_blank' rel='noopener noreferrer'>
-              {url.label}
-            </a>
-          </li>
-        ))}
+      <div className="mt-3">
+        <label className="form-label">{gettext('Import directly')}</label>
+        <ul className="list-unstyled mb-0">
+          {
+            importUrls.map((url) => (
+              <li key={url.key}>
+                <a href={url.href} target="_blank" rel="noopener noreferrer">
+                  {url.label}
+                </a>
+              </li>
+            ))
+          }
         </ul>
       </div>
     )
@@ -24,11 +26,11 @@ const ProjectImport = ({ allowedTypes, handleImport, importUrls}) => {
 
   return (
     <>
-      <label className="control-label">{gettext('Import from file')}</label>
-      <UploadDropZone
+      <label className="form-label">{gettext('Import from file')}</label>
+      <Dropzone
         acceptedTypes={allowedTypes}
         onImportFile={handleImport} />
-        {importUrls.length > 0 && renderDirectImportLinks()}
+      {importUrls.length > 0 && renderDirectImportLinks()}
     </>
   )
 }
diff --git a/rdmo/projects/assets/js/projects/components/helper/Table.js b/rdmo/projects/assets/js/projects/components/helper/Table.js
index 388a6e441f..315c8f6c26 100644
--- a/rdmo/projects/assets/js/projects/components/helper/Table.js
+++ b/rdmo/projects/assets/js/projects/components/helper/Table.js
@@ -1,81 +1,58 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { get } from 'lodash'
+import classNames from 'classnames'
 
 const Table = ({
   cellFormatters,
   columnWidths,
-  config,
-  configActions,
   data,
   headerFormatters,
-  projectsActions,
+  onHeaderClick,
   sortableColumns,
+  sortColumn,
+  sortOrder,
   /* order of elements in 'visibleColumns' corresponds to order of columns in table */
   visibleColumns,
 }) => {
-  const extractSortingParams = (params) => {
-    const { ordering } = params || {}
-
-    if (!ordering) {
-        return { sortOrder: undefined, sortColumn: undefined }
-    }
-
-    const sortOrder = ordering.startsWith('-') ? 'desc' : 'asc'
-    const sortColumn = sortOrder === 'desc' ? ordering.substring(1) : ordering
-
-    return { sortColumn, sortOrder }
-  }
-
-  const params = get(config, 'params', {})
-  const { sortColumn, sortOrder } = extractSortingParams(params)
-
-  const handleHeaderClick = (column) => {
-    if (sortableColumns.includes(column)) {
-      if (sortColumn === column) {
-        if (sortOrder === 'asc') {
-          configActions.updateConfig('params.ordering', `-${column}`)
-        } else if (sortOrder === 'desc') {
-          configActions.deleteConfig('params.ordering')
-        } else {
-        configActions.updateConfig('params.ordering', column)
-        }
-      } else {
-        configActions.updateConfig('params.ordering', column)
-      }
-      projectsActions.fetchProjects()
-    }
-  }
-
   const renderSortIcon = (column) => {
     const isSortColumn = sortColumn === column
-    const isAsc = sortOrder === 'asc'
+
+    let icon = 'bi-caret-down'
+    if (isSortColumn && sortOrder === 'asc') icon = 'bi-caret-down-fill'
+    if (isSortColumn && sortOrder === 'desc') icon = 'bi-caret-up-fill'
 
     return (
-      <span className="ml-5 sort-icon">
-        <i className={`fa fa-sort${isSortColumn ? isAsc ? '-asc' : '-desc' : ''} ${isSortColumn ? '' : 'text-muted'}`}
-           aria-hidden="true"/>
+      <span className="ms-1 sort-icon">
+        <i className={classNames('bi font-smaller', icon)} aria-hidden="true" />
       </span>
     )
   }
 
   const renderHeaders = () => {
     return (
-      <thead className="thead-dark">
+      <thead>
         <tr>
-          {visibleColumns.map((column, index) => {
-            const headerFormatter = headerFormatters[column]
-            const columnHeaderContent = headerFormatter && headerFormatter.render ? headerFormatter.render(column) : column
-            const columnHeaderLabel = headerFormatter && headerFormatter.label ? headerFormatter.label(column) : columnHeaderContent
+          {
+            visibleColumns.map((column, index) => {
+              const headerFormatter = headerFormatters[column]
+              const columnHeaderContent = headerFormatter && headerFormatter.render ? (
+                headerFormatter.render(column)
+              ) : column
+              const columnHeaderLabel = headerFormatter && headerFormatter.label ? (
+                headerFormatter.label(column)
+              ) : columnHeaderContent
 
-            return (
-              <th key={column} style={{ width: columnWidths[index] }} onClick={() => handleHeaderClick(column)}
+              return (
+                <th
+                  className={sortableColumns.includes(column) ? 'cursor-pointer' : undefined}
+                  key={column} style={{ width: columnWidths[index] }} onClick={() => onHeaderClick(column)}
                   aria-label={columnHeaderLabel}>
-                {columnHeaderContent}
-                {sortableColumns.includes(column) && renderSortIcon(column)}
-              </th>
-            )
-          })}
+                  {columnHeaderContent}
+                  {sortableColumns.includes(column) && renderSortIcon(column)}
+                </th>
+              )
+            })
+          }
         </tr>
       </thead>
     )
@@ -91,22 +68,26 @@ const Table = ({
   const renderRows = () => {
     return (
       <tbody>
-        {data.map((row, index) => (
-          <tr key={index}>
-            {visibleColumns.map((column, index) => (
-              <td key={column} style={{ width: columnWidths[index] }}>
-                {formatCellContent(row, column, row[column])}
-              </td>
-            ))}
-          </tr>
-        ))}
+        {
+          data.map((row) => (
+            <tr key={row.id}>
+              {
+                visibleColumns.map((column, index) => (
+                  <td key={column} style={{ width: columnWidths[index] }}>
+                    {formatCellContent(row, column, row[column])}
+                  </td>
+                ))
+              }
+            </tr>
+          ))
+        }
       </tbody>
     )
   }
 
   return (
     <div id="projects-table" className="table-container">
-      <table className="table table-borderless">
+      <table className="table">
         {renderHeaders()}
         {renderRows()}
       </table>
@@ -117,12 +98,12 @@ const Table = ({
 Table.propTypes = {
   cellFormatters: PropTypes.object,
   columnWidths: PropTypes.arrayOf(PropTypes.string),
-  config: PropTypes.object,
-  configActions: PropTypes.object,
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
   headerFormatters: PropTypes.object,
-  projectsActions: PropTypes.object,
+  onHeaderClick: PropTypes.func,
   sortableColumns: PropTypes.arrayOf(PropTypes.string),
+  sortColumn: PropTypes.string,
+  sortOrder: PropTypes.string,
   visibleColumns: PropTypes.arrayOf(PropTypes.string),
 }
 
diff --git a/rdmo/projects/assets/js/projects/components/main/Projects.js b/rdmo/projects/assets/js/projects/components/main/Projects.js
deleted file mode 100644
index 73acfc6d48..0000000000
--- a/rdmo/projects/assets/js/projects/components/main/Projects.js
+++ /dev/null
@@ -1,280 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { get, isEmpty } from 'lodash'
-
-import { Link, Modal, SearchField } from 'rdmo/core/assets/js/components'
-import { useFormattedDateTime, useModal, useScrollToTop }  from 'rdmo/core/assets/js/hooks'
-import { language } from 'rdmo/core/assets/js/utils'
-import { baseUrl } from 'rdmo/core/assets/js/utils/meta'
-
-import { PendingInvitations, ProjectFilters, ProjectImport, Table } from '../helper'
-import { getTitlePath, getUserRoles, userIsManager, HEADER_FORMATTERS, SORTABLE_COLUMNS } from '../../utils'
-
-const Projects = ({ config, configActions, currentUserObject, projectsActions, projectsObject }) => {
-  const { allowedTypes, catalogs, importUrls, invites, projects, projectsCount, hasNext } = projectsObject
-
-  const { currentUser } = currentUserObject
-  const { myProjects } = config
-
-  const { showTopButton, scrollToTop } = useScrollToTop()
-
-  const { show: showInvitations, open: openInvitations, close: closeInvitations } = useModal()
-  const { show: showImport, open: openImport, close: closeImport } = useModal()
-
-  const invitationsModalProps = {
-    title: gettext('Pending invitations'),
-    show: showInvitations,
-    onClose: closeInvitations
-  }
-
-  const importModalProps = {
-    title: gettext('Import project'),
-    show: showImport,
-    onClose: closeImport
-  }
-
-  const displayMessage = interpolate(gettext('%s of %s projects are displayed'), [projects.length > projectsCount ? projectsCount : projects.length, projectsCount])
-
-  const getProgressString = (row) => {
-    return (row.progress_total ?  interpolate(gettext('%s of %s'), [row.progress_count ?? 0, row.progress_total]) : null)
-  }
-
-  const currentUserId = currentUser.id
-  const isManager = userIsManager(currentUser)
-
-  const searchString = get(config, 'params.search', '')
-  const updateSearchString = (value) => {
-    value ? configActions.updateConfig('params.search', value) : configActions.deleteConfig('params.search')
-  }
-
-  const viewLinkText = myProjects ? gettext('View all projects') : gettext('View my projects')
-  const headline = myProjects ? gettext('My projects') : gettext('All projects')
-
-  // inlining the title attributes caused problems with django's translation system
-  const labels = {
-    copy: gettext('Copy project'),
-    update: gettext('Update project'),
-    delete: gettext('Delete project')
-  }
-
-  const handleView = () => {
-    configActions.updateConfig('myProjects', !myProjects)
-    projectsActions.fetchProjects()
-  }
-
-  const handleNew = () => {
-    window.location.href = `${baseUrl}/projects/create/`
-  }
-
-  const handleImport = (file) => {
-    projectsActions.uploadProject('/projects/import/', file)
-  }
-
-  const renderTitle = (title, row) => {
-    const pathArray = getTitlePath(projects, title, row).split(' / ')
-    const lastChild = pathArray.pop()
-
-    const catalog = catalogs.find(c => c.id === row.catalog)
-
-    return (
-      <div>
-        <a href={`${baseUrl}/projects/${row.id}/`}>
-          {pathArray.map((path, index) => (
-            <span key={index}>{path} / </span>
-          ))}
-          <b>{lastChild}</b>
-        </a>
-        {
-          catalog && (
-            <div className='text-muted' dangerouslySetInnerHTML={{ __html: catalog.title }} ></div>
-          )
-        }
-      </div>
-    )
-  }
-
-  const loadMore = () => {
-    const page = get(config, 'params.page') ?? 1
-    configActions.updateConfig('params.page', (parseInt(page) + 1).toString())
-    projectsActions.fetchProjects(false)
-  }
-
-  const renderLoadButtons = () => {
-    return (
-          <div className="icon-container ml-auto">
-            {projects.length > 0 && showTopButton &&
-              <button type="button" className="elliptic-button" onClick={scrollToTop}
-                      title={gettext('Scroll to top')} aria-label={gettext('Scroll to top')}>
-                <i className="fa fa-arrow-up" aria-hidden="true"></i>
-              </button>
-            }
-            {hasNext &&
-            <button type="button" onClick={loadMore} className="elliptic-button">
-              {gettext('Load more')}
-            </button>
-            }
-          </div>
-    )
-  }
-
-  /* order of elements in 'visibleColumns' corresponds to order of columns in table */
-  let visibleColumns = ['title', 'progress', 'last_changed', 'actions']
-  let columnWidths
-
-  if (myProjects) {
-    visibleColumns.splice(2, 0, 'role')
-    columnWidths = ['40%', '18%', '18%', '18%', '6%']
-  } else {
-    visibleColumns.splice(2, 0, 'created')
-    visibleColumns.splice(2, 0, 'owner')
-    columnWidths = ['30%', '10%', '18%', '18%', '18%', '6%']
-  }
-
-  const cellFormatters = {
-    title: (content, row) => renderTitle(content, row),
-    role: (_content, row) => {
-      const { rolesString } = getUserRoles(row, currentUserId)
-      return <>
-        {
-          rolesString && <p>{rolesString}</p>
-        }
-        {
-          row.visibility && <p className="text-muted">{row.visibility}</p>
-        }
-      </>
-    },
-    owner: (_content, row) => (
-      <>
-        <p>
-          {row.owners.map(owner => owner.full_name).join('; ')}
-        </p>
-        {
-          row.visibility && <p className="text-muted">{row.visibility}</p>
-        }
-      </>
-    ),
-    progress: (_content, row) => getProgressString(row),
-    created: content => useFormattedDateTime(content, language),
-    last_changed: content => useFormattedDateTime(content, language),
-    actions: (_content, row) => {
-      const rowUrl = `${baseUrl}/projects/${row.id}`
-      const params = `?next=${window.location.pathname}`
-      const { isProjectManager, isProjectOwner } = getUserRoles(row, currentUserId, ['managers', 'owners'])
-
-      return (
-        <div className="icon-container">
-          <Link
-            href={`${rowUrl}/copy/`}
-            className="fa fa-copy"
-            title={labels.copy}
-            onClick={() => window.location.href = `${rowUrl}/copy/${params}`}
-          />
-          {(isProjectManager || isProjectOwner || isManager) &&
-            <Link
-              href={`${rowUrl}/update/`}
-              className="fa fa-pencil"
-              title={labels.update}
-              onClick={() => window.location.href = `${rowUrl}/update/${params}`}
-            />
-          }
-          {(isProjectOwner || isManager) &&
-            <Link
-              href={`${rowUrl}/delete/`}
-              className="fa fa-trash"
-              title={labels.delete}
-              onClick={() => window.location.href = `${rowUrl}/delete/${params}`}
-            />
-          }
-        </div>
-      )
-    }
-  }
-
-  return (
-    <div className="projects">
-      <div className="projects-header-container">
-        <h1>{headline}</h1>
-        <div className="projects-header-buttons">
-          {
-            !isEmpty(invites) && myProjects && (
-              <button type="button" className="btn btn-link" onClick={openInvitations}>
-                <span className="badge badge-primary badge-invitations">
-                  {invites.length}
-                </span>
-                {gettext('Pending invitations')}
-              </button>
-            )
-          }
-          {
-            isManager && (
-              <button type="button" className="btn btn-link" onClick={handleView}>
-                {viewLinkText}
-              </button>
-            )
-          }
-          <button type="button" id="import-project" className="btn btn-link" onClick={openImport}>
-            <i className="fa fa-download" aria-hidden="true"></i> {gettext('Import project')}
-          </button>
-          <button type="button" id="create-project" className="btn btn-link" onClick={handleNew}>
-            <i className="fa fa-plus" aria-hidden="true"></i> {gettext('New project')}
-          </button>
-        </div>
-      </div>
-      <div className="projects-form">
-        <div className="text-muted mb-10">
-          {displayMessage}
-        </div>
-        <div className="search-container">
-          <SearchField
-            value={searchString}
-            onChange={updateSearchString}
-            onSearch={() => projectsActions.fetchProjects()}
-            placeholder={gettext('Search projects')}
-            className="search-field"
-          />
-        </div>
-        <ProjectFilters
-          catalogs={catalogs ?? []}
-          config={config}
-          configActions={configActions}
-          isManager={isManager}
-          projectsActions={projectsActions}
-        />
-      </div>
-      <Table
-        cellFormatters={cellFormatters}
-        columnWidths={columnWidths}
-        config={config}
-        configActions={configActions}
-        data={projects}
-        headerFormatters={HEADER_FORMATTERS}
-        projectsActions={projectsActions}
-        sortableColumns={SORTABLE_COLUMNS}
-        visibleColumns={visibleColumns}
-      />
-
-      {renderLoadButtons()}
-
-      <Modal {...invitationsModalProps}>
-        <PendingInvitations invitations={invites} />
-      </Modal>
-
-      <Modal {...importModalProps}>
-        <ProjectImport
-          allowedTypes={allowedTypes}
-          handleImport={handleImport}
-          importUrls={importUrls ?? []} />
-      </Modal>
-    </div>
-  )
-}
-
-Projects.propTypes = {
-  config: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  currentUserObject: PropTypes.object.isRequired,
-  projectsActions: PropTypes.object.isRequired,
-  projectsObject: PropTypes.object.isRequired,
-}
-
-export default Projects
diff --git a/rdmo/projects/assets/js/projects/containers/Main.js b/rdmo/projects/assets/js/projects/containers/Main.js
deleted file mode 100644
index 4ae2ff620a..0000000000
--- a/rdmo/projects/assets/js/projects/containers/Main.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-import * as userActions from 'rdmo/core/assets/js/actions/userActions'
-
-import * as projectsActions from '../actions/projectsActions'
-
-import Projects from '../components/main/Projects'
-
-const Main = ({ config, configActions, projectsActions, projects, userActions, currentUser }) => {
-  if (projects.ready) {
-      return (
-        <Projects
-          config={config}
-          configActions={configActions}
-          currentUserObject={currentUser}
-          projectsActions={projectsActions}
-          projectsObject={projects}
-          userActions={userActions}
-        />
-      )
-    }
-
-    return null
-}
-
-Main.propTypes = {
-  config: PropTypes.object.isRequired,
-  configActions: PropTypes.object.isRequired,
-  currentUser: PropTypes.object.isRequired,
-  projectsActions: PropTypes.object.isRequired,
-  projects: PropTypes.object.isRequired,
-  userActions: PropTypes.object.isRequired
-}
-
-function mapStateToProps(state) {
-  return {
-    config: state.config,
-    currentUser: state.currentUser,
-    projects: state.projects,
-  }
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    configActions: bindActionCreators(configActions, dispatch),
-    projectsActions: bindActionCreators(projectsActions, dispatch),
-    userActions: bindActionCreators(userActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Main)
diff --git a/rdmo/core/static/core/css/style.scss b/rdmo/projects/assets/js/projects/hooks/useDatePicker.js
similarity index 100%
rename from rdmo/core/static/core/css/style.scss
rename to rdmo/projects/assets/js/projects/hooks/useDatePicker.js
diff --git a/rdmo/projects/assets/js/projects/reducers/projectsReducer.js b/rdmo/projects/assets/js/projects/reducers/projectsReducer.js
index 4c09b221e7..75cc8c91dc 100644
--- a/rdmo/projects/assets/js/projects/reducers/projectsReducer.js
+++ b/rdmo/projects/assets/js/projects/reducers/projectsReducer.js
@@ -1,55 +1,59 @@
-import { FETCH_PROJECTS_ERROR, FETCH_PROJECTS_INIT, FETCH_PROJECTS_SUCCESS,
-         FETCH_INVITATIONS_ERROR, FETCH_INVITATIONS_INIT, FETCH_INVITATIONS_SUCCESS,
-         FETCH_CATALOGS_ERROR, FETCH_CATALOGS_INIT, FETCH_CATALOGS_SUCCESS,
-         FETCH_FILETYPES_ERROR, FETCH_FILETYPES_INIT, FETCH_FILETYPES_SUCCESS,
-         FETCH_IMPORT_URLS_ERROR, FETCH_IMPORT_URLS_INIT, FETCH_IMPORT_URLS_SUCCESS,
-        } from '../actions/actionTypes'
+import {
+  COPY_PROJECT_ERROR, COPY_PROJECT_INIT,
+  CREATE_PROJECT_ERROR, CREATE_PROJECT_INIT,
+  FETCH_CATALOGS_ERROR, FETCH_CATALOGS_INIT, FETCH_CATALOGS_SUCCESS,
+  FETCH_FILETYPES_ERROR, FETCH_FILETYPES_INIT, FETCH_FILETYPES_SUCCESS,
+  FETCH_IMPORT_URLS_ERROR, FETCH_IMPORT_URLS_INIT, FETCH_IMPORT_URLS_SUCCESS,
+  FETCH_INVITATIONS_ERROR, FETCH_INVITATIONS_INIT, FETCH_INVITATIONS_SUCCESS,
+  FETCH_PROJECTS_ERROR, FETCH_PROJECTS_INIT, FETCH_PROJECTS_SUCCESS,
+  UPDATE_PROJECT_ERROR, UPDATE_PROJECT_INIT
+} from '../actions/actionTypes'
 
 const initialState = {
   ready: false,
-  projects: []
+  projects: [],
+  errors: [],
 }
 
 export default function projectsReducer(state = initialState, action) {
-  switch(action.type) {
+  switch (action.type) {
     case FETCH_PROJECTS_INIT:
-      return {...state, ...action.projects}
+      return { ...state, ...action.projects }
     case FETCH_PROJECTS_SUCCESS: {
       return {
-          ...state,
-          projects: action.shouldConcatenate ? [...state.projects, ...action.projects.results] : action.projects.results,
-          ready: true,
-          projectsCount: action.projects.count,
-          hasNext: action.projects.next !== null
+        ...state,
+        projects: action.shouldConcatenate ? [...state.projects, ...action.projects.results] : action.projects.results,
+        ready: true,
+        projectsCount: action.projects.count,
+        hasNext: action.projects.next !== null
       }
     }
     case FETCH_PROJECTS_ERROR:
-      return {...state, errors: action.error.errors}
-    case FETCH_INVITATIONS_INIT:
-      return {...state}
-    case FETCH_INVITATIONS_SUCCESS:
-      return {...state, invites: action.invites}
+    case CREATE_PROJECT_ERROR:
+    case COPY_PROJECT_ERROR:
     case FETCH_INVITATIONS_ERROR:
-      return {...state, errors: action.error.errors}
-    case FETCH_CATALOGS_INIT:
-      return {...state}
-    case FETCH_CATALOGS_SUCCESS:
-      return {...state, catalogs: action.catalogs}
     case FETCH_CATALOGS_ERROR:
-      return {...state, errors: action.error.errors}
-    case FETCH_FILETYPES_INIT:
-      return {...state}
-    case FETCH_FILETYPES_SUCCESS:
-      return {...state, allowedTypes: action.allowedTypes}
     case FETCH_FILETYPES_ERROR:
-      return {...state, errors: action.error.errors}
+    case FETCH_IMPORT_URLS_ERROR:
+    case UPDATE_PROJECT_ERROR:
+      return { ...state, errors: action.error.errors }
+    case FETCH_INVITATIONS_INIT:
+    case FETCH_CATALOGS_INIT:
+    case FETCH_FILETYPES_INIT:
     case FETCH_IMPORT_URLS_INIT:
-      return {...state}
+    case CREATE_PROJECT_INIT:
+    case COPY_PROJECT_INIT:
+    case UPDATE_PROJECT_INIT:
+      return { ...state, errors: [] }
+    case FETCH_INVITATIONS_SUCCESS:
+      return { ...state, invites: action.invites }
+    case FETCH_CATALOGS_SUCCESS:
+      return { ...state, catalogs: action.catalogs }
+    case FETCH_FILETYPES_SUCCESS:
+      return { ...state, allowedTypes: action.allowedTypes }
     case FETCH_IMPORT_URLS_SUCCESS:
-      return {...state, importUrls: action.importUrls}
-    case FETCH_IMPORT_URLS_ERROR:
-      return {...state, errors: action.error.errors}
+      return { ...state, importUrls: action.importUrls }
     default:
-       return state
+      return state
   }
 }
diff --git a/rdmo/projects/assets/js/projects/reducers/userReducer.js b/rdmo/projects/assets/js/projects/reducers/userReducer.js
deleted file mode 100644
index 5e759279f0..0000000000
--- a/rdmo/projects/assets/js/projects/reducers/userReducer.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { FETCH_CURRENT_USER_ERROR, FETCH_CURRENT_USER_INIT, FETCH_CURRENT_USER_SUCCESS }
-  from '../actions/actionTypes'
-
-const initialState = {
-  currentUser: {},
-}
-
-export default function userReducer(state = initialState, action) {
-  switch(action.type) {
-    case FETCH_CURRENT_USER_INIT:
-      return {...state, ...action.currentUser}
-    case FETCH_CURRENT_USER_SUCCESS:
-      return {...state, ...action.currentUser}
-    case FETCH_CURRENT_USER_ERROR:
-      return {...state, errors: action.error.errors}
-    default:
-       return state
-  }
-}
diff --git a/rdmo/projects/assets/js/projects/store/configureStore.js b/rdmo/projects/assets/js/projects/store/configureStore.js
index 322eac7429..7bb0c94f9e 100644
--- a/rdmo/projects/assets/js/projects/store/configureStore.js
+++ b/rdmo/projects/assets/js/projects/store/configureStore.js
@@ -1,19 +1,21 @@
-import { createStore, applyMiddleware, combineReducers } from 'redux'
-
-import { checkStoreId, configureMiddleware } from 'rdmo/core/assets/js/utils/store'
-
-import { getConfigFromLocalStorage, isTruthy } from 'rdmo/core/assets/js/utils/config'
+import { applyMiddleware, combineReducers, createStore } from 'redux'
 
+import * as configActions from 'rdmo/core/assets/js/actions/configActions'
+import * as settingsActions from 'rdmo/core/assets/js/actions/settingsActions'
+import * as templateActions from 'rdmo/core/assets/js/actions/templateActions'
+import * as userActions from 'rdmo/core/assets/js/actions/userActions'
 import configReducer from 'rdmo/core/assets/js/reducers/configReducer'
 import pendingReducer from 'rdmo/core/assets/js/reducers/pendingReducer'
+import settingsReducer from 'rdmo/core/assets/js/reducers/settingsReducer'
+import templateReducer from 'rdmo/core/assets/js/reducers/templateReducer'
 import userReducer from 'rdmo/core/assets/js/reducers/userReducer'
+import { getConfigFromLocalStorage, isTruthy } from 'rdmo/core/assets/js/utils/config'
+import { checkStoreId, configureMiddleware } from 'rdmo/core/assets/js/utils/store'
 
-import projectsReducer from '../reducers/projectsReducer'
-
-import * as configActions from 'rdmo/core/assets/js/actions/configActions'
-import * as userActions from 'rdmo/core/assets/js/actions/userActions'
-
+import * as rolesActions from '../../common/actions/rolesActions'
+import rolesReducer from '../../common/reducers/rolesReducer'
 import * as projectsActions from '../actions/projectsActions'
+import projectsReducer from '../reducers/projectsReducer'
 
 export default function configureStore() {
   // empty localStorage in new session
@@ -22,8 +24,11 @@ export default function configureStore() {
   const rootReducer = combineReducers({
     config: configReducer,
     currentUser: userReducer,
+    pending: pendingReducer,
     projects: projectsReducer,
-    pending: pendingReducer
+    settings: settingsReducer,
+    templates: templateReducer,
+    roles: rolesReducer
   })
 
   const initialState = {
@@ -49,8 +54,11 @@ export default function configureStore() {
       })
 
     Promise.all([
+      store.dispatch(settingsActions.fetchSettings()),
+      store.dispatch(templateActions.fetchTemplates()),
       store.dispatch(userActions.fetchCurrentUser()),
-      store.dispatch(projectsActions.fetchCatalogs())
+      store.dispatch(projectsActions.fetchCatalogs()),
+      store.dispatch(rolesActions.fetchRoles())
     ]).then(() => {
       store.dispatch(projectsActions.fetchProjects())
       store.dispatch(projectsActions.fetchInvitations())
diff --git a/rdmo/projects/assets/js/projects/utils/constants.js b/rdmo/projects/assets/js/projects/utils/constants.js
index ea5bc3ec9f..6efc864621 100644
--- a/rdmo/projects/assets/js/projects/utils/constants.js
+++ b/rdmo/projects/assets/js/projects/utils/constants.js
@@ -1,18 +1,11 @@
 // projects table
 export const SORTABLE_COLUMNS = ['created', 'owner', 'progress', 'role', 'title', 'last_changed']
 export const HEADER_FORMATTERS = {
-  title: {render: () => gettext('Name')},
-  role: {render: () => gettext('Role')},
-  owner: {render: () =>  gettext('Owner')} ,
-  progress: {render: () => gettext('Progress')},
-  created: {render: () => gettext('Created')},
-  last_changed: {render: () => gettext('Last changed')},
-  actions: {render: () => null, label: () => gettext('Actions')},
-}
-// project roles
-export const ROLE_LABELS = {
-  author: gettext('Author'),
-  guest: gettext('Guest'),
-  manager: gettext('Manager'),
-  owner: gettext('Owner')
+  title: { render: () => gettext('Name') },
+  role: { render: () => gettext('Role') },
+  owner: { render: () => gettext('Owner') },
+  progress: { render: () => gettext('Progress') },
+  created: { render: () => gettext('Created') },
+  last_changed: { render: () => gettext('Last changed') },
+  actions: { render: () => null, label: () => gettext('Actions') },
 }
diff --git a/rdmo/projects/assets/js/projects/utils/getProjectTitlePath.js b/rdmo/projects/assets/js/projects/utils/getProjectTitlePath.js
deleted file mode 100644
index e3c17de16a..0000000000
--- a/rdmo/projects/assets/js/projects/utils/getProjectTitlePath.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { isNil } from 'lodash'
-
-export const getParentPath = (projects, parentId, pathArray = []) => {
-  const parent = projects.find((project) => project.id === parentId)
-  if (parent) {
-    const { title: parentTitle, parent: grandParentId } = parent
-    pathArray.unshift(parentTitle)
-    if (!isNil(grandParentId) && typeof grandParentId === 'number') {
-      return getParentPath(projects, grandParentId, pathArray)
-    }
-  }
-  return pathArray
-}
-
-export const getTitlePath = (projects, title, row) => {
-  let parentPath = ''
-  if (row.parent) {
-    const path = getParentPath(projects, row.parent)
-    parentPath = path.join(' / ')
-  }
-
-  const pathArray = parentPath ? [parentPath, title] : [title]
-  return pathArray.join(' / ')
-}
diff --git a/rdmo/projects/assets/js/projects/utils/getUserRoles.js b/rdmo/projects/assets/js/projects/utils/getUserRoles.js
deleted file mode 100644
index f7a1cfe6be..0000000000
--- a/rdmo/projects/assets/js/projects/utils/getUserRoles.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { ROLE_LABELS } from './constants'
-
-export const getUserRoles = (row, currentUserId, arraysToSearch) => {
-  if (!arraysToSearch || !arraysToSearch.length) {
-    arraysToSearch = ['authors', 'guests', 'managers', 'owners']
-  }
-
-  const roleDefinitions = {
-    authors: { roleLabel: ROLE_LABELS.author, roleBoolean: 'isProjectAuthor' },
-    guests: { roleLabel: ROLE_LABELS.guest, roleBoolean: 'isProjectGuest' },
-    managers: { roleLabel: ROLE_LABELS.manager, roleBoolean: 'isProjectManager' },
-    owners: { roleLabel: ROLE_LABELS.owner, roleBoolean: 'isProjectOwner' }
-  }
-
-  let rolesFound = []
-  let roleBooleans = {
-    isProjectAuthor: false,
-    isProjectGuest: false,
-    isProjectManager: false,
-    isProjectOwner: false
-  }
-
-  arraysToSearch.forEach(arrayName => {
-    if (row[arrayName].some(item => item.id === currentUserId)) {
-      const { roleLabel, roleBoolean } = roleDefinitions[arrayName]
-      rolesFound.push(roleLabel)
-      roleBooleans[roleBoolean] = true
-    }
-  })
-
-  return {
-    rolesString: rolesFound.length > 0 ? rolesFound.join(', ') : null,
-    ...roleBooleans
-  }
-}
-
-export default getUserRoles
diff --git a/rdmo/projects/assets/js/projects/utils/index.js b/rdmo/projects/assets/js/projects/utils/index.js
index 4927271517..55b8a54b94 100644
--- a/rdmo/projects/assets/js/projects/utils/index.js
+++ b/rdmo/projects/assets/js/projects/utils/index.js
@@ -1,5 +1,2 @@
 export * from './constants'
-export * from './getProjectTitlePath'
-export { default as getUserRoles } from './getUserRoles'
-export { default as userIsManager } from './userIsManager'
 export { default as TRANSLATIONS } from './translations'
diff --git a/rdmo/projects/assets/js/projects/utils/userIsManager.js b/rdmo/projects/assets/js/projects/utils/userIsManager.js
deleted file mode 100644
index 9b4e77430d..0000000000
--- a/rdmo/projects/assets/js/projects/utils/userIsManager.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { siteId } from 'rdmo/core/assets/js/utils/meta'
-
-const userIsManager = (currentUser) => {
-  if (currentUser.is_superuser ||
-     (currentUser.role && currentUser.role.manager && currentUser.role.manager.some(manager => manager.id === siteId))) {
-      return true
-  }
-  return false
-}
-
-export default userIsManager
diff --git a/rdmo/projects/assets/scss/project.scss b/rdmo/projects/assets/scss/project.scss
new file mode 100644
index 0000000000..fa14a38e13
--- /dev/null
+++ b/rdmo/projects/assets/scss/project.scss
@@ -0,0 +1,11 @@
+.project-hierarchy {
+    ul {
+        margin-bottom: 0;
+    }
+}
+
+.card.card-tile {
+    img {
+        height: 7.5rem;
+    }
+}
diff --git a/rdmo/projects/assets/scss/projects.scss b/rdmo/projects/assets/scss/projects.scss
index a9147fe0f8..e69de29bb2 100644
--- a/rdmo/projects/assets/scss/projects.scss
+++ b/rdmo/projects/assets/scss/projects.scss
@@ -1,378 +0,0 @@
-@import 'rdmo/core/assets/scss/variables';
-
-a.disabled {
-    cursor: not-allowed;
-}
-
-.flip {
-    transform: rotate(180deg) scaleX(-1);
-}
-
-.w-100 {
-    width: 100%;
-}
-.w-25 {
-    width: 25%;
-}
-.mt-0 {
-    margin-top: 0;
-}
-.mt-5 {
-    margin-top: 5px;
-}
-.mt-10 {
-    margin-top: 10px;
-}
-.mt-20 {
-    margin-top: 20px;
-}
-.mr-0 {
-    margin-right: 0;
-}
-.mr-5 {
-    margin-right: 5px;
-}
-.mr-10 {
-    margin-right: 10px;
-}
-.mr-20 {
-    margin-right: 20px;
-}
-.mb-0 {
-    margin-bottom: 0;
-}
-.mb-5 {
-    margin-bottom: 5px;
-}
-.mb-10 {
-    margin-bottom: 10px;
-}
-.mb-20 {
-    margin-bottom: 20px;
-}
-.ml-0 {
-    margin-left: 0;
-}
-.ml-5 {
-    margin-left: 5px;
-}
-.ml-10 {
-    margin-left: 10px;
-}
-.ml-20 {
-    margin-left: 20px;
-}
-
-.pt-0 {
-    padding-top: 0;
-}
-.pt-10 {
-    padding-top: 10px;
-}
-.pt-20 {
-    padding-top: 20px;
-}
-.pr-0 {
-    padding-right: 0;
-}
-.pr-10 {
-    padding-right: 10px;
-}
-.pr-20 {
-    padding-right: 20px;
-}
-.pb-0 {
-    padding-bottom: 0;
-}
-.pb-10 {
-    padding-bottom: 10px;
-}
-.pb-20 {
-    padding-bottom: 20px;
-}
-.pl-0 {
-    padding-left: 0;
-}
-.pl-10 {
-    padding-left: 10px;
-}
-.pl-20 {
-    padding-left: 20px;
-}
-.align-right {
-  text-align: right;
-}
-.align-left {
-  text-align: left;
-}
-
-.form-group {
-    .react-select__control {
-        min-height: 34px;
-    }
-    .react-select__value-container {
-        padding: 0 14px;
-    }
-    .react-select__input-container {
-        margin: 0;
-        padding: 0;
-    }
-    .react-select__indicator {
-        padding: 6px;
-    }
-    .react-select__option {
-        padding: 0 14px;
-    }
-}
-
-.list-group-item {
-    .indent {
-        padding-left: 20px;
-    }
-}
-
-.codemirror.form-control {
-    height: auto;
-    padding: 0;
-
-    .cm-editor {
-        border-radius: 4px;
-    }
-    .cm-gutter {
-        background-color: white;
-    }
-    .cm-focused {
-        // copy the .form-control:focus from bootstrap
-        border-color: #66afe9;
-        outline: 0;
-        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-    }
-}
-
-.select-item-options,
-.multi-select-item-options,
-.ordered-multi-select-item-options {
-    float: right;
-    display: flex;
-    gap: 4px;
-    padding: 10px 0;
-
-    .disabled {
-        color: #ccc !important;
-        cursor: not-allowed !important;
-    }
-}
-
-.ordered-multi-select-item {
-    margin-bottom: 10px;
-
-    .ordered-multi-select-item-select {
-        height: 34px;
-    }
-}
-
-.projects-header-container {
-    @media (min-width: $screen-sm-max) {
-        display: flex;
-        justify-content: space-between;
-        align-items: end;
-
-        margin-bottom: 10px;
-    }
-
-    .projects-header-buttons {
-        @media (min-width: $screen-sm-max) {
-            display: flex;
-            gap: 20px;
-        }
-
-        .btn.btn-link {
-            padding: 0;
-            margin-bottom: 15px;
-
-            @media (max-width: $screen-sm-max) {
-                display: block;
-                margin-bottom: 10px;
-            }
-        }
-    }
-}
-
-.icon-container {
-    display: flex;
-    gap: 5px;
-    margin-bottom: 10px;
-    justify-content: flex-end;
-}
-
-.projects {
-    min-height: 600px;
-}
-
-.projects-form {
-    margin-bottom: 40px;
-}
-
-.panel-filters {
-    border-color: #ccc;
-
-    .react-datepicker-wrapper {
-        width: 100%;
-    }
-
-    @media (max-width: $screen-md-max) {
-        .control-label {
-            margin-bottom: 10px;
-        }
-        .react-select,
-        .react-datepicker-wrapper {
-            margin-bottom: 10px;
-        }
-
-        // remove the margin from the last datepicker
-        .panel-body > .row > div:last-child .row > div:last-child .react-datepicker-wrapper {
-            margin-bottom: 0;
-        }
-    }
-}
-
-.projects-search {
-  position: relative;
-
-  .projects-search-reset {
-      display: block;
-      position: absolute;
-      top: 7px;
-      right: 7px;
-      z-index: 1020;
-
-      opacity: 0.8;
-      line-height: 20px;
-      font-size: 14px;
-
-      margin-left: 2px;
-  }
-}
-
-.elliptic-button {
-  padding: 5px 14px;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 15px;
-  display: inline-block;
-}
-
-.elliptic-button:hover,
-.elliptic-button:focus {
-  text-decoration: none;
-  background-color: #eeeeee;
-}
-
-.row-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  color: #666;
-  padding-left: 5px;
-}
-
-.row-container:not(:last-child):after { /* Add line between each container element */
-  content: '';
-  width: 100%;
-  height: 1px;
-  background-color: #ccc;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.search-container {
-  width: 100%;
-
-  .search-field {
-    width: 100%;
-  }
-}
-
-.projects-datepicker .react-datepicker {
-  font-size: 1em;
-}
-.projects-datepicker .react-datepicker__header {
-  padding-top: 0.8em;
-}
-.projects-datepicker .react-datepicker__month {
-  margin: 0.4em 1em;
-}
-.projects-datepicker .react-datepicker__day-name, .projects-datepicker .react-datepicker__day {
-  width: 1.9em;
-  line-height: 1.9em;
-  margin: 0.166em;
-}
-.projects-datepicker .react-datepicker__current-month {
-  font-size: 1em;
-}
-.projects-datepicker .react-datepicker__navigation {
-  top: 1em;
-  line-height: 1.7em;
-  border: 0.45em solid transparent;
-}
-.projects-datepicker .react-datepicker__navigation--previous {
-  left: 1em;
-}
-.projects-datepicker .react-datepicker__navigation--next {
-  right: 1em;
-}
-.projects-datepicker .react-datepicker__close-icon::after {
-  background-color: #fff;
-  color: black;
-  font-size: 1.5em;
-}
-
-.thead-dark th {
-  cursor: pointer;
-}
-
-.badge-invitations {
-  background-color: $link-color;
-  color: #fff;
-  margin-right: 5px;
-}
-
-.btn.btn-link {
-  &:focus {
-    outline:0;
-  }
-}
-
-.dropzone-container {
-  width: 100%;
-  padding: 10px;
-}
-
-.dropzone {
-  border: 2px dashed #cccccc;
-  border-radius: 5px;
-  padding: 20px;
-  text-align: center;
-  transition: border .24s ease-in-out;
-}
-
-.dropzone:focus {
-  border-color: #2196f3;
-}
-
-/* Add additional styling for when files are being dragged over the dropzone */
-.dropzone.drag-active {
-  border-color: #2196f3;
-}
-
-/* Add styles for when the dropzone is disabled */
-.dropzone.disabled {
-  opacity: 0.6;
-}
-
-/* Selected style for muted select options */
-.react-select__menu .react-select__option--is-selected .text-muted {
-  color: white; /* White when selected */
-}
diff --git a/rdmo/projects/constants.py b/rdmo/projects/constants.py
index 77add3ea45..cc92bd5424 100644
--- a/rdmo/projects/constants.py
+++ b/rdmo/projects/constants.py
@@ -10,3 +10,10 @@
     (ROLE_AUTHOR, _('Author')),
     (ROLE_GUEST, _('Guest')),
 )
+
+ROLE_RANKS = {
+    ROLE_OWNER: 3,
+    ROLE_MANAGER: 2,
+    ROLE_AUTHOR: 1,
+    ROLE_GUEST: 0
+}
diff --git a/rdmo/projects/filters.py b/rdmo/projects/filters.py
index 6740b13412..1beb932494 100644
--- a/rdmo/projects/filters.py
+++ b/rdmo/projects/filters.py
@@ -35,6 +35,19 @@ def filter_queryset(self, request, queryset, view):
         return queryset
 
 
+class ProjectRoleFilterBackend(BaseFilterBackend):
+
+    def filter_queryset(self, request, queryset, view):
+        if view.detail:
+            return queryset
+
+        role = request.GET.get('role')
+        if role:
+            queryset = queryset.filter(Q(current_role=role) | Q(highest_role=role))
+
+        return queryset
+
+
 class ProjectSearchFilterBackend(SearchFilter):
 
     def filter_queryset(self, request, queryset, view):
@@ -124,11 +137,8 @@ def filter_queryset(self, request, queryset, view):
                 queryset = queryset.annotate(progress=(F('progress_count') + F('progress_total')))
 
             elif 'role' in ordering or '-role' in ordering:
-                # annotate with the progress ratio
-                role_subquery = Subquery(
-                    Membership.objects.filter(project=OuterRef('pk'), user=request.user).values('role')
-                )
-                queryset = queryset.annotate(role=role_subquery)
+                # just order by highest_role
+                queryset = queryset.annotate(role=F('highest_role'))
 
             # order the queryset
             queryset = queryset.order_by(*ordering)
diff --git a/rdmo/projects/forms.py b/rdmo/projects/forms.py
deleted file mode 100644
index 0fa78f22c1..0000000000
--- a/rdmo/projects/forms.py
+++ /dev/null
@@ -1,480 +0,0 @@
-from django import forms
-from django.conf import settings
-from django.contrib.auth import get_user_model
-from django.contrib.sites.models import Site
-from django.core.exceptions import ValidationError
-from django.core.validators import EmailValidator
-from django.db.models import Q
-from django.utils.safestring import mark_safe
-from django.utils.translation import gettext_lazy as _
-
-from rdmo.core.constants import VALUE_TYPE_FILE
-from rdmo.core.plugins import get_plugin
-from rdmo.core.utils import markdown2html
-
-from .constants import ROLE_CHOICES
-from .models import Integration, IntegrationOption, Invite, Membership, Project, Snapshot, Visibility
-from .validators import ProjectParentValidator
-
-
-class CatalogChoiceField(forms.ModelChoiceField):
-
-    _unavailable_icon = ' (<span class="fa fa-eye-slash" aria-hidden="true"></span>)'
-
-    def label_from_instance(self, obj):
-        rendered_title = markdown2html(obj.title)
-        rendered_help = markdown2html(obj.help)
-
-        if obj.available is False:
-            return mark_safe(f'<div class="text-muted"><p>{rendered_title}{self._unavailable_icon}</p>'
-                             f'<p>{rendered_help}</p></div>')
-
-        return mark_safe(f'<p><b>{rendered_title}</b></p><p>{rendered_help}</p>')
-
-
-class TasksMultipleChoiceField(forms.ModelMultipleChoiceField):
-
-    def label_from_instance(self, obj):
-        rendered_title = markdown2html(obj.title)
-        rendered_text = markdown2html(obj.text)
-
-        return mark_safe(f'<b>{rendered_title}</b></br>{rendered_text}')
-
-
-class ViewsMultipleChoiceField(forms.ModelMultipleChoiceField):
-
-    def label_from_instance(self, obj):
-        rendered_title = markdown2html(obj.title)
-        rendered_help = markdown2html(obj.help)
-
-        return mark_safe(f'<b>{rendered_title}</b></br>{rendered_help}')
-
-
-class ProjectForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    def __init__(self, *args, **kwargs):
-        self.copy = kwargs.pop('copy', False)
-
-        catalogs = kwargs.pop('catalogs')
-        projects = kwargs.pop('projects')
-        super().__init__(*args, **kwargs)
-        self.fields['title'].widget.attrs.update({
-            'autofocus': True
-        })
-        self.fields['catalog'].queryset = catalogs
-        self.fields['catalog'].empty_label = None
-        self.fields['catalog'].initial = catalogs.first()
-
-        if settings.NESTED_PROJECTS:
-            self.fields['parent'].queryset = projects
-
-    def clean(self):
-        if not self.copy:
-            ProjectParentValidator(self.instance)(self.cleaned_data)
-        super().clean()
-
-    class Meta:
-        model = Project
-
-        fields = ['title', 'description', 'catalog']
-        if settings.NESTED_PROJECTS:
-            fields += ['parent']
-
-        field_classes = {
-            'catalog': CatalogChoiceField
-        }
-        widgets = {
-            'catalog': forms.RadioSelect()
-        }
-
-
-class ProjectUpdateInformationForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    class Meta:
-        model = Project
-        fields = ('title', 'description')
-
-
-class ProjectUpdateVisibilityForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    def __init__(self, *args, **kwargs):
-        self.project = kwargs.pop('instance')
-        self.user = kwargs.pop('user')
-        self.site = kwargs.pop('site')
-
-        try:
-            instance = self.project.visibility
-        except Visibility.DoesNotExist:
-            instance = None
-
-        super().__init__(*args, instance=instance, **kwargs)
-
-        # remove the sites or group sets if they are not needed, doing this in Meta would break tests
-        if not (settings.MULTISITE and self.user.has_perm('projects.change_visibility')):
-            self.fields.pop('sites')
-        if not settings.GROUPS:
-            self.fields.pop('groups')
-
-    class Meta:
-        model = Visibility
-        fields = ('sites', 'groups')
-
-    def save(self, *args, **kwargs):
-        if 'cancel' in self.data:
-            pass
-        elif 'delete' in self.data:
-            if settings.MULTISITE and not self.user.has_perm('projects.delete_visibility'):
-                current_site = Site.objects.get(id=self.site.id)
-                self.instance.remove_site(current_site)
-            else:
-                self.instance.delete()
-        else:
-            visibility, _created = Visibility.objects.update_or_create(project=self.project)
-
-            if settings.MULTISITE:
-                if self.user.has_perm('projects.change_visibility'):
-                    visibility.sites.set(self.cleaned_data.get('sites'))
-                else:
-                    visibility.sites.add(self.site)
-
-            if settings.GROUPS:
-                visibility.groups.set(self.cleaned_data.get('groups'))
-
-        return self.project
-
-
-class ProjectUpdateCatalogForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    def __init__(self, *args, **kwargs):
-        catalogs = kwargs.pop('catalogs')
-        super().__init__(*args, **kwargs)
-        self.fields['catalog'].queryset = catalogs
-        self.fields['catalog'].empty_label = None
-
-    class Meta:
-        model = Project
-        fields = ('catalog', )
-        field_classes = {
-            'catalog': CatalogChoiceField
-        }
-        widgets = {
-            'catalog': forms.RadioSelect()
-        }
-
-    def save(self, *args, **kwargs):
-        # if the catalog is the same, do nothing
-        if self.instance.catalog.id == self.cleaned_data.get('catalog'):
-            return self.instance
-        return super().save(*args, **kwargs)
-
-
-class ProjectUpdateTasksForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    def __init__(self, *args, **kwargs):
-        if settings.PROJECT_TASKS_SYNC:
-            raise ValidationError(_("Editing tasks is disabled."))
-
-        tasks = kwargs.pop('tasks')
-        super().__init__(*args, **kwargs)
-        self.fields['tasks'].queryset = tasks
-
-    class Meta:
-        model = Project
-        fields = ('tasks', )
-        field_classes = {
-            'tasks': TasksMultipleChoiceField
-        }
-        widgets = {
-            'tasks': forms.CheckboxSelectMultiple()
-        }
-
-    def save(self, *args, **kwargs):
-        if settings.PROJECT_TASKS_SYNC:
-            raise ValidationError(_("Editing tasks is disabled."))
-        super().save(*args, **kwargs)
-
-
-class ProjectUpdateViewsForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    def __init__(self, *args, **kwargs):
-        if settings.PROJECT_VIEWS_SYNC:
-            raise ValidationError(_("Editing views is disabled."))
-
-        views = kwargs.pop('views')
-        super().__init__(*args, **kwargs)
-        self.fields['views'].queryset = views
-
-    class Meta:
-        model = Project
-        fields = ('views', )
-        field_classes = {
-            'views': ViewsMultipleChoiceField
-        }
-        widgets = {
-            'views': forms.CheckboxSelectMultiple()
-        }
-
-    def save(self, *args, **kwargs):
-        if settings.PROJECT_VIEWS_SYNC:
-            raise ValidationError(_("Editing views is disabled."))
-        super().save(*args, **kwargs)
-
-
-class ProjectUpdateParentForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    def __init__(self, *args, **kwargs):
-        projects = kwargs.pop('projects')
-        super().__init__(*args, **kwargs)
-        self.fields['parent'].queryset = projects
-
-    def clean(self):
-        ProjectParentValidator(self.instance)(self.cleaned_data)
-        super().clean()
-
-    class Meta:
-        model = Project
-        fields = ('parent', )
-
-
-class SnapshotCreateForm(forms.ModelForm):
-
-    use_required_attribute = False
-
-    class Meta:
-        model = Snapshot
-        fields = ('title', 'description')
-
-    def __init__(self, *args, **kwargs):
-        self.project = kwargs.pop('project')
-        super().__init__(*args, **kwargs)
-
-    def save(self, *args, **kwargs):
-        self.instance.project = self.project
-        return super().save(*args, **kwargs)
-
-
-class MembershipCreateForm(forms.Form):
-
-    use_required_attribute = False
-
-    username_or_email = forms.CharField(widget=forms.TextInput(attrs={'placeholder': _('Username or e-mail')}),
-                                        label=_('User'),
-                                        help_text=_('The username or e-mail of the new user.'))
-    role = forms.CharField(widget=forms.RadioSelect(choices=ROLE_CHOICES),
-                           initial='author', label=_('Role'))
-
-    def __init__(self, *args, **kwargs):
-        self.project = kwargs.pop('project')
-        self.is_site_manager = kwargs.pop('is_site_manager')
-        super().__init__(*args, **kwargs)
-
-        if self.is_site_manager:
-            self.fields['silent'] = forms.BooleanField(
-                required=False,
-                label=_('Add member silently'),
-                help_text=_('As site manager or admin, you can directly add users without notifying them via e-mail, '
-                            'when you check the following checkbox.')
-            )
-
-    def clean_username_or_email(self):
-        username_or_email = self.cleaned_data['username_or_email']
-        usermodel = get_user_model()
-
-        # check if it is a registered user
-        try:
-            self.cleaned_data['user'] = usermodel.objects.get(Q(username=username_or_email) |
-                                                              Q(email__iexact=username_or_email))
-            self.cleaned_data['email'] = self.cleaned_data['user'].email
-
-            if self.cleaned_data['user'] in self.project.user.all():
-                raise ValidationError(_('The user is already a member of the project.'))
-
-        except (usermodel.DoesNotExist, usermodel.MultipleObjectsReturned) as e:
-            if settings.PROJECT_SEND_INVITE:
-                # check if it is a valid email address, this will raise the correct ValidationError
-                EmailValidator()(username_or_email)
-
-                self.cleaned_data['user'] = None
-                self.cleaned_data['email'] = username_or_email
-            else:
-                self.cleaned_data['user'] = None
-                self.cleaned_data['email'] = None
-                raise ValidationError(_('A user with this username or e-mail was not found. '
-                                        'Only registered users can be invited.')) from e
-
-    def clean(self):
-        if self.cleaned_data.get('silent') is True and self.cleaned_data.get('user') is None:
-            raise ValidationError(_('Only existing users can be added silently.'))
-
-    def save(self):
-        if self.is_site_manager and self.cleaned_data.get('silent') is True:
-            Membership.objects.create(
-                project=self.project,
-                user=self.cleaned_data.get('user'),
-                role=self.cleaned_data.get('role')
-            )
-        else:
-            invite, _created = Invite.objects.get_or_create(
-                project=self.project,
-                user=self.cleaned_data.get('user'),
-                email=self.cleaned_data.get('email')
-            )
-            invite.role = self.cleaned_data.get('role')
-            invite.make_token()
-            invite.save()
-
-            return invite
-
-
-class IntegrationForm(forms.ModelForm):
-
-    class Meta:
-        model = Integration
-        fields = ()
-
-    def __init__(self, *args, **kwargs):
-        self.project = kwargs.pop('project')
-        self.provider_key = kwargs.pop('provider_key', None)
-        super().__init__(*args, **kwargs)
-
-        # get the provider
-        if self.provider_key:
-            self.provider = get_plugin('PROJECT_ISSUE_PROVIDERS', self.provider_key)
-        else:
-            self.provider = self.instance.provider
-
-        # add fields for the integration options
-        for field in self.provider.fields:
-            # new integration instance is going to be created
-            if self.instance.pk is None:
-                initial = None
-            # existing integration is going to be updated
-            else:
-                try:
-                    initial = IntegrationOption.objects.get(integration=self.instance, key=field.get('key')).value
-                except IntegrationOption.DoesNotExist:
-                    initial = None
-
-            if field.get('placeholder'):
-                attrs = {'placeholder': field.get('placeholder')}
-
-            self.fields[field.get('key')] = forms.CharField(widget=forms.TextInput(attrs=attrs),
-                                                            initial=initial, required=field.get('required', True),
-                                                            help_text=field.get('help'))
-
-    def save(self):
-        # the the project and the provider_key
-        self.instance.project = self.project
-        if self.provider_key:
-            self.instance.provider_key = self.provider_key
-
-        # call the form's save method
-        super().save()
-
-        # save the integration options
-        self.instance.save_options(self.cleaned_data)
-
-
-class IssueSendForm(forms.Form):
-
-    class AttachmentViewsField(forms.ModelMultipleChoiceField):
-        def label_from_instance(self, obj):
-            return _('Attach %s') % obj.title
-
-    class AttachmentFilesField(forms.ModelMultipleChoiceField):
-        def label_from_instance(self, obj):
-            return _('Attach %s') % obj.file_name
-
-    class AttachmentSnapshotField(forms.ModelChoiceField):
-        def label_from_instance(self, obj):
-            return obj.title
-
-    subject = forms.CharField(label=_('Subject'), max_length=128)
-    message = forms.CharField(label=_('Message'), widget=forms.Textarea)
-
-    def __init__(self, *args, **kwargs):
-        self.project = kwargs.pop('project')
-        super().__init__(*args, **kwargs)
-
-        self.fields['attachments_answers'] = forms.MultipleChoiceField(
-            label=_('Answers'), widget=forms.CheckboxSelectMultiple, required=False,
-            choices=[('project_answers', _('Attach the output of "View answers".'))]
-        )
-        self.fields['attachments_views'] = self.AttachmentViewsField(
-            label=_('Views'), widget=forms.CheckboxSelectMultiple, required=False,
-            queryset=self.project.views.all(), to_field_name='id'
-        )
-        self.fields['attachments_files'] = self.AttachmentFilesField(
-            label=_('Files'), widget=forms.CheckboxSelectMultiple, required=False,
-            queryset=self.project.values.filter(snapshot=None)
-                                        .filter(value_type=VALUE_TYPE_FILE)
-                                        .order_by('file'),
-            to_field_name='id'
-        )
-        self.fields['attachments_snapshot'] = self.AttachmentSnapshotField(
-            label=_('Snapshot'), widget=forms.RadioSelect, required=False,
-            queryset=self.project.snapshots.all(), empty_label=_('Current')
-        )
-        self.fields['attachments_format'] = forms.ChoiceField(
-            label=_('Format'), widget=forms.RadioSelect, required=False,
-            choices=settings.EXPORT_FORMATS
-        )
-
-    def clean(self):
-        cleaned_data = super().clean()
-
-        if cleaned_data.get('attachments_answers') or cleaned_data.get('attachments_views'):
-            if not cleaned_data.get('attachments_format'):
-                self.add_error('attachments_format', _('This field is required.'))
-
-
-class IssueMailForm(forms.Form):
-
-    if settings.EMAIL_RECIPIENTS_CHOICES:
-        recipients = forms.MultipleChoiceField(label=_('Recipients'), widget=forms.CheckboxSelectMultiple,
-                                               required=not settings.EMAIL_RECIPIENTS_INPUT,
-                                               choices=settings.EMAIL_RECIPIENTS_CHOICES)
-
-    if settings.EMAIL_RECIPIENTS_INPUT:
-        recipients_input = forms.CharField(label=_('Recipients'), widget=forms.Textarea(attrs={
-            'placeholder': _('Enter recipients line by line')
-        }), required=not settings.EMAIL_RECIPIENTS_CHOICES)
-
-    def clean(self):
-        cleaned_data = super().clean()
-
-        if settings.EMAIL_RECIPIENTS_INPUT and \
-                cleaned_data.get('recipients') == [] and \
-                cleaned_data.get('recipients_input') == []:
-            self.add_error('recipients_input', _('This field is required.'))
-
-    def clean_recipients_input(self):
-        email_validator = EmailValidator()
-        cleaned_data = []
-
-        for line in self.cleaned_data['recipients_input'].splitlines():
-            email = line.strip()
-            email_validator(email)
-            cleaned_data.append(email)
-
-        return cleaned_data
-
-
-class UploadFileForm(forms.Form):
-    uploaded_file = forms.FileField(
-        label='Select a file',
-    )
diff --git a/rdmo/projects/imports.py b/rdmo/projects/imports.py
index bfb40937cc..7e04f2c218 100644
--- a/rdmo/projects/imports.py
+++ b/rdmo/projects/imports.py
@@ -265,10 +265,10 @@ def submit(self):
             response = requests.get(form.cleaned_data['url'])
             self.request.session['import_file_name'] = handle_fetched_file(response.content)
 
-            if self.current_project:
-                return redirect('project_update_import', self.current_project.id)
-            else:
-                return redirect('project_create_import')
+            # if self.current_project:
+            #     return redirect('project_update_import', self.current_project.id)
+            # else:
+            #     return redirect('project_create_import')
 
         return render(self.request, 'projects/project_import_form.html', {
             'source_title': 'URL',
diff --git a/rdmo/projects/managers.py b/rdmo/projects/managers.py
index 39c3415367..556aad7a1a 100644
--- a/rdmo/projects/managers.py
+++ b/rdmo/projects/managers.py
@@ -7,7 +7,6 @@
 from mptt.models import TreeManager
 from mptt.querysets import TreeQuerySet
 
-from rdmo.accounts.utils import is_site_manager
 from rdmo.core.managers import CurrentSiteManagerMixin
 
 
@@ -29,7 +28,7 @@ def filter_user(self, user, filter_for_user=False):
                 visibility_filter = Q(visibility__isnull=False) & sites_filter & groups_filter
 
                 # create a filter for all projects of this site (unless filter_for_user is set)
-                if (user.has_perm('projects.view_project') or is_site_manager(user)) and not filter_for_user:
+                if (user.has_perm('projects.view_project') or user.role.is_site_manager) and not filter_for_user:
                     current_site_filter = Q(site=settings.SITE_ID)
                 else:
                     current_site_filter = Q()
@@ -71,7 +70,7 @@ def filter_user(self, user):
         if user.is_authenticated:
             if user.has_perm('projects.view_membership'):
                 return self.all()
-            elif is_site_manager(user):
+            elif user.role.is_site_manager:
                 return self.filter_current_site()
             else:
                 from .models import Project
@@ -90,7 +89,7 @@ def filter_user(self, user):
         if user.is_authenticated:
             if user.has_perm('projects.view_integration'):
                 return self.all()
-            elif is_site_manager(user):
+            elif user.role.is_site_manager:
                 return self.filter_current_site()
             else:
                 from .models import Project
@@ -109,7 +108,7 @@ def filter_user(self, user):
         if user.is_authenticated:
             if user.has_perm('projects.view_issue'):
                 return self.all()
-            elif is_site_manager(user):
+            elif user.role.is_site_manager:
                 return self.filter_current_site()
             else:
                 from .models import Project
@@ -128,7 +127,7 @@ def filter_user(self, user):
         if user.is_authenticated:
             if user.has_perm('projects.view_invite'):
                 return self.all()
-            elif is_site_manager(user):
+            elif user.role.is_site_manager:
                 return self.filter_current_site()
             else:
                 from .models import Project
@@ -147,7 +146,7 @@ def filter_user(self, user):
         if user.is_authenticated:
             if user.has_perm('projects.view_snapshot'):
                 return self.all()
-            elif is_site_manager(user):
+            elif user.role.is_site_manager:
                 return self.filter_current_site()
             else:
                 from .models import Project
@@ -166,7 +165,7 @@ def filter_user(self, user):
         if user.is_authenticated:
             if user.has_perm('projects.view_value'):
                 return self.all()
-            elif is_site_manager(user):
+            elif user.role.is_site_manager:
                 return self.filter_current_site()
             else:
                 from .models import Project
@@ -229,6 +228,33 @@ def filter_user(self, user, filter_for_user=False):
     def filter_groups(self, groups):
         return self.get_queryset().filter_groups(groups)
 
+    def filter_projects_for_task_or_view(self, instance):
+        return self.get_queryset().filter_projects_for_task_or_view(instance)
+
+    def prefetch_ancestors(self, projects):
+        # collect the constraints for all projects
+        filters = Q()
+        for project in projects:
+            filters |= (Q(tree_id=project.tree_id) & Q(lft__lt=project.lft) & Q(rght__gt=project.rght))
+
+        # Fetch all ancestors in one query
+        ancestors = self.filter(filters).order_by('tree_id', 'lft')
+
+        # Index by descendant id
+        prefetched_ancestors = {
+            project.id: [] for project in projects
+        }
+        for ancestor in ancestors:
+            for project in projects:
+                if ancestor.tree_id == project.tree_id and ancestor.lft < project.lft and ancestor.rght > project.rght:
+                    prefetched_ancestors[project.id].append(ancestor)
+
+        # add the project as last ancestor
+        for project in projects:
+            prefetched_ancestors[project.id].append(project)
+
+        return prefetched_ancestors
+
 
 class MembershipManager(CurrentSiteManagerMixin, models.Manager):
 
diff --git a/rdmo/projects/mixins.py b/rdmo/projects/mixins.py
deleted file mode 100644
index 1ce167ca0a..0000000000
--- a/rdmo/projects/mixins.py
+++ /dev/null
@@ -1,241 +0,0 @@
-from collections import defaultdict
-from pathlib import Path
-
-from django.contrib.sites.shortcuts import get_current_site
-from django.core.exceptions import ValidationError
-from django.http import Http404, HttpResponseRedirect
-from django.shortcuts import get_object_or_404, redirect, render
-from django.utils.translation import gettext_lazy as _
-
-from rdmo.core.imports import handle_uploaded_file
-from rdmo.core.plugins import get_plugin, get_plugins
-from rdmo.questions.models import Question
-
-from .models import Membership, Project
-from .utils import save_import_snapshot_values, save_import_tasks, save_import_values, save_import_views
-
-
-class ProjectImportMixin:
-
-    def get_current_values(self, current_project):
-        queryset = current_project.values.filter(snapshot=None).select_related('attribute', 'option')
-
-        current_values = defaultdict(lambda: defaultdict(lambda: defaultdict(lambda: defaultdict(list))))
-        for value in queryset:
-            current_values[value.attribute.uri][value.set_prefix][value.set_index][value.collection_index] = value
-        return current_values
-
-    def get_questions(self, catalog):
-        queryset = Question.objects.filter_by_catalog(catalog) \
-                                   .select_related('attribute') \
-                                   .order_by('attribute__uri')
-
-        questions = {}
-        for question in queryset:
-            if question.attribute and question.attribute.uri not in questions:
-                questions[question.attribute.uri] = question
-        return questions
-
-    def update_values(self, current_project, catalog, values, snapshots=None):
-        snapshots = snapshots or []
-        questions = self.get_questions(catalog)
-        current_values = self.get_current_values(current_project) if current_project else {}
-
-        for value in values:
-            if value.attribute:
-                value.pk = None
-                value.question = questions.get(value.attribute.uri)
-                value.current = current_values.get(value.attribute.uri, {}) \
-                                              .get(value.set_prefix, {}) \
-                                              .get(value.set_index, {}) \
-                                              .get(value.collection_index)
-
-        for snapshot in snapshots:
-            snapshot.pk = None
-
-            for value in snapshot.snapshot_values:
-                if value.attribute:
-                    value.pk = None
-                    value.question = questions.get(value.attribute.uri)
-                    value.current = current_values.get(value.attribute.uri, {}) \
-                                                  .get(value.set_prefix, {}) \
-                                                  .get(value.set_index, {}) \
-                                                  .get(value.collection_index)
-
-    def get_import_plugin(self, key, current_project=None):
-        import_plugin = get_plugin('PROJECT_IMPORTS', key)
-        if import_plugin is None:
-            raise Http404
-
-        import_plugin.request = self.request
-        import_plugin.current_project = current_project
-
-        return import_plugin
-
-    def upload_file(self):
-        try:
-            uploaded_file = self.request.FILES['uploaded_file']
-        except KeyError:
-            return render(self.request, 'core/error.html', {
-                'title': _('Import error'),
-                'errors': [_('There has been an error with your import.')]
-            }, status=400)
-        else:
-            self.request.session['import_file_name'] = handle_uploaded_file(uploaded_file)
-            self.request.session['import_source_title'] = uploaded_file.name
-
-            # redirect to the import form
-            return redirect(self.request.path)
-
-    def import_form(self):
-        current_project = self.object
-
-        import_file_name = self.request.session.get('import_file_name')
-        import_source_title = self.request.session.get('import_source_title')
-        if import_file_name is None or not Path(import_file_name).is_file():
-            return render(self.request, 'core/error.html', {
-                'title': _('Import error'),
-                'errors': [_('There has been an error with your import. No uploaded or retrieved file could be found.')]
-            }, status=400)
-
-        for import_key, import_plugin in get_plugins('PROJECT_IMPORTS').items():
-            import_plugin.current_project = current_project
-            import_plugin.file_name = import_file_name
-            import_plugin.source_title = import_source_title
-            import_plugin.request = self.request
-
-            if import_plugin.check():
-                try:
-                    import_plugin.process()
-                except ValidationError as e:
-                    return render(self.request, 'core/error.html', {
-                        'title': _('Import error'),
-                        'errors': e
-                    }, status=400)
-
-                # store information in session for ProjectCreateImportView
-                self.request.session['import_key'] = import_key
-
-                # attach questions and current values
-                self.update_values(current_project, import_plugin.catalog,
-                                   import_plugin.values, import_plugin.snapshots)
-
-                return render(self.request, 'projects/project_import.html', {
-                    'method': 'import_file',
-                    'current_project': current_project,
-                    'source_title': import_plugin.source_title,
-                    'source_project': import_plugin.project,
-                    'values': import_plugin.values,
-                    'snapshots': import_plugin.snapshots if not current_project else None,
-                    'tasks': import_plugin.tasks,
-                    'views': import_plugin.views
-                })
-
-        return render(self.request, 'core/error.html', {
-            'title': _('Import error'),
-            'errors': [_('Files of this type cannot be imported.')]
-        }, status=400)
-
-    def import_file(self):
-        current_project = self.object
-
-        if 'cancel' in self.request.POST:
-            if current_project:
-                return HttpResponseRedirect(current_project.get_absolute_url())
-            else:
-                return HttpResponseRedirect(self.success_url)
-
-        try:
-            import_tmpfile_name = self.request.session.pop('import_file_name')
-            import_key = self.request.session.pop('import_key')
-        except KeyError:
-            return render(self.request, 'core/error.html', {
-                'title': _('Import error'),
-                'errors': [_('There has been an error with your import.')]
-            }, status=400)
-
-        checked = [key for key, value in self.request.POST.items() if 'on' in value]
-
-        if import_tmpfile_name and import_key:
-            import_plugin = self.get_import_plugin(import_key, current_project)
-            import_plugin.file_name = import_tmpfile_name
-
-            if import_plugin.check():
-                try:
-                    import_plugin.process()
-                except ValidationError as e:
-                    return render(self.request, 'core/error.html', {
-                        'title': _('Import error'),
-                        'errors': e
-                    }, status=400)
-
-                # attach questions and current values
-                self.update_values(current_project, import_plugin.catalog,
-                                   import_plugin.values, import_plugin.snapshots)
-
-                if current_project:
-                    save_import_values(self.object, import_plugin.values, checked)
-                    save_import_tasks(self.object, import_plugin.tasks)
-                    save_import_views(self.object, import_plugin.views)
-
-                    return HttpResponseRedirect(current_project.get_absolute_url())
-
-                else:
-                    # add current site and save project
-                    import_plugin.project.site = get_current_site(self.request)
-                    import_plugin.project.save()
-
-                    # add user to project
-                    membership = Membership(project=import_plugin.project, user=self.request.user, role='owner')
-                    membership.save()
-
-                    for value in import_plugin.values:
-                        value.current = None
-
-                    save_import_values(import_plugin.project, import_plugin.values, checked)
-                    save_import_snapshot_values(import_plugin.project, import_plugin.snapshots, checked)
-                    save_import_tasks(import_plugin.project, import_plugin.tasks)
-                    save_import_views(import_plugin.project, import_plugin.views)
-
-                    return HttpResponseRedirect(import_plugin.project.get_absolute_url())
-
-        return render(self.request, 'core/error.html', {
-            'title': _('Import error'),
-            'errors': [_('There has been an error with your import.')]
-        }, status=400)
-
-    def import_project(self):
-        current_project = self.object
-
-        if 'cancel' in self.request.POST:
-            if current_project:
-                return HttpResponseRedirect(current_project.get_absolute_url())
-            else:
-                return HttpResponseRedirect(self.success_url)
-
-        # get the original project
-        project = get_object_or_404(Project.objects.all(), id=self.request.POST.get('source'))
-
-        # check if the user has the permission to access the original project
-        if not self.request.user.has_perm('projects.view_project_object', project):
-            self.handle_no_permission()
-
-        values = project.values.filter(snapshot=None) \
-                               .select_related('attribute', 'option')
-
-        # attach questions and current values
-        self.update_values(current_project, current_project.catalog, values)
-
-        checked = [key for key, value in self.request.POST.items() if 'on' in value]
-        if checked:
-            save_import_values(current_project, values, checked)
-            return HttpResponseRedirect(current_project.get_absolute_url())
-
-        else:
-            return render(self.request, 'projects/project_import.html', {
-                'method': 'import_project',
-                'source': project.id,
-                'source_title': project.title,
-                'current_project': current_project,
-                'values': values,
-            })
diff --git a/rdmo/projects/models/project.py b/rdmo/projects/models/project.py
index f7dcf8a0f2..a745ce38f5 100644
--- a/rdmo/projects/models/project.py
+++ b/rdmo/projects/models/project.py
@@ -103,49 +103,41 @@ def catalog_uri(self) -> str | None:
 
     @cached_property
     def member(self) -> list:
-        return self.user.all()
-
-    @cached_property
-    def owners_str(self) -> str:
-        return ', '.join(['' if x is None else str(x) for x in self.user.filter(membership__role='owner')])
+        return self.get_prefetched_members()
 
     @property
     def owners(self) -> list:
-        return self.get_members('owner')
+        return self.get_prefetched_members('owner')
 
     @property
     def managers(self) -> list:
-        return self.get_members('manager')
+        return self.get_prefetched_members('manager')
 
     @property
     def authors(self) -> list:
-        return self.get_members('author')
+        return self.get_prefetched_members('author')
 
     @property
     def guests(self) -> list:
-        return self.get_members('guest')
+        return self.get_prefetched_members('guest')
+
+    @property
+    def groups(self) -> list:
+        return [group for user in self.owners for group in user.groups.all()]
+
+    @cached_property
+    def owners_str(self) -> str:
+        return ', '.join(['' if user is None else str(user) for user in self.owners])
 
     @cached_property
     def groups_str(self) -> str:
         return ', '.join(str(i) for i in self.groups if i is not None)
 
-    @property
-    def groups(self) -> list:
-        return {group for user in self.get_members('owner') for group in user.groups.all()}
-
     @property
     def file_size(self) -> int:
         queryset = self.values.filter(snapshot=None).exclude(models.Q(file='') | models.Q(file=None))
         return sum([value.file.size for value in queryset])
 
-    def get_members(self, role):
-        try:
-            # membership_list is created by the Prefetch call in the viewset
-            return [membership.user for membership in self.memberships_list if membership.role == role]
-        except AttributeError:
-            # membership_list does not exist
-            return self.user.filter(memberships__role=role)
-
     def get_answer_tree(self, snapshot=None, verbose=None):
         return AnswerTree(
             self.catalog,
@@ -153,6 +145,25 @@ def get_answer_tree(self, snapshot=None, verbose=None):
             verbose=verbose
         ).compute()
 
+    def get_cached_ancestors(self):
+        # this caches the ancestors, different to a @cached_property, this is also done
+        # in the __init__ of ProjectSerializer
+        if not hasattr(self, '_cached_ancestors'):
+            self._cached_ancestors = self.get_ancestors()
+        return self._cached_ancestors
+
+    def get_prefetched_members(self, role=None):
+        try:
+            # prefetched_memberships is created by the Prefetch call in the viewset
+            return [
+                membership.user
+                for membership in self.prefetched_memberships
+                if role in [None, membership.role]
+            ]
+        except AttributeError:
+            # membership_list does not exist
+            return self.user.filter(memberships__role=role) if role is not None else self.user.all()
+
 
 @receiver(pre_delete, sender=Project)
 def reparent_children(sender, instance, **kwargs):
diff --git a/rdmo/projects/models/snapshot.py b/rdmo/projects/models/snapshot.py
index 0403da40cc..7200c1abdb 100644
--- a/rdmo/projects/models/snapshot.py
+++ b/rdmo/projects/models/snapshot.py
@@ -2,6 +2,7 @@
 from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 
+from rdmo.core.constants import VALUE_TYPE_FILE
 from rdmo.core.models import Model
 
 from ..managers import SnapshotManager
@@ -55,6 +56,12 @@ def save(self, *args, **kwargs):
                 if value.file:
                     value.copy_file(value.file_name, value.file)
 
+    def delete(self):
+        # remove the files for this snapshot individually, to ensure cleanup
+        for value in self.values.filter(value_type=VALUE_TYPE_FILE):
+            value.file.delete(save=False)
+        super().delete()
+
     def rollback(self):
         # remove all current values for this project
         self.project.values.filter(snapshot=None).delete()
diff --git a/rdmo/projects/permissions.py b/rdmo/projects/permissions.py
index 84c639a3ce..bf3ec6c858 100644
--- a/rdmo/projects/permissions.py
+++ b/rdmo/projects/permissions.py
@@ -71,6 +71,12 @@ def get_required_object_permissions(self, method, model_cls):
         return ('projects.view_page_object', )
 
 
+class HasProjectLeavePermission(HasProjectPermission):
+
+    def get_required_object_permissions(self, method, model_cls):
+        return ('projects.leave_project_object', )
+
+
 class HasProjectProgressModelPermission(HasModelPermission):
 
     def get_required_permissions(self, method, model_cls):
diff --git a/rdmo/projects/rules.py b/rdmo/projects/rules.py
index ba29ed7193..fced508d61 100644
--- a/rdmo/projects/rules.py
+++ b/rdmo/projects/rules.py
@@ -2,6 +2,7 @@
 from django.core.exceptions import ObjectDoesNotExist
 
 import rules
+from rules.predicates import is_superuser
 
 
 @rules.predicate
@@ -27,22 +28,39 @@ def is_current_project_member(user, project):
 
 @rules.predicate
 def is_project_owner(user, project):
-    return user in project.owners or (project.parent and is_project_owner(user, project.parent))
+    try:
+        return project.highest_role == 'owner'
+    except AttributeError:
+        return user in project.owners or (project.parent and is_project_owner(user, project.parent))
 
 
 @rules.predicate
 def is_project_manager(user, project):
-    return user in project.managers or (project.parent and is_project_manager(user, project.parent))
+    try:
+        return project.highest_role == 'manager'
+    except AttributeError:
+        return user in project.managers or (project.parent and is_project_manager(user, project.parent))
 
 
 @rules.predicate
 def is_project_author(user, project):
-    return user in project.authors or (project.parent and is_project_author(user, project.parent))
+    try:
+        return project.highest_role == 'author'
+    except AttributeError:
+        return user in project.authors or (project.parent and is_project_author(user, project.parent))
 
 
 @rules.predicate
 def is_project_guest(user, project):
-    return user in project.guests or (project.parent and is_project_guest(user, project.parent))
+    try:
+        return project.highest_role == 'guest'
+    except AttributeError:
+        return user in project.guests or (project.parent and is_project_guest(user, project.parent))
+
+
+@rules.predicate
+def is_last_owner(user, project):
+    return user in project.owners and len(project.owners) == 1
 
 
 @rules.predicate
@@ -58,18 +76,18 @@ def is_visible(user, project):
 
 @rules.predicate
 def is_site_manager(user, project):
-    if user.is_authenticated:
-        return user.role.manager.filter(pk=project.site.pk).exists()
-    else:
-        return False
+    return user.is_authenticated and user.role.is_site_manager
+
 
+# Add rule for check in template
+rules.add_rule('projects.can_view_all_projects', is_site_manager | is_superuser)
 
 rules.add_perm('projects.add_project', can_add_project)
 rules.add_perm('projects.view_project_object', is_project_member | is_visible | is_site_manager)
 rules.add_perm('projects.change_project_object', is_project_manager | is_project_owner | is_site_manager)
 rules.add_perm('projects.change_project_progress_object', is_project_author | is_project_manager | is_project_owner | is_site_manager)  # noqa: E501
 rules.add_perm('projects.delete_project_object', is_project_owner | is_site_manager)
-rules.add_perm('projects.leave_project_object', is_current_project_member)
+rules.add_perm('projects.leave_project_object', is_current_project_member & ~is_last_owner)
 rules.add_perm('projects.export_project_object', is_project_owner | is_project_manager | is_site_manager)
 rules.add_perm('projects.import_project_object', is_project_owner | is_project_manager | is_site_manager)
 
@@ -79,7 +97,7 @@ def is_site_manager(user, project):
 rules.add_perm('projects.delete_visibility_object', is_site_manager)
 
 rules.add_perm('projects.view_membership_object', is_project_member | is_visible | is_site_manager)
-rules.add_perm('projects.add_membership_object', is_project_owner | is_site_manager)
+rules.add_perm('projects.add_membership_object', is_site_manager)
 rules.add_perm('projects.change_membership_object', is_project_owner | is_site_manager)
 rules.add_perm('projects.delete_membership_object', is_project_owner | is_site_manager)
 
@@ -101,6 +119,7 @@ def is_site_manager(user, project):
 rules.add_perm('projects.view_snapshot_object', is_project_member | is_visible | is_site_manager)
 rules.add_perm('projects.add_snapshot_object', is_project_manager | is_project_owner | is_site_manager)
 rules.add_perm('projects.change_snapshot_object', is_project_manager | is_project_owner | is_site_manager)
+rules.add_perm('projects.delete_snapshot_object', is_project_manager | is_project_owner | is_site_manager)
 rules.add_perm('projects.rollback_snapshot_object', is_project_manager | is_project_owner | is_site_manager)
 rules.add_perm('projects.export_snapshot_object', is_project_owner | is_project_manager | is_site_manager)
 
diff --git a/rdmo/projects/serializers/v1/__init__.py b/rdmo/projects/serializers/v1/__init__.py
index 790fc18994..47a12e866f 100644
--- a/rdmo/projects/serializers/v1/__init__.py
+++ b/rdmo/projects/serializers/v1/__init__.py
@@ -1,16 +1,21 @@
+from collections.abc import Mapping
+from typing import Any
+
 from django.conf import settings
 from django.contrib.auth import get_user_model
-from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 
 from rest_framework import serializers
-from rest_framework.exceptions import ValidationError
 
+from rdmo.accounts.serializers.v1 import UserLookupSerializer
 from rdmo.accounts.utils import get_full_name
+from rdmo.core.serializers import TranslationSerializerMixin
 from rdmo.domain.models import Attribute
 from rdmo.questions.models import Catalog
 from rdmo.services.validators import ProviderValidator
+from rdmo.views.models import View
 
+from ...constants import ROLE_CHOICES
 from ...models import (
     Integration,
     IntegrationOption,
@@ -28,25 +33,85 @@
 
 class ProjectUserSerializer(serializers.ModelSerializer):
 
+    current = serializers.SerializerMethodField()
     full_name = serializers.SerializerMethodField()
+    socialaccounts = serializers.SerializerMethodField()
 
     class Meta:
         model = get_user_model()
         fields = [
             'id',
+            'current',
+            'username',
+            'first_name',
+            'last_name',
+            'full_name',
+            'email',
+            'socialaccounts'
         ]
-        if settings.USER_API:
-            fields += [
-                'username',
-                'first_name',
-                'last_name',
-                'full_name',
-                'email'
-            ]
 
     def get_full_name(self, obj) -> str:
         return get_full_name(obj)
 
+    def get_socialaccounts(self, obj) -> list[dict[str, str]]:
+        if settings.SOCIALACCOUNT:
+            return [{
+                'provider': socialaccount.provider,
+                'uid': socialaccount.uid
+            } for socialaccount in obj.socialaccount_set.all()]
+        else:
+            return []
+
+    def get_current(self, obj) -> bool:
+        request = self.context.get('request')
+        if request:
+            return obj == request.user
+
+
+class ProjectAncestorSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Project
+        fields = (
+            'id',
+            'title'
+        )
+
+
+class ProjectHierarchySerializer(serializers.ModelSerializer):
+
+    current = serializers.SerializerMethodField()
+    permissions = serializers.SerializerMethodField()
+    children = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Project
+        fields = (
+            'id',
+            'current',
+            'title',
+            'permissions',
+            'children',
+        )
+
+    def get_current(self, obj):
+        project = self.context.get('project')
+        if project:
+            return project.id == obj.id
+
+    def get_permissions(self, obj) -> dict[str, bool]:
+        request = self.context.get('request')
+        return {
+            'can_view_project': request.user.has_perm('projects.view_project_object', obj),
+            'can_change_project': request.user.has_perm('projects.change_project_object', obj),
+            'can_delete_project': request.user.has_perm('projects.delete_project_object', obj)
+        }
+
+    def get_children(self, obj):
+        # get the children from the cached mptt tree
+        serializer = ProjectHierarchySerializer(obj.get_children(), many=True, read_only=True, context=self.context)
+        return serializer.data
+
 
 class ProjectSerializer(serializers.ModelSerializer):
 
@@ -61,13 +126,20 @@ def get_queryset(self):
             return Project.objects.filter_user(self.context['request'].user)
 
     catalog = CatalogField(required=True)
-    parent = ParentField(required=False)
+
+    parent = ParentField(required=False, allow_null=True)
+    parent_title = serializers.CharField(source='parent.title', read_only=True)
 
     owners = ProjectUserSerializer(many=True, read_only=True)
     managers = ProjectUserSerializer(many=True, read_only=True)
     authors = ProjectUserSerializer(many=True, read_only=True)
     guests = ProjectUserSerializer(many=True, read_only=True)
 
+    ancestors = serializers.SerializerMethodField()
+    permissions = serializers.SerializerMethodField()
+
+    current_role = serializers.SerializerMethodField()
+    highest_role = serializers.SerializerMethodField()
     last_changed = serializers.DateTimeField(read_only=True)
 
     visibility = serializers.CharField(source='visibility.get_help_display', read_only=True)
@@ -80,20 +152,24 @@ class Meta:
             'description',
             'catalog',
             'catalog_uri',
-            'snapshots',
             'parent',
+            'parent_title',
             'owners',
             'managers',
             'authors',
             'guests',
             'created',
             'updated',
+            'current_role',
+            'highest_role',
             'last_changed',
             'site',
             'views',
             'progress_total',
             'progress_count',
-            'visibility'
+            'visibility',
+            'ancestors',
+            'permissions',
         )
         read_only_fields = (
             'snapshots',
@@ -102,12 +178,100 @@ class Meta:
             ProjectParentValidator()
         ]
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        if self.instance:
+            # this prefetches the ancestors of all instances for the serializer in one
+            # query and caches them in the project instances
+            projects = self.instance if isinstance(self.instance, list) else [self.instance]
+            prefetched = Project.objects.prefetch_ancestors(projects)
+            for project in projects:
+                project._cached_ancestors = prefetched[project.id]
+
     def validate_views(self, value):
         """Block updates to views if syncing is enabled."""
         if settings.PROJECT_VIEWS_SYNC and value:
-            raise ValidationError(_('Editing views is disabled.'))
+            raise serializers.ValidationError(_('Editing views is disabled.'))
         return value
 
+    def get_permissions(self, obj) -> dict[str, bool]:
+        request = self.context.get('request')
+        return {
+            'can_view_project': request.user.has_perm('projects.view_project_object', obj),
+            'can_change_project': request.user.has_perm('projects.change_project_object', obj),
+            'can_delete_project': request.user.has_perm('projects.delete_project_object', obj),
+            'can_leave_project': request.user.has_perm('projects.leave_project_object', obj),
+            'can_export_project': request.user.has_perm('projects.export_project_object', obj),
+            'can_import_project': request.user.has_perm('projects.import_project_object', obj),
+            'can_view_visibility': request.user.has_perm('projects.view_visibility_object', obj),
+            'can_add_visibility': request.user.has_perm('projects.add_visibility_object', obj),
+            'can_change_visibility': request.user.has_perm('projects.change_visibility_object', obj),
+            'can_delete_visibility': request.user.has_perm('projects.delete_visibility_object', obj),
+            'can_view_membership': request.user.has_perm('projects.view_membership_object', obj),
+            'can_add_membership': request.user.has_perm('projects.add_membership_object', obj),
+            'can_change_membership': request.user.has_perm('projects.change_membership_object', obj),
+            'can_delete_membership': request.user.has_perm('projects.delete_membership_object', obj),
+            'can_view_invite': request.user.has_perm('projects.view_invite_object', obj),
+            'can_add_invite': request.user.has_perm('projects.add_invite_object', obj),
+            'can_change_invite': request.user.has_perm('projects.change_invite_object', obj),
+            'can_delete_invite': request.user.has_perm('projects.delete_invite_object', obj),
+            'can_view_integration': request.user.has_perm('projects.view_integration_object', obj),
+            'can_add_integration': request.user.has_perm('projects.add_integration_object', obj),
+            'can_change_integration': request.user.has_perm('projects.change_integration_object', obj),
+            'can_delete_integration': request.user.has_perm('projects.delete_integration_object', obj),
+            'can_view_issue': request.user.has_perm('projects.view_issue_object', obj),
+            'can_add_issue': request.user.has_perm('projects.add_issue_object', obj),
+            'can_change_issue': request.user.has_perm('projects.change_issue_object', obj),
+            'can_delete_issue': request.user.has_perm('projects.delete_issue_object', obj),
+            'can_view_snapshot': request.user.has_perm('projects.view_snapshot_object', obj),
+            'can_add_snapshot': request.user.has_perm('projects.add_snapshot_object', obj),
+            'can_change_snapshot': request.user.has_perm('projects.change_snapshot_object', obj),
+            'can_delete_snapshot': request.user.has_perm('projects.delete_snapshot_object', obj),
+            'can_rollback_snapshot': request.user.has_perm('projects.rollback_snapshot_object', obj),
+            'can_export_snapshot': request.user.has_perm('projects.export_snapshot_object', obj),
+            'can_view_value': request.user.has_perm('projects.view_value_object', obj),
+            'can_add_value': request.user.has_perm('projects.add_value_object', obj),
+            'can_change_value': request.user.has_perm('projects.change_value_object', obj),
+            'can_delete_value': request.user.has_perm('projects.delete_value_object', obj)
+        }
+
+    def get_current_role(self, obj):
+        if hasattr(obj, 'current_role') and obj.current_role is not None:
+            return {
+                'role': obj.current_role,
+                'role_display': dict(ROLE_CHOICES)[obj.current_role]
+            }
+
+    def get_highest_role(self, obj):
+        if hasattr(obj, 'highest_role') and obj.highest_role is not None:
+            return {
+                'role': obj.highest_role,
+                'role_display': dict(ROLE_CHOICES)[obj.highest_role],
+                'project_id': obj.highest_role_project_id,
+                'project_title': obj.highest_role_project_title,
+                'membership_id': obj.highest_role_membership_id,
+            }
+
+    def get_ancestors(self, obj) -> list[dict[str, Any]]:
+        return ProjectAncestorSerializer(obj.get_cached_ancestors(), many=True, context=self.context).data
+
+
+class ProjectListSerializer(ProjectSerializer):
+
+    class Meta:
+        model = Project
+        fields = ProjectSerializer.Meta.fields
+        read_only_fields = ProjectSerializer.Meta.read_only_fields
+
+    def get_permissions(self, obj) -> dict[str, bool]:
+        request = self.context.get('request')
+        return {
+            'can_view_project': request.user.has_perm('projects.view_project_object', obj),
+            'can_change_project': request.user.has_perm('projects.change_project_object', obj),
+            'can_delete_project': request.user.has_perm('projects.delete_project_object', obj)
+        }
+
 
 class ProjectCopySerializer(ProjectSerializer):
 
@@ -130,6 +294,8 @@ class Meta:
 
 class ProjectMembershipSerializer(serializers.ModelSerializer):
 
+    user = ProjectUserSerializer(read_only=True)
+
     class Meta:
         model = Membership
         fields = (
@@ -139,6 +305,45 @@ class Meta:
         )
 
 
+class ProjectMembershipCreateSerializer(UserLookupSerializer, serializers.ModelSerializer):
+    user = serializers.PrimaryKeyRelatedField(
+        queryset=get_user_model().objects.all(), allow_null=True, required=False
+    )
+    email = serializers.EmailField(source='user.email', read_only=True)
+
+    class Meta:
+        model = Membership
+        fields = (
+            'id',
+            'user',
+            'role',
+            'lookup',  # write-only
+            'first_name',  # read-only
+            'last_name',  # read-only
+            'email',  # read-only
+        )
+
+    def validate_user(self, value):
+        if self.context["view"].project.memberships.filter(user=value).exists():
+            raise serializers.ValidationError(_("The user is already a member of the project."))
+        return value
+
+    def validate(self, data):
+        lookup = data.pop("lookup", None)
+        if lookup:
+            if data.get("user"):
+                raise serializers.ValidationError(_("Cannot combine `lookup` and `user`."))
+            user, _email = self.resolve_lookup(lookup)
+            self.validate_user(user)
+            data["user"] = user
+
+        user = data.get("user")
+        if not user:
+            raise serializers.ValidationError(_("User must be provided via `user` or `lookup`."))
+
+        return data
+
+
 class ProjectMembershipUpdateSerializer(serializers.ModelSerializer):
 
     class Meta:
@@ -148,6 +353,21 @@ class Meta:
         )
 
 
+class ProjectMembershipHierarchySerializer(serializers.ModelSerializer):
+
+    user = ProjectUserSerializer(read_only=True)
+    project = ProjectAncestorSerializer(read_only=True)
+
+    class Meta:
+        model = Membership
+        fields = (
+            'id',
+            'user',
+            'role',
+            'project'
+        )
+
+
 class ProjectIntegrationOptionSerializer(serializers.ModelSerializer):
 
     class Meta:
@@ -194,7 +414,25 @@ def update(self, integration, validated_data):
 
 class ProjectInviteSerializer(serializers.ModelSerializer):
 
+    user = ProjectUserSerializer(read_only=True)
+
+    class Meta:
+        model = Invite
+        fields = (
+            'id',
+            'user',
+            'email',
+            'role',
+            'timestamp'
+        )
+
+
+class ProjectInviteCreateSerializer(UserLookupSerializer, serializers.ModelSerializer):
     timestamp = serializers.DateTimeField(read_only=True)
+    user = serializers.PrimaryKeyRelatedField(
+        queryset=get_user_model().objects.all(), allow_null=True, required=False
+    )
+    email = serializers.EmailField(required=False, allow_null=True)
 
     class Meta:
         model = Invite
@@ -203,6 +441,7 @@ class Meta:
             'user',
             'email',
             'role',
+            'lookup',
             'timestamp'
         )
 
@@ -217,20 +456,37 @@ def validate_email(self, value):
         return value
 
     def validate(self, data):
-        user = data.get('user')
-        email = data.get('email')
-
-        if not user and not email:
-            raise serializers.ValidationError(_('Either user or e-mail needs to be provided.'))
-        elif user and email:
+        User = get_user_model()
+
+        lookup = data.pop('lookup', None)
+
+        if lookup:
+            if data.get('user') or data.get('email'):
+                raise serializers.ValidationError(
+                    _('lookup must not be combined with user or email.'),
+                )
+            user, email = self.resolve_lookup(lookup)
+            if user:
+                self.validate_user(user)
+            if email:
+                self.validate_email(email)
+            data["user"], data["email"] = user, email
+
+        user = data.get("user")
+        email = data.get("email")
+
+        if not user and not email and not lookup:
+            raise serializers.ValidationError(_('Either user, e-mail or lookup needs to be provided.'))
+        elif user and email and not lookup:
             raise serializers.ValidationError(_('User and e-mail are mutually exclusive.'))
-        elif user:
+
+        if user:
             data['email'] = user.email
-        elif email:
-            usermodel = get_user_model()
+
+        if email:
             try:
-                data['user'] = usermodel.objects.get(email=email)
-            except usermodel.DoesNotExist:
+                data['user'] = User.objects.get(email=email)
+            except User.DoesNotExist:
                 data['user'] = None
 
         return data
@@ -286,7 +542,9 @@ class Meta:
         fields = (
             'id',
             'title',
-            'description'
+            'description',
+            'created',
+            'updated'
         )
 
 
@@ -320,6 +578,60 @@ class Meta:
         )
 
 
+class ProjectViewsSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = View
+        fields = (
+            'id',
+            'title',
+            'help'
+        )
+
+
+class ProjectAttachmentSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = Value
+        fields = (
+            'id',
+            'created',
+            'updated',
+            'file_name',
+            'file_url'
+        )
+
+
+class ProjectAnswersSerializer(serializers.Serializer):
+
+    html = serializers.CharField(read_only=True)
+    attachments = ProjectAttachmentSerializer(many=True, read_only=True)
+
+
+class ProjectViewSerializer(serializers.ModelSerializer):
+
+    html = serializers.SerializerMethodField()
+    attachments = serializers.SerializerMethodField()
+
+    class Meta:
+        model = View
+        fields = (
+            'id',
+            'title',
+            'help',
+            'html',
+            'attachments'
+        )
+
+    def get_html(self, obj):
+        return self.context.get('html', '')
+
+    def get_attachments(self, obj):
+        attachments = self.context.get('attachments', [])
+        serializer = ProjectAttachmentSerializer(attachments, many=True, read_only=True)
+        return serializer.data
+
+
 class MembershipSerializer(serializers.ModelSerializer):
 
     class Meta:
@@ -332,6 +644,7 @@ class Meta:
         )
 
 
+
 class IntegrationSerializer(serializers.ModelSerializer):
 
     options = ProjectIntegrationOptionSerializer(many=True, read_only=True)
diff --git a/rdmo/projects/serializers/v1/overview.py b/rdmo/projects/serializers/v1/overview.py
index 7605479dd2..0b4d480173 100644
--- a/rdmo/projects/serializers/v1/overview.py
+++ b/rdmo/projects/serializers/v1/overview.py
@@ -7,7 +7,7 @@
 
 class CatalogSerializer(MarkdownSerializerMixin, serializers.ModelSerializer):
 
-    markdown_fields = ('title', )
+    markdown_fields = ('title', 'help')
 
     class Meta:
         ref_name = 'ProjectCatalogSerializer'
@@ -16,6 +16,7 @@ class Meta:
         fields = (
             'id',
             'title',
+            'help',
             'available'
         )
 
diff --git a/rdmo/projects/static/projects/css/project.scss b/rdmo/projects/static/projects/css/project.scss
deleted file mode 100644
index 1fda0c6b55..0000000000
--- a/rdmo/projects/static/projects/css/project.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import 'core/css/variables';
-
-.project-header {
-    .table > tbody > tr:first-child > td {
-        border-top: none;
-    }
-}
-
-.table {
-    margin-bottom: 0;
-}
-
-.project-update {
-    .fa {
-        float: right;
-        margin-right: 8px;
-    }
-}
-
-.table {
-    .fa-sign-out {
-        width: 11px;
-    }
-}
diff --git a/rdmo/projects/templates/projects/issue_send_message.txt b/rdmo/projects/templates/projects/integration/issue_send_message.txt
similarity index 100%
rename from rdmo/projects/templates/projects/issue_send_message.txt
rename to rdmo/projects/templates/projects/integration/issue_send_message.txt
diff --git a/rdmo/projects/templates/projects/issue_send_subject.txt b/rdmo/projects/templates/projects/integration/issue_send_subject.txt
similarity index 100%
rename from rdmo/projects/templates/projects/issue_send_subject.txt
rename to rdmo/projects/templates/projects/integration/issue_send_subject.txt
diff --git a/rdmo/projects/templates/projects/integration_confirm_delete.html b/rdmo/projects/templates/projects/integration_confirm_delete.html
deleted file mode 100644
index b72de559d7..0000000000
--- a/rdmo/projects/templates/projects/integration_confirm_delete.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-    <h1>{% trans "Delete integration" %}</h1>
-
-    <p>
-        {% blocktrans with label=object.provider.label %}You are about to permanently delete the <strong>{{ label }}</strong>.{% endblocktrans %}
-    </p>
-
-    <p class="text-danger">
-        {% trans 'This action cannot be undone!' %}
-    </p>
-
-    {% bootstrap_delete_form submit=_('Delete integration') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/integration_form.html b/rdmo/projects/templates/projects/integration_form.html
deleted file mode 100644
index ebfc4992b8..0000000000
--- a/rdmo/projects/templates/projects/integration_form.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-{% if object %}
-
-    <h1>{% trans 'Update integration' %}</h1>
-
-    <p class="help-block">{{ provider.description }}</p>
-
-    {% bootstrap_form submit=_('Update integration') %}
-
-{% else %}
-
-    <h1>{% trans 'Add integration to project' %}</h1>
-
-    <p class="help-block">{{ provider.description }}</p>
-
-    {% bootstrap_form submit=_('Add integration') %}
-
-{% endif %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/invite_confirm_delete.html b/rdmo/projects/templates/projects/invite_confirm_delete.html
deleted file mode 100644
index 3314159a36..0000000000
--- a/rdmo/projects/templates/projects/invite_confirm_delete.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-{% load accounts_tags %}
-
-{% block page %}
-
-    <h1>{% trans 'Delete invite' %}</h1>
-
-    <p>
-        {% if object.user %}
-        {% full_name object.user as user %}
-        {% blocktrans with object.project.title as title trimmed %}
-        You are about to remove the invite of <strong>{{ user }}</strong> from the project <strong>{{ title }}</strong>.
-        {% endblocktrans %}
-        {% else %}
-        {% with object.email as user %}
-        {% blocktrans with object.project.title as title trimmed %}
-        You are about to remove the invite of <strong>{{ user }}</strong> from the project <strong>{{ title }}</strong>.
-        {% endblocktrans %}
-        {% endwith %}
-        {% endif %}
-    </p>
-
-    {% bootstrap_delete_form submit=_('Delete invite') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/issue_detail.html b/rdmo/projects/templates/projects/issue_detail.html
deleted file mode 100644
index 92abba4c88..0000000000
--- a/rdmo/projects/templates/projects/issue_detail.html
+++ /dev/null
@@ -1,99 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block head %}
-<script>
-    $(document).ready(function() {
-        $('[data-toggle="tooltip"]').tooltip();
-    });
-</script>
-{% endblock %}
-
-{% block page %}
-
-<h1>{% trans 'Task' %}</h1>
-
-<h2>{{ issue.task.title }}</h2>
-
-<p>
-    {{ issue.task.text|markdown }}
-</p>
-
-{% if issue.dates %}
-
-<h3>{% trans 'Dates' %}</h3>
-
-{% for dates in issue.dates %}
-    {% if dates|length > 1 %}
-    <p>{{ dates.0 | date:"DATE_FORMAT" }}<br /> - {{ dates.1 | date:"DATE_FORMAT" }}</p>
-    {% else %}
-    <p>{{ dates.0 | date:"DATE_FORMAT" }}</p>
-    {% endif %}
-{% endfor %}
-
-{% endif %}
-
-<h3>{% trans 'Questions' %}</h3>
-
-<p>
-    {% trans 'This task is active, because of the answers to the following questions:' %}
-</p>
-
-<ul>
-{% for source in sources %}
-    <li>
-        {% for question in source.questions %}
-        <p><strong>{{ question.text }}</strong></p>
-        {% endfor %}
-
-        {% for value in source.values %}
-        <p>{{ value.value_and_unit }}</p>
-        {% endfor %}
-    </li>
-{% endfor %}
-</ul>
-
-{% if issue.resources.all %}
-
-<h3>{% trans 'External resources for this task' %}</h3>
-
-<ul>
-{% for resource in issue.resources.all %}
-    <li>
-        <a href="{{ resource.url }}">{{ resource.url }}</a>
-    </li>
-{% endfor %}
-</ul>
-
-{% endif %}
-
-{% endblock %}
-
-{% block sidebar %}
-
-    <h2>{% trans 'Status' %}</h2>
-
-    <p>
-        {{ issue.get_status_display }}
-    </p>
-
-    <h2>{% trans 'Options' %}</h2>
-
-    <ul class="list-unstyled">
-        <li>
-            <a href="{% url 'issue_update' project.pk issue.pk %}?next={{ request.path }}">
-                {% trans 'Update task status' %}
-            </a>
-        </li>
-        {% if settings.PROJECT_SEND_ISSUE %}
-        <li>
-            <a href="{% url 'issue_send' project.pk issue.pk %}?next={{ request.path }}">
-                {% trans 'Send task' %}
-            </a>
-        </li>
-        {% endif %}
-    </ul>
-
-{% endblock %}
-
diff --git a/rdmo/projects/templates/projects/issue_form.html b/rdmo/projects/templates/projects/issue_form.html
deleted file mode 100644
index 4c05ce2afc..0000000000
--- a/rdmo/projects/templates/projects/issue_form.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-<h1>{% trans 'Update task' %}</h1>
-
-{% bootstrap_form submit=_('Update task') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/issue_send.html b/rdmo/projects/templates/projects/issue_send.html
deleted file mode 100644
index e43ad2f2aa..0000000000
--- a/rdmo/projects/templates/projects/issue_send.html
+++ /dev/null
@@ -1,58 +0,0 @@
-{% extends 'core/base.html' %}
-{% load i18n %}
-{% load static %}
-{% load compress %}
-{% load core_tags %}
-
-{% block head %}
-    {% compress css %}
-    <link rel="stylesheet" href="{% static 'overlays/css/overlays.scss' %}" type="text/x-scss" />
-    {% endcompress %}
-    {% compress js %}
-    <script type="text/javascript" src="{% static 'overlays/js/overlays.js' %}" ></script>
-    {% endcompress %}
-    <script>
-        $(document).ready(function() { initOverlays('issue_send'); });
-    </script>
-{% endblock %}
-
-{% block content %}
-
-<div class="container">
-    <div class="row">
-        <form method="post" novalidate>
-            {% csrf_token %}
-
-            <div class="page col-md-9">
-                <h1>{% trans 'Send task' %}</h1>
-
-                <p class="mb-20">{% trans 'Sending a task will set the status to "in progress".' %}</p>
-
-                <div id="issue-message">
-                    {% include 'core/bootstrap_form_field.html' with field=form.subject %}
-                    {% include 'core/bootstrap_form_field.html' with field=form.message %}
-
-                    {% if mail_form.fields %}
-                    {% include 'projects/issue_send_email.html'%}
-                    {% endif %}
-                </div>
-
-                {% if integrations %}
-                    {% include 'projects/issue_send_integrations.html'%}
-                {% endif %}
-
-                <div id="support-info"></div>
-            </div>
-            <div class="sidebar col-md-3">
-                {% include 'projects/issue_send_sidebar.html'%}
-            </div>
-        </form>
-    </div>
-</div>
-
-
-{% render_lang_template 'projects/overlays/issue_send_issue_message' %}
-{% render_lang_template 'projects/overlays/issue_send_issue_attachments' %}
-{% render_lang_template 'projects/overlays/issue_send_support_info' %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/issue_send_email.html b/rdmo/projects/templates/projects/issue_send_email.html
deleted file mode 100644
index c3ec3c62d9..0000000000
--- a/rdmo/projects/templates/projects/issue_send_email.html
+++ /dev/null
@@ -1,32 +0,0 @@
-{% load i18n %}
-{% load widget_tweaks %}
-
-<h2>{% trans 'Send by mail' %}</h2>
-
-{% if mail_form.recipients %}
-    {% include 'core/bootstrap_form_field.html' with field=mail_form.recipients %}
-{% endif %}
-
-{% if mail_form.recipients_input %}
-    {% with field=mail_form.recipients_input %}
-    <div class="form-group{% if field.errors %} has-error{% endif %} field-{{field.html_name}}">
-        {% if not mail_form.recipients %}
-        {# only show the label no label is shown for the recipients field above #}
-        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
-        {% endif %}
-
-        {% render_field field class="form-control" rows=2 aria-label=field.label %}
-        {% if field.errors %}
-            <div class="help-block error">
-                <p class="text-danger">{{ field.errors.as_text}}</p>
-            </div>
-        {% endif %}
-    </div>
-    {% endwith %}
-{% endif %}
-
-<div class="text-right">
-    <button type="submit" class="btn btn-primary btn-xs" name="integration" value="{{ integration.id }}">
-        {% trans 'Send by mail' %}
-    </button>
-</div>
diff --git a/rdmo/projects/templates/projects/issue_send_integrations.html b/rdmo/projects/templates/projects/issue_send_integrations.html
deleted file mode 100644
index a47812bd65..0000000000
--- a/rdmo/projects/templates/projects/issue_send_integrations.html
+++ /dev/null
@@ -1,38 +0,0 @@
-{% load i18n %}
-
-<h2>{% trans 'Send via integration' %}</h2>
-
-<table class="table">
-    <thead>
-        <th style="width: 10%">{% trans 'Provider' %}</th>
-        <th style="width: 40%">{% trans 'Description' %}</th>
-        <th style="width: 40%">{% trans 'Options' %}</th>
-        <th style="width: 10%" aria-label="{% trans 'Actions' %}"></th>
-    </thead>
-    <tbody>
-        {% for integration in integrations %}
-        {% if integration.provider %}
-        <tr>
-            <td>{{ integration.provider.label }}</td>
-            <td>{{ integration.provider.description }}</td>
-            <td>
-                {% for option in integration.options.all %}
-                {% if not option.secret %}
-                <p>{{ option.title }}: {{ option.value }}</p>
-                {% endif %}
-                {% endfor %}
-
-                {% if integration.resources.exists %}
-                <p class="text-info">{% trans 'This task has already been send using this integration.' %}</p>
-                {% endif %}
-            </td>
-            <td class="text-right">
-                <button type="submit" class="btn btn-primary btn-xs" name="integration" value="{{ integration.id }}">
-                    {{ integration.provider.send_label }}
-                </button>
-            </td>
-        </tr>
-        {% endif %}
-        {% endfor %}
-    </tbody>
-</table>
diff --git a/rdmo/projects/templates/projects/issue_send_sidebar.html b/rdmo/projects/templates/projects/issue_send_sidebar.html
deleted file mode 100644
index 92034c99a1..0000000000
--- a/rdmo/projects/templates/projects/issue_send_sidebar.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% load i18n %}
-
-<h2 id="issue-attachments">{% trans 'Attachments' %}</h2>
-
-{% include 'core/bootstrap_form_field.html' with field=form.attachments_answers %}
-{% include 'core/bootstrap_form_field.html' with field=form.attachments_views %}
-{% include 'core/bootstrap_form_field.html' with field=form.attachments_files %}
-{% include 'core/bootstrap_form_field.html' with field=form.attachments_snapshot %}
-{% include 'core/bootstrap_form_field.html' with field=form.attachments_format %}
diff --git a/rdmo/projects/templates/projects/membership_confirm_delete.html b/rdmo/projects/templates/projects/membership_confirm_delete.html
deleted file mode 100644
index 0d037c9d77..0000000000
--- a/rdmo/projects/templates/projects/membership_confirm_delete.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-{% load accounts_tags %}
-
-{% block page %}
-
-    <h1>{% trans "Delete membership" %}</h1>
-
-    <p>
-        {% full_name object.user as user %}
-        {% blocktrans with object.project.title as title trimmed %}
-        You are about to remove the user <strong>{{ user }}</strong> from the project <strong>{{ title }}</strong>.
-        {% endblocktrans %}
-    </p>
-
-    {% bootstrap_delete_form submit=_('Delete membership') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/membership_form.html b/rdmo/projects/templates/projects/membership_form.html
deleted file mode 100644
index 5dfb6f12bd..0000000000
--- a/rdmo/projects/templates/projects/membership_form.html
+++ /dev/null
@@ -1,39 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-{% if object %}
-
-    <h1>{% trans 'Update membership' %}</h1>
-
-    {% bootstrap_form submit=_('Update membership') %}
-
-{% else %}
-
-    <h1>{% trans 'Invite member to project' %}</h1>
-
-    <p class="text-muted">
-        {% blocktrans trimmed %}
-        You can invite a new member to this project and assign one of the following roles:
-        <b>Guest</b> (who can only read),
-        <b>Author</b> (who can answer questions),
-        <b>Manager</b> (who can additionally create snapshots, export the project, import values, and update the project settings)
-        or <b>Owner</b> (like you).
-        {% endblocktrans %}
-    </p>
-
-    <p class="text-muted">
-        {% trans 'Users can be invited by their username (if they already have an account here), or by their e-mail address.' %}
-    </p>
-
-    <p class="text-muted">
-        {% trans 'Users will receive an e-mail with a link to join the project with the assigned role.' %}
-    </p>
-
-    {% bootstrap_form submit=_('Invite member') %}
-
-{% endif %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_de.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_de.html
deleted file mode 100644
index 33922e9490..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-attachments-overlay"
-    data-title="Ansichten"
-    data-placement="left auto">
-
-    Hier können Sie eine passende Ansicht im gewünschten Format an Ihre Nachricht anhängen.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_en.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_en.html
deleted file mode 100644
index c47a3328c6..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-attachments-overlay"
-    data-title="Views"
-    data-placement="left auto">
-
-    Here you can attach a suitable view in the desired format to your message.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_fr.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_fr.html
deleted file mode 100644
index b652e5f27a..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-attachments-overlay"
-    data-title="Vues"
-    data-placement="left auto">
-
-    Ici, vous pouvez joindre à votre message une vue appropriée dans le format souhaité.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_it.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_it.html
deleted file mode 100644
index 2d96ec65ee..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_attachments_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-attachments-overlay"
-    data-title="Viste"
-    data-placement="left auto">
-
-    Qui puoi allegare al tuo messaggio una vista adatta nel formato desiderato.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_de.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_message_de.html
deleted file mode 100644
index bb72c1292a..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-message-overlay"
-    data-title="Nachricht"
-    data-placement="bottom">
-
-    In den Aufgaben wird oft zu einer Kontaktaufnahme mit einer anderen Abteilung aufgefordert. Hier finden Sie eine vorgefertigte Nachricht mit den betreffenden Ansprechpartnerinnen bzw. Ansprechpartnern als Adressaten, die Sie als E-Mail versenden können.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_en.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_message_en.html
deleted file mode 100644
index 71532d6e0b..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-message-overlay"
-    data-title="Message"
-    data-placement="bottom">
-
-    The tasks often ask you to contact another department. Here you will find a ready-made message with the relevant contact persons as recipients, which you can send here as an e-mail.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_fr.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_message_fr.html
deleted file mode 100644
index 8df168c0b7..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-message-overlay"
-    data-title="Message"
-    data-placement="bottom">
-
-    Les tâches vous demandent souvent de contacter un autre service. Vous trouverez ici un message prêt à l'emploi avec les personnes de contact concernées comme destinataires, que vous pouvez envoyer ici comme un e-mail.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_it.html b/rdmo/projects/templates/projects/overlays/issue_send_issue_message_it.html
deleted file mode 100644
index c47b46ae84..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_issue_message_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="issue-message-overlay"
-    data-title="Messaggio"
-    data-placement="bottom">
-
-    I compiti spesso ti chiedono di contattare un altro dipartimento. Qui troverai un messaggio pronto con le persone di contatto interessate come destinatari, che puoi inviare qui come e-mail.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_support_info_de.html b/rdmo/projects/templates/projects/overlays/issue_send_support_info_de.html
deleted file mode 100644
index d771642d29..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_support_info_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Unterstützung"
-    data-placement="bottom">
-
-    Falls Sie weitere Fragen haben, wenden Sie sich gern an Ihre lokale Kontaktperson zum Thema Forschungsdaten.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_support_info_en.html b/rdmo/projects/templates/projects/overlays/issue_send_support_info_en.html
deleted file mode 100644
index 4f709a2593..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_support_info_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Support"
-    data-placement="bottom">
-
-    If you have further questions, please do not hesitate to ask your local contact person for research data management.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_support_info_fr.html b/rdmo/projects/templates/projects/overlays/issue_send_support_info_fr.html
deleted file mode 100644
index 0369a5fce5..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_support_info_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Support"
-    data-placement="bottom">
-
-    Si vous avez d'autres questions, n'hésitez pas à vous adresser à votre personne de contact locale pour la gestion des données de recherche.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/issue_send_support_info_it.html b/rdmo/projects/templates/projects/overlays/issue_send_support_info_it.html
deleted file mode 100644
index dc6562253b..0000000000
--- a/rdmo/projects/templates/projects/overlays/issue_send_support_info_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Supporto"
-    data-placement="bottom">
-
-    Per ulteriori domande, non esitate a rivolgervi al vostro referente locale per la gestione dei dati di ricerca.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_export_project_de.html b/rdmo/projects/templates/projects/overlays/project_export_project_de.html
deleted file mode 100644
index ac7ef1272d..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_export_project_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="export-project-overlay"
-    data-title="Export"
-    data-placement="left auto">
-
-    Sie können Ihr Projekt hier exportieren, falls Sie es zu einem späteren Zeitpunkt in RDMO importieren oder zu einer anderen RDMO Instanz mitnehmen möchten.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_export_project_en.html b/rdmo/projects/templates/projects/overlays/project_export_project_en.html
deleted file mode 100644
index b7781cafca..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_export_project_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="export-project-overlay"
-    data-title="Export"
-    data-placement="left auto">
-
-    You can export your project here if you want to import it into RDMO at a later date or to another RDMO instance.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_export_project_fr.html b/rdmo/projects/templates/projects/overlays/project_export_project_fr.html
deleted file mode 100644
index c8a1c58ac2..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_export_project_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="export-project-overlay"
-    data-title="Exporter"
-    data-placement="left auto">
-
-    Vous pouvez exporter votre projet ici si vous souhaitez l'importer dans RDMO à une date ultérieure ou dans une autre instance de RDMO.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_export_project_it.html b/rdmo/projects/templates/projects/overlays/project_export_project_it.html
deleted file mode 100644
index 6a0a92e85b..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_export_project_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="export-project-overlay"
-    data-title="Esporta"
-    data-placement="left auto">
-
-    Puoi esportare qui il tuo progetto se vuoi importarlo in RDMO in una data successiva o in un'altra istanza di RDMO.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_import_project_de.html b/rdmo/projects/templates/projects/overlays/project_import_project_de.html
deleted file mode 100644
index 8a9d54ae5d..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_import_project_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Import"
-    data-placement="left auto">
-
-    Sollten Sie bereits ein Projekt in RDMO angelegt und exportiert haben und möchten es an dieser Stelle hinzufügen, so können Sie hier ein vorhandenes Projekt importieren.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_import_project_en.html b/rdmo/projects/templates/projects/overlays/project_import_project_en.html
deleted file mode 100644
index 5af51471bd..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_import_project_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Import"
-    data-placement="left auto">
-
-    If you have already created and exported a project in RDMO and would like to add it, you can import an existing project here.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_import_project_fr.html b/rdmo/projects/templates/projects/overlays/project_import_project_fr.html
deleted file mode 100644
index 86d9aef80c..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_import_project_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Importer"
-    data-placement="left auto">
-
-    Si vous avez déjà créé et exporté un projet dans RDMO et que vous souhaitez l'ajouter, vous pouvez importer un projet existant ici.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_import_project_it.html b/rdmo/projects/templates/projects/overlays/project_import_project_it.html
deleted file mode 100644
index 4ebc1751c9..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_import_project_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Importa"
-    data-placement="left auto">
-
-    Se hai già creato ed esportato un progetto in RDMO e vuoi aggiungerlo, puoi importare un progetto esistente qui.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_catalog_de.html b/rdmo/projects/templates/projects/overlays/project_project_catalog_de.html
deleted file mode 100644
index 633f06d28e..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_catalog_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-catalog-overlay"
-    data-title="Katalog"
-    data-placement="bottom">
-
-    Sofern Sie berechtigt sind, können Sie hier die Auswahl des Fragenkatalogs ändern.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_catalog_en.html b/rdmo/projects/templates/projects/overlays/project_project_catalog_en.html
deleted file mode 100644
index 0533b371d5..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_catalog_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-catalog-overlay"
-    data-title="Catalog"
-    data-placement="bottom">
-
-    With the right permissions, you can change the selection of the question catalog here.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_catalog_fr.html b/rdmo/projects/templates/projects/overlays/project_project_catalog_fr.html
deleted file mode 100644
index 3b601861f6..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_catalog_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-catalog-overlay"
-    data-title="Catalogue"
-    data-placement="bottom">
-
-    Avec les bonnes permissions, vous pouvez modifier la sélection du catalogue de questions ici.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_catalog_it.html b/rdmo/projects/templates/projects/overlays/project_project_catalog_it.html
deleted file mode 100644
index 2d6468f5d1..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_catalog_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-catalog-overlay"
-    data-title="Catalogo"
-    data-placement="bottom">
-
-    Con i permessi giusti, puoi cambiare la selezione del catalogo delle domande qui.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_issues_de.html b/rdmo/projects/templates/projects/overlays/project_project_issues_de.html
deleted file mode 100644
index 65f9c23a11..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_issues_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-issues-overlay"
-    data-title="Aufgaben"
-    data-placement="bottom auto">
-
-    Aufgaben werden automatisch aus Ihren innerhalb der Fragenkataloge gegebenen Antworten generiert. Auf der Seite jeder Aufgabe können Sie sehen, welche Ihrer Antworten zur Aktivierung der Aufgabe führen. Außerdem können Sie den Status Ihrer zu erledigenden Aufgaben mit dem Stiftsymbol ändern, wenn Sie eine Aufgabe begonnen oder beendet haben. Mit dem Papierflieger-Symbol können Sie eine E-Mail schicken und ggf. eine Ansicht im gewünschten Format als Anhang anfügen. Zu Beginn ist die Übersicht der Aufgaben leer.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_issues_en.html b/rdmo/projects/templates/projects/overlays/project_project_issues_en.html
deleted file mode 100644
index 69a80a5f58..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_issues_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-issues-overlay"
-    data-title="Tasks"
-    data-placement="bottom auto">
-
-    Tasks are automatically generated from the answers you give in the questionnaires. On the page of each task you can see which of your answers lead to the activation of the task. You can also change the status of your to-do tasks with the pencil icon when you have started or finished a task. With the paper airplane icon you can send an e-mail and attach a view in the desired format, if necessary. At the beginning, the overview of the tasks is empty.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_issues_fr.html b/rdmo/projects/templates/projects/overlays/project_project_issues_fr.html
deleted file mode 100644
index f49a51c71b..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_issues_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-issues-overlay"
-    data-title="Tâches"
-    data-placement="bottom auto">
-
-    Les tâches sont générées automatiquement à partir des réponses que vous donnez dans les questionnaires. Sur la page de chaque tâche, vous pouvez voir lesquelles de vos réponses conduisent à l'activation de la tâche. Vous pouvez également modifier le statut de vos tâches à l'aide de l'icône en forme de crayon lorsque vous avez commencé ou terminé une tâche. Avec l'icône de l'avion en papier, vous pouvez envoyer un e-mail et joindre une vue dans le format souhaité, si nécessaire. Au début, l'aperçu des tâches est vide.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_issues_it.html b/rdmo/projects/templates/projects/overlays/project_project_issues_it.html
deleted file mode 100644
index 9600829440..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_issues_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-issues-overlay"
-    data-title="Attività"
-    data-placement="bottom auto">
-
-    I compiti sono generati automaticamente dalle risposte che dai nei questionari. Nella pagina di ogni compito puoi vedere quali delle tue risposte portano all'attivazione del compito. Puoi anche cambiare lo stato dei tuoi compiti con l'icona della matita quando hai iniziato o finito un compito. Con l'icona dell'aeroplano di carta puoi inviare una e-mail e allegare una vista nel formato desiderato, se necessario. All'inizio, la panoramica dei compiti è vuota.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_memberships_de.html b/rdmo/projects/templates/projects/overlays/project_project_memberships_de.html
deleted file mode 100644
index 7b04d3aa96..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_memberships_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-memberships-overlay"
-    data-title="Mitgliedschaften"
-    data-placement="top auto">
-
-    Hier können Sie sehen, wer auf das Projekt zugreifen kann und weitere Mitglieder einladen. Über die Rollen können Sie verwalten, welche Rechte die Nutzenden haben. Mit dem Kreuzsymbol können Mitgliedschaften entfernt werden.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_memberships_en.html b/rdmo/projects/templates/projects/overlays/project_project_memberships_en.html
deleted file mode 100644
index 681b0d2e1f..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_memberships_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-memberships-overlay"
-    data-title="Members"
-    data-placement="top auto">
-
-    Here you can see who can access the project and invite additional members.  The rights of the use can be managed by the roles. Members can be removed with the cross symbol.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_memberships_fr.html b/rdmo/projects/templates/projects/overlays/project_project_memberships_fr.html
deleted file mode 100644
index 1586272dab..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_memberships_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-memberships-overlay"
-    data-title="Membres"
-    data-placement="top auto">
-
-    Ici, vous pouvez voir qui peut accéder au projet et inviter des membres supplémentaires.  Les droits d'utilisation peuvent être gérés par les rôles. Les membres peuvent être supprimés à l'aide du symbole de la croix.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_memberships_it.html b/rdmo/projects/templates/projects/overlays/project_project_memberships_it.html
deleted file mode 100644
index 950b1d04dc..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_memberships_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-memberships-overlay"
-    data-title="Membri"
-    data-placement="top auto">
-
-    Qui puoi vedere chi può accedere al progetto e invitare altri membri.  I diritti di utilizzo possono essere gestiti dai ruoli. I membri possono essere rimossi con il simbolo della croce.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_questions_de.html b/rdmo/projects/templates/projects/overlays/project_project_questions_de.html
deleted file mode 100644
index 6455b45628..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_questions_de.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="overlay" id="project-questions-overlay"
-    data-title="Fragen beantworten"
-    data-placement="left auto">
-
-    Klicken Sie an dieser Stelle "Fragen beantworten", um zum Interview des ausgewählten
-    Fragenkatalogs zu gelangen. Ihre Antworten werden dazu verwendet, individuelle Aufgaben
-    für Sie zu erstellen, die Sie in der Aufgabenübersicht finden, sowie um vorgefertigte
-    Vorlagen auszufüllen, die Sie für die weitere Verwendung exportieren können.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_questions_en.html b/rdmo/projects/templates/projects/overlays/project_project_questions_en.html
deleted file mode 100644
index 7f4d5988f7..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_questions_en.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="overlay" id="project-questions-overlay"
-    data-title="Answer questions"
-    data-placement="left auto">
-
-    Click "Answer questions" at this point to go to the interview for the selected questionnaire.
-    Your answers will be used to create individual tasks for you, which you will find in
-    the task overview, as well as to fill in ready-made templates that you can export for further use.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_questions_fr.html b/rdmo/projects/templates/projects/overlays/project_project_questions_fr.html
deleted file mode 100644
index 57b1190325..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_questions_fr.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="overlay" id="project-questions-overlay"
-    data-title="Répondez aux questions"
-    data-placement="left auto">
-
-    Cliquez sur "Répondre aux questions" à ce stade pour accéder à l'interview du questionnaire sélectionné.
-    Vos réponses seront utilisées pour créer des tâches individuelles pour vous, que vous trouverez dans
-    l'aperçu des tâches, ainsi que pour remplir des modèles prêts à l'emploi que vous pouvez exporter pour une utilisation ultérieure.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_questions_it.html b/rdmo/projects/templates/projects/overlays/project_project_questions_it.html
deleted file mode 100644
index 8b48ea1f1c..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_questions_it.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="overlay" id="project-questions-overlay"
-    data-title="Rispondi alle domande"
-    data-placement="left auto">
-
-    Clicca a questo punto su "Rispondi alle domande" per andare all'intervista del questionario selezionato.
-    Le tue risposte saranno utilizzate per creare compiti individuali per te, che troverai nella
-    nella panoramica dei compiti, così come per compilare modelli già pronti che puoi esportare per un ulteriore utilizzo.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_snapshots_de.html b/rdmo/projects/templates/projects/overlays/project_project_snapshots_de.html
deleted file mode 100644
index 625a341b76..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_snapshots_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-snapshots-overlay"
-    data-title="Snapshots"
-    data-placement="top auto">
-
-    Mit Snapshots können Sie alle Antworten zu einem bestimmten Zeitpunkt speichern und eine bestimmte Phase des Projekts einfrieren. Später kann der Snapshot zum Erstellen von Ansichten verwendet und das Projekt bei Bedarf auch auf einen früheren Snapshot zurückgesetzt werden.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_snapshots_en.html b/rdmo/projects/templates/projects/overlays/project_project_snapshots_en.html
deleted file mode 100644
index 37673ac882..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_snapshots_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-snapshots-overlay"
-    data-title="Snapshots"
-    data-placement="top auto">
-
-    Snapshots allow you to save all answers at a certain point in time and freeze a certain stage of the project. Later, the snapshot can be used to create views and the project can also be reset to a previous snapshot if needed.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_snapshots_fr.html b/rdmo/projects/templates/projects/overlays/project_project_snapshots_fr.html
deleted file mode 100644
index 0eee3b60b7..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_snapshots_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-snapshots-overlay"
-    data-title="Instantanés"
-    data-placement="top auto">
-
-    Les instantanés vous permettent de sauvegarder toutes les réponses à un moment donné et de geler une certaine étape du projet. Plus tard, l'instantané peut être utilisé pour créer des vues et le projet peut également être réinitialisé à un instantané précédent si nécessaire.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_snapshots_it.html b/rdmo/projects/templates/projects/overlays/project_project_snapshots_it.html
deleted file mode 100644
index 7b7af42ca1..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_snapshots_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-snapshots-overlay"
-    data-title="Istantanee"
-    data-placement="top auto">
-
-    Le istantanee permettono di salvare tutte le risposte ad un certo punto nel tempo e congelare una certa fase del progetto. Più tardi, l'istantanea può essere usata per creare delle viste e il progetto può anche essere riportato a un'istantanea precedente, se necessario.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_views_de.html b/rdmo/projects/templates/projects/overlays/project_project_views_de.html
deleted file mode 100644
index 1207d383cf..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_views_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-views-overlay"
-    data-title="Ansichten"
-    data-placement="bottom auto">
-
-    Bei den Ansichten handelt es sich um Vorlagen für Formulare/Dokumente. Die Ansichten werden anhand der im Fragenkatalog gegebenen Antworten automatisch ausgefüllt und können anschließend in verschiedenen Formaten exportiert und versendet werden. Zu Beginn sind alle Ansichten leer. Damit die Vorlagen vollständig ausgefüllt werden, müssen alle relevanten Fragen beantwortet werden. Antworten, die in mehreren Vorlagen zur Anwendung kommen, werden automatisch in alle Fragenkataloge und Ansichten übernommen.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_views_en.html b/rdmo/projects/templates/projects/overlays/project_project_views_en.html
deleted file mode 100644
index edd63cc9f6..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_views_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-views-overlay"
-    data-title="Views"
-    data-placement="bottom auto">
-
-    The views are templates for forms/documents. The views are automatically filled in based on the answers given in the questionnaire and can then be exported and sent in different formats. At the beginning, all views are empty. In order for the templates to be filled in completely, all relevant questions must be answered. Answers that are used in several templates are automatically transferred to all question catalogues and views.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_views_fr.html b/rdmo/projects/templates/projects/overlays/project_project_views_fr.html
deleted file mode 100644
index 1b287b9eb6..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_views_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-views-overlay"
-    data-title="Vues"
-    data-placement="bottom auto">
-
-    Les vues sont des modèles de formulaires/documents. Les vues sont automatiquement remplies sur la base des réponses données dans le questionnaire et peuvent ensuite être exportées et envoyées dans différents formats. Au départ, toutes les vues sont vides. Pour que les modèles soient complètement remplis, il faut répondre à toutes les questions pertinentes. Les réponses qui sont utilisées dans plusieurs modèles sont automatiquement transférées à tous les catalogues de questions et à toutes les vues.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_project_views_it.html b/rdmo/projects/templates/projects/overlays/project_project_views_it.html
deleted file mode 100644
index db979c3d53..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_project_views_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="project-views-overlay"
-    data-title="Viste"
-    data-placement="bottom auto">
-
-    Le viste sono modelli di moduli/documenti. Le viste sono compilate automaticamente in base alle risposte date nel questionario e possono poi essere esportate e inviate in diversi formati. All'inizio, tutte le viste sono vuote. Affinché i modelli siano compilati completamente, è necessario rispondere a tutte le domande pertinenti. Le risposte che vengono utilizzate in diversi modelli vengono automaticamente trasferite a tutti i cataloghi di domande e alle viste.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_support_info_de.html b/rdmo/projects/templates/projects/overlays/project_support_info_de.html
deleted file mode 100644
index d771642d29..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_support_info_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Unterstützung"
-    data-placement="bottom">
-
-    Falls Sie weitere Fragen haben, wenden Sie sich gern an Ihre lokale Kontaktperson zum Thema Forschungsdaten.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_support_info_en.html b/rdmo/projects/templates/projects/overlays/project_support_info_en.html
deleted file mode 100644
index 4f709a2593..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_support_info_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Support"
-    data-placement="bottom">
-
-    If you have further questions, please do not hesitate to ask your local contact person for research data management.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_support_info_fr.html b/rdmo/projects/templates/projects/overlays/project_support_info_fr.html
deleted file mode 100644
index 0369a5fce5..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_support_info_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Support"
-    data-placement="bottom">
-
-    Si vous avez d'autres questions, n'hésitez pas à vous adresser à votre personne de contact locale pour la gestion des données de recherche.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/project_support_info_it.html b/rdmo/projects/templates/projects/overlays/project_support_info_it.html
deleted file mode 100644
index dc6562253b..0000000000
--- a/rdmo/projects/templates/projects/overlays/project_support_info_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Supporto"
-    data-placement="bottom">
-
-    Per ulteriori domande, non esitate a rivolgervi al vostro referente locale per la gestione dei dati di ricerca.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_create_project_de.html b/rdmo/projects/templates/projects/overlays/projects_create_project_de.html
deleted file mode 100644
index e01dceab88..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_create_project_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="create-project-overlay"
-    data-title="Neues Projekt anlegen"
-    data-placement="bottom">
-
-    Als ersten Schritt können Sie mit diesem Link ein neues Projekt anlegen.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_create_project_en.html b/rdmo/projects/templates/projects/overlays/projects_create_project_en.html
deleted file mode 100644
index 611353a84f..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_create_project_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="create-project-overlay"
-    data-title="Create new project"
-    data-placement="bottom">
-
-    As a first step you can create a new project using this link.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_create_project_fr.html b/rdmo/projects/templates/projects/overlays/projects_create_project_fr.html
deleted file mode 100644
index ea6bada50a..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_create_project_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="create-project-overlay"
-    data-title="Créer un nouveau projet "
-    data-placement="bottom">
-
-    Dans un premier temps, vous pouvez créer un nouveau projet en utilisant ce lien.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_create_project_it.html b/rdmo/projects/templates/projects/overlays/projects_create_project_it.html
deleted file mode 100644
index 671269e6fb..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_create_project_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="create-project-overlay"
-    data-title="Crea nuovo progetto "
-    data-placement="bottom">
-
-    Come primo passo puoi creare un nuovo progetto usando questo link.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_import_project_de.html b/rdmo/projects/templates/projects/overlays/projects_import_project_de.html
deleted file mode 100644
index 2b53a274d2..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_import_project_de.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Vorhandenes Projekt importieren"
-    data-placement="bottom">
-
-    Sollten Sie bereits ein Projekt in RDMO angelegt und exportiert haben
-    und möchten es Ihrer Projektliste an dieser Stelle hinzufügen,
-    so können Sie hier ein vorhandenes Projekt importieren.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_import_project_en.html b/rdmo/projects/templates/projects/overlays/projects_import_project_en.html
deleted file mode 100644
index 241f02018c..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_import_project_en.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Import existing project"
-    data-placement="bottom">
-
-    If you have already created and exported a project in
-    RDMO and would like to add it to your project list,
-    you can import an existing project here.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_import_project_fr.html b/rdmo/projects/templates/projects/overlays/projects_import_project_fr.html
deleted file mode 100644
index a4451073f9..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_import_project_fr.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Importer un projet existant"
-    data-placement="bottom">
-
-    Si vous avez déjà créé et exporté un projet dans
-    RDMO et que vous souhaitez l'ajouter à votre liste de projets,
-    vous pouvez importer un projet existant ici.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_import_project_it.html b/rdmo/projects/templates/projects/overlays/projects_import_project_it.html
deleted file mode 100644
index 29e4155b40..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_import_project_it.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="overlay" id="import-project-overlay"
-    data-title="Importazione di un progetto esistente"
-    data-placement="bottom">
-
-    Se hai già creato ed esportato un progetto in
-    RDMO e vuoi aggiungerlo alla tua lista di progetti
-    puoi importare un progetto esistente qui.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_projects_table_de.html b/rdmo/projects/templates/projects/overlays/projects_projects_table_de.html
deleted file mode 100644
index 4da8e9b764..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_projects_table_de.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="overlay" id="projects-table-overlay"
-    data-title="Meine Projekte"
-    data-placement="bottom">
-
-    Hier finden Sie alle Ihre selbst angelegten Projekte oder Projekte denen Sie hinzugefügt worden sind.
-    Zu Beginn wird diese Übersicht leer sein. Die angegebene Rolle (Besitzer, Manager, Autor, Gast) definiert
-    Ihre Zugriffsbeschränkung auf das Projekt. Sie können mit Hilfe der Symbole rechts in der jeweiligen Zeile
-    die Projekte bearbeiten oder löschen.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_projects_table_en.html b/rdmo/projects/templates/projects/overlays/projects_projects_table_en.html
deleted file mode 100644
index 2de4c71995..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_projects_table_en.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="overlay" id="projects-table-overlay"
-    data-title="My Projects"
-    data-placement="bottom">
-
-    Here you will find all your self-created projects, as well as projects to which you have been added.
-    At first, this overview will be empty. The specified role (owner, manager, author, guest) defines
-    your access restriction to the project. You can edit or delete the projects with the help
-    of the symbols on the right in the respective line.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_projects_table_fr.html b/rdmo/projects/templates/projects/overlays/projects_projects_table_fr.html
deleted file mode 100644
index e156efe494..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_projects_table_fr.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="overlay" id="projects-table-overlay"
-    data-title="Mes projets"
-    data-placement="bottom">
-
-    Vous trouverez ici tous les projets que vous avez créés vous-même, ainsi que les projets auxquels vous avez été ajouté.
-    Au début, cet aperçu sera vide. Le rôle spécifié (propriétaire, gestionnaire, auteur, invité) définit
-    votre restriction d'accès au projet. Vous pouvez éditer ou supprimer les projets à l'aide de
-    des symboles situés à droite dans la ligne correspondante.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_projects_table_it.html b/rdmo/projects/templates/projects/overlays/projects_projects_table_it.html
deleted file mode 100644
index c38868c41e..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_projects_table_it.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="overlay" id="projects-table-overlay"
-    data-title="I miei progetti"
-    data-placement="bottom">
-
-    Qui troverai tutti i tuoi progetti creati da te, così come i progetti a cui sei stato aggiunto.
-    All'inizio questa panoramica sarà vuota. Il ruolo specificato (proprietario, manager, autore, ospite) definisce
-    le tue restrizioni di accesso al progetto. Puoi modificare o cancellare i progetti con l'aiuto
-    dei simboli a destra nella rispettiva riga.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_support_info_de.html b/rdmo/projects/templates/projects/overlays/projects_support_info_de.html
deleted file mode 100644
index d771642d29..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_support_info_de.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Unterstützung"
-    data-placement="bottom">
-
-    Falls Sie weitere Fragen haben, wenden Sie sich gern an Ihre lokale Kontaktperson zum Thema Forschungsdaten.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_support_info_en.html b/rdmo/projects/templates/projects/overlays/projects_support_info_en.html
deleted file mode 100644
index 4f709a2593..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_support_info_en.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Support"
-    data-placement="bottom">
-
-    If you have further questions, please do not hesitate to ask your local contact person for research data management.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_support_info_fr.html b/rdmo/projects/templates/projects/overlays/projects_support_info_fr.html
deleted file mode 100644
index 0369a5fce5..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_support_info_fr.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Support"
-    data-placement="bottom">
-
-    Si vous avez d'autres questions, n'hésitez pas à vous adresser à votre personne de contact locale pour la gestion des données de recherche.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/overlays/projects_support_info_it.html b/rdmo/projects/templates/projects/overlays/projects_support_info_it.html
deleted file mode 100644
index dc6562253b..0000000000
--- a/rdmo/projects/templates/projects/overlays/projects_support_info_it.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="overlay" id="support-info-overlay"
-    data-title="Supporto"
-    data-placement="bottom">
-
-    Per ulteriori domande, non esitate a rivolgervi al vostro referente locale per la gestione dei dati di ricerca.
-
-    {% include 'overlays/buttons.html'%}
-</div>
diff --git a/rdmo/projects/templates/projects/project_answers.html b/rdmo/projects/templates/projects/project_answers.html
index ca3a6b8dd3..8172b6550b 100644
--- a/rdmo/projects/templates/projects/project_answers.html
+++ b/rdmo/projects/templates/projects/project_answers.html
@@ -1,88 +1,8 @@
-{% extends 'core/page.html' %}
 {% load i18n %}
-{% load core_tags %}
 
-{% block sidebar %}
+<h1>{% blocktrans with title=project.title %}Answers for <em>{{ title }}</em>{% endblocktrans %}</h1>
+<p>
+    {% trans 'In the following, we have summarized the information about the project as given by you and your collaborators.' %}
+</p>
 
-    {% if snapshots %}
-
-        <h2>{% trans 'Snapshots' %}</h2>
-        <ul class="list-unstyled list-arrow">
-            <li class="{% if current_snapshot == None %}active{% endif %}">
-                <a href="{% url 'project_answers' project.pk %}">
-                    {% trans 'Current' %}
-                </a>
-            </li>
-            {% for snapshot in snapshots %}
-            <li class="{% if current_snapshot.id == snapshot.id %}active{% endif %}">
-                <a href="{% url 'project_answers' project.pk snapshot.id %}">
-                    {{ snapshot.title }}
-                </a>
-            </li>
-            {% endfor %}
-        </ul>
-
-    {% endif %}
-
-
-    <h2>{% trans 'Options' %}</h2>
-    <ul class="list-unstyled">
-        <li>
-            <a href="{% url 'project' project.pk %}">{% trans 'Back to project overview' %}</a>
-        </li>
-    </ul>
-
-    <h2>{% trans 'Export' %}</h2>
-    <ul class="list-unstyled">
-        {% for format, text in export_formats %}
-        <li >
-            {% if current_snapshot %}
-            <a href="{% url 'project_answers_export' project.pk current_snapshot.pk format %}" target="_blank">
-                {{ text }}
-            </a>
-            {% else %}
-            <a href="{% url 'project_answers_export' project.pk format %}" target="_blank">
-                {{ text }}
-            </a>
-            {% endif %}
-        </li>
-        {% endfor %}
-    </ul>
-
-    {% if attachments %}
-
-    <h2>{% trans 'Attachments' %}</h2>
-    <ul class="list-unstyled">
-        {% for value in attachments %}
-        <li >
-            <a href="{{ value.file_url }}" target="_blank">
-                {{ value.file_name }}
-            </a>
-        </li>
-        {% endfor %}
-    </ul>
-
-    {% endif %}
-
-{% endblock %}
-
-
-{% block page %}
-
-    {% if error %}
-
-        {% include 'projects/project_error.html' %}
-
-    {% else %}
-
-        <h1>{% blocktrans with title=project.title %}Answers for <em>{{ title }}</em>{% endblocktrans %}</h1>
-        <p>
-            {% trans 'In the following, we have summarized the information about the project as given by you and your collaborators.' %}
-        </p>
-
-        {% include 'projects/project_answers_tree.html' %}
-
-    {% endif %}
-
-
-{% endblock %}
+{% include 'projects/project_answers_tree.html' %}
diff --git a/rdmo/projects/templates/projects/project_confirm_cancel.html b/rdmo/projects/templates/projects/project_confirm_cancel.html
deleted file mode 100644
index 6b614be98d..0000000000
--- a/rdmo/projects/templates/projects/project_confirm_cancel.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-    <h1>{% trans 'Cancel invite' %}</h1>
-
-    <p>
-        {% blocktrans trimmed with project_title=invite.project.title %}
-        You are about to cancel the invite to <strong>{{ project_title }}</strong>.
-        {% endblocktrans %}
-    </p>
-
-    {% bootstrap_form submit=_('Cancel invite') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_confirm_delete.html b/rdmo/projects/templates/projects/project_confirm_delete.html
deleted file mode 100644
index ac711d3dff..0000000000
--- a/rdmo/projects/templates/projects/project_confirm_delete.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-    <h1>{% trans "Delete project" %}</h1>
-
-    <p>
-        {% blocktrans trimmed %}
-        You are about to permanently delete the project <strong>{{ object }}</strong>.
-        {% endblocktrans %}
-
-        {% if object.get_children %}
-        {% if object.parent %}
-
-        {% blocktrans with parent=object.parent trimmed %}
-        Descendant projects will be moved to the project <strong>{{ parent }}</strong>.
-        {% endblocktrans %}
-
-        {% else %}
-
-        {% trans 'Descendant projects will be preserved.' %}
-
-        {% endif %}
-        {% endif %}
-    </p>
-
-    <p class="text-danger">
-        {% trans 'This action cannot be undone!' %}
-    </p>
-
-    {% bootstrap_delete_form submit=_('Delete project') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_confirm_leave.html b/rdmo/projects/templates/projects/project_confirm_leave.html
deleted file mode 100644
index d28e8fc02b..0000000000
--- a/rdmo/projects/templates/projects/project_confirm_leave.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-    <h1>{% trans "Leave project" %}</h1>
-
-    <p>
-        {% blocktrans trimmed %}
-        You are about to leave the project <strong>{{ object }}</strong>.
-        {% endblocktrans %}
-    </p>
-
-    <p>
-        {% trans 'If you want to access this project again, somebody will need to invite you!' %}
-    </p>
-
-    {% bootstrap_form submit=_('Leave project') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_detail.html b/rdmo/projects/templates/projects/project_detail.html
index 3d21b98044..a7b4b696e5 100644
--- a/rdmo/projects/templates/projects/project_detail.html
+++ b/rdmo/projects/templates/projects/project_detail.html
@@ -1,51 +1,25 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
+{% extends 'core/base.html' %}
 {% load static %}
-{% load compress %}
-{% load core_tags %}
 
 {% block head %}
-    {% compress css %}
-    <link rel="stylesheet" href="{% static 'projects/css/project.scss' %}" type="text/x-scss" />
-    <link rel="stylesheet" href="{% static 'overlays/css/overlays.scss' %}" type="text/x-scss" />
-    {% endcompress %}
-    {% compress js %}
-    <script type="text/javascript" src="{% static 'overlays/js/overlays.js' %}" ></script>
-    {% endcompress %}
-    <script>
-        $(document).ready(function() {
-            initOverlays('project');
-            $('[data-toggle="tooltip"]').tooltip()
-        });
-    </script>
+    <meta name='project' content="{{ project.id }}" />
 {% endblock %}
 
-{% block sidebar %}
-
-    {% include 'projects/project_detail_sidebar.html' %}
-
+{% block css %}
+    <link rel="stylesheet" href="{% static 'projects/css/project.css' %}" />
+    {{ block.super }}
 {% endblock %}
 
-{% block page %}
-
-    {% include 'projects/project_detail_header.html' %}
-    {% include 'projects/project_detail_issues.html' %}
-    {% include 'projects/project_detail_views.html' %}
-    {% include 'projects/project_detail_memberships.html' %}
-    {% include 'projects/project_detail_invites.html' %}
-    {% include 'projects/project_detail_snapshots.html' %}
-    {% include 'projects/project_detail_integrations.html' %}
+{% block js %}
+    {{ block.super }}
+    <script src="{% static 'projects/js/project.js' %}" defer></script>
+{% endblock %}
 
-    <div id="support-info"></div>
+{% block content %}
 
-    {% render_lang_template 'projects/overlays/project_project_questions' %}
-    {% render_lang_template 'projects/overlays/project_project_catalog' %}
-    {% render_lang_template 'projects/overlays/project_project_issues' %}
-    {% render_lang_template 'projects/overlays/project_project_views' %}
-    {% render_lang_template 'projects/overlays/project_project_memberships' %}
-    {% render_lang_template 'projects/overlays/project_project_snapshots' %}
-    {% render_lang_template 'projects/overlays/project_export_project' %}
-    {% render_lang_template 'projects/overlays/project_import_project' %}
-    {% render_lang_template 'projects/overlays/project_support_info' %}
+    <div class="d-flex flex-row project">
+        <aside id="sidebar" class="project-sidebar"></aside>
+        <main id="main" class="project-main"></main>
+    </div>
 
 {% endblock %}
diff --git a/rdmo/projects/templates/projects/project_detail_header.html b/rdmo/projects/templates/projects/project_detail_header.html
deleted file mode 100644
index c6ca098c90..0000000000
--- a/rdmo/projects/templates/projects/project_detail_header.html
+++ /dev/null
@@ -1,53 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load mptt_tags %}
-{% load accounts_tags %}
-
-{% has_perm 'projects.change_project_object' request.user project as can_change_project %}
-{% has_perm 'projects.change_visibility_object' request.user project as can_change_visibility %}
-
-<div class="project-header">
-    <h1>{{ project.title }}</h1>
-
-    <table class="table">
-        <tbody>
-            <tr>
-                <td style="width: 20%;">
-                    <strong>{% trans 'Description' %}</strong>
-                </td>
-                <td>
-                    {% include 'projects/project_detail_header_description.html' %}
-                </td>
-            </tr>
-            <tr id="project-catalog">
-                <td>
-                    <strong>{% trans 'Catalog' %}</strong>
-                </td>
-                <td>
-                    {% include 'projects/project_detail_header_catalog.html' %}
-                </td>
-            </tr>
-            {% if settings.PROJECT_VISIBILITY and project.visibility %}
-            <tr id="project-visibility">
-                <td>
-                    <strong>{% trans 'Visibility' %}</strong>
-                </td>
-                <td>
-                    {% include 'projects/project_detail_header_visibility.html' %}
-                </td>
-            </tr>
-            {% endif %}
-            {% if project.is_child_node or project.get_descendant_count %}
-            {% drilldown_tree_for_node project as project_tree all_descendants %}
-            <tr>
-                <td>
-                    <strong>{% trans 'Project hierarchy' %}</strong>
-                </td>
-                <td>
-                    {% include 'projects/project_detail_header_hierarchy.html' %}
-                </td>
-            </tr>
-            {% endif %}
-        </tbody>
-    </table>
-</div>
diff --git a/rdmo/projects/templates/projects/project_detail_header_catalog.html b/rdmo/projects/templates/projects/project_detail_header_catalog.html
deleted file mode 100644
index 2aa01f1f3c..0000000000
--- a/rdmo/projects/templates/projects/project_detail_header_catalog.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% load i18n %}
-{% load core_tags %}
-
-{% if can_change_project  %}
-<p class="pull-right">
-    <a href="{% url 'project_update_catalog' project.pk %}" title="{% trans 'Update project catalog' %}">
-        <i class="fa fa-pencil" aria-hidden="true"></i>
-    </a>
-</p>
-{% endif %}
-
-<p>
-    <strong>{{ project.catalog.title|markdown }}</strong>
-</p>
-<p>
-    {{ project.catalog.help|markdown }}
-</p>
diff --git a/rdmo/projects/templates/projects/project_detail_header_description.html b/rdmo/projects/templates/projects/project_detail_header_description.html
deleted file mode 100644
index 6b6ac86fbf..0000000000
--- a/rdmo/projects/templates/projects/project_detail_header_description.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% load i18n %}
-
-{% if can_change_project %}
-<p class="pull-right">
-    <a href="{% url 'project_update_information' project.pk %}" title="{% trans 'Update project information' %}">
-        <i class="fa fa-pencil" aria-hidden="true"></i>
-    </a>
-</p>
-{% endif %}
-{% if project.description %}
-{{ project.description }}
-{% else %}
-{% trans 'No description available.' %}
-{% endif %}
diff --git a/rdmo/projects/templates/projects/project_detail_header_hierarchy.html b/rdmo/projects/templates/projects/project_detail_header_hierarchy.html
deleted file mode 100644
index eb3b2b50e7..0000000000
--- a/rdmo/projects/templates/projects/project_detail_header_hierarchy.html
+++ /dev/null
@@ -1,32 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load projects_tags %}
-
-{% if can_change_project %}
-<p class="pull-right">
-    <a href="{% url 'project_update_parent' project.pk %}" title="{% trans 'Update parent project' %}">
-        <i class="fa fa-pencil" aria-hidden="true"></i>
-    </a>
-</p>
-{% endif %}
-
-<ul class="list-unstyled">
-{% for node in project_tree %}
-    <li>
-        {% projects_indent node.level %}
-
-        {% has_perm 'projects.view_project_object' request.user node as can_view_parent_project %}
-        {% if can_view_parent_project %}
-           <a href="{% url 'project' node.id %}">
-                {% if node.id == project.id %}
-                <strong>{{ node.title }}</strong> {% project_progress_text node %}
-                {% else %}
-                {{ node.title }} {% project_progress_text node %}
-                {% endif %}
-            </a>
-        {% else %}
-        {{ node.title }} {% project_progress_text node %}
-        {% endif %}
-    </li>
-{% endfor %}
-</ul>
diff --git a/rdmo/projects/templates/projects/project_detail_header_visibility.html b/rdmo/projects/templates/projects/project_detail_header_visibility.html
deleted file mode 100644
index d0133973ae..0000000000
--- a/rdmo/projects/templates/projects/project_detail_header_visibility.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% load i18n %}
-{% load core_tags %}
-
-{% if can_change_visibility  %}
-<p class="pull-right">
-    <a href="{% url 'project_update_visibility' project.pk %}" title="{% trans 'Update project visibility' %}">
-        <i class="fa fa-pencil" aria-hidden="true"></i>
-    </a>
-</p>
-{% endif %}
-
-<span class="text-muted">
-{{ project.visibility.get_help_display }}
-</span>
diff --git a/rdmo/projects/templates/projects/project_detail_integrations.html b/rdmo/projects/templates/projects/project_detail_integrations.html
deleted file mode 100644
index d348495ae8..0000000000
--- a/rdmo/projects/templates/projects/project_detail_integrations.html
+++ /dev/null
@@ -1,65 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load accounts_tags %}
-
-{% has_perm 'projects.add_integration_object' request.user project as can_add_integration %}
-{% has_perm 'projects.change_integration_object' request.user project as can_change_integration %}
-{% has_perm 'projects.delete_integration_object' request.user project as can_delete_integration %}
-
-{% if integrations %}
-
-    <h2>{% trans 'Integrations' %}</h2>
-
-    {% include 'projects/project_detail_integrations_help.html' %}
-
-    <table class="table">
-        <thead>
-            <th style="width: 10%">{% trans 'Provider' %}</th>
-            <th style="width: 50%">{% trans 'Description' %}</th>
-            <th style="width: 30%">{% trans 'Options' %}</th>
-            <th style="width: 10%" aria-label="{% trans 'Actions' %}"></th>
-        </thead>
-        <tbody>
-            {% for integration in integrations %}
-            {% if integration.provider %}
-            <tr>
-                <td>
-                    {{ integration.provider.label }}
-                </td>
-                <td>
-                    {{ integration.provider.description }}
-                </td>
-                <td>
-                    {% for option in integration.options.all %}
-                    {% if not option.secret %}
-                    {{ option.title }}: {{ option.value }}<br />
-                    {% endif %}
-                    {% endfor %}
-
-                    {% if integration.project != project %}
-                    ({% trans 'from' %} <a href="{% url 'project' integration.project.id %}">{{ integration.project.title }}</a>)
-                    {% endif %}
-                </td>
-                <td class="text-right">
-                    {% if integration.project == project %}
-
-                    {% if can_change_integration %}
-                    <a href="{% url 'integration_update' project.pk integration.pk %}" class="fa fa-pencil"
-                        title="{% trans 'Update integration' %}">
-                    </a>
-                    {% endif %}
-                    {% if can_delete_integration %}
-                    <a href="{% url 'integration_delete' project.pk integration.pk %}" class="fa fa-remove"
-                        title="{% trans 'Delete integration' %}">
-                    </a>
-                    {% endif %}
-
-                    {% endif %}
-                </td>
-            </tr>
-            {% endif %}
-            {% endfor %}
-        </tbody>
-    </table>
-
-{% endif %}
diff --git a/rdmo/projects/templates/projects/project_detail_integrations_help.html b/rdmo/projects/templates/projects/project_detail_integrations_help.html
deleted file mode 100644
index c3f0683023..0000000000
--- a/rdmo/projects/templates/projects/project_detail_integrations_help.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load i18n %}
-
-    <p class="text-muted">
-        {% blocktrans trimmed %}
-        Integrations can be used to send tasks to various external tools. Please follow the descriptions of the integrations to use them.
-        {% endblocktrans %}
-    </p>
diff --git a/rdmo/projects/templates/projects/project_detail_invites.html b/rdmo/projects/templates/projects/project_detail_invites.html
deleted file mode 100644
index 23ed384600..0000000000
--- a/rdmo/projects/templates/projects/project_detail_invites.html
+++ /dev/null
@@ -1,44 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load accounts_tags %}
-
-{% has_perm 'projects.view_invite_object' request.user project as can_view_invite %}
-{% has_perm 'projects.delete_invite_object' request.user project as can_delete_invite %}
-
-{% if can_view_invite and invites %}
-
-    <h2>{% trans 'Invites' %}</h2>
-
-    <table class="table">
-        <thead>
-            <th style="width: 30%">{% trans 'User' %}</th>
-            <th style="width: 30%">{% trans 'E-Mail' %}</th>
-            <th style="width: 30%">{% trans 'Role' %}</th>
-            <th style="width: 10%" aria-label="{% trans 'Actions' %}"></th>
-        </thead>
-        <tbody>
-            {% for invite in invites %}
-            <tr>
-                <td>
-                    {% if invite.user %}
-                    {% full_name invite.user %}
-                    {% endif %}
-                </td>
-                <td>
-                    <a href="mailto:{{ invite.email }}">{{ invite.email }}</a>
-                </td>
-                <td>
-                    {{ invite.get_role_display }}
-                </td>
-                <td class="text-right">
-                    {% if can_delete_invite %}
-                    <a href="{% url 'invite_delete' project.id invite.id %}" class="fa fa-remove"
-                        title="{% trans 'Delete invite' %}">
-                    </a>
-                    {% endif %}
-                </td>
-            {% endfor %}
-        </tbody>
-    </table>
-
-{% endif %}
diff --git a/rdmo/projects/templates/projects/project_detail_issues.html b/rdmo/projects/templates/projects/project_detail_issues.html
deleted file mode 100644
index 3a712aa9d6..0000000000
--- a/rdmo/projects/templates/projects/project_detail_issues.html
+++ /dev/null
@@ -1,92 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load core_tags %}
-
-{% has_perm 'projects.change_project_object' request.user project as can_change_project %}
-
-{% if settings.PROJECT_ISSUES and tasks_available %}
-
-<div id="project-issues">
-
-    <h2>{% trans 'Tasks' %}</h2>
-
-    {% include 'projects/project_detail_issues_help.html' %}
-
-    {% if issues %}
-
-        <table class="table">
-            <thead>
-                <th style="width: 10%">{% trans 'Task' %}</th>
-                <th style="width: 50%">{% trans 'Description' %}</th>
-                <th style="width: 15%">{% trans 'Time frame' %}</th>
-                <th style="width: 15%">{% trans 'Status' %}</th>
-                <th style="width: 10%" class="text-right" aria-label="{% trans 'Actions' %}">
-                {% if can_change_project and not settings.PROJECT_TASKS_SYNC  %}
-                    <a href="{% url 'project_update_tasks' project.pk %}" title="{% trans 'Update project tasks.' %}">
-                        <i class="fa fa-pencil" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
-                </th>
-            </thead>
-            <tbody>
-                {% for issue in issues %}
-                <tr>
-                    <td>
-                        <a href="{% url 'issue' project.pk issue.pk %}">
-                            {{ issue.task.title|markdown }}
-                        </a>
-                    </td>
-                    <td>{{ issue.task.text|markdown }}</td>
-                    <td>
-                    {% for dates in issue.dates %}
-                        {% if dates|length > 1 %}
-                        <p>{{ dates.0 | date:"DATE_FORMAT" }}<br /> - {{ dates.1 | date:"DATE_FORMAT" }}</p>
-                        {% else %}
-                        <p>{{ dates.0 | date:"DATE_FORMAT" }}</p>
-                        {% endif %}
-                    {% endfor %}
-                    </td>
-                    <td>{{ issue.get_status_display }}</td>
-                    <td class="text-right">
-                        <a href="{% url 'issue' project.pk issue.pk %}" class="fa fa-eye"
-                            title="{% trans 'Show task' %}">
-                        </a>
-                        <a href="{% url 'issue_update' project.pk issue.pk %}" class="fa fa-pencil"
-                            title="{% trans 'Update task status' %}">
-                        </a>
-                        {% if settings.PROJECT_SEND_ISSUE %}
-                        <a href="{% url 'issue_send' project.pk issue.pk %}" class="fa fa-paper-plane"
-                            title="{% trans 'Send task' %}">
-                        </a>
-                        {% endif %}
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-
-    {% else %}
-
-        {% if can_change_project and not settings.PROJECT_TASKS_SYNC %}
-            <p class="project-update">
-                <a href="{% url 'project_update_tasks' project.pk %}" title="{% trans 'Update project tasks.' %}">
-                    <i class="fa fa-pencil" aria-hidden="true"></i>
-                </a>
-            </p>
-        {% endif %}
-
-        {% if project.tasks.exists %}
-            <p>
-                {% trans 'No active tasks found.' %}
-            </p>
-        {% else %}
-            <p>
-                {% trans 'No tasks are configured for this project.' %}
-            </p>
-        {% endif %}
-
-    {% endif %}
-
-</div>
-
-{% endif %}
diff --git a/rdmo/projects/templates/projects/project_detail_issues_help.html b/rdmo/projects/templates/projects/project_detail_issues_help.html
deleted file mode 100644
index 284fd3b100..0000000000
--- a/rdmo/projects/templates/projects/project_detail_issues_help.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load i18n %}
-
-    <p class="text-muted">
-        {% blocktrans trimmed %}
-        Tasks are generated automatically from the answers given in the project. On the page of each task you can see which of your answers lead to the activation of the task.
-        {% endblocktrans %}
-    </p>
diff --git a/rdmo/projects/templates/projects/project_detail_memberships.html b/rdmo/projects/templates/projects/project_detail_memberships.html
deleted file mode 100644
index bad3d750d5..0000000000
--- a/rdmo/projects/templates/projects/project_detail_memberships.html
+++ /dev/null
@@ -1,75 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load static %}
-{% load accounts_tags %}
-
-{% has_perm 'projects.add_membership_object' request.user project as can_add_membership %}
-{% has_perm 'projects.change_membership_object' request.user project as can_change_membership %}
-{% has_perm 'projects.delete_membership_object' request.user project as can_delete_membership %}
-
-{% has_perm 'projects.is_project_owner' request.user project as is_project_owner %}
-
-<div id="project-memberships">
-
-    <h2>{% trans 'Members' %}</h2>
-
-    {% include 'projects/project_detail_memberships_help.html' %}
-
-    <table class="table table-membership">
-        <thead>
-            <th style="width: 30%">{% trans 'User' %}</th>
-            <th style="width: 30%">{% trans 'E-Mail' %}</th>
-            <th style="width: 30%">{% trans 'Role' %}</th>
-            <th style="width: 10%" class="text-right" aria-label="{% trans 'Actions' %}">
-                {% if can_add_membership %}
-                    <a href="{% url 'membership_create' project.pk %}" title="{% trans 'Add member' %}">
-                        <i class="fa fa-plus" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
-            </th>
-        </thead>
-        <tbody>
-            {% for membership in memberships %}
-            <tr>
-                <td>
-                    {% full_name membership.user %}
-                    {% include 'projects/project_detail_memberships_socialaccounts.html' %}
-                </td>
-                <td>
-                    <a href="mailto:{{ membership.user.email }}">{{ membership.user.email }}</a>
-                </td>
-                <td>
-                    {% if membership.project == project %}
-                    {{ membership.get_role_display }}
-                    {% else %}
-                    {{ membership.get_role_display }}
-                    {% trans 'of' %}
-                    <a href="{% url 'project' membership.project.id %}">{{ membership.project.title }}</a>
-                    {% endif %}
-                </td>
-                <td class="text-right">
-                    {% if membership.project == project %}
-
-                    {% if not membership.is_last_owner and can_change_membership %}
-                    <a href="{% url 'membership_update' project.pk membership.id %}" class="fa fa-pencil"
-                        title="{% trans 'Update membership' %}">
-                    </a>
-                    {% endif %}
-
-                    {% if membership.user == request.user and not membership.is_last_owner %}
-                    <a href="{% url 'project_leave' project.pk %}" class="fa fa-sign-out"
-                        title="{% trans 'Leave project' %}">
-                    </a>
-                    {% elif can_change_membership and not membership.is_last_owner %}
-                    <a href="{% url 'membership_delete' project.pk membership.id %}" class="fa fa-remove"
-                        title="{% trans 'Delete membership' %}">
-                    </a>
-                    {% endif %}
-
-                    {% endif %}
-                </td>
-            </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-</div>
diff --git a/rdmo/projects/templates/projects/project_detail_memberships_help.html b/rdmo/projects/templates/projects/project_detail_memberships_help.html
deleted file mode 100644
index b7a2eb79e9..0000000000
--- a/rdmo/projects/templates/projects/project_detail_memberships_help.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load i18n %}
-
-    <p class="text-muted">
-        {% blocktrans trimmed %}
-        Here you can see who can access the project and invite additional members. You can use the user roles to manage which rights the users have. Unless you are the last owner, you can leave the project with the button next to your name.
-        {% endblocktrans %}
-    </p>
diff --git a/rdmo/projects/templates/projects/project_detail_memberships_socialaccounts.html b/rdmo/projects/templates/projects/project_detail_memberships_socialaccounts.html
deleted file mode 100644
index 2ba72de77d..0000000000
--- a/rdmo/projects/templates/projects/project_detail_memberships_socialaccounts.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% load static %}
-
-{% for socialaccount in membership.user.socialaccount_set.all %}
-{% if socialaccount.provider == 'orcid' %}
-<a href="https://orcid.org/{{ socialaccount.uid }}">
-    <img alt="ORCID logo" src="{% static 'accounts/img/orcid_16x16.png' %}" width="16" height="16" />
-</a>
-{% endif %}
-{% endfor %}
diff --git a/rdmo/projects/templates/projects/project_detail_sidebar.html b/rdmo/projects/templates/projects/project_detail_sidebar.html
deleted file mode 100644
index fc51cee15a..0000000000
--- a/rdmo/projects/templates/projects/project_detail_sidebar.html
+++ /dev/null
@@ -1,177 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load core_tags %}
-
-{% has_perm 'projects.change_project_object' request.user project as can_change_project %}
-{% has_perm 'projects.delete_project_object' request.user project as can_delete_project %}
-{% has_perm 'projects.leave_project_object' request.user project as can_leave_project %}
-
-{% has_perm 'projects.change_value_object' request.user project as can_change_value %}
-
-<h2>{% trans 'Options' %}</h2>
-
-<ul class="list-unstyled">
-    <li id="project-questions">
-        <strong>
-            {% if can_change_value %}
-            <a href="{% url 'project_interview' project.pk %}">{% trans 'Answer questions' %}</a>
-            {% else %}
-            <a href="{% url 'project_interview' project.pk %}">{% trans 'View questions' %}</a>
-            {% endif %}
-        </strong>
-    </li>
-</ul>
-
-<ul class="list-unstyled">
-    <li>
-        <strong>
-            <a href="{% url 'project_answers' project.pk %}">{% trans 'View answers' %}</a>
-        </strong>
-    </li>
-</ul>
-
-{% if can_leave_project and membership and not membership.is_last_owner %}
-<ul class="list-unstyled">
-    <li>
-        <a href="{% url 'project_leave' project.pk %}">{% trans 'Leave project' %}</a>
-    </li>
-</ul>
-{% endif %}
-
-<ul class="list-unstyled">
-    {% if can_change_project %}
-    <li>
-        <a href="{% url 'project_update_information' project.pk %}">{% trans 'Update project information' %}</a>
-    </li>
-    <li>
-        <a href="{% url 'project_update_catalog' project.pk %}">{% trans 'Update project catalog' %}</a>
-    </li>
-    {% if settings.NESTED_PROJECTS %}
-    <li>
-        <a href="{% url 'project_update_parent' project.pk %}">{% trans 'Update parent project' %}</a>
-    </li>
-    {% endif %}
-    {% if settings.PROJECT_ISSUES and tasks_available and not settings.PROJECT_TASKS_SYNC %}
-    <li>
-        <a href="{% url 'project_update_tasks' project.pk %}">{% trans 'Update project tasks' %}</a>
-    </li>
-    {% endif %}
-    {% if settings.PROJECT_VIEWS and views_available and not settings.PROJECT_VIEWS_SYNC %}
-    <li>
-        <a href="{% url 'project_update_views' project.pk %}">{% trans 'Update project views' %}</a>
-    </li>
-    {% endif %}
-    {% endif %}
-    <li>
-        <a href="{% url 'project_copy' project.pk %}">{% trans 'Copy project' %}</a>
-    </li>
-    {% if can_delete_project %}
-    <li>
-        <a href="{% url 'project_delete' project.pk %}">{% trans 'Delete project' %}</a>
-    </li>
-    {% endif %}
-</ul>
-
-{% has_perm 'projects.change_visibility_object' request.user project as can_change_visibility %}
-{% if settings.PROJECT_VISIBILITY and can_change_visibility %}
-<ul class="list-unstyled">
-    <li>
-        <a href="{% url 'project_update_visibility' project.pk %}">
-            {% if not project.visibility %}
-            {% trans 'Make project visible' %}
-            {% else %}
-            {% trans 'Update project visibility' %}
-            {% endif %}
-        </a>
-    </li>
-</ul>
-{% endif %}
-
-{% has_perm 'projects.add_membership_object' request.user project as can_add_membership %}
-{% if can_add_membership %}
-<ul class="list-unstyled">
-    <li>
-        <a href="{% url 'membership_create' project.pk %}">{% trans 'Add member' %}</a>
-    </li>
-</ul>
-{% endif %}
-
-{% has_perm 'projects.add_snapshot_object' request.user project as can_add_snapshot %}
-{% if can_add_snapshot %}
-<ul class="list-unstyled">
-    <li>
-        <a href="{% url 'snapshot_create' project.pk %}">{% trans 'Create snapshot' %}</a>
-    </li>
-</ul>
-{% endif %}
-
-{% has_perm 'projects.add_integration_object' request.user project as can_add_integration %}
-{% if providers and can_add_integration %}
-<ul class="list-unstyled">
-    {% for provider_key, provider in providers.items %}
-    <li>
-        <a href="{% url 'integration_create' project.pk provider_key %}">{{ provider.add_label }}</a>
-    </li>
-    {% endfor %}
-</ul>
-{% endif %}
-
-<ul class="list-unstyled">
-    <li>
-        <a href="{% url 'projects' %}">{% trans 'Back to projects overview' %}</a>
-    </li>
-</ul>
-
-{% has_perm 'projects.export_project_object' request.user project as can_export_project %}
-{% if settings.PROJECT_EXPORTS and can_export_project %}
-<h2 id="export-project">{% trans 'Export' %}</h2>
-
-<ul class="list-unstyled">
-    {% for key, label, class in settings.PROJECT_EXPORTS %}
-    <li>
-        <a href="{% url 'project_export' project.pk key %}" target="_blank">
-            {{ label }}
-        </a>
-    </li>
-    {% endfor %}
-</ul>
-{% endif %}
-
-{% has_perm 'projects.import_project_object' request.user project as can_import_project %}
-{% if settings.PROJECT_IMPORTS and can_import_project %}
-<h2 id="import-project">{% trans 'Import values' %}</h2>
-
-<ul class="list-unstyled">
-    <li>
-        <p>
-            <strong>{% trans 'Import from file' %}</strong>
-        </p>
-        {% url 'project_update_import' project.id as upload_url %}
-        {% include 'core/upload_form.html' with upload_url=upload_url label=True %}
-    </li>
-    {% if settings.NESTED_PROJECTS and ancestors_import %}
-    <li>
-        <p>
-            <strong>{% trans 'Import from parent project' %}</strong>
-        </p>
-        {% include 'projects/project_detail_sidebar_parent_import.html' %}
-    </li>
-    {% endif %}
-    {% if settings.PROJECT_IMPORTS_LIST %}
-    <li>
-        <p>
-            <strong>{% trans 'Import directly' %}</strong>
-        </p>
-    </li>
-    {% for key, label, class in settings.PROJECT_IMPORTS %}
-    {% if key in settings.PROJECT_IMPORTS_LIST %}
-    <li>
-        <a href="{% url 'project_update_import' project.id key %}" target="_blank">
-            {{ label }}
-        </a>
-    </li>
-    {% endif %}
-    {% endfor %}
-    {% endif %}
-</ul>
-{% endif %}
diff --git a/rdmo/projects/templates/projects/project_detail_sidebar_parent_import.html b/rdmo/projects/templates/projects/project_detail_sidebar_parent_import.html
deleted file mode 100644
index d9a47c8ff5..0000000000
--- a/rdmo/projects/templates/projects/project_detail_sidebar_parent_import.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% load i18n %}
-
-<form class="sidebar-form" action="{% url 'project_update_import' project.id %}" method="post">
-    {% csrf_token %}
-
-    <input type="hidden" name="method" value="import_project">
-
-    <select class="form-control" name="source">
-        {% for project in ancestors_import %}
-        <option value="{{ project.id }}">{{ project.title }}</option>
-        {% endfor %}
-    </select>
-
-    <div class="sidebar-form-button">
-        <button type="submit" class="btn btn-primary" type="submit"
-                title="{% trans 'Import' %}" aria-label="{% trans 'Import' %}">
-            <i class="fa fa-arrow-right" aria-hidden="true"></i>
-        </button>
-    </div>
-</form>
diff --git a/rdmo/projects/templates/projects/project_detail_snapshots.html b/rdmo/projects/templates/projects/project_detail_snapshots.html
deleted file mode 100644
index c825276b97..0000000000
--- a/rdmo/projects/templates/projects/project_detail_snapshots.html
+++ /dev/null
@@ -1,98 +0,0 @@
-{% load i18n %}
-{% load rules %}
-
-{% has_perm 'projects.add_snapshot_object' request.user project as can_add_snapshot %}
-{% has_perm 'projects.change_snapshot_object' request.user project as can_change_snapshot %}
-{% has_perm 'projects.rollback_snapshot_object' request.user project as can_rollback_snapshot %}
-
-{% if snapshots or can_add_snapshot or can_change_snapshot or can_rollback_snapshot %}
-
-<div id="project-snapshots">
-
-    <h2>{% trans 'Snapshots' %}</h2>
-
-    {% include 'projects/project_detail_snapshots_help.html' %}
-
-    {% if snapshots %}
-
-        <table class="table">
-            <thead>
-                <th style="width: 20%">{% trans 'Snapshot' %}</th>
-                <th style="width: 30%">{% trans 'Description' %}</th>
-                <th style="width: 30%">{% trans 'Created' %}</th>
-                <th style="width: 20%" class="text-right" aria-label="{% trans 'Actions' %}">
-                {% if can_add_snapshot %}
-                    <a href="{% url 'snapshot_create' project.pk %}" title="{% trans 'Create snapshot' %}">
-                        <i class="fa fa-plus" aria-hidden="true"></i>
-                    </a>
-                {% endif %}
-                </th>
-            </thead>
-            <tbody>
-                {% for snapshot in snapshots %}
-                <tr>
-                    <td>
-                        {{ snapshot.title }}
-                    </td>
-                    <td>
-                        {{ snapshot.description }}
-                    </td>
-                    <td>
-                        {{ snapshot.created }}
-                    </td>
-                    <td class="text-right">
-                        <a href="{% url 'project_answers' project.pk snapshot.id %}" class="fa fa-eye"
-                            title="{% trans 'View answers' %}">
-                        </a>
-                        {% if can_change_snapshot %}
-                        <a href="{% url 'snapshot_update' project.pk snapshot.id %}" class="fa fa-pencil"
-                            title="{% trans 'Update snapshot' %}">
-                        </a>
-                        {% endif %}
-                        {% if can_rollback_snapshot %}
-                        <a href="{% url 'snapshot_rollback' project.pk snapshot.id %}" class="fa fa-reply"
-                            title="{% trans 'Rollback to snapshot' %}">
-                        </a>
-                        {% endif %}
-
-                        {% has_perm 'projects.export_project_object' request.user project as can_export_project %}
-                        {% if settings.PROJECT_SNAPSHOT_EXPORTS and can_export_project %}
-                        <span class="dropdown">
-                            <button type="submit" class="btn-link fa fa-download"
-                                    title="{% trans 'Export snapshot' %}" aria-label="{% trans 'Export snapshot' %}"
-                                    data-toggle="dropdown"></button>
-
-                            <ul class="dropdown-menu">
-                                {% for key, label, class in settings.PROJECT_SNAPSHOT_EXPORTS %}
-                                <li>
-                                    <a href="{% url 'snapshot_export' project.id snapshot.id key %}" target="_blank">
-                                        {{ label }}
-                                    </a>
-                                </li>
-                                {% endfor %}
-                            {% endif %}
-                            </ul>
-                        </span>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-
-    {% else %}
-
-        {% if can_add_snapshot %}
-            <p class="project-update">
-                <a href="{% url 'snapshot_create' project.pk %}" title="{% trans 'Create snapshot' %}">
-                    <i class="fa fa-plus" aria-hidden="true"></i>
-                </a>
-            </p>
-        {% endif %}
-
-        <p>{% trans 'No snapshots found.' %}</p>
-
-    {% endif %}
-
-</div>
-
-{% endif %}
diff --git a/rdmo/projects/templates/projects/project_detail_snapshots_help.html b/rdmo/projects/templates/projects/project_detail_snapshots_help.html
deleted file mode 100644
index d1578b4b1a..0000000000
--- a/rdmo/projects/templates/projects/project_detail_snapshots_help.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load i18n %}
-
-    <p class="text-muted">
-        {% blocktrans trimmed %}
-        Snapshots allow you to save all responses at a given point in time and preserve a certain stage of the project. Later the snapshot can be used to create views, and the project can also be reset to a previous snapshot if needed.
-        {% endblocktrans %}
-    </p>
diff --git a/rdmo/projects/templates/projects/project_detail_views.html b/rdmo/projects/templates/projects/project_detail_views.html
deleted file mode 100644
index 88563582a4..0000000000
--- a/rdmo/projects/templates/projects/project_detail_views.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{% load i18n %}
-{% load rules %}
-{% load core_tags %}
-
-{% has_perm 'projects.change_project_object' request.user project as can_change_project %}
-
-{% if settings.PROJECT_VIEWS and views_available %}
-
-<div id="project-views">
-
-    <h2>{% trans 'Views' %}</h2>
-
-    {% include 'projects/project_detail_views_help.html' %}
-
-    {% if views %}
-
-        <table class="table">
-            <thead>
-                <th style="width: 20%">{% trans 'View' %}</th>
-                <th style="width: 60%">{% trans 'Description' %}</th>
-                <th style="width: 20%" class="text-right" aria-label="{% trans 'Actions' %}">
-                    {% if can_change_project and not settings.PROJECT_VIEWS_SYNC %}
-                    <a href="{% url 'project_update_views' project.pk %}" title="{% trans 'Update project views' %}">
-                        <i class="fa fa-pencil" aria-hidden="true"></i>
-                    </a>
-                    {% endif %}
-                </th>
-            </thead>
-            <tbody>
-                {% for view in views %}
-                <tr>
-                    <td>
-                        <a href="{% url 'project_view' project.pk view.pk %}">{{ view.title|markdown }}</a>
-                    </td>
-                    <td>{{ view.help|markdown }}</td>
-                    <td class="text-right">
-                        <a href="{% url 'project_view' project.pk view.pk %}" class="fa fa-eye"
-                            title="{% trans 'Display view' %}">
-                        </a>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-
-    {% else %}
-
-        {% if can_change_project and not settings.PROJECT_VIEWS_SYNC %}
-            <p class="project-update">
-                <a href="{% url 'project_update_views' project.pk %}" title="{% trans 'Update project views' %}">
-                    <i class="fa fa-pencil" aria-hidden="true"></i>
-                </a>
-            </p>
-        {% endif %}
-
-        <p>
-            {% trans 'No views are configured for this project.' %}
-        </p>
-
-    {% endif %}
-
-</div>
-
-{% endif %}
diff --git a/rdmo/projects/templates/projects/project_detail_views_help.html b/rdmo/projects/templates/projects/project_detail_views_help.html
deleted file mode 100644
index 264e522b01..0000000000
--- a/rdmo/projects/templates/projects/project_detail_views_help.html
+++ /dev/null
@@ -1,7 +0,0 @@
-{% load i18n %}
-
-    <p class="text-muted">
-        {% blocktrans trimmed %}
-        Views are created using the answers given in the project and can then be exported in various formats. Initially, all views are empty. Please answer some questions by visiting <strong>Answer Questions</strong> (at the top of the sidebar).
-        {% endblocktrans %}
-    </p>
diff --git a/rdmo/projects/templates/projects/project_error.html b/rdmo/projects/templates/projects/project_error.html
index 86eb8a31e9..2a5c9f47c6 100644
--- a/rdmo/projects/templates/projects/project_error.html
+++ b/rdmo/projects/templates/projects/project_error.html
@@ -11,14 +11,4 @@ <h2>{% trans 'No catalog configured' %}</h2>
         {% trans "The project does appear not to have a question catalog. Please update your project." %}
     </p>
 
-    <p>
-        {% trans "You will be redirected shortly." %}
-    </p>
-
-    <script type="text/javascript">
-        window.setTimeout(function(){
-            window.location.replace('{% url 'project_update' project.id %}');
-        }, 5000);
-    </script>
-
 {% endblock%}
diff --git a/rdmo/projects/templates/projects/project_form.html b/rdmo/projects/templates/projects/project_form.html
deleted file mode 100644
index 9fbd90f914..0000000000
--- a/rdmo/projects/templates/projects/project_form.html
+++ /dev/null
@@ -1,49 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block head %}
-<script>
-    $(document).ready(function() {
-        $('[data-toggle="tooltip"]').tooltip();
-    });
-</script>
-{% endblock %}
-
-{% block page %}
-
-{% if object %}
-
-    {% if form.fields.catalogs %}
-
-        <h1>{% trans 'Update project catalog' %}</h1>
-
-    {% elif form.fields.tasks %}
-
-        <h1>{% trans 'Update project tasks' %}</h1>
-
-        <p class="help-block">{% trans 'Please note that their status is lost when you remove tasks from the project.' %}</p>
-
-        {% bootstrap_form submit=_('Save tasks') %}
-
-    {% elif form.fields.views %}
-
-        <h1>{% trans 'Update project views' %}</h1>
-        {% bootstrap_form submit=_('Save views') %}
-
-    {% else %}
-
-        <h1>{% trans 'Update project information' %}</h1>
-        {% bootstrap_form submit=_('Save project') %}
-
-    {% endif %}
-
-{% else %}
-
-    <h1>{% trans 'Create new project' %}</h1>
-
-    {% bootstrap_form submit=_('Create project') %}
-
-{% endif %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_form_visibility.html b/rdmo/projects/templates/projects/project_form_visibility.html
deleted file mode 100644
index 92fcc079c3..0000000000
--- a/rdmo/projects/templates/projects/project_form_visibility.html
+++ /dev/null
@@ -1,48 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-    <h1>
-        {% if object.visibility %}
-        {% trans 'Update project visibility' %}
-        {% else %}
-        {% trans 'Make project visible' %}
-        {% endif %}
-    </h1>
-
-    <p class="mb-10 text-muted">
-        {% blocktrans trimmed %}
-        Projects can be made visible to all users, for example to be used as a template.
-        When a project is made visible, users can access it as if they were in the guest role.
-        {% endblocktrans %}
-    </p>
-
-    {% if settings.MULTISITE and object.visibility %}
-    <p class="mb-10">
-        {% if object.visibility.sites.all %}
-
-        {% blocktrans trimmed with object.visibility.sites.all|join:', ' as site_names %}
-        Currently, the project is available to users on {{ site_names }}.
-        {% endblocktrans %}
-
-        {% else %}
-
-        {% blocktrans trimmed %}
-        Currently, the project is accessible to users on all sites.
-        {% endblocktrans %}
-
-        {% endif %}
-    </p>
-    {% endif %}
-
-    {% if submit_label and delete_label %}
-    {% bootstrap_form submit=submit_label delete=delete_label %}
-    {% elif submit_label %}
-    {% bootstrap_form submit=submit_label %}
-    {% elif delete_label %}
-    {% bootstrap_form delete=delete_label %}
-    {% endif %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_import.html b/rdmo/projects/templates/projects/project_import.html
deleted file mode 100644
index ddfe0a6819..0000000000
--- a/rdmo/projects/templates/projects/project_import.html
+++ /dev/null
@@ -1,171 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block content %}
-
-<div class="container">
-    <div class="row">
-        <form method="post">
-            {% csrf_token %}
-
-            <input type="hidden" name="method" value="{{ method }}" />
-            <input type="hidden" name="source" value="{{ source }}" />
-
-            <div class="page col-md-9">
-                {% if not current_project %}
-                <h1>
-                    {% blocktrans %}Create project from {{ source_title }}{% endblocktrans %}
-                </h1>
-
-                    {% if source_project %}
-                    <table class="table table-bordered table-break-word">
-                        <tbody>
-                            <tr>
-                                <td style="width: 20%">{% trans 'Title' %}</td><td>{{ source_project.title }}</td>
-                            </tr>
-                            <tr>
-                                <td style="width: 20%">{% trans 'Description' %}</td><td>{{ source_project.description }}</td>
-                            </tr>
-                            <tr>
-                                <td style="width: 20%">{% trans 'Catalog' %}</td><td>{{ source_project.catalog.title }}</td>
-                            </tr>
-                            <tr>
-                                <td style="width: 20%">{% trans 'Created' %}</td><td>{{ source_project.created }}</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    {% endif %}
-
-                {% else %}
-                <h1>
-                    {% blocktrans %}Import from {{ source_title }}{% endblocktrans %}
-                </h1>
-                {% endif %}
-
-                {% if values %}
-                <table class="table table-bordered table-break-word">
-                    <thead>
-                        <tr>
-                            <th>{% trans 'Question' %}</th>
-                            {% if current_project %}
-                            <th>{% trans 'Current answer' %}</th>
-                            {% endif %}
-                            <th>{% trans 'Imported answer' %}</th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for value in values %}
-                        <tr>
-                            <td>
-                                {% if value.question %}
-                                {{ value.question.text }}
-                                {% elif value.attribute.key == 'id' %}
-                                <i>{% trans 'Title of a set.' %}</i>
-                                {% else %}
-                                <i>{% trans 'Not available in this catalog.' %}</i>
-                                {% endif %}
-                            </td>
-                            {% if current_project %}
-                            <td style="width: 30%">{{ value.current.value_and_unit }}</td>
-                            <td style="width: 30%">{% firstof value.value_and_unit value.file_import.name %}</td>
-                            {% else %}
-                            <td style="width: 60%">{% firstof value.value_and_unit value.file_import.name %}</td>
-                            {% endif %}
-                            <td style="width: 1%" class="import-checkbox">
-                                {% if value.attribute.uri %}
-                                <input class="import-checkbox" type="checkbox"
-                                    name="{{ value.attribute.uri }}[{{value.set_prefix}}][{{value.set_index}}][{{value.collection_index}}]" checked />
-                                {% else %}
-                                <i class="fa fa-ban" title="{% trans 'This Answer cannot be imported.' %}"
-                                   aria-hidden="true"></i>
-                                {% endif %}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-                {% endif %}
-
-                {% if snapshots %}
-                {% for snapshot in snapshots %}
-
-                <h2>{% trans 'Snapshot' %}: {{ snapshot.title }}</h2>
-
-                <table class="table table-bordered table-break-word">
-                    <tbody>
-                        <tr>
-                            <td style="width: 20%">{% trans 'Title' %}</td><td>{{ snapshot.title }}</td>
-                        </tr>
-                        <tr>
-                            <td style="width: 20%">{% trans 'Description' %}</td><td>{{ snapshot.description }}</td>
-                        </tr>
-                        <tr>
-                            <td style="width: 20%">{% trans 'Created' %}</td><td>{{ snapshot.created }}</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                {% if snapshot.snapshot_values %}
-                <table class="table table-bordered table-break-word">
-                    <thead>
-                        <tr>
-                            <th>Question</th>
-                            {% if current_project %}
-                            <th>{% trans 'Current answer' %}</th>
-                            {% endif %}
-                            <th>{% trans 'Imported answer' %}</th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for value in snapshot.snapshot_values %}
-                        <tr>
-                            <td>
-                                {% if value.question %}
-                                {{ value.question.text }}
-                                {% elif value.attribute.key == 'id' %}
-                                <i>{% trans 'Title of a set.' %}</i>
-                                {% else %}
-                                <i>{% trans 'Not available in this catalog.' %}</i>
-                                {% endif %}
-                            </td>
-                            {% if current_project %}
-                            <td style="width: 30%">{{ value.current.value_and_unit }}</td>
-                            <td style="width: 30%">{% firstof value.value_and_unit value.file_import.name %}</td>
-                            {% else %}
-                            <td style="width: 60%">{% firstof value.value_and_unit value.file_import.name %}</td>
-                            {% endif %}
-                            <td style="width: 1%" class="import-checkbox">
-                                {% if value.attribute.uri %}
-                                <input type="checkbox" checked
-                                    name="{{ value.attribute.uri }}[{{snapshot.snapshot_index}}][{{value.set_prefix}}][{{value.set_index}}][{{value.collection_index}}]" />
-                                {% else %}
-                                <i class="fa fa-ban" title="{% trans 'This Answer cannot be imported.' %}"
-                                   aria-hidden="true"></i>
-                                {% endif %}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
-                {% endif %}
-                {% endfor %}
-                {% endif %}
-            </div>
-            <div class="sidebar col-md-3">
-                <div class="sidebar-mt import-buttons">
-                    {% if current_project %}
-                    <input type="submit" value="{% trans 'Import values' %}" class="btn btn-success"></input>
-                    {% else %}
-                    <input type="submit" value="{% trans 'Import project' %}" class="btn btn-success"></input>
-                    {% endif %}
-                    <input type="submit" value="{% trans 'Cancel' %}" name="cancel" class="btn"></input>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_import_form.html b/rdmo/projects/templates/projects/project_import_form.html
deleted file mode 100644
index 079e3d63a9..0000000000
--- a/rdmo/projects/templates/projects/project_import_form.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-    {% if not current_project %}
-    <h1>
-        {% blocktrans %}Create project from {{ source_title }}{% endblocktrans %}
-    </h1>
-
-    {% else %}
-    <h1>
-        {% blocktrans %}Import from {{ source_title }}{% endblocktrans %}
-    </h1>
-    {% endif %}
-
-    {% bootstrap_form submit=_('Import values') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_interview.html b/rdmo/projects/templates/projects/project_interview.html
index 7e94ea0096..ebb548a062 100644
--- a/rdmo/projects/templates/projects/project_interview.html
+++ b/rdmo/projects/templates/projects/project_interview.html
@@ -1,7 +1,5 @@
-{% extends 'core/page.html' %}
+{% extends 'core/base.html' %}
 {% load static %}
-{% load i18n %}
-{% load core_tags %}
 
 {% block head %}
     <meta name='project' content="{{ project.id }}" />
@@ -18,13 +16,7 @@
     <script src="{% static 'projects/js/interview.js' %}" defer></script>
 {% endblock %}
 
-{% block sidebar %}
-
-    <div id="sidebar"></div>
-
-{% endblock %}
-
-{% block page %}
+{% block content %}
 
     <div id="main" class="interview"></div>
 
diff --git a/rdmo/projects/templates/projects/project_view.html b/rdmo/projects/templates/projects/project_view.html
deleted file mode 100644
index 4250b5bd53..0000000000
--- a/rdmo/projects/templates/projects/project_view.html
+++ /dev/null
@@ -1,97 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block head %}
-<script>
-    $(document).ready(function() {
-        $('[data-toggle="tooltip"]').tooltip();
-    });
-</script>
-{% endblock %}
-
-{% block navbar %}
-    <li>
-        <a href="{% url 'project' project.pk %}">{% trans 'Back to project' %}</a>
-    </li>
-{% endblock %}
-
-{% block sidebar %}
-
-    {% if snapshots %}
-
-    <h2>{% trans 'Snapshots' %}</h2>
-
-    <ul class="list-unstyled list-arrow">
-        <li class="{% if current_snapshot == None %}active{% endif %}">
-            <a href="{% url 'project_view' project.id view.id %}">
-                {% trans 'Current' %}
-            </a>
-        </li>
-        {% for snapshot in snapshots %}
-        <li class="{% if current_snapshot.id == snapshot.id %}active{% endif %}">
-            <a href="{% url 'project_view' project.id snapshot.id view.id %}">
-                {{ snapshot.title }}
-            </a>
-        </li>
-        {% endfor %}
-    </ul>
-
-    {% endif %}
-
-    <h2>{% trans 'Options' %}</h2>
-
-    <ul class="list-unstyled">
-        <li>
-            <a href="{% url 'project' project.pk %}">{% trans 'Back to project overview' %}</a>
-        </li>
-    </ul>
-
-    <h2>{% trans 'Export' %}</h2>
-
-    <ul class="list-unstyled">
-        {% for format, text in export_formats %}
-        <li >
-            {% if current_snapshot %}
-            <a href="{% url 'project_view_export' project.id current_snapshot.id view.id format %}" target="_blank">
-                {{ text }}
-            </a>
-            {% else %}
-            <a href="{% url 'project_view_export' project.id view.id format %}" target="_blank">
-                {{ text }}
-            </a>
-            {% endif %}
-        </li>
-        {% endfor %}
-    </ul>
-
-    {% if attachments %}
-
-    <h2>{% trans 'Attachments' %}</h2>
-    <ul class="list-unstyled">
-        {% for value in attachments %}
-        <li >
-            <a href="{{ value.file_url }}" target="_blank">
-                {{ value.file_name }}
-            </a>
-        </li>
-        {% endfor %}
-    </ul>
-
-    {% endif %}
-
-{% endblock %}
-
-{% block page %}
-
-{% if rendered_view  %}
-    {{ rendered_view }}
-{% else %}
-    <h1>{% trans 'Error' %}</h1>
-
-    <p>
-        {% trans 'There has been a problem creating the view. Please contact support.' %}
-    </p>
-{% endif %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/project_view_author_info.html b/rdmo/projects/templates/projects/project_view_author_info.html
new file mode 100644
index 0000000000..0b2592246d
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_author_info.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p >
+  {% blocktrans trimmed %}
+    Like guest, but can edit datasets and questionnaires
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_description_help.html b/rdmo/projects/templates/projects/project_view_description_help.html
new file mode 100644
index 0000000000..9c45820a92
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_description_help.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    A description of the project (optional).
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_export.html b/rdmo/projects/templates/projects/project_view_export.html
index 2c4b1b8d97..6a4361c64e 100644
--- a/rdmo/projects/templates/projects/project_view_export.html
+++ b/rdmo/projects/templates/projects/project_view_export.html
@@ -3,6 +3,6 @@
 
 {% block body %}
 
-{{ rendered_view }}
+{{ html }}
 
 {% endblock %}
diff --git a/rdmo/projects/templates/projects/project_view_guest_info.html b/rdmo/projects/templates/projects/project_view_guest_info.html
new file mode 100644
index 0000000000..417b227c87
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_guest_info.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p>
+  {% blocktrans trimmed %}
+    Can view datasets, questionnaire, and documents
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_invite_member.html b/rdmo/projects/templates/projects/project_view_invite_member.html
new file mode 100644
index 0000000000..e1d240903e
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_invite_member.html
@@ -0,0 +1,13 @@
+{% load i18n %}
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    Users can be invited by their username (if they already have an account here), or by their e-mail address.
+  {% endblocktrans %}
+</p>
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    Users will receive an e-mail with a link to join the project with the assigned role.
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_invite_member_silently_help.html b/rdmo/projects/templates/projects/project_view_invite_member_silently_help.html
new file mode 100644
index 0000000000..c48178e3ad
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_invite_member_silently_help.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    As site manager or admin, you can directly add users without notifying them via e-mail, when you check the following checkbox.
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_invite_member_user_help.html b/rdmo/projects/templates/projects/project_view_invite_member_user_help.html
new file mode 100644
index 0000000000..9aa1055876
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_invite_member_user_help.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    The username or e-mail of the new user.
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_manager_info.html b/rdmo/projects/templates/projects/project_view_manager_info.html
new file mode 100644
index 0000000000..96551a1c92
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_manager_info.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p>
+  {% blocktrans trimmed %}
+    Like author, but can edit snapshots, project data, and the project team
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_owner_info.html b/rdmo/projects/templates/projects/project_view_owner_info.html
new file mode 100644
index 0000000000..6af9f335af
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_owner_info.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p>
+  {% blocktrans trimmed %}
+    Has full rights
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_parent_help.html b/rdmo/projects/templates/projects/project_view_parent_help.html
new file mode 100644
index 0000000000..27ec46cfb8
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_parent_help.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    By linking to a parent project, you can transfer settings and data from that project.
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_snapshot_description_help.html b/rdmo/projects/templates/projects/project_view_snapshot_description_help.html
new file mode 100644
index 0000000000..f9c06b379b
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_snapshot_description_help.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    The description for this snapshot.
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/project_view_title_help.html b/rdmo/projects/templates/projects/project_view_title_help.html
new file mode 100644
index 0000000000..239a80fdef
--- /dev/null
+++ b/rdmo/projects/templates/projects/project_view_title_help.html
@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="text-muted">
+  {% blocktrans trimmed %}
+    The title for this project.
+  {% endblocktrans %}
+</p>
diff --git a/rdmo/projects/templates/projects/projects.html b/rdmo/projects/templates/projects/projects.html
index 7fe3c18e88..ad58f7a37a 100644
--- a/rdmo/projects/templates/projects/projects.html
+++ b/rdmo/projects/templates/projects/projects.html
@@ -1,38 +1,22 @@
-{% extends 'core/projects_page.html' %}
+{% extends 'core/base.html' %}
 {% load static %}
-{% load compress %}
-{% load i18n %}
-{% load core_tags %}
 
-{% block css %}
-    {% compress css %}
-    <link rel="stylesheet" href="{% static 'overlays/css/overlays.scss' %}" type="text/x-scss" />
-    {% endcompress %}
+{% block head %}
+    <meta name="projects" />
+{% endblock %}
 
+{% block css %}
     <link rel="stylesheet" href="{% static 'projects/css/projects.css' %}" />
     {{ block.super }}
 {% endblock %}
 
 {% block js %}
     {{ block.super }}
-    <script type="text/javascript" src="{% static 'overlays/js/overlays.js' %}"></script>
-    <script>
-        $(document).ready(function() {
-            setTimeout(function() {initOverlays('projects')}, 500);
-        });
-    </script>
     <script src="{% static 'projects/js/projects.js' %}" defer></script>
 {% endblock %}
 
-{% block page %}
+{% block content %}
 
     <div id="main" class="projects"></div>
 
-    <div id="support-info"></div>
-
-    {% render_lang_template 'projects/overlays/projects_create_project' %}
-    {% render_lang_template 'projects/overlays/projects_projects_table' %}
-    {% render_lang_template 'projects/overlays/projects_import_project' %}
-    {% render_lang_template 'projects/overlays/projects_support_info' %}
-
 {% endblock %}
diff --git a/rdmo/projects/templates/projects/projects_pagination.html b/rdmo/projects/templates/projects/projects_pagination.html
deleted file mode 100644
index d0c6e28250..0000000000
--- a/rdmo/projects/templates/projects/projects_pagination.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% load i18n %}
-
-    {% if page_obj.has_other_pages %}
-    <div class="text-center">
-        <ul class="pager">
-            {% if page_obj.has_previous %}
-            <li class="previous"><a href="?page={{ page_obj.previous_page_number }}{% if querystring %}&amp;{{ querystring }}{% endif %}">{% trans 'Previous' %}</a></li>
-            {% else %}
-            <li class="previous disabled"><a href="">{% trans 'Previous' %}</a></li>
-            {% endif %}
-            <li>
-                {% blocktrans trimmed with number=page_obj.number num_pages=page_obj.paginator.num_pages %}
-                Page {{ number }} of {{ num_pages }}.
-                {% endblocktrans %}
-            </li>
-            {% if page_obj.has_next %}
-            <li class="next"><a href="?page={{ page_obj.next_page_number }}{% if querystring %}&amp;{{ querystring }}{% endif %}">{% trans 'Next' %}</a></li>
-            {% else %}
-            <li class="next disabled"><a href="">{% trans 'Next' %}</a></li>
-            {% endif %}
-        </ul>
-    </div>
-    {% endif %}
diff --git a/rdmo/projects/templates/projects/snapshot_form.html b/rdmo/projects/templates/projects/snapshot_form.html
deleted file mode 100644
index 65fbc4157c..0000000000
--- a/rdmo/projects/templates/projects/snapshot_form.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-{% if object %}
-
-    <h1>{% trans 'Update snapshot' %}</h1>
-
-    {% bootstrap_form submit=_('Update snapshot') %}
-
-{% else %}
-
-    <h1>{% trans 'Create new snapshot' %}</h1>
-
-    {% bootstrap_form submit=_('Create snapshot') %}
-
-{% endif %}
-
-{% endblock %}
diff --git a/rdmo/projects/templates/projects/snapshot_rollback.html b/rdmo/projects/templates/projects/snapshot_rollback.html
deleted file mode 100644
index 2d5516f4c0..0000000000
--- a/rdmo/projects/templates/projects/snapshot_rollback.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% extends 'core/page.html' %}
-{% load i18n %}
-{% load core_tags %}
-
-{% block page %}
-
-    <h1>{% trans "Rollback to snapshot" %}</h1>
-
-    <p>
-        {% blocktrans with title=snapshot.title %}You are about to reset all values to the snapshot <strong>{{ title }}</strong>. All newer values will be deleted.{% endblocktrans %}
-    </p>
-
-    <p class="text-danger">
-        {% trans 'This action cannot be undone!' %}
-    </p>
-
-    {% bootstrap_delete_form submit=_('Rollback') %}
-
-{% endblock %}
diff --git a/rdmo/projects/templatetags/__init__.py b/rdmo/projects/templatetags/__init__.py
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/rdmo/projects/templatetags/projects_tags.py b/rdmo/projects/templatetags/projects_tags.py
deleted file mode 100644
index d41dae22d6..0000000000
--- a/rdmo/projects/templatetags/projects_tags.py
+++ /dev/null
@@ -1,57 +0,0 @@
-from django import template
-from django.template.defaultfilters import stringfilter
-from django.utils.safestring import mark_safe
-from django.utils.translation import gettext as _
-
-from ..models import Membership
-
-register = template.Library()
-
-
-@register.simple_tag()
-def projects_indent(level):
-    string = ''
-    if level > 0:
-        for _ in range(level - 1):
-            string += '&ensp;&ensp;'
-        string += '&#8226;&ensp;'
-
-    return mark_safe('<span class="projects-indent">' + string + '</span>')
-
-
-@register.simple_tag()
-def project_progress(project):
-    if project.progress_count is None or project.progress_total is None:
-        return ''
-
-    return _('%(count)s of %(total)s') % {
-        'count': project.progress_count,
-        'total': project.progress_total
-    }
-
-@register.simple_tag()
-def project_progress_ratio(project):
-    if project.progress_count is None or project.progress_total is None:
-        return ''
-
-    try:
-        ratio = project.progress_count / project.progress_total
-    except ZeroDivisionError:
-        ratio = 0
-
-    return f'{ratio:.0%}'
-
-
-@register.simple_tag()
-def project_progress_text(project):
-    progress = project_progress(project)
-    if progress:
-        return _('(%(progress)s progress)') % {'progress': progress}
-    else:
-        return ''
-
-
-@register.filter()
-@stringfilter
-def projects_role(role):
-    return dict(Membership.ROLE_CHOICES).get(role, '')
diff --git a/rdmo/projects/tests/e2e/test_frontend_project_detail.py b/rdmo/projects/tests/e2e/test_frontend_project_detail.py
index 565a3b16d7..6ce15166c5 100644
--- a/rdmo/projects/tests/e2e/test_frontend_project_detail.py
+++ b/rdmo/projects/tests/e2e/test_frontend_project_detail.py
@@ -18,5 +18,5 @@ def test_project_detail_page(page: Page):
     page.screenshot(path="screenshots/projects/project-detail.png", full_page=True)
 
     # Assert project detail page
-    expect(page.get_by_role("heading", name="Test")).to_be_visible()
-    expect(page.get_by_role("link", name="Answer questions")).to_be_visible()
+    expect(page.get_by_text("Test")).to_be_visible()
+    expect(page.get_by_text("Interview")).to_be_visible()
diff --git a/rdmo/projects/tests/e2e/test_frontend_projects.py b/rdmo/projects/tests/e2e/test_frontend_projects.py
index 78a59d7606..9024f76105 100644
--- a/rdmo/projects/tests/e2e/test_frontend_projects.py
+++ b/rdmo/projects/tests/e2e/test_frontend_projects.py
@@ -22,7 +22,14 @@ def test_projects_page(page: Page):
     expect(page.locator("thead")).to_contain_text("Name")
     expect(page.locator("tbody")).to_contain_text("Test")
 
-    # Assert bottom of page
+    # Assert "Load more" button
     page.locator("body").press("End")
-    expect(page.get_by_role("button", name="Scroll to top")).to_be_visible()
-    page.locator("body").press("Home")
+    load_more = page.get_by_role("button", name="Load more")
+    expect(load_more).to_be_visible()
+
+    with page.expect_response(re.compile(r"/projects/")):
+        load_more.click()
+
+    # Assert the "Scroll to top" button
+    page.locator("body").press("End")
+    expect(page.get_by_title("Scroll to top")).to_be_visible()
diff --git a/rdmo/projects/tests/helpers/ordering.py b/rdmo/projects/tests/helpers/ordering.py
new file mode 100644
index 0000000000..158c52655d
--- /dev/null
+++ b/rdmo/projects/tests/helpers/ordering.py
@@ -0,0 +1,12 @@
+from django.db.models import OuterRef, Subquery
+from django.db.models.functions import Coalesce, Greatest
+
+from rdmo.projects.models import Project, Value
+
+
+def get_projects_ordered_by_last_changed():
+    return Project.objects.annotate(
+        last_changed=Coalesce(Greatest(Subquery(
+            Value.objects.filter(project=OuterRef('pk')).order_by('-updated').values('updated')[:1]
+        ), 'updated'), 'updated')
+    ).order_by('-last_changed')
diff --git a/rdmo/projects/tests/helpers/roles.py b/rdmo/projects/tests/helpers/roles.py
new file mode 100644
index 0000000000..e95b645ce2
--- /dev/null
+++ b/rdmo/projects/tests/helpers/roles.py
@@ -0,0 +1,15 @@
+from rdmo.projects.constants import ROLE_RANKS
+
+
+def get_project_roles(project, project_ancestors, username):
+    current_membership = project.memberships.filter(user__username=username).first()
+    current_role = current_membership.role if current_membership else None
+
+    highest_role = current_role
+    for project_ancestor in project_ancestors:
+        project_membership = project_ancestor.memberships.filter(user__username=username).first()
+        if project_membership:
+            if highest_role is None or ROLE_RANKS[highest_role] < ROLE_RANKS[project_membership.role]:
+                highest_role = project_membership.role
+
+    return current_role, highest_role
diff --git a/rdmo/projects/tests/test_export.py b/rdmo/projects/tests/test_export.py
deleted file mode 100644
index 2d9849e066..0000000000
--- a/rdmo/projects/tests/test_export.py
+++ /dev/null
@@ -1,30 +0,0 @@
-import os
-
-from django.conf import settings
-from django.urls import reverse
-
-
-def test_project_answers_export_html(db, client):
-    client.login(username='admin', password='admin')
-
-    url = reverse('project_answers_export', args=[1, 'html'])
-    response = client.get(url)
-
-    assert response.status_code == 200
-
-    test_file = os.path.join(settings.BASE_DIR, 'export', 'project.html')
-    for a, b in zip(response.content.decode().splitlines(), open(test_file).read().splitlines(), strict=True):
-        assert a == b
-
-
-def test_project_export_csv(db, client):
-    client.login(username='admin', password='admin')
-
-    url = reverse('project_export', args=[1, 'csvcomma'])
-    response = client.get(url)
-
-    assert response.status_code == 200
-
-    test_file = os.path.join(settings.BASE_DIR, 'export', 'project.csv')
-    for a, b in zip(response.content.decode().splitlines(), open(test_file).read().splitlines(), strict=True):
-        assert a == b
diff --git a/rdmo/projects/tests/test_view_integration.py b/rdmo/projects/tests/test_view_integration.py
deleted file mode 100644
index 711b7790ee..0000000000
--- a/rdmo/projects/tests/test_view_integration.py
+++ /dev/null
@@ -1,240 +0,0 @@
-import pytest
-
-from django.urls import reverse
-
-from ..models import Integration, Issue
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-add_integration_permission_map = change_integration_permission_map = delete_integration_permission_map = {
-    'owner': [1, 2, 3, 4, 5],
-    'manager': [1, 3, 5],
-    'api': [1, 2, 3, 4, 5],
-    'site': [1, 2, 3, 4, 5]
-}
-
-projects = [1, 2, 3, 4, 5]
-integrations = [1, 2]
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_integration_create_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('integration_create', args=[project_id, 'simple'])
-    response = client.get(url)
-
-    if project_id in add_integration_permission_map.get(username, []):
-        assert response.status_code == 200
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_integration_create_post(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('integration_create', args=[project_id, 'simple'])
-    data = {
-        'project_url': 'https://example.com/projects/1'
-    }
-    response = client.post(url, data)
-
-    if project_id in add_integration_permission_map.get(username, []):
-        assert response.status_code == 302
-        values = Integration.objects.order_by('id').last().options.values('key', 'value', 'secret')
-        assert sorted(values, key=lambda obj: obj['key']) == [
-            {
-                'key': 'project_url',
-                'value': 'https://example.com/projects/1',
-                'secret': False
-            },
-            {
-                'key': 'secret',
-                'value': '',
-                'secret': True
-            }
-        ]
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_update_get(db, client, username, password, project_id, integration_id):
-    client.login(username=username, password=password)
-    integration = Integration.objects.filter(project_id=project_id, id=integration_id).first()
-
-    url = reverse('integration_update', args=[project_id, integration_id])
-    response = client.get(url)
-
-    if integration:
-        if project_id in change_integration_permission_map.get(username, []):
-            assert response.status_code == 200
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_update_post(db, client, username, password, project_id, integration_id):
-    client.login(username=username, password=password)
-    integration = Integration.objects.filter(project_id=project_id, id=integration_id).first()
-
-    url = reverse('integration_update', args=[project_id, integration_id])
-    data = {
-        'project_url': 'https://example.com/projects/2',
-        'secret': 'super_secret'
-    }
-    response = client.post(url, data)
-
-    if integration:
-        if project_id in change_integration_permission_map.get(username, []):
-            assert response.status_code == 302
-            values = Integration.objects.filter(project_id=project_id, id=integration_id).first() \
-                                        .options.values('key', 'value', 'secret')
-            assert sorted(values, key=lambda obj: obj['key']) == [
-                {
-                    'key': 'project_url',
-                    'value': 'https://example.com/projects/2',
-                    'secret': False
-                },
-                {
-                    'key': 'secret',
-                    'value': 'super_secret',
-                    'secret': True
-                }
-            ]
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_delete_get(db, client, username, password, project_id, integration_id):
-    client.login(username=username, password=password)
-    integration = Integration.objects.filter(project_id=project_id, id=integration_id).first()
-
-    url = reverse('integration_delete', args=[project_id, integration_id])
-    response = client.get(url)
-
-    if integration:
-        if project_id in delete_integration_permission_map.get(username, []):
-            assert response.status_code == 200
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_delete_post(db, client, username, password, project_id, integration_id):
-    client.login(username=username, password=password)
-    integration = Integration.objects.filter(project_id=project_id, id=integration_id).first()
-
-    url = reverse('integration_delete', args=[project_id, integration_id])
-    response = client.delete(url)
-
-    if integration:
-        if project_id in delete_integration_permission_map.get(username, []):
-            assert response.status_code == 302
-            assert Integration.objects.filter(project_id=project_id, id=integration_id).first() is None
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_webhook_get(db, client, project_id, integration_id):
-    url = reverse('integration_webhook', args=[project_id, integration_id])
-    response = client.get(url)
-
-    assert response.status_code == 405
-    assert Issue.objects.filter(status='closed').count() == 0
-
-
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_webhook_post(db, client, project_id, integration_id):
-    integration = Integration.objects.filter(project_id=project_id, id=integration_id).first()
-
-    secret = 'super_duper_secret'
-    url = reverse('integration_webhook', args=[project_id, integration_id])
-    data = {
-        'action': 'closed',
-        'url': 'https://simple.example.com/issues/1'
-    }
-
-    response = client.post(url, data, **{'HTTP_X_SECRET': secret, 'content_type': 'application/json'})
-
-    if integration:
-        assert response.status_code == 200
-        assert Issue.objects.filter(status='closed').count() == (1 if integration_id == 1 else 0)
-    else:
-        assert response.status_code == 404
-        assert Issue.objects.filter(status='closed').count() == 0
-
-
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_webhook_post_wrong_url(db, client, project_id, integration_id):
-    integration = Integration.objects.filter(project_id=project_id, id=integration_id).first()
-
-    secret = 'super_duper_secret'
-    url = reverse('integration_webhook', args=[project_id, integration_id])
-    data = {
-        'action': 'closed',
-        'url': 'https://simple.example.com/issues/2'
-    }
-
-    response = client.post(url, data, **{'HTTP_X_SECRET': secret, 'content_type': 'application/json'})
-
-    if integration:
-        assert response.status_code == 200
-        assert Issue.objects.filter(status='closed').count() == 0
-    else:
-        assert response.status_code == 404
-        assert Issue.objects.filter(status='closed').count() == 0
-
-
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('integration_id', integrations)
-def test_integration_webhook_post_no_secret(db, client, project_id, integration_id):
-    url = reverse('integration_webhook', args=[project_id, integration_id])
-    response = client.post(url, {})
-
-    assert response.status_code == 404
-    assert Issue.objects.filter(status='closed').count() == 0
diff --git a/rdmo/projects/tests/test_view_issue.py b/rdmo/projects/tests/test_view_issue.py
deleted file mode 100644
index cf4f6d745e..0000000000
--- a/rdmo/projects/tests/test_view_issue.py
+++ /dev/null
@@ -1,226 +0,0 @@
-from unittest.mock import Mock
-
-import pytest
-
-from django.core import mail
-from django.http import HttpResponseRedirect
-from django.urls import reverse
-
-from rdmo.core.constants import VALUE_TYPE_FILE
-
-from ..models import Issue, Project
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-view_issue_permission_map = {
-    'owner': [1, 2, 3, 4, 12],
-    'manager': [1, 3, 5, 12],
-    'author': [1, 3, 5, 12],
-    'guest': [1, 3, 5, 12],
-    'user': [12],
-    'api': [1, 2, 3, 4, 5, 12],
-    'site': [1, 2, 3, 4, 5, 12]
-}
-
-change_issue_permission_map = delete_issue_permission_map = {
-    'owner': [1, 2, 3, 4, 12],
-    'manager': [1, 3],
-    'author': [1, 3],
-    'api': [1, 2, 3, 4, 12],
-    'site': [1, 2, 3, 4, 12],
-}
-
-issues = [1, 2, 3, 4, 9]
-
-integration_pk = 1
-
-issue_status = ('open', 'in_progress', 'closed')
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('issue_id', issues)
-def test_issue(db, client, username, password, issue_id):
-    client.login(username=username, password=password)
-    issue = Issue.objects.get(id=issue_id)
-
-    url = reverse('issue', args=[issue.project_id, issue_id])
-    response = client.get(url)
-
-    if issue.project_id in view_issue_permission_map.get(username, []):
-        assert response.status_code == 200
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('issue_id', issues)
-def test_issue_update_get(db, client, username, password, issue_id):
-    client.login(username=username, password=password)
-    issue = Issue.objects.get(id=issue_id)
-
-    url = reverse('issue_update', args=[issue.project_id, issue_id])
-    response = client.get(url)
-
-    if issue.project_id in change_issue_permission_map.get(username, []):
-        assert response.status_code == 200
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('issue_id', issues)
-@pytest.mark.parametrize('status', issue_status)
-def test_issue_update_post(db, client, username, password, issue_id, status):
-    client.login(username=username, password=password)
-    issue = Issue.objects.get(id=issue_id)
-
-    url = reverse('issue_update', args=[issue.project_id, issue_id])
-    data = {
-        'status': status
-    }
-    response = client.post(url, data)
-
-    if issue.project_id in change_issue_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert Issue.objects.get(id=issue_id).status == status
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Issue.objects.get(id=issue_id).status == issue.status
-
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('issue_id', issues)
-def test_issue_send_get(db, client, username, password, issue_id):
-    client.login(username=username, password=password)
-    issue = Issue.objects.get(id=issue_id)
-
-    url = reverse('issue_update', args=[issue.project_id, issue_id])
-    response = client.get(url)
-
-    if issue.project_id in change_issue_permission_map.get(username, []):
-        assert response.status_code == 200
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('issue_id', issues)
-def test_issue_send_post_email(db, client, username, password, issue_id):
-    client.login(username=username, password=password)
-    issue = Issue.objects.get(id=issue_id)
-
-    url = reverse('issue_send', args=[issue.project_id, issue_id])
-    data = {
-        'subject': 'Subject',
-        'message': 'Message',
-        'recipients': ['email@example.com']
-    }
-    response = client.post(url, data)
-
-    if issue.project_id in change_issue_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert len(mail.outbox) == 1
-        assert mail.outbox[0].subject == '[example.com] Subject'
-        assert mail.outbox[0].body == 'Message'
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert len(mail.outbox) == 0
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('issue_id', issues)
-def test_issue_send_post_attachments(db, client, files, username, password, issue_id):
-    client.login(username=username, password=password)
-    issue = Issue.objects.get(id=issue_id)
-
-    view = issue.project.views.first()
-    file = issue.project.values.filter(snapshot=None, value_type=VALUE_TYPE_FILE).first()
-
-    if file and view:
-        url = reverse('issue_send', args=[issue.project_id, issue_id])
-        data = {
-            'subject': 'Subject',
-            'message': 'Message',
-            'recipients': 'email@example.com',
-            'attachments_answers': 'project_answers',
-            'attachments_views': str(view.id),
-            'attachments_files': str(file.id),
-            'attachments_snapshot': '',
-            'attachments_format': 'html'
-        }
-        response = client.post(url, data)
-
-        if issue.project_id in change_issue_permission_map.get(username, []):
-            assert response.status_code == 302
-            assert len(mail.outbox) == 1
-            assert mail.outbox[0].subject == '[example.com] Subject'
-            assert mail.outbox[0].body == 'Message'
-
-            attachments = mail.outbox[0].attachments
-            assert len(attachments) == 3
-            assert attachments[0][0] == 'Test.html'
-            assert attachments[0][2] == 'text/html; charset=utf-8'
-            assert attachments[1][0] == 'Test.html'
-            assert attachments[1][2] == 'text/html; charset=utf-8'
-            assert attachments[2][0] == 'test.txt'
-            assert attachments[2][2] == 'text/plain'
-        else:
-            if password:
-                assert response.status_code == 403
-            else:
-                assert response.status_code == 302
-
-            assert len(mail.outbox) == 0
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('issue_id', issues)
-def test_issue_send_post_integration(db, client, mocker, username, password, issue_id):
-    mocked_send_issue = Mock(return_value=HttpResponseRedirect(redirect_to='https://example.com/login/oauth/authorize'))
-    mocker.patch('rdmo.projects.providers.SimpleIssueProvider.send_issue', mocked_send_issue)
-
-    client.login(username=username, password=password)
-    issue = Issue.objects.get(id=issue_id)
-
-    url = reverse('issue_send', args=[issue.project_id, issue_id])
-    data = {
-        'subject': 'Subject',
-        'message': 'Message',
-        'integration': [integration_pk]
-    }
-    response = client.post(url, data)
-
-    if issue.project_id in change_issue_permission_map.get(username, []):
-        if integration_pk in Project.objects.get(pk=issue.project_id).integrations.values_list('id', flat=True):
-            assert response.status_code == 302
-            assert response.url.startswith('https://example.com')
-        else:
-            assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-            assert not response.url.startswith('https://example.com')
diff --git a/rdmo/projects/tests/test_view_membership.py b/rdmo/projects/tests/test_view_membership.py
deleted file mode 100644
index 4eef8c5c98..0000000000
--- a/rdmo/projects/tests/test_view_membership.py
+++ /dev/null
@@ -1,296 +0,0 @@
-import pytest
-
-from django.core import mail
-from django.urls import reverse
-
-from rdmo.projects.models import Invite, Membership
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-add_membership_permission_map = change_membership_permission_map = delete_membership_permission_map = {
-    'owner': [1, 2, 3, 4, 5],
-    'api': [1, 2, 3, 4, 5],
-    'site': [1, 2, 3, 4, 5]
-}
-
-projects = [1, 2, 3, 4, 5]
-memberships = [1, 2, 3, 4]
-
-membership_roles = ('owner', 'manager', 'author', 'guest')
-
-excluded_invite_ids = [1, 2]
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_membership_create_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('membership_create', args=[project_id])
-    response = client.get(url)
-
-    if project_id in add_membership_permission_map.get(username, []):
-        assert response.status_code == 200
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('PROJECT_SEND_INVITE', [False, True])
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_role', membership_roles)
-def test_membership_create_post(db, client, settings,
-                                username, password, project_id, membership_role, PROJECT_SEND_INVITE):
-    settings.PROJECT_SEND_INVITE = PROJECT_SEND_INVITE
-    client.login(username=username, password=password)
-
-    url = reverse('membership_create', args=[project_id])
-    data = {
-        'username_or_email': 'user',
-        'role': membership_role
-    }
-    response = client.post(url, data)
-
-    if project_id in add_membership_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert Invite.objects.get(project_id=project_id, user__username='user',
-                                  email='user@example.com', role=membership_role)
-        assert not Membership.objects.filter(project_id=project_id,
-                                             user__username='user', role=membership_role).exists()
-        assert len(mail.outbox) == int(PROJECT_SEND_INVITE)
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert not Invite.objects.exclude(id__in=excluded_invite_ids).exists()
-        assert len(mail.outbox) == 0
-
-
-@pytest.mark.parametrize('PROJECT_SEND_INVITE', [False, True])
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_role', membership_roles)
-def test_membership_create_post_mail(db, client, settings,
-                                     username, password, project_id, membership_role, PROJECT_SEND_INVITE):
-    settings.PROJECT_SEND_INVITE = PROJECT_SEND_INVITE
-    client.login(username=username, password=password)
-
-    url = reverse('membership_create', args=[project_id])
-    data = {
-        'username_or_email': 'someuser@example.com',
-        'role': membership_role
-    }
-    response = client.post(url, data)
-
-    if project_id in add_membership_permission_map.get(username, []):
-        if not PROJECT_SEND_INVITE:
-            assert response.status_code == 200
-            assert not Invite.objects.filter(project_id=project_id, user=None,
-                                             email='someuser@example.com', role=membership_role)
-        else:
-            assert response.status_code == 302
-            assert Invite.objects.get(project_id=project_id, user=None,
-                                      email='someuser@example.com', role=membership_role)
-        assert len(mail.outbox) == int(PROJECT_SEND_INVITE)
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert not Invite.objects.exclude(id__in=excluded_invite_ids).exists()
-        assert len(mail.outbox) == 0
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('membership_role', membership_roles)
-def test_membership_create_post_error(db, client, username, password, membership_role):
-    client.login(username=username, password=password)
-
-    project_id = 1
-    url = reverse('membership_create', args=[project_id])
-    data = {
-        'username_or_email': 'guest',
-        'role': membership_role
-    }
-    response = client.post(url, data)
-
-    assert not Invite.objects.exclude(id__in=excluded_invite_ids).exists()
-    assert len(mail.outbox) == 0
-
-    if project_id in add_membership_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('membership_role', membership_roles)
-def test_membership_create_post_mail_error(db, client, username, password, membership_role):
-    client.login(username=username, password=password)
-
-    project_id = 1
-    url = reverse('membership_create', args=[project_id])
-    data = {
-        'username_or_email': 'guest@example.com',
-        'role': membership_role
-    }
-    response = client.post(url, data)
-
-    assert not Invite.objects.exclude(id__in=excluded_invite_ids).exists()
-    assert len(mail.outbox) == 0
-
-    if project_id in add_membership_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('membership_role', membership_roles)
-def test_membership_create_post_silent(db, client, username, password, membership_role):
-    client.login(username=username, password=password)
-
-    project_id = 1
-    url = reverse('membership_create', args=[project_id])
-    data = {
-        'username_or_email': 'user',
-        'role': membership_role,
-        'silent': True
-    }
-    response = client.post(url, data)
-
-    if project_id in add_membership_permission_map.get(username, []):
-        assert response.status_code == 302
-
-        if username == 'site':
-            assert not Invite.objects.exclude(id__in=excluded_invite_ids).exists()
-            assert Membership.objects.get(project_id=project_id, user__username='user', role=membership_role)
-            assert len(mail.outbox) == 0
-        else:
-            assert Invite.objects.get(project_id=project_id, user__username='user',
-                                      email='user@example.com', role=membership_role)
-            assert not Membership.objects.filter(project_id=project_id, user__username='user',
-                                                 role=membership_role).exists()
-            assert len(mail.outbox) == 1
-
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_id', memberships)
-def test_membership_update_get(db, client, username, password, project_id, membership_id):
-    client.login(username=username, password=password)
-    membership = Membership.objects.filter(project_id=project_id, id=membership_id).first()
-
-    url = reverse('membership_update', args=[project_id, membership_id])
-    response = client.get(url)
-
-    if membership:
-        if project_id in change_membership_permission_map.get(username, []):
-            assert response.status_code == 200
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_id', memberships)
-@pytest.mark.parametrize('membership_role', membership_roles)
-def test_membership_update_post(db, client, username, password, project_id, membership_id, membership_role):
-    client.login(username=username, password=password)
-    membership = Membership.objects.filter(project_id=project_id, id=membership_id).first()
-
-    url = reverse('membership_update', args=[project_id, membership_id])
-    data = {
-        'role': membership_role
-    }
-    response = client.post(url, data)
-
-    if membership:
-        if project_id in change_membership_permission_map.get(username, []):
-            assert response.status_code == 302
-            assert Membership.objects.get(project_id=project_id, id=membership_id).role == membership_role
-
-        else:
-            if password:
-                assert response.status_code == 403
-            else:
-                assert response.status_code == 302
-
-            assert Membership.objects.get(project_id=project_id, id=membership_id).role == membership.role
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_id', memberships)
-def test_membership_delete_get(db, client, username, password, project_id, membership_id):
-    client.login(username=username, password=password)
-    membership = Membership.objects.filter(project_id=project_id, id=membership_id).first()
-
-    url = reverse('membership_delete', args=[project_id, membership_id])
-    response = client.get(url)
-
-    if membership:
-        if project_id in delete_membership_permission_map.get(username, []):
-            assert response.status_code == 200
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_id', memberships)
-def test_membership_delete_post(db, client, mocker, username, password, project_id, membership_id):
-    client.login(username=username, password=password)
-    membership = Membership.objects.filter(project_id=project_id, id=membership_id).first()
-
-    url = reverse('membership_delete', args=[project_id, membership_id])
-    response = client.post(url)
-
-    if membership:
-        if project_id in delete_membership_permission_map.get(username, []):
-            if membership.user.username == 'owner':
-                assert response.status_code == 400
-            else:
-                assert response.status_code == 302
-                assert not Membership.objects.filter(project_id=project_id, id=membership_id).first()
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
diff --git a/rdmo/projects/tests/test_view_membership_multisite.py b/rdmo/projects/tests/test_view_membership_multisite.py
deleted file mode 100644
index 50c1aea729..0000000000
--- a/rdmo/projects/tests/test_view_membership_multisite.py
+++ /dev/null
@@ -1,107 +0,0 @@
-import pytest
-
-from django.contrib.auth import get_user_model
-from django.contrib.sites.models import Site
-from django.core import mail
-from django.urls import reverse
-
-from ..models import Invite, Project
-from ..utils import get_invite_email_project_path
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-add_membership_permission_map = {
-    'owner': [1, 2, 3, 4, 5],
-    'api': [1, 2, 3, 4, 5],
-    'site': [1, 2, 3, 4, 5]
-}
-
-projects = [1, 2, 3, 4, 5]
-memberships = [1, 2, 3, 4]
-
-membership_roles = ('owner', 'manager', 'author', 'guest')
-
-sites_domains = ('example.com', 'foo.com', 'bar.com')
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_role', membership_roles)
-@pytest.mark.parametrize('site_domain', sites_domains)
-def test_get_invite_email_project_path_function(db, client, settings, username, password, project_id,
-                                                membership_role, site_domain):
-    settings.MULTISITE = True
-
-    client.login(username=username, password=password)
-
-    current_site = Site.objects.get_current()
-    foo_site, _ = Site.objects.get_or_create(domain=site_domain, name=site_domain)
-    foo_username = f'{site_domain}-test-user'
-    foo_email = f'{foo_username}@{site_domain}'
-    foo_user, _ = get_user_model().objects.get_or_create(username=foo_username, email=foo_email,
-                                                                password=foo_username)
-    foo_user.role.member.set([foo_site])
-    project = Project.objects.get(pk=project_id)
-
-    invite = Invite(project=project, user=foo_user, role=membership_role)
-    invite.make_token()
-    invite.save()
-
-    invite_email_project_path = get_invite_email_project_path(invite)
-    if current_site.domain == site_domain:
-        assert invite_email_project_path.startswith('/projects')
-    else:
-        assert invite_email_project_path.startswith('http://' + site_domain + '/projects')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('membership_role', membership_roles)
-@pytest.mark.parametrize('site_domain', sites_domains)
-def test_invite_email_project_path_email_body(db, client, settings, username, password, project_id,
-                                              membership_role, site_domain):
-    settings.MULTISITE = True
-
-    client.login(username=username, password=password)
-
-    current_site = Site.objects.get_current()
-    foo_site, _ = Site.objects.get_or_create(domain=site_domain, name=site_domain)
-    foo_username = f'{site_domain}-user'
-    foo_email = f'{foo_username}@{site_domain}'
-    foo_user, _ = get_user_model().objects.get_or_create(username=f'{site_domain}-user', email=foo_email,
-                                                                password=foo_username)
-    foo_user.role.member.set([foo_site])
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('membership_create', args=[project_id])
-    data = {
-        'username_or_email': foo_email,
-        'role': membership_role
-    }
-    response = client.post(url, data)
-
-    invite = Invite(project=project, user=foo_user, role=membership_role)
-    invite.make_token()
-    invite.save()
-
-    if project_id in add_membership_permission_map.get(username, []):
-        if current_site.domain == site_domain:
-            assert 'http://testserver/' in mail.outbox[0].body
-        else:
-            assert f'http://{foo_site.domain}/' in mail.outbox[0].body
-
-        assert response.status_code == 302
-        assert len(mail.outbox) == 1
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-        assert len(mail.outbox) == 0
diff --git a/rdmo/projects/tests/test_view_project.py b/rdmo/projects/tests/test_view_project.py
deleted file mode 100644
index 7c53f4f234..0000000000
--- a/rdmo/projects/tests/test_view_project.py
+++ /dev/null
@@ -1,895 +0,0 @@
-import re
-
-import pytest
-
-from django.contrib.auth.models import Group, User
-from django.urls import resolve, reverse
-
-from rdmo.questions.models import Catalog
-from rdmo.tasks.models import Task
-from rdmo.views.models import View
-
-from ..forms import CatalogChoiceField
-from ..models import Project
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('editor', 'editor'),
-    ('reviewer', 'reviewer'),
-    ('api', 'api'),
-    ('site', 'site'),
-    ('anonymous', None)
-)
-
-view_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10, 12],
-    'manager': [1, 3, 5, 7, 12],
-    'author': [1, 3, 5, 8, 12],
-    'guest': [1, 3, 5, 9, 12],
-    'user': [12],
-    'editor': [12],
-    'reviewer': [12],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
-}
-
-change_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10, 12],
-    'manager': [1, 3, 5, 7],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
-}
-
-delete_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10, 12],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-}
-
-export_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10, 12],
-    'manager': [1, 3, 5, 7],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-}
-
-projects = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
-
-export_formats = ('html', )
-
-site_id = 1
-project_id = 1
-parent_id = 3
-parent_ancestors = [2, 3]
-catalog_id = 1
-view_id = 1
-task_id = 1
-
-@pytest.mark.parametrize('username,password', users)
-def test_list(db, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('projects')
-    response = client.get(url)
-
-    projects = re.findall(r'/projects/(\d+)/', response.content.decode())
-
-    if password:
-        assert response.status_code == 200
-        # assertTemplateUsed(response, 'projects/projects.html')
-
-        if username in ('site', 'api'):
-            assert projects == []
-            # assert response.context['number_of_projects'] == len([])
-            # assertContains(response, 'View all projects on')
-        else:
-            # user_projects_map = view_project_permission_map.get(username, [])
-            assert sorted(set(map(int, projects))) == []
-            # assert response.context['number_of_projects'] == len(user_projects_map)
-            # assertNotContains(response, 'View all projects on')
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_detail(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-
-    if project_id in view_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_get(db, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_create')
-    response = client.get(url)
-
-    if password:
-        assert response.status_code == 200
-
-        # check the parent select dropdown
-        for project_id in re.findall(r'<option value="(\d+)"', response.content.decode()):
-            assert int(project_id) in view_project_permission_map.get(username, [])
-    else:
-        assert response.status_code == 302
-
-
-def test_project_create_restricted_get(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-    settings.PROJECT_CREATE_GROUPS = ['projects']
-
-    group = Group.objects.create(name='projects')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create')
-    response = client.get(url)
-
-    assert response.status_code == 200
-
-
-def test_project_create_forbidden_get(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create')
-    response = client.get(url)
-
-    assert response.status_code == 403
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_get_for_extra_users_and_unavailable_catalogs(db, client, username, password):
-    client.login(username=username, password=password)
-
-    Catalog.objects.create(
-        uri_prefix='https://experimental.com/terms',
-        uri_path='unavailable-1',
-        order=1,
-        title_lang1='New Catalog 1',
-        title_lang2='Neuer Katalog 1',
-        help_lang1='Help text',
-        help_lang2='Hilfe Text',
-        available=False
-    )
-
-    Catalog.objects.create(
-        uri_prefix='https://experimental.com/terms',
-        uri_path='unavailable-2',
-        order=2,
-        title_lang1='New Catalog 2',
-        title_lang2='Neuer Katalog 2',
-        help_lang1='Help text',
-        help_lang2='Hilfe Text',
-        available=False
-    )
-
-    url = reverse('project_create')
-    response = client.get(url)
-
-    if password:
-        assert response.status_code == 200
-        # check the catalogs that are displayed in the form
-        find_catalog_ids = re.findall(r'id="id_catalog_(\d+)', response.content.decode())
-        catalogs_in_form = response.context_data['form'].fields['catalog'].queryset
-        assert find_catalog_ids == list(map(str, range(catalogs_in_form.count())))
-
-        # check the unavailable catalogs that are displayed in the form
-        # should happen only for users that can see unavailable catalogs (editors, api,..)
-        for unavailable_catalog in catalogs_in_form.filter(available=False):
-            _label = unavailable_catalog.title + CatalogChoiceField._unavailable_icon
-            assert _label in response.content.decode()
-
-        # check the parent select dropdown
-        for project_id in re.findall(r'<option value="(\d+)"', response.content.decode()):
-            assert int(project_id) in view_project_permission_map.get(username, [])
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_post(db, client, username, password):
-    client.login(username=username, password=password)
-    project_count = Project.objects.count()
-
-    url = reverse('project_create')
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    if password:
-        assert response.status_code == 302
-        assert Project.objects.count() == project_count + 1
-    else:
-        assert response.status_code == 302
-        assert Project.objects.count() == project_count
-
-
-def test_project_create_post_restricted(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-    settings.PROJECT_CREATE_GROUPS = ['projects']
-
-    group = Group.objects.create(name='projects')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create')
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-
-def test_project_create_post_forbidden(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create')
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 403
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_parent_post(db, client, username, password):
-    client.login(username=username, password=password)
-    project_count = Project.objects.count()
-
-    url = reverse('project_create')
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id,
-        'parent': project_id
-    }
-    response = client.post(url, data)
-
-    if username in ('user', 'editor', 'reviewer'):
-        assert response.status_code == 200
-        assert Project.objects.count() == project_count
-    elif password:
-        assert response.status_code == 302
-        assert Project.objects.count() == project_count + 1
-    else:
-        assert response.status_code == 302
-        assert Project.objects.count() == project_count
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('sync', [True, False])
-def test_project_create_post_tasks(db, client, settings, username, password, sync):
-    settings.PROJECT_TASKS_SYNC = sync
-
-    client.login(username=username, password=password)
-
-    task = Task.objects.get(id=task_id)
-    task.available = False
-    task.save()
-
-    url = reverse('project_create')
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    if password:
-        project = Project.objects.get(id=resolve(response.url).kwargs.get('pk'))
-
-        if username in ('editor', 'reviewer', 'api'):
-            available_tasks = Task.objects.filter(sites=site_id)
-        else:
-            available_tasks = Task.objects.filter(sites=site_id).exclude(id=task_id)
-
-        assert {t.id for t in available_tasks} == {t.id for t in project.tasks.all()}
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('sync', [True, False])
-def test_project_create_post_views(db, client, settings, username, password, sync):
-    settings.PROJECT_VIEWS_SYNC = sync
-
-    client.login(username=username, password=password)
-
-    view = View.objects.get(id=view_id)
-    view.available = False
-    view.save()
-
-    url = reverse('project_create')
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    if password:
-        project = Project.objects.get(id=resolve(response.url).kwargs.get('pk'))
-
-        if username in ('editor', 'reviewer', 'api'):
-            available_views = View.objects.filter(sites=site_id)
-        else:
-            available_views = View.objects.filter(sites=site_id).exclude(id=view_id)
-
-        assert {v.id for v in available_views} == {v.id for v in project.views.all()}
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update', args=[project_id])
-    response = client.get(url)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_post(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('project_update', args=[project_id])
-    data = {
-        'title': 'New title',
-        'description': project.description,
-        'catalog': project.catalog.pk
-    }
-    response = client.post(url, data)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert Project.objects.get(pk=project_id).title == 'New title'
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Project.objects.get(pk=project_id).title == project.title
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_post_parent(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('project_update', args=[project_id])
-    data = {
-        'title': project.title,
-        'description': project.description,
-        'catalog': project.catalog.pk,
-        'parent': parent_id
-    }
-    response = client.post(url, data)
-
-    if project_id in change_project_permission_map.get(username, []):
-        if parent_id in view_project_permission_map.get(username, []):
-            if project_id in parent_ancestors:
-                assert response.status_code == 200
-                assert Project.objects.get(pk=project_id).parent == project.parent
-            else:
-                assert response.status_code == 302
-                assert Project.objects.get(pk=project_id).parent_id == parent_id
-        else:
-            assert response.status_code == 200
-            assert Project.objects.get(pk=project_id).parent == project.parent
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Project.objects.get(pk=project_id).parent == project.parent
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_information_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_information', args=[project_id])
-    response = client.get(url)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_information_post(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('project_update_information', args=[project_id])
-    data = {
-        'title': 'Lorem ipsum dolor sit amet',
-        'description': 'At vero eos et accusam et justo duo dolores et ea rebum.'
-    }
-    response = client.post(url, data)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert Project.objects.get(pk=project_id).title == 'Lorem ipsum dolor sit amet'
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Project.objects.get(pk=project_id).title == project.title
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_catalog_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_catalog', args=[project_id])
-    response = client.get(url)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_catalog_post(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('project_update_catalog', args=[project_id])
-    data = {
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert Project.objects.get(pk=project_id).catalog_id == catalog_id
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Project.objects.get(pk=project_id).catalog == project.catalog
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_tasks_get(db, client, settings, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_tasks', args=[project_id])
-    response = client.get(url)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-def test_project_update_tasks_get_not_allowed(db, client, settings):
-    settings.PROJECT_TASKS_SYNC = True
-
-    client.login(username='owner', password='owner')
-
-    url = reverse('project_update_tasks', args=[project_id])
-    data = {
-        'tasks': [1]
-    }
-    response = client.get(url, data)
-
-    assert response.status_code == 404
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_tasks_post(db, client, settings, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('project_update_tasks', args=[project_id])
-    data = {
-        'tasks': []
-    }
-    response = client.post(url, data)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert list(Project.objects.get(pk=project_id).tasks.values('id')) == []
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert list(Project.objects.get(pk=project_id).tasks.values('id')) == list(project.tasks.values('id'))
-
-
-def test_project_update_tasks_post_not_allowed(db, client, settings):
-    settings.PROJECT_TASKS_SYNC = True
-
-    client.login(username='owner', password='owner')
-
-    url = reverse('project_update_tasks', args=[project_id])
-    data = {
-        'tasks': [1]
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_views_get(db, client, settings, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_views', args=[project_id])
-    response = client.get(url)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-def test_project_update_views_get_not_allowed(db, client, settings):
-    settings.PROJECT_VIEWS_SYNC = True
-
-    client.login(username='owner', password='owner')
-
-    url = reverse('project_update_views', args=[project_id])
-    data = {
-        'tasks': [1]
-    }
-    response = client.get(url, data)
-
-    assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_views_post(db, client, settings, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('project_update_views', args=[project_id])
-    data = {
-        'views': []
-    }
-    response = client.post(url, data)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert list(Project.objects.get(pk=project_id).views.values('id')) == []
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert list(Project.objects.get(pk=project_id).views.values('id')) == list(project.views.values('id'))
-
-
-def test_project_update_views_post_not_allowed(db, client, settings):
-    settings.PROJECT_VIEWS_SYNC = True
-
-    client.login(username='owner', password='owner')
-
-    url = reverse('project_update_views', args=[project_id])
-    data = {
-        'tasks': [1]
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 404
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_parent_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_parent', args=[project_id])
-    response = client.get(url)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_parent_post(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('project_update_parent', args=[project_id])
-    data = {
-        'parent': parent_id
-    }
-    response = client.post(url, data)
-
-    if project_id in change_project_permission_map.get(username, []):
-        if parent_id in view_project_permission_map.get(username, []):
-            if project_id in parent_ancestors:
-                assert response.status_code == 200
-                assert Project.objects.get(pk=project_id).parent == project.parent
-            else:
-                assert response.status_code == 302
-                assert Project.objects.get(pk=project_id).parent_id == parent_id
-        else:
-            assert response.status_code == 200
-            assert Project.objects.get(pk=project_id).parent == project.parent
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Project.objects.get(pk=project_id).parent == project.parent
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_delete_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_delete', args=[project_id])
-    response = client.get(url)
-
-    if project_id in delete_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_delete_post(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_delete', args=[project_id])
-    response = client.post(url)
-
-    if project_id in delete_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert not Project.objects.filter(pk=project_id).first()
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Project.objects.filter(pk=project_id).first()
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_export_xml(db, client, files, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_export', args=[project_id, 'xml'])
-    response = client.get(url)
-
-    if project_id in export_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_export_csv(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_export', args=[project_id, 'csvcomma'])
-    response = client.get(url)
-
-    if project_id in export_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_export_csvsemicolon(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_export', args=[project_id, 'csvsemicolon'])
-    response = client.get(url)
-
-    if project_id in export_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_export_json(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_export', args=[project_id, 'json'])
-    response = client.get(url)
-
-    if project_id in export_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_answers(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_answers', args=[project_id])
-    response = client.get(url)
-
-    if project_id in view_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('export_format', export_formats)
-def test_project_answers_export(db, client, username, password, project_id, export_format):
-    client.login(username=username, password=password)
-
-    url = reverse('project_answers_export', args=[project_id, export_format])
-    response = client.get(url)
-
-    if project_id in view_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_view(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-    project_views = Project.objects.get(pk=project_id).views.all()
-
-    for view in View.objects.all():
-        url = reverse('project_view', args=[project_id, view.id])
-        response = client.get(url)
-
-        if project_id in view_project_permission_map.get(username, []):
-            if view in project_views:
-                assert response.status_code == 200
-            else:
-                assert response.status_code == 404
-        else:
-            if password:
-                assert response.status_code == 403
-            else:
-                assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('export_format', export_formats)
-def test_project_view_export(db, client, username, password, project_id, export_format, files):
-    client.login(username=username, password=password)
-    project_views = Project.objects.get(pk=project_id).views.all()
-
-    for view in View.objects.all():
-        url = reverse('project_view_export', args=[project_id, view.pk, export_format])
-        response = client.get(url)
-
-        if project_id in view_project_permission_map.get(username, []):
-            if view in project_views:
-                assert response.status_code == 200
-            else:
-                assert response.status_code == 404
-        else:
-            if password:
-                assert response.status_code == 403
-            else:
-                assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_error(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_error', args=[project_id])
-    response = client.get(url)
-
-    if project_id in view_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
diff --git a/rdmo/projects/tests/test_view_project_copy.py b/rdmo/projects/tests/test_view_project_copy.py
deleted file mode 100644
index 8ecec135da..0000000000
--- a/rdmo/projects/tests/test_view_project_copy.py
+++ /dev/null
@@ -1,207 +0,0 @@
-import pytest
-
-from django.contrib.auth.models import Group, User
-from django.urls import reverse
-
-from ..models import Project, Snapshot, Value
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-    ('editor', 'editor'),
-    ('reviewer', 'reviewer'),
-    ('api', 'api'),
-)
-
-view_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10],
-    'manager': [1, 3, 5, 7],
-    'author': [1, 3, 5, 8],
-    'guest': [1, 3, 5, 9],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
-}
-
-change_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10],
-    'manager': [1, 3, 5, 7],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
-}
-
-delete_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-}
-
-export_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 10],
-    'manager': [1, 3, 5, 7],
-    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-}
-
-projects = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-
-project_id = 1
-site_id = 1
-parent_id = 1
-catalog_id = 1
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_copy_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_copy', args=[project_id])
-    response = client.get(url)
-
-    if project_id in view_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-def test_project_copy_restricted_get(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-    settings.PROJECT_CREATE_GROUPS = ['projects']
-
-    group = Group.objects.create(name='projects')
-    guest = User.objects.get(username='guest')
-    guest.groups.add(group)
-
-    client.login(username='guest', password='guest')
-
-    url = reverse('project_copy', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-
-
-def test_project_copy_forbidden_get(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-
-    client.login(username='guest', password='guest')
-
-    url = reverse('project_copy', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 403
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_copy_post(db, files, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    project_count = Project.objects.count()
-    snapshot_count = Snapshot.objects.count()
-    value_count = Value.objects.count()
-
-    project = Project.objects.get(id=project_id)
-    project_snapshots_count = project.snapshots.count()
-    project_values_count = project.values.count()
-
-    url = reverse('project_copy', args=[project_id])
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    if project_id in view_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert Project.objects.count() == project_count + 1
-        assert Snapshot.objects.count() == snapshot_count + project_snapshots_count
-        assert Value.objects.count() == value_count + project_values_count
-    else:
-        assert response.status_code == 403 if password else 302
-        assert Project.objects.count() == project_count
-        assert Value.objects.count() == value_count
-
-
-def test_project_copy_post_restricted(db, files, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-    settings.PROJECT_CREATE_GROUPS = ['projects']
-
-    group = Group.objects.create(name='projects')
-    guest = User.objects.get(username='guest')
-    guest.groups.add(group)
-
-    client.login(username='guest', password='guest')
-
-    url = reverse('project_copy', args=[project_id])
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-
-def test_project_copy_post_forbidden(db, files, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-
-    client.login(username='guest', password='guest')
-
-    url = reverse('project_copy', args=[project_id])
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 403
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_copy_parent_post(db, files, client, username, password, project_id):
-    client.login(username=username, password=password)
-    project_count = Project.objects.count()
-
-    project_count = Project.objects.count()
-    snapshot_count = Snapshot.objects.count()
-    value_count = Value.objects.count()
-
-    project = Project.objects.get(id=project_id)
-    project_snapshots_count = project.snapshots.count()
-    project_values_count = project.values.count()
-
-    url = reverse('project_copy', args=[project_id])
-    data = {
-        'title': 'A new project',
-        'description': 'Some description',
-        'catalog': catalog_id,
-        'parent': parent_id
-    }
-    response = client.post(url, data)
-
-    if project_id in view_project_permission_map.get(username, []):
-        if parent_id in view_project_permission_map.get(username, []):
-            assert response.status_code == 302
-            assert Project.objects.count() == project_count + 1
-            assert Snapshot.objects.count() == snapshot_count + project_snapshots_count
-            assert Value.objects.count() == value_count + project_values_count
-        else:
-            assert response.status_code == 200
-            assert Project.objects.count() == project_count
-            assert Value.objects.count() == value_count
-    else:
-        assert response.status_code == 403 if password else 302
-        assert Project.objects.count() == project_count
-        assert Value.objects.count() == value_count
diff --git a/rdmo/projects/tests/test_view_project_create_import.py b/rdmo/projects/tests/test_view_project_create_import.py
deleted file mode 100644
index 123a7cb708..0000000000
--- a/rdmo/projects/tests/test_view_project_create_import.py
+++ /dev/null
@@ -1,359 +0,0 @@
-import os
-import re
-from pathlib import Path
-
-import pytest
-
-from django.contrib.auth.models import Group, User
-from django.urls import reverse
-
-from rdmo.core.constants import VALUE_TYPE_FILE
-
-from ..models import Project, Value
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-change_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5],
-    'manager': [1, 3, 5],
-    'api': [1, 2, 3, 4, 5],
-    'site': [1, 2, 3, 4, 5]
-}
-
-projects = [1, 2, 3, 4, 5]
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_get(db, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_create_import')
-    response = client.get(url)
-    if password:
-        assert response.status_code == 400
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-def test_project_create_import_get_restricted(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-    settings.PROJECT_CREATE_GROUPS = ['projects']
-
-    group = Group.objects.create(name='projects')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create_import')
-    response = client.get(url)
-    assert response.status_code == 400
-
-
-def test_project_create_import_get_forbidden(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create_import')
-    response = client.get(url)
-    assert response.status_code == 403
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_empty(db, settings, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_create_import')
-    response = client.post(url)
-
-    if password:
-        assert response.status_code == 404
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_upload_file(db, settings, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_create_import')
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if password:
-        assert response.status_code == 302
-        assert response.url.startswith('/projects/import/')
-
-        # follow the redirect to the import form
-        response = client.get(response.url)
-        assert response.status_code == 200
-        assert b'Create project from project.xml' in response.content
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_upload_file_error(db, settings, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_create_import')
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'error.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if password:
-        assert response.status_code == 302
-        assert response.url.startswith('/projects/import/')
-
-        # follow the redirect to the import form
-        response = client.get(response.url)
-        assert response.status_code == 400
-        assert b'Files of this type cannot be imported.' in response.content
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_upload_file_empty(db, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_create_import')
-    response = client.post(url, {
-        'method': 'upload_file'
-    })
-    if password:
-        assert response.status_code == 400
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-def test_project_create_import_post_upload_file_restricted(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-    settings.PROJECT_CREATE_GROUPS = ['projects']
-
-    group = Group.objects.create(name='projects')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create_import')
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-    assert response.status_code == 302
-
-
-def test_project_create_import_post_upload_file_forbidden(db, client, settings):
-    settings.PROJECT_CREATE_RESTRICTED = True
-
-    client.login(username='user', password='user')
-
-    url = reverse('project_create_import')
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-    assert response.status_code == 403
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_import_file(db, settings, client, files, username, password):
-    client.login(username=username, password=password)
-    projects_count = Project.objects.count()
-
-    # upload file
-    url = reverse('project_create_import')
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if password:
-        assert response.status_code == 302
-        assert response.url.startswith('/projects/import/')
-
-        # follow the redirect to the import form
-        response = client.get(response.url)
-
-        assert response.status_code == 200
-
-        # get keys from the response
-        keys = re.findall(r'name=\"(http.*?)\"', response.content.decode())
-
-        # import file
-        data = {key: ['on'] for key in keys}
-        data.update({'method': 'import_file'})
-        response = client.post(url, data)
-
-        # check if all the files are where are supposed to be
-        for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-            assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-        # assert that the project exists and that there are values
-        if password:
-            project = Project.objects.order_by('updated').last()
-            assert response.status_code == 302
-            assert response.url == f'/projects/{project.pk}/'
-
-            # a new project, new values values
-            assert Project.objects.count() == projects_count + 1
-            assert project.values.count() > 0
-        else:
-            assert response.status_code == 302
-            assert response.url.startswith('/account/login/')
-
-            # no new project was created
-            assert Project.objects.count() == projects_count
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_import_file_cancel(db, settings, client, files, username, password):
-    client.login(username=username, password=password)
-    projects_count = Project.objects.count()
-
-    # upload file
-    url = reverse('project_create_import')
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if password:
-        assert response.status_code == 302
-        assert response.url.startswith('/projects/import/')
-
-        # follow the redirect to the import form
-        response = client.get(response.url)
-
-        assert response.status_code == 200
-
-        # get keys from the response
-        keys = re.findall(r'name=\"(http.*?)\"', response.content.decode())
-
-        # import file
-        data = {key: ['on'] for key in keys}
-        data.update({'method': 'import_file', 'cancel': 'Cancel'})
-        response = client.post(url, data)
-
-        # check if all the files are where are supposed to be
-        for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-            assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-        # assert that the project exists, but that there are not values
-        if password:
-            assert response.status_code == 302
-            assert response.url == '/projects/'
-
-            # no new project
-            assert Project.objects.count() == projects_count
-        else:
-            assert response.status_code == 302
-            assert response.url.startswith('/account/login/')
-
-            # no new project was created
-            assert Project.objects.count() == projects_count
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_import_empty(db, settings, files, client, username, password):
-    client.login(username=username, password=password)
-    projects_count = Project.objects.count()
-
-    # upload file
-    url = reverse('project_create_import')
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if password:
-        assert response.status_code == 302
-        assert response.url.startswith('/projects/import/')
-
-        # follow the redirect to the import form, this will set import_key in the session
-        response = client.get(response.url)
-
-        assert response.status_code == 200
-
-        # post the form empty
-        response = client.post(url, {
-            'method': 'import_file'
-        })
-
-        # check if all the files are where are supposed to be
-        for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-            assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-        # assert that the project exists, but that there are not values
-        if password:
-            new_project = Project.objects.order_by('updated').last()
-            assert response.status_code == 302
-            assert response.url == f'/projects/{new_project.id}/'
-
-            # a new project, but no values
-            assert Project.objects.count() == projects_count + 1
-            assert new_project.values.count() == 0
-        else:
-            assert response.status_code == 302
-            assert response.url.startswith('/account/login/')
-
-            # no new project was created
-            assert Project.objects.count() == projects_count
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_import_post_import_project(db, settings, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_create_import')
-    response = client.post(url, {
-        'method': 'import_project'
-    })
-
-    if password:
-        assert response.status_code == 404
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
diff --git a/rdmo/projects/tests/test_view_project_leave.py b/rdmo/projects/tests/test_view_project_leave.py
deleted file mode 100644
index b26360d995..0000000000
--- a/rdmo/projects/tests/test_view_project_leave.py
+++ /dev/null
@@ -1,145 +0,0 @@
-import pytest
-
-from django.urls import reverse
-
-from ..models import Membership
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-leave_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 12],
-    'manager': [1, 3],
-    'author': [1, 3],
-    'guest': [1, 3]
-}
-
-projects = [1, 2, 3, 4, 5, 12]
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_leave_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_leave', args=[project_id])
-    response = client.get(url)
-
-    if project_id in leave_project_permission_map.get(username, []):
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_leave_post(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    # add additional owner, so that the owner can leave
-    Membership.objects.create(user_id=1, project_id=project_id, role='owner')
-
-    # store if the membership exists
-    membership_existed = Membership.objects.filter(project_id=project_id, user__username=username).exists()
-
-    url = reverse('project_leave', args=[project_id])
-    response = client.post(url)
-
-    if project_id in leave_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        if membership_existed:
-            assert not Membership.objects.filter(project_id=project_id, user__username=username).exists()
-    else:
-        if membership_existed:
-            assert Membership.objects.filter(project_id=project_id, user__username=username).exists()
-
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_leave_post_last_owner(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    # store if the membership exists
-    membership_existed = Membership.objects.filter(project_id=project_id, user__username=username).exists()
-
-    url = reverse('project_leave', args=[project_id])
-    response = client.post(url)
-
-    if project_id in leave_project_permission_map.get(username, []):
-        assert response.status_code == 302
-
-        if username == 'owner':
-            if membership_existed:
-                assert Membership.objects.filter(project_id=project_id, user__username=username).exists()
-        else:
-            if membership_existed:
-                assert not Membership.objects.filter(project_id=project_id, user__username=username).exists()
-    else:
-        if membership_existed:
-            assert Membership.objects.filter(project_id=project_id, user__username=username).exists()
-
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_leave_post_cancel(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    # add additional owner, so that the owner can leave
-    Membership.objects.create(user_id=1, project_id=project_id, role='owner')
-
-    # store if the membership exists
-    membership_existed = Membership.objects.filter(project_id=project_id, user__username=username).exists()
-
-    url = reverse('project_leave', args=[project_id])
-    response = client.post(url, {'cancel': True})
-
-    if membership_existed:
-        assert Membership.objects.filter(project_id=project_id, user__username=username).exists()
-
-    if project_id in leave_project_permission_map.get(username, []):
-        assert response.status_code == 302
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-# @pytest.mark.parametrize('username,password', users)
-# @pytest.mark.parametrize('project_id', projects)
-# def test_project_leave_post(db, client, username, password, project_id):
-#     client.login(username=username, password=password)
-
-#     # add additional owner, so that the owner can leave
-#     Membership.objects.create(user_id=1, project_id=project_id, role='owner')
-
-#     url = reverse('project_leave', args=[project_id])
-#     response = client.post(url)
-
-#     if project_id in leave_project_permission_map.get(username, []):
-#         assert response.status_code == 302
-#         assert not Membership.objects.filter(project_id=project_id, user__username=username).exists()
-#     else:
-#         if password:
-#             assert response.status_code == 403
-#         else:
-#             assert response.status_code == 302
diff --git a/rdmo/projects/tests/test_view_project_update_import.py b/rdmo/projects/tests/test_view_project_update_import.py
deleted file mode 100644
index 6f99bd8331..0000000000
--- a/rdmo/projects/tests/test_view_project_update_import.py
+++ /dev/null
@@ -1,471 +0,0 @@
-import os
-import re
-from pathlib import Path
-
-import pytest
-
-from django.urls import reverse
-
-from rdmo.core.constants import VALUE_TYPE_FILE
-
-from ..models import Project, Value
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-view_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5],
-    'manager': [1, 3, 5],
-    'author': [1, 3, 5],
-    'guest': [1, 3, 5],
-    'api': [1, 2, 3, 4, 5],
-    'site': [1, 2, 3, 4, 5]
-}
-
-change_project_permission_map = {
-    'owner': [1, 2, 3, 4, 5],
-    'manager': [1, 3, 5],
-    'api': [1, 2, 3, 4, 5],
-    'site': [1, 2, 3, 4, 5]
-}
-
-projects = [1, 2, 3, 4, 5]
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_import', args=[project_id])
-    response = client.get(url)
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 400
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_error(db, settings, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_import', args=[project_id])
-    response = client.post(url, {
-        'method': 'wrong'
-    })
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 404
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_upload_file(db, settings, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_import', args=[project_id])
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-        if project_id in change_project_permission_map.get(username, []):
-            assert response.status_code == 302
-            assert response.url.startswith(f'/projects/{project_id}/import/')
-
-            # follow the redirect to the import form
-            response = client.get(response.url)
-            assert response.status_code == 200
-            assert b'Import from project.xml' in response.content
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-            assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_upload_file_error(db, settings, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_import', args=[project_id])
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'error.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert response.url.startswith(f'/projects/{project_id}/import/')
-
-        # follow the redirect to the import form
-        response = client.get(response.url)
-        assert response.status_code == 400
-        assert b'Files of this type cannot be imported.' in response.content
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_upload_file_empty(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_import', args=[project_id])
-    response = client.post(url, {
-        'method': 'upload_file'
-    })
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 400
-        assert b'There has been an error with your import.' in response.content
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_import_file(db, settings, client, files, username, password, project_id):
-    client.login(username=username, password=password)
-    projects_count = Project.objects.count()
-
-    project = Project.objects.get(pk=project_id)
-    project_updated = project.updated
-    project_snapshot_count = project.snapshots.count()
-    project_snapshot_values_count = project.values.filter(snapshot=None).count()
-    project_values_count = project.values.count()
-
-    # upload file
-    url = reverse('project_update_import', args=[project_id])
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url,  {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert response.url.startswith(f'/projects/{project_id}/import/')
-
-        # follow the redirect to the import form
-        response = client.get(response.url)
-
-        assert response.status_code == 200
-
-        # get keys from the response
-        keys = re.findall(r'name=\"(http.*?)\"', response.content.decode())
-
-        # import file
-        url = reverse('project_update_import', args=[project_id])
-        data = {key: ['on'] for key in keys}
-        data.update({'method': 'import_file'})
-        response = client.post(url, data)
-
-        # check if all the files are where are supposed to be
-        for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-            assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-        # no new project, snapshots, values were created
-        project = Project.objects.get(pk=project_id)
-
-        assert Project.objects.count() == projects_count
-        assert project.snapshots.count() == project_snapshot_count
-        if project_id == 1:
-            assert project.values.count() == project_values_count
-            assert project.values.filter(snapshot=None).count() == project_snapshot_values_count
-
-        assert project.updated == project_updated
-
-        if project_id in change_project_permission_map.get(username, []):
-            assert response.status_code == 302
-            assert response.url == f'/projects/{project_id}/'
-
-        else:
-            if password:
-                assert response.status_code == 403
-            else:
-                assert response.status_code == 302
-                assert response.url.startswith('/account/login/')
-
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_import_file_cancel(db, settings, client, files, username, password, project_id):
-    client.login(username=username, password=password)
-    projects_count = Project.objects.count()
-
-    project = Project.objects.get(pk=project_id)
-    project_updated = project.updated
-    project_snapshot_count = project.snapshots.count()
-    project_snapshot_values_count = project.values.filter(snapshot=None).count()
-    project_values_count = project.values.count()
-
-    # upload file
-    url = reverse('project_update_import', args=[project_id])
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url,  {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert response.url.startswith(f'/projects/{project_id}/import/')
-
-        # follow the redirect to the import form
-        response = client.get(response.url)
-
-        assert response.status_code == 200
-
-        # get keys from the response
-        keys = re.findall(r'name=\"(http.*?)\"', response.content.decode())
-
-        # import file
-        url = reverse('project_update_import', args=[project_id])
-        data = {key: ['on'] for key in keys}
-        data.update({'method': 'import_file', 'cancel': 'Cancel'})
-        response = client.post(url, data)
-
-        # check if all the files are where are supposed to be
-        for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-            assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-        # no new project, snapshots, values were created
-        project = Project.objects.get(pk=project_id)
-        assert Project.objects.count() == projects_count
-        assert project.snapshots.count() == project_snapshot_count
-        assert project.values.count() == project_values_count
-        assert project.values.filter(snapshot=None).count() == project_snapshot_values_count
-        assert project.updated == project_updated
-
-        assert response.status_code == 302
-        assert response.url == f'/projects/{project_id}/'
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_import_file_empty(db, settings, files, client, username, password, project_id):
-    client.login(username=username, password=password)
-    projects_count = Project.objects.count()
-
-    project = Project.objects.get(pk=project_id)
-    project_updated = project.updated
-    project_snapshot_count = project.snapshots.count()
-    project_snapshot_values_count = project.values.filter(snapshot=None).count()
-    project_values_count = project.values.count()
-
-    # upload file
-    url = reverse('project_update_import', args=[project_id])
-    xml_file = os.path.join(settings.BASE_DIR, 'xml', 'project.xml')
-    with open(xml_file, encoding='utf8') as f:
-        response = client.post(url, {
-            'method': 'upload_file',
-            'uploaded_file': f
-        })
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert response.url.startswith(f'/projects/{project_id}/import/')
-
-        # follow the redirect to the import form, this will set import_key in the session
-        response = client.get(response.url)
-
-        assert response.status_code == 200
-
-        # post the form empty
-        response = client.post(url, {
-            'method': 'import_file'
-        })
-
-        # check if all the files are where are supposed to be
-        for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-            assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-        # no new project, snapshots, values were created
-        project = Project.objects.get(pk=project_id)
-        assert Project.objects.count() == projects_count
-        assert project.snapshots.count() == project_snapshot_count
-        assert project.values.count() == project_values_count
-        assert project.values.filter(snapshot=None).count() == project_snapshot_values_count
-        assert project.updated == project_updated
-
-        assert response.status_code == 302
-        assert response.url == f'/projects/{project_id}/'
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('source_id', projects)
-def test_project_update_import_post_import_project_step1(db, settings, client, username, password,
-                                                         project_id, source_id):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_import', args=[project_id])
-    response = client.post(url, {
-        'method': 'import_project',
-        'source': source_id
-    })
-
-    if project_id in change_project_permission_map.get(username, []):
-        if source_id in view_project_permission_map.get(username, []):
-            assert response.status_code == 200
-        else:
-            assert response.status_code == 403
-
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('source_id', projects)
-def test_project_update_import_post_import_project_step2(db, settings, files, client, username, password,
-                                                         project_id, source_id):
-    client.login(username=username, password=password)
-    projects_count = Project.objects.count()
-
-    project = Project.objects.get(pk=project_id)
-    project_updated = project.updated
-    project_snapshot_count = project.snapshots.count()
-    project_snapshot_values_count = project.values.filter(snapshot=None).count()
-    project_values_count = project.values.count()
-
-    source = Project.objects.get(pk=source_id)
-    source_snapshot_count = source.snapshots.count()
-    source_snapshot_values_count = source.values.filter(snapshot=None).count()
-    source_values_count = source.values.count()
-
-    url = reverse('project_update_import', args=[project_id])
-    response = client.post(url, {
-        'method': 'import_project',
-        'source': source_id
-    })
-
-    if project_id in change_project_permission_map.get(username, []):
-        if source_id in view_project_permission_map.get(username, []):
-            assert response.status_code == 200
-
-            # get keys from the response
-            keys = re.findall(r'name=\"(http.*?)\"', response.content.decode())
-
-            # import file
-            url = reverse('project_update_import', args=[project_id])
-            data = {key: ['on'] for key in keys}
-            data.update({
-                'method': 'import_project',
-                'source': source_id
-            })
-            response = client.post(url, data)
-
-            # check if all the files are where are supposed to be
-            for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-                assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-            # no new project, snapshots, values were created
-            project = Project.objects.get(pk=project_id)
-            source = Project.objects.get(pk=source_id)
-
-            # no new project was created
-            assert Project.objects.count() == projects_count
-
-            # the project has the correct count of snapshot and values
-            assert project.snapshots.count() == project_snapshot_count
-            if project_id == 1:
-                assert project.values.count() == project_values_count
-                assert project.values.filter(snapshot=None).count() == project_snapshot_values_count
-
-            # the source project has the correct count of snapshot and values
-            assert source.snapshots.count() == source_snapshot_count
-            if source_id == 1:
-                assert source.values.count() == source_values_count
-                assert source.values.filter(snapshot=None).count() == source_snapshot_values_count
-
-            assert project.updated == project_updated
-
-            if project_id in change_project_permission_map.get(username, []):
-                assert response.status_code == 302
-                assert response.url == f'/projects/{project_id}/'
-
-            else:
-                if password:
-                    assert response.status_code == 403
-                else:
-                    assert response.status_code == 302
-                    assert response.url.startswith('/account/login/')
-        else:
-            assert response.status_code == 403
-
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_project_update_import_post_import_project_error(db, settings, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    # upload file
-    url = reverse('project_update_import', args=[project_id])
-    response = client.post(url, {
-        'method': 'import_project'
-    })
-
-    if project_id in change_project_permission_map.get(username, []):
-        assert response.status_code == 404
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-        assert response.url.startswith('/account/login/')
diff --git a/rdmo/projects/tests/test_view_project_update_visibility.py b/rdmo/projects/tests/test_view_project_update_visibility.py
deleted file mode 100644
index 0a26a5c541..0000000000
--- a/rdmo/projects/tests/test_view_project_update_visibility.py
+++ /dev/null
@@ -1,412 +0,0 @@
-import pytest
-
-from django.urls import reverse
-
-from ..models import Project, Visibility
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('user', 'user'),
-    ('editor', 'editor'),
-    ('reviewer', 'reviewer'),
-    ('api', 'api'),
-    ('site', 'site'),
-    ('anonymous', None)
-)
-
-
-project_id = 12
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_visibility_get(db, client, username, password):
-    client.login(username=username, password=password)
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.delete()
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    if username in ['admin', 'site', 'api']:
-        assert response.status_code == 200
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_create_visibility_post(db, client, username, password):
-    client.login(username=username, password=password)
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.delete()
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {}
-    response = client.post(url, data)
-
-    if username in ['admin', 'site', 'api']:
-        assert response.status_code == 302
-        assert Project.objects.get(pk=project_id).visibility
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        with pytest.raises(Visibility.DoesNotExist):
-            assert Project.objects.get(pk=project_id).visibility
-
-
-def test_project_create_visibility_get_create(db, client, settings):
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.delete()
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Make visible"' in response.content
-    assert b'value="Remove visibility"' not in response.content
-
-
-def test_project_create_visibility_get_remove(db, client, settings):
-    client.login(username='site', password='site')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Make visible"' not in response.content
-    assert b'value="Remove visibility"' in response.content
-
-
-def test_project_create_visibility_get_create_site(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.delete()
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Make visible"' in response.content
-    assert b'value="Remove visibility"' not in response.content
-
-
-def test_project_create_visibility_get_create_site_existing(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set([2, 3])
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Make visible for this site"' in response.content
-    assert b'value="Remove visibility"' not in response.content
-
-
-def test_project_create_visibility_get_remove_site(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Update visibility"' not in response.content
-    assert b'value="Remove visibility"' in response.content
-
-
-def test_project_create_visibility_get_update_site_group(db, client, settings):
-    settings.MULTISITE = True
-    settings.GROUPS = True
-
-    client.login(username='site', password='site')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Update visibility"' in response.content
-    assert b'value="Remove visibility"' in response.content
-
-
-def test_project_create_visibility_get_create_group(db, client, settings):
-    settings.GROUPS = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.delete()
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Make visible"' in response.content
-    assert b'value="Remove visibility"' not in response.content
-
-
-def test_project_create_visibility_get_remove_group(db, client, settings):
-    settings.GROUPS = True
-
-    client.login(username='site', password='site')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    response = client.get(url)
-
-    assert response.status_code == 200
-    assert b'value="Update visibility"' in response.content
-    assert b'value="Remove visibility"' in response.content
-
-
-def test_project_update_visibility_site_post_add(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set([])
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {}
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert [site.id for site in project.visibility.sites.all()] == [1]
-    assert not project.visibility.groups.exists()
-
-
-def test_project_update_visibility_site_post_add_double(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set([1])
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {}
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert [site.id for site in project.visibility.sites.all()] == [1]
-    assert not project.visibility.groups.exists()
-
-
-def test_project_update_visibility_site_post_add_additional(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set([2])
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {}
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert [site.id for site in project.visibility.sites.all()] == [1, 2]
-    assert not project.visibility.groups.exists()
-
-
-def test_project_update_visibility_site_post_remove(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set([1, 2, 3])
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'delete': 'true'
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert {site.id for site in project.visibility.sites.all()} == {2, 3}
-    assert not project.visibility.groups.exists()
-
-
-def test_project_update_visibility_site_post_remove_last(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set([1])
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'delete': 'true'
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    with pytest.raises(Visibility.DoesNotExist):
-        project.visibility  # noqa: B018
-
-
-def test_project_update_visibility_site_post_remove_empty(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set([])
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'delete': 'true'
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert {site.id for site in project.visibility.sites.all()} == {2, 3}
-    assert not project.visibility.groups.exists()
-
-
-def test_project_update_visibility_site_post_error(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='site', password='site')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'sites': [2]
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert [site.id for site in project.visibility.sites.all()] == [1]  # nothing changed
-    assert not project.visibility.groups.exists()
-
-
-def test_project_update_visibility_site_post_api(db, client, settings):
-    settings.MULTISITE = True
-
-    client.login(username='api', password='api')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'sites': [2]
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert [site.id for site in project.visibility.sites.all()] == [2]
-    assert not project.visibility.groups.exists()
-
-
-def test_project_update_visibility_group_post(db, client, settings):
-    settings.GROUPS = True
-
-    client.login(username='site', password='site')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'groups': [2]
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert [site.id for site in project.visibility.sites.all()] == [1]  # this site is in the fixture
-    assert [group.id for group in project.visibility.groups.all()] == [2]
-
-
-def test_project_update_visibility_site_group_post_api(db, client, settings):
-    settings.MULTISITE = True
-    settings.GROUPS = True
-
-    client.login(username='api', password='api')
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'sites': [2],
-        'groups': [2]
-    }
-    response = client.post(url, data)
-
-    assert response.status_code == 302
-
-    project = Project.objects.get(id=project_id)
-
-    assert project.visibility
-    assert [site.id for site in project.visibility.sites.all()] == [2]
-    assert [group.id for group in project.visibility.groups.all()] == [2]
-
-
-@pytest.mark.parametrize('username,password', users)
-def test_project_delete_visibility_post(db, client, username, password):
-    client.login(username=username, password=password)
-
-    url = reverse('project_update_visibility', args=[project_id])
-    data = {
-        'delete': 'some value'
-    }
-    response = client.post(url, data)
-
-    if username in ['admin', 'site', 'api']:
-        assert response.status_code == 302
-        with pytest.raises(Visibility.DoesNotExist):
-            assert Project.objects.get(pk=project_id).visibility
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert Project.objects.get(pk=project_id).visibility
diff --git a/rdmo/projects/tests/test_view_project_visibility.py b/rdmo/projects/tests/test_view_project_visibility.py
deleted file mode 100644
index 04b8c2a8c5..0000000000
--- a/rdmo/projects/tests/test_view_project_visibility.py
+++ /dev/null
@@ -1,147 +0,0 @@
-from django.contrib.auth.models import Group, User
-from django.contrib.sites.models import Site
-from django.urls import reverse
-
-from ..models import Project
-
-user_username = 'user'
-project_id = 12
-
-
-def test_detail_cleared(db, client):
-    client.login(username='user', password='user')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.clear()
-    project.visibility.groups.clear()
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 200
-
-
-def test_detail_deleted(db, client):
-    client.login(username='user', password='user')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.delete()
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 403
-
-
-def test_detail_site(db, client):
-    client.login(username='user', password='user')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set(Site.objects.filter(id=1))
-    project.visibility.groups.clear()
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 200
-
-
-def test_detail_multiple_sites(db, client):
-    client.login(username='user', password='user')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set(Site.objects.filter(id__in=[1, 2]))
-    project.visibility.groups.clear()
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 200
-
-
-def test_detail_site_forbidden(db, client):
-    client.login(username='user', password='user')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set(Site.objects.filter(id=2))
-    project.visibility.groups.clear()
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 403
-
-
-def test_detail_group(db, client):
-    client.login(username='user', password='user')
-
-    group = Group.objects.create(name='test')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.clear()
-    project.visibility.groups.add(group)
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 200
-
-
-def test_detail_multiple_groups(db, client):
-    client.login(username='user', password='user')
-
-    group = Group.objects.create(name='test')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.clear()
-    project.visibility.groups.set([
-        group, Group.objects.create(name='test2')
-    ])
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 200
-
-
-def test_detail_group_forbidden(db, client):
-    client.login(username='user', password='user')
-
-    group = Group.objects.create(name='test')
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.clear()
-    project.visibility.groups.set([group])
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 403
-
-
-def test_detail_site_group(db, client):
-    client.login(username='user', password='user')
-
-    group = Group.objects.create(name='test')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set(Site.objects.filter(id=1))
-    project.visibility.groups.set([group])
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 200
-
-
-def test_detail_site_group_forbidden(db, client):
-    client.login(username='user', password='user')
-
-    group = Group.objects.create(name='test')
-    user = User.objects.get(username='user')
-    user.groups.add(group)
-
-    project = Project.objects.get(id=project_id)
-    project.visibility.sites.set(Site.objects.filter(id=2))
-    project.visibility.groups.set([group])
-
-    url = reverse('project', args=[project_id])
-    response = client.get(url)
-    assert response.status_code == 403
diff --git a/rdmo/projects/tests/test_view_snapshot.py b/rdmo/projects/tests/test_view_snapshot.py
deleted file mode 100644
index dedb234929..0000000000
--- a/rdmo/projects/tests/test_view_snapshot.py
+++ /dev/null
@@ -1,229 +0,0 @@
-from pathlib import Path
-
-import pytest
-
-from django.conf import settings
-from django.urls import reverse
-
-from rdmo.core.constants import VALUE_TYPE_FILE
-
-from ..models import Project, Snapshot, Value
-
-users = (
-    ('owner', 'owner'),
-    ('manager', 'manager'),
-    ('author', 'author'),
-    ('guest', 'guest'),
-    ('api', 'api'),
-    ('site', 'site'),
-    ('anonymous', None),
-)
-
-add_snapshot_permission_map = change_snapshot_permission_map = rollback_snapshot_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 12],
-    'manager': [1, 3, 5],
-    'api': [1, 2, 3, 4, 5, 12],
-    'site': [1, 2, 3, 4, 5, 12]
-}
-
-export_snapshot_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 12],
-    'manager': [1, 3, 5, 12],
-    'api': [1, 2, 3, 4, 5, 12],
-    'site': [1, 2, 3, 4, 5, 12]
-}
-
-projects = [1, 2, 3, 4, 5, 12]
-snapshots = [1, 3, 7, 4, 5, 6]
-
-snapshots_project = 1
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_snapshot_create_get(db, client, username, password, project_id):
-    client.login(username=username, password=password)
-
-    url = reverse('snapshot_create', args=[project_id])
-    response = client.get(url)
-
-    if project_id in add_snapshot_permission_map.get(username, []):
-        assert response.status_code == 200
-    elif password:
-        assert response.status_code == 403
-    else:
-        assert response.status_code == 302
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-def test_snapshot_create_post(db, client, files, username, password, project_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    snapshot_count = project.snapshots.count()
-    values_count = project.values.count()
-    current_values_count = project.values.filter(snapshot=None).count()
-
-    url = reverse('snapshot_create', args=[project.id])
-    data = {
-        'title': 'A new snapshot',
-        'description': 'Some description'
-    }
-    response = client.post(url, data)
-
-    # check if all the files are where are supposed to be
-    for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-        assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-    if project.id in add_snapshot_permission_map.get(username, []):
-        assert response.status_code == 302
-        assert project.snapshots.count() == snapshot_count + 1
-        assert project.values.count() == values_count + current_values_count
-        for file_value in project.values.filter(value_type=VALUE_TYPE_FILE):
-            assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-    else:
-        if password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-
-        assert project.snapshots.count() == snapshot_count
-        assert project.values.count() == values_count
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('snapshot_id', snapshots)
-def test_snapshot_update_get(db, client, files, username, password, project_id, snapshot_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-
-    url = reverse('snapshot_update', args=[project_id, snapshot_id])
-    response = client.get(url)
-
-    # check if all the files are where are supposed to be
-    for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-        assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-    if snapshot_id in project.snapshots.values_list('id', flat=True):
-        if project_id in change_snapshot_permission_map.get(username, []):
-            assert response.status_code == 200
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('snapshot_id', snapshots)
-def test_snapshot_update_post(db, client, files, username, password, project_id, snapshot_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-    snapshot = Snapshot.objects.get(pk=snapshot_id)
-
-    snapshot_count = project.snapshots.count()
-    values_count = project.values.count()
-    values_files = [value.file.name for value in project.values.filter(value_type=VALUE_TYPE_FILE)]
-
-    url = reverse('snapshot_update', args=[project_id, snapshot_id])
-    data = {
-        'title': snapshot.title,
-        'description': snapshot.description
-    }
-    response = client.post(url, data)
-
-    # check if all the files are where are supposed to be
-    for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-        assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-    if snapshot_id in Project.objects.get(pk=project_id).snapshots.values_list('id', flat=True):
-        if project_id in change_snapshot_permission_map.get(username, []):
-            assert response.status_code == 302
-            for file_value in project.values.filter(value_type=VALUE_TYPE_FILE):
-                assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-    assert Project.objects.get(pk=project_id).snapshots.count() == snapshot_count
-    assert Project.objects.get(pk=project_id).values.count() == values_count
-    for file_value in values_files:
-        assert Path(settings.MEDIA_ROOT).joinpath(file_value).exists()
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('snapshot_id', snapshots)
-def test_snapshot_rollback_get(db, client, username, password, project_id, snapshot_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-    project_snapshots = list(project.snapshots.values_list('id', flat=True))
-
-    url = reverse('snapshot_rollback', args=[project_id, snapshot_id])
-    response = client.get(url)
-
-    if snapshot_id in project_snapshots:
-        if project_id in rollback_snapshot_permission_map.get(username, []):
-            assert response.status_code == 200
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('snapshot_id', snapshots)
-def test_snapshot_rollback_post(db, client, files, username, password, project_id, snapshot_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-    project_snapshots = list(project.snapshots.values_list('id', flat=True))
-
-    url = reverse('snapshot_rollback', args=[project_id, snapshot_id])
-    response = client.post(url)
-
-    # check if all the files are where are supposed to be
-    for file_value in Value.objects.filter(value_type=VALUE_TYPE_FILE):
-        assert Path(settings.MEDIA_ROOT).joinpath(file_value.file.name).exists()
-
-    if snapshot_id in project_snapshots:
-        if project_id in rollback_snapshot_permission_map.get(username, []):
-            assert response.status_code == 302
-        elif password:
-            assert response.status_code == 403
-        else:
-            assert response.status_code == 302
-    else:
-        assert response.status_code == 404
-
-
-@pytest.mark.parametrize('username,password', users)
-@pytest.mark.parametrize('project_id', projects)
-@pytest.mark.parametrize('snapshot_id', snapshots)
-def test_snapshot_export_xml(db, client, files, username, password, project_id, snapshot_id):
-    client.login(username=username, password=password)
-    project = Project.objects.get(pk=project_id)
-    project_snapshots = list(project.snapshots.values_list('id', flat=True))
-
-    url = reverse('snapshot_export', args=[project_id, snapshot_id, 'xml'])
-    response = client.get(url)
-
-    if snapshot_id in project_snapshots:
-        if project_id in export_snapshot_permission_map.get(username, []):
-            assert response.status_code == 200
-        else:
-            if password:
-                assert response.status_code == 403
-            else:
-                assert response.status_code == 302
-    else:
-        assert response.status_code == 404
diff --git a/rdmo/projects/tests/test_views.py b/rdmo/projects/tests/test_views.py
new file mode 100644
index 0000000000..ebe523cc8c
--- /dev/null
+++ b/rdmo/projects/tests/test_views.py
@@ -0,0 +1,76 @@
+import pytest
+
+from django.urls import reverse
+
+users = (
+    ('owner', 'owner'),
+    ('manager', 'manager'),
+    ('author', 'author'),
+    ('guest', 'guest'),
+    ('user', 'user'),
+    ('editor', 'editor'),
+    ('reviewer', 'reviewer'),
+    ('api', 'api'),
+    ('site', 'site'),
+    ('anonymous', None)
+)
+
+view_project_permission_map = {
+    'owner': [1, 2, 3, 4, 5, 10, 12],
+    'manager': [1, 3, 5, 7, 12],
+    'author': [1, 3, 5, 8, 12],
+    'guest': [1, 3, 5, 9, 12],
+    'user': [12],
+    'editor': [12],
+    'reviewer': [12],
+    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+}
+
+projects = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_list(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse('projects')
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 200
+    else:
+        assert response.status_code == 302
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_detail(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse('project', args=[project_id])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+    else:
+        if password:
+            assert response.status_code == 403
+        else:
+            assert response.status_code == 302
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_project_error(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse('project_error', args=[project_id])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+    elif password:
+        assert response.status_code == 403
+    else:
+        assert response.status_code == 302
diff --git a/rdmo/projects/tests/test_viewset_project.py b/rdmo/projects/tests/test_viewset_project.py
index a4ff426a3e..69333f30c8 100644
--- a/rdmo/projects/tests/test_viewset_project.py
+++ b/rdmo/projects/tests/test_viewset_project.py
@@ -8,6 +8,8 @@
 from rdmo.views.models import View
 
 from ..models import Membership, Project, Snapshot, Value, Visibility
+from .helpers.ordering import get_projects_ordered_by_last_changed
+from .helpers.roles import get_project_roles
 
 users = (
     ('owner', 'owner'),
@@ -100,10 +102,13 @@ def test_list(db, client, username, password):
         if username == 'user':
             assert sorted([item['id'] for item in response.json().get('results')]) == projects_visible
         else:
-            values_list = Project.objects.filter(id__in=view_project_permission_map.get(username, [])) \
-                                         .values_list('id', flat=True)
-            assert response_data['count'] == len(values_list)
-            assert [item['id'] for item in response_data['results']] == list(values_list[:page_size])
+            project_ids = list(
+                get_projects_ordered_by_last_changed()
+                    .filter(id__in=view_project_permission_map.get(username, []))
+                    .values_list('id', flat=True)
+            )
+            assert response_data['count'] == len(project_ids)
+            assert [item['id'] for item in response_data['results']] == project_ids[:page_size]
     else:
         assert response.status_code == 401
 
@@ -122,13 +127,31 @@ def test_list_user(db, client, username, password):
 
         if username == 'user':
             # only the visible project
-            assert [item['id'] for item in response_data['results']] == [12]
+            project_ids = list(
+                get_projects_ordered_by_last_changed()
+                    .filter(id__in=[12])
+                    .values_list('id', flat=True)
+            )
+
+            assert [item['id'] for item in response_data['results']] == project_ids
         elif username in ['manager', 'author', 'guest']:
             # only memberships and visible
-            assert [item['id'] for item in response_data['results']] == [1, 3, 5, 12]
+            project_ids = list(
+                get_projects_ordered_by_last_changed()
+                    .filter(id__in=[1, 3, 5, 12])
+                    .values_list('id', flat=True)
+            )
+
+            assert [item['id'] for item in response_data['results']] == project_ids
         else:
-            assert response_data['count'] == len(owner_projects)
-            assert [item['id'] for item in response_data['results']] == list(owner_projects[:page_size])
+            project_ids = list(
+                get_projects_ordered_by_last_changed()
+                    .filter(id__in=owner_projects)
+                    .values_list('id', flat=True)
+            )
+
+            assert response_data['count'] == len(project_ids)
+            assert [item['id'] for item in response_data['results']] == project_ids[:page_size]
     else:
         assert response.status_code == 401
 
@@ -143,11 +166,11 @@ def test_list_multisite(db, client, settings):
     visibility.sites.add(Site.objects.get(id=1))
 
     url = reverse(urlnames['list'])
-    response = client.get(url + '?page=3')
+    response = client.get(url)
     response_data = response.json()
 
     assert response.status_code == 200
-    assert project.id in [i['id'] for i in response_data['results']]
+    assert project.id == response_data['results'][0]['id']
     assert response_data['count'] == len(view_project_permission_map['site']) + 1
 
 
@@ -167,10 +190,14 @@ def test_user(db, client, username, password):
         if username in ['admin', 'site', 'api', 'user']:
             assert sorted([item['id'] for item in response.json().get('results')]) == projects_visible
         else:
-            values_list = Project.objects.filter(id__in=view_project_permission_map.get(username, [])) \
-                                         .values_list('id', flat=True)
-            assert response_data['count'] == len(values_list)
-            assert [item['id'] for item in response_data['results']] == list(values_list[:page_size])
+            project_ids = list(
+                get_projects_ordered_by_last_changed()
+                    .filter(id__in=view_project_permission_map.get(username, []))
+                    .values_list('id', flat=True)
+            )
+
+            assert response_data['count'] == len(project_ids)
+            assert [item['id'] for item in response_data['results']] == project_ids[:page_size]
     else:
         assert response.status_code == 401
 
@@ -179,14 +206,31 @@ def test_user(db, client, username, password):
 @pytest.mark.parametrize('project_id', projects)
 def test_detail(db, client, username, password, project_id):
     client.login(username=username, password=password)
+    project = Project.objects.get(pk=project_id)
+    project_ancestors = project.get_ancestors()
+
+    current_role, highest_role = get_project_roles(project, project_ancestors, username)
 
     url = reverse(urlnames['detail'], args=[project_id])
     response = client.get(url)
+    response_data = response.json()
 
     if project_id in view_project_permission_map.get(username, []):
         assert response.status_code == 200
-        assert isinstance(response.json(), dict)
-        assert response.json().get('id') == project_id
+        assert response_data.get('id') == project_id
+
+        if current_role:
+            assert response_data['current_role']['role'] == current_role
+        else:
+            assert response_data['current_role'] is None
+
+        if highest_role:
+            assert response_data['highest_role']['role'] == highest_role
+        else:
+            assert response_data['highest_role'] is None
+
+        assert [p['id'] for p in response_data['ancestors']] == [p.id for p in project_ancestors] + [project_id]
+
     else:
         if password:
             assert response.status_code == 404
@@ -205,11 +249,23 @@ def test_create(db, client, username, password):
         'catalog': catalog_id
     }
     response = client.post(url, data)
+    response_data = response.json()
 
     if password:
         assert response.status_code == 201
-        assert isinstance(response.json(), dict)
-        assert Project.objects.get(id=response.json().get('id'))
+        assert Project.objects.get(id=response_data['id'])
+
+        assert response_data['title'] == data['title']
+        assert response_data['description'] == data['description']
+        assert response_data['catalog'] == data['catalog']
+        assert response_data['current_role']['role'] == 'owner'
+        assert response_data['highest_role']['role'] == 'owner'
+        assert response_data['ancestors'] == [
+            {
+                'id': response_data['id'],
+                'title': data['title']
+            }
+        ]
     else:
         assert response.status_code == 401
 
@@ -282,6 +338,7 @@ def test_create_catalog_not_available(db, client):
 @pytest.mark.parametrize('project_id', projects)
 def test_create_parent(db, client, username, password, project_id):
     client.login(username=username, password=password)
+    project_ancestors = Project.objects.get(id=project_id).get_ancestors().values_list('id', flat=True)
 
     url = reverse(urlnames['list'])
     data = {
@@ -291,11 +348,14 @@ def test_create_parent(db, client, username, password, project_id):
         'parent': project_id
     }
     response = client.post(url, data)
+    response_data = response.json()
 
     if project_id in view_project_permission_map.get(username, []):
         assert response.status_code == 201
         assert isinstance(response.json(), dict)
-        assert Project.objects.get(id=response.json().get('id'))
+        assert Project.objects.get(id=response_data['id'])
+        assert response_data['parent'] == project_id
+        assert [p['id'] for p in response_data['ancestors']] == [*project_ancestors, project_id, response_data['id']]
     else:
         if password:
             assert response.status_code == 400
@@ -390,7 +450,9 @@ def test_copy(db, files, client, username, password, project_id):
     data = {
         'title': 'New title',
         'description': project.description,
-        'catalog': project.catalog.id
+        'catalog': project.catalog.id,
+        'tasks': [2],  # will be ignored but should not crash
+        'views': [2],  # will be ignored but should not crash
     }
     response = client.post(url, data, content_type='application/json')
 
@@ -398,9 +460,15 @@ def test_copy(db, files, client, username, password, project_id):
         assert response.status_code == 201
 
         for key, value in response.json().items():
-            if key in data:
+            if key in ['title', 'description', 'catalog']:
                 assert value == data[key]
 
+            # TODO: add checks once rdmo.project.handlers is rebased
+            # elif key == 'tasks':
+            #     assert value == list(project.tasks.values_list('id', flat=True))
+            # elif key == 'views':
+            #     assert value == list(project.views.values_list('id', flat=True))
+
         assert Project.objects.count() == project_count + 1
         assert Snapshot.objects.count() == snapshot_count + project_snapshots_count
         assert Value.objects.count() == value_count + project_values_count
@@ -483,6 +551,7 @@ def test_copy_catalog_not_available(db, client):
 
     assert response.status_code == 400
 
+
 @pytest.mark.parametrize('project_id', projects)
 def test_copy_parent(db, files, client, project_id):
     client.login(username='owner', password='owner')
@@ -496,15 +565,20 @@ def test_copy_parent(db, files, client, project_id):
         'parent': parent_id
     }
     response = client.post(url, data, content_type='application/json')
+    response_data = response.json()
 
     assert response.status_code == 201
-
+    assert response_data['parent'] == parent_id
+    assert [p['id'] for p in response_data['ancestors']] == [*parent_ancestors, response_data['id']]
 
 @pytest.mark.parametrize('username,password', users)
 @pytest.mark.parametrize('project_id', projects)
 def test_update(db, client, username, password, project_id):
     client.login(username=username, password=password)
     project = Project.objects.get(pk=project_id)
+    project_ancestors = project.get_ancestors()
+
+    current_role, highest_role = get_project_roles(project, project_ancestors, username)
 
     url = reverse(urlnames['detail'], args=[project_id])
     data = {
@@ -513,11 +587,27 @@ def test_update(db, client, username, password, project_id):
         'catalog': project.catalog.id
     }
     response = client.put(url, data, content_type='application/json')
+    response_data = response.json()
 
     if project_id in change_project_permission_map.get(username, []):
         assert response.status_code == 200
-        assert Project.objects.get(id=project_id).title == 'New title'
-        assert Project.objects.get(id=project_id).description == project.description
+
+        assert response_data['title'] == data['title']
+        assert response_data['description'] == data['description']
+        assert response_data['catalog'] == data['catalog']
+
+        if current_role:
+            assert response_data['current_role']['role'] == current_role
+        else:
+            assert response_data['current_role'] is None
+
+        if highest_role:
+            assert response_data['highest_role']['role'] == highest_role
+        else:
+            assert response_data['highest_role'] is None
+
+        assert [p['id'] for p in response_data['ancestors']] == [p.id for p in project_ancestors] + [project_id]
+
     else:
         if project_id in view_project_permission_map.get(username, []):
             assert response.status_code == 403
@@ -544,6 +634,7 @@ def test_update_parent(db, client, username, password, project_id):
         'parent': parent_id
     }
     response = client.put(url, data, content_type='application/json')
+    response_data = response.json()
 
     if project_id in change_project_permission_map.get(username, []):
         if parent_id in view_project_permission_map.get(username, []):
@@ -553,6 +644,7 @@ def test_update_parent(db, client, username, password, project_id):
             else:
                 assert response.status_code == 200
                 assert Project.objects.get(pk=project_id).parent_id == parent_id
+                assert [p['id'] for p in response_data['ancestors']] == [*parent_ancestors, project_id]
         else:
             assert response.status_code == 404
             assert Project.objects.get(pk=project_id).parent == project.parent
@@ -737,16 +829,17 @@ def test_upload_accept(db, client, username, password):
         assert response.status_code == 401
 
 
-@pytest.mark.parametrize('username,password', users)
-def test_imports(db, client, username, password):
-    client.login(username=username, password=password)
+# TODO: enable again once imports are reimplemented
+# @pytest.mark.parametrize('username,password', users)
+# def test_imports(db, client, username, password):
+#     client.login(username=username, password=password)
 
-    url = reverse(urlnames['imports'])
-    response = client.get(url)
+#     url = reverse(urlnames['imports'])
+#     response = client.get(url)
 
-    if password:
-        assert response.status_code == 200
-        assert len(response.json()) == 1
-        assert response.json()[0]['key'] == 'url'
-    else:
-        assert response.status_code == 401
+#     if password:
+#         assert response.status_code == 200
+#         assert len(response.json()) == 1
+#         assert response.json()[0]['key'] == 'url'
+#     else:
+#         assert response.status_code == 401
diff --git a/rdmo/projects/tests/test_viewset_project_answers.py b/rdmo/projects/tests/test_viewset_project_answers.py
new file mode 100644
index 0000000000..3af7a0c2ca
--- /dev/null
+++ b/rdmo/projects/tests/test_viewset_project_answers.py
@@ -0,0 +1,140 @@
+import pytest
+
+from django.urls import reverse
+
+from ..models import Snapshot
+
+users = (
+    ('owner', 'owner'),
+    ('manager', 'manager'),
+    ('author', 'author'),
+    ('guest', 'guest'),
+    ('admin', 'admin'),
+    ('api', 'api'),
+    ('site', 'site'),
+    ('user', 'user'),
+    ('anonymous', None),
+)
+
+view_project_permission_map = {
+    'owner': [1, 2, 3, 4, 5, 10, 12],
+    'manager': [1, 3, 5, 7, 12],
+    'author': [1, 3, 5, 8, 12],
+    'guest': [1, 3, 5, 9, 12],
+    'admin': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'user': [12]
+}
+
+projects = [1, 2, 3, 4, 5, 12]
+
+snapshots = [1, 3]
+
+export_formats = ['html']
+
+urlnames = {
+    'answers': 'v1-projects:project-answers',
+    'answers-snapshot': 'v1-projects:project-answers-snapshot',
+    'answers-export': 'v1-projects:project-answers-export',
+    'answers-export-snapshot': 'v1-projects:project-answers-export-snapshot',
+}
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_view(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['answers'], args=[project_id])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+        assert isinstance(response.json(), dict)
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('snapshot_id', snapshots)
+def test_view_snapshot(db, client, username, password, snapshot_id):
+    client.login(username=username, password=password)
+    snapshot = Snapshot.objects.get(pk=snapshot_id)
+
+    url = reverse(urlnames['answers-snapshot'], args=[snapshot.project.id, snapshot_id])
+    response = client.get(url)
+
+    if snapshot.project.id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+        assert isinstance(response.json(), dict)
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_view_snapshot_not_found(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['answers-snapshot'], args=[1, 100])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 404
+    else:
+        assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+@pytest.mark.parametrize('export_format', export_formats)
+def test_view_export(db, client, username, password, project_id, export_format):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['answers-export'], args=[project_id, export_format])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('snapshot_id', snapshots)
+@pytest.mark.parametrize('export_format', export_formats)
+def test_view_snapshot_export(db, client, username, password, snapshot_id, export_format):
+    client.login(username=username, password=password)
+    snapshot = Snapshot.objects.get(pk=snapshot_id)
+
+    url = reverse(urlnames['answers-export-snapshot'], args=[snapshot.project.id, snapshot_id, export_format])
+    response = client.get(url)
+
+    if snapshot.project.id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_view_snapshot_export_not_found(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['answers-export-snapshot'], args=[1, 100, 'html'])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 404
+    else:
+        assert response.status_code == 401
diff --git a/rdmo/projects/tests/test_viewset_project_answers_tree.py b/rdmo/projects/tests/test_viewset_project_answers_tree.py
new file mode 100644
index 0000000000..d95ed1cb91
--- /dev/null
+++ b/rdmo/projects/tests/test_viewset_project_answers_tree.py
@@ -0,0 +1,86 @@
+import pytest
+
+from django.urls import reverse
+
+from ..models import Snapshot
+
+users = (
+    ('owner', 'owner'),
+    ('manager', 'manager'),
+    ('author', 'author'),
+    ('guest', 'guest'),
+    ('admin', 'admin'),
+    ('api', 'api'),
+    ('site', 'site'),
+    ('user', 'user'),
+    ('anonymous', None),
+)
+
+view_project_permission_map = {
+    'owner': [1, 2, 3, 4, 5, 10, 12],
+    'manager': [1, 3, 5, 7, 12],
+    'author': [1, 3, 5, 8, 12],
+    'guest': [1, 3, 5, 9, 12],
+    'admin': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'user': [12]
+}
+
+projects = [1, 2, 3, 4, 5, 12]
+
+snapshots = [1, 3]
+
+urlnames = {
+    'answers-tree': 'v1-projects:project-answers',
+    'answers-tree-snapshot': 'v1-projects:project-answers-snapshot',
+}
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_view(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['answers-tree'], args=[project_id])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+        assert isinstance(response.json(), dict)
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('snapshot_id', snapshots)
+def test_view_snapshot(db, client, username, password, snapshot_id):
+    client.login(username=username, password=password)
+    snapshot = Snapshot.objects.get(pk=snapshot_id)
+
+    url = reverse(urlnames['answers-tree-snapshot'], args=[snapshot.project.id, snapshot_id])
+    response = client.get(url)
+
+    if snapshot.project.id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+        assert isinstance(response.json(), dict)
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_view_snapshot_not_found(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['answers-tree-snapshot'], args=[1, 100])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 404
+    else:
+        assert response.status_code == 401
diff --git a/rdmo/projects/tests/test_viewset_project_invite.py b/rdmo/projects/tests/test_viewset_project_invite.py
index a99fc9fd97..7045bb8f3e 100644
--- a/rdmo/projects/tests/test_viewset_project_invite.py
+++ b/rdmo/projects/tests/test_viewset_project_invite.py
@@ -33,7 +33,8 @@
 
 urlnames = {
     'list': 'v1-projects:project-invite-list',
-    'detail': 'v1-projects:project-invite-detail'
+    'detail': 'v1-projects:project-invite-detail',
+    'lookup': 'v1-projects:project-invite-lookup'
 }
 
 projects = [1, 11]
@@ -73,8 +74,13 @@ def test_detail(db, client, username, password, project_id, invite_id):
 
     if invite and project_id in view_invite_permission_map.get(username, []):
         assert response.status_code == 200
-        assert isinstance(response.json(), dict)
-        assert response.json().get('id') == invite_id
+
+        response_data = response.json()
+
+        assert response_data['id'] == invite_id
+        assert response_data['user']['first_name']
+        assert response_data['user']['last_name']
+
     else:
         assert response.status_code == 404
 
@@ -121,6 +127,93 @@ def test_create_email(db, client, username, password, project_id):
         assert response.status_code == 404
 
 
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_create_with_lookup_as_username(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['list'], args=[project_id])
+    data = {
+        'lookup': 'user',
+        'role': 'guest'
+    }
+    response = client.post(url, data)
+
+    if project_id in add_invite_permission_map.get(username, []):
+        assert response.status_code == 201
+
+        response_data = response.json()
+
+        assert response_data['user']['first_name']
+        assert response_data['user']['last_name']
+        assert response_data['user']['email']
+
+    elif project_id in view_invite_permission_map.get(username, []):
+        assert response.status_code == 403
+    else:
+        assert response.status_code == 404
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_create_with_lookup_as_email_on_existing_user(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['list'], args=[project_id])
+    data = {
+        'lookup': 'user@example.com',
+        'role': 'guest'
+    }
+    response = client.post(url, data)
+
+    if project_id in add_invite_permission_map.get(username, []):
+        assert response.status_code == 201
+
+        response_data = response.json()
+
+        assert response_data['user']['first_name']
+        assert response_data['user']['last_name']
+        assert response_data['user']['email']
+
+    elif project_id in view_invite_permission_map.get(username, []):
+        assert response.status_code == 403
+    else:
+        assert response.status_code == 404
+
+
+@pytest.mark.parametrize('project_send_invite', [True, False])
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_create_with_lookup_as_email_on_non_existing_user(
+        db, client, settings, username, password, project_id, project_send_invite
+    ):
+    settings.PROJECT_SEND_INVITE = project_send_invite
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['list'], args=[project_id])
+    data = {
+        'lookup': 'nosuchuser@example.com',
+        'role': 'guest'
+    }
+    response = client.post(url, data)
+
+    if project_id in add_invite_permission_map.get(username, []):
+        if settings.PROJECT_SEND_INVITE:
+            assert response.status_code == 201
+            assert 'id' in response.json()
+            assert 'timestamp' in response.json()
+            assert response.json()['user'] is None
+            assert response.json()['email'] == data['lookup']
+            assert response.json()['role'] == data['role']
+        else:
+            assert response.status_code == 400
+            assert response.json()['lookup'][0] == 'No user found.'
+    elif project_id in view_invite_permission_map.get(username, []):
+        assert response.status_code == 403
+    else:
+        assert response.status_code == 404
+
+
 def test_create_error(db, client):
     client.login(username='owner', password='owner')
 
@@ -130,7 +223,7 @@ def test_create_error(db, client):
     }
     response = client.post(url, data)
     assert response.status_code == 400
-    assert response.json()['non_field_errors'][0] == 'Either user or e-mail needs to be provided.'
+    assert response.json()['non_field_errors'][0] == 'Either user, e-mail or lookup needs to be provided.'
 
 
 def test_create_error_user(db, client):
@@ -159,6 +252,26 @@ def test_create_error_user_and_email(db, client):
     assert response.status_code == 400
     assert response.json()['non_field_errors'][0] == 'User and e-mail are mutually exclusive.'
 
+@pytest.mark.parametrize('project_send_invite', [True, False])
+@pytest.mark.parametrize('lookup,expected_error', [
+    ('nosuchuser', 'No user found.'),
+    ('bad@mail', 'Enter a valid email address.'),
+])
+def test_create_lookup_error_invalid(db, client, settings, lookup, expected_error, project_send_invite):
+    settings.PROJECT_SEND_INVITE = project_send_invite
+    client.login(username='owner', password='owner')
+    url = reverse(urlnames['list'], args=[1])
+
+    data = {
+        'lookup': lookup,
+        'role': 'guest'
+    }
+    response = client.post(url, data)
+    assert response.status_code == 400
+    err = response.json()
+    assert 'lookup' in err
+    assert err['lookup'][0] == expected_error
+
 
 @pytest.mark.parametrize('username,password', users)
 @pytest.mark.parametrize('project_id', projects)
diff --git a/rdmo/projects/tests/test_viewset_project_membership.py b/rdmo/projects/tests/test_viewset_project_membership.py
index ce4fdccc87..1b67a20e14 100644
--- a/rdmo/projects/tests/test_viewset_project_membership.py
+++ b/rdmo/projects/tests/test_viewset_project_membership.py
@@ -3,7 +3,7 @@
 from django.contrib.auth import get_user_model
 from django.urls import reverse
 
-from ..models import Membership
+from ..models import Membership, Project
 
 users = (
     ('owner', 'owner'),
@@ -26,8 +26,13 @@
     'site': [1, 2, 3, 4, 5, 12]
 }
 
-add_membership_permission_map = change_membership_permission_map = delete_membership_permission_map = {
-    'owner': [1, 2, 3, 4, 5, 12],
+add_membership_permission_map = {
+    'api': [1, 2, 3, 4, 5, 12],
+    'site': [1, 2, 3, 4, 5, 12]
+}
+
+change_membership_permission_map = delete_membership_permission_map = {
+    'owner': [1, 2, 3, 4, 5],
     'api': [1, 2, 3, 4, 5, 12],
     'site': [1, 2, 3, 4, 5, 12]
 }
@@ -54,12 +59,18 @@ def test_list(db, client, username, password, project_id):
     if project_id in view_membership_permission_map.get(username, []):
         assert response.status_code == 200
 
+        response_data = response.json()
+
         if username == 'user':
-            assert sorted([item['id'] for item in response.json()]) == memberships_visible
+            assert sorted([item['id'] for item in response_data]) == memberships_visible
+            assert all('user' in item for item in response_data)
+            assert all('email' in item['user'] for item in response_data)
         else:
             values_list = Membership.objects.filter(project_id=project_id) \
                                             .order_by('id').values_list('id', flat=True)
-            assert sorted([item['id'] for item in response.json()]) == list(values_list)
+            assert sorted([item['id'] for item in response_data]) == list(values_list)
+            assert all('user' in item for item in response_data)
+            assert all('email' in item['user'] for item in response_data)
     else:
         assert response.status_code == 404
 
@@ -75,8 +86,14 @@ def test_detail(db, client, username, password, membership_id):
 
     if membership.project_id in view_membership_permission_map.get(username, []):
         assert response.status_code == 200
-        assert isinstance(response.json(), dict)
-        assert response.json().get('id') == membership_id
+
+        response_data = response.json()
+
+        assert isinstance(response_data, dict)
+        assert response_data['id'] == membership_id
+        assert response_data['user']['id'] == membership.user.id
+        assert response_data['user']['email'] == membership.user.email
+
     else:
         assert response.status_code == 404
 
@@ -104,6 +121,60 @@ def test_create(db, client, username, password, project_id, membership_role):
         assert response.status_code == 404
 
 
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+@pytest.mark.parametrize('membership_role', membership_roles)
+def test_create_lookup(db, client, username, password, project_id, membership_role):
+    if password:
+        client.login(username=username, password=password)
+        user = get_user_model().objects.get(username=username)
+        already_a_member = Project.objects.get(id=project_id).memberships.filter(user=user).exists()
+
+    url = reverse(urlnames['list'], args=[project_id])
+    data = {
+        'lookup': username,  # valid test username
+        'role': membership_role
+    }
+    response = client.post(url, data)
+
+    if project_id in add_membership_permission_map.get(username, []):
+        if already_a_member:
+            assert response.status_code == 400
+            assert 'already a member' in response.json()['non_field_errors'][0]
+        else:
+            assert response.status_code == 201
+
+            response_data = response.json()
+
+            assert response_data['id']
+            assert response_data['role'] == membership_role
+            assert response_data['user']['first_name']
+            assert response_data['user']['last_name']
+    elif project_id in view_membership_permission_map.get(username, []):
+        assert response.status_code == 403
+    else:
+        assert response.status_code == 404
+
+
+@pytest.mark.parametrize('lookup,expected_error', [
+    ('nosuchuser', 'No user found.'),
+    ('bad@mail', 'Enter a valid email address.'),
+])
+def test_create_lookup_error_invalid(db, client, lookup, expected_error):
+    client.login(username='site', password='site')
+    url = reverse(urlnames['list'], args=[1])
+
+    data = {
+        'lookup': lookup,
+        'role': 'guest'
+    }
+    response = client.post(url, data)
+    assert response.status_code == 400
+    err = response.json()
+    assert 'lookup' in err
+    assert err['lookup'][0] == expected_error
+
+
 @pytest.mark.parametrize('username,password', users)
 @pytest.mark.parametrize('membership_id', memberships)
 @pytest.mark.parametrize('membership_role', membership_roles)
diff --git a/rdmo/projects/tests/test_viewset_project_membership_hierarchy.py b/rdmo/projects/tests/test_viewset_project_membership_hierarchy.py
new file mode 100644
index 0000000000..1bab6ddbde
--- /dev/null
+++ b/rdmo/projects/tests/test_viewset_project_membership_hierarchy.py
@@ -0,0 +1,51 @@
+import pytest
+
+from django.urls import reverse
+
+users = (
+    ('owner', 'owner'),
+    ('manager', 'manager'),
+    ('author', 'author'),
+    ('guest', 'guest'),
+    ('api', 'api'),
+    ('user', 'user'),
+    ('site', 'site'),
+    ('anonymous', None),
+)
+
+view_membership_permission_map = {
+    'owner': [1, 2, 3, 4, 5, 12],
+    'manager': [1, 3, 5, 12],
+    'author': [1, 3, 5, 12],
+    'guest': [1, 3, 5, 12],
+    'user': [12],
+    'api': [1, 2, 3, 4, 5, 12],
+    'site': [1, 2, 3, 4, 5, 12]
+}
+
+urlnames = {
+    'hierarchy': 'v1-projects:project-membership-hierarchy'
+}
+
+projects = [1, 2, 3, 4, 5, 12]
+
+project_memberships = {
+    3: {5},
+    4: {5},
+    5: {5, 6, 7, 8}
+}
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_hierarchy(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['hierarchy'], args=[project_id])
+    response = client.get(url)
+
+    if project_id in view_membership_permission_map.get(username, []):
+        assert response.status_code == 200
+        assert {m['user']['id'] for m in response.json()} == project_memberships.get(project_id, set())
+    else:
+        assert response.status_code == 404
diff --git a/rdmo/projects/tests/test_viewset_project_membership_leave.py b/rdmo/projects/tests/test_viewset_project_membership_leave.py
new file mode 100644
index 0000000000..0463870675
--- /dev/null
+++ b/rdmo/projects/tests/test_viewset_project_membership_leave.py
@@ -0,0 +1,76 @@
+import pytest
+
+from django.contrib.auth.models import User
+from django.urls import reverse
+
+from ..models import Membership
+
+users = (
+    ('owner', 'owner'),
+    ('manager', 'manager'),
+    ('author', 'author'),
+    ('guest', 'guest'),
+    ('user', 'user'),
+    ('site', 'site'),
+    ('anonymous', None),
+)
+
+leave_project_permission_map = {
+    'owner': [1, 2, 3, 4, 5, 12],
+    'manager': [1, 3],
+    'author': [1, 3],
+    'guest': [1, 3]
+}
+
+urlnames = {
+    'leave': 'v1-projects:project-membership-leave',
+}
+
+projects = [1, 2, 3, 4, 5, 12]
+memberships = [1, 2, 3, 4]
+memberships_visible = [16]
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_leave(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['leave'], args=[project_id])
+    response = client.delete(url)
+
+    # store if the membership exists
+    membership_existed = Membership.objects.filter(project_id=project_id, user__username=username).exists()
+
+    if project_id in leave_project_permission_map.get(username, []):
+        if username == 'owner':
+            assert response.status_code == 404  # last owner is not allowed to leave
+        else:
+            assert response.status_code == 204
+
+            if membership_existed:
+                assert not Membership.objects.filter(project_id=project_id, user__username=username).exists()
+    else:
+        assert response.status_code == 404
+
+
+@pytest.mark.parametrize('project_id', projects)
+def test_project_leave_post_last_owner(db, client, project_id):
+    client.login(username='owner', password='owner')
+
+    # store if the membership exists
+    membership_existed = Membership.objects.filter(project_id=project_id, user__username='owner').exists()
+
+    # add user as the second owner
+    Membership.objects.create(project_id=project_id, user=User.objects.get(username='user'), role='owner')
+
+    url = reverse(urlnames['leave'], args=[project_id])
+    response = client.delete(url)
+
+    if project_id in leave_project_permission_map.get('owner', []):
+        assert response.status_code == 204
+
+        if membership_existed:
+            assert not Membership.objects.filter(project_id=project_id, user__username='owner').exists()
+    else:
+        assert response.status_code == 404
diff --git a/rdmo/projects/tests/test_viewset_project_snapshot.py b/rdmo/projects/tests/test_viewset_project_snapshot.py
index 89c43de3ae..0a7bf538f7 100644
--- a/rdmo/projects/tests/test_viewset_project_snapshot.py
+++ b/rdmo/projects/tests/test_viewset_project_snapshot.py
@@ -30,16 +30,21 @@
     'site': [1, 2, 3, 4, 5, 12]
 }
 
-add_snapshot_permission_map = change_snapshot_permission_map = delete_snapshot_permission_map = {
+snapshot_permission_map = {
     'owner': [1, 2, 3, 4, 5, 12],
     'manager': [1, 3, 5],
     'api': [1, 2, 3, 4, 5, 12],
-    'site': [1, 2, 3, 4, 5, 12]
+    'site': [1, 2, 3, 4, 5, 12],
 }
+add_snapshot_permission_map = snapshot_permission_map
+change_snapshot_permission_map = snapshot_permission_map
+rollback_snapshot_permission_map = snapshot_permission_map
+delete_snapshot_permission_map = snapshot_permission_map
 
 urlnames = {
     'list': 'v1-projects:project-snapshot-list',
-    'detail': 'v1-projects:project-snapshot-detail'
+    'detail': 'v1-projects:project-snapshot-detail',
+    'rollback': 'v1-projects:project-snapshot-rollback',
 }
 
 projects = [1, 2, 3, 4, 5, 12]
@@ -154,6 +159,76 @@ def test_update(db, client, files, username, password, snapshot_id):
         assert Path(settings.MEDIA_ROOT).joinpath(file_value).exists()
 
 
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('snapshot_id', snapshots)
+def test_rollback(db, client, files, username, password, snapshot_id):
+    client.login(username=username, password=password)
+    snapshot = Snapshot.objects.get(id=snapshot_id)
+
+    snapshot_count = snapshot.project.snapshots.count()
+    values_count = snapshot.project.values.count()
+
+    # we want to keep all the snapshots before the rolled back snapshot
+    snapshots_kept = sorted(
+        snapshot.project.snapshots.filter(created__lt=snapshot.created).values_list('id', flat=True)
+    )
+    # we want to keep all the values of snapshots before the rolled back snapshot
+    values_kept = sorted(
+        snapshot.project.values.filter(
+            snapshot__in=snapshot.project.snapshots.filter(created__lte=snapshot.created)
+        ).values_list('id', flat=True)
+    )
+    # we want to keep all the files for values of snapshots before the rolled back snapshot
+    files_kept = sorted(
+        snapshot.project.values.filter(
+            snapshot__in=snapshot.project.snapshots.filter(created__lte=snapshot.created),
+            value_type=VALUE_TYPE_FILE
+        ).values_list('file', flat=True)
+    )
+    # we want to remove all the files for values of snapshots after the rolled back snapshot
+    files_removed = sorted(
+        snapshot.project.values.filter(
+            snapshot__in=snapshot.project.snapshots.filter(created__gt=snapshot.created),
+            value_type=VALUE_TYPE_FILE
+        ).values_list('file', flat=True)
+    )
+
+    url = reverse(urlnames['rollback'], args=[snapshot.project_id, snapshot_id])
+    response = client.post(url)
+
+    # chatgpt told me to refetch the project
+    project = Project.objects.get(id=snapshot.project_id)
+
+    if project.id in rollback_snapshot_permission_map.get(username, []):
+        assert response.status_code == 204
+
+        # check that we still have all the snapshots we want to keep
+        assert sorted(project.snapshots.values_list('id', flat=True)) == snapshots_kept
+
+        # check that we still have all the values we want to keep
+        assert sorted(project.values.values_list('id', flat=True)) == values_kept
+
+        # check that we still have all the files we want to keep
+        for file_path in files_kept:
+            assert Path(settings.MEDIA_ROOT).joinpath(file_path).exists()
+
+        # check that we deleted the files we want to remove
+        for file_path in files_removed:
+            assert not Path(settings.MEDIA_ROOT).joinpath(file_path).exists()
+
+    else:
+        if project.id in view_snapshot_permission_map.get(username, []):
+            assert response.status_code == 403
+        else:
+            assert response.status_code == 404
+
+        assert project.snapshots.count() == snapshot_count
+        assert project.values.count() == values_count
+
+        for file_path in files_kept + files_removed:
+            assert Path(settings.MEDIA_ROOT).joinpath(file_path).exists()
+
+
 @pytest.mark.parametrize('username,password', users)
 @pytest.mark.parametrize('snapshot_id', snapshots)
 def test_delete(db, client, files, username, password, snapshot_id):
@@ -162,17 +237,59 @@ def test_delete(db, client, files, username, password, snapshot_id):
 
     snapshot_count = snapshot.project.snapshots.count()
     values_count = snapshot.project.values.count()
-    values_files = [value.file.name for value in snapshot.project.values.filter(value_type=VALUE_TYPE_FILE)]
+
+    # we want to keep all the snapshots but the one to delete
+    snapshots_kept = sorted(
+        snapshot.project.snapshots.exclude(id=snapshot_id).values_list('id', flat=True)
+    )
+    # we want to keep all the values of snapshots but the values for the snapshot to delete
+    values_kept = sorted(
+        snapshot.project.values.exclude(snapshot_id=snapshot_id).values_list('id', flat=True)
+    )
+    # we want to keep all the files of values of snapshots but the ones for the snapshot to delete
+    files_kept = sorted(
+        snapshot.project.values.exclude(snapshot_id=snapshot_id)
+                               .filter(value_type=VALUE_TYPE_FILE)
+                               .values_list('file', flat=True)
+    )
+    # we want to remove all the files of values of the snapshot to delete
+    files_removed = sorted(
+        snapshot.project.values.filter(snapshot_id=snapshot_id)
+                               .filter(value_type=VALUE_TYPE_FILE)
+                               .values_list('file', flat=True)
+    )
 
     url = reverse(urlnames['detail'], args=[snapshot.project_id, snapshot_id])
     response = client.delete(url)
 
-    if snapshot.project_id in view_snapshot_permission_map.get(username, []):
-        assert response.status_code == 405
+    # chatgpt told me to refetch the project
+    project = Project.objects.get(id=snapshot.project_id)
+
+    if project.id in delete_snapshot_permission_map.get(username, []):
+        assert response.status_code == 204
+
+        # check that we still have all the other snapshots
+        assert sorted(project.snapshots.values_list('id', flat=True)) == snapshots_kept
+
+        # check that we still have all the values we want to keep
+        assert sorted(project.values.values_list('id', flat=True)) == values_kept
+
+        # check that we still have all the files we want to keep
+        for file_path in files_kept:
+            assert Path(settings.MEDIA_ROOT).joinpath(file_path).exists()
+
+        # check that we deleted the files we want to remove
+        for file_path in files_removed:
+            assert not Path(settings.MEDIA_ROOT).joinpath(file_path).exists()
+
     else:
-        assert response.status_code == 404
+        if project.id in view_snapshot_permission_map.get(username, []):
+            assert response.status_code == 403
+        else:
+            assert response.status_code == 404
 
-    assert snapshot.project.snapshots.count() == snapshot_count
-    assert snapshot.project.values.count() == values_count
-    for file_value in values_files:
-        assert Path(settings.MEDIA_ROOT).joinpath(file_value).exists()
+        assert project.snapshots.count() == snapshot_count
+        assert project.values.count() == values_count
+
+        for file_path in files_kept + files_removed:
+            assert Path(settings.MEDIA_ROOT).joinpath(file_path).exists()
diff --git a/rdmo/projects/tests/test_viewset_project_views.py b/rdmo/projects/tests/test_viewset_project_views.py
new file mode 100644
index 0000000000..6637e1f5e5
--- /dev/null
+++ b/rdmo/projects/tests/test_viewset_project_views.py
@@ -0,0 +1,201 @@
+import pytest
+
+from django.urls import reverse
+
+from ..models import Project, Snapshot
+
+users = (
+    ('owner', 'owner'),
+    ('manager', 'manager'),
+    ('author', 'author'),
+    ('guest', 'guest'),
+    ('admin', 'admin'),
+    ('api', 'api'),
+    ('site', 'site'),
+    ('user', 'user'),
+    ('anonymous', None),
+)
+
+views = (1, 2)
+
+view_project_permission_map = {
+    'owner': [1, 2, 3, 4, 5, 10, 12],
+    'manager': [1, 3, 5, 7, 12],
+    'author': [1, 3, 5, 8, 12],
+    'guest': [1, 3, 5, 9, 12],
+    'admin': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'api': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'site': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    'user': [12]
+}
+
+projects = [1, 2, 3, 4, 5, 12]
+
+snapshots = [1, 3]
+
+export_formats = ['html']
+
+urlnames = {
+    'views': 'v1-projects:project-views',
+    'view': 'v1-projects:project-view',
+    'view-snapshot': 'v1-projects:project-view-snapshot',
+    'view-export': 'v1-projects:project-view-export',
+    'view-export-snapshot': 'v1-projects:project-view-export-snapshot',
+}
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+def test_views(db, client, username, password, project_id):
+    client.login(username=username, password=password)
+    project = Project.objects.get(pk=project_id)
+    project_views = list(project.views.values_list('id', flat=True))
+
+    url = reverse(urlnames['views'], args=[project_id])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []):
+        assert response.status_code == 200
+        assert isinstance(response.json(), list)
+        assert [item['id'] for item in response.json()] == project_views
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+@pytest.mark.parametrize('view_id', views)
+def test_view(db, client, username, password, project_id, view_id):
+    client.login(username=username, password=password)
+    project = Project.objects.get(pk=project_id)
+    project_views = list(project.views.values_list('id', flat=True))
+
+    url = reverse(urlnames['view'], args=[project_id, view_id])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []) and view_id in project_views:
+        assert response.status_code == 200
+        assert isinstance(response.json(), dict)
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('snapshot_id', snapshots)
+@pytest.mark.parametrize('view_id', views)
+def test_view_snapshot(db, client, username, password, snapshot_id, view_id):
+    client.login(username=username, password=password)
+    snapshot = Snapshot.objects.get(pk=snapshot_id)
+    project_views = list(snapshot.project.views.values_list('id', flat=True))
+
+    url = reverse(urlnames['view-snapshot'], args=[snapshot.project.id, snapshot_id, view_id])
+    response = client.get(url)
+
+    if snapshot.project.id in view_project_permission_map.get(username, []) and view_id in project_views:
+        assert response.status_code == 200
+        assert isinstance(response.json(), dict)
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_view_snapshot_snapshot_not_found(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['view-snapshot'], args=[1, 100, 1])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 404
+    else:
+        assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_view_snapshot_view_not_found(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['view-snapshot'], args=[1, 1, 100])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 404
+    else:
+        assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('project_id', projects)
+@pytest.mark.parametrize('view_id', views)
+@pytest.mark.parametrize('export_format', export_formats)
+def test_view_export(db, client, username, password, project_id, view_id, export_format):
+    client.login(username=username, password=password)
+    project = Project.objects.get(pk=project_id)
+    project_views = list(project.views.values_list('id', flat=True))
+
+    url = reverse(urlnames['view-export'], args=[project_id, view_id, export_format])
+    response = client.get(url)
+
+    if project_id in view_project_permission_map.get(username, []) and view_id in project_views:
+        assert response.status_code == 200
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+@pytest.mark.parametrize('snapshot_id', snapshots)
+@pytest.mark.parametrize('view_id', views)
+@pytest.mark.parametrize('export_format', export_formats)
+def test_view_snapshot_export(db, client, username, password, snapshot_id, view_id, export_format):
+    client.login(username=username, password=password)
+    snapshot = Snapshot.objects.get(pk=snapshot_id)
+    project_views = list(snapshot.project.views.values_list('id', flat=True))
+
+    url = reverse(urlnames['view-export-snapshot'], args=[snapshot.project.id, snapshot_id, view_id, export_format])
+    response = client.get(url)
+
+    if snapshot.project.id in view_project_permission_map.get(username, []) and view_id in project_views:
+        assert response.status_code == 200
+    else:
+        if password:
+            assert response.status_code == 404
+        else:
+            assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_view_snapshot_export_snapshot_not_found(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['view-export-snapshot'], args=[1, 100, 1, 'html'])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 404
+    else:
+        assert response.status_code == 401
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_view_snapshot_export_view_not_found(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['view-export-snapshot'], args=[1, 1, 100, 'html'])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 404
+    else:
+        assert response.status_code == 401
diff --git a/rdmo/projects/tests/test_viewset_role.py b/rdmo/projects/tests/test_viewset_role.py
new file mode 100644
index 0000000000..6b0fc2e12a
--- /dev/null
+++ b/rdmo/projects/tests/test_viewset_role.py
@@ -0,0 +1,35 @@
+import pytest
+
+from django.urls import reverse
+
+from rdmo.projects.constants import ROLE_CHOICES
+
+users = (
+    ('owner', 'owner'),
+    ('manager', 'manager'),
+    ('author', 'author'),
+    ('guest', 'guest'),
+    ('api', 'api'),
+    ('user', 'user'),
+    ('site', 'site'),
+    ('anonymous', None),
+)
+
+urlnames = {
+    'list': 'v1-projects:role-list'
+}
+
+
+@pytest.mark.parametrize('username,password', users)
+def test_list(db, client, username, password):
+    client.login(username=username, password=password)
+
+    url = reverse(urlnames['list'])
+    response = client.get(url)
+
+    if password:
+        assert response.status_code == 200
+        assert isinstance(response.json(), list)
+        assert tuple([(role['id'], role['text']) for role in response.json()]) == ROLE_CHOICES
+    else:
+        assert response.status_code == 401
diff --git a/rdmo/projects/urls/__init__.py b/rdmo/projects/urls/__init__.py
index 4c11792617..08b604b3fe 100644
--- a/rdmo/projects/urls/__init__.py
+++ b/rdmo/projects/urls/__init__.py
@@ -1,146 +1,16 @@
 from django.urls import re_path
 
-from ..views import (
-    IntegrationCreateView,
-    IntegrationDeleteView,
-    IntegrationUpdateView,
-    IntegrationWebhookView,
-    InviteDeleteView,
-    IssueDetailView,
-    IssueSendView,
-    IssueUpdateView,
-    MembershipCreateView,
-    MembershipDeleteView,
-    MembershipUpdateView,
-    ProjectAnswersExportView,
-    ProjectAnswersView,
-    ProjectCancelView,
-    ProjectCopyView,
-    ProjectCreateImportView,
-    ProjectCreateView,
-    ProjectDeleteView,
-    ProjectDetailView,
-    ProjectErrorView,
-    ProjectExportView,
-    ProjectInterviewView,
-    ProjectJoinView,
-    ProjectLeaveView,
-    ProjectsView,
-    ProjectUpdateCatalogView,
-    ProjectUpdateImportView,
-    ProjectUpdateInformationView,
-    ProjectUpdateParentView,
-    ProjectUpdateTasksView,
-    ProjectUpdateView,
-    ProjectUpdateViewsView,
-    ProjectUpdateVisibilityView,
-    ProjectViewExportView,
-    ProjectViewView,
-    SnapshotCreateView,
-    SnapshotExportView,
-    SnapshotRollbackView,
-    SnapshotUpdateView,
-)
+from ..views import ProjectDetailView, ProjectErrorView, ProjectInterviewView, ProjectJoinView, ProjectsView
 
 urlpatterns = [
     re_path(r'^$',
             ProjectsView.as_view(), name='projects'),
-    re_path(r'^create/$',
-            ProjectCreateView.as_view(), name='project_create'),
-    re_path(r'^join/(?P<token>.+)/$',
-            ProjectJoinView.as_view(), name='project_join'),
-    re_path(r'^cancel/(?P<token>.+)/$',
-            ProjectCancelView.as_view(), name='project_cancel'),
-    re_path(r'^import/$',
-            ProjectCreateImportView.as_view(), name='project_create_import'),
-    re_path(r'^import/(?P<format>[a-z-]+)/$',
-            ProjectCreateImportView.as_view(), name='project_create_import'),
-
-    re_path(r'^(?P<pk>[0-9]+)/$',
-            ProjectDetailView.as_view(), name='project'),
-    re_path(r'^(?P<pk>[0-9]+)/copy/$',
-            ProjectCopyView.as_view(), name='project_copy'),
-    re_path(r'^(?P<pk>[0-9]+)/update/$',
-            ProjectUpdateView.as_view(), name='project_update'),
-    re_path(r'^(?P<pk>[0-9]+)/update/information/$',
-            ProjectUpdateInformationView.as_view(), name='project_update_information'),
-    re_path(r'^(?P<pk>[0-9]+)/update/visibility/$',
-            ProjectUpdateVisibilityView.as_view(), name='project_update_visibility'),
-    re_path(r'^(?P<pk>[0-9]+)/update/catalog/$',
-            ProjectUpdateCatalogView.as_view(), name='project_update_catalog'),
-    re_path(r'^(?P<pk>[0-9]+)/update/parent/$',
-            ProjectUpdateParentView.as_view(), name='project_update_parent'),
-    re_path(r'^(?P<pk>[0-9]+)/update/tasks/$',
-            ProjectUpdateTasksView.as_view(), name='project_update_tasks'),
-    re_path(r'^(?P<pk>[0-9]+)/update/views/$',
-            ProjectUpdateViewsView.as_view(), name='project_update_views'),
-    re_path(r'^(?P<pk>[0-9]+)/delete/$',
-            ProjectDeleteView.as_view(), name='project_delete'),
-    re_path(r'^(?P<pk>[0-9]+)/leave/$',
-            ProjectLeaveView.as_view(), name='project_leave'),
-    re_path(r'^(?P<pk>[0-9]+)/export/(?P<format>[a-z-]+)/$',
-            ProjectExportView.as_view(), name='project_export'),
-    re_path(r'^(?P<pk>[0-9]+)/import/$',
-            ProjectUpdateImportView.as_view(), name='project_update_import'),
-    re_path(r'^(?P<pk>[0-9]+)/import/(?P<format>[a-z-]+)/$',
-            ProjectUpdateImportView.as_view(), name='project_update_import'),
-
-    re_path(r'^(?P<project_id>[0-9]+)/memberships/create/$',
-            MembershipCreateView.as_view(), name='membership_create'),
-    re_path(r'^(?P<project_id>[0-9]+)/memberships/(?P<pk>[0-9]+)/update/$',
-            MembershipUpdateView.as_view(), name='membership_update'),
-    re_path(r'^(?P<project_id>[0-9]+)/memberships/(?P<pk>[0-9]+)/delete/$',
-            MembershipDeleteView.as_view(), name='membership_delete'),
-    re_path(r'^(?P<project_id>[0-9]+)/invite/(?P<pk>[0-9]+)/delete/$',
-            InviteDeleteView.as_view(), name='invite_delete'),
-
-    re_path(r'^(?P<project_id>[0-9]+)/integrations/create/(?P<provider_key>[a-z]+)/$',
-            IntegrationCreateView.as_view(), name='integration_create'),
-    re_path(r'^(?P<project_id>[0-9]+)/integrations/(?P<pk>[0-9]+)/update/$',
-            IntegrationUpdateView.as_view(), name='integration_update'),
-    re_path(r'^(?P<project_id>[0-9]+)/integrations/(?P<pk>[0-9]+)/delete/$',
-            IntegrationDeleteView.as_view(), name='integration_delete'),
-    re_path(r'^(?P<project_id>[0-9]+)/integrations/(?P<pk>[0-9]+)/webhook/$',
-            IntegrationWebhookView.as_view(), name='integration_webhook'),
-
-    re_path(r'^(?P<project_id>[0-9]+)/issues/(?P<pk>[0-9]+)/$',
-            IssueDetailView.as_view(), name='issue'),
-    re_path(r'^(?P<project_id>[0-9]+)/issues/(?P<pk>[0-9]+)/update/$',
-            IssueUpdateView.as_view(), name='issue_update'),
-    re_path(r'^(?P<project_id>[0-9]+)/issues/(?P<pk>[0-9]+)/send/$',
-            IssueSendView.as_view(), name='issue_send'),
-
-    re_path(r'^(?P<project_id>[0-9]+)/snapshots/create/$',
-            SnapshotCreateView.as_view(), name='snapshot_create'),
-    re_path(r'^(?P<project_id>[0-9]+)/snapshots/(?P<pk>[0-9]+)/update/$',
-            SnapshotUpdateView.as_view(), name='snapshot_update'),
-    re_path(r'^(?P<project_id>[0-9]+)/snapshots/(?P<pk>[0-9]+)/rollback/$',
-            SnapshotRollbackView.as_view(), name='snapshot_rollback'),
-    re_path(r'^(?P<project_id>[0-9]+)/snapshots/(?P<pk>[0-9]+)/export/(?P<format>[a-z-]+)/$',
-            SnapshotExportView.as_view(), name='snapshot_export'),
-
-    re_path(r'^(?P<pk>[0-9]+)/answers/$',
-            ProjectAnswersView.as_view(), name='project_answers'),
-    re_path(r'^(?P<pk>[0-9]+)/answers/export/(?P<format>[a-z]+)/$',
-            ProjectAnswersExportView.as_view(), name='project_answers_export'),
-
-    re_path(r'^(?P<pk>[0-9]+)/snapshots/(?P<snapshot_id>[0-9]+)/answers/$',
-            ProjectAnswersView.as_view(), name='project_answers'),
-    re_path(r'^(?P<pk>[0-9]+)/snapshots/(?P<snapshot_id>[0-9]+)/answers/export/(?P<format>[a-z]+)/$',
-            ProjectAnswersExportView.as_view(), name='project_answers_export'),
-
-    re_path(r'^(?P<pk>[0-9]+)/views/(?P<view_id>[0-9]+)/$',
-            ProjectViewView.as_view(), name='project_view'),
-    re_path(r'^(?P<pk>[0-9]+)/views/(?P<view_id>[0-9]+)/export/(?P<format>[a-z]+)/$',
-            ProjectViewExportView.as_view(), name='project_view_export'),
-
-    re_path(r'^(?P<pk>[0-9]+)/snapshots/(?P<snapshot_id>[0-9]+)/views/(?P<view_id>[0-9]+)/$',
-            ProjectViewView.as_view(), name='project_view'),
-    re_path(r'^(?P<pk>[0-9]+)/snapshots/(?P<snapshot_id>[0-9]+)/views/(?P<view_id>[0-9]+)/export/(?P<format>[a-z]+)/$',
-            ProjectViewExportView.as_view(), name='project_view_export'),
-
     re_path(r'^(?P<pk>[0-9]+)/interview/',
             ProjectInterviewView.as_view(), name='project_interview'),
     re_path(r'^(?P<pk>[0-9]+)/error/',
             ProjectErrorView.as_view(), name='project_error'),
+    re_path(r'^(?P<pk>[0-9]+)/',
+            ProjectDetailView.as_view(), name='project'),
+    re_path(r'^join/(?P<token>.+)/$',
+            ProjectJoinView.as_view(), name='project_join'),
 ]
diff --git a/rdmo/projects/urls/v1.py b/rdmo/projects/urls/v1.py
index a3ab70fa9d..f0234e8ee7 100644
--- a/rdmo/projects/urls/v1.py
+++ b/rdmo/projects/urls/v1.py
@@ -16,6 +16,7 @@
     ProjectSnapshotViewSet,
     ProjectValueViewSet,
     ProjectViewSet,
+    RoleViewSet,
     SnapshotViewSet,
     ValueViewSet,
 )
@@ -45,6 +46,7 @@
 router.register(r'snapshots', SnapshotViewSet, basename='snapshot')
 router.register(r'values', ValueViewSet, basename='value')
 router.register(r'catalogs', CatalogViewSet, basename='catalog')
+router.register(r'roles', RoleViewSet, basename='role')
 
 urlpatterns = [
     path('', include(router.urls)),
diff --git a/rdmo/projects/views.py b/rdmo/projects/views.py
new file mode 100644
index 0000000000..c7b6e43d90
--- /dev/null
+++ b/rdmo/projects/views.py
@@ -0,0 +1,79 @@
+import logging
+
+from django.contrib.auth.mixins import LoginRequiredMixin
+from django.shortcuts import redirect
+from django.utils.decorators import method_decorator
+from django.utils.translation import gettext_lazy as _
+from django.views.decorators.csrf import ensure_csrf_cookie
+from django.views.generic import DetailView, TemplateView
+
+from rdmo.core.views import CSRFViewMixin, ObjectPermissionMixin, RedirectViewMixin, StoreIdViewMixin
+
+from .models import Invite, Membership, Project
+
+logger = logging.getLogger(__name__)
+
+
+class ProjectsView(LoginRequiredMixin, CSRFViewMixin, StoreIdViewMixin, TemplateView):
+    template_name = 'projects/projects.html'
+
+
+class ProjectDetailView(ObjectPermissionMixin, CSRFViewMixin, StoreIdViewMixin, DetailView):
+    model = Project
+    permission_required = 'projects.view_project_object'
+
+
+class ProjectJoinView(LoginRequiredMixin, RedirectViewMixin, TemplateView):
+    template_name = 'core/error.html'
+
+    def get(self, request, token):
+        try:
+            invite = Invite.objects.get(token=token)
+
+            if invite.is_expired:
+                error = _('Sorry, your invitation has been expired.')
+                invite.delete()
+            elif invite.user and invite.user != request.user:
+                error = _('Sorry, but this invitation is for the user "%s".') % invite.user
+            elif Membership.objects.filter(project=invite.project, user=request.user).exists():
+                invite.delete()
+                return redirect(invite.project.get_absolute_url())
+            else:
+                Membership.objects.create(
+                    project=invite.project,
+                    user=request.user,
+                    role=invite.role
+                )
+                invite.delete()
+                return redirect(invite.project.get_absolute_url())
+
+        except Invite.DoesNotExist:
+            error = _('Sorry, the invitation link is not valid.')
+
+        return self.render_to_response({
+            'title': _('Error'),
+            'errors': [error]
+        })
+
+
+class ProjectInterviewView(ObjectPermissionMixin, CSRFViewMixin, StoreIdViewMixin, DetailView):
+    model = Project
+    queryset = Project.objects.all()
+    permission_required = 'projects.view_project_object'
+    template_name = 'projects/project_interview.html'
+
+    @method_decorator(ensure_csrf_cookie)
+    def get(self, request, *args, **kwargs):
+        self.object = self.get_object()
+
+        if self.object.catalog is None:
+            return redirect('project_error', pk=self.object.pk)
+        else:
+            return super().get(request, *args, **kwargs)
+
+
+class ProjectErrorView(ObjectPermissionMixin, DetailView):
+    model = Project
+    queryset = Project.objects.all()
+    permission_required = 'projects.view_project_object'
+    template_name = 'projects/project_error.html'
diff --git a/rdmo/projects/views/__init__.py b/rdmo/projects/views/__init__.py
deleted file mode 100644
index 6f64247601..0000000000
--- a/rdmo/projects/views/__init__.py
+++ /dev/null
@@ -1,30 +0,0 @@
-from .integration import IntegrationCreateView, IntegrationDeleteView, IntegrationUpdateView, IntegrationWebhookView
-from .invite import InviteDeleteView
-from .issue import IssueDetailView, IssueSendView, IssueUpdateView
-from .membership import MembershipCreateView, MembershipDeleteView, MembershipUpdateView
-from .project import (
-    ProjectCancelView,
-    ProjectDeleteView,
-    ProjectDetailView,
-    ProjectErrorView,
-    ProjectExportView,
-    ProjectInterviewView,
-    ProjectJoinView,
-    ProjectLeaveView,
-    ProjectsView,
-)
-from .project_answers import ProjectAnswersExportView, ProjectAnswersView
-from .project_copy import ProjectCopyView
-from .project_create import ProjectCreateImportView, ProjectCreateView
-from .project_update import (
-    ProjectUpdateCatalogView,
-    ProjectUpdateImportView,
-    ProjectUpdateInformationView,
-    ProjectUpdateParentView,
-    ProjectUpdateTasksView,
-    ProjectUpdateView,
-    ProjectUpdateViewsView,
-    ProjectUpdateVisibilityView,
-)
-from .project_view import ProjectViewExportView, ProjectViewView
-from .snapshot import SnapshotCreateView, SnapshotExportView, SnapshotRollbackView, SnapshotUpdateView
diff --git a/rdmo/projects/views/integration.py b/rdmo/projects/views/integration.py
deleted file mode 100644
index a0191c0b85..0000000000
--- a/rdmo/projects/views/integration.py
+++ /dev/null
@@ -1,92 +0,0 @@
-import logging
-
-from django.http import Http404
-from django.shortcuts import get_object_or_404
-from django.utils.decorators import method_decorator
-from django.views.decorators.csrf import csrf_exempt
-from django.views.generic import CreateView, DeleteView, UpdateView, View
-
-from rdmo.core.plugins import get_plugin
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-
-from ..forms import IntegrationForm
-from ..models import Integration, Project
-
-logger = logging.getLogger(__name__)
-
-
-class IntegrationCreateView(ObjectPermissionMixin, RedirectViewMixin, CreateView):
-    model = Integration
-    form_class = IntegrationForm
-    permission_required = 'projects.add_integration_object'
-
-    def dispatch(self, *args, **kwargs):
-        self.project = get_object_or_404(Project.objects.all(), pk=self.kwargs['project_id'])
-        self.provider_key = self.kwargs['provider_key']
-        return super().dispatch(*args, **kwargs)
-
-    def get_permission_object(self):
-        return self.project
-
-    def get_form_kwargs(self):
-        kwargs = super().get_form_kwargs()
-        kwargs['project'] = self.project
-        kwargs['provider_key'] = self.provider_key
-        return kwargs
-
-    def get_context_data(self, **kwargs):
-        kwargs['provider'] = get_plugin('PROJECT_ISSUE_PROVIDERS', self.provider_key)
-        return super().get_context_data(**kwargs)
-
-    def get_success_url(self):
-        return self.project.get_absolute_url()
-
-
-class IntegrationUpdateView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    form_class = IntegrationForm
-    permission_required = 'projects.change_integration_object'
-
-    def get_queryset(self):
-        return Integration.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-    def get_form_kwargs(self):
-        kwargs = super().get_form_kwargs()
-        kwargs['project'] = self.get_object().project
-        return kwargs
-
-    def get_context_data(self, **kwargs):
-        kwargs['provider'] = self.get_object().provider
-        return super().get_context_data(**kwargs)
-
-    def get_success_url(self):
-        return self.get_object().project.get_absolute_url()
-
-
-class IntegrationDeleteView(ObjectPermissionMixin, RedirectViewMixin, DeleteView):
-    permission_required = 'projects.delete_integration_object'
-
-    def get_queryset(self):
-        return Integration.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-    def get_success_url(self):
-        return self.get_object().project.get_absolute_url()
-
-
-@method_decorator(csrf_exempt, name='dispatch')
-class IntegrationWebhookView(View):
-
-    def post(self, request, *args, **kwargs):
-        pk = kwargs.get('pk')
-        project_id = kwargs.get('project_id')
-
-        try:
-            integration = Integration.objects.filter(project_id=project_id).get(pk=pk)
-            return integration.provider.webhook(request, integration)
-        except Integration.DoesNotExist as e:
-            raise Http404 from e
diff --git a/rdmo/projects/views/invite.py b/rdmo/projects/views/invite.py
deleted file mode 100644
index 87ede8b660..0000000000
--- a/rdmo/projects/views/invite.py
+++ /dev/null
@@ -1,22 +0,0 @@
-import logging
-
-from django.views.generic import DeleteView
-
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-
-from ..models import Invite
-
-logger = logging.getLogger(__name__)
-
-
-class InviteDeleteView(ObjectPermissionMixin, RedirectViewMixin, DeleteView):
-    permission_required = 'projects.delete_invite_object'
-
-    def get_queryset(self):
-        return Invite.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-    def get_success_url(self):
-        return self.get_object().project.get_absolute_url()
diff --git a/rdmo/projects/views/issue.py b/rdmo/projects/views/issue.py
deleted file mode 100644
index 9ec02de583..0000000000
--- a/rdmo/projects/views/issue.py
+++ /dev/null
@@ -1,197 +0,0 @@
-import logging
-
-from django.conf import settings
-from django.contrib.sites.models import Site
-from django.core.exceptions import ObjectDoesNotExist
-from django.http import Http404, HttpResponse, HttpResponseRedirect
-from django.template import TemplateSyntaxError
-from django.template.loader import render_to_string
-from django.views.generic import DetailView, UpdateView
-
-from rest_framework.reverse import reverse
-
-from rdmo.core.mail import send_mail
-from rdmo.core.utils import render_to_format
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-from rdmo.views.utils import ProjectWrapper
-
-from ..forms import IssueMailForm, IssueSendForm
-from ..models import Issue
-from ..utils import get_value_path
-
-logger = logging.getLogger(__name__)
-
-
-class IssueDetailView(ObjectPermissionMixin, DetailView):
-    permission_required = 'projects.view_issue_object'
-
-    def get_queryset(self):
-        return Issue.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-    def get_context_data(self, **kwargs):
-        project = self.get_object().project
-        project.catalog.prefetch_elements()
-        conditions = self.get_object().task.conditions.all()
-
-        sources = []
-        for condition in conditions:
-            sources.append({
-                'source': condition.source,
-                'questions': filter(lambda q: q.attribute == condition.source, project.catalog.questions),
-                'values': condition.source.values.filter(project=project, snapshot=None)
-            })
-
-        kwargs['project'] = project
-        kwargs['sources'] = sources
-        return super().get_context_data(**kwargs)
-
-
-class IssueUpdateView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    fields = ('status', )
-    permission_required = 'projects.change_issue_object'
-
-    def get_queryset(self):
-        return Issue.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-
-class IssueSendView(ObjectPermissionMixin, RedirectViewMixin, DetailView):
-    permission_required = 'projects.change_issue_object'
-    template_name = 'projects/issue_send.html'
-
-    def dispatch(self, *args, **kwargs):
-        if not settings.PROJECT_SEND_ISSUE:
-            raise Http404
-
-        return super().dispatch(*args, **kwargs)
-
-    def get_queryset(self):
-        return Issue.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-    def get_success_url(self):
-        if self.request.GET.get('next'):
-            return self.request.GET.get('next')
-        else:
-            return self.get_object().project.get_absolute_url()
-
-    def get_context_data(self, **kwargs):
-        self.object = self.get_object()
-
-        issue = self.object
-        project = self.get_object().project
-        project_url = self.request.build_absolute_uri(project.get_absolute_url())
-        site = Site.objects.get_current()
-        site_url = self.request.build_absolute_uri(reverse('home'))
-
-        if 'form' not in kwargs:
-            template_context = {
-                'issue': issue,
-                'project': project,
-                'project_url': project_url,
-                'site': site,
-                'site_url': site_url,
-                'user': self.request.user
-            }
-            subject = render_to_string('projects/issue_send_subject.txt', template_context, request=self.request)
-            message = render_to_string('projects/issue_send_message.txt', template_context, request=self.request)
-
-            kwargs['form'] = IssueSendForm(initial={
-                'subject': subject,
-                'message': message
-            }, project=project)
-
-        if 'mail_form' not in kwargs:
-            kwargs['mail_form'] = IssueMailForm()
-
-        context = super().get_context_data(**kwargs)
-        context['views'] = project.views.all()
-        context['integrations'] = project.integrations.all()
-        return context
-
-    def post(self, request, *args, **kwargs):
-        issue = self.get_object()
-        project = issue.project
-
-        form = IssueSendForm(request.POST, project=project)
-        mail_form = IssueMailForm(request.POST)
-
-        if form.is_valid():
-            subject = form.cleaned_data.get('subject')
-            message = form.cleaned_data.get('message')
-
-            snapshot = project.snapshots.filter(pk=form.cleaned_data.get('snapshot')).first()
-            attachments_format = form.cleaned_data.get('attachments_format')
-
-            attachments = []
-            if form.cleaned_data.get('attachments_answers'):
-                title = f'{project.title}.{attachments_format}'
-                response = self.render_project_answers(project, snapshot, attachments_format)
-                attachments.append((title, response.content, response['content-type']))
-
-            for view in form.cleaned_data.get('attachments_views'):
-                title = f'{project.title}.{attachments_format}'
-                response = self.render_project_views(project, snapshot, view, attachments_format)
-                attachments.append((title, response.content, response['content-type']))
-
-            for value in form.cleaned_data.get('attachments_files'):
-                attachments.append((value.file_name, value.file.read(), value.file_type))
-
-            integration_id = request.POST.get('integration')
-            if integration_id:
-                # send via integration
-                try:
-                    integration = project.integrations.get(pk=integration_id)
-                    return integration.provider.send_issue(request, issue, integration, subject, message, attachments)
-                except (ObjectDoesNotExist, AttributeError):
-                    pass
-            else:
-                if mail_form.is_valid():
-                    to_emails = [*mail_form.cleaned_data.get('recipients', []),
-                                 *mail_form.cleaned_data.get('recipients_input', [])]
-                    cc_emails = [request.user.email]
-                    reply_to = [request.user.email]
-
-                    # send the email
-                    send_mail(subject, message, to=to_emails, cc=cc_emails, reply_to=reply_to, attachments=attachments)
-
-                    # update issue status
-                    issue.status = Issue.ISSUE_STATUS_IN_PROGRESS
-                    issue.save()
-
-                    return HttpResponseRedirect(self.get_success_url())
-
-        return self.render_to_response(self.get_context_data(form=form, mail_form=mail_form))
-
-    def render_project_answers(self, project, snapshot, attachments_format):
-        return render_to_format(
-            self.request, attachments_format, project.title, 'projects/project_answers_export.html', {
-                'project': ProjectWrapper(project, snapshot),
-                'format': attachments_format,
-                'title': project.title,
-                'resource_path': get_value_path(project, snapshot)
-            }
-        )
-
-    def render_project_views(self, project, snapshot, view, attachments_format):
-        try:
-            rendered_view = view.render(project, snapshot)
-        except TemplateSyntaxError:
-            return HttpResponse()
-
-        return render_to_format(
-            self.request, attachments_format, project.title, 'projects/project_view_export.html', {
-                'format': attachments_format,
-                'title': project.title,
-                'view': view,
-                'rendered_view': rendered_view,
-                'resource_path': get_value_path(project, snapshot)
-            }
-        )
diff --git a/rdmo/projects/views/membership.py b/rdmo/projects/views/membership.py
deleted file mode 100644
index 54242b57e9..0000000000
--- a/rdmo/projects/views/membership.py
+++ /dev/null
@@ -1,96 +0,0 @@
-import logging
-
-from django.conf import settings
-from django.http import HttpResponseBadRequest, HttpResponseForbidden, HttpResponseRedirect
-from django.shortcuts import get_object_or_404
-from django.urls import reverse
-from django.views.generic import DeleteView, UpdateView
-from django.views.generic.edit import FormView
-
-from rdmo.accounts.utils import is_site_manager
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-
-from ..forms import MembershipCreateForm
-from ..models import Membership, Project
-from ..utils import is_last_owner, send_invite_email
-
-logger = logging.getLogger(__name__)
-
-
-class MembershipCreateView(ObjectPermissionMixin, RedirectViewMixin, FormView):
-    model = Membership
-    form_class = MembershipCreateForm
-    permission_required = 'projects.add_membership_object'
-    template_name = 'projects/membership_form.html'
-
-    def dispatch(self, *args, **kwargs):
-        self.project = get_object_or_404(Project.objects.all(), pk=self.kwargs['project_id'])
-        return super().dispatch(*args, **kwargs)
-
-    def get_queryset(self):
-        return Membership.objects.filter(project=self.project)
-
-    def get_permission_object(self):
-        return self.project
-
-    def get_form_kwargs(self):
-        kwargs = super().get_form_kwargs()
-        kwargs['project'] = self.project
-        kwargs['is_site_manager'] = is_site_manager(self.request.user)
-        return kwargs
-
-    def get_success_url(self):
-        return self.project.get_absolute_url()
-
-    def form_valid(self, form):
-        invite = form.save()
-        if invite is not None and settings.PROJECT_SEND_INVITE:
-            send_invite_email(self.request, invite)
-        return super().form_valid(form)
-
-
-class MembershipUpdateView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    fields = ('role', )
-    permission_required = 'projects.change_membership_object'
-
-    def get_queryset(self):
-        return Membership.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-
-class MembershipDeleteView(ObjectPermissionMixin, RedirectViewMixin, DeleteView):
-    permission_required = 'projects.delete_membership_object'
-
-    def get_queryset(self):
-        return Membership.objects.filter(project_id=self.kwargs.get('project_id'))
-
-    def form_valid(self, form):
-        self.obj = self.get_object()
-
-        if (self.request.user in self.obj.project.owners) or is_site_manager(self.request.user):
-            # user is owner or site manager
-            if is_last_owner(self.obj.project, self.obj.user):
-                logger.info('User "%s" not allowed to remove last user "%s"',
-                            self.request.user.username, self.obj.user.username)
-                return HttpResponseBadRequest()
-            else:
-                logger.info('User "%s" deletes user "%s"', self.request.user.username, self.obj.user.username)
-                success_url = reverse('project', args=[self.get_object().project.id])
-                self.obj.delete()
-                return HttpResponseRedirect(success_url)
-
-        elif self.request.user == self.obj.user:
-            # user wants to remove him/herself
-            logger.info('User "%s" deletes himself.', self.request.user.username)
-            success_url = reverse('projects')
-            self.obj.delete()
-            return HttpResponseRedirect(success_url)
-
-        else:
-            logger.info('User "%s" not allowed to remove user "%s"', self.request.user.username, self.obj.user.username)
-            return HttpResponseForbidden()
-
-    def get_permission_object(self):
-        return self.get_object().project
diff --git a/rdmo/projects/views/project.py b/rdmo/projects/views/project.py
deleted file mode 100644
index 7b0226b324..0000000000
--- a/rdmo/projects/views/project.py
+++ /dev/null
@@ -1,217 +0,0 @@
-import logging
-
-from django.conf import settings
-from django.contrib.auth.mixins import LoginRequiredMixin
-from django.db.models import F, OuterRef, Subquery
-from django.forms import Form
-from django.http import Http404
-from django.shortcuts import get_object_or_404, redirect
-from django.urls import reverse_lazy
-from django.utils.decorators import method_decorator
-from django.utils.translation import gettext_lazy as _
-from django.views.decorators.csrf import ensure_csrf_cookie
-from django.views.generic import DeleteView, DetailView, TemplateView
-from django.views.generic.edit import FormMixin
-
-from rdmo.core.plugins import get_plugin, get_plugins
-from rdmo.core.views import CSRFViewMixin, ObjectPermissionMixin, RedirectViewMixin, StoreIdViewMixin
-from rdmo.questions.models import Catalog
-
-from ...tasks.models import Task
-from ...views.models import View
-from ..models import Integration, Invite, Membership, Project
-from ..sync import filter_tasks_or_views_for_project
-from ..utils import get_upload_accept
-
-logger = logging.getLogger(__name__)
-
-
-class ProjectsView(LoginRequiredMixin, CSRFViewMixin, StoreIdViewMixin, TemplateView):
-    template_name = 'projects/projects.html'
-
-
-class ProjectDetailView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.prefetch_related(
-        'issues',
-        'issues__task',
-        'issues__task__conditions',
-        'issues__task__conditions__source',
-        'issues__task__conditions__target_option',
-        'tasks',
-        'views',
-        'values'
-    )
-    permission_required = 'projects.view_project_object'
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        project = context['project']
-        ancestors = project.get_ancestors(include_self=True)
-        values = project.values.filter(snapshot=None).select_related('attribute', 'option')
-        highest = Membership.objects.filter(project__in=ancestors, user_id=OuterRef('user_id')) \
-                                    .order_by('-project__level')
-        memberships = Membership.objects.filter(project__in=ancestors) \
-                                        .annotate(highest=Subquery(highest.values('project__level')[:1])) \
-                                        .filter(highest=F('project__level')) \
-                                        .select_related('user')
-
-        if settings.SOCIALACCOUNT:
-            # prefetch the users social account, if that relation exists
-            memberships = memberships.prefetch_related('user__socialaccount_set')
-
-        integrations = Integration.objects.filter(project__in=ancestors)
-        context['catalogs'] = Catalog.objects.filter_for_user(self.request.user)
-
-        if settings.PROJECT_TASKS_SYNC:
-            # tasks should be synced, the user can not change them
-            context['tasks_available'] = project.tasks.exists()
-        else:
-            context['tasks_available'] = (
-                filter_tasks_or_views_for_project(Task, project).exists()
-            )
-
-        if settings.PROJECT_VIEWS_SYNC:
-            # views should be synced, the user can not change them
-            context['views_available'] = project.views.exists()
-        else:
-            context['views_available'] = (
-                filter_tasks_or_views_for_project(View, project).exists()
-            )
-
-        ancestors_import = []
-        for instance in ancestors.exclude(id=project.id):
-            if self.request.user.has_perm('projects.view_project_object', instance):
-                ancestors_import.append(instance)
-        context['ancestors_import'] = ancestors_import
-        context['memberships'] = memberships.order_by('user__last_name', '-project__level')
-        context['integrations'] = integrations.order_by('provider_key', '-project__level')
-        context['providers'] = get_plugins('PROJECT_ISSUE_PROVIDERS')
-        context['issues'] = [
-            issue for issue in project.issues.order_by('-status', 'task__order', 'task__uri') if issue.resolve(values)
-        ]
-        context['views'] = project.views.order_by('order', 'uri')
-        context['snapshots'] = project.snapshots.all()
-        context['invites'] = project.invites.all()
-        context['membership'] = Membership.objects.filter(project=project, user=self.request.user).first()
-        context['upload_accept'] = ','.join([
-            suffix for suffixes in get_upload_accept().values() for suffix in suffixes
-        ])
-        return context
-
-
-class ProjectDeleteView(ObjectPermissionMixin, RedirectViewMixin, DeleteView):
-    model = Project
-    queryset = Project.objects.all()
-    success_url = reverse_lazy('projects')
-    permission_required = 'projects.delete_project_object'
-
-
-class ProjectJoinView(LoginRequiredMixin, RedirectViewMixin, TemplateView):
-    template_name = 'core/error.html'
-
-    def get(self, request, token):
-        try:
-            invite = Invite.objects.get(token=token)
-
-            if invite.is_expired:
-                error = _('Sorry, your invitation has been expired.')
-                invite.delete()
-            elif invite.user and invite.user != request.user:
-                error = _('Sorry, but this invitation is for the user "%s".') % invite.user
-            elif Membership.objects.filter(project=invite.project, user=request.user).exists():
-                invite.delete()
-                return redirect(invite.project.get_absolute_url())
-            else:
-                Membership.objects.create(
-                    project=invite.project,
-                    user=request.user,
-                    role=invite.role
-                )
-                invite.delete()
-                return redirect(invite.project.get_absolute_url())
-
-        except Invite.DoesNotExist:
-            error = _('Sorry, the invitation link is not valid.')
-
-        return self.render_to_response({
-            'title': _('Error'),
-            'errors': [error]
-        })
-
-
-class ProjectCancelView(LoginRequiredMixin, RedirectViewMixin, TemplateView):
-    template_name = 'core/error.html'
-    success_url = reverse_lazy('projects')
-
-    def get(self, request, token=None):
-        invite = get_object_or_404(Invite, token=token)
-        if invite.user in [None, request.user]:
-            invite.delete()
-
-        return redirect(self.success_url)
-
-
-class ProjectLeaveView(ObjectPermissionMixin, RedirectViewMixin, FormMixin, DetailView):
-    model = Project
-    form_class = Form
-    queryset = Project.objects.all()
-    success_url = reverse_lazy('projects')
-    permission_required = 'projects.leave_project_object'
-    template_name = 'projects/project_confirm_leave.html'
-
-    def post(self, request, *args, **kwargs):
-        form = self.get_form()
-        if form.is_valid() and 'cancel' not in request.POST:
-            membership = Membership.objects.filter(project=self.get_object()).get(user=request.user)
-            if not membership.is_last_owner:
-                membership.delete()
-
-        return redirect(self.success_url)
-
-
-class ProjectExportView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.all()
-    permission_required = 'projects.export_project_object'
-
-    def get_export_plugin(self):
-        export_plugin = get_plugin('PROJECT_EXPORTS', self.kwargs.get('format'))
-        if export_plugin is None:
-            raise Http404
-
-        export_plugin.request = self.request
-        export_plugin.project = self.object
-
-        return export_plugin
-
-    def get(self, request, *args, **kwargs):
-        self.object = self.get_object()
-        return self.get_export_plugin().render()
-
-    def post(self, request, *args, **kwargs):
-        self.object = self.get_object()
-        return self.get_export_plugin().submit()
-
-
-class ProjectInterviewView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.all()
-    permission_required = 'projects.view_project_object'
-    template_name = 'projects/project_interview.html'
-
-    @method_decorator(ensure_csrf_cookie)
-    def get(self, request, *args, **kwargs):
-        self.object = self.get_object()
-
-        if self.object.catalog is None:
-            return redirect('project_error', pk=self.object.pk)
-        else:
-            return super().get(request, *args, **kwargs)
-
-
-class ProjectErrorView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.all()
-    permission_required = 'projects.view_project_object'
-    template_name = 'projects/project_error.html'
diff --git a/rdmo/projects/views/project_answers.py b/rdmo/projects/views/project_answers.py
deleted file mode 100644
index 754a2bd4ed..0000000000
--- a/rdmo/projects/views/project_answers.py
+++ /dev/null
@@ -1,87 +0,0 @@
-import logging
-
-from django.conf import settings
-from django.shortcuts import redirect
-from django.views.generic import DetailView
-
-from rdmo.core.constants import VALUE_TYPE_FILE
-from rdmo.core.utils import render_to_format
-from rdmo.core.views import ObjectPermissionMixin
-from rdmo.views.utils import ProjectWrapper
-
-from ..models import Project, Snapshot
-from ..utils import get_value_path
-
-logger = logging.getLogger(__name__)
-
-
-class ProjectAnswersView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.all()
-
-    permission_required = 'projects.view_project_object'
-    template_name = 'projects/project_answers.html'
-    no_catalog_error_template = 'projects/project_error_no_catalog.html'
-
-    def get(self, request, *args, **kwargs):
-        self.object = self.get_object()
-
-        if self.object.catalog is None:
-            return redirect('project_error', pk=self.object.pk)
-        else:
-            context = self.get_context_data(object=self.object)
-            return self.render_to_response(context)
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-
-        # prefetch most elements of the catalog
-        context['project'].catalog.prefetch_elements()
-
-        try:
-            context['current_snapshot'] = context['project'].snapshots.get(pk=self.kwargs.get('snapshot_id'))
-        except Snapshot.DoesNotExist:
-            context['current_snapshot'] = None
-
-        # collect values with files, remove double files and order them.
-        context['attachments'] = context['project'].values.filter(snapshot=context['current_snapshot']) \
-                                                          .filter(value_type=VALUE_TYPE_FILE) \
-                                                          .order_by('file')
-
-        context.update({
-            'project_wrapper': ProjectWrapper(context['project'], context['current_snapshot']),
-            'snapshots': list(context['project'].snapshots.values('id', 'title')),
-            'export_formats': settings.EXPORT_FORMATS
-        })
-
-        return context
-
-
-class ProjectAnswersExportView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.all()
-    permission_required = 'projects.view_project_object'
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-
-        # prefetch most elements of the catalog
-        context['project'].catalog.prefetch_elements()
-
-        try:
-            context['current_snapshot'] = context['project'].snapshots.get(pk=self.kwargs.get('snapshot_id'))
-        except Snapshot.DoesNotExist:
-            context['current_snapshot'] = None
-
-        context.update({
-            'project_wrapper': ProjectWrapper(context['project'], context['current_snapshot']),
-            'title': context['project'].title,
-            'format': self.kwargs.get('format'),
-            'resource_path': get_value_path(context['project'], context['current_snapshot'])
-        })
-
-        return context
-
-    def render_to_response(self, context, **response_kwargs):
-        return render_to_format(self.request, context['format'], context['title'],
-                                'projects/project_answers_export.html', context)
diff --git a/rdmo/projects/views/project_copy.py b/rdmo/projects/views/project_copy.py
deleted file mode 100644
index c162a48a9a..0000000000
--- a/rdmo/projects/views/project_copy.py
+++ /dev/null
@@ -1,39 +0,0 @@
-import logging
-
-from django.contrib.sites.shortcuts import get_current_site
-from django.http import HttpResponseRedirect
-from django.views.generic import UpdateView
-
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-from rdmo.questions.models import Catalog
-
-from ..forms import ProjectForm
-from ..models import Project
-from ..utils import copy_project
-
-logger = logging.getLogger(__name__)
-
-
-class ProjectCopyView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-
-    model = Project
-    form_class = ProjectForm
-    permission_required = ('projects.add_project', 'projects.view_project_object')
-
-    def get_form_kwargs(self):
-        catalogs = Catalog.objects.filter_for_user(self.request.user)
-        projects = Project.objects.filter_user(self.request.user)
-
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'copy': True,
-            'catalogs': catalogs,
-            'projects': projects
-        })
-        return form_kwargs
-
-    def form_valid(self, form):
-        site = get_current_site(self.request)
-        owners = [self.request.user]
-        project = copy_project(form.instance, site, owners)
-        return HttpResponseRedirect(project.get_absolute_url())
diff --git a/rdmo/projects/views/project_create.py b/rdmo/projects/views/project_create.py
deleted file mode 100644
index ed0caec9c9..0000000000
--- a/rdmo/projects/views/project_create.py
+++ /dev/null
@@ -1,85 +0,0 @@
-import logging
-
-from django.conf import settings
-from django.contrib.auth.mixins import LoginRequiredMixin
-from django.contrib.sites.shortcuts import get_current_site
-from django.urls import reverse_lazy
-from django.views.generic import CreateView, TemplateView
-
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-from rdmo.questions.models import Catalog
-from rdmo.tasks.models import Task
-from rdmo.views.models import View
-
-from ..forms import ProjectForm
-from ..mixins import ProjectImportMixin
-from ..models import Membership, Project
-from ..sync import filter_tasks_or_views_for_project
-
-logger = logging.getLogger(__name__)
-
-
-class ProjectCreateView(ObjectPermissionMixin, LoginRequiredMixin,
-                        RedirectViewMixin, CreateView):
-    model = Project
-    form_class = ProjectForm
-    permission_required = 'projects.add_project'
-
-    def get_form_kwargs(self):
-        catalogs = Catalog.objects.filter_for_user(self.request.user)
-        projects = Project.objects.filter_user(self.request.user)
-
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'catalogs': catalogs,
-            'projects': projects
-        })
-        return form_kwargs
-
-    def form_valid(self, form):
-        # add current site
-        form.instance.site = get_current_site(self.request)
-
-        # save the project
-        response = super().form_valid(form)
-
-        # add current user as owner
-        membership = Membership(project=form.instance, user=self.request.user, role='owner')
-        membership.save()
-
-        # add all tasks to project
-        if not settings.PROJECT_TASKS_SYNC:
-            tasks = filter_tasks_or_views_for_project(Task, form.instance)
-            for task in tasks:
-                form.instance.tasks.add(task)
-
-        # add all views to project
-        if not settings.PROJECT_VIEWS_SYNC:
-            views = filter_tasks_or_views_for_project(View, form.instance)
-            for view in views:
-                form.instance.views.add(view)
-
-        return response
-
-
-class ProjectCreateImportView(ObjectPermissionMixin, LoginRequiredMixin,
-                              ProjectImportMixin, TemplateView):
-    success_url = reverse_lazy('projects')
-    permission_required = 'projects.add_project'
-
-    def get(self, request, *args, **kwargs):
-        self.object = None
-
-        if kwargs.get('format') is None:
-            return self.import_form()
-        else:
-            return self.get_import_plugin(self.kwargs.get('format'), self.object).render()
-
-    def post(self, request, *args, **kwargs):
-        self.object = None
-
-        method = request.POST.get('method')
-        if method in ['upload_file', 'import_file']:
-            return getattr(self, method)()
-        else:
-            return self.get_import_plugin(self.kwargs.get('format'), self.object).submit()
diff --git a/rdmo/projects/views/project_update.py b/rdmo/projects/views/project_update.py
deleted file mode 100644
index 64e19f5a5b..0000000000
--- a/rdmo/projects/views/project_update.py
+++ /dev/null
@@ -1,196 +0,0 @@
-import logging
-
-from django.conf import settings
-from django.contrib.sites.models import Site
-from django.http import Http404
-from django.utils.translation import gettext_lazy as _
-from django.views.generic import UpdateView
-
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-from rdmo.questions.models import Catalog
-from rdmo.tasks.models import Task
-from rdmo.views.models import View
-
-from ..forms import (
-    ProjectForm,
-    ProjectUpdateCatalogForm,
-    ProjectUpdateInformationForm,
-    ProjectUpdateParentForm,
-    ProjectUpdateTasksForm,
-    ProjectUpdateViewsForm,
-    ProjectUpdateVisibilityForm,
-)
-from ..mixins import ProjectImportMixin
-from ..models import Project, Visibility
-from ..sync import filter_tasks_or_views_for_project
-
-logger = logging.getLogger(__name__)
-
-
-class ProjectUpdateView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    form_class = ProjectForm
-    permission_required = 'projects.change_project_object'
-
-    def get_form_kwargs(self):
-        catalogs = Catalog.objects.filter_for_user(self.request.user)
-        projects = Project.objects.filter_user(self.request.user)
-
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'catalogs': catalogs,
-            'projects': projects
-        })
-        return form_kwargs
-
-
-class ProjectUpdateInformationView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    form_class = ProjectUpdateInformationForm
-    permission_required = 'projects.change_project_object'
-
-
-class ProjectUpdateVisibilityView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    form_class = ProjectUpdateVisibilityForm
-    permission_required = 'projects.change_visibility_object'
-    template_name = 'projects/project_form_visibility.html'
-
-    def get_form_kwargs(self):
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'user': self.request.user,
-            'site': Site.objects.get_current()
-        })
-        return form_kwargs
-
-    def get_context_data(self):
-        current_site = Site.objects.get_current()
-        context = super().get_context_data()
-
-        try:
-            visibility = self.get_object().visibility
-
-            if settings.MULTISITE:
-                if self.request.user.has_perm('projects.change_visibility'):
-                    context['submit_label'] = _('Update visibility')
-                    context['delete_label'] = _('Remove visibility')
-                elif visibility.sites.all() and current_site not in visibility.sites.all():
-                    context['submit_label'] = _('Make visible for this site')
-                elif settings.GROUPS:
-                    context['submit_label'] = _('Update visibility')
-                    context['delete_label'] = _('Remove visibility')
-                else:
-                    context['delete_label'] = _('Remove visibility')
-            elif settings.GROUPS:
-                context['submit_label'] = _('Update visibility')
-                context['delete_label'] = _('Remove visibility')
-            else:
-                context['delete_label'] = _('Remove visibility')
-
-        except Visibility.DoesNotExist:
-            context['submit_label'] = _('Make visible')
-
-        return context
-
-
-class ProjectUpdateCatalogView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    form_class = ProjectUpdateCatalogForm
-    permission_required = 'projects.change_project_object'
-
-    def get_form_kwargs(self):
-        catalogs = Catalog.objects.filter_for_user(self.request.user)
-
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'catalogs': catalogs
-        })
-        return form_kwargs
-
-
-class ProjectUpdateTasksView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    form_class = ProjectUpdateTasksForm
-    permission_required = 'projects.change_project_object'
-
-    def dispatch(self, request, *args, **kwargs):
-        if settings.PROJECT_TASKS_SYNC:
-            raise Http404
-        return super().dispatch(request, *args, **kwargs)
-
-    def get_form_kwargs(self):
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'tasks': filter_tasks_or_views_for_project(Task, self.object)
-        })
-        return form_kwargs
-
-    def get_success_url(self):
-        return self.get_object().get_absolute_url()
-
-
-class ProjectUpdateViewsView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    form_class = ProjectUpdateViewsForm
-    permission_required = 'projects.change_project_object'
-
-    def dispatch(self, request, *args, **kwargs):
-        if settings.PROJECT_VIEWS_SYNC:
-            raise Http404
-        return super().dispatch(request, *args, **kwargs)
-
-    def get_form_kwargs(self):
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'views': filter_tasks_or_views_for_project(View, self.object)
-        })
-        return form_kwargs
-
-    def get_success_url(self):
-        return self.get_object().get_absolute_url()
-
-
-class ProjectUpdateParentView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    form_class = ProjectUpdateParentForm
-    permission_required = 'projects.change_project_object'
-
-    def get_form_kwargs(self):
-        projects = Project.objects.filter_user(self.request.user)
-
-        form_kwargs = super().get_form_kwargs()
-        form_kwargs.update({
-            'projects': projects
-        })
-        return form_kwargs
-
-
-class ProjectUpdateImportView(ProjectImportMixin, ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Project
-    queryset = Project.objects.all()
-    permission_required = 'projects.import_project_object'
-
-    def get(self, request, *args, **kwargs):
-        self.object = self.get_object()
-
-        if kwargs.get('format') is None:
-            return self.import_form()
-        else:
-            return self.get_import_plugin(self.kwargs.get('format'), self.object).render()
-
-    def post(self, request, *args, **kwargs):
-        self.object = self.get_object()
-
-        method = request.POST.get('method')
-        if method in ['upload_file', 'import_file', 'import_project']:
-            return getattr(self, method)()
-        else:
-            return self.get_import_plugin(self.kwargs.get('format'), self.object).submit()
diff --git a/rdmo/projects/views/project_view.py b/rdmo/projects/views/project_view.py
deleted file mode 100644
index d7d1d95e2c..0000000000
--- a/rdmo/projects/views/project_view.py
+++ /dev/null
@@ -1,100 +0,0 @@
-import logging
-
-from django.conf import settings
-from django.http import Http404
-from django.template import TemplateSyntaxError
-from django.views.generic import DetailView
-
-from rdmo.core.constants import VALUE_TYPE_FILE
-from rdmo.core.utils import render_to_format
-from rdmo.core.views import ObjectPermissionMixin
-from rdmo.views.models import View
-
-from ..models import Project, Snapshot
-from ..utils import get_value_path
-
-logger = logging.getLogger(__name__)
-
-
-class ProjectViewView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.all()
-    permission_required = 'projects.view_project_object'
-    template_name = 'projects/project_view.html'
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-
-        # prefetch most elements of the catalog
-        context['project'].catalog.prefetch_elements()
-
-        try:
-            context['current_snapshot'] = context['project'].snapshots.get(pk=self.kwargs.get('snapshot_id'))
-        except Snapshot.DoesNotExist:
-            context['current_snapshot'] = None
-
-        try:
-            context['view'] = context['project'].views.get(pk=self.kwargs.get('view_id'))
-        except View.DoesNotExist as e:
-            raise Http404 from e
-
-        try:
-            context['rendered_view'] = context['view'].render(context['project'],
-                                                              snapshot=context['current_snapshot'])
-        except TemplateSyntaxError:
-            context['rendered_view'] = None
-
-        # collect values with files, remove double files and order them.
-        context['attachments'] = context['project'].values.filter(snapshot=context['current_snapshot']) \
-                                                          .filter(value_type=VALUE_TYPE_FILE) \
-                                                          .order_by('file')
-
-        context.update({
-            'snapshots': list(context['project'].snapshots.values('id', 'title')),
-            'export_formats': settings.EXPORT_FORMATS
-        })
-
-        return context
-
-
-class ProjectViewExportView(ObjectPermissionMixin, DetailView):
-    model = Project
-    queryset = Project.objects.all()
-    permission_required = 'projects.view_project_object'
-
-    def get_context_data(self, **kwargs):
-        export_format = self.kwargs.get('format')
-
-        context = super().get_context_data(**kwargs)
-
-        # prefetch most elements of the catalog
-        context['project'].catalog.prefetch_elements()
-
-        try:
-            context['current_snapshot'] = context['project'].snapshots.get(pk=self.kwargs.get('snapshot_id'))
-        except Snapshot.DoesNotExist:
-            context['current_snapshot'] = None
-
-        try:
-            context['view'] = context['project'].views.get(pk=self.kwargs.get('view_id'))
-        except View.DoesNotExist as e:
-            raise Http404 from e
-
-        try:
-            context['rendered_view'] = context['view'].render(context['project'],
-                                                              snapshot=context['current_snapshot'],
-                                                              export_format=export_format)
-        except TemplateSyntaxError:
-            context['rendered_view'] = None
-
-        context.update({
-            'title': context['project'].title,
-            'format': export_format,
-            'resource_path': get_value_path(context['project'], context['current_snapshot'])
-        })
-
-        return context
-
-    def render_to_response(self, context, **response_kwargs):
-        return render_to_format(self.request, context['format'], context['title'],
-                                'projects/project_view_export.html', context)
diff --git a/rdmo/projects/views/snapshot.py b/rdmo/projects/views/snapshot.py
deleted file mode 100644
index 437f8acd01..0000000000
--- a/rdmo/projects/views/snapshot.py
+++ /dev/null
@@ -1,96 +0,0 @@
-import logging
-
-from django.http import Http404, HttpResponseRedirect
-from django.shortcuts import get_object_or_404
-from django.urls import reverse
-from django.views.generic import CreateView, DetailView, UpdateView
-
-from rdmo.core.plugins import get_plugin
-from rdmo.core.views import ObjectPermissionMixin, RedirectViewMixin
-
-from ..forms import SnapshotCreateForm
-from ..models import Project, Snapshot
-
-logger = logging.getLogger(__name__)
-
-
-class SnapshotCreateView(ObjectPermissionMixin, RedirectViewMixin, CreateView):
-    model = Snapshot
-    form_class = SnapshotCreateForm
-    permission_required = 'projects.add_snapshot_object'
-
-    def dispatch(self, *args, **kwargs):
-        self.project = get_object_or_404(Project.objects.all(), pk=self.kwargs['project_id'])
-        return super().dispatch(*args, **kwargs)
-
-    def get_permission_object(self):
-        return self.project
-
-    def get_form_kwargs(self):
-        kwargs = super().get_form_kwargs()
-        kwargs['project'] = self.project
-        return kwargs
-
-
-class SnapshotUpdateView(ObjectPermissionMixin, RedirectViewMixin, UpdateView):
-    model = Snapshot
-    queryset = Snapshot.objects.all()
-    fields = ['title', 'description']
-    permission_required = 'projects.change_snapshot_object'
-
-    def get_queryset(self):
-        return Snapshot.objects.filter(project_id=self.kwargs['project_id'])
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-
-class SnapshotRollbackView(ObjectPermissionMixin, RedirectViewMixin, DetailView):
-    model = Snapshot
-    queryset = Snapshot.objects.all()
-    permission_required = 'projects.rollback_snapshot_object'
-    template_name = 'projects/snapshot_rollback.html'
-
-    def get_queryset(self):
-        return Snapshot.objects.filter(project_id=self.kwargs['project_id'])
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-    def post(self, request, *args, **kwargs):
-        snapshot = self.get_object()
-
-        if 'cancel' not in request.POST:
-            snapshot.rollback()
-
-        return HttpResponseRedirect(reverse('project', args=[snapshot.project.id]))
-
-
-class SnapshotExportView(ObjectPermissionMixin, DetailView):
-    model = Snapshot
-    queryset = Snapshot.objects.all()
-    permission_required = 'projects.export_snapshot_object'
-
-    def get_queryset(self):
-        return Snapshot.objects.filter(project_id=self.kwargs['project_id'])
-
-    def get_permission_object(self):
-        return self.get_object().project
-
-    def get_export_plugin(self):
-        export_plugin = get_plugin('PROJECT_SNAPSHOT_EXPORTS', self.kwargs.get('format'))
-        if export_plugin is None:
-            raise Http404
-
-        export_plugin.request = self.request
-        export_plugin.snapshot = self.object
-
-        return export_plugin
-
-    def get(self, request, *args, **kwargs):
-        self.object = self.get_object()
-        return self.get_export_plugin().render()
-
-    def post(self, request, *args, **kwargs):
-        self.object = self.get_object()
-        return self.get_export_plugin().submit()
diff --git a/rdmo/projects/viewsets.py b/rdmo/projects/viewsets.py
index d16ed7b90c..ec89549474 100644
--- a/rdmo/projects/viewsets.py
+++ b/rdmo/projects/viewsets.py
@@ -1,16 +1,17 @@
 from django.conf import settings
 from django.contrib.sites.shortcuts import get_current_site
 from django.core.exceptions import ObjectDoesNotExist
-from django.db.models import OuterRef, Prefetch, Q, Subquery
+from django.db.models import Case, F, IntegerField, OuterRef, Prefetch, Q, Subquery, When
 from django.db.models.functions import Coalesce, Greatest
 from django.http import Http404, HttpResponseRedirect
+from django.template.loader import render_to_string
 from django.utils.translation import gettext_lazy as _
 
 from rest_framework import serializers, status
 from rest_framework.decorators import action
 from rest_framework.exceptions import NotFound, ValidationError
 from rest_framework.filters import SearchFilter
-from rest_framework.mixins import CreateModelMixin, ListModelMixin, RetrieveModelMixin, UpdateModelMixin
+from rest_framework.mixins import ListModelMixin, RetrieveModelMixin, UpdateModelMixin
 from rest_framework.pagination import PageNumberPagination
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
@@ -21,24 +22,30 @@
 from rest_framework_extensions.mixins import NestedViewSetMixin
 
 from rdmo.conditions.models import Condition
+from rdmo.core.constants import VALUE_TYPE_FILE
 from rdmo.core.permissions import HasModelPermission
-from rdmo.core.utils import human2bytes, is_truthy, return_file_response
+from rdmo.core.utils import human2bytes, is_truthy, render_to_format, return_file_response
+from rdmo.core.views import ChoicesViewSet
 from rdmo.options.models import OptionSet
 from rdmo.questions.models import Catalog, Page, Question, QuestionSet
 from rdmo.tasks.models import Task
 from rdmo.views.models import View
+from rdmo.views.utils import ProjectWrapper
 
+from .constants import ROLE_CHOICES, ROLE_RANKS
 from .filters import (
     AttributeFilterBackend,
     OptionFilterBackend,
     ProjectDateFilterBackend,
     ProjectOrderingFilter,
+    ProjectRoleFilterBackend,
     ProjectSearchFilterBackend,
     ProjectUserFilterBackend,
     SnapshotFilterBackend,
 )
 from .models import Continuation, Integration, Invite, Issue, Membership, Project, Snapshot, Value, Visibility
 from .permissions import (
+    HasProjectLeavePermission,
     HasProjectPagePermission,
     HasProjectPermission,
     HasProjectProgressModelPermission,
@@ -57,16 +64,24 @@
     InviteSerializer,
     IssueSerializer,
     MembershipSerializer,
+    ProjectAnswersSerializer,
     ProjectCopySerializer,
+    ProjectHierarchySerializer,
     ProjectIntegrationSerializer,
+    ProjectInviteCreateSerializer,
     ProjectInviteSerializer,
     ProjectInviteUpdateSerializer,
     ProjectIssueSerializer,
+    ProjectListSerializer,
+    ProjectMembershipCreateSerializer,
+    ProjectMembershipHierarchySerializer,
     ProjectMembershipSerializer,
     ProjectMembershipUpdateSerializer,
     ProjectSerializer,
     ProjectSnapshotSerializer,
     ProjectValueSerializer,
+    ProjectViewSerializer,
+    ProjectViewsSerializer,
     ProjectVisibilitySerializer,
     SnapshotSerializer,
     UserInviteSerializer,
@@ -84,6 +99,7 @@
     copy_project,
     get_contact_message,
     get_upload_accept,
+    get_value_path,
     send_contact_message,
     send_invite_email,
 )
@@ -95,12 +111,12 @@ class ProjectPagination(PageNumberPagination):
 
 class ProjectViewSet(ModelViewSet):
     permission_classes = (HasModelPermission | HasProjectsPermission, )
-    serializer_class = ProjectSerializer
     pagination_class = ProjectPagination
 
     filter_backends = (
         DjangoFilterBackend,
         ProjectUserFilterBackend,
+        ProjectRoleFilterBackend,
         ProjectDateFilterBackend,
         ProjectOrderingFilter,
         ProjectSearchFilterBackend,
@@ -115,35 +131,93 @@ class ProjectViewSet(ModelViewSet):
         'title',
         'progress',
         'role',
+        'current_role',
+        'highest_role',
         'owner',
         'updated',
         'created',
         'last_changed'
     )
 
-    filter_for_user = False  # flag for get_queryset to return only projects like for a regular user
-
     def get_queryset(self):
-        queryset = Project.objects.filter_user(self.request.user, self.filter_for_user).distinct().prefetch_related(
-            'snapshots',
-            'views',
-            Prefetch('memberships', queryset=Membership.objects.select_related('user'), to_attr='memberships_list')
-        ).select_related('catalog', 'visibility')
+        if hasattr(self, '_cached_queryset'):
+            return self._cached_queryset
+
+        # for the user action (below), we need to set filter_for_user to s to filter the
+        # projects for the current user regardless of their permissions, e.g. for admins
+        filter_for_user = (self.action == 'user')
+
+        # create a query to prefetch the memberships incl. the socialaccounts
+        membership_queryset = Membership.objects.select_related('user')
+        if settings.SOCIALACCOUNT:
+            membership_queryset = membership_queryset.prefetch_related('user__socialaccount_set')
+
+        queryset = (
+            Project.objects.filter_user(self.request.user, filter_for_user).distinct()
+                           .prefetch_related(
+                                'views',
+                                Prefetch('memberships', queryset=membership_queryset, to_attr='prefetched_memberships')
+                            )
+                           .select_related('catalog', 'visibility')
+        )
+
+        # prepare subquery for the role of the current user
+        current_role_subquery = Subquery(
+            Membership.objects.filter(project=OuterRef('pk'), user=self.request.user).values('role')
+        )
+
+        # create a case for the highest role in the hierarchy, and the other way around
+        role_rank_case = Case(
+            *[When(role=role, then=rank) for role, rank in ROLE_RANKS.items()], output_field=IntegerField()
+        )
+
+        # prepare subquery for the highest role in the hierarchy for the current user
+        highest_role_membership_subquery = (
+            Membership.objects.filter(
+                user=self.request.user,
+                project__tree_id=OuterRef('tree_id'),
+                project__lft__lte=OuterRef('lft'),
+                project__rght__gte=OuterRef('rght'),
+            )
+            .annotate(role_rank=role_rank_case)
+            .order_by('-role_rank')
+        )
 
         # prepare subquery for last_changed
         last_changed_subquery = Subquery(
             Value.objects.filter(project=OuterRef('pk')).order_by('-updated').values('updated')[:1]
         )
-        # the 'updated' field from a Project always returns a valid DateTime value
-        # when Greatest returns null, then Coalesce will return the value for 'updated' as a fall-back
-        # when Greatest returns a value, then Coalesce will return this value
-        queryset = queryset.annotate(last_changed=Coalesce(Greatest(last_changed_subquery, 'updated'), 'updated'))
 
-        return queryset
+        # annotate the queryset with the subqueries
+        queryset = queryset.annotate(
+            current_role=current_role_subquery,
+            # it is important that each highest_role field has its own subquery since you cannot use
+            # something like OuterRef('highest_role_membership_id') in a different subquery
+            highest_role=Subquery(highest_role_membership_subquery.values('role')[:1]),
+            highest_role_project_id=Subquery(highest_role_membership_subquery.values('project_id')[:1]),
+            highest_role_project_title=Subquery(highest_role_membership_subquery.values('project__title')[:1]),
+            highest_role_membership_id=Subquery(highest_role_membership_subquery.values('id')[:1]),
+            # the 'updated' field from a Project always returns a valid DateTime value
+            # when Greatest returns null, then Coalesce will return the value for 'updated' as a fall-back
+            # when Greatest returns a value, then Coalesce will return this value
+            last_changed=Coalesce(Greatest(last_changed_subquery, 'updated'), 'updated')
+        )
+
+        # order queryset by last_changed by default
+        queryset = queryset.order_by('-last_changed')
+
+        # cache queryset and return
+        self._cached_queryset = queryset
+        return self._cached_queryset
+
+    def get_serializer_class(self):
+        if self.action in ['list', 'user']:
+            return ProjectListSerializer
+        else:
+            return ProjectSerializer
 
     @action(detail=False, methods=['GET'], permission_classes=(HasModelPermission | HasProjectsPermission, ))
     def user(self, request, *args, **kwargs):
-        self.filter_for_user = True
         return self.list(request, *args, **kwargs)
 
     @action(detail=True, methods=['POST'],
@@ -155,7 +229,8 @@ def copy(self, request, pk=None):
 
         # update instance
         for key, value in serializer.validated_data.items():
-            setattr(instance, key, value)
+            if key in ['title', 'description', 'catalog', 'parent']:
+                setattr(instance, key, value)
 
         site = get_current_site(self.request)
         owners = [self.request.user]
@@ -286,12 +361,6 @@ def options(self, request, pk=None):
         # if it didn't work return 404
         raise NotFound()
 
-    @action(detail=True, permission_classes=(HasModelPermission | HasProjectPermission, ))
-    def answers(self, request, pk=None):
-        project = self.get_object()
-        project.catalog.prefetch_elements()
-        return Response(project.get_answer_tree(verbose=request.GET.getlist('verbose')))
-
     @action(detail=True, methods=['get', 'post'],
             permission_classes=(HasProjectProgressModelPermission | HasProjectProgressObjectPermission, ))
     def progress(self, request, pk=None):
@@ -386,6 +455,172 @@ def contact(self, request, pk):
         else:
             raise Http404
 
+    @action(detail=True, methods=['get'], permission_classes=(HasModelPermission | HasProjectPermission, ))
+    def hierarchy(self, request, pk):
+        # get the cached family of this project
+        project = self.get_object()
+        cached_trees = project.get_family().get_cached_trees()
+        serializer_context = self.get_serializer_context()
+        serializer_context['project'] = self.get_object()
+        serializer = ProjectHierarchySerializer(cached_trees[0], context=serializer_context)
+        return Response(serializer.data)
+
+    @action(
+        detail=True,
+        url_path=r'answers-tree',
+        permission_classes=(HasModelPermission | HasProjectPermission, )
+    )
+    def answers_tree(self, request, pk, snapshot_id=None):
+        project = self.get_object()
+        project.catalog.prefetch_elements()
+
+        try:
+            snapshot = project.snapshots.get(pk=snapshot_id) if snapshot_id else None
+        except Snapshot.DoesNotExist as e:
+            raise Http404 from e
+
+        return Response(project.get_answer_tree(snapshot=snapshot, verbose=request.GET.getlist('verbose')))
+
+    @action(
+        detail=True,
+        url_path=r'snapshots/(?P<snapshot_id>\d+)/answers-tree',
+        permission_classes=(HasModelPermission | HasProjectPermission, )
+    )
+    def answers_tree_snapshot(self, request, pk, snapshot_id):
+        # extra method since DRF does not officially support optional named parameters inside url_path
+        return self.answers_tree(request, pk, snapshot_id)
+
+    @action(
+        detail=True,
+        methods=['get'],
+        url_path=r'answers',
+        permission_classes=(HasModelPermission | HasProjectPermission, )
+    )
+    def answers(self, request, pk, snapshot_id=None):
+        project = self.get_object()
+        project.catalog.prefetch_elements()
+
+        try:
+            snapshot = project.snapshots.get(pk=snapshot_id) if snapshot_id else None
+        except Snapshot.DoesNotExist as e:
+            raise Http404 from e
+
+        serializer = ProjectAnswersSerializer({
+            'html': render_to_string('projects/project_answers.html', {
+                'project': project,
+                'snapshot': snapshot,
+                'project_wrapper': ProjectWrapper(project, snapshot),
+                'export_formats': settings.EXPORT_FORMATS
+            }),
+            'attachments': project.values.filter(snapshot=snapshot).filter(value_type=VALUE_TYPE_FILE).order_by('file')
+        })
+        return Response(serializer.data)
+
+    @action(
+        detail=True,
+        methods=['get'],
+        url_path=r'snapshots/(?P<snapshot_id>\d+)/answers',
+        permission_classes=(HasModelPermission | HasProjectPermission, )
+    )
+    def answers_snapshot(self, request, pk, snapshot_id):
+        # extra method since DRF does not officially support optional named parameters inside url_path
+        return self.answers(request, pk, snapshot_id)
+
+    @action(
+        detail=True,
+        methods=['get'],
+        url_path=r'answers/export/(?P<export_format>[a-z]+)',
+        permission_classes=(HasModelPermission | HasProjectPermission, )
+    )
+    def answers_export(self, request, pk, export_format, snapshot_id=None):
+        project = self.get_object()
+        project.catalog.prefetch_elements()
+
+        try:
+            snapshot = project.snapshots.get(pk=snapshot_id) if snapshot_id else None
+        except Snapshot.DoesNotExist as e:
+            raise Http404 from e
+
+        return render_to_format(self.request, export_format, project.title, 'projects/project_answers_export.html', {
+            'project': project,
+            'snapshot': snapshot,
+            'project_wrapper': ProjectWrapper(project, snapshot)
+        })
+
+    @action(
+        detail=True,
+        methods=['get'],
+        url_path=r'snapshots/(?P<snapshot_id>\d+)/answers/export/(?P<export_format>[a-z]+)',
+        permission_classes=(HasModelPermission | HasProjectPermission, )
+    )
+    def answers_export_snapshot(self, request, pk, export_format, snapshot_id):
+        # extra method since DRF does not officially support optional named parameters inside url_path
+        return self.answers_export(request, pk, export_format, snapshot_id)
+
+    @action(detail=True, methods=['get'], permission_classes=(HasModelPermission | HasProjectPermission, ),
+            url_path=r'views')
+    def views(self, request, pk):
+        project = self.get_object()
+        serializer = ProjectViewsSerializer(project.views, many=True)
+        return Response(serializer.data)
+
+    @action(detail=True, methods=['get'], permission_classes=(HasModelPermission | HasProjectPermission, ),
+            url_path=r'views/(?P<view_id>\d+)')
+    def view(self, request, pk, view_id, snapshot_id=None):
+        project = self.get_object()
+        project.catalog.prefetch_elements()
+
+        try:
+            view = project.views.get(pk=view_id)
+        except View.DoesNotExist as e:
+            raise Http404 from e
+
+        try:
+            snapshot = project.snapshots.get(pk=snapshot_id) if snapshot_id else None
+        except Snapshot.DoesNotExist as e:
+            raise Http404 from e
+
+        serializer = ProjectViewSerializer(view, context={
+            'html': view.render(project, snapshot),
+            'attachments': project.values.filter(snapshot=snapshot).filter(value_type=VALUE_TYPE_FILE).order_by('file')
+        })
+        return Response(serializer.data)
+
+    @action(detail=True, methods=['get'], permission_classes=(HasModelPermission | HasProjectPermission, ),
+            url_path=r'snapshots/(?P<snapshot_id>\d+)/views/(?P<view_id>\d+)')
+    def view_snapshot(self, request, pk, view_id, snapshot_id):
+        # extra method since DRF does not officially support optional named parameters inside url_path
+        return self.view(request, pk, view_id, snapshot_id)
+
+    @action(detail=True, methods=['get'], permission_classes=(HasModelPermission | HasProjectPermission, ),
+            url_path=r'views/(?P<view_id>\d+)/export/(?P<export_format>[a-z]+)')
+    def view_export(self, request, pk, view_id, export_format, snapshot_id=None):
+        project = self.get_object()
+        project.catalog.prefetch_elements()
+
+        try:
+            view = project.views.get(pk=view_id)
+        except View.DoesNotExist as e:
+            raise Http404 from e
+
+        try:
+            snapshot = project.snapshots.get(pk=snapshot_id) if snapshot_id else None
+        except Snapshot.DoesNotExist as e:
+            raise Http404 from e
+
+        return render_to_format(self.request, export_format, project.title, 'projects/project_view_export.html', {
+            'project': project,
+            'snapshot': snapshot,
+            'html': view.render(project, snapshot),
+            'resource_path': get_value_path(project, snapshot)
+        })
+
+    @action(detail=True, methods=['get'], permission_classes=(HasModelPermission | HasProjectPermission, ),
+            url_path=r'snapshots/(?P<snapshot_id>\d+)/views/(?P<view_id>\d+)/export/(?P<export_format>[a-z]+)')
+    def view_export_snapshot(self, request, pk, view_id, export_format, snapshot_id):
+        # extra method since DRF does not officially support optional named parameters inside url_path
+        return self.view_export(request, pk, view_id, export_format, snapshot_id)
+
     @action(detail=False, url_path='upload-accept', permission_classes=(IsAuthenticated, ))
     def upload_accept(self, request):
         return Response(get_upload_accept())
@@ -396,9 +631,29 @@ def imports(self, request):
             'key': key,
             'label': label,
             'class_name': class_name,
-            'href': reverse('project_create_import', args=[key])
+            # 'href': reverse('project_create_import', args=[key])
         } for key, label, class_name in settings.PROJECT_IMPORTS if key in settings.PROJECT_IMPORTS_LIST] )
 
+    def create(self, request, *args, **kwargs):
+        response = super().create(request, *args, **kwargs)
+
+        # in order to return all the fields from the subqueries, we need to re-fetch the project
+        # from the database again, and inject it into the the response
+        project = self.get_queryset().get(pk=response.data['id'])
+        response.data = self.get_serializer(project).data
+        return response
+
+
+    def update(self, request, *args, **kwargs):
+        response = super().update(request, *args, **kwargs)
+
+        # in order to return all the fields from the subqueries, we need to re-fetch the project
+        # from the database again, and inject it into the the response
+        project = self.get_queryset().get(pk=response.data['id'])
+        response.data = self.get_serializer(project).data
+        return response
+
+
     def perform_create(self, serializer):
         project = serializer.save(site=get_current_site(self.request))
 
@@ -436,9 +691,47 @@ def perform_create(self, serializer):
         serializer.save(project=self.project)
 
 
-class ProjectMembershipViewSet(ProjectNestedViewSetMixin, ModelViewSet):
+class ProjectUserViewSetMixin:
+
+    def create(self, request, *args, **kwargs):
+        # use serializer_class_create to create the user
+        serializer_create = self.serializer_class_create(
+            data=request.data,
+            context=self.get_serializer_context()
+        )
+        serializer_create.is_valid(raise_exception=True)
+        self.perform_create(serializer_create)
+
+        # but serializer_class to return it
+        serializer = self.serializer_class(serializer_create.instance, context=self.get_serializer_context())
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+    def update(self, request, *args, **kwargs):
+        partial = kwargs.pop('partial', False)
+        instance = self.get_object()
+
+        # use serializer_class_update to create the user
+        serializer_update = self.serializer_class_update(
+            instance,
+            data=request.data,
+            partial=partial,
+            context=self.get_serializer_context()
+        )
+        serializer_update.is_valid(raise_exception=True)
+        self.perform_update(serializer_update)
+
+        # but serializer_class to return it
+        serializer = self.serializer_class(serializer_update.instance, context=self.get_serializer_context())
+        return Response(serializer.data)
+
+
+class ProjectMembershipViewSet(ProjectNestedViewSetMixin, ProjectUserViewSetMixin, ModelViewSet):
     permission_classes = (HasModelPermission | HasProjectPermission, )
 
+    serializer_class = ProjectMembershipSerializer
+    serializer_class_create = ProjectMembershipCreateSerializer
+    serializer_class_update = ProjectMembershipUpdateSerializer
+
     filter_backends = (DjangoFilterBackend, )
     filterset_fields = (
         'user',
@@ -447,13 +740,41 @@ class ProjectMembershipViewSet(ProjectNestedViewSetMixin, ModelViewSet):
     )
 
     def get_queryset(self):
-        return Membership.objects.filter(project=self.project)
+        queryset = Membership.objects.filter(project=self.project).select_related('user')
+        if settings.SOCIALACCOUNT:
+            queryset = queryset.prefetch_related('user__socialaccount_set')
+        return queryset
 
-    def get_serializer_class(self):
-        if self.action == 'update':
-            return ProjectMembershipUpdateSerializer
-        else:
-            return ProjectMembershipSerializer
+    @action(detail=False, methods=['get'], permission_classes=(HasModelPermission | HasProjectPermission, ))
+    def hierarchy(self, request, parent_lookup_project=None):
+        # get the ancestors of this project
+        ancestors = self.project.get_ancestors()
+
+        # add a subquery to find the highest occurrence of a user in the project hierarchy
+        highest_project = Membership.objects.filter(
+            project__in=ancestors, user_id=OuterRef('user_id')
+        ).order_by('-project__level')
+
+        # query memberships for all ancestors, but only the highest level
+        memberships = Membership.objects.filter(project__in=ancestors) \
+                                        .annotate(highest=Subquery(highest_project.values('project__level')[:1])) \
+                                        .filter(highest=F('project__level')) \
+                                        .select_related('project', 'user')
+
+        if settings.SOCIALACCOUNT:
+            # prefetch the users social account, if that relation exists
+            memberships = memberships.prefetch_related('user__socialaccount_set')
+
+        serializer = ProjectMembershipHierarchySerializer(memberships, many=True, context={
+            'request': request, 'view': self
+        })
+        return Response(serializer.data)
+
+    @action(detail=False, methods=['delete'], permission_classes=(HasProjectLeavePermission, ))
+    def leave(self, request, parent_lookup_project=None):
+        membership = Membership.objects.filter(project=self.project).get(user=request.user)
+        membership.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
 
 
 class ProjectIntegrationViewSet(ProjectNestedViewSetMixin, ModelViewSet):
@@ -469,9 +790,13 @@ def get_queryset(self):
         return Integration.objects.filter(project=self.project)
 
 
-class ProjectInviteViewSet(ProjectNestedViewSetMixin, ModelViewSet):
+class ProjectInviteViewSet(ProjectNestedViewSetMixin, ProjectUserViewSetMixin, ModelViewSet):
     permission_classes = (HasModelPermission | HasProjectPermission, )
 
+    serializer_class = ProjectInviteSerializer
+    serializer_class_create = ProjectInviteCreateSerializer
+    serializer_class_update = ProjectInviteUpdateSerializer
+
     filter_backends = (DjangoFilterBackend, )
     filterset_fields = (
         'user',
@@ -483,11 +808,10 @@ class ProjectInviteViewSet(ProjectNestedViewSetMixin, ModelViewSet):
     def get_queryset(self):
         return Invite.objects.filter(project=self.project)
 
-    def get_serializer_class(self):
-        if self.action == 'update':
-            return ProjectInviteUpdateSerializer
-        else:
-            return ProjectInviteSerializer
+    def get_serializer_context(self):
+        context = super().get_serializer_context()
+        context['project'] = self.project
+        return context
 
     def perform_create(self, serializer):
         super().perform_create(serializer)
@@ -511,14 +835,20 @@ def get_queryset(self):
         return Issue.objects.filter(project=self.project).prefetch_related('resources')
 
 
-class ProjectSnapshotViewSet(ProjectNestedViewSetMixin, CreateModelMixin, RetrieveModelMixin,
-                             UpdateModelMixin, ListModelMixin, GenericViewSet):
+class ProjectSnapshotViewSet(ProjectNestedViewSetMixin, ModelViewSet):
     permission_classes = (HasModelPermission | HasProjectPermission, )
     serializer_class = ProjectSnapshotSerializer
 
     def get_queryset(self):
         return self.project.snapshots.all()
 
+    @action(detail=True, methods=['POST'],
+            permission_classes=(HasModelPermission | HasProjectPermission, ))
+    def rollback(self, request, parent_lookup_project, pk=None):
+        snapshot = self.get_object()
+        snapshot.rollback()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class ProjectValueViewSet(ProjectNestedViewSetMixin, ModelViewSet):
     permission_classes = (HasModelPermission | HasProjectPermission, )
@@ -816,6 +1146,7 @@ def user(self, request):
         serializer = UserInviteSerializer(invites, many=True)
         return Response(serializer.data)
 
+
 class IssueViewSet(ReadOnlyModelViewSet):
     permission_classes = (HasModelPermission | HasProjectsPermission, )
     serializer_class = IssueSerializer
@@ -941,3 +1272,8 @@ def get_queryset(self):
             queryset.filter(Q(pk__in=availability_subquery) | Q(projects__user=self.request.user))
             .order_by('-available', 'order', 'id').distinct()
         )
+
+
+class RoleViewSet(ChoicesViewSet):
+    permission_classes = (IsAuthenticated, )
+    queryset = ROLE_CHOICES
diff --git a/rdmo/views/templates/views/tags/value.html b/rdmo/views/templates/views/tags/value.html
index 0e307fa2bd..61f4826ffe 100644
--- a/rdmo/views/templates/views/tags/value.html
+++ b/rdmo/views/templates/views/tags/value.html
@@ -1,5 +1 @@
-{% if value.file_url %}
-{% include 'views/tags/value_file.html' %}
-{% else %}
-<span>{{ value.value_and_unit }}</span>
-{% endif %}
+{% if value.file_url %}{% include 'views/tags/value_file.html' %}{% else %}<span>{{ value.value_and_unit }}</span>{% endif %}
\ No newline at end of file
diff --git a/rdmo/views/templates/views/tags/value_inline_list.html b/rdmo/views/templates/views/tags/value_inline_list.html
index b446d846c4..b7ee8b014f 100644
--- a/rdmo/views/templates/views/tags/value_inline_list.html
+++ b/rdmo/views/templates/views/tags/value_inline_list.html
@@ -1,3 +1 @@
-{% for value in values %}
-    {{ value.value_and_unit }}{% if not forloop.last %}; {% endif %}
-{% endfor %}
+{% for value in values %}{{ value.value_and_unit }}{% if not forloop.last %}; {% endif %}{% endfor %}
\ No newline at end of file
diff --git a/testing/config/settings/base.py b/testing/config/settings/base.py
index f081074c5a..f4d3f82f9e 100644
--- a/testing/config/settings/base.py
+++ b/testing/config/settings/base.py
@@ -1,4 +1,5 @@
 import os
+from warnings import filterwarnings
 
 from django.utils.translation import gettext_lazy as _
 
@@ -105,3 +106,13 @@
 
 PROJECT_CONTACT = True
 PROJECT_CONTACT_RECIPIENTS = ['email@example.com']
+
+# Ref: https://adamj.eu/tech/2023/12/07/django-fix-urlfield-assume-scheme-warnings
+filterwarnings(
+    "ignore", "The FORMS_URLFIELD_ASSUME_HTTPS transitional setting is deprecated."
+)
+# This value will change from False to True in Django 6.0
+# Refs:
+# - https://docs.djangoproject.com/en/5.2/ref/settings/#forms-urlfield-assume-https
+# - https://docs.djangoproject.com/en/5.2/ref/forms/fields/#django.forms.URLField.assume_scheme
+FORMS_URLFIELD_ASSUME_HTTPS = True
diff --git a/testing/export/project.html b/testing/export/project.html
index 956c01e3ce..2094cb854e 100644
--- a/testing/export/project.html
+++ b/testing/export/project.html
@@ -8,34 +8,34 @@ <h2>Single questions</h2>
         <h3>Text</h3>
     <p><strong class="question-label">Text?</strong></p>
                     <p>
-<span>Lorem ipsum dolor sit amet</span>
+                        <span>Lorem ipsum dolor sit amet</span>
                     </p>
         <h3>Textarea</h3>
     <p><strong class="question-label">Textarea?</strong></p>
                     <p>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
                     </p>
         <h3>Yes or no</h3>
     <p><strong class="question-label">Yes or no?</strong></p>
                     <p>
-<span>Yes</span>
+                        <span>Yes</span>
                     </p>
         <h3>Radio buttons</h3>
     <p><strong class="question-label">Radio buttons?</strong></p>
                     <p>
-<span>Text: Lorem ipsum</span>
+                        <span>Text: Lorem ipsum</span>
                     </p>
         <h3>Select drop-down</h3>
     <p><strong class="question-label">Select drop-down?</strong></p>
                     <p>
-<span>One</span>
+                        <span>One</span>
                     </p>
         <h3>Select drop-down (free)</h3>
     <p><strong class="question-label">Select drop-down (free)?</strong></p>
         <h3>Range slider</h3>
     <p><strong class="question-label">Range slider?</strong></p>
                     <p>
-<span>37</span>
+                        <span>37</span>
                     </p>
         <h3>File</h3>
     <p><strong class="question-label">File?</strong></p>
@@ -45,66 +45,66 @@ <h3>File</h3>
         <h3>Datetime</h3>
     <p><strong class="question-label">Date picker?</strong></p>
                     <p>
-<span>Jan. 1, 2018</span>
+                        <span>Jan. 1, 2018</span>
                     </p>
     <h2>Collections</h2>
         <h3>Text</h3>
     <p><strong class="question-label">Text?</strong></p>
                     <ul>
 <li>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
+    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
 </li>
 <li>
-<span>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
+    <span>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
 </li>
                     </ul>
         <h3>Textarea</h3>
     <p><strong class="question-label">Textarea?</strong></p>
                     <ul>
 <li>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
 </li>
 <li>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
 </li>
                     </ul>
         <h3>Yes or no</h3>
     <p><strong class="question-label">Yes or no?</strong></p>
                     <ul>
 <li>
-<span>Yes</span>
+    <span>Yes</span>
 </li>
 <li>
-<span>No</span>
+    <span>No</span>
 </li>
 <li>
-<span>Yes</span>
+    <span>Yes</span>
 </li>
                     </ul>
         <h3>Radio buttons</h3>
     <p><strong class="question-label">Radio buttons?</strong></p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
         <h3>Select drop-down</h3>
     <p><strong class="question-label">Select drop-down?</strong></p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
         <h3>Select drop-down (free)</h3>
@@ -113,26 +113,26 @@ <h3>Range slider</h3>
     <p><strong class="question-label">Range slider?</strong></p>
                     <ul>
 <li>
-<span>0</span>
+    <span>0</span>
 </li>
 <li>
-<span>50</span>
+    <span>50</span>
 </li>
 <li>
-<span>100</span>
+    <span>100</span>
 </li>
                     </ul>
         <h3>Date picker</h3>
     <p><strong class="question-label">Date picker?</strong></p>
                     <ul>
 <li>
-<span>April 1, 2017</span>
+    <span>April 1, 2017</span>
 </li>
 <li>
-<span>April 2, 2017</span>
+    <span>April 2, 2017</span>
 </li>
 <li>
-<span>April 3, 2017</span>
+    <span>April 3, 2017</span>
 </li>
                     </ul>
         <h3>File</h3>
@@ -149,42 +149,42 @@ <h3>Checkbox</h3>
     <p><strong class="question-label">Checkbox?</strong></p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
     <h2>Sets</h2>
         <h3>Individual sets I</h3>
     <p><strong class="question-label">Text?</strong></p>
                     <p>
-<span>Lorem ipsum dolor sit amet</span>
+                        <span>Lorem ipsum dolor sit amet</span>
                     </p>
     <p><strong class="question-label">Textarea?</strong></p>
                     <p>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
                     </p>
     <p><strong class="question-label">Yes or no?</strong></p>
                     <p>
-<span>Yes</span>
+                        <span>Yes</span>
                     </p>
     <p><strong class="question-label">Radio buttons?</strong></p>
                     <p>
-<span>Text: Lorem ipsum</span>
+                        <span>Text: Lorem ipsum</span>
                     </p>
     <p><strong class="question-label">Select drop-down?</strong></p>
                     <p>
-<span>One</span>
+                        <span>One</span>
                     </p>
     <p><strong class="question-label">Select drop-down (free)?</strong></p>
     <p><strong class="question-label">Range slider?</strong></p>
                     <p>
-<span>37</span>
+                        <span>37</span>
                     </p>
     <p><strong class="question-label">Date picker?</strong></p>
                     <p>
-<span>Jan. 1, 2018</span>
+                        <span>Jan. 1, 2018</span>
                     </p>
     <p><strong class="question-label">File?</strong></p>
                     <p>
@@ -194,80 +194,80 @@ <h3>Individual sets II</h3>
     <p><strong class="question-label">Text?</strong></p>
                     <ul>
 <li>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
+    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
 </li>
 <li>
-<span>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
+    <span>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</span>
 </li>
                     </ul>
     <p><strong class="question-label">Textarea?</strong></p>
                     <ul>
 <li>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
 </li>
 <li>
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+    <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
 </li>
                     </ul>
     <p><strong class="question-label">Yes or no?</strong></p>
                     <ul>
 <li>
-<span>Yes</span>
+    <span>Yes</span>
 </li>
 <li>
-<span>No</span>
+    <span>No</span>
 </li>
 <li>
-<span>Yes</span>
+    <span>Yes</span>
 </li>
                     </ul>
     <p><strong class="question-label">Radio buttons?</strong></p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
     <p><strong class="question-label">Select drop-down?</strong></p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
     <p><strong class="question-label">Select drop-down (free)?</strong></p>
     <p><strong class="question-label">Range slider?</strong></p>
                     <ul>
 <li>
-<span>0</span>
+    <span>0</span>
 </li>
 <li>
-<span>50</span>
+    <span>50</span>
 </li>
 <li>
-<span>100</span>
+    <span>100</span>
 </li>
                     </ul>
     <p><strong class="question-label">Date picker?</strong></p>
                     <ul>
 <li>
-<span>April 1, 2017</span>
+    <span>April 1, 2017</span>
 </li>
 <li>
-<span>April 2, 2017</span>
+    <span>April 2, 2017</span>
 </li>
 <li>
-<span>April 3, 2017</span>
+    <span>April 3, 2017</span>
 </li>
                     </ul>
     <p><strong class="question-label">File?</strong></p>
@@ -282,96 +282,96 @@ <h3>Individual sets II</h3>
     <p><strong class="question-label">Checkbox?</strong></p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
         <h3>Set collections I</h3>
     <p><strong class="question-label">Text?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
                     </p>
     <p><strong class="question-label">Textarea?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
                     </p>
     <p><strong class="question-label">Yes or no?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>Yes</span>
+                        <span>Yes</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>No</span>
+                        <span>No</span>
                     </p>
     <p><strong class="question-label">Radio buttons?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>One</span>
+                        <span>One</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Two</span>
+                        <span>Two</span>
                     </p>
     <p><strong class="question-label">Select drop-down?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>One</span>
+                        <span>One</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Two</span>
+                        <span>Two</span>
                     </p>
     <p><strong class="question-label">Select drop-down (free)?</strong></p>
     <p><strong class="question-label">Range slider?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>1</span>
+                        <span>1</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>2</span>
+                        <span>2</span>
                     </p>
     <p><strong class="question-label">Date picker?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>Jan. 7, 2018</span>
+                        <span>Jan. 7, 2018</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Feb. 7, 2018</span>
+                        <span>Feb. 7, 2018</span>
                     </p>
     <p><strong class="question-label">File?</strong></p>
         <h3>Set collections II</h3>
     <p><strong class="question-label">Text?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</span>
                     </p>
     <p><strong class="question-label">Textarea?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
+                        <span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.</span>
                     </p>
     <p><strong class="question-label">Yes or no?</strong></p>
                     <p>
@@ -379,13 +379,13 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>Yes</span>
+    <span>Yes</span>
 </li>
 <li>
-<span>No</span>
+    <span>No</span>
 </li>
 <li>
-<span>Yes</span>
+    <span>Yes</span>
 </li>
                     </ul>
                     <p>
@@ -393,13 +393,13 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>No</span>
+    <span>No</span>
 </li>
 <li>
-<span>Yes</span>
+    <span>Yes</span>
 </li>
 <li>
-<span>No</span>
+    <span>No</span>
 </li>
                     </ul>
     <p><strong class="question-label">Radio buttons?</strong></p>
@@ -408,13 +408,13 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
                     <p>
@@ -422,13 +422,13 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
                     </ul>
     <p><strong class="question-label">Select drop-down?</strong></p>
@@ -437,15 +437,15 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>One</span>
+    <span>One</span>
 </li>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
                     </ul>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>Three</span>
+                        <span>Three</span>
                     </p>
     <p><strong class="question-label">Select drop-down (free)?</strong></p>
     <p><strong class="question-label">Range slider?</strong></p>
@@ -454,15 +454,15 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>16</span>
+    <span>16</span>
 </li>
 <li>
-<span>31</span>
+    <span>31</span>
 </li>
                     </ul>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>86</span>
+                        <span>86</span>
                     </p>
     <p><strong class="question-label">Date picker?</strong></p>
                     <p>
@@ -470,10 +470,10 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>Jan. 7, 2018</span>
+    <span>Jan. 7, 2018</span>
 </li>
 <li>
-<span>Feb. 7, 2018</span>
+    <span>Feb. 7, 2018</span>
 </li>
                     </ul>
                     <p>
@@ -481,10 +481,10 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>Oct. 7, 2018</span>
+    <span>Oct. 7, 2018</span>
 </li>
 <li>
-<span>Nov. 7, 2018</span>
+    <span>Nov. 7, 2018</span>
 </li>
                     </ul>
     <p><strong class="question-label">File?</strong></p>
@@ -494,37 +494,37 @@ <h3>Set collections II</h3>
                     </p>
                     <ul>
 <li>
-<span>Two</span>
+    <span>Two</span>
 </li>
 <li>
-<span>Three</span>
+    <span>Three</span>
 </li>
                     </ul>
                     <p>
                         <em>Set &quot;Second&quot;:</em>&ensp;
-<span>One</span>
+                        <span>One</span>
                     </p>
     <h2>Conditions</h2>
         <h3>Input</h3>
     <p><strong class="question-label">Text</strong></p>
                     <p>
-<span>test</span>
+                        <span>test</span>
                     </p>
     <p><strong class="question-label">Option</strong></p>
                     <p>
-<span>One</span>
+                        <span>One</span>
                     </p>
         <h3>Text I</h3>
     <p><strong class="question-label">text_contains?</strong></p>
                     <p>
-<span>test</span>
+                        <span>test</span>
                     </p>
         <h3>Text II</h3>
     <p><strong class="question-label">text empty?</strong></p>
         <h3>Text III</h3>
     <p><strong class="question-label">text_equal?</strong></p>
                     <p>
-<span>test</span>
+                        <span>test</span>
                     </p>
         <h3>Text IV</h3>
     <p><strong class="question-label">text_greater_than?</strong></p>
@@ -537,7 +537,7 @@ <h3>Text VII</h3>
         <h3>Text VIII</h3>
     <p><strong class="question-label">text_not_empty?</strong></p>
                     <p>
-<span>test</span>
+                        <span>test</span>
                     </p>
         <h3>Text IX</h3>
     <p><strong class="question-label">text_not_equal?</strong></p>
@@ -546,12 +546,12 @@ <h3>Options I</h3>
         <h3>Options II</h3>
     <p><strong class="question-label">option_equal?</strong></p>
                     <p>
-<span>One</span>
+                        <span>One</span>
                     </p>
         <h3>Options III</h3>
     <p><strong class="question-label">option_not_empty?</strong></p>
                     <p>
-<span>One</span>
+                        <span>One</span>
                     </p>
         <h3>Options IV</h3>
     <p><strong class="question-label">option_not_equal?</strong></p>
@@ -594,20 +594,20 @@ <h3>A set of questionsets and questions</h3>
     <p><strong class="question-label">A?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;, Block #1:</em>&ensp;
-<span>a0</span>
+                        <span>a0</span>
                     </p>
                     <p>
                         <em>Set &quot;First&quot;, Block #2:</em>&ensp;
-<span>a1</span>
+                        <span>a1</span>
                     </p>
     <p><strong class="question-label">B?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;, Block #1:</em>&ensp;
-<span>b1</span>
+                        <span>b1</span>
                     </p>
                     <p>
                         <em>Set &quot;First&quot;, Block #2:</em>&ensp;
-<span>b1</span>
+                        <span>b1</span>
                     </p>
     <p><strong class="question-label">C?</strong></p>
                     <p>
@@ -615,10 +615,10 @@ <h3>A set of questionsets and questions</h3>
                     </p>
                     <ul>
 <li>
-<span>c01</span>
+    <span>c01</span>
 </li>
 <li>
-<span>c02</span>
+    <span>c02</span>
 </li>
                     </ul>
                     <p>
@@ -626,40 +626,40 @@ <h3>A set of questionsets and questions</h3>
                     </p>
                     <ul>
 <li>
-<span>c10</span>
+    <span>c10</span>
 </li>
 <li>
-<span>c11</span>
+    <span>c11</span>
 </li>
                     </ul>
     <p><strong class="question-label">Y?</strong></p>
                     <p>
                         <em>Set &quot;First&quot;, Block #1, Set #1:</em>&ensp;
-<span>Three</span>
+                        <span>Three</span>
                     </p>
                     <p>
                         <em>Set &quot;First&quot;, Block #2, Set #1:</em>&ensp;
-<span>Three</span>
+                        <span>Three</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;, Block #1, Set #1:</em>&ensp;
-<span>Three</span>
+                        <span>Three</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;, Block #2, Set #1:</em>&ensp;
-<span>Three</span>
+                        <span>Three</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;, Block #3, Set #1:</em>&ensp;
-<span>One</span>
+                        <span>One</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;, Block #3, Set #2:</em>&ensp;
-<span>Two</span>
+                        <span>Two</span>
                     </p>
                     <p>
                         <em>Set &quot;Second&quot;, Block #3, Set #3:</em>&ensp;
-<span>Three</span>
+                        <span>Three</span>
                     </p>
     <p><strong class="question-label">Question</strong></p>
         <h3>Block with optional questions</h3>
diff --git a/testing/fixtures/overlays.json b/testing/fixtures/overlays.json
deleted file mode 100644
index 6a64b39281..0000000000
--- a/testing/fixtures/overlays.json
+++ /dev/null
@@ -1,22 +0,0 @@
-[
-  {
-    "model": "overlays.overlay",
-    "pk": 1,
-    "fields": {
-      "user": 1,
-      "site": 1,
-      "url_name": "projects",
-      "current": ""
-    }
-  },
-  {
-    "model": "overlays.overlay",
-    "pk": 2,
-    "fields": {
-      "user": 4,
-      "site": 1,
-      "url_name": "projects",
-      "current": "create-project"
-    }
-  }
-]
diff --git a/testing/fixtures/projects.json b/testing/fixtures/projects.json
index 8de71c11c4..9213f8110b 100644
--- a/testing/fixtures/projects.json
+++ b/testing/fixtures/projects.json
@@ -471,8 +471,8 @@
     "model": "projects.project",
     "pk": 7,
     "fields": {
-      "created": "2021-10-12T07:55:13.007Z",
-      "updated": "2021-10-12T13:57:34.993Z",
+      "created": "2021-10-12T07:55:14.007Z",
+      "updated": "2021-10-12T13:57:35.993Z",
       "parent": null,
       "site": 1,
       "title": "Prune Test",
@@ -493,8 +493,8 @@
     "model": "projects.project",
     "pk": 8,
     "fields": {
-      "created": "2021-10-12T07:55:13.007Z",
-      "updated": "2021-10-12T13:57:34.993Z",
+      "created": "2021-10-12T07:55:15.007Z",
+      "updated": "2021-10-12T13:57:36.993Z",
       "parent": null,
       "site": 1,
       "title": "Prune Test",
diff --git a/testing/xml/elements/updated-and-changed/catalog-2.xml b/testing/xml/elements/updated-and-changed/catalog-2.xml
new file mode 100644
index 0000000000..ce5273b47b
--- /dev/null
+++ b/testing/xml/elements/updated-and-changed/catalog-2.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rdmo xmlns:dc="http://purl.org/dc/elements/1.1/" created="2023-04-20T09:38:39.297292+02:00" version="2.0.0">
+	<catalog dc:uri="http://example.com/terms/questions/catalog">
+		<uri_prefix>http://example.com/terms</uri_prefix>
+		<uri_path>catalog</uri_path>
+		<dc:comment/>
+		<order>ERROR</order>
+		<title lang="en">Catalog</title>
+		<help lang="en">Lorem mupsimEn dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor endunten ut labore et dolore magna aliquyam erat, sed diam voluptua. At vera eosen3n et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</help>
+		<title lang="de">Katalog</title>
+		<help lang="de">Lorem spimDe dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor vidididi ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero ededeos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</help>
+		<sections>
+			<section dc:uri="http://example.com/terms/questions/catalog/individual" order="1"/>
+			<section dc:uri="http://example.com/terms/questions/catalog/collections" order="2"/>
+			<section dc:uri="http://example.com/terms/questions/catalog/set" order="3"/>
+			<section dc:uri="http://example.com/terms/questions/catalog/conditions" order="4"/>
+			<section dc:uri="http://example.com/terms/questions/catalog/options" order="5"/>
+			<section dc:uri="http://example.com/terms/questions/catalog/blocks" order="6"/>
+		</sections>
+	</catalog>
+</rdmo>
diff --git a/webpack.config.js b/webpack.config.js
index cbd1d6d81e..5875727eb7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,9 +18,21 @@ const configList = [
   {
     name: 'core',
     entry: {
-      base: [
+      'bootstrap': [
+        './rdmo/core/assets/js/bootstrap.js',
+        './rdmo/core/assets/scss/bootstrap.scss'
+      ],
+      'base': [
         './rdmo/core/assets/js/base.js',
         './rdmo/core/assets/scss/base.scss'
+      ],
+      'home': [
+        './rdmo/core/assets/js/home.js',
+        './rdmo/core/assets/scss/home.scss'
+      ],
+      'app': [
+        './rdmo/core/assets/js/app.js',
+        './rdmo/core/assets/scss/app.scss'
       ]
     },
     output: {
@@ -33,6 +45,11 @@ const configList = [
             from: '**/*',
             to: './/fonts/',
             context: './rdmo/core/assets/fonts/'
+          },
+          {
+            from: '**/*',
+            to: './/img/',
+            context: './rdmo/core/assets/img/'
           }
         ]
       })
@@ -57,6 +74,10 @@ const configList = [
         './rdmo/projects/assets/js/projects.js',
         './rdmo/projects/assets/scss/projects.scss'
       ],
+      project: [
+        './rdmo/projects/assets/js/project.js',
+        './rdmo/projects/assets/scss/project.scss'
+      ],
       interview: [
         './rdmo/projects/assets/js/interview.js',
         './rdmo/projects/assets/scss/interview.scss'
@@ -95,7 +116,7 @@ const baseConfig = {
         test: /\.(js|jsx)$/,
         exclude: /(node_modules|bower_components)/,
         loader: 'babel-loader',
-        options: { presets: ['@babel/env','@babel/preset-react'] }
+        options: { presets: ['@babel/env', '@babel/preset-react'] }
       },
       {
         test: /\.s?css$/,