diff --git a/.eslintrc.json b/.eslintrc.json
index 2b9f0ef98..98552f372 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,7 +10,21 @@
           "error",
           {
             "enforceBuildableLibDependency": true,
-            "allow": [],
+            "allow": [
+              "@redaction/red-ui-http",
+              "@redaction/red-cache",
+              "@services/**",
+              "@components/**",
+              "@guards/**",
+              "@i18n/**",
+              "@state/**",
+              "@utils/**",
+              "@models/**",
+              "@environments/**",
+              "@shared/**",
+              "@app-config/**",
+              "@upload-download/**"
+            ],
             "depConstraints": [
               {
                 "sourceTag": "*",
diff --git a/apps/red-ui/src/app/modules/app-config/app-config.service.ts b/apps/red-ui/src/app/modules/app-config/app-config.service.ts
index a879d0e8e..f9452d13f 100644
--- a/apps/red-ui/src/app/modules/app-config/app-config.service.ts
+++ b/apps/red-ui/src/app/modules/app-config/app-config.service.ts
@@ -3,7 +3,9 @@ import { HttpClient } from '@angular/common/http';
 import { tap } from 'rxjs/operators';
 import { Observable } from 'rxjs';
 import { Title } from '@angular/platform-browser';
-import { version } from '../../../../../../package.json';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import packageInfo from '../../../../../../package.json';
 import { CacheApiService, wipeCaches } from '@redaction/red-cache';
 
 export enum AppConfigKey {
@@ -48,20 +50,23 @@ export class AppConfigService {
                     '[REDACTION] Last app version: ',
                     lastVersion,
                     ' current version ',
-                    version
+                    this.version
                 );
-                if (lastVersion !== version) {
+                if (lastVersion !== this.version) {
                     console.log('[REDACTION] Version-missmatch - wiping caches!');
                     await wipeCaches();
                 }
-                await this._cacheApiService.cacheValue(AppConfigKey.FRONTEND_APP_VERSION, version);
+                await this._cacheApiService.cacheValue(
+                    AppConfigKey.FRONTEND_APP_VERSION,
+                    this.version
+                );
             });
 
         return this._httpClient.get<any>('/assets/config/config.json').pipe(
             tap((config) => {
                 console.log('[REDACTION] Started with config: ', config);
                 this._config = config;
-                this._config[AppConfigKey.FRONTEND_APP_VERSION] = version;
+                this._config[AppConfigKey.FRONTEND_APP_VERSION] = this.version;
                 this._titleService.setTitle(this.getConfig(AppConfigKey.APP_NAME, 'DDA-R'));
             })
         );
@@ -70,4 +75,8 @@ export class AppConfigService {
     getConfig(key: AppConfigKey | string, defaultValue?: any) {
         return this._config[key] ? this._config[key] : defaultValue;
     }
+
+    get version(): string {
+        return packageInfo.version;
+    }
 }
diff --git a/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.scss
index 37dc214e1..3e244cd8a 100644
--- a/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.scss
+++ b/apps/red-ui/src/app/modules/projects/components/needs-work-badge/needs-work-badge.component.scss
@@ -1,4 +1,4 @@
-@import '/apps/red-ui/src/assets/styles/red-variables';
+@import 'apps/red-ui/src/assets/styles/red-variables';
 
 .needs-work {
     display: flex;
diff --git a/apps/red-ui/src/assets/styles/red-material-theme.scss b/apps/red-ui/src/assets/styles/red-material-theme.scss
index 5242c9bbc..5a241b1fe 100644
--- a/apps/red-ui/src/assets/styles/red-material-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-material-theme.scss
@@ -1,7 +1,7 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 @import 'red-variables';
 
-@include mat-core();
+@include mat.core();
 
 $primary-palette: (
     default: $red-1,
@@ -39,11 +39,11 @@ $red-palette: (
     )
 );
 
-$gn-next-primary: mat-palette($primary-palette, default, lighter, darker, text);
-$gn-next-secondary: mat-palette($secondary-palette, default, lighter, darker, text);
-$gn-next-warning: mat-palette($red-palette, default, lighter, darker, text);
+$gn-next-primary: mat.define-palette($primary-palette, default, lighter, darker, text);
+$gn-next-secondary: mat.define-palette($secondary-palette, default, lighter, darker, text);
+$gn-next-warning: mat.define-palette($red-palette, default, lighter, darker, text);
 
-$gn-next-mat-theme: mat-light-theme(
+$gn-next-mat-theme: mat.define-light-theme(
     (
         color: (
             primary: $gn-next-primary,
@@ -53,13 +53,13 @@ $gn-next-mat-theme: mat-light-theme(
     )
 );
 
-@include angular-material-theme($gn-next-mat-theme);
+@include mat.all-component-themes($gn-next-mat-theme);
 
-$custom-typography: mat-typography-config(
+$custom-typography: mat.define-typography-config(
     $font-family: 'Inter, sans-serif'
 );
 
-@include angular-material-typography($custom-typography);
+@include mat.all-component-typographies($custom-typography);
 
 .mat-flat-button {
     min-width: unset !important;
diff --git a/package.json b/package.json
index 2d35d9ba5..27df9871d 100644
--- a/package.json
+++ b/package.json
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "@angular/animations": "12.0.0",
-    "@angular/cdk": "~11.2.12",
+    "@angular/cdk": "~12.0.0",
     "@angular/common": "12.0.0",
     "@angular/compiler": "12.0.0",
     "@angular/core": "12.0.0",
     "@angular/forms": "12.0.0",
-    "@angular/material": "~11.2.12",
-    "@angular/material-moment-adapter": "^11.2.12",
+    "@angular/material": "~12.0.0",
+    "@angular/material-moment-adapter": "^12.0.0",
     "@angular/platform-browser": "12.0.0",
     "@angular/platform-browser-dynamic": "12.0.0",
     "@angular/router": "12.0.0",
diff --git a/yarn.lock b/yarn.lock
index 91aff911c..b1700fc03 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -171,12 +171,12 @@
   dependencies:
     tslib "^2.1.0"
 
-"@angular/cdk@~11.2.12":
-  version "11.2.12"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-11.2.12.tgz#c1c9c8d4a5763745fe2d324fc253f221b9c2b1b3"
-  integrity sha512-LImCQQ7n5OnTGXBAx1BaHgBBbdXiEtsNcHk5RvVURya9sswRcXRoa48EG3RyuT8mtqWsUdOX9+v4nCINLG4hZA==
+"@angular/cdk@~12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-12.0.0.tgz#86064923870a7f1d6094d08dc7951e41d8972aaa"
+  integrity sha512-Ij1wNlufbwH2R3zVwkiJgrI0Oc4+yuveEFWMnckcZ7t6E3drmeS1/YeHSbYlWau+fglWs7LtJWC4dEIpGymvzg==
   dependencies:
-    tslib "^2.0.0"
+    tslib "^2.1.0"
   optionalDependencies:
     parse5 "^5.0.0"
 
@@ -259,19 +259,19 @@
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-12.0.0.tgz#b404961f60d944ea013833b282c144b3228f439d"
   integrity sha512-LDS1+dOdXUEf0kiqcYnOfXBIs2HAD6vJ5HWb58kq6z/8AHRMvvHiwSV26UlIbnnD+CBnTu36xmbCyZtIJluhqw==
 
-"@angular/material-moment-adapter@^11.2.12":
-  version "11.2.12"
-  resolved "https://registry.yarnpkg.com/@angular/material-moment-adapter/-/material-moment-adapter-11.2.12.tgz#8044d1a21c916382714062e665fa19fb3375f1b7"
-  integrity sha512-dV3rYkB1OkLECTJZH+xyLWEnu7MEwIWn93P1xd/xA0a0loW9HvHhGaLOWodtS2MdFau6QCnwGTeoVecH7Z4zpw==
+"@angular/material-moment-adapter@^12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/material-moment-adapter/-/material-moment-adapter-12.0.0.tgz#e98aa88c910d45f3b088587fa813c65dd5782546"
+  integrity sha512-KHj28LoEp+LAhu8ohm4RO4ox7yYSO2e3eMYHF2IlX1lZ9k/g62tMbB01QffqroZuHelNdja3aGH0mnwrXUiH4g==
   dependencies:
-    tslib "^2.0.0"
+    tslib "^2.1.0"
 
-"@angular/material@~11.2.12":
-  version "11.2.12"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-11.2.12.tgz#625778113075bddb92f13ab03a8a513178f2b5a8"
-  integrity sha512-n3HDKoM552jLcmxtpTYzMUzV6V9vUBKyNs7SNdUfjuK00VJlTWMu03g/QWOj2Y9KftOuDUa8+N2XodwAr+jtCw==
+"@angular/material@~12.0.0":
+  version "12.0.0"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-12.0.0.tgz#07eb6ad3c661ae3ab8e65df803eae47fd149735f"
+  integrity sha512-ToWfr4ge2ZINLBtUQOseGm7mzscLMsrKLWYM0HzfVL9lkm6EtfTlReZV84DEzDf6/htky41t9nY5SBPWs2dtug==
   dependencies:
-    tslib "^2.0.0"
+    tslib "^2.1.0"
 
 "@angular/platform-browser-dynamic@12.0.0":
   version "12.0.0"