diff --git a/CODE_REVIEW.md b/CODE_REVIEW.md
new file mode 100644
index 0000000..4da2d23
--- /dev/null
+++ b/CODE_REVIEW.md
@@ -0,0 +1,40 @@
+Problems/ Code smells:- all fixed
+
+- Unsubscribe not done in `book.search.component.ts`
+- Unused methods `ngOnInit` in `total-count.component.ts`
+- Empty `total-count.component.scss` file can be removed
+- `alt` attribute is not added for `img` tags
+- Test cases are failing
+- Descriptions are not matching with the specs provided
+
+Improvements:
+
+- Loader experience on search - fixed
+- Error handling - fixed
+- Safely accessing books collection properties with `?` in html templates to avoid app crashes due to `cannot read property of undefined` - fixed
+- Using declarative pattern for datastreams with `async` pipe in templates when possible.- fixed
+- changeDetection: `OnPush` should be used where ever applicable
+- `Validating query string` - fixed
+  - query string encoding (if query string has special characters, few of the API calls may not be processed) encodeURIComponent
+  - `Validating whitespaces` for search action (unnecessary api calls can be avoided, if we trim the search key)
+- Keeping API URLs and other constant values in a separate `constants` file.
+- `Type checking` is missing for method aurguments
+- Full material design - fixed (partially)
+- Responsive behaviour
+- Semantic HTML tags can be used.
+- Imports can be segregated properly (example: angular, third party, NgRx & app imports etc.)
+- Custom result can be retured in catch block when api fails, for better user experience. Example return an empty observable array - of([]) / of('') etc. and show info message accordingly according to result count. [books.service.ts]
+
+Accessibility:
+
+scanner: - fixed
+
+- couple of color contrast issues in header and book.search.component
+
+manual:- fixed
+
+- `JavaScript` anchor tag is not accessible using tab navigation, as it does not have `href` attribute, to make it accessible we need to add `tabindex`
+- `Want to read` does not have `aria-label` with respect to each book.
+- `aria-labels` are not added for buttons and images
+- `aria-hidden="true"` added for icon tags to hide content from screen readers as they have seperate button tags to access
+- `aria-disabled="true"` for disabled buttons
\ No newline at end of file
diff --git a/apps/okreads/browser/src/app/app.component.scss b/apps/okreads/browser/src/app/app.component.scss
index cb6f025..57966fd 100644
--- a/apps/okreads/browser/src/app/app.component.scss
+++ b/apps/okreads/browser/src/app/app.component.scss
@@ -14,7 +14,7 @@ h1 {
   position: sticky;
   top: 0;
   z-index: 100;
-  background-color: $pink-accent;
+  background-color: $pink-dark;
   color: $white;
   padding: $spacing-3xs $spacing-xs;
 
@@ -26,7 +26,7 @@ h1 {
 .header--content {
   display: flex;
 
-  > * {
+  >* {
     display: flex;
     align-items: center;
   }
diff --git a/libs/books/data-access/src/lib/+state/books.effects.spec.ts b/libs/books/data-access/src/lib/+state/books.effects.spec.ts
index 8ad6979..bc5d1cb 100644
--- a/libs/books/data-access/src/lib/+state/books.effects.spec.ts
+++ b/libs/books/data-access/src/lib/+state/books.effects.spec.ts
@@ -1,12 +1,15 @@
 import { TestBed } from '@angular/core/testing';
+import { HttpTestingController } from '@angular/common/http/testing';
+
+import { ReplaySubject } from 'rxjs';
+
 import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
-import { ReplaySubject } from 'rxjs';
+
 import { createBook, SharedTestingModule } from '@tmo/shared/testing';
 
 import { BooksEffects } from './books.effects';
 import * as BooksActions from './books.actions';
-import { HttpTestingController } from '@angular/common/http/testing';
 
 describe('BooksEffects', () => {
   let actions: ReplaySubject<any>;
@@ -41,5 +44,21 @@ describe('BooksEffects', () => {
 
       httpMock.expectOne('/api/books/search?q=').flush([createBook('A')]);
     });
+
+    it('should throw error', done => {
+      const error = new ErrorEvent('error');
+      actions = new ReplaySubject();
+      actions.next(BooksActions.searchBooks({ term: '#' }));
+
+      effects.searchBooks$
+      .subscribe(action => {
+        expect(action.type).toEqual(
+          BooksActions.searchBooksFailure(error).type
+        );
+        done();
+      });
+
+      httpMock.expectOne('/api/books/search?q=#').error(error);
+    });
   });
 });
diff --git a/libs/books/data-access/src/lib/+state/books.effects.ts b/libs/books/data-access/src/lib/+state/books.effects.ts
index a4ab643..3617911 100644
--- a/libs/books/data-access/src/lib/+state/books.effects.ts
+++ b/libs/books/data-access/src/lib/+state/books.effects.ts
@@ -1,8 +1,11 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+
 import { of } from 'rxjs';
 import { catchError, map, switchMap } from 'rxjs/operators';
+
 import { Actions, createEffect, ofType } from '@ngrx/effects';
+
 import { Book } from '@tmo/shared/models';
 import * as BooksActions from './books.actions';
 
diff --git a/libs/books/data-access/src/lib/+state/books.reducer.spec.ts b/libs/books/data-access/src/lib/+state/books.reducer.spec.ts
index 92f3eb7..8d3f910 100644
--- a/libs/books/data-access/src/lib/+state/books.reducer.spec.ts
+++ b/libs/books/data-access/src/lib/+state/books.reducer.spec.ts
@@ -1,11 +1,13 @@
 import { initialState, reducer, State } from './books.reducer';
 import * as BooksActions from './books.actions';
+
 import { createBook } from '@tmo/shared/testing';
+import { Book } from '@tmo/shared/models';
 
 describe('Books Reducer', () => {
   describe('valid Books actions', () => {
     it('loadBooksSuccess should return set the list of known Books', () => {
-      const books = [createBook('A'), createBook('B'), createBook('C')];
+      const books: Book[] = [createBook('A'), createBook('B'), createBook('C')];
       const action = BooksActions.searchBooksSuccess({ books });
 
       const result: State = reducer(initialState, action);
@@ -13,13 +15,38 @@ describe('Books Reducer', () => {
       expect(result.loaded).toBe(true);
       expect(result.ids.length).toBe(3);
     });
+
+    it('should return state when searchBooks action dispatched', () => {
+      const action = BooksActions.searchBooks({ term: 'JavaScript' });
+
+      const result: State = reducer(initialState, action);
+
+      expect(result.loaded).toBe(false);
+      expect(result.searchTerm).toBe('JavaScript');
+    });
+
+    it('should show error message when searchBooksFailure action dispatched', () => {
+      const action = BooksActions.searchBooksFailure({ error: 'Missing serach term' });
+
+      const result: State = reducer(initialState, action);
+
+      expect(result.error).toBe('Missing serach term');
+    });
+
+    it('should return the initial state when clearSearch action dispatched', () => {
+      const action = BooksActions.clearSearch();
+
+      const result: State = reducer(initialState, action);
+
+      expect(result.ids.length).toBe(0);
+    });
   });
 
   describe('unknown action', () => {
     it('should return the previous state', () => {
       const action = {} as any;
 
-      const result = reducer(initialState, action);
+      const result: State = reducer(initialState, action);
 
       expect(result).toBe(initialState);
     });
diff --git a/libs/books/data-access/src/lib/+state/books.reducer.ts b/libs/books/data-access/src/lib/+state/books.reducer.ts
index ee6cb9f..95c7923 100644
--- a/libs/books/data-access/src/lib/+state/books.reducer.ts
+++ b/libs/books/data-access/src/lib/+state/books.reducer.ts
@@ -1,14 +1,18 @@
+import {
+  createEntityAdapter,
+  EntityAdapter,
+  EntityState
+} from '@ngrx/entity';
 import { Action, createReducer, on } from '@ngrx/store';
-import { createEntityAdapter, EntityAdapter, EntityState } from '@ngrx/entity';
-import { Book } from '@tmo/shared/models';
 
+import { Book } from '@tmo/shared/models';
 import * as BooksActions from './books.actions';
 
 export const BOOKS_FEATURE_KEY = 'books';
 
 export interface State extends EntityState<Book> {
   loaded: boolean;
-  error?: string | null;
+  error?: any | null;
   searchTerm?: string;
 }
 
@@ -19,7 +23,7 @@ export interface BooksPartialState {
 export const booksAdapter: EntityAdapter<Book> = createEntityAdapter<Book>();
 
 export const initialState: State = booksAdapter.getInitialState({
-  loaded: false
+  loaded: true
 });
 
 const booksReducer = createReducer(
@@ -36,11 +40,16 @@ const booksReducer = createReducer(
       loaded: true
     })
   ),
-  on(BooksActions.searchBooksFailure, (state, { error }) => ({
+  on(BooksActions.searchBooksFailure, (state, { error }) => booksAdapter.removeAll({
     ...state,
-    error
+    error,
+    loaded: true
   })),
-  on(BooksActions.clearSearch, state => booksAdapter.removeAll(state))
+  on(BooksActions.clearSearch, state => booksAdapter.removeAll({
+    ...state,
+    error: null,
+    loaded: true
+  }))
 );
 
 export function reducer(state: State | undefined, action: Action) {
diff --git a/libs/books/data-access/src/lib/+state/books.selectors.spec.ts b/libs/books/data-access/src/lib/+state/books.selectors.spec.ts
index 79f1b0e..86c9a98 100644
--- a/libs/books/data-access/src/lib/+state/books.selectors.spec.ts
+++ b/libs/books/data-access/src/lib/+state/books.selectors.spec.ts
@@ -1,5 +1,6 @@
 import { booksAdapter, initialState } from './books.reducer';
 import * as BooksSelectors from './books.selectors';
+
 import { createBook } from '@tmo/shared/testing';
 
 describe('Books Selectors', () => {
@@ -23,7 +24,7 @@ describe('Books Selectors', () => {
       const results = BooksSelectors.getBooks(state);
 
       expect(results.length).toBe(3);
-      expect(results.map(x => x.id)).toEqual(['A', 'B', 'C']);
+      expect(results.map(book => book.id)).toEqual(['A', 'B', 'C']);
     });
 
     it("getBooksLoaded() should return the current 'loaded' status", () => {
diff --git a/libs/books/data-access/src/lib/+state/reading-list.effects.spec.ts b/libs/books/data-access/src/lib/+state/reading-list.effects.spec.ts
index 466f896..0c11d30 100644
--- a/libs/books/data-access/src/lib/+state/reading-list.effects.spec.ts
+++ b/libs/books/data-access/src/lib/+state/reading-list.effects.spec.ts
@@ -1,12 +1,19 @@
 import { TestBed } from '@angular/core/testing';
+import { HttpTestingController } from '@angular/common/http/testing';
+
 import { ReplaySubject } from 'rxjs';
+
 import { provideMockActions } from '@ngrx/effects/testing';
 import { provideMockStore } from '@ngrx/store/testing';
-import { HttpTestingController } from '@angular/common/http/testing';
 
-import { SharedTestingModule } from '@tmo/shared/testing';
+import {
+  createBook,
+  createReadingListItem,
+  SharedTestingModule
+} from '@tmo/shared/testing';
 import { ReadingListEffects } from './reading-list.effects';
 import * as ReadingListActions from './reading-list.actions';
+import { Book, ReadingListItem } from '@tmo/shared/models';
 
 describe('ToReadEffects', () => {
   let actions: ReplaySubject<any>;
@@ -28,6 +35,11 @@ describe('ToReadEffects', () => {
   });
 
   describe('loadReadingList$', () => {
+    it('should call ngrxOnInitEffects', () => {
+      effects.ngrxOnInitEffects();
+      expect(effects.ngrxOnInitEffects().type).toEqual('[Reading List] Initialize');
+    });
+
     it('should work', done => {
       actions = new ReplaySubject();
       actions.next(ReadingListActions.init());
@@ -41,5 +53,94 @@ describe('ToReadEffects', () => {
 
       httpMock.expectOne('/api/reading-list').flush([]);
     });
+
+    it('should dispatch loadReadingListError when api throws an error', done => {
+      const error = new ErrorEvent('error');
+      actions = new ReplaySubject();
+      actions.next(ReadingListActions.init());
+
+      const readingListAction = ReadingListActions.loadReadingListError(error);
+      effects.loadReadingList$
+      .subscribe(action => {
+        expect(action.type).toEqual(readingListAction.type);
+        done();
+      });
+
+      httpMock.expectOne('/api/reading-list').error(error);
+    });
+  });
+
+  describe('addBook$', () => {
+    it('should add a book to reading list', done => {
+      const book: Book = createBook('A');
+      actions = new ReplaySubject();
+      actions.next(ReadingListActions.addToReadingList({ book: book }));
+
+      effects.addBook$
+      .subscribe(action => {
+        expect(action).toEqual(
+          ReadingListActions.confirmedAddToReadingList({ book })
+        );
+        done();
+      });
+
+      httpMock.expectOne({ url: '/api/reading-list', method: 'post' }).flush([]);
+    });
+
+    it('should dispatch failedAddToReadingList when api throws an error', done => {
+      const book: Book = createBook('A');
+      actions = new ReplaySubject();
+      actions.next(ReadingListActions.addToReadingList({ book: book }));
+
+      effects.addBook$
+      .subscribe(action => {
+        expect(action).toEqual(
+          ReadingListActions.failedAddToReadingList({ book })
+        );
+        done();
+      });
+
+      httpMock.expectOne({ url: '/api/reading-list', method: 'post' }).error(null);
+    });
+  });
+
+  describe('removeBook$', () => {
+    it('should remove book from reading list', done => {
+      const item: ReadingListItem = createReadingListItem('A');
+      actions = new ReplaySubject();
+      actions.next(ReadingListActions.removeFromReadingList({ item }));
+
+      effects.removeBook$
+      .subscribe(action => {
+        expect(action).toEqual(
+          ReadingListActions.confirmedRemoveFromReadingList({ item })
+        );
+        done();
+      });
+
+      httpMock.expectOne({
+        url: `/api/reading-list/${item.bookId}`,
+        method: 'delete'
+      }).flush([]);
+    });
+
+    it('should dispatch failedRemoveFromReadingList when api throws an error', done => {
+      const item: ReadingListItem = createReadingListItem('A');
+      actions = new ReplaySubject();
+      actions.next(ReadingListActions.removeFromReadingList({ item }));
+
+      effects.removeBook$
+      .subscribe(action => {
+        expect(action).toEqual(
+          ReadingListActions.failedRemoveFromReadingList({ item })
+        );
+        done();
+      });
+
+      httpMock.expectOne({
+        url: `/api/reading-list/${item.bookId}`,
+        method: 'delete'
+      }).error(null);
+    });
   });
 });
diff --git a/libs/books/data-access/src/lib/+state/reading-list.effects.ts b/libs/books/data-access/src/lib/+state/reading-list.effects.ts
index 129a0e4..b965da7 100644
--- a/libs/books/data-access/src/lib/+state/reading-list.effects.ts
+++ b/libs/books/data-access/src/lib/+state/reading-list.effects.ts
@@ -1,8 +1,11 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Actions, createEffect, ofType, OnInitEffects } from '@ngrx/effects';
+
 import { of } from 'rxjs';
 import { catchError, concatMap, exhaustMap, map } from 'rxjs/operators';
+
+import { Actions, createEffect, ofType, OnInitEffects } from '@ngrx/effects';
+
 import { ReadingListItem } from '@tmo/shared/models';
 import * as ReadingListActions from './reading-list.actions';
 
@@ -13,12 +16,8 @@ export class ReadingListEffects implements OnInitEffects {
       ofType(ReadingListActions.init),
       exhaustMap(() =>
         this.http.get<ReadingListItem[]>('/api/reading-list').pipe(
-          map((data) =>
-            ReadingListActions.loadReadingListSuccess({ list: data })
-          ),
-          catchError((error) =>
-            of(ReadingListActions.loadReadingListError({ error }))
-          )
+          map(data => ReadingListActions.loadReadingListSuccess({ list: data })),
+          catchError(error => of(ReadingListActions.loadReadingListError({ error })))
         )
       )
     )
@@ -43,12 +42,8 @@ export class ReadingListEffects implements OnInitEffects {
       ofType(ReadingListActions.removeFromReadingList),
       concatMap(({ item }) =>
         this.http.delete(`/api/reading-list/${item.bookId}`).pipe(
-          map(() =>
-            ReadingListActions.confirmedRemoveFromReadingList({ item })
-          ),
-          catchError(() =>
-            of(ReadingListActions.failedRemoveFromReadingList({ item }))
-          )
+          map(() => ReadingListActions.confirmedRemoveFromReadingList({ item })),
+          catchError(() => of(ReadingListActions.failedRemoveFromReadingList({ item })))
         )
       )
     )
@@ -58,5 +53,5 @@ export class ReadingListEffects implements OnInitEffects {
     return ReadingListActions.init();
   }
 
-  constructor(private actions$: Actions, private http: HttpClient) {}
+  constructor(private actions$: Actions, private http: HttpClient) { }
 }
diff --git a/libs/books/data-access/src/lib/+state/reading-list.reducer.spec.ts b/libs/books/data-access/src/lib/+state/reading-list.reducer.spec.ts
index b83eb1c..f5dea53 100644
--- a/libs/books/data-access/src/lib/+state/reading-list.reducer.spec.ts
+++ b/libs/books/data-access/src/lib/+state/reading-list.reducer.spec.ts
@@ -6,9 +6,10 @@ import {
   State
 } from './reading-list.reducer';
 import { createBook, createReadingListItem } from '@tmo/shared/testing';
+import { ReadingListItem } from '@tmo/shared/models';
 
-describe('Books Reducer', () => {
-  describe('valid Books actions', () => {
+describe('ReadingList Reducer', () => {
+  describe('valid reading list actions', () => {
     let state: State;
 
     beforeEach(() => {
@@ -18,7 +19,7 @@ describe('Books Reducer', () => {
       );
     });
 
-    it('loadBooksSuccess should load books from reading list', () => {
+    it('should load books from reading list on loadReadingListSuccess', () => {
       const list = [
         createReadingListItem('A'),
         createReadingListItem('B'),
@@ -32,7 +33,35 @@ describe('Books Reducer', () => {
       expect(result.ids.length).toEqual(3);
     });
 
-    it('failedAddToReadingList should undo book addition to the state', () => {
+    it('init should load initial state', () => {
+      const action = ReadingListActions.init();
+
+      const result: State = reducer(initialState, action);
+
+      expect(result.loaded).toBe(false);
+      expect(result.ids.length).toEqual(0);
+    });
+
+    it('should add book to reading list on addToReadingList', () => {
+      const action = ReadingListActions.addToReadingList({
+        book: createBook('B')
+      });
+
+      const result: State = reducer(state, action);
+
+      expect(result.ids).toEqual(['A', 'B']);
+    });
+
+    it('should undo book addition to the state on removeFromReadingList', () => {
+      const item: ReadingListItem = createReadingListItem('B');
+      const action = ReadingListActions.removeFromReadingList({ item });
+
+      const result: State = reducer(state, action);
+
+      expect(result.ids).toEqual(['A']);
+    });
+
+    it('should undo book addition to the state on failedAddToReadingList', () => {
       const action = ReadingListActions.failedAddToReadingList({
         book: createBook('B')
       });
@@ -42,7 +71,7 @@ describe('Books Reducer', () => {
       expect(result.ids).toEqual(['A']);
     });
 
-    it('failedRemoveFromReadingList should undo book removal from the state', () => {
+    it('should undo book removal from the state on failedRemoveFromReadingList', () => {
       const action = ReadingListActions.failedRemoveFromReadingList({
         item: createReadingListItem('C')
       });
@@ -51,6 +80,16 @@ describe('Books Reducer', () => {
 
       expect(result.ids).toEqual(['A', 'B', 'C']);
     });
+
+    it('should display error on loadReadingListError', () => {
+      const action = ReadingListActions.loadReadingListError({
+        error: 'Internal server error'
+      });
+
+      const result: State = reducer(state, action);
+
+      expect(result.error).toEqual('Internal server error');
+    });
   });
 
   describe('unknown action', () => {
diff --git a/libs/books/data-access/src/lib/+state/reading-list.reducer.ts b/libs/books/data-access/src/lib/+state/reading-list.reducer.ts
index cb0b5f8..d75d02a 100644
--- a/libs/books/data-access/src/lib/+state/reading-list.reducer.ts
+++ b/libs/books/data-access/src/lib/+state/reading-list.reducer.ts
@@ -52,6 +52,15 @@ const readingListReducer = createReducer(
   ),
   on(ReadingListActions.removeFromReadingList, (state, action) =>
     readingListAdapter.removeOne(action.item.bookId, state)
+  ),
+  on(ReadingListActions.failedAddToReadingList, (state, action) =>
+    readingListAdapter.removeOne(action.book.id, state)
+  ),
+  on(ReadingListActions.failedRemoveFromReadingList, (state, action) =>
+    readingListAdapter.addOne(
+      { bookId: action.item.bookId, ...action.item },
+      state
+    )
   )
 );
 
diff --git a/libs/books/data-access/src/lib/+state/reading-list.selectors.spec.ts b/libs/books/data-access/src/lib/+state/reading-list.selectors.spec.ts
index c8b9fd2..f54f193 100644
--- a/libs/books/data-access/src/lib/+state/reading-list.selectors.spec.ts
+++ b/libs/books/data-access/src/lib/+state/reading-list.selectors.spec.ts
@@ -35,17 +35,22 @@ describe('ReadingList Selectors', () => {
   });
 
   describe('Books Selectors', () => {
-    it('getReadingList() should return the list of Books', () => {
+    it('should return the list of Books on getReadingList', () => {
       const results = ToReadSelectors.getReadingList(state);
 
       expect(results.length).toBe(3);
-      expect(results.map(x => x.bookId)).toEqual(['A', 'B', 'C']);
+      expect(results.map(book => book.bookId)).toEqual(['A', 'B', 'C']);
     });
 
-    it("getTotalUnread() should return the current 'loaded' status", () => {
+    it("should return the current 'loaded' status on getTotalUnread", () => {
       const result = ToReadSelectors.getTotalUnread(state);
 
       expect(result).toBe(3);
     });
+
+    it("should return the current 'loaded' status on getTotalUnread", () => {
+      const result = ToReadSelectors.getAllBooks(state);
+      expect(result.length).toBe(3);
+    });
   });
 });
diff --git a/libs/books/data-access/src/lib/+state/reading-list.selectors.ts b/libs/books/data-access/src/lib/+state/reading-list.selectors.ts
index 8db6fe4..e6c933d 100644
--- a/libs/books/data-access/src/lib/+state/reading-list.selectors.ts
+++ b/libs/books/data-access/src/lib/+state/reading-list.selectors.ts
@@ -35,7 +35,7 @@ export const getAllBooks = createSelector<
   Record<string, ReadingListItem>,
   ReadingListBook[]
 >(getBooks, getReadingListEntities, (books, entities) => {
-  return books.map(b => ({ ...b, isAdded: Boolean(entities[b.id]) }));
+  return books.map(book => ({ ...book, isAdded: Boolean(entities[book.id]) }));
 });
 
 export const getReadingList = createSelector(getReadingListState, selectAll);
diff --git a/libs/books/data-access/src/lib/books-data-access.module.ts b/libs/books/data-access/src/lib/books-data-access.module.ts
index 714f61a..ba4182d 100644
--- a/libs/books/data-access/src/lib/books-data-access.module.ts
+++ b/libs/books/data-access/src/lib/books-data-access.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
+
 import * as fromBooks from './+state/books.reducer';
 import { BooksEffects } from './+state/books.effects';
 import * as fromReadingList from './+state/reading-list.reducer';
diff --git a/libs/books/feature/src/lib/book-search/book-search.component.html b/libs/books/feature/src/lib/book-search/book-search.component.html
index 18ba309..631ddda 100644
--- a/libs/books/feature/src/lib/book-search/book-search.component.html
+++ b/libs/books/feature/src/lib/book-search/book-search.component.html
@@ -1,56 +1,94 @@
 <form [formGroup]="searchForm" (submit)="searchBooks()">
   <mat-form-field floatLabel="never">
     <input
+      id="searchInput"
       autoFocus
       matInput
       type="search"
       placeholder="Search for books to add to your reading list"
       formControlName="term"
-    />
-    <button mat-icon-button matSuffix>
-      <mat-icon>search</mat-icon>
+      (keyup)="checkSearchKey()"
+      />
+    <button
+      mat-icon-button
+      matSuffix
+      id="btnSearch"
+      aria-label="search">
+      <mat-icon aria-hidden="true">search</mat-icon>
     </button>
   </mat-form-field>
 </form>
 
 <ng-container *ngIf="searchTerm; else empty">
-  <div class="book-grid">
-    <div class="book" data-testing="book-item" *ngFor="let b of books">
-      <div class="book--title">
-        {{ b.title }}
-      </div>
-      <div class="book--content">
-        <div class="book--content--cover">
-          <img src="{{ b.coverUrl }}" />
-        </div>
-        <div class="book--content--info">
-          <div><strong>Author:</strong> {{ b.authors.join(',') }}</div>
-          <div><strong>Publisher:</strong> {{ b.publisher }}</div>
-          <div>
-            <strong>Published:</strong> {{ formatDate(b.publishedDate) }}
+  <div
+    fxLayout="row wrap"
+    fxLayoutGap="32px"
+    fxLayoutAlign="center"
+    class="container book-grid"
+    *ngIf="(books$ | async)?.length> 0">
+
+    <div
+      fxFlex="45"
+      fxFlex.lt-md="100%"
+      fxFlex.lt-sm="100%"
+      class="book"
+      data-testing="book-item"
+      *ngFor="let book of books$ | async;">
+
+      <mat-card class="card">
+        <mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
+          {{ book?.title }}
+        </mat-card-title>
+        <mat-card-content class="book--content">
+          <div class="book--content--cover">
+            <img src="{{ book?.coverUrl }}" [alt]="book?.title" />
           </div>
-          <p [innerHTML]="b.description"></p>
-          <div>
-            <button
-              mat-flat-button
-              color="primary"
-              (click)="addBookToReadingList(b)"
-              [disabled]="b.isAdded"
-            >
-              Want to Read
-            </button>
+          <div class="book--content--info">
+            <div><strong>Author:</strong> {{ book?.authors.join(',') }}</div>
+            <div><strong>Publisher:</strong> {{ book?.publisher }}</div>
+            <div>
+              <strong>Published:</strong> {{ formatDate(book?.publishedDate) }}
+            </div>
+            <p [innerHTML]="book?.description"></p>
+            <mat-card-actions>
+              <button
+                mat-flat-button
+                color="primary"
+                (click)="addBookToReadingList(book)"
+                id="wantToRead-{{book?.id}}"
+                [attr.aria-label]="'Add ' + book?.title + ' to reading list'"
+                [attr.aria-disabled]="book?.isAdded"
+                [disabled]="book?.isAdded">
+                Want to Read
+              </button>
+            </mat-card-actions>
           </div>
-        </div>
-      </div>
+        </mat-card-content>
+      </mat-card>
     </div>
   </div>
 </ng-container>
 <ng-template #empty>
   <div class="empty">
     <p>
-      Try searching for a topic, for example "<a (click)="searchExample()"
-        >JavaScript</a
-      >".
+      Try searching for a topic, for example "<a aria-label="Search for
+        javascript books to add to your reading list" tabindex="0"
+        (click)="searchExample()">JavaScript</a>"
+      .
     </p>
   </div>
 </ng-template>
+
+<div class="spinner-container" *ngIf="(loader$ | async) === false">
+  <mat-progress-spinner
+    [color]="loaderConfig.color"
+    [mode]="loaderConfig.mode"
+    [value]="loaderConfig.value">
+  </mat-progress-spinner>
+</div>
+
+<div class="error-container">
+  <mat-error id="errorMsg" *ngIf="error$ | async as error">
+    Books are not available with the given search input
+  </mat-error>
+</div>
\ No newline at end of file
diff --git a/libs/books/feature/src/lib/book-search/book-search.component.scss b/libs/books/feature/src/lib/book-search/book-search.component.scss
index 32d6098..7548fc8 100644
--- a/libs/books/feature/src/lib/book-search/book-search.component.scss
+++ b/libs/books/feature/src/lib/book-search/book-search.component.scss
@@ -1,13 +1,34 @@
 @import 'variables.scss';
 
+h4 {
+  margin: 0;
+}
+
 form {
   margin-bottom: $spacing-xs;
 }
 
+.card {
+  height: 100%;
+  background: #FFFFFF;
+  margin: 2px;
+  transition: all .25s linear;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
+}
+
 .mat-form-field {
   width: 100%;
 }
 
+.mat-card-actions {
+  margin: 0;
+  padding: 0;
+
+  button {
+    float: right;
+  }
+}
+
 .book-grid {
   display: grid;
   grid-template-columns: 50% 50%;
@@ -43,11 +64,11 @@ form {
   flex-direction: column;
   font-size: 0.8rem;
 
-  > div {
+  >div {
     margin-bottom: $spacing-xxs;
   }
 
-  > div:last-child {
+  >div:last-child {
     margin: 0;
     flex: 1;
     position: relative;
@@ -68,5 +89,11 @@ form {
   justify-content: center;
   min-height: 50vh;
   font-size: 1.5rem;
-  color: $gray40;
+  color: $gray80;
 }
+
+.spinner-container,
+.error-container {
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/libs/books/feature/src/lib/book-search/book-search.component.spec.ts b/libs/books/feature/src/lib/book-search/book-search.component.spec.ts
index 1266c7f..292a608 100644
--- a/libs/books/feature/src/lib/book-search/book-search.component.spec.ts
+++ b/libs/books/feature/src/lib/book-search/book-search.component.spec.ts
@@ -1,27 +1,169 @@
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { SharedTestingModule } from '@tmo/shared/testing';
+import { By } from '@angular/platform-browser';
+
+import { createBook, SharedTestingModule } from '@tmo/shared/testing';
+import {
+  getAllBooks,
+  addToReadingList,
+  clearSearch,
+  getBooksError,
+  getBooksLoaded,
+  searchBooks,
+} from '@tmo/books/data-access';
 
 import { BooksFeatureModule } from '../books-feature.module';
 import { BookSearchComponent } from './book-search.component';
 
-describe('ProductsListComponent', () => {
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+describe('BookSearch Component', () => {
   let component: BookSearchComponent;
   let fixture: ComponentFixture<BookSearchComponent>;
+  let store: MockStore;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [BooksFeatureModule, NoopAnimationsModule, SharedTestingModule]
+      imports: [BooksFeatureModule, NoopAnimationsModule, SharedTestingModule],
+      providers: [provideMockStore()]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BookSearchComponent);
     component = fixture.componentInstance;
+
+    store = TestBed.inject(MockStore);
+
+    store.overrideSelector(getAllBooks, [
+      { ...createBook('9U5I_tskq9MC'), isAdded: false, publishedDate: null },
+      { ...createBook('qU3rAgAAQBAJ'), isAdded: false },
+      { ...createBook('PXa2bby0oQ0C'), isAdded: false }
+    ]);
+
+    store.overrideSelector(getBooksLoaded, true);
+    spyOn(store, 'dispatch').and.callFake(() => { });
+    store.overrideSelector(getBooksError, null);
+
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeDefined();
   });
+
+  it('should show list of books on search with a search keyword', () => {
+    store.overrideSelector(getAllBooks, [
+      { ...createBook('9U5I_tskq9MC'), isAdded: false },
+      { ...createBook('qU3rAgAAQBAJ'), isAdded: false },
+      { ...createBook('PXa2bby0oQ0C'), isAdded: false }
+    ]);
+
+    const searchControl = fixture.debugElement.query(By.css('#searchInput'));
+    searchControl.nativeElement.value = 'JavaScript';
+    searchControl.nativeElement.dispatchEvent(new Event('input'));
+
+    const btnSearch = fixture.debugElement.query(By.css('#btnSearch'));
+    btnSearch.nativeElement.click();
+    store.refreshState();
+    fixture.detectChanges();
+
+    expect(store.dispatch).toHaveBeenCalledWith(searchBooks({ term: 'JavaScript' }));
+
+    const books = fixture.debugElement.queryAll(By.css('div.book'));
+    expect(books.length).toEqual(3);
+  });
+
+  it('should clear search results when user clears the search input', () => {
+    const searchControl = fixture.debugElement.query(By.css('#searchInput'));
+    searchControl.nativeElement.value = '';
+    searchControl.nativeElement.dispatchEvent(new Event('input'));
+
+    const btnSearch = fixture.debugElement.query(By.css('#btnSearch'));
+    btnSearch.nativeElement.click();
+
+    const books = fixture.debugElement.queryAll(By.css('div.book'));
+
+    expect(books.length).toEqual(0);
+    expect(store.dispatch).toHaveBeenCalledWith(clearSearch());
+  });
+
+  it('should set JavaScript text in search input and get results on click of example topic', () => {
+    const anchorControl = fixture.debugElement.query(By.css('a'));
+    anchorControl.nativeElement.click();
+
+    expect(component.searchForm.value.term).toEqual('javascript');
+    expect(store.dispatch).toHaveBeenCalledWith(searchBooks({ term: 'javascript' }));
+  });
+
+  it('should add a book to reading list on click of WantToRead', () => {
+    const bookToRead = { ...createBook('9U5I_tskq9MC'), isAdded: false };
+
+    store.overrideSelector(getAllBooks, [
+      { ...bookToRead },
+      { ...createBook('qU3rAgAAQBAJ'), isAdded: false },
+      { ...createBook('PXa2bby0oQ0C'), isAdded: false }
+    ]);
+
+    const searchControl = fixture.debugElement.query(By.css('#searchInput'));
+    searchControl.nativeElement.value = 'JavaScript';
+    searchControl.nativeElement.dispatchEvent(new Event('input'));
+
+    const btnSearch = fixture.debugElement.query(By.css('#btnSearch'));
+    btnSearch.nativeElement.click();
+    store.refreshState();
+    fixture.detectChanges();
+
+    const btnWantToRead = fixture.debugElement.query(By.css('#wantToRead-9U5I_tskq9MC'));
+    btnWantToRead.nativeElement.click();
+    expect(store.dispatch).toHaveBeenCalledWith(addToReadingList({ book: bookToRead }));
+  });
+
+  it('should clear search results and clear error message when search term cleared', () => {
+    store.overrideSelector(getAllBooks, []);
+    store.refreshState();
+
+    const searchControl = fixture.debugElement.query(By.css('#searchInput'));
+    searchControl.nativeElement.value = '';
+
+    const backspaceEvent = new KeyboardEvent("keyup", { "key": "Backspace" });
+    searchControl.nativeElement.dispatchEvent(backspaceEvent);
+
+    expect(component.searchForm.value.term).toEqual('');
+    expect(store.dispatch).toHaveBeenCalledWith(clearSearch());
+  });
+
+  it('should not clear previous search results when search term is not cleared', () => {
+    store.overrideSelector(getAllBooks, [
+      { ...createBook('qU3rAgAAQBAJ'), isAdded: false },
+      { ...createBook('PXa2bby0oQ0C'), isAdded: false }
+    ]);
+    store.refreshState();
+
+    const searchInput = fixture.nativeElement.querySelector('#searchInput');
+
+    searchInput.value = 'aa';
+    searchInput.dispatchEvent(new Event('input'));
+
+    fixture.detectChanges();
+
+    component.searchForm.valueChanges
+      .subscribe(searchKey => {
+        expect(searchKey).toEqual('aa');
+      });
+
+    expect(store.dispatch).not.toHaveBeenCalledWith(clearSearch());
+  });
 });
diff --git a/libs/books/feature/src/lib/book-search/book-search.component.ts b/libs/books/feature/src/lib/book-search/book-search.component.ts
index f18387a..0605ecf 100644
--- a/libs/books/feature/src/lib/book-search/book-search.component.ts
+++ b/libs/books/feature/src/lib/book-search/book-search.component.ts
@@ -1,13 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+import { Observable } from 'rxjs';
+
 import { Store } from '@ngrx/store';
+
 import {
   addToReadingList,
   clearSearch,
   getAllBooks,
   ReadingListBook,
-  searchBooks
+  searchBooks,
+  getBooksError,
+  getBooksLoaded
 } from '@tmo/books/data-access';
-import { FormBuilder } from '@angular/forms';
 import { Book } from '@tmo/shared/models';
 
 @Component({
@@ -15,12 +21,18 @@ import { Book } from '@tmo/shared/models';
   templateUrl: './book-search.component.html',
   styleUrls: ['./book-search.component.scss']
 })
-export class BookSearchComponent implements OnInit {
-  books: ReadingListBook[];
+export class BookSearchComponent {
+  loaderConfig = {
+    color: 'primary',
+    mode: 'indeterminate',
+    value: 50
+  };
 
-  searchForm = this.fb.group({
-    term: ''
-  });
+  searchForm: FormGroup = this.fb.group({ term: '' });
+
+  books$: Observable<ReadingListBook[]> = this.store.select(getAllBooks);
+  error$: Observable<any> = this.store.select(getBooksError);
+  loader$: Observable<boolean> = this.store.select(getBooksLoaded);
 
   constructor(
     private readonly store: Store,
@@ -31,16 +43,10 @@ export class BookSearchComponent implements OnInit {
     return this.searchForm.value.term;
   }
 
-  ngOnInit(): void {
-    this.store.select(getAllBooks).subscribe(books => {
-      this.books = books;
-    });
-  }
-
-  formatDate(date: void | string) {
-    return date
-      ? new Intl.DateTimeFormat('en-US').format(new Date(date))
-      : undefined;
+  formatDate(date: string) {
+    if (date) {
+      return new Intl.DateTimeFormat('en-US').format(new Date(date));
+    }
   }
 
   addBookToReadingList(book: Book) {
@@ -53,9 +59,17 @@ export class BookSearchComponent implements OnInit {
   }
 
   searchBooks() {
-    if (this.searchForm.value.term) {
-      this.store.dispatch(searchBooks({ term: this.searchTerm }));
-    } else {
+    if (this.searchForm.value.term.trim()) {
+
+      this.store.dispatch(searchBooks({ term: encodeURIComponent(this.searchTerm) }));
+      return;
+    }
+
+    this.store.dispatch(clearSearch());
+  }
+
+  checkSearchKey() {
+    if (!this.searchForm.value.term) {
       this.store.dispatch(clearSearch());
     }
   }
diff --git a/libs/books/feature/src/lib/books-feature.module.ts b/libs/books/feature/src/lib/books-feature.module.ts
index dd8e63a..513e02e 100644
--- a/libs/books/feature/src/lib/books-feature.module.ts
+++ b/libs/books/feature/src/lib/books-feature.module.ts
@@ -1,14 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { BooksDataAccessModule } from '@tmo/books/data-access';
-import { BookSearchComponent } from './book-search/book-search.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatIconModule } from '@angular/material/icon';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { BooksDataAccessModule } from '@tmo/books/data-access';
+
+import { BookSearchComponent } from './book-search/book-search.component';
 import { TotalCountComponent } from './total-count/total-count.component';
 import { ReadingListComponent } from './reading-list/reading-list.component';
 
@@ -21,11 +26,14 @@ const EXPORTS = [
 @NgModule({
   imports: [
     CommonModule,
+    FlexLayoutModule,
+    MatCardModule,
     MatButtonModule,
     MatBadgeModule,
     MatIconModule,
     MatInputModule,
     MatSnackBarModule,
+    MatProgressSpinnerModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule.forChild([
@@ -36,4 +44,4 @@ const EXPORTS = [
   exports: [...EXPORTS],
   declarations: [...EXPORTS]
 })
-export class BooksFeatureModule {}
+export class BooksFeatureModule { }
diff --git a/libs/books/feature/src/lib/reading-list/reading-list.component.html b/libs/books/feature/src/lib/reading-list/reading-list.component.html
index 90454b9..78b436d 100644
--- a/libs/books/feature/src/lib/reading-list/reading-list.component.html
+++ b/libs/books/feature/src/lib/reading-list/reading-list.component.html
@@ -1,22 +1,28 @@
-<ng-container *ngIf="(readingList$ | async).length > 0; else empty">
-  <div class="reading-list-item" *ngFor="let b of readingList$ | async">
+<ng-container *ngIf="(readingList$ | async)?.length> 0; else empty">
+  <div class="reading-list-item" *ngFor="let book of readingList$ | async">
     <div>
-      <img class="reading-list-item--cover" [src]="b.coverUrl" />
+      <img
+        class="reading-list-item--cover"
+        [attr.aria-label]="book?.title"
+        [alt]="book?.title"
+        [src]="book?.coverUrl" />
     </div>
     <div class="reading-list-item--details">
-      <strong class="reading-list-item--details--title">{{ b.title }}</strong>
+      <h4 class="reading-list-item--details--title">
+        {{ book?.title }}
+      </h4>
       <div class="reading-list-item--details--author">
-        {{ b.authors.join(',') }}
+        {{ book?.authors?.join(',') }}
       </div>
     </div>
     <div>
       <button
         mat-icon-button
         color="warn"
-        [attr.aria-label]="'Remove ' + b.title + ' from reading list'"
-        (click)="removeFromReadingList(b)"
-      >
-        <mat-icon>remove_circle</mat-icon>
+        id="btnRemove-{{book?.bookId}}"
+        [attr.aria-label]="'Remove ' + book?.title + ' from reading list'"
+        (click)="removeFromReadingList(book)">
+        <mat-icon aria-hidden="true">remove_circle</mat-icon>
       </button>
     </div>
   </div>
diff --git a/libs/books/feature/src/lib/reading-list/reading-list.component.scss b/libs/books/feature/src/lib/reading-list/reading-list.component.scss
index 3fdb95f..7b70bb3 100644
--- a/libs/books/feature/src/lib/reading-list/reading-list.component.scss
+++ b/libs/books/feature/src/lib/reading-list/reading-list.component.scss
@@ -1,5 +1,9 @@
 @import 'variables.scss';
 
+h4{
+  margin:0;
+}
+
 :host {
   display: block;
   font-size: 0.75rem;
diff --git a/libs/books/feature/src/lib/reading-list/reading-list.component.spec.ts b/libs/books/feature/src/lib/reading-list/reading-list.component.spec.ts
index 1eb7dad..20cd221 100644
--- a/libs/books/feature/src/lib/reading-list/reading-list.component.spec.ts
+++ b/libs/books/feature/src/lib/reading-list/reading-list.component.spec.ts
@@ -1,26 +1,49 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { SharedTestingModule } from '@tmo/shared/testing';
+import { By } from '@angular/platform-browser';
 
-import { ReadingListComponent } from './reading-list.component';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
+
+import { createReadingListItem, SharedTestingModule } from '@tmo/shared/testing';
 import { BooksFeatureModule } from '@tmo/books/feature';
+import { getReadingList, removeFromReadingList } from '@tmo/books/data-access';
+
+import { ReadingListComponent } from './reading-list.component';
 
-describe('ReadingListComponent', () => {
+describe('ReadingList Component', () => {
   let component: ReadingListComponent;
   let fixture: ComponentFixture<ReadingListComponent>;
+  let store: MockStore;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [BooksFeatureModule, SharedTestingModule]
+      imports: [BooksFeatureModule, SharedTestingModule],
+      providers: [provideMockStore()]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ReadingListComponent);
     component = fixture.componentInstance;
+    store = TestBed.inject(MockStore);
+    store.overrideSelector(getReadingList, [
+      createReadingListItem('9U5I_tskq9MC'),
+      createReadingListItem('qU3rAgAAQBAJ')
+    ]);
+    spyOn(store, 'dispatch').and.callFake(() => { });
+    store.refreshState();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should remove book from readinglist on remove', () => {
+    const readingListItem = createReadingListItem('9U5I_tskq9MC');
+    fixture.detectChanges();
+    const btnRemove = fixture.debugElement.query(By.css('#btnRemove-9U5I_tskq9MC'));
+    btnRemove.nativeElement.click();
+
+    expect(store.dispatch).toHaveBeenCalledWith(removeFromReadingList({ item: readingListItem }));
+  });
 });
diff --git a/libs/books/feature/src/lib/reading-list/reading-list.component.ts b/libs/books/feature/src/lib/reading-list/reading-list.component.ts
index fe410ce..0174904 100644
--- a/libs/books/feature/src/lib/reading-list/reading-list.component.ts
+++ b/libs/books/feature/src/lib/reading-list/reading-list.component.ts
@@ -1,18 +1,24 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { Observable } from 'rxjs';
+
 import { Store } from '@ngrx/store';
+
 import { getReadingList, removeFromReadingList } from '@tmo/books/data-access';
+import { ReadingListItem } from '@tmo/shared/models';
 
 @Component({
   selector: 'tmo-reading-list',
   templateUrl: './reading-list.component.html',
-  styleUrls: ['./reading-list.component.scss']
+  styleUrls: ['./reading-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ReadingListComponent {
-  readingList$ = this.store.select(getReadingList);
+  readingList$: Observable<ReadingListItem[]> = this.store.select(getReadingList);
 
-  constructor(private readonly store: Store) {}
+  constructor(private readonly store: Store) { }
 
-  removeFromReadingList(item) {
+  removeFromReadingList(item: ReadingListItem) {
     this.store.dispatch(removeFromReadingList({ item }));
   }
 }
diff --git a/libs/books/feature/src/lib/total-count/total-count.component.scss b/libs/books/feature/src/lib/total-count/total-count.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/libs/books/feature/src/lib/total-count/total-count.component.ts b/libs/books/feature/src/lib/total-count/total-count.component.ts
index b8c226c..3ca7e53 100644
--- a/libs/books/feature/src/lib/total-count/total-count.component.ts
+++ b/libs/books/feature/src/lib/total-count/total-count.component.ts
@@ -1,16 +1,17 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+
+import { Observable } from 'rxjs';
+
 import { Store } from '@ngrx/store';
+
 import { getTotalUnread } from '@tmo/books/data-access';
 
 @Component({
   selector: 'tmo-total-count',
-  templateUrl: './total-count.component.html',
-  styleUrls: ['./total-count.component.scss']
+  templateUrl: './total-count.component.html'
 })
-export class TotalCountComponent implements OnInit {
-  totalUnread$ = this.store.select(getTotalUnread);
-
-  constructor(private readonly store: Store) {}
+export class TotalCountComponent {
+  totalUnread$: Observable<number> = this.store.select(getTotalUnread);
 
-  ngOnInit(): void {}
+  constructor(private readonly store: Store) { }
 }
diff --git a/package-lock.json b/package-lock.json
index 8db4054..3b66a5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1161,6 +1161,21 @@
         }
       }
     },
+    "@angular/flex-layout": {
+      "version": "11.0.0-beta.33",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz",
+      "integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
+          "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
+        }
+      }
+    },
     "@angular/forms": {
       "version": "10.0.10",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-10.0.10.tgz",
diff --git a/package.json b/package.json
index c182753..784dd80 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@angular/common": "^10.0.10",
     "@angular/compiler": "^10.0.10",
     "@angular/core": "^10.0.10",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "^10.0.10",
     "@angular/material": "9.2.2",
     "@angular/platform-browser": "^10.0.10",