diff --git a/app/db/src/app/search/components/passage/passage-card.component.html b/app/db/src/app/search/components/passage/passage-card.component.html
index 3305c5ff..7869364e 100644
--- a/app/db/src/app/search/components/passage/passage-card.component.html
+++ b/app/db/src/app/search/components/passage/passage-card.component.html
@@ -19,23 +19,26 @@
       <ng-container *ngFor="let para of ch.paras">
         <h3
           class="paragraph-heading"
-          *ngIf="(showParagraphHeadings$ | async) && hasHeader(para.p)"
+          *ngIf="
+            display.showParagraphs &&
+            display.showParagraphHeadings &&
+            hasHeader(para.p)
+          "
         >
           {{ para.p.h }}
         </h3>
 
         <p
           [ngClass]="{
-            'as-inline': (showParagraphs$ | async) === false
+            'as-inline': display.showParagraphs === false
           }"
         >
           <ng-container *ngFor="let vs of para.vss">
-            <strong class="verse-number" *ngIf="showVerseNumbers$ | async"
+            <strong class="verse-number" *ngIf="display.showVerseNumbers"
               >{{ vs.v }}.</strong
             >
             <ng-container *ngFor="let w of vs.w">
-              <ng-container *ngIf="!isPunct(w.t)"> </ng-container
-              ><a
+              <a
                 [title]="this.cardItem.dict + w.s"
                 *ngIf="w.s != null"
                 (click)="openStrongs(w.s, display.showStrongsAsModal)"
@@ -43,7 +46,7 @@
               ><ng-container *ngIf="w.s == null">{{
                 w.t
               }}</ng-container> </ng-container
-            ><br *ngIf="showVersesOnNewLine$ | async" />
+            ><br *ngIf="display.showVersesOnNewLine" />
           </ng-container>
         </p>
       </ng-container>
diff --git a/app/db/src/app/search/components/passage/passage-card.component.ts b/app/db/src/app/search/components/passage/passage-card.component.ts
index 72d15e9b..ab98b4a8 100644
--- a/app/db/src/app/search/components/passage/passage-card.component.ts
+++ b/app/db/src/app/search/components/passage/passage-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { BibleReference, Overlap } from '../../../common/bible-reference';
 import { AppService } from '../../../services/app.service';
@@ -12,17 +12,10 @@ import { NoteItem } from 'src/app/models/note-state';
   templateUrl: 'passage-card.component.html',
   styleUrls: ['./passage-card.component.scss'],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PassageCardComponent extends CardComponent implements OnInit {
   ref: BibleReference;
-
-  showParagraphs$ = this.appService.select((state) => state.displaySettings.value.showParagraphs);
-  showParagraphHeadings$ = this.appService.select(
-    (state) => state.displaySettings.value.showParagraphHeadings && state.displaySettings.value.showParagraphs
-  );
-  showVersesOnNewLine$ = this.appService.select((state) => state.displaySettings.value.showVersesOnNewLine);
-  showVerseNumbers$ = this.appService.select((state) => state.displaySettings.value.showVerseNumbers);
-
   displaySettings$ = this.appService.select((state) => state.displaySettings.value);
 
   // whenever the notes changes, look for any notes that reference this passage.
@@ -142,10 +135,6 @@ export class PassageCardComponent extends CardComponent implements OnInit {
     }
   }
 
-  isPunct(c: string) {
-    return new RegExp('^[.,;:?!]$').test(c);
-  }
-
   hasHeader(p: Paragraph) {
     if (p === undefined) {
       return false;
diff --git a/app/db/src/app/search/components/search-page/search.page.ts b/app/db/src/app/search/components/search-page/search.page.ts
index 8ab17157..465275da 100644
--- a/app/db/src/app/search/components/search-page/search.page.ts
+++ b/app/db/src/app/search/components/search-page/search.page.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { FormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
@@ -15,6 +15,7 @@ import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autoc
   selector: 'app-search-page',
   templateUrl: './search.page.html',
   styleUrls: ['./search.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchPage extends SubscriberComponent implements OnInit {
   cards$ = this.appService.select((state) => state.cards);
diff --git a/app/db/src/app/search/components/strongs/card/strongs-card.component.ts b/app/db/src/app/search/components/strongs/card/strongs-card.component.ts
index dcd72ee4..d01d1054 100644
--- a/app/db/src/app/search/components/strongs/card/strongs-card.component.ts
+++ b/app/db/src/app/search/components/strongs/card/strongs-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
+import { Component, ElementRef, ViewChild, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AppService } from '../../../../services/app.service';
 import { CardComponent } from '../../../../common/components/card.component';
@@ -10,6 +10,7 @@ import { StrongsModalComponent } from '../modal/strongs-modal.component';
   templateUrl: 'strongs-card.component.html',
   styleUrls: ['./strongs-card.component.scss'],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StrongsCardComponent extends CardComponent implements OnInit {
   asModal = false;
diff --git a/app/db/src/app/search/components/strongs/modal/strongs-modal.component.ts b/app/db/src/app/search/components/strongs/modal/strongs-modal.component.ts
index 04ae5e1a..c20df58b 100644
--- a/app/db/src/app/search/components/strongs/modal/strongs-modal.component.ts
+++ b/app/db/src/app/search/components/strongs/modal/strongs-modal.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { AppService } from '../../../../services/app.service';
 import { CardItem } from '../../../../models/app-state';
@@ -9,6 +9,8 @@ import { Observable } from 'rxjs';
   selector: 'app-strongs-modal',
   templateUrl: 'strongs-modal.component.html',
   styleUrls: ['./strongs-modal.component.scss'],
+  preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StrongsModalComponent {
   icon$: Observable<string>;
diff --git a/app/db/src/app/search/components/words/words-card.component.ts b/app/db/src/app/search/components/words/words-card.component.ts
index 92b29d99..68d04f73 100644
--- a/app/db/src/app/search/components/words/words-card.component.ts
+++ b/app/db/src/app/search/components/words/words-card.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { AppService } from '../../../services/app.service';
 import { CardComponent } from '../../../common/components/card.component';
 import { WordLookupResult } from '../../../models/words-state';
@@ -10,6 +10,7 @@ import { BibleReference } from 'src/app/common/bible-reference';
   templateUrl: 'words-card.component.html',
   styleUrls: ['./words-card.component.scss'],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WordsCardComponent extends CardComponent {
   @ViewChild('words') wordsElement: ElementRef;
diff --git a/app/db/src/main.ts b/app/db/src/main.ts
index c7b673cf..d9a2e7e4 100644
--- a/app/db/src/main.ts
+++ b/app/db/src/main.ts
@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));