diff --git a/libs/books-page/src/lib/books-page/books-page.component.html b/libs/books-page/src/lib/books-page/books-page.component.html
index 4c17c90..fedd632 100644
--- a/libs/books-page/src/lib/books-page/books-page.component.html
+++ b/libs/books-page/src/lib/books-page/books-page.component.html
@@ -1,9 +1,9 @@
 <div class="container">
   <div class="col-50">
-    <bco-books-total [total]="total"> </bco-books-total>
+    <bco-books-total [total]="total$ | async"> </bco-books-total>
 
     <bco-books-list
-      [books]="books"
+      [books]="books$ | async"
       (select)="onSelect($event)"
       (delete)="onDelete($event)"
     >
@@ -12,7 +12,7 @@
 
   <bco-book-detail
     class="col-50"
-    [book]="currentBook"
+    [book]="currentBook$ | async"
     (save)="onSave($event)"
     (cancel)="onCancel()"
   >
diff --git a/libs/books-page/src/lib/books-page/books-page.component.ts b/libs/books-page/src/lib/books-page/books-page.component.ts
index 0206bba..be106b9 100644
--- a/libs/books-page/src/lib/books-page/books-page.component.ts
+++ b/libs/books-page/src/lib/books-page/books-page.component.ts
@@ -2,12 +2,12 @@ import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { BooksPageActions, BooksApiActions } from '@book-co/books-page/actions';
+import { BookModel, BookRequiredProps } from '@book-co/shared-models';
 import {
-  BookModel,
-  BookRequiredProps,
-  calculateBooksGrossEarnings,
-} from '@book-co/shared-models';
-import {} from '@book-co/shared-state-books';
+  selectAllBooks,
+  selectActiveBook,
+  selectBooksEarningsTotals,
+} from '@book-co/shared-state-books';
 import { BooksService } from '@book-co/shared-services';
 
 @Component({
@@ -16,11 +16,15 @@ import { BooksService } from '@book-co/shared-services';
   styleUrls: ['./books-page.component.scss'],
 })
 export class BooksPageComponent implements OnInit {
-  books: BookModel[] = [];
-  currentBook: BookModel | null = null;
-  total: number = 0;
-
-  constructor(private booksService: BooksService, private store: Store) {}
+  books$: Observable<BookModel[]>;
+  currentBook$: Observable<BookModel | null>;
+  total$: Observable<number>;
+
+  constructor(private booksService: BooksService, private store: Store) {
+    this.books$ = store.select(selectAllBooks);
+    this.currentBook$ = store.select(selectActiveBook);
+    this.total$ = store.select(selectBooksEarningsTotals);
+  }
 
   ngOnInit() {
     this.store.dispatch(BooksPageActions.enter());
@@ -31,21 +35,12 @@ export class BooksPageComponent implements OnInit {
 
   getBooks() {
     this.booksService.all().subscribe((books) => {
-      this.books = books;
-      this.updateTotals(books);
-
       this.store.dispatch(BooksApiActions.booksLoaded({ books }));
     });
   }
 
-  updateTotals(books: BookModel[]) {
-    this.total = calculateBooksGrossEarnings(books);
-  }
-
   onSelect(book: BookModel) {
     this.store.dispatch(BooksPageActions.selectBook({ bookId: book.id }));
-
-    this.currentBook = book;
   }
 
   onCancel() {
@@ -54,8 +49,6 @@ export class BooksPageComponent implements OnInit {
 
   removeSelectedBook() {
     this.store.dispatch(BooksPageActions.clearSelectedBook());
-
-    this.currentBook = null;
   }
 
   onSave(book: BookRequiredProps | BookModel) {