diff --git a/.github/build.yml b/.github/build.yml
deleted file mode 100644
index 91ae0d0..0000000
--- a/.github/build.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-name: build
-
-on: [push, pull_request]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Setup .NET
-        uses: actions/setup-dotnet@v1
-        with:
-          dotnet-version: '6.0.x'
-          include-prerelease: true
-
-      - name: Build with dotnet
-        run: dotnet build Foodie.sln --configuration Release
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..a511ee5
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,41 @@
+name: build
+
+on: pull_request
+
+jobs:
+  build-dotnet:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup .NET
+        uses: actions/setup-dotnet@v1
+        with:
+          dotnet-version: '6.0.x'
+          include-prerelease: true
+
+      - name: Build with dotnet
+        run: dotnet build Foodie.sln --configuration Release
+
+  build-npm:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./Foodie/ClientApp
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Run npm install
+      run: npm install
+    
+    - name: Run build command
+      run: npm run build
diff --git a/Foodie/ClientApp/angular.json b/Foodie/ClientApp/angular.json
index fc8b5a8..a6be8a1 100644
--- a/Foodie/ClientApp/angular.json
+++ b/Foodie/ClientApp/angular.json
@@ -14,7 +14,6 @@
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
                         "progress": true,
-                        "extractCss": true,
                         "outputPath": "dist",
                         "index": "src/index.html",
                         "main": "src/main.ts",
@@ -27,7 +26,7 @@
                         "styles": [
                             "src/custom-theme.scss",
                             "node_modules/bootstrap/dist/css/bootstrap.min.css",
-                            "src/styles.css"
+                            "src/styles.scss"
                         ],
                         "scripts": []
                     },
@@ -147,6 +146,5 @@
                 }
             }
         }
-    },
-    "defaultProject": "Foodie"
-}
\ No newline at end of file
+    }
+}
diff --git a/Foodie/ClientApp/src/app/app.module.ts b/Foodie/ClientApp/src/app/app.module.ts
index f4fe802..4911453 100644
--- a/Foodie/ClientApp/src/app/app.module.ts
+++ b/Foodie/ClientApp/src/app/app.module.ts
@@ -22,7 +22,6 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { CountoModule } from 'angular2-counto';
 import { DataComponent } from './data/data.component';
 import * as Hammer from 'hammerjs';
 import { StartingComponent } from './starting/starting.component';
@@ -87,7 +86,6 @@ export class MyHammerConfig extends HammerGestureConfig {
     MatProgressSpinnerModule,
     MatTooltipModule,
     MatProgressBarModule,
-    CountoModule,
     MatIconModule,
     MatChipsModule,
     MatRadioModule,
@@ -96,11 +94,6 @@ export class MyHammerConfig extends HammerGestureConfig {
     MatSnackBarModule,
     MatButtonToggleModule
   ],
-  entryComponents: [
-    IngriedientDialogComponent,
-    ProductDialogComponent,
-    MealsCountExceededSnackBarComponent
-  ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true },
     { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig, },
diff --git a/Foodie/ClientApp/src/app/app.server.module.ts b/Foodie/ClientApp/src/app/app.server.module.ts
index cfb0e02..316380b 100644
--- a/Foodie/ClientApp/src/app/app.server.module.ts
+++ b/Foodie/ClientApp/src/app/app.server.module.ts
@@ -1,11 +1,10 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
-import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
 import { AppComponent } from './app.component';
 import { AppModule } from './app.module';
 
 @NgModule({
-    imports: [AppModule, ServerModule, ModuleMapLoaderModule],
+    imports: [AppModule, ServerModule],
     bootstrap: [AppComponent]
 })
 export class AppServerModule { }
diff --git a/Foodie/ClientApp/src/app/meal-calendar/meal-calendar.component.html b/Foodie/ClientApp/src/app/meal-calendar/meal-calendar.component.html
index 14a3c2b..c25f9c0 100644
--- a/Foodie/ClientApp/src/app/meal-calendar/meal-calendar.component.html
+++ b/Foodie/ClientApp/src/app/meal-calendar/meal-calendar.component.html
@@ -116,12 +116,12 @@
         </mat-accordion>
     </div>
 </div>
-<mat-chip-list class="d-none d-lg-inline">
+<mat-chip-listbox class="d-none d-lg-inline">
     <div class="floating-buttons">
-        <mat-chip class="floating-button-large" [routerLink]='["/products"]' disableRipple><i class=" material-icons ">list</i>Manage products</mat-chip>
-        <mat-chip class="floating-button-large" (click)="addMeal()" disableRipple><i class=" material-icons ">add</i> Add new meal </mat-chip>
+        <mat-chip-option class="floating-button-large" [routerLink]='["/products"]' disableRipple><i class=" material-icons ">list</i>Manage products</mat-chip-option>
+        <mat-chip-option class="floating-button-large" (click)="addMeal()" disableRipple><i class=" material-icons ">add</i> Add new meal </mat-chip-option>
     </div>
-</mat-chip-list>
+</mat-chip-listbox>
 
 <div class="floating-buttons">
     <button mat-fab class=" floating-button d-inline d-lg-none " [routerLink]='["/products"]'><i class="material-icons ">list</i></button>
diff --git a/Foodie/ClientApp/src/app/products/products.component.css b/Foodie/ClientApp/src/app/products/products.component.css
index 0378ea1..56fb144 100644
--- a/Foodie/ClientApp/src/app/products/products.component.css
+++ b/Foodie/ClientApp/src/app/products/products.component.css
@@ -35,7 +35,7 @@
     padding-right: 0;
 }
 
-.mat-cell:last-of-type() {
+.mat-cell:last-of-type {
     justify-content: end;
 }
 
diff --git a/Foodie/ClientApp/src/app/products/products.component.html b/Foodie/ClientApp/src/app/products/products.component.html
index d72f7d7..be1b25a 100644
--- a/Foodie/ClientApp/src/app/products/products.component.html
+++ b/Foodie/ClientApp/src/app/products/products.component.html
@@ -39,12 +39,12 @@ <h1 class="text-center mb-3">Products</h1>
     </mat-table>
 
 </div>
-<mat-chip-list class="d-none d-lg-inline">
+<mat-chip-listbox class="d-none d-lg-inline">
     <div class="floating-buttons">
-        <mat-chip class="floating-button-large" [routerLink]='["/mealcalendar"]'><i class=" material-icons ">calendar_today</i>Manage meals</mat-chip>
-        <mat-chip class="floating-button-large" (click)="addProduct()"><i class=" material-icons ">add</i> Add new product </mat-chip>
+        <mat-chip-option class="floating-button-large" [routerLink]='["/mealcalendar"]'><i class=" material-icons ">calendar_today</i>Manage meals</mat-chip-option>
+        <mat-chip-option class="floating-button-large" (click)="addProduct()"><i class=" material-icons ">add</i> Add new product </mat-chip-option>
     </div>
-</mat-chip-list>
+</mat-chip-listbox>
 
 <div class="floating-buttons">
     <button mat-fab class=" floating-button d-inline d-lg-none " [routerLink]='["/mealcalendar"]'><i
diff --git a/Foodie/ClientApp/src/app/services/meals.service.ts b/Foodie/ClientApp/src/app/services/meals.service.ts
index 2cc231e..79e90e4 100644
--- a/Foodie/ClientApp/src/app/services/meals.service.ts
+++ b/Foodie/ClientApp/src/app/services/meals.service.ts
@@ -3,7 +3,6 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Meal } from '../models/meal';
 import { DatePipe } from '@angular/common';
-import { debug } from 'util';
 import { Ingriedient } from '../models/ingiedient';
 import { Macro } from '../models/macro';
 
diff --git a/Foodie/ClientApp/src/custom-theme.scss b/Foodie/ClientApp/src/custom-theme.scss
index d035302..be6e176 100644
--- a/Foodie/ClientApp/src/custom-theme.scss
+++ b/Foodie/ClientApp/src/custom-theme.scss
@@ -1,28 +1,22 @@
 
 // Custom Theming for Angular Material
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
-// Plus imports for other components in your app.
+@use '@angular/material' as mat;
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
+@include mat.strong-focus-indicators();
 
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$Foodie-primary: mat-palette($mat-indigo);
-$Foodie-accent: mat-palette($mat-pink, A200, A100, A400);
+$Foodie-primary: mat.define-palette(mat.$indigo-palette, 500);
+$Foodie-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$Foodie-warn: mat.define-palette(mat.$red-palette);
 
-// The warn palette is optional (defaults to red).
-$Foodie-warn: mat-palette($mat-red);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$Foodie-theme: mat-light-theme($Foodie-primary, $Foodie-accent, $Foodie-warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include angular-material-theme($Foodie-theme);
+$Foodie-theme: mat.define-light-theme((
+ color: (
+   primary: $Foodie-primary,
+   accent: $Foodie-accent,
+   warn: $Foodie-warn,
+ )
+));
 
+@include mat.all-component-themes($Foodie-theme);
+@include mat.strong-focus-indicators-theme($Foodie-theme);
diff --git a/Foodie/ClientApp/src/polyfills.ts b/Foodie/ClientApp/src/polyfills.ts
index aa665d6..899d11e 100644
--- a/Foodie/ClientApp/src/polyfills.ts
+++ b/Foodie/ClientApp/src/polyfills.ts
@@ -55,8 +55,9 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+// import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';
+import 'zone.js/testing';
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
diff --git a/Foodie/ClientApp/src/styles.css b/Foodie/ClientApp/src/styles.scss
similarity index 97%
rename from Foodie/ClientApp/src/styles.css
rename to Foodie/ClientApp/src/styles.scss
index 88b28ab..15086ab 100644
--- a/Foodie/ClientApp/src/styles.css
+++ b/Foodie/ClientApp/src/styles.scss
@@ -31,7 +31,7 @@ body {
 button:focus,
 button:active:focus,
 button.active:focus {
-    outline: none !important;
+outline: none !important;
     outline-style: none !important;
 }