diff --git a/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.html b/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.html
index 71bc1436d..0b080e9e0 100644
--- a/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.html
+++ b/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.html
@@ -1,6 +1,6 @@
 <div class="dashboard">
 
-  <div class="dashboard-no-library" *ngIf="libraryState$ | async; else dashboardScroller">
+  <div class="dashboard-no-library" *ngIf="isLibrariesEmpty$ | async; else dashboardScroller">
     <h1 class="no-library-header">
       Looks like you haven't added a library yet. Let's add one!
     </h1>
diff --git a/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.ts b/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.ts
index c1e12ecf6..04ba5107a 100644
--- a/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.ts
+++ b/booklore-ui/src/app/dashboard/components/main-dashboard/main-dashboard.component.ts
@@ -28,13 +28,15 @@ export class MainDashboardComponent implements OnInit {
   ref: DynamicDialogRef | undefined;
 
   private bookService = inject(BookService);
-  private libraryService = inject(LibraryService);
   private dialogService = inject(DialogService);
 
   lastReadBooks$: Observable<Book[]> | undefined;
   latestAddedBooks$: Observable<Book[]> | undefined;
   randomBooks$: Observable<Book[]> | undefined;
-  libraryState$: Observable<LibraryState> | undefined = this.libraryService.libraryState$;
+
+  isLibrariesEmpty$: Observable<boolean> = inject(LibraryService).libraryState$.pipe(
+    map(state => !state.libraries || state.libraries.length === 0)
+  );
 
   ngOnInit(): void {
     this.bookService.loadBooks();