diff --git a/src/app/home/home.css b/src/app/home/home.css
index 328e810..43f8db8 100644
--- a/src/app/home/home.css
+++ b/src/app/home/home.css
@@ -135,3 +135,7 @@
     gap: 1em;
   }
 }
+
+.view-more-container {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/home/home.html b/src/app/home/home.html
index 96245ef..c6ec286 100644
--- a/src/app/home/home.html
+++ b/src/app/home/home.html
@@ -112,7 +112,19 @@
         </mat-card-content>
       </mat-card>
 
-      <mat-card class="home-card">
+      <mat-card class="events clickable" (click)="navigation.openEvent($event, event)" *ngFor="let event of latestItems$ | async; trackBy: trackByFn">
+        <div class="events-header">
+          <app-event-header [pubkey]="event.pubkey"><span class="event-date" matTooltipPosition="below">{{ event.created_at | ago }}</span> <app-directory-icon [pubkey]="event.pubkey"></app-directory-icon></app-event-header>
+          <app-event-actions [event]="event"></app-event-actions>
+        </div>
+        <app-content [event]="event"></app-content>
+      </mat-card>
+
+      <p class="view-more-container">
+        <button mat-button routerLink="/feed">View more notes...</button>
+      </p>
+
+      <!-- <mat-card class="home-card">
         <mat-card-header>
           <img mat-card-avatar src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
           <mat-card-title>Shiba Inu</mat-card-title>
@@ -126,7 +138,7 @@
           <button mat-button>Like</button>
           <button mat-button>Comments</button>
         </mat-card-actions>
-      </mat-card>
+      </mat-card> -->
     </div>
   </div>
 
diff --git a/src/app/home/home.ts b/src/app/home/home.ts
index 3e9d735..3fe3a13 100644
--- a/src/app/home/home.ts
+++ b/src/app/home/home.ts
@@ -22,6 +22,8 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { DataService } from '../services/data';
 import { StorageService } from '../services/storage';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { dexieToRx } from '../shared/utilities';
+import { liveQuery } from 'dexie';
 
 interface DefaultProfile {
   pubkey: string;
@@ -130,6 +132,7 @@ export class HomeComponent {
     private cd: ChangeDetectorRef,
     public options: OptionsService,
     public dialog: MatDialog,
+    public navigation: NavigationService,
     public profileService: ProfileService,
     private validator: DataValidation,
     public navigationService: NavigationService,
@@ -311,12 +314,6 @@ export class HomeComponent {
   //   this.cd.detectChanges();
   // }
 
-  optionsUpdated() {
-    // this.allComplete = this.task.subtasks != null && this.task.subtasks.every(t => t.completed);
-    // Parse existing content.
-    this.events = this.validator.filterEvents(this.events);
-  }
-
   public trackByFn(index: number, item: NostrEvent) {
     return item.id;
   }
@@ -329,11 +326,11 @@ export class HomeComponent {
     return item.id;
   }
 
-  events: NostrEvent[] = [];
+  latestItems$ = dexieToRx(liveQuery(() => this.db.events.orderBy('created_at').reverse().limit(7).toArray()));
+
   sub: any;
   relay?: Relay;
   initialLoad = true;
-
   details = false;
 
   toggleDetails() {