diff --git a/angular.json b/angular.json
index 47d4eb6b2..7b797358d 100644
--- a/angular.json
+++ b/angular.json
@@ -26,6 +26,7 @@
             "outputPath": "dist/movies/browser",
             "index": "projects/movies/src/index.original.html",
             "main": "projects/movies/src/main.ts",
+            "polyfills": "projects/movies/src/polyfills.ts",
             "tsConfig": "projects/movies/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "namedChunks": true,
diff --git a/projects/movies/src/app/app-shell/account-menu/account-menu.component.ts b/projects/movies/src/app/app-shell/account-menu/account-menu.component.ts
index ccd688dbf..ae177554c 100644
--- a/projects/movies/src/app/app-shell/account-menu/account-menu.component.ts
+++ b/projects/movies/src/app/app-shell/account-menu/account-menu.component.ts
@@ -20,7 +20,7 @@ type Actions = {
   selector: 'account-menu',
   templateUrl: './account-menu.component.html',
   styleUrls: ['./account-menu.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   providers: [RxState, RxEffects],
 })
 export class AccountMenuComponent {
diff --git a/projects/movies/src/app/app-shell/app-shell.component.html b/projects/movies/src/app/app-shell/app-shell.component.html
index 3a9a5763c..801956e05 100644
--- a/projects/movies/src/app/app-shell/app-shell.component.html
+++ b/projects/movies/src/app/app-shell/app-shell.component.html
@@ -1,6 +1,5 @@
-<ng-container *rxLet="viewState$; let vs">
+<ng-container *ngIf="viewState$ | async as vs">
   <ui-side-drawer
-    *rxLet="[]"
     [opened]="vs.sideDrawerOpen"
     (openedChange)="ui.sideDrawerOpenToggle(false)"
   >
@@ -16,7 +15,7 @@
         />
       </picture>
     </a>
-    <nav class="navigation" *rxLet="[]">
+    <nav class="navigation">
       <h3 class="navigation--headline">Discover</h3>
       <a
         data-uf="menu-cat-popular"
@@ -54,7 +53,7 @@ <h3 class="navigation--headline">Discover</h3>
       <h3 class="navigation--headline">Genres</h3>
       <a
         [attr.data-uf]="'menu-gen-'+genre.id"
-        *rxFor="let genre of genres$; trackBy: trackByGenre; strategy: 'idle'"
+        *ngFor="let genre of genres$ | async; trackBy: trackByGenre;"
         class="navigation--link"
         [routerLink]="['/list', 'genre', genre.id]"
         routerLinkActive="active"
@@ -86,7 +85,7 @@ <h3 class="navigation--headline">Genres</h3>
     </div>
   </ui-side-drawer>
   <div class="content-wrapper">
-    <div *rxLet="[]" class="ui-toolbar">
+    <div class="ui-toolbar">
       <ui-hamburger-button
         data-uf="menu-btn"
         class="ui-toolbar--action"
@@ -115,7 +114,7 @@ <h3 class="navigation--headline">Genres</h3>
         </div>
       </div>
     </div>
-    <div *rxLet="[]" class="content">
+    <div class="content">
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/projects/movies/src/app/app-shell/app-shell.component.scss b/projects/movies/src/app/app-shell/app-shell.component.scss
index 04eb1dab1..32c831ab2 100644
--- a/projects/movies/src/app/app-shell/app-shell.component.scss
+++ b/projects/movies/src/app/app-shell/app-shell.component.scss
@@ -146,7 +146,6 @@ ui-side-drawer {
 .content {
   min-height: calc(100vh - 72px);
   width: 100%;
-  contain: layout;
 }
 
 :host {
diff --git a/projects/movies/src/app/app-shell/app-shell.component.ts b/projects/movies/src/app/app-shell/app-shell.component.ts
index da6378872..b0036d2ce 100644
--- a/projects/movies/src/app/app-shell/app-shell.component.ts
+++ b/projects/movies/src/app/app-shell/app-shell.component.ts
@@ -21,7 +21,7 @@ import { trackByProp } from '../shared/utils/track-by';
 import { RxActionFactory } from '../shared/rxa-custom/actions';
 import { RouterState } from '../shared/router/router.state';
 import { getIdentifierOfTypeAndLayout } from '../shared/state/utils';
-import { getGenresCached } from '../data-access/api/resources/genre.resource';
+import { GenreResource } from '../data-access/api/resources/genre.resource';
 import { RxEffects } from '@rx-angular/state/effects';
 
 type Actions = {
@@ -33,7 +33,7 @@ type Actions = {
   selector: 'app-shell',
   templateUrl: './app-shell.component.html',
   styleUrls: ['./app-shell.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   providers: [RxState, RxEffects, RxActionFactory],
 })
@@ -59,7 +59,8 @@ export class AppShellComponent {
     public routerState: RouterState,
     @Inject(DOCUMENT) document: Document,
     private router: Router,
-    private actionsF: RxActionFactory<Actions>
+    private actionsF: RxActionFactory<Actions>,
+    private genreResource: GenreResource
   ) {
     this.init();
     /**
@@ -87,7 +88,7 @@ export class AppShellComponent {
     );
   }
 
-  readonly genres$ = getGenresCached();
+  readonly genres$ = this.genreResource.getGenresCached();
 
   readonly viewState$ = this.state.select();
 
diff --git a/projects/movies/src/app/app.component.ts b/projects/movies/src/app/app.component.ts
index 6e41ecb65..159a0e58b 100644
--- a/projects/movies/src/app/app.component.ts
+++ b/projects/movies/src/app/app.component.ts
@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ZonelessRouting } from './shared/zone-less/zone-less-routing.service';
+// import { ZonelessRouting } from './shared/zone-less/zone-less-routing.service';
 
 @Component({
   selector: 'app-root',
   template: `
-    <app-shell *rxLet="[]">
+    <app-shell>
       <router-outlet></router-outlet>
     </app-shell>
   `,
@@ -13,7 +13,7 @@ import { ZonelessRouting } from './shared/zone-less/zone-less-routing.service';
    *
    * Use ChangeDetectionStrategy.OnPush in all components to reduce change detection & template re-evaluation
    */
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class AppComponent {
   /**
@@ -28,8 +28,9 @@ export class AppComponent {
        this.zonelessRouting.init();
      }
    *
-   */
+
   constructor(private zonelessRouting: ZonelessRouting) {
     this.zonelessRouting.init();
   }
+   */
 }
diff --git a/projects/movies/src/app/app.module.ts b/projects/movies/src/app/app.module.ts
index 4ad1e2455..51a677cbc 100644
--- a/projects/movies/src/app/app.module.ts
+++ b/projects/movies/src/app/app.module.ts
@@ -5,8 +5,8 @@ import { AppComponent } from './app.component';
 import { AppShellModule } from './app-shell/app-shell.module';
 import { ROUTING_IMPORTS } from './app.routing';
 import { TMDB_HTTP_INTERCEPTORS_PROVIDER } from './shared/auth/tmdb-http-interceptor.providers';
-import { GLOBAL_STATE_APP_INITIALIZER_PROVIDER } from './state-app-initializer.provider';
-import { SCHEDULED_APP_INITIALIZER_PROVIDER } from './shared/app-initializer/chunk-app-initializer.provider';
+// import { GLOBAL_STATE_APP_INITIALIZER_PROVIDER } from './state-app-initializer.provider';
+// import { SCHEDULED_APP_INITIALIZER_PROVIDER } from './shared/app-initializer/chunk-app-initializer.provider';
 import { SERVICE_WORKER_IMPORTS } from './shared/pwa/service-worker.imports';
 import { RXA_PROVIDER } from './shared/rxa-custom/rxa.provider';
 import { LetModule } from '@rx-angular/template/let';
@@ -45,13 +45,13 @@ import { RxActionFactory } from './shared/rxa-custom/actions';
      *
      * Fetch data visible in viewport on app bootstrap instead of component initialization.
      */
-    GLOBAL_STATE_APP_INITIALIZER_PROVIDER,
+    // GLOBAL_STATE_APP_INITIALIZER_PROVIDER,
     /**
      * **🚀 Perf Tip for TBT:**
      *
      * Chunk app bootstrap over APP_INITIALIZER.
      */
-    SCHEDULED_APP_INITIALIZER_PROVIDER,
+    // SCHEDULED_APP_INITIALIZER_PROVIDER,
     /**
      * **🚀 Perf Tip for TBT, LCP, CLS:**
      *
diff --git a/projects/movies/src/app/app.routing.ts b/projects/movies/src/app/app.routing.ts
index 6b3bcfcac..e690e580a 100644
--- a/projects/movies/src/app/app.routing.ts
+++ b/projects/movies/src/app/app.routing.ts
@@ -85,7 +85,7 @@ export const ROUTING_IMPORTS = [
      *
      * Disable initial sync navigation in router config and schedule it in router-outlet container component
      */
-    initialNavigation: 'disabled',
+    // initialNavigation: 'disabled',
     /**
      * **💡 UX Tip for InfiniteScroll:**
      *
diff --git a/projects/movies/src/app/data-access/api/resources/account.resource.ts b/projects/movies/src/app/data-access/api/resources/account.resource.ts
index 2ceaa7f2b..128b42482 100644
--- a/projects/movies/src/app/data-access/api/resources/account.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/account.resource.ts
@@ -1,5 +1,4 @@
 import { getTMDBPaginateOptions } from '../paginate/utils';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import {
   TMDBPaginateOptions,
   TMDBPaginateResult,
@@ -9,6 +8,8 @@ import { TMDBAccountList } from '../model/list.model';
 import { baseUrlApiV4 } from './internal/base-urls.constant';
 import { getTMDBSortOptions } from '../sort/utils';
 import { TMDBDiscoverOptions } from './discover.resource';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 
 const URL_ACCOUNT_LIST = (uid: string) =>
   [baseUrlApiV4, 'account', uid, 'lists'].join('/');
@@ -22,12 +23,19 @@ function getTMDBAcountListOptions(options: any): TMDBDiscoverOptions {
 }
 
 export type TMDBAccountListResponse = TMDBPaginateResult<TMDBAccountList>;
-export const getAccountList = (
-  accountId: string,
-  params: TMDBPaginateOptions = {} as TMDBPaginateOptions
-): Observable<TMDBAccountListResponse> => {
-  params = getTMDBAcountListOptions(params);
-  return getHTTP().get<TMDBAccountListResponse>(URL_ACCOUNT_LIST(accountId), {
-    params,
-  });
-};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AccountResource {
+  constructor(private http: HttpClient) {}
+  getAccountList = (
+    accountId: string,
+    params: TMDBPaginateOptions = {} as TMDBPaginateOptions
+  ): Observable<TMDBAccountListResponse> => {
+    params = getTMDBAcountListOptions(params);
+    return this.http.get<TMDBAccountListResponse>(URL_ACCOUNT_LIST(accountId), {
+      params,
+    });
+  };
+}
diff --git a/projects/movies/src/app/data-access/api/resources/authv3.resource.ts b/projects/movies/src/app/data-access/api/resources/authv3.resource.ts
index 25406d7ac..06bf0ef3e 100644
--- a/projects/movies/src/app/data-access/api/resources/authv3.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/authv3.resource.ts
@@ -1,14 +1,20 @@
 import { Observable } from 'rxjs';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import { GuestSession } from '../model/guest-session.interface';
 import { staticRequest } from '../staticRequest';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 const baseUrl = [baseUrlApiV3, 'authentication'].join('/');
 const URL_GUEST_SESSION = [baseUrl, 'guest_session', 'new'].join('/');
 
-export const getGuestSession = (): Observable<GuestSession> => {
-  return getHTTP().get<GuestSession>(URL_GUEST_SESSION);
-};
-
-export const getGuestSessionCached = staticRequest(getGuestSession);
+@Injectable({
+  providedIn: 'root',
+})
+export class GuestSessionResource {
+  constructor(private http: HttpClient) {}
+  getGuestSession = (): Observable<GuestSession> => {
+    return this.http.get<GuestSession>(URL_GUEST_SESSION);
+  };
+  getGuestSessionCached = staticRequest(this.getGuestSession);
+}
diff --git a/projects/movies/src/app/data-access/api/resources/authv4.resource.ts b/projects/movies/src/app/data-access/api/resources/authv4.resource.ts
index a90c2329c..13b4ac4e4 100644
--- a/projects/movies/src/app/data-access/api/resources/authv4.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/authv4.resource.ts
@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs';
 import { baseUrlApiV4 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 export type Token = {
   request_token: string;
@@ -12,16 +13,22 @@ const baseUrl = [baseUrlApiV4, 'auth'].join('/');
 const URL_REQUEST_TOKEN = [baseUrl, 'request_token'].join('/');
 const URL_ACCESS_TOKEN = [baseUrl, 'access_token'].join('/');
 
-export const createRequestToken = (redirectTo: string): Observable<Token> => {
-  return getHTTP().post<any>(URL_REQUEST_TOKEN, {
-    redirect_to: redirectTo,
-  });
-};
+@Injectable({
+  providedIn: 'root',
+})
+export class Authv4Resource {
+  constructor(private http: HttpClient) {}
+
+  createRequestToken = (redirectTo: string): Observable<Token> =>
+    this.http.post<any>(URL_REQUEST_TOKEN, {
+      redirect_to: redirectTo,
+    });
 
-export const createAccessToken = (requestToken: string): Observable<Token> =>
-  getHTTP().post<any>(URL_ACCESS_TOKEN, { request_token: requestToken });
+  createAccessToken = (requestToken: string): Observable<Token> =>
+    this.http.post<any>(URL_ACCESS_TOKEN, { request_token: requestToken });
 
-export const deleteAccessToken = (accessToken: string): Observable<Token> =>
-  getHTTP().delete<any>(URL_ACCESS_TOKEN, {
-    body: { access_token: accessToken },
-  });
+  deleteAccessToken = (accessToken: string): Observable<Token> =>
+    this.http.delete<any>(URL_ACCESS_TOKEN, {
+      body: { access_token: accessToken },
+    });
+}
diff --git a/projects/movies/src/app/data-access/api/resources/configuration.resource.ts b/projects/movies/src/app/data-access/api/resources/configuration.resource.ts
index 50d648fec..e06d96201 100644
--- a/projects/movies/src/app/data-access/api/resources/configuration.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/configuration.resource.ts
@@ -1,9 +1,16 @@
 import { Observable } from 'rxjs';
 import { TMDBConfigurationModel } from '../model/configuration.model';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 const URL_CONFIGURATION = [baseUrlApiV3, 'configuration'].join('/');
 
-export const getConfig = (): Observable<TMDBConfigurationModel> =>
-  getHTTP().get<TMDBConfigurationModel>(URL_CONFIGURATION);
+@Injectable({
+  providedIn: 'root',
+})
+export class ConfigurationResource {
+  constructor(private http: HttpClient) {}
+  getConfig = (): Observable<TMDBConfigurationModel> =>
+    this.http.get<TMDBConfigurationModel>(URL_CONFIGURATION);
+}
diff --git a/projects/movies/src/app/data-access/api/resources/discover.resource.ts b/projects/movies/src/app/data-access/api/resources/discover.resource.ts
index 16cc1f0ef..649b87179 100644
--- a/projects/movies/src/app/data-access/api/resources/discover.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/discover.resource.ts
@@ -1,7 +1,6 @@
 import { TMDBMovieModel } from '../model/movie.model';
 import { getTMDBPaginateOptions } from '../paginate/utils';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import {
   TMDBPaginateResult,
   TMDBPaginateOptions,
@@ -9,6 +8,8 @@ import {
 import { Observable } from 'rxjs';
 import { TMDBSortOptions } from '../sort/sort.interface';
 import { getTMDBSortOptions } from '../sort/utils';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 const URL_DISCOVER_MOVIE = [baseUrlApiV3, 'discover', 'movie'].join('/');
 
@@ -32,13 +33,20 @@ function getTMDBDiscoverOptions(options: any): TMDBDiscoverOptions {
   return discoverOptions;
 }
 
-/**
- * This endpoint returns related movies for genres and cast actors
- * @param discoverOptions
- */
-export const getDiscoverMovies = (
-  discoverOptions: TMDBDiscoverOptions = {} as TMDBDiscoverOptions
-): Observable<TMDBDiscoverResponse> =>
-  getHTTP().get<TMDBDiscoverResponse>(URL_DISCOVER_MOVIE, {
-    params: getTMDBDiscoverOptions(discoverOptions),
-  });
+@Injectable({
+  providedIn: 'root',
+})
+export class DiscoverResource {
+  constructor(private http: HttpClient) {}
+
+  /**
+   * This endpoint returns related movies for genres and cast actors
+   * @param discoverOptions
+   */
+  getDiscoverMovies = (
+    discoverOptions: TMDBDiscoverOptions = {} as TMDBDiscoverOptions
+  ): Observable<TMDBDiscoverResponse> =>
+    this.http.get<TMDBDiscoverResponse>(URL_DISCOVER_MOVIE, {
+      params: getTMDBDiscoverOptions(discoverOptions),
+    });
+}
diff --git a/projects/movies/src/app/data-access/api/resources/genre.resource.ts b/projects/movies/src/app/data-access/api/resources/genre.resource.ts
index b9d336eeb..17ce225ef 100644
--- a/projects/movies/src/app/data-access/api/resources/genre.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/genre.resource.ts
@@ -1,25 +1,34 @@
 import { map, Observable } from 'rxjs';
 import { TMDBMovieGenreModel } from '../model/movie-genre.model';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import { staticRequest } from '../staticRequest';
 import { toDictionary } from '@rx-angular/cdk/transformations';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 export type GenresResponse = TMDBMovieGenreModel[];
 type GenresServerResponse = { genres: GenresResponse };
 
 const URL_GENRE_MOVIE_LIST = [baseUrlApiV3, 'genre', 'movie', 'list'].join('/');
 
-export const getGenres = (): Observable<GenresResponse> =>
-  getHTTP()
-    .get<GenresServerResponse>(URL_GENRE_MOVIE_LIST)
-    .pipe(map(({ genres }) => genres));
+@Injectable({
+  providedIn: 'root',
+})
+export class GenreResource {
+  constructor(private http: HttpClient) {}
 
-export const getGenresCached = staticRequest(getGenres);
+  getGenres = (): Observable<GenresResponse> =>
+    this.http
+      .get<GenresServerResponse>(URL_GENRE_MOVIE_LIST)
+      .pipe(map(({ genres }) => genres));
 
-export const getGenresDictionaryCached = () =>
-  getGenresCached().pipe(
-    map((i: TMDBMovieGenreModel[]) => toDictionary(i, 'id'))
-  ) as any as Observable<{
-    [key: string]: TMDBMovieGenreModel;
-  }>;
+  getGenresCached = staticRequest(this.getGenres);
+
+  getGenresDictionaryCached() {
+    return this.getGenresCached().pipe(
+      map((i: TMDBMovieGenreModel[]) => toDictionary(i, 'id'))
+    ) as any as Observable<{
+      [key: string]: TMDBMovieGenreModel;
+    }>;
+  }
+}
diff --git a/projects/movies/src/app/data-access/api/resources/list.resource.ts b/projects/movies/src/app/data-access/api/resources/list.resource.ts
index 04589a220..e29bbd7b9 100644
--- a/projects/movies/src/app/data-access/api/resources/list.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/list.resource.ts
@@ -1,11 +1,12 @@
 import { map, Observable } from 'rxjs';
 import { baseUrlApiV4 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import {
   TMDBAddMovieToListParams,
   TMDBListCreateUpdateParams,
   TMDBListModel,
 } from '../model/list.model';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 export type ListCreateResponse = { id: number };
 
@@ -14,27 +15,29 @@ const URL_EXISTING_LIST = (id: number) => [URL_LIST_BASE, id].join('/');
 const URL_ADD_MOVIE_TO_LIST = (id: number) =>
   [URL_EXISTING_LIST(id), 'items'].join('/');
 
-export const createList = (
-  params: TMDBListCreateUpdateParams
-): Observable<number> =>
-  getHTTP()
-    .post<ListCreateResponse>(URL_LIST_BASE, params)
-    .pipe(map(({ id }) => id));
-
-export const fetchList = (
-  id: string
-): Observable<Record<string, TMDBListModel>> =>
-  getHTTP()
-    .get<TMDBListModel>(URL_EXISTING_LIST(+id))
-    .pipe(map((list) => ({ [id]: list })));
-
-export const updateList = (params: TMDBListCreateUpdateParams) =>
-  getHTTP().put(URL_EXISTING_LIST(params.id || 0), params);
-
-export const addMovieToList = (params: TMDBAddMovieToListParams) =>
-  getHTTP().post(URL_ADD_MOVIE_TO_LIST(params.id), params);
-export const deleteMovieFromList = (params: TMDBAddMovieToListParams) =>
-  getHTTP().delete(URL_ADD_MOVIE_TO_LIST(params.id), { body: params });
-
-export const deleteList = (id: string) =>
-  getHTTP().delete(URL_EXISTING_LIST(+id));
+@Injectable({
+  providedIn: 'root',
+})
+export class ListResource {
+  constructor(private http: HttpClient) {}
+
+  createList = (params: TMDBListCreateUpdateParams): Observable<number> =>
+    this.http
+      .post<ListCreateResponse>(URL_LIST_BASE, params)
+      .pipe(map(({ id }) => id));
+
+  fetchList = (id: string): Observable<Record<string, TMDBListModel>> =>
+    this.http
+      .get<TMDBListModel>(URL_EXISTING_LIST(+id))
+      .pipe(map((list) => ({ [id]: list })));
+
+  updateList = (params: TMDBListCreateUpdateParams) =>
+    this.http.put(URL_EXISTING_LIST(params.id || 0), params);
+
+  addMovieToList = (params: TMDBAddMovieToListParams) =>
+    this.http.post(URL_ADD_MOVIE_TO_LIST(params.id), params);
+  deleteMovieFromList = (params: TMDBAddMovieToListParams) =>
+    this.http.delete(URL_ADD_MOVIE_TO_LIST(params.id), { body: params });
+
+  deleteList = (id: string) => this.http.delete(URL_EXISTING_LIST(+id));
+}
diff --git a/projects/movies/src/app/data-access/api/resources/movie.resource.ts b/projects/movies/src/app/data-access/api/resources/movie.resource.ts
index 1f4676c5a..7d4459f8b 100644
--- a/projects/movies/src/app/data-access/api/resources/movie.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/movie.resource.ts
@@ -1,7 +1,6 @@
 import { map, Observable } from 'rxjs';
 import { TMDBMovieModel } from '../model/movie.model';
 import { getTMDBPaginateOptions } from '../paginate/utils';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import {
   TMDBPaginateResult,
   TMDBPaginateOptions,
@@ -11,6 +10,8 @@ import { baseUrlApiV3 } from './internal/base-urls.constant';
 import { TMDBAppendOptions } from './model/append-options';
 import { TMDBDiscoverOptions } from './discover.resource';
 import { getTMDBSortOptions } from '../sort/utils';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 const base = [baseUrlApiV3, 'movie'].join('/');
 
@@ -23,43 +24,52 @@ const URL_MOVIE_QUERY = (query: string) =>
   `${baseUrlApiV3}/search/movie?query=${query}`;
 
 export type MovieResponse = TMDBMovieModel;
-export const getMovie = (
-  id: string,
-  params: TMDBAppendOptions = { append_to_response: 'videos' }
-): Observable<MovieResponse> =>
-  getHTTP().get<MovieResponse>(URL_MOVIE(id), { params });
+export type RecommendationsResponse = TMDBPaginateResult<TMDBMovieModel>;
 
 export type CreditsResponse = TMDBMovieCreditsModel;
-export const getCredits = (id: string): Observable<CreditsResponse> =>
-  getHTTP().get<CreditsResponse>(URL_MOVIE_CREDITS(id));
-
 export type CategoryResponse = TMDBPaginateResult<TMDBMovieModel>;
-export const getMovieCategory = (
-  category: string,
-  params: TMDBPaginateOptions = {} as TMDBPaginateOptions
-): Observable<CategoryResponse> => {
-  params = getTMDBMovieOptions(params);
-  return getHTTP().get<CategoryResponse>(URL_MOVIE_CATEGORY(category), {
-    params,
-  });
-};
 
-export type RecommendationsResponse = TMDBPaginateResult<TMDBMovieModel>;
-export const getMoviesRecommendations = (
-  id: string,
-  params: TMDBPaginateOptions = {} as TMDBPaginateOptions
-): Observable<RecommendationsResponse> => {
-  params = getTMDBMovieOptions(params);
-  return getHTTP().get<RecommendationsResponse>(URL_MOVIE_RECOMMENDATIONS(id), {
-    params,
-  });
-};
+@Injectable({
+  providedIn: 'root',
+})
+export class MovieResource {
+  constructor(private http: HttpClient) {}
+  getMoviesRecommendations = (
+    id: string,
+    params: TMDBPaginateOptions = {} as TMDBPaginateOptions
+  ): Observable<RecommendationsResponse> => {
+    params = getTMDBMovieOptions(params);
+    return this.http.get<RecommendationsResponse>(
+      URL_MOVIE_RECOMMENDATIONS(id),
+      {
+        params,
+      }
+    );
+  };
+  getMovie = (
+    id: string,
+    params: TMDBAppendOptions = { append_to_response: 'videos' }
+  ): Observable<MovieResponse> =>
+    this.http.get<MovieResponse>(URL_MOVIE(id), { params });
 
-export const queryMovie = (query: string): Observable<MovieResponse[]> =>
-  getHTTP()
-    .get<{ results: MovieResponse[] }>(URL_MOVIE_QUERY(query))
-    .pipe(map((res) => res.results));
+  getCredits = (id: string): Observable<CreditsResponse> =>
+    this.http.get<CreditsResponse>(URL_MOVIE_CREDITS(id));
 
+  getMovieCategory = (
+    category: string,
+    params: TMDBPaginateOptions = {} as TMDBPaginateOptions
+  ): Observable<CategoryResponse> => {
+    params = getTMDBMovieOptions(params);
+    return this.http.get<CategoryResponse>(URL_MOVIE_CATEGORY(category), {
+      params,
+    });
+  };
+
+  queryMovie = (query: string): Observable<MovieResponse[]> =>
+    this.http
+      .get<{ results: MovieResponse[] }>(URL_MOVIE_QUERY(query))
+      .pipe(map((res) => res.results));
+}
 function getTMDBMovieOptions(options: any): TMDBDiscoverOptions {
   const discoverOptions = {
     ...getTMDBPaginateOptions(options),
diff --git a/projects/movies/src/app/data-access/api/resources/person.resource.ts b/projects/movies/src/app/data-access/api/resources/person.resource.ts
index 2336c542f..0fbd0e97b 100644
--- a/projects/movies/src/app/data-access/api/resources/person.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/person.resource.ts
@@ -1,16 +1,24 @@
 import { Observable } from 'rxjs';
 import { TMDBPersonModel } from '../model/person.model';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import { TMDBAppendOptions } from './model/append-options';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 export type PersonResponse = TMDBPersonModel;
 
 const URL_PERSON = (id: string) => `${[baseUrlApiV3, 'person', id].join('/')}`;
 
-export const getPerson = (
-  id: string,
-  params: TMDBAppendOptions = { append_to_response: 'videos' }
-): Observable<PersonResponse> => {
-  return getHTTP().get<PersonResponse>(URL_PERSON(id), { params });
-};
+@Injectable({
+  providedIn: 'root',
+})
+export class PersonResource {
+  constructor(private http: HttpClient) {}
+
+  getPerson = (
+    id: string,
+    params: TMDBAppendOptions = { append_to_response: 'videos' }
+  ): Observable<PersonResponse> => {
+    return this.http.get<PersonResponse>(URL_PERSON(id), { params });
+  };
+}
diff --git a/projects/movies/src/app/data-access/api/resources/search.resource.ts b/projects/movies/src/app/data-access/api/resources/search.resource.ts
index 39684782c..e850b0f54 100644
--- a/projects/movies/src/app/data-access/api/resources/search.resource.ts
+++ b/projects/movies/src/app/data-access/api/resources/search.resource.ts
@@ -1,21 +1,30 @@
 import { Observable } from 'rxjs';
 import { TMDBMovieModel } from '../model/movie.model';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 import {
   TMDBPaginateResult,
   TMDBPaginateOptions,
 } from '../paginate/paginate.interface';
 import { baseUrlApiV3 } from './internal/base-urls.constant';
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 
 export type TMDBSearchOptions = TMDBPaginateOptions & {
   lang?: string;
 };
 
 const URL_SEARCH = [baseUrlApiV3, 'search', 'movie'].join('/');
-export const getSearch = (
-  query: string,
-  params: TMDBSearchOptions = {} as TMDBPaginateOptions
-): Observable<TMDBPaginateResult<TMDBMovieModel>> =>
-  getHTTP().get<TMDBPaginateResult<TMDBMovieModel>>(URL_SEARCH, {
-    params: { query, ...params },
-  });
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SearchResource {
+  constructor(private http: HttpClient) {}
+
+  getSearch = (
+    query: string,
+    params: TMDBSearchOptions = {} as TMDBPaginateOptions
+  ): Observable<TMDBPaginateResult<TMDBMovieModel>> =>
+    this.http.get<TMDBPaginateResult<TMDBMovieModel>>(URL_SEARCH, {
+      params: { query, ...params },
+    });
+}
diff --git a/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.scss b/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.scss
index 580cebf6b..ca9eaa0c0 100644
--- a/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.scss
+++ b/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.scss
@@ -23,5 +23,5 @@
   }
 }
 .ui-grid-list-item {
-  content-visibility: auto;
+
 }
diff --git a/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.ts b/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.ts
index 73b109019..82b0eecfa 100644
--- a/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.ts
+++ b/projects/movies/src/app/pages/account-feature/account-list-page/account-list-page.component.ts
@@ -13,7 +13,7 @@ import {
   selector: 'ct-person',
   templateUrl: './account-list-page.component.html',
   styleUrls: ['./account-list-page.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class AccountListPageComponent {
diff --git a/projects/movies/src/app/pages/account-feature/list-create-page/list-create-page.component.ts b/projects/movies/src/app/pages/account-feature/list-create-page/list-create-page.component.ts
index 0069b7331..901bfd771 100644
--- a/projects/movies/src/app/pages/account-feature/list-create-page/list-create-page.component.ts
+++ b/projects/movies/src/app/pages/account-feature/list-create-page/list-create-page.component.ts
@@ -60,7 +60,7 @@ import { ListCreatePageAdapter } from './list-create-page.adapter';
     './list-create-page.component.scss',
     '../../../ui/component/button/_button.scss',
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class ListCreateEditPageComponent implements OnDestroy {
   constructor(public adapter: ListCreatePageAdapter) {}
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-detail-page.component.ts b/projects/movies/src/app/pages/account-feature/list-detail-page/list-detail-page.component.ts
index be7583236..c54239c1b 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-detail-page.component.ts
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-detail-page.component.ts
@@ -4,7 +4,7 @@ import { ListDetailAdapter } from './list-detail-page.adapter';
   selector: 'ct-list-detail-page',
   templateUrl: './list-detail-page.component.html',
   styleUrls: ['./list-detail-page.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class ListDetailPageComponent {
   readonly tabs = [
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.scss b/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.scss
index 4b931ffed..78e74946b 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.scss
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.scss
@@ -20,7 +20,6 @@
 }
 
 .ui-grid-list-item {
-  content-visibility: auto;
   position: relative;
   cursor: pointer;
 
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.ts b/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.ts
index 55599ebce..520752ec8 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.ts
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-image/list-image.component.ts
@@ -6,7 +6,7 @@ import { ListDetailAdapter, ListPoster } from '../list-detail-page.adapter';
   selector: 'ct-list-image',
   templateUrl: './list-image.component.html',
   styleUrls: ['./list-image.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class ListImageComponent {
   constructor(public adapter: ListDetailAdapter) {}
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.adapter.ts b/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.adapter.ts
index 5e808f04d..d2f2f05a9 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.adapter.ts
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.adapter.ts
@@ -17,8 +17,8 @@ import {
 import { TMDBMovieDetailsModel } from '../../../../data-access/api/model/movie-details.model';
 import { TMDBMovieModel } from '../../../../data-access/api/model/movie.model';
 import {
+  MovieResource,
   MovieResponse,
-  queryMovie,
 } from '../../../../data-access/api/resources/movie.resource';
 import { ListDetailAdapter } from '../../../../pages/account-feature/list-detail-page/list-detail-page.adapter';
 import { RxActionFactory } from '../../../../shared/rxa-custom/actions';
@@ -67,7 +67,7 @@ export class ListItemsEditAdapter extends RxState<{
   readonly searchResponse$ = this.ui.search$.pipe(
     distinctUntilChanged(),
     filter(Boolean),
-    exhaustMap((request) => queryMovie(request)),
+    exhaustMap((request) => this.moviesResource.queryMovie(request)),
     map((movies) =>
       movies.map((m) =>
         addImageTag(
@@ -80,7 +80,8 @@ export class ListItemsEditAdapter extends RxState<{
 
   constructor(
     private state: ListState,
-    private detailsAdapter: ListDetailAdapter
+    private detailsAdapter: ListDetailAdapter,
+    private moviesResource: MovieResource
   ) {
     super();
 
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.component.ts b/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.component.ts
index d9f761f24..f1ddc8ac5 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.component.ts
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-items-edit/list-items-edit.component.ts
@@ -10,7 +10,7 @@ import {
   selector: 'ct-list-items-edit',
   templateUrl: './list-items-edit.component.html',
   styleUrls: ['./list-items-edit.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class ListItemsEditComponent {
   constructor(public adapter: ListItemsEditAdapter) {}
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-movies/list-movies.component.ts b/projects/movies/src/app/pages/account-feature/list-detail-page/list-movies/list-movies.component.ts
index 20c791fbd..eaa06f7fe 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-movies/list-movies.component.ts
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-movies/list-movies.component.ts
@@ -4,7 +4,7 @@ import { ListDetailAdapter } from '../list-detail-page.adapter';
 @Component({
   selector: 'ct-list-movies',
   template: `<ui-movie-list [movies]="adapter.movies$"></ui-movie-list>`,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class ListMoviesComponent {
   constructor(public adapter: ListDetailAdapter) {}
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-remove/list-remove.component.ts b/projects/movies/src/app/pages/account-feature/list-detail-page/list-remove/list-remove.component.ts
index 6f3fed973..032aa1b4d 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-remove/list-remove.component.ts
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-remove/list-remove.component.ts
@@ -20,7 +20,7 @@ type Actions = {
   selector: 'app-list-remove',
   templateUrl: './list-remove.component.html',
   styleUrls: ['./list-remove.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   providers: [RxActionFactory],
 })
 export class ListRemoveComponent
diff --git a/projects/movies/src/app/pages/account-feature/list-detail-page/list-share/list-share.component.ts b/projects/movies/src/app/pages/account-feature/list-detail-page/list-share/list-share.component.ts
index ad6e12636..5a87db8f7 100644
--- a/projects/movies/src/app/pages/account-feature/list-detail-page/list-share/list-share.component.ts
+++ b/projects/movies/src/app/pages/account-feature/list-detail-page/list-share/list-share.component.ts
@@ -11,7 +11,7 @@ import { ListDetailAdapter } from '../list-detail-page.adapter';
   selector: 'ct-list-share',
   templateUrl: './list-share.component.html',
   styleUrls: ['./list-share.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class ListShareComponent implements OnInit, OnDestroy {
   private body = document.body;
diff --git a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.adapter.ts b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.adapter.ts
index 019f06e2c..7e21c5b24 100644
--- a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.adapter.ts
+++ b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.adapter.ts
@@ -4,14 +4,8 @@ import { map, Observable, switchMap } from 'rxjs';
 import { RouterState } from '../../shared/router/router.state';
 import { MovieState } from '../../shared/state/movie.state';
 import { getIdentifierOfTypeAndLayout } from '../../shared/state/utils';
-import {
-  getCredits,
-  getMoviesRecommendations,
-} from '../../data-access/api/resources/movie.resource';
-import {
-  transformToCastList,
-  transformToMovieDetail,
-} from './selection/client-movie-detail.mapper';
+import { MovieResource } from '../../data-access/api/resources/movie.resource';
+import { transformToMovieDetail, transformToCastList} from './selection/client-movie-detail.mapper';
 import { RxActionFactory } from '../../shared/rxa-custom/actions';
 import { infiniteScroll } from '../../shared/cdk/infinite-scroll/infiniteScroll';
 import { MovieDetail } from './selection/movie-detail.model';
@@ -42,7 +36,7 @@ export class MovieDetailAdapter extends RxState<any> {
   readonly movieCastById$: Observable<WithContext<MovieCast[]>> =
     this.routerMovieId$.pipe(
       switchMap((id) =>
-        getCredits(id).pipe(
+        this.movieResource.getCredits(id).pipe(
           map(({ cast }) => ({ value: cast.map(transformToCastList) }))
         )
       ),
@@ -52,16 +46,18 @@ export class MovieDetailAdapter extends RxState<any> {
   readonly infiniteScrollRecommendations$ = this.routerMovieId$.pipe(
     switchMap((id) =>
       infiniteScroll(
-        (incrementedParams) => getMoviesRecommendations(id, incrementedParams),
+        (incrementedParams) =>
+          this.movieResource.getMoviesRecommendations(id, incrementedParams),
         this.actions.paginateRecommendations$,
-        getMoviesRecommendations(id, { page: 1 })
+        this.movieResource.getMoviesRecommendations(id, { page: 1 })
       )
     )
   );
 
   constructor(
     private movieState: MovieState,
-    private routerState: RouterState
+    private routerState: RouterState,
+    private movieResource: MovieResource
   ) {
     super();
     this.hold(this.routerMovieId$, this.movieState.fetchMovie);
diff --git a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.html b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.html
index f6e96519f..a41564e78 100644
--- a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.html
+++ b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.html
@@ -1,30 +1,30 @@
 <article class="movie-detail-wrapper">
-  <ng-container *rxLet="movie$; let movie;">
+  <ng-container *ngIf="movie$ | async as movie;">
     <ui-detail-grid
       [style.opacity]="!!movie ? 1 : 0">
       <div detailGridMedia>
         <img
           class="aspectRatio-2-3 fit-cover"
-          [src]="movie.imgUrl"
-          [width]="movie.imgWidth"
-          [height]="movie.imgHeight"
+          [src]="movie?.imgUrl"
+          [width]="movie?.imgWidth"
+          [height]="movie?.imgHeight"
           alt="poster movie"
-          [title]="movie.title"
+          [title]="movie?.title"
           data-uf="hero-img"
         />
       </div>
       <div detailGridDescription>
         <header>
-          <h1 data-uf="header-main">{{ movie.title }}</h1>
-          <h2 data-uf="header-sub">{{ movie.tagline }}</h2>
+          <h1 data-uf="header-main">{{ movie?.title }}</h1>
+          <h2 data-uf="header-sub">{{ movie?.tagline }}</h2>
         </header>
         <section class="movie-detail--basic-infos">
           <ui-star-rating
-            [rating]="movie.vote_average"
+            [rating]="movie?.vote_average"
             [showRating]="true"
           ></ui-star-rating>
           <div class="movie-detail--languages-runtime-release">
-            <strong>{{ movie.languages_runtime_release }}</strong>
+            <strong>{{ movie?.languages_runtime_release }}</strong>
           </div>
         </section>
         <section>
@@ -33,7 +33,7 @@ <h3>The Genres</h3>
             <a
               class="movie-detail--genres-link"
               *ngFor="
-                let genre of movie.genres;
+                let genre of movie?.genres;
                 trackBy: trackByGenre
               "
               [routerLink]="['/list/genre/', genre.id]"
@@ -45,15 +45,15 @@ <h3>The Genres</h3>
         </section>
         <section>
           <h3>The Synopsis</h3>
-          <p>  {{ movie.overview || 'There is no synopsis available...' }}</p>
+          <p>  {{ movie?.overview || 'There is no synopsis available...' }}</p>
         </section>
         <section>
           <h3>The Cast</h3>
           <div class="movie-detail--cast-list">
             <button (mousedown)="move(70)" type="button" role="button" class="cast-list--btn">«</button>
-            <div #castListWrapper class="cast-list" *rxLet="castList$; let ctx;  strategy: 'immediate'">
+            <div #castListWrapper class="cast-list" *ngIf="castList$ | async as ctx;">
               <a
-                *rxFor="let c of  ctx.value; trackBy: trackByCast; index as idx;"
+                *ngFor="let c of  ctx.value; trackBy: trackByCast; index as idx;"
                 [routerLink]="['/detail/person/',c.id]"
                 (click)="$event.preventDefault()"
                 [attr.data-uf]="'cast-' + idx"
@@ -76,14 +76,14 @@ <h3>The Cast</h3>
             class="btn"
             target="_blank"
             rel="noopener noreferrer"
-            [href]="movie.homepage"
+            [href]="movie?.homepage"
           >
             Website
             <svg-icon class="btn__icon" name="website"></svg-icon>
 
           </a>
           <a
-            *ngIf="movie.imdb_id"
+            *ngIf="movie?.imdb_id"
             class="btn"
             [target]="movie.target"
             rel="noopener noreferrer"
@@ -93,7 +93,7 @@ <h3>The Cast</h3>
             <svg-icon class="btn__icon" name="imdb"></svg-icon>
           </a>
           <a
-            *ngIf="movie.videoUrl"
+            *ngIf="movie?.videoUrl"
             class="btn"
             (mouseover)="ui.iframe('load')"
             (click)="$event.preventDefault(); ui({dialog:'show',iframe:'load'})"
@@ -106,17 +106,19 @@ <h3>The Cast</h3>
           <dialog class="video" #trailerDialog id="trailer-dialog">
             <span aria-controls="trailer-dialog" class="close" (click)="ui.dialog('close')"></span>
             <!--
-             **🚀 Perf Tip for less resource usage:**
+            **🚀 Perf Tip for less resource usage:**
             only render iframe if the user needs it (e.g. `*rxIf` or `*ngIf`)
-            *ngIf="initIframe$ | async;"
+
+            *rxIf="initIframe$;"
             -->
             <!--
             **🚀 Perf Tip for LCP:**
             To get out the best performance use the native HTML attribute loading="lazy" instead of a directive.
             This avoids bootstrap and template evaluation time and reduces scripting time in general.
+
+            loading="lazy"
             -->
-            <iframe *rxIf="loadIframe$;" [bypassSrc]="movie.videoUrl" loading="lazy"
-                    width="460" height="230"></iframe>
+            <iframe [bypassSrc]="movie?.videoUrl" width="460" height="230"></iframe>
 
           </dialog>
           <button data-uf="back" class="btn primary-button" (click)="back()">
@@ -133,7 +135,7 @@ <h3>The Cast</h3>
     <h1>Recommended</h1>
     <h2>Movies</h2>
   </header>
-  <ng-container *rxLet="infiniteScrollRecommendations$; let ctx;  strategy: 'immediate'">
+  <ng-container *ngIf="infiniteScrollRecommendations$ | async as ctx;">
     <ui-movie-list (paginate)="paginateRecommendations()"
                    [movies]="ctx.results">
     </ui-movie-list>
diff --git a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.scss b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.scss
index e465b4fef..81804c1fe 100644
--- a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.scss
+++ b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.scss
@@ -73,7 +73,6 @@
     margin: 0 20px;
     width: 100%;
     height: 50px;
-    contain: strict;
     overflow: hidden;
   }
 }
diff --git a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.ts b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.ts
index 386fde491..c468ea84e 100644
--- a/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.ts
+++ b/projects/movies/src/app/pages/movie-detail-page/movie-detail-page.component.ts
@@ -11,7 +11,6 @@ import {
 import { map, mergeWith } from 'rxjs';
 import { TMDBMovieCastModel } from '../../data-access/api/model/movie-credits.model';
 import { TMDBMovieGenreModel } from '../../data-access/api/model/movie-genre.model';
-
 import { MovieDetailAdapter } from './movie-detail-page.adapter';
 import { RxActionFactory } from '../../shared/rxa-custom/actions';
 import { RxEffects } from '@rx-angular/state/effects';
@@ -20,7 +19,7 @@ import { RxEffects } from '@rx-angular/state/effects';
   selector: 'ct-movie',
   templateUrl: './movie-detail-page.component.html',
   styleUrls: ['./movie-detail-page.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   providers: [RxEffects],
 })
diff --git a/projects/movies/src/app/pages/movie-list-page/movie-list-page.adapter.ts b/projects/movies/src/app/pages/movie-list-page/movie-list-page.adapter.ts
index cb91ad184..6a3257452 100644
--- a/projects/movies/src/app/pages/movie-list-page/movie-list-page.adapter.ts
+++ b/projects/movies/src/app/pages/movie-list-page/movie-list-page.adapter.ts
@@ -9,8 +9,6 @@ import {
   withLatestFrom,
 } from 'rxjs';
 import { TMDBMovieModel } from '../../data-access/api/model/movie.model';
-import { getMovieCategory } from '../../data-access/api/resources/movie.resource';
-import { getDiscoverMovies } from '../../data-access/api/resources/discover.resource';
 import {
   TMDBPaginateOptions,
   TMDBPaginateResult,
@@ -22,9 +20,11 @@ import { RouterParams } from '../../shared/router/router.model';
 import { infiniteScroll } from '../../shared/cdk/infinite-scroll/infiniteScroll';
 import { RxActionFactory } from '../../shared/rxa-custom/actions';
 import { InfiniteScrollOptions } from '../../shared/cdk/infinite-scroll/infinite-scroll.interface';
-import { getSearch } from '../../data-access/api/resources/search.resource';
-import { getGenresDictionaryCached } from '../../data-access/api/resources/genre.resource';
 import { MovieListPageModel } from './movie-list-page-adapter.model';
+import { DiscoverResource } from '../../data-access/api/resources/discover.resource';
+import { MovieResource } from '../../data-access/api/resources/movie.resource';
+import { SearchResource } from '../../data-access/api/resources/search.resource';
+import { GenreResource } from '../../data-access/api/resources/genre.resource';
 
 const emptyResult$ = EMPTY as unknown as Observable<
   TMDBPaginateResult<TMDBMovieModel>
@@ -53,7 +53,7 @@ export class MovieListPageAdapter extends RxState<MovieListPageModel> {
         .genreMoviesByIdSlice(identifier)
         .pipe(map(({ loading, value }) => ({ loading, ...value })));
     } else if (type === 'search') {
-      return getSearch(identifier);
+      return this.searchResource.getSearch(identifier);
     }
     return emptyResult$;
   }
@@ -63,7 +63,11 @@ export class MovieListPageAdapter extends RxState<MovieListPageModel> {
   constructor(
     private movieState: MovieState,
     private discoverState: DiscoverState,
-    private routerState: RouterState
+    private routerState: RouterState,
+    private discoverResource: DiscoverResource,
+    private movieResource: MovieResource,
+    private searchResource: SearchResource,
+    private genreResource: GenreResource
   ) {
     super();
 
@@ -72,7 +76,7 @@ export class MovieListPageAdapter extends RxState<MovieListPageModel> {
       map(([_, routerParams]) => routerParams)
     );
 
-    this.connect('genres', getGenresDictionaryCached());
+    this.connect('genres', this.genreResource.getGenresDictionaryCached());
 
     this.connect(
       this.routerState.routerParams$.pipe(selectSlice(['identifier', 'type']))
@@ -87,7 +91,12 @@ export class MovieListPageAdapter extends RxState<MovieListPageModel> {
         switchMap(({ type, identifier }) =>
           infiniteScroll(
             (options: InfiniteScrollOptions) =>
-              getFetchByType(type)(identifier, options),
+              getFetchByType(
+                type,
+                this.movieResource,
+                this.discoverResource,
+                this.searchResource
+              )(identifier, options),
             routerParamsFromPaginationTrigger$,
             this.getInitialFetchByType({ type, identifier })
           )
@@ -112,18 +121,21 @@ export class MovieListPageAdapter extends RxState<MovieListPageModel> {
 }
 
 function getFetchByType(
-  type: RouterParams['type']
+  type: RouterParams['type'],
+  movieResource: MovieResource,
+  discoverResource: DiscoverResource,
+  searchResource: SearchResource
 ): (
   s: string,
   options: TMDBPaginateOptions
 ) => Observable<TMDBPaginateResult<TMDBMovieModel>> {
   if (type === 'category') {
-    return getMovieCategory;
+    return movieResource.getMovieCategory;
   } else if (type === 'search') {
-    return getSearch;
+    return searchResource.getSearch;
   } else if (type === 'genre') {
     return (with_genres: string, options: TMDBPaginateOptions) =>
-      getDiscoverMovies({ ...options, with_genres });
+      discoverResource.getDiscoverMovies({ ...options, with_genres });
   }
 
   return (_: string, __?: TMDBPaginateOptions) => emptyResult$;
diff --git a/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.html b/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.html
index 47366720e..494ae2683 100644
--- a/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.html
+++ b/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.html
@@ -1,10 +1,10 @@
 <article>
-  <header *rxLet="headings$; let headings">
-    <h1 data-uf="header-main">{{ headings.main }}</h1>
-    <h2 data-uf="header-sub">{{ headings.sub }}</h2>
+  <header>
+    <h1 data-uf="header-main">{{ (headings$ | async)?.main }}</h1>
+    <h2 data-uf="header-sub">{{ (headings$ | async)?.sub }}</h2>
   </header>
   <ui-movie-list (paginate)="paginate()"
-                 [movies]="movies$" >
+                 [movies]="movies$ | async">
   </ui-movie-list>
-  <div *rxIf="loading$; let paging" class="loader"></div>
+  <div *ngIf="loading$ | async" class="loader"></div>
 </article>
diff --git a/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.ts b/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.ts
index d31c28ce2..1cc798ed4 100644
--- a/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.ts
+++ b/projects/movies/src/app/pages/movie-list-page/movie-list-page.component.ts
@@ -15,7 +15,7 @@ type Heading = { main: string; sub: string };
   templateUrl: './movie-list-page.component.html',
   styleUrls: ['./movie-list-page.component.scss'],
   encapsulation: ViewEncapsulation.Emulated,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class MovieListPageComponent {
   readonly movies$ = this.adapter.select('results');
diff --git a/projects/movies/src/app/pages/not-found-page/not-found-page.component.ts b/projects/movies/src/app/pages/not-found-page/not-found-page.component.ts
index c132bf614..9875ca356 100644
--- a/projects/movies/src/app/pages/not-found-page/not-found-page.component.ts
+++ b/projects/movies/src/app/pages/not-found-page/not-found-page.component.ts
@@ -12,7 +12,7 @@ import {
     <a class="btn" routerLink="/list/category/popular">See popular</a>
   </div>`,
   styleUrls: ['./not-found-page.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class NotFoundPageComponent {}
diff --git a/projects/movies/src/app/pages/person-detail-page/person-detail-page.adapter.ts b/projects/movies/src/app/pages/person-detail-page/person-detail-page.adapter.ts
index 0e0daa499..3e9ff0e13 100644
--- a/projects/movies/src/app/pages/person-detail-page/person-detail-page.adapter.ts
+++ b/projects/movies/src/app/pages/person-detail-page/person-detail-page.adapter.ts
@@ -11,9 +11,9 @@ import { addImageTag } from '../../shared/utils/image/image-tag.transform';
 import { getIdentifierOfTypeAndLayout } from '../../shared/state/utils';
 import { TMDBPersonModel } from '../../data-access/api/model/person.model';
 import { PersonState } from '../../shared/state/person.state';
-import { getDiscoverMovies } from '../../data-access/api/resources/discover.resource';
 import { WithContext } from '../../shared/cdk/context/context.interface';
 import { MoviesSortValue } from '../../data-access/api/sort/sort.data';
+import { DiscoverResource } from '../../data-access/api/resources/discover.resource';
 
 export type MoviePerson = TMDBPersonModel & ImageTag;
 export type Actions = {
@@ -60,9 +60,14 @@ export class PersonDetailAdapter extends RxState<PersonDetailPageAdapterState> {
     combineLatestWith(this.routerState.select('sortBy')),
     switchMap(([with_cast, sort_by]) => {
       return infiniteScroll(
-        (options) => getDiscoverMovies({ with_cast, ...options, sort_by }),
+        (options) =>
+          this.discoverResource.getDiscoverMovies({
+            with_cast,
+            ...options,
+            sort_by,
+          }),
         this.actions.paginate$,
-        getDiscoverMovies({ with_cast, page: 1, sort_by })
+        this.discoverResource.getDiscoverMovies({ with_cast, page: 1, sort_by })
       );
     })
   );
@@ -72,16 +77,25 @@ export class PersonDetailAdapter extends RxState<PersonDetailPageAdapterState> {
     switchMap(([{ value }, with_cast]) => {
       return infiniteScroll(
         (options) =>
-          getDiscoverMovies({ with_cast, ...options, sort_by: value }),
+          this.discoverResource.getDiscoverMovies({
+            with_cast,
+            ...options,
+            sort_by: value,
+          }),
         this.actions.paginate$,
-        getDiscoverMovies({ with_cast, page: 1, sort_by: value })
+        this.discoverResource.getDiscoverMovies({
+          with_cast,
+          page: 1,
+          sort_by: value,
+        })
       );
     })
   );
 
   constructor(
     private routerState: RouterState,
-    private personState: PersonState
+    private personState: PersonState,
+    private discoverResource: DiscoverResource
   ) {
     super();
 
diff --git a/projects/movies/src/app/pages/person-detail-page/person-detail-page.component.ts b/projects/movies/src/app/pages/person-detail-page/person-detail-page.component.ts
index 1b647b895..0785958b2 100644
--- a/projects/movies/src/app/pages/person-detail-page/person-detail-page.component.ts
+++ b/projects/movies/src/app/pages/person-detail-page/person-detail-page.component.ts
@@ -12,7 +12,7 @@ import { merge } from 'rxjs';
   selector: 'ct-person',
   templateUrl: './person-detail-page.component.html',
   styleUrls: ['./person-detail-page.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class PersonDetailPageComponent {
diff --git a/projects/movies/src/app/shared/auth/auth.effects.ts b/projects/movies/src/app/shared/auth/auth.effects.ts
index 2b5864a8c..184b898e4 100644
--- a/projects/movies/src/app/shared/auth/auth.effects.ts
+++ b/projects/movies/src/app/shared/auth/auth.effects.ts
@@ -3,9 +3,7 @@ import { exhaustMap, filter, map, Observable, take } from 'rxjs';
 import { AuthState } from './auth.state';
 import { isAuthenticationInProgress } from './utils';
 import {
-  createAccessToken,
-  createRequestToken,
-  deleteAccessToken,
+  Authv4Resource,
   Token,
 } from '../../data-access/api/resources/authv4.resource';
 
@@ -13,7 +11,10 @@ import {
   providedIn: 'root',
 })
 export class AuthEffects {
-  constructor(private authState: AuthState) {
+  constructor(
+    private authState: AuthState,
+    private authResouce: Authv4Resource
+  ) {
     this.restoreLogin();
   }
 
@@ -43,7 +44,9 @@ export class AuthEffects {
     return this.authState.requestToken$.pipe(
       take(1),
       filter(<T>(v: T | null): v is T => v != null),
-      exhaustMap((requestToken) => createAccessToken(requestToken)),
+      exhaustMap((requestToken) =>
+        this.authResouce.createAccessToken(requestToken)
+      ),
       map(({ access_token, account_id }: Token) => ({
         accessToken: access_token,
         accountId: account_id,
@@ -52,13 +55,15 @@ export class AuthEffects {
   };
 
   approveRequestToken = (): void => {
-    createRequestToken(this.authState.redirectUrl).subscribe((res: Token) => {
-      // store in local storage for the next page load
-      window.localStorage.setItem('requestToken', res.request_token);
-      window.location.replace(
-        `https://www.themoviedb.org/auth/access?request_token=${res.request_token}`
-      );
-    });
+    this.authResouce
+      .createRequestToken(this.authState.redirectUrl)
+      .subscribe((res: Token) => {
+        // store in local storage for the next page load
+        window.localStorage.setItem('requestToken', res.request_token);
+        window.location.replace(
+          `https://www.themoviedb.org/auth/access?request_token=${res.request_token}`
+        );
+      });
   };
 
   signOut = () => {
@@ -73,7 +78,7 @@ export class AuthEffects {
       requestToken: undefined,
     });
     if (accessToken) {
-      deleteAccessToken(accessToken).subscribe();
+      this.authResouce.deleteAccessToken(accessToken).subscribe();
     }
   };
 }
diff --git a/projects/movies/src/app/shared/rxa-custom/actions/actions.factory.ts b/projects/movies/src/app/shared/rxa-custom/actions/actions.factory.ts
index 679782e87..41f97abfb 100644
--- a/projects/movies/src/app/shared/rxa-custom/actions/actions.factory.ts
+++ b/projects/movies/src/app/shared/rxa-custom/actions/actions.factory.ts
@@ -40,7 +40,7 @@ export class RxActionFactory<T extends Actions> implements OnDestroy {
    * const actions = new RxActionFactory<UIActions>().create();
    *
    * actions.search($event.target.value);
-   * actions.search$ | async;
+   * actions.search$.subscribe();
    *
    * As it is well typed the following things would not work:
    * actions.submit('not void'); // not void
@@ -65,7 +65,7 @@ export class RxActionFactory<T extends Actions> implements OnDestroy {
    * actions.search('string');
    * actions.search(42);
    * actions.submit('not void'); // does not error anymore
-   * actions.search$ | async; // string Observable
+   * actions.search$.subscribe(); // string Observable
    *
    */
   create<U extends ActionTransforms<T> = {}>(transforms?: U): RxActions<T, U> {
diff --git a/projects/movies/src/app/shared/state/account.state.ts b/projects/movies/src/app/shared/state/account.state.ts
index 1363024cd..28bf0ca49 100644
--- a/projects/movies/src/app/shared/state/account.state.ts
+++ b/projects/movies/src/app/shared/state/account.state.ts
@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { RxState } from '@rx-angular/state';
 import { filter, map, Observable, switchMap } from 'rxjs';
 import { TMDBAccountList } from '../../data-access/api/model/list.model';
-import { getAccountList } from '../../data-access/api/resources/account.resource';
 import { AuthState } from '../auth/auth.state';
+import { AccountResource } from '../../data-access/api/resources/account.resource';
 
 @Injectable({
   providedIn: 'root',
@@ -11,14 +11,14 @@ import { AuthState } from '../auth/auth.state';
 export class AccountState extends RxState<{ lists: TMDBAccountList[] }> {
   readonly accountLists$ = this.select('lists');
 
-  constructor(auth: AuthState) {
+  constructor(auth: AuthState, authResource: AccountResource) {
     super();
     this.connect(
       'lists',
       (auth.accountId$ as Observable<string>).pipe(
         filter((v) => v !== null),
         switchMap((id) =>
-          getAccountList(id).pipe(map(({ results }) => results))
+          authResource.getAccountList(id).pipe(map(({ results }) => results))
         )
       )
     );
diff --git a/projects/movies/src/app/shared/state/discover.state.ts b/projects/movies/src/app/shared/state/discover.state.ts
index 3452ee144..e14377fbc 100644
--- a/projects/movies/src/app/shared/state/discover.state.ts
+++ b/projects/movies/src/app/shared/state/discover.state.ts
@@ -6,7 +6,7 @@ import { optimizedFetch } from '../utils/optimized-fetch';
 import { RxActionFactory } from '../rxa-custom/actions';
 import { withLoadingEmission } from '../cdk/loading/withLoadingEmissions';
 import {
-  getDiscoverMovies,
+  DiscoverResource,
   TMDBDiscoverResponse,
 } from '../../data-access/api/resources/discover.resource';
 import { AppInitializer } from '../rxa-custom/app-initializer';
@@ -42,7 +42,10 @@ export class DiscoverState extends RxState<State> implements AppInitializer {
       }))
     );
 
-  constructor(private actionsF: RxActionFactory<Actions>) {
+  constructor(
+    private actionsF: RxActionFactory<Actions>,
+    private discoverResource: DiscoverResource
+  ) {
     super();
 
     this.connect(
@@ -51,10 +54,12 @@ export class DiscoverState extends RxState<State> implements AppInitializer {
         optimizedFetch(
           (genre: string) => genre,
           (with_genres: string) =>
-            getDiscoverMovies({ with_genres, page: 1 }).pipe(
-              map((resp) => ({ value: { [with_genres]: resp } })),
-              withLoadingEmission()
-            )
+            this.discoverResource
+              .getDiscoverMovies({ with_genres, page: 1 })
+              .pipe(
+                map((resp) => ({ value: { [with_genres]: resp } })),
+                withLoadingEmission()
+              )
         )
       ),
       (oldState, newPartial) => {
@@ -73,10 +78,12 @@ export class DiscoverState extends RxState<State> implements AppInitializer {
         optimizedFetch(
           (person) => person,
           (with_cast: string) =>
-            getDiscoverMovies({ with_cast, page: 1 }).pipe(
-              map((resp) => ({ value: { [with_cast]: resp } })),
-              withLoadingEmission()
-            )
+            this.discoverResource
+              .getDiscoverMovies({ with_cast, page: 1 })
+              .pipe(
+                map((resp) => ({ value: { [with_cast]: resp } })),
+                withLoadingEmission()
+              )
         )
       ),
       (oldState, newPartial) => {
diff --git a/projects/movies/src/app/shared/state/genre.state.ts b/projects/movies/src/app/shared/state/genre.state.ts
index de422fcb9..628a8cfce 100644
--- a/projects/movies/src/app/shared/state/genre.state.ts
+++ b/projects/movies/src/app/shared/state/genre.state.ts
@@ -1,10 +1,10 @@
 import { RxState } from '@rx-angular/state';
 import { Injectable } from '@angular/core';
 import { exhaustMap } from 'rxjs';
-import { getActions } from '../rxa-custom/actions';
+import { RxActionFactory } from '../rxa-custom/actions';
 import {
+  GenreResource,
   GenresResponse,
-  getGenres,
 } from '../../data-access/api/resources/genre.resource';
 import { AppInitializer } from '../rxa-custom/app-initializer';
 
@@ -20,13 +20,16 @@ interface Actions {
   providedIn: 'root',
 })
 export class GenreState extends RxState<State> implements AppInitializer {
-  private actions = getActions<Actions>();
+  private actions = this.actionsF.create();
 
   readonly genresNames$ = this.select('genres');
 
   readonly refreshGenres = this.actions.refreshGenres;
 
-  constructor() {
+  constructor(
+    private actionsF: RxActionFactory<Actions>,
+    private genreResource: GenreResource
+  ) {
     super();
 
     this.connect(
@@ -38,7 +41,7 @@ export class GenreState extends RxState<State> implements AppInitializer {
          * Avoid over fetching for HTTP get requests to URLs that will not change result quickly.
          * E.G.: URLs with the same params
          */
-        exhaustMap(getGenres)
+        exhaustMap(this.genreResource.getGenres)
       )
     );
   }
diff --git a/projects/movies/src/app/shared/state/list.state.ts b/projects/movies/src/app/shared/state/list.state.ts
index 1d272cd22..f2c421e67 100644
--- a/projects/movies/src/app/shared/state/list.state.ts
+++ b/projects/movies/src/app/shared/state/list.state.ts
@@ -3,14 +3,7 @@ import { RxState } from '@rx-angular/state';
 import { AppInitializer } from '../rxa-custom/app-initializer';
 import { RxActionFactory } from '../rxa-custom/actions';
 import { concatMap, filter, merge, tap } from 'rxjs';
-import {
-  addMovieToList,
-  createList,
-  fetchList,
-  deleteMovieFromList,
-  updateList,
-  deleteList,
-} from '../../data-access/api/resources/list.resource';
+import { ListResource } from '../../data-access/api/resources/list.resource';
 import {
   TMDBListCreateUpdateParams,
   TMDBListModel,
@@ -50,7 +43,7 @@ export class ListState extends RxState<ListModel> implements AppInitializer {
   private readonly sideEffects$ = merge(
     this.actions.addMovieToList$.pipe(
       concatMap(([movie, id]) =>
-        addMovieToList({
+        this.listResource.addMovieToList({
           id,
           items: [{ media_id: movie.id, media_type: 'movie' }],
         })
@@ -58,26 +51,29 @@ export class ListState extends RxState<ListModel> implements AppInitializer {
     ),
     this.actions.deleteMovieFromList$.pipe(
       concatMap(([movie, id]) =>
-        deleteMovieFromList({
+        this.listResource.deleteMovieFromList({
           id,
           items: [{ media_id: movie.id || 0, media_type: 'movie' }],
         })
       )
     ),
-    this.actions.updateList$.pipe(concatMap((params) => updateList(params))),
+    this.actions.updateList$.pipe(
+      concatMap((params) => this.listResource.updateList(params))
+    ),
     this.actions.createList$.pipe(
-      concatMap((params) => createList(params)),
+      concatMap((params) => this.listResource.createList(params)),
       tap((id) => id && this.router.navigate(['account/my-lists']))
     ),
     this.actions.deleteList$.pipe(
       tap((id) => id && this.router.navigate(['account/my-lists'])),
-      concatMap((id) => deleteList(id))
+      concatMap((id) => this.listResource.deleteList(id))
     )
   );
 
   constructor(
     private router: Router,
-    private actionsF: RxActionFactory<Actions>
+    private actionsF: RxActionFactory<Actions>,
+    private listResource: ListResource
   ) {
     super();
 
@@ -85,7 +81,7 @@ export class ListState extends RxState<ListModel> implements AppInitializer {
       'lists',
       this.actions.fetchList$.pipe(
         filter((id) => !isNaN(Number(id))),
-        concatMap((id) => fetchList(id))
+        concatMap((id) => this.listResource.fetchList(id))
       ),
       (state, list) => patch(state?.lists || {}, list)
     );
diff --git a/projects/movies/src/app/shared/state/movie.state.ts b/projects/movies/src/app/shared/state/movie.state.ts
index c0972425f..b26871f0c 100644
--- a/projects/movies/src/app/shared/state/movie.state.ts
+++ b/projects/movies/src/app/shared/state/movie.state.ts
@@ -8,8 +8,7 @@ import { RxActionFactory } from '../rxa-custom/actions';
 import { withLoadingEmission } from '../cdk/loading/withLoadingEmissions';
 import {
   CategoryResponse,
-  getMovie,
-  getMovieCategory,
+  MovieResource,
   MovieResponse,
 } from '../../data-access/api/resources/movie.resource';
 import { WithContext } from '../cdk/context/context.interface';
@@ -50,7 +49,10 @@ export class MovieState extends RxState<MovieModel> implements AppInitializer {
       }))
     );
 
-  constructor(private actionsF: RxActionFactory<Actions>) {
+  constructor(
+    private actionsF: RxActionFactory<Actions>,
+    private movieResource: MovieResource
+  ) {
     super();
 
     this.connect(
@@ -59,7 +61,7 @@ export class MovieState extends RxState<MovieModel> implements AppInitializer {
         optimizedFetch(
           (id) => id,
           (id) => {
-            return getMovie(id).pipe(
+            return this.movieResource.getMovie(id).pipe(
               map((result) => ({ value: toDictionary([result], 'id') })),
               withLoadingEmission()
             );
@@ -85,7 +87,7 @@ export class MovieState extends RxState<MovieModel> implements AppInitializer {
         optimizedFetch(
           ({ category }) => category,
           ({ category }) =>
-            getMovieCategory(category).pipe(
+            this.movieResource.getMovieCategory(category).pipe(
               map((paginatedResult) => ({
                 value: { [category]: paginatedResult },
               })),
diff --git a/projects/movies/src/app/shared/state/person.state.ts b/projects/movies/src/app/shared/state/person.state.ts
index ee87d3642..0efc4ac61 100644
--- a/projects/movies/src/app/shared/state/person.state.ts
+++ b/projects/movies/src/app/shared/state/person.state.ts
@@ -6,7 +6,7 @@ import { optimizedFetch } from '../utils/optimized-fetch';
 import { RxActionFactory } from '../rxa-custom/actions';
 import { withLoadingEmission } from '../cdk/loading/withLoadingEmissions';
 import {
-  getPerson,
+  PersonResource,
   PersonResponse,
 } from '../../data-access/api/resources/person.resource';
 import { AppInitializer } from '../rxa-custom/app-initializer';
@@ -40,7 +40,10 @@ export class PersonState extends RxState<State> implements AppInitializer {
       }))
     );
 
-  constructor(private actionsF: RxActionFactory<Actions>) {
+  constructor(
+    private actionsF: RxActionFactory<Actions>,
+    private personResource: PersonResource
+  ) {
     super();
     this.connect(
       'person',
@@ -48,7 +51,7 @@ export class PersonState extends RxState<State> implements AppInitializer {
         optimizedFetch(
           (id) => id,
           (id) => {
-            return getPerson(id).pipe(
+            return this.personResource.getPerson(id).pipe(
               map((result) => ({ value: toDictionary([result], 'id') })),
               withLoadingEmission()
             );
diff --git a/projects/movies/src/app/ui/component/backdrop/backdrop.component.ts b/projects/movies/src/app/ui/component/backdrop/backdrop.component.ts
index 3e16070bc..a9bb78f62 100644
--- a/projects/movies/src/app/ui/component/backdrop/backdrop.component.ts
+++ b/projects/movies/src/app/ui/component/backdrop/backdrop.component.ts
@@ -1,11 +1,17 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'ui-backdrop',
   template: ``,
   styleUrls: ['./backdrop.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.Emulated
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
 })
 export class BackdropComponent {
   @HostBinding('class.opened')
diff --git a/projects/movies/src/app/ui/component/dark-mode-toggle/dark-mode-toggle.component.ts b/projects/movies/src/app/ui/component/dark-mode-toggle/dark-mode-toggle.component.ts
index 6813b9f0e..e47a26e78 100644
--- a/projects/movies/src/app/ui/component/dark-mode-toggle/dark-mode-toggle.component.ts
+++ b/projects/movies/src/app/ui/component/dark-mode-toggle/dark-mode-toggle.component.ts
@@ -29,7 +29,7 @@ import {
     </div>
   `,
   styleUrls: ['dark-mode-toggle.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class DarkModeToggleComponent extends RxState<{
diff --git a/projects/movies/src/app/ui/component/detail-grid/detail-grid.component.ts b/projects/movies/src/app/ui/component/detail-grid/detail-grid.component.ts
index 16fb9c459..4451683b6 100644
--- a/projects/movies/src/app/ui/component/detail-grid/detail-grid.component.ts
+++ b/projects/movies/src/app/ui/component/detail-grid/detail-grid.component.ts
@@ -1,4 +1,8 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'ui-detail-grid',
@@ -11,9 +15,7 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
     </div>
   `,
   styleUrls: ['./detail-grid.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.Emulated
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
 })
-export class DetailGridComponent {
-
-}
+export class DetailGridComponent {}
diff --git a/projects/movies/src/app/ui/component/form-control/form-control.component.ts b/projects/movies/src/app/ui/component/form-control/form-control.component.ts
index cabe744c9..56fb3a245 100644
--- a/projects/movies/src/app/ui/component/form-control/form-control.component.ts
+++ b/projects/movies/src/app/ui/component/form-control/form-control.component.ts
@@ -1,12 +1,14 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'ui-form-control',
-  template: `
-    <ng-content></ng-content>`,
+  template: ` <ng-content></ng-content>`,
   styles: ['./form-control.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.Emulated
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
 })
-export class FormControlComponent {
-}
+export class FormControlComponent {}
diff --git a/projects/movies/src/app/ui/component/grid-list/grid-list.component.scss b/projects/movies/src/app/ui/component/grid-list/grid-list.component.scss
index bdd67d96f..fbfbb66d7 100644
--- a/projects/movies/src/app/ui/component/grid-list/grid-list.component.scss
+++ b/projects/movies/src/app/ui/component/grid-list/grid-list.component.scss
@@ -8,7 +8,6 @@
   align-items: start;
   margin: 4rem 0;
   position: relative;
-  contain: layout;
 
   @media only screen and (max-width: 600px) {
     grid-template-columns: repeat(auto-fit, minmax(10rem, 23rem));
diff --git a/projects/movies/src/app/ui/component/grid-list/grid-list.component.ts b/projects/movies/src/app/ui/component/grid-list/grid-list.component.ts
index 83daa179e..8419af411 100644
--- a/projects/movies/src/app/ui/component/grid-list/grid-list.component.ts
+++ b/projects/movies/src/app/ui/component/grid-list/grid-list.component.ts
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     <ng-content select=".ui-grid-list-item"></ng-content>
     <ng-content></ng-content>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   styleUrls: ['./grid-list.component.scss'],
 })
 export class GridListComponent {}
diff --git a/projects/movies/src/app/ui/component/hamburger-button/hamburger-button.component.ts b/projects/movies/src/app/ui/component/hamburger-button/hamburger-button.component.ts
index 566eaed12..63b454430 100644
--- a/projects/movies/src/app/ui/component/hamburger-button/hamburger-button.component.ts
+++ b/projects/movies/src/app/ui/component/hamburger-button/hamburger-button.component.ts
@@ -1,15 +1,18 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'ui-hamburger-button',
   templateUrl: './hamburger-button.component.html',
   styleUrls: ['./hamburger-button.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
-    class: 'hamburger-button'
-  }
+    class: 'hamburger-button',
+  },
 })
-export class HamburgerButtonComponent {
-}
+export class HamburgerButtonComponent {}
diff --git a/projects/movies/src/app/ui/component/icons/icon-registry.service.ts b/projects/movies/src/app/ui/component/icons/icon-registry.service.ts
index bddc657bb..4b902e571 100644
--- a/projects/movies/src/app/ui/component/icons/icon-registry.service.ts
+++ b/projects/movies/src/app/ui/component/icons/icon-registry.service.ts
@@ -2,14 +2,14 @@ import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, Optional } from '@angular/core';
 import {
   catchError,
-  map,
-  merge,
   Observable,
+  of,
   shareReplay,
+  switchMap,
   throwError,
 } from 'rxjs';
-import { getHTTP } from '../../../shared/injector/get-http-client';
 
+const iconProvider = (name: string) => `/assets/svg-icons/${name}.svg`;
 const icons = [
   'account',
   'back',
@@ -25,6 +25,7 @@ const icons = [
   'sad',
   'error',
 ];
+icons;
 
 // credits go here: https://github.com/czeckd/angular-svg-icon/blob/master/projects/angular-svg-icon/src/lib/svg-icon-registry.service.ts
 
@@ -38,41 +39,40 @@ export class IconRegistry {
     @Optional() @Inject(DOCUMENT) private document: Document
   ) {
     // preload all icons
-    merge(
-      ...icons.map((i) => this.loadSvg(`/assets/svg-icons/${i}.svg`, i))
-    ).subscribe();
+    // merge(...icons.map((i) => this.loadSvg(i))).subscribe();
   }
 
-  loadSvg(
-    url: string,
-    name: string
-  ): Observable<SVGElement | undefined> | undefined {
+  loadSvg(name: string): Observable<SVGElement> {
+    const url = iconProvider(name);
     if (this._iconMap.has(name)) {
-      return this._iconMap.get(name);
+      return this._iconMap.get(name) as Observable<SVGElement>;
     }
-    const o$ = getHTTP()
-      .get(url, { responseType: 'text' })
-      .pipe(
-        map((svg) => {
-          const div = this.document.createElement('DIV');
-          div.innerHTML = svg;
-          return div.querySelector('svg') as SVGElement;
-        }),
-        catchError((err) => {
-          console.error(err);
-          return throwError(err);
-        }),
-        shareReplay(1)
-      ) as Observable<SVGElement>;
+    this.document.querySelector(`[data-svg-icon="${name}"]`);
+    const div = this.document.createElement('DIV');
+    div.innerHTML = `<svg viewBox="0 0 24 24">
+                        <use xlink:href='${url}#${name}'></use>
+                     </svg>`;
+    const svgElem = div.querySelector('svg') as SVGElement;
+    const o$ = of(svgElem).pipe(
+      catchError((err) => {
+        console.error(err);
+        return throwError(err);
+      }),
+      shareReplay(1)
+    ) as Observable<SVGElement>;
     this._iconMap.set(name, o$);
     return o$;
   }
 
   /** Get loaded SVG from registry by name. (also works by url because of blended map) */
-  getSvgByName(name: string): Observable<SVGElement | undefined> | undefined {
-    if (this._iconMap.has(name)) {
-      return this._iconMap.get(name);
-    }
-    return throwError(() => `No svg with name '${name}' has been loaded`);
+  getSvgByName(name: string): Observable<SVGElement> {
+    return new Observable<boolean>((s) => s.next(this._iconMap.has(name))).pipe(
+      switchMap((hasName) =>
+        hasName
+          ? (this._iconMap.get(name) as Observable<SVGElement>)
+          : this.loadSvg(name)
+      )
+      // @TODO handle errors
+    );
   }
 }
diff --git a/projects/movies/src/app/ui/component/icons/icon.component.ts b/projects/movies/src/app/ui/component/icons/icon.component.ts
index 88216d4be..553fc6761 100644
--- a/projects/movies/src/app/ui/component/icons/icon.component.ts
+++ b/projects/movies/src/app/ui/component/icons/icon.component.ts
@@ -30,7 +30,7 @@ import { IconRegistry } from './icon-registry.service';
       }
     `,
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
 })
 export class SvgIconComponent implements OnInit, OnDestroy {
   @Input() name?: string;
diff --git a/projects/movies/src/app/ui/component/search-bar/search-bar.component.ts b/projects/movies/src/app/ui/component/search-bar/search-bar.component.ts
index 8cfa81c2e..6263e2403 100644
--- a/projects/movies/src/app/ui/component/search-bar/search-bar.component.ts
+++ b/projects/movies/src/app/ui/component/search-bar/search-bar.component.ts
@@ -61,7 +61,7 @@ type UiActions = {
     </form>
   `,
   styleUrls: ['search-bar.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   providers: [RxState],
 })
diff --git a/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.scss b/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.scss
index 6e939f072..b9188db43 100644
--- a/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.scss
+++ b/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.scss
@@ -22,7 +22,6 @@
     var(--theme-anim-easing-easeOut);
   box-shadow: var(--theme-shadow-16);
   background-color: var(--palette-background-paper);
-  contain: strict;
   transform: translateX(-100%);
 
   & + footer{
diff --git a/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.ts b/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.ts
index 5475e8c4e..728fca9ba 100644
--- a/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.ts
+++ b/projects/movies/src/app/ui/component/side-drawer/side-drawer.component.ts
@@ -19,7 +19,7 @@ import { RxActionFactory } from '../../../shared/rxa-custom/actions';
     </div>
   `,
   styleUrls: ['./side-drawer.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   providers: [RxActionFactory],
 })
diff --git a/projects/movies/src/app/ui/pattern/movie-list/movie-list.component.ts b/projects/movies/src/app/ui/pattern/movie-list/movie-list.component.ts
index cc02646fd..940f5ff5d 100644
--- a/projects/movies/src/app/ui/pattern/movie-list/movie-list.component.ts
+++ b/projects/movies/src/app/ui/pattern/movie-list/movie-list.component.ts
@@ -21,7 +21,7 @@ type UiActions = { paginate: boolean };
 @Component({
   selector: 'ui-movie-list',
   template: `
-    <ui-grid-list *rxIf="moviesListVisible$; else noData">
+    <ui-grid-list *ngIf="moviesListVisible$ | async; else noData">
       <!--
           **🚀 Perf Tip for TBT:**
           Use \`rxFor\` in favour of \`ngFor\` to get non blocking rendering of lists.
@@ -29,7 +29,11 @@ type UiActions = { paginate: boolean };
       -->
       <a
         class="ui-grid-list-item"
-        *rxFor="let movie of movies$; index as idx; trackBy: trackByMovieId"
+        *ngFor="
+          let movie of movies$ | async;
+          index as idx;
+          trackBy: trackByMovieId
+        "
         [routerLink]="['/detail/movie', movie.id]"
         [attr.data-uf]="'movie-' + idx"
       >
@@ -37,10 +41,11 @@ type UiActions = { paginate: boolean };
           **🚀 Perf Tip for LCP:**
           To get out the best performance use the native HTML attribute loading="lazy" instead of a directive.
           This avoids bootstrap and template evaluation time and reduces scripting time in general.
+
+           [attr.loading]="idx === 0 ? '' : 'lazy'"
           -->
         <img
           class="aspectRatio-2-3 gradient"
-          [attr.loading]="idx === 0 ? '' : 'lazy'"
           [src]="movie?.imgUrl || 'assets/images/no_poster_available.jpg'"
           [width]="movie.imgWidth"
           [height]="movie.imgHeight"
@@ -66,7 +71,7 @@ type UiActions = { paginate: boolean };
   `,
   styleUrls: ['./movie-list.component.scss'],
   providers: [RxState, RxActionFactory],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class MovieListComponent {
diff --git a/projects/movies/src/app/ui/pattern/star-rating/star-rating.component.ts b/projects/movies/src/app/ui/pattern/star-rating/star-rating.component.ts
index 096e4c312..115004450 100644
--- a/projects/movies/src/app/ui/pattern/star-rating/star-rating.component.ts
+++ b/projects/movies/src/app/ui/pattern/star-rating/star-rating.component.ts
@@ -34,7 +34,7 @@ const starsArray: number[] = new Array(numStars).fill(1);
     'star-rating.component.scss',
     '../../component/tooltip/_tooltip.scss',
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
 })
 export class StarRatingComponent {
diff --git a/projects/movies/src/assets/svg-icons/account.svg b/projects/movies/src/assets/svg-icons/account.svg
index 45580d46e..93549350e 100644
--- a/projects/movies/src/assets/svg-icons/account.svg
+++ b/projects/movies/src/assets/svg-icons/account.svg
@@ -1,2 +1,2 @@
-<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path
+<svg id="account" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path
   d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a7.2 7.2 0 01-6-3.22c.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08a7.2 7.2 0 01-6 3.22z"></path></svg>
diff --git a/projects/movies/src/assets/svg-icons/back.svg b/projects/movies/src/assets/svg-icons/back.svg
index 42a8d7c04..431a81118 100644
--- a/projects/movies/src/assets/svg-icons/back.svg
+++ b/projects/movies/src/assets/svg-icons/back.svg
@@ -1,2 +1,2 @@
-<svg viewBox="0 0 448 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path
+<svg id="back" viewBox="0 0 448 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path
   d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg>
diff --git a/projects/movies/src/assets/svg-icons/delete.svg b/projects/movies/src/assets/svg-icons/delete.svg
index 9f5cbdd6d..4670dc656 100644
--- a/projects/movies/src/assets/svg-icons/delete.svg
+++ b/projects/movies/src/assets/svg-icons/delete.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg">
+<svg id="delete" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   ></path>
diff --git a/projects/movies/src/assets/svg-icons/error.svg b/projects/movies/src/assets/svg-icons/error.svg
index a89d32fed..cf2fa2b1d 100644
--- a/projects/movies/src/assets/svg-icons/error.svg
+++ b/projects/movies/src/assets/svg-icons/error.svg
@@ -1 +1 @@
-<svg viewBox="0 0 512 512" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><circle cx="269" cy="264.8" r="243" fill="#8cc53f"/><path d="M512 265a244 244 0 0 1-12 74l-214-73 215-74a241 241 0 0 1 11 73z" style="adobe-blending-mode:screen" opacity=".2" fill="#ff0"/><path d="M512 265c0 12-1 24-3 35l-223-34 224-35 2 34z" style="adobe-blending-mode:screen" opacity=".2" fill="#ff0"/><path d="M172 358v130a239 239 0 0 1-16-8V358c0-4 3-7 6-7h3a7 7 0 0 1 2 1c3 0 5 3 5 6zm-23 2-42 86a239 239 0 0 1-12-12l40-81a6 6 0 0 1 3-3 6 6 0 0 1 5 0h1l2 1a7 7 0 0 1 3 9zm118 148-11-1h-6l-72-147a2 2 0 0 1-1 0v-2a5 5 0 0 1 0-1v-1l1-2a8 8 0 0 1 1-1v-1a5 5 0 0 1 1 0l1-1 2-1 3-1 1 1h2l3 3 74 151 1 4z" fill="#4d4d4d"/><path d="M167 352c-3 0-6 3-6 6v125l-5-3V358c0-4 3-7 6-7h3a7 7 0 0 1 2 1zm-24-2a7 7 0 0 0-3 3l-41 85-4-4 40-81a6 6 0 0 1 3-3 7 7 0 0 1 4 0 6 6 0 0 1 1 0zm40 10 73 147h-6l-72-147a2 2 0 0 1-1 0v-2a5 5 0 0 1 0-1v-1l1-2a8 8 0 0 1 1-1v-1a5 5 0 0 1 1 0l1-1 2-1 3-1 1 1h2l-3 1a7 7 0 0 0-3 9z"/><path d="M178 358v2a6 6 0 0 1-1-4l1 2z"/><path d="M327 243v46c0 3-2 6-4 6h-29c-2 0-4-3-4-6v-46c0-4 2-6 4-6h29c2 0 4 2 4 6z" fill="#333"/><path d="M342 236v60c0 4-2 8-4 8h-28c-3 0-4-4-4-8v-60c0-4 1-8 4-8h28c2 0 4 4 4 8z"/><path d="M345 236v60c0 4-2 8-4 8h-29c-2 0-4-4-4-8v-60c0-4 2-8 4-8h29c2 0 4 4 4 8z" fill="#333"/><path d="M345 278v18c0 4-2 8-4 8h-29c-2 0-4-4-4-8v-18h37z"/><path d="M327 282v7c0 3-2 6-4 6h-29c-2 0-4-3-4-6v-7h37z"/><g fill="#335c64"><path d="M26 189h270v162H26z"/><path style="adobe-blending-mode:multiply" opacity=".5" d="M26 189h270v162H26z"/></g><path d="M40 279a6 6 0 0 1-6 6H15a6 6 0 0 1-6-6v-36a6 6 0 0 1 6-6h19a6 6 0 0 1 6 6v36zm157 51c6 0 10 2 10 5v19c0 4-4 6-10 6h-66c-6 0-11-2-11-6v-19c0-3 5-5 11-5h66z" fill="#231f20"/><path fill="#335c64" d="M32 212h264v134H32z"/><path d="m243 76-2 17c0 2-2 3-4 2l-63-6-72-8c-3 0-5-1-4-2l1-18 5-2 93 10 42 4c2 0 4 2 4 3z" fill="#4d4d4d"/><ellipse cx="87.1" cy="127.3" rx="75.3" ry="75.2" fill="#f5ba3d"/><ellipse cx="87.1" cy="127.3" rx="75.3" ry="75.2" fill="#895881"/><ellipse cx="235.4" cy="132.9" rx="68.9" ry="68.8" fill="#f5ba3d"/><ellipse cx="235.4" cy="132.9" rx="68.9" ry="68.8" fill="#895881"/><g fill="#c6a9b5"><circle cx="88.6" cy="125.8" r="73.9"/><circle cx="88.6" cy="125.8" r="73.9" style="adobe-blending-mode:multiply"/></g><circle cx="88.6" cy="125.8" r="68.7" fill="#c6a9b5"/><circle cx="88.6" cy="125.8" r="21.8" fill="#895881"/><circle cx="87.2" cy="127.2" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="88.6" cy="125.8" r="13.8" fill="#4d4d4d"/><circle cx="45.7" cy="115.6" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="128.9" cy="115.6" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="111.9" cy="164.1" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="62.5" cy="164.1" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="87.2" cy="86.2" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="47.1" cy="112.8" r="13.8" fill="#4d4d4d"/><circle cx="130.3" cy="112.8" r="13.8" fill="#4d4d4d"/><circle cx="113.3" cy="161.3" r="13.8" fill="#4d4d4d"/><circle cx="63.9" cy="161.3" r="13.8" fill="#4d4d4d"/><circle cx="88.6" cy="83.4" r="13.8" fill="#4d4d4d"/><path d="m243 76-2 17c0 2-2 3-4 2l-63-6a68 68 0 0 1 23-20l42 4c2 0 4 2 4 3z" fill="#f5ba3d"/><path d="m243 76-2 17c0 2-2 3-4 2l-63-6a68 68 0 0 1 23-20l42 4c2 0 4 2 4 3z" style="adobe-blending-mode:multiply"/><g fill="#c6a9b5"><circle cx="236.8" cy="131.5" r="67.5"/><circle cx="236.8" cy="131.5" r="67.5" style="adobe-blending-mode:multiply"/></g><circle cx="236.8" cy="131.5" r="62.8" fill="#c6a9b5"/><circle cx="236.8" cy="131.5" r="19.9" fill="#895881"/><circle cx="235.6" cy="132.8" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="236.8" cy="131.5" r="12.6" fill="#4d4d4d"/><circle cx="197.7" cy="122.2" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="273.6" cy="122.2" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="258.2" cy="166.4" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="213.1" cy="166.4" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="235.6" cy="95.3" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="199" cy="119.6" r="12.6" fill="#4d4d4d"/><circle cx="274.9" cy="119.6" r="12.6" fill="#4d4d4d"/><circle cx="259.4" cy="163.8" r="12.6" fill="#4d4d4d"/><circle cx="214.3" cy="163.8" r="12.6" fill="#4d4d4d"/><circle cx="236.8" cy="92.8" r="12.6" fill="#4d4d4d"/><g fill="#ba334d"><circle cx="264" cy="237.6" r="12.2"/><circle cx="264" cy="237.6" r="12.2" style="adobe-blending-mode:multiply"/></g><circle cx="265.5" cy="236.1" r="10.7" fill="#ba334d"/><g fill="#ba334d"><circle cx="227" cy="237.6" r="12.2"/><circle cx="227" cy="237.6" r="12.2" style="adobe-blending-mode:multiply"/></g><circle cx="228.5" cy="236.1" r="10.7" fill="#ba334d"/><g fill="#ba334d"><circle cx="189.2" cy="237.6" r="12.2"/><circle cx="189.2" cy="237.6" r="12.2" style="adobe-blending-mode:multiply"/></g><circle cx="190.7" cy="236.1" r="10.7" fill="#ba334d"/><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 243H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 243H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 263H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 263H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 283H52c-2 0-4-1-4-3s2-4 4-4h101c3 0 5 1 5 4s-2 3-5 3z" fill="#335c64"/><path d="M153 283H52c-2 0-4-1-4-3s2-4 4-4h101c3 0 5 1 5 4s-2 3-5 3z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 304H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 304H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 324H52c-2 0-4-1-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 324H52c-2 0-4-1-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><path d="M155 241H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 241H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 262H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 262H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 282H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 282H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 303H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 303H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 323H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 323H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="m160 237-2 4v-1c0-2-2-4-5-4H52l-2 1c0-2 2-4 4-4h101c3 0 5 2 5 4zm0 21-2 3v-1c0-2-2-3-5-3H50c0-2 2-3 4-3h101c3 0 5 2 5 4zM160 278c0 2-1 3-2 3 0-2-2-4-5-4H52l-2 1c0-2 2-4 4-4h101c3 0 5 2 5 4zM160 299l-2 3v-1c0-2-2-4-5-4H52l-2 1c0-2 2-3 4-3h101c3 0 5 1 5 4zM160 319l-2 3c0-2-2-4-5-4H50c0-1 2-3 4-3h101c3 0 5 2 5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#335c64"/><path d="M369 230v72c0 5-2 9-4 9h-29c-2 0-4-4-4-9v-72c0-5 2-9 4-9h29c2 0 4 4 4 9z"/><path style="adobe-blending-mode:screen" fill="#333" d="M308 238h37v10h-37z"/><path d="M371 230v72c0 5-1 9-3 9h-29c-2 0-4-4-4-9v-72c0-5 2-9 4-9h29c2 0 3 4 3 9z" fill="#333"/><path d="M371 275v27c0 5-1 9-3 9h-29c-2 0-4-4-4-9v-27h36z"/><path style="adobe-blending-mode:screen" fill="#333" d="M335 233h36v10h-36z"/></svg>
+<svg id="error" viewBox="0 0 512 512" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><circle cx="269" cy="264.8" r="243" fill="#8cc53f"/><path d="M512 265a244 244 0 0 1-12 74l-214-73 215-74a241 241 0 0 1 11 73z" style="adobe-blending-mode:screen" opacity=".2" fill="#ff0"/><path d="M512 265c0 12-1 24-3 35l-223-34 224-35 2 34z" style="adobe-blending-mode:screen" opacity=".2" fill="#ff0"/><path d="M172 358v130a239 239 0 0 1-16-8V358c0-4 3-7 6-7h3a7 7 0 0 1 2 1c3 0 5 3 5 6zm-23 2-42 86a239 239 0 0 1-12-12l40-81a6 6 0 0 1 3-3 6 6 0 0 1 5 0h1l2 1a7 7 0 0 1 3 9zm118 148-11-1h-6l-72-147a2 2 0 0 1-1 0v-2a5 5 0 0 1 0-1v-1l1-2a8 8 0 0 1 1-1v-1a5 5 0 0 1 1 0l1-1 2-1 3-1 1 1h2l3 3 74 151 1 4z" fill="#4d4d4d"/><path d="M167 352c-3 0-6 3-6 6v125l-5-3V358c0-4 3-7 6-7h3a7 7 0 0 1 2 1zm-24-2a7 7 0 0 0-3 3l-41 85-4-4 40-81a6 6 0 0 1 3-3 7 7 0 0 1 4 0 6 6 0 0 1 1 0zm40 10 73 147h-6l-72-147a2 2 0 0 1-1 0v-2a5 5 0 0 1 0-1v-1l1-2a8 8 0 0 1 1-1v-1a5 5 0 0 1 1 0l1-1 2-1 3-1 1 1h2l-3 1a7 7 0 0 0-3 9z"/><path d="M178 358v2a6 6 0 0 1-1-4l1 2z"/><path d="M327 243v46c0 3-2 6-4 6h-29c-2 0-4-3-4-6v-46c0-4 2-6 4-6h29c2 0 4 2 4 6z" fill="#333"/><path d="M342 236v60c0 4-2 8-4 8h-28c-3 0-4-4-4-8v-60c0-4 1-8 4-8h28c2 0 4 4 4 8z"/><path d="M345 236v60c0 4-2 8-4 8h-29c-2 0-4-4-4-8v-60c0-4 2-8 4-8h29c2 0 4 4 4 8z" fill="#333"/><path d="M345 278v18c0 4-2 8-4 8h-29c-2 0-4-4-4-8v-18h37z"/><path d="M327 282v7c0 3-2 6-4 6h-29c-2 0-4-3-4-6v-7h37z"/><g fill="#335c64"><path d="M26 189h270v162H26z"/><path style="adobe-blending-mode:multiply" opacity=".5" d="M26 189h270v162H26z"/></g><path d="M40 279a6 6 0 0 1-6 6H15a6 6 0 0 1-6-6v-36a6 6 0 0 1 6-6h19a6 6 0 0 1 6 6v36zm157 51c6 0 10 2 10 5v19c0 4-4 6-10 6h-66c-6 0-11-2-11-6v-19c0-3 5-5 11-5h66z" fill="#231f20"/><path fill="#335c64" d="M32 212h264v134H32z"/><path d="m243 76-2 17c0 2-2 3-4 2l-63-6-72-8c-3 0-5-1-4-2l1-18 5-2 93 10 42 4c2 0 4 2 4 3z" fill="#4d4d4d"/><ellipse cx="87.1" cy="127.3" rx="75.3" ry="75.2" fill="#f5ba3d"/><ellipse cx="87.1" cy="127.3" rx="75.3" ry="75.2" fill="#895881"/><ellipse cx="235.4" cy="132.9" rx="68.9" ry="68.8" fill="#f5ba3d"/><ellipse cx="235.4" cy="132.9" rx="68.9" ry="68.8" fill="#895881"/><g fill="#c6a9b5"><circle cx="88.6" cy="125.8" r="73.9"/><circle cx="88.6" cy="125.8" r="73.9" style="adobe-blending-mode:multiply"/></g><circle cx="88.6" cy="125.8" r="68.7" fill="#c6a9b5"/><circle cx="88.6" cy="125.8" r="21.8" fill="#895881"/><circle cx="87.2" cy="127.2" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="88.6" cy="125.8" r="13.8" fill="#4d4d4d"/><circle cx="45.7" cy="115.6" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="128.9" cy="115.6" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="111.9" cy="164.1" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="62.5" cy="164.1" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="87.2" cy="86.2" r="13.8" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="47.1" cy="112.8" r="13.8" fill="#4d4d4d"/><circle cx="130.3" cy="112.8" r="13.8" fill="#4d4d4d"/><circle cx="113.3" cy="161.3" r="13.8" fill="#4d4d4d"/><circle cx="63.9" cy="161.3" r="13.8" fill="#4d4d4d"/><circle cx="88.6" cy="83.4" r="13.8" fill="#4d4d4d"/><path d="m243 76-2 17c0 2-2 3-4 2l-63-6a68 68 0 0 1 23-20l42 4c2 0 4 2 4 3z" fill="#f5ba3d"/><path d="m243 76-2 17c0 2-2 3-4 2l-63-6a68 68 0 0 1 23-20l42 4c2 0 4 2 4 3z" style="adobe-blending-mode:multiply"/><g fill="#c6a9b5"><circle cx="236.8" cy="131.5" r="67.5"/><circle cx="236.8" cy="131.5" r="67.5" style="adobe-blending-mode:multiply"/></g><circle cx="236.8" cy="131.5" r="62.8" fill="#c6a9b5"/><circle cx="236.8" cy="131.5" r="19.9" fill="#895881"/><circle cx="235.6" cy="132.8" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="236.8" cy="131.5" r="12.6" fill="#4d4d4d"/><circle cx="197.7" cy="122.2" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="273.6" cy="122.2" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="258.2" cy="166.4" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="213.1" cy="166.4" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="235.6" cy="95.3" r="12.6" style="adobe-blending-mode:screen" fill="#c59b6d"/><circle cx="199" cy="119.6" r="12.6" fill="#4d4d4d"/><circle cx="274.9" cy="119.6" r="12.6" fill="#4d4d4d"/><circle cx="259.4" cy="163.8" r="12.6" fill="#4d4d4d"/><circle cx="214.3" cy="163.8" r="12.6" fill="#4d4d4d"/><circle cx="236.8" cy="92.8" r="12.6" fill="#4d4d4d"/><g fill="#ba334d"><circle cx="264" cy="237.6" r="12.2"/><circle cx="264" cy="237.6" r="12.2" style="adobe-blending-mode:multiply"/></g><circle cx="265.5" cy="236.1" r="10.7" fill="#ba334d"/><g fill="#ba334d"><circle cx="227" cy="237.6" r="12.2"/><circle cx="227" cy="237.6" r="12.2" style="adobe-blending-mode:multiply"/></g><circle cx="228.5" cy="236.1" r="10.7" fill="#ba334d"/><g fill="#ba334d"><circle cx="189.2" cy="237.6" r="12.2"/><circle cx="189.2" cy="237.6" r="12.2" style="adobe-blending-mode:multiply"/></g><circle cx="190.7" cy="236.1" r="10.7" fill="#ba334d"/><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 243H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 243H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 263H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 263H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 283H52c-2 0-4-1-4-3s2-4 4-4h101c3 0 5 1 5 4s-2 3-5 3z" fill="#335c64"/><path d="M153 283H52c-2 0-4-1-4-3s2-4 4-4h101c3 0 5 1 5 4s-2 3-5 3z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 304H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 304H52c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><g style="adobe-blending-mode:screen"><g style="adobe-blending-mode:normal"><path d="M153 324H52c-2 0-4-1-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M153 324H52c-2 0-4-1-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/></g></g><path d="M155 241H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 241H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 262H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 262H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 282H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 282H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 303H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 303H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 1 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="M155 323H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" fill="#335c64"/><path d="M155 323H54c-2 0-4-2-4-4s2-4 4-4h101c3 0 5 2 5 4s-2 4-5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#37673f"/><path d="m160 237-2 4v-1c0-2-2-4-5-4H52l-2 1c0-2 2-4 4-4h101c3 0 5 2 5 4zm0 21-2 3v-1c0-2-2-3-5-3H50c0-2 2-3 4-3h101c3 0 5 2 5 4zM160 278c0 2-1 3-2 3 0-2-2-4-5-4H52l-2 1c0-2 2-4 4-4h101c3 0 5 2 5 4zM160 299l-2 3v-1c0-2-2-4-5-4H52l-2 1c0-2 2-3 4-3h101c3 0 5 1 5 4zM160 319l-2 3c0-2-2-4-5-4H50c0-1 2-3 4-3h101c3 0 5 2 5 4z" style="adobe-blending-mode:multiply" opacity=".5" fill="#335c64"/><path d="M369 230v72c0 5-2 9-4 9h-29c-2 0-4-4-4-9v-72c0-5 2-9 4-9h29c2 0 4 4 4 9z"/><path style="adobe-blending-mode:screen" fill="#333" d="M308 238h37v10h-37z"/><path d="M371 230v72c0 5-1 9-3 9h-29c-2 0-4-4-4-9v-72c0-5 2-9 4-9h29c2 0 3 4 3 9z" fill="#333"/><path d="M371 275v27c0 5-1 9-3 9h-29c-2 0-4-4-4-9v-27h36z"/><path style="adobe-blending-mode:screen" fill="#333" d="M335 233h36v10h-36z"/></svg>
diff --git a/projects/movies/src/assets/svg-icons/genre.svg b/projects/movies/src/assets/svg-icons/genre.svg
index 8579e0ff1..8b2ca800c 100644
--- a/projects/movies/src/assets/svg-icons/genre.svg
+++ b/projects/movies/src/assets/svg-icons/genre.svg
@@ -2,6 +2,7 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
+  id="genre"
 >
   <path d="M0 0h24v24H0V0z" fill="none" />
   <path
diff --git a/projects/movies/src/assets/svg-icons/imdb.svg b/projects/movies/src/assets/svg-icons/imdb.svg
index be6897913..267523269 100644
--- a/projects/movies/src/assets/svg-icons/imdb.svg
+++ b/projects/movies/src/assets/svg-icons/imdb.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+<svg id="imdb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path d="M0 0h24v24H0z" fill="none" />
   <path
     d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"
diff --git a/projects/movies/src/assets/svg-icons/play.svg b/projects/movies/src/assets/svg-icons/play.svg
index 6fcb39dc7..c9ff64a1a 100644
--- a/projects/movies/src/assets/svg-icons/play.svg
+++ b/projects/movies/src/assets/svg-icons/play.svg
@@ -1,3 +1,3 @@
-<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="0.875em">
+<svg id="play" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="0.875em">
   <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path>
 </svg>
diff --git a/projects/movies/src/assets/svg-icons/popular.svg b/projects/movies/src/assets/svg-icons/popular.svg
index 098109907..a304dd4e3 100644
--- a/projects/movies/src/assets/svg-icons/popular.svg
+++ b/projects/movies/src/assets/svg-icons/popular.svg
@@ -2,6 +2,7 @@
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
+  id="popular"
 >
   <path d="M0 0h24v24H0V0z" fill="none" />
   <path
diff --git a/projects/movies/src/assets/svg-icons/sad.svg b/projects/movies/src/assets/svg-icons/sad.svg
index a2395e197..57443935c 100644
--- a/projects/movies/src/assets/svg-icons/sad.svg
+++ b/projects/movies/src/assets/svg-icons/sad.svg
@@ -1,4 +1,4 @@
-<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<svg id="sad" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="M0 0h24v24H0V0z" fill="none" />
   <circle cx="15.5" cy="9.5" r="1.5" />
   <circle cx="8.5" cy="9.5" r="1.5" />
diff --git a/projects/movies/src/assets/svg-icons/search.svg b/projects/movies/src/assets/svg-icons/search.svg
index 86155a2e3..78b7f0ab7 100644
--- a/projects/movies/src/assets/svg-icons/search.svg
+++ b/projects/movies/src/assets/svg-icons/search.svg
@@ -1,2 +1,2 @@
-<svg fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path
+<svg id="search" fill="currentColor" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path
   d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>
diff --git a/projects/movies/src/assets/svg-icons/top_rated.svg b/projects/movies/src/assets/svg-icons/top_rated.svg
index 856d28ef6..ca76e49c6 100644
--- a/projects/movies/src/assets/svg-icons/top_rated.svg
+++ b/projects/movies/src/assets/svg-icons/top_rated.svg
@@ -1,4 +1,5 @@
 <svg
+  id="top_rated"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
diff --git a/projects/movies/src/assets/svg-icons/upcoming.svg b/projects/movies/src/assets/svg-icons/upcoming.svg
index e6e01fd86..56018f692 100644
--- a/projects/movies/src/assets/svg-icons/upcoming.svg
+++ b/projects/movies/src/assets/svg-icons/upcoming.svg
@@ -1,4 +1,5 @@
 <svg
+  id="upcoming"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
diff --git a/projects/movies/src/assets/svg-icons/website.svg b/projects/movies/src/assets/svg-icons/website.svg
index 96028d621..e23d0719f 100644
--- a/projects/movies/src/assets/svg-icons/website.svg
+++ b/projects/movies/src/assets/svg-icons/website.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+<svg id="website" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path d="M0 0h24v24H0V0z" fill="none" />
   <path
     d="M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z"
diff --git a/projects/movies/src/index.original.html b/projects/movies/src/index.original.html
index d6b75d1fa..111941630 100644
--- a/projects/movies/src/index.original.html
+++ b/projects/movies/src/index.original.html
@@ -14,14 +14,13 @@
   **🚀 Perf Tip for LCP:**
 
   preconnect urls used in the bootstrap phase or important urls used later in time.
-  -->
   <link
     rel="preconnect"
     href="https://image.tmdb.org/"
     crossorigin=""
   />
   <link rel="preconnect" href="https://api.themoviedb.org/" crossorigin="" />
-
+  -->
   <link rel="manifest" href="manifest.webmanifest" />
   <meta name="theme-color" content="#1976d2" />
 </head>
@@ -30,7 +29,7 @@
 **🚀 Perf Tip for LCP:**
 Preload important images placed outside the viewport
 Prefetch resources needed after router navigation event
--->
+
 <link
   rel="preload"
   as="image"
@@ -42,11 +41,11 @@
   href="assets/images/no_poster_available.jpg"
 />
 <link rel="preload" as="image" href="/assets/images/logo.svg" />
-
+-->
 <!--
 **🚀 Perf Tip for CLS and LCP:**
 Inline the styles for the app loading spinner to avoid flickering.
--->
+
 <style>
   .launcher {
     display: flex;
@@ -56,6 +55,7 @@
     height: 100%;
   }
 </style>
+-->
 <body class="light">
 <app-root>
   <div class="launcher">
diff --git a/projects/movies/src/main.ts b/projects/movies/src/main.ts
index 737077b07..f0da8bd68 100644
--- a/projects/movies/src/main.ts
+++ b/projects/movies/src/main.ts
@@ -14,23 +14,23 @@ if (environment.production) {
  * Schedule app bootstrap into next task to reduce Total Blocking Time (TTB).
  * We dont want to trigger style recalculation we avoid `animationFrame`.
  */
-setTimeout(() =>
-  platformBrowserDynamic()
-    /**
-     * **🚀 Perf Tip for LCP, TTI, TBT:**
-     *
-     * Disable zone.js as change detection system.
-     * Add { ngZone: 'noop' } to the bootstrap options
-     *
-     * ⚠ Notice:
-     * Don't forget to:
-     * - remove `zone.js` import from the `polyfills.ts` file
-     * - trigger change detection manually after NavigationEnd (or use the provided helper `ZonelessRouting`)
-     *
-     * 💡 Additional Optimization:
-     * Remove the `polyfills` option from your `angular.json` to save 1 request and 118b
-     *
-     */
-    .bootstrapModule(AppModule, { ngZone: 'noop' })
-    .catch((err) => console.error(err))
-);
+//setTimeout(() =>
+platformBrowserDynamic()
+  /**
+   * **🚀 Perf Tip for LCP, TTI, TBT:**
+   *
+   * Disable zone.js as change detection system.
+   * Add { ngZone: 'noop' } to the bootstrap options
+   *
+   * ⚠ Notice:
+   * Don't forget to:
+   * - remove `zone.js` import from the `polyfills.ts` file
+   * - trigger change detection manually after NavigationEnd (or use the provided helper `ZonelessRouting`)
+   *
+   * 💡 Additional Optimization:
+   * Remove the `polyfills` option from your `angular.json` to save 1 request and 118b
+   *
+   */
+  .bootstrapModule(AppModule /*, { ngZone: 'noop' }*/)
+  .catch((err) => console.error(err));
+//);
diff --git a/projects/movies/src/polyfills.ts b/projects/movies/src/polyfills.ts
index b00709a45..e625f452b 100644
--- a/projects/movies/src/polyfills.ts
+++ b/projects/movies/src/polyfills.ts
@@ -51,7 +51,7 @@
  *
  * Remove `zone.js` import to save significant bundle size and bootstrap time
  */
-// import 'zone.js'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
diff --git a/projects/movies/src/styles.scss b/projects/movies/src/styles.scss
index 6d5d9955e..c5df831a0 100644
--- a/projects/movies/src/styles.scss
+++ b/projects/movies/src/styles.scss
@@ -1,3 +1,11 @@
+.launcher {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
 /**
  * **🚀 Perf Tip for TBT:**
  *
@@ -22,7 +30,7 @@ body {
 
   &.modal-visible {
     .content {
-      contain: none;
+
     }
   }
 }