diff --git a/app/db/src/app/components/passage/passage-card.component.html b/app/db/src/app/components/passage/passage-card.component.html
index 7869364e..15e95ecb 100644
--- a/app/db/src/app/components/passage/passage-card.component.html
+++ b/app/db/src/app/components/passage/passage-card.component.html
@@ -39,7 +39,7 @@
             >
             <ng-container *ngFor="let w of vs.w">
               <a
-                [title]="this.cardItem.dict + w.s"
+                [title]="getDict(this.cardItem) + w.s"
                 *ngIf="w.s != null"
                 (click)="openStrongs(w.s, display.showStrongsAsModal)"
                 >{{ w.t }}</a
@@ -52,18 +52,20 @@
       </ng-container>
     </div>
   </ng-container>
-  <mat-expansion-panel *ngIf="notes$ | async as notes">
-    <mat-expansion-panel-header>
-      <mat-panel-title>
-        Note References
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <div *ngFor="let note of notes">
-      <button mat-raised-button class="reference" (click)="openNote(note)">
-        {{ note.title }}
-      </button>
-    </div>
-  </mat-expansion-panel>
+  <ng-container *ngIf="notes$ | async as notes">
+    <mat-expansion-panel *ngIf="notes.length > 0">
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Note References
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <div *ngFor="let note of notes">
+        <button mat-raised-button class="reference" (click)="openNote(note)">
+          {{ note.title }}
+        </button>
+      </div>
+    </mat-expansion-panel>
+  </ng-container>
 </div>
 <div class="card-actions">
   <span class="card-actions-left">
diff --git a/app/db/src/app/components/passage/passage-card.component.ts b/app/db/src/app/components/passage/passage-card.component.ts
index a8e8a608..cad03c60 100644
--- a/app/db/src/app/components/passage/passage-card.component.ts
+++ b/app/db/src/app/components/passage/passage-card.component.ts
@@ -6,6 +6,7 @@ import { CardComponent } from 'src/app/components/card.component';
 import { BibleReference, Overlap } from 'src/app/common/bible-reference';
 import { AppService } from 'src/app/services/app.service';
 import { Paragraph, BiblePassageResult } from 'src/app/models/passage-state';
+import { CardItem } from 'src/app/models/card-state';
 
 @Component({
   selector: 'app-passage-card',
@@ -20,10 +21,15 @@ export class PassageCardComponent extends CardComponent implements OnInit {
 
   // whenever the notes changes, look for any notes that reference this passage.
   notes$ = this.appService.select((state) =>
-    state.notes.value.filter((o) => {
-      const refs = o.xref.split(';').map((r) => new BibleReference(r));
-      return refs.filter((r) => BibleReference.overlap(this.ref, r) !== Overlap.None).length > 0;
-    })
+    state.notes.value !== null && this.ref !== undefined
+      ? state.notes.value.filter((o) => {
+          const refs = o.xref
+            .split(';')
+            .map((r) => new BibleReference(r))
+            .filter((r) => BibleReference.overlap(this.ref, r) !== Overlap.None);
+          return refs.length > 0;
+        })
+      : []
   );
   hasNotes = false;
 
@@ -38,6 +44,10 @@ export class PassageCardComponent extends CardComponent implements OnInit {
     this.ref = new BibleReference(this.cardItem.qry);
   }
 
+  getDict(item: CardItem) {
+    return (item.data as BiblePassageResult).dict === 'grk' ? 'G' : 'H';
+  }
+
   copy() {
     const html = this.passageElement.nativeElement.innerHTML;
     const text = this.passageElement.nativeElement.innerText;
diff --git a/app/db/src/app/services/app-state-initial-state.ts b/app/db/src/app/services/app-state-initial-state.ts
index e6686514..d61cf03b 100644
--- a/app/db/src/app/services/app-state-initial-state.ts
+++ b/app/db/src/app/services/app-state-initial-state.ts
@@ -6,24 +6,29 @@ import { Overlap } from '../common/bible-reference';
 import { CardType, CardItem } from '../models/card-state';
 import { NoteItem } from '../models/note-state';
 
+const note: NoteItem = {
+  id: UUID.UUID(),
+  xref: '1 pe 2:16; jn 3:16',
+  title: 'Title Here',
+  content: '# Content Here\nIn Markdown format.',
+} as NoteItem;
+
 export const initialState: AppState = {
   user: null,
   cards: [
     {
       qry: 'UUIDGOESHERE',
       type: CardType.Note,
-      data: {
-        id: UUID.UUID(),
-        xref: '1 pe 2:16; jn 3:16',
-        title: 'Title Here',
-        content: '# Content Here\nIn Markdown format.',
-      } as NoteItem,
+      data: note,
     } as CardItem,
   ],
   autocomplete: [],
   currentSavedPage: null,
   savedPages: null,
-  notes: null,
+  notes: {
+    createdOn: new Date(0).toISOString(),
+    value: [note],
+  },
   savedPagesLoaded: false,
   mainPages: [
     { title: PageTitles.Search, icon: PageIcons.Search, route: 'search' },
diff --git a/app/db/src/app/services/app.service.ts b/app/db/src/app/services/app.service.ts
index dade98d1..ef486974 100644
--- a/app/db/src/app/services/app.service.ts
+++ b/app/db/src/app/services/app.service.ts
@@ -223,7 +223,7 @@ export class AppService extends createStateService(reducer, initialState) {
     });
   }
 
-  async getStrongsCard(strongsNumber: string, dict: string) {
+  async getStrongsCard(strongsNumber: string, dict: StrongsDictionary) {
     const result = await this.getStrongsFromApi(strongsNumber, dict);
     const d = dict === 'grk' ? 'G' : 'H';