diff --git a/booklore-api/src/main/java/com/adityachandel/booklore/controller/BookController.java b/booklore-api/src/main/java/com/adityachandel/booklore/controller/BookController.java
index 0eb466523..54fa57209 100644
--- a/booklore-api/src/main/java/com/adityachandel/booklore/controller/BookController.java
+++ b/booklore-api/src/main/java/com/adityachandel/booklore/controller/BookController.java
@@ -36,7 +36,6 @@ public class BookController {
 
     private final BookService bookService;
     private final BookRecommendationService bookRecommendationService;
-    private final BookMetadataService bookMetadataService;
 
     @GetMapping
     public ResponseEntity<List<Book>> getBooks(@RequestParam(required = false, defaultValue = "false") boolean withDescription) {
diff --git a/booklore-ui/angular.json b/booklore-ui/angular.json
index 6e7c65fa1..f6fe3f088 100644
--- a/booklore-ui/angular.json
+++ b/booklore-ui/angular.json
@@ -71,13 +71,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "4.5MB"
+                  "maximumWarning": "5MB",
+                  "maximumError": "5MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "25kB",
+                  "maximumError": "25kB"
                 }
               ],
               "outputHashing": "all"
diff --git a/booklore-ui/package-lock.json b/booklore-ui/package-lock.json
index b64d804c2..47d63c9ad 100644
--- a/booklore-ui/package-lock.json
+++ b/booklore-ui/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^20.1.6",
+        "@angular/cdk": "^20.2.2",
         "@angular/common": "^20.1.6",
         "@angular/compiler": "^20.1.6",
         "@angular/core": "^20.1.6",
@@ -23,9 +24,12 @@
         "@tailwindcss/postcss": "^4.1.8",
         "@tweenjs/tween.js": "^25.0.0",
         "angular-oauth2-oidc": "^20.0.0",
+        "chart.js": "^4.5.0",
+        "chartjs-plugin-datalabels": "^2.2.0",
         "epubjs": "^0.3.93",
         "jwt-decode": "^4.0.0",
         "ng-lazyload-image": "^9.1.3",
+        "ng2-charts": "^8.0.0",
         "ngx-extended-pdf-viewer": "^23.3.1",
         "ngx-infinite-scroll": "^20.0.0",
         "primeicons": "^7.0.0",
@@ -55,7 +59,7 @@
         "karma-jasmine": "^5.1.0",
         "karma-jasmine-html-reporter": "^2.1.0",
         "tailwindcss": "3.4.17",
-        "typescript": "^5.8.2",
+        "typescript": "~5.8.2",
         "typescript-eslint": "^8.39.0"
       }
     },
@@ -714,11 +718,10 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "20.1.5",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.1.5.tgz",
-      "integrity": "sha512-uJezXaVPAbumxTCv5JA7oIuWCgPlz9/Fj6dJl6bxcRD7DfMyHGq3dtoLhthuU/uk+OfK0FlTklR92Yss5frFUw==",
+      "version": "20.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-20.2.2.tgz",
+      "integrity": "sha512-jLvIMmFI8zoi6vAu1Aszua59GmhqBOtsVfkwLUGg5Hi86DI/inJr9BznNX2EKDtaulYMGZCmDgsltXQXeqP5Lg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "parse5": "^8.0.0",
         "tslib": "^2.3.0"
@@ -3962,6 +3965,12 @@
         "tslib": "2"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -7429,6 +7438,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
+    "node_modules/chartjs-plugin-datalabels": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -12498,6 +12528,24 @@
         "rxjs": ">=6.0.0"
       }
     },
+    "node_modules/ng2-charts": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-8.0.0.tgz",
+      "integrity": "sha512-nofsNHI2Zt+EAwT+BJBVg0kgOhNo9ukO4CxULlaIi7VwZSr7I1km38kWSoU41Oq6os6qqIh5srnL+CcV+RFPFA==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "^4.17.15",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": ">=19.0.0",
+        "@angular/common": ">=19.0.0",
+        "@angular/core": ">=19.0.0",
+        "@angular/platform-browser": ">=19.0.0",
+        "chart.js": "^3.4.0 || ^4.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/ngx-extended-pdf-viewer": {
       "version": "23.3.1",
       "resolved": "https://registry.npmjs.org/ngx-extended-pdf-viewer/-/ngx-extended-pdf-viewer-23.3.1.tgz",
@@ -13222,7 +13270,6 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
       "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "entities": "^6.0.0"
       },
@@ -13315,7 +13362,6 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -16277,6 +16323,7 @@
         "https://github.com/sponsors/ctavan"
       ],
       "license": "MIT",
+      "peer": true,
       "bin": {
         "uuid": "dist/esm/bin/uuid"
       }
diff --git a/booklore-ui/package.json b/booklore-ui/package.json
index 62786daa0..69d969918 100644
--- a/booklore-ui/package.json
+++ b/booklore-ui/package.json
@@ -27,9 +27,12 @@
     "@tailwindcss/postcss": "^4.1.8",
     "@tweenjs/tween.js": "^25.0.0",
     "angular-oauth2-oidc": "^20.0.0",
+    "chart.js": "^4.5.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "epubjs": "^0.3.93",
     "jwt-decode": "^4.0.0",
     "ng-lazyload-image": "^9.1.3",
+    "ng2-charts": "^8.0.0",
     "ngx-extended-pdf-viewer": "^23.3.1",
     "ngx-infinite-scroll": "^20.0.0",
     "primeicons": "^7.0.0",
@@ -40,7 +43,8 @@
     "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.8.1",
     "ws": "^8.18.2",
-    "zone.js": "^0.15.1"
+    "zone.js": "^0.15.1",
+    "@angular/cdk": "^20.2.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^20.1.5",
diff --git a/booklore-ui/src/app/app.routes.ts b/booklore-ui/src/app/app.routes.ts
index b63c34b5d..714a68229 100644
--- a/booklore-ui/src/app/app.routes.ts
+++ b/booklore-ui/src/app/app.routes.ts
@@ -16,8 +16,8 @@ import {LoginGuard} from './core/setup/ login.guard';
 import {OidcCallbackComponent} from './core/security/oidc-callback/oidc-callback.component';
 import {CbxReaderComponent} from './book/components/cbx-reader/cbx-reader.component';
 import {BookdropFileReviewComponent} from './bookdrop/bookdrop-file-review-component/bookdrop-file-review.component';
-import {MagicShelfComponent} from './magic-shelf-component/magic-shelf-component';
 import {MainDashboardComponent} from './dashboard/components/main-dashboard/main-dashboard.component';
+import {StatsComponent} from './stats-component/stats-component';
 
 export const routes: Routes = [
   {
@@ -44,7 +44,8 @@ export const routes: Routes = [
       {path: 'unshelved-books', component: BookBrowserComponent, canActivate: [AuthGuard]},
       { path: 'magic-shelf/:magicShelfId/books', component: BookBrowserComponent, canActivate: [AuthGuard] },
       {path: 'book/:bookId', component: BookMetadataCenterComponent, canActivate: [AuthGuard]},
-      {path: 'bookdrop', component: BookdropFileReviewComponent, canActivate: [AuthGuard]}
+      {path: 'bookdrop', component: BookdropFileReviewComponent, canActivate: [AuthGuard]},
+      {path: 'stats', component: StatsComponent, canActivate: [AuthGuard]},
     ]
   },
   {
diff --git a/booklore-ui/src/app/book/service/book.service.ts b/booklore-ui/src/app/book/service/book.service.ts
index f88d83cc3..ba6a32e0c 100644
--- a/booklore-ui/src/app/book/service/book.service.ts
+++ b/booklore-ui/src/app/book/service/book.service.ts
@@ -67,6 +67,10 @@ export class BookService {
     })
   );
 
+  getCurrentBookState(): BookState {
+    return this.bookStateSubject.value;
+  }
+
   private fetchBooks(): Observable<Book[]> {
     return this.http.get<Book[]>(this.url).pipe(
       tap(books => {
diff --git a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
index 759a19bd0..f5b9d3965 100644
--- a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
+++ b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.html
@@ -28,7 +28,7 @@
   <div class="flex items-center w-full gap-4">
     <app-book-searcher class="md:block flex-grow"></app-book-searcher>
     <ul class="topbar-items hidden md:flex items-center gap-3 ml-auto pl-4">
-      <div class="flex gap-6">
+      <div class="flex gap-4">
         @if (userService.userState$ | async; as userState) {
           <li>
             @if (userState.user?.permissions?.canManipulateLibrary || userState.user?.permissions?.admin) {
@@ -52,6 +52,11 @@
             }
           </li>
         }
+        <li>
+          <a class="topbar-item" (click)="navigateToStats()" pTooltip="Stats" tooltipPosition="bottom">
+            <i class="pi pi-chart-bar text-surface-100"></i>
+          </a>
+        </li>
         <li>
           <a class="topbar-item" (click)="navigateToSettings()" pTooltip="Settings" tooltipPosition="bottom">
             <i class="pi pi-cog text-surface-100"></i>
@@ -62,7 +67,7 @@
       <p-divider layout="vertical"/>
 
 
-      <div class="flex gap-6">
+      <div class="flex gap-4">
         <li class="relative">
           <button
             type="button"
@@ -110,7 +115,7 @@
         </li>
       </div>
       <p-divider layout="vertical"/>
-      <div class="flex gap-6">
+      <div class="flex gap-4">
         <li>
           <a class="topbar-item"
              href="https://booklore-app.github.io/booklore-docs/docs/getting-started/"
diff --git a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.ts b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.ts
index 40fc31703..7633fecc8 100644
--- a/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.ts
+++ b/booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.ts
@@ -137,7 +137,11 @@ export class AppTopBarComponent implements OnDestroy {
   }
 
   navigateToBookdrop() {
-    this.router.navigate(['/bookdrop'], {queryParams: {reload: Date.now()}});
+    this.router.navigate(['/bookdrop']);
+  }
+
+  navigateToStats() {
+    this.router.navigate(['/stats']);
   }
 
   logout() {
diff --git a/booklore-ui/src/app/metadata/cover-search/cover-search.component.html b/booklore-ui/src/app/metadata/cover-search/cover-search.component.html
index d1a86f6c6..21847020a 100644
--- a/booklore-ui/src/app/metadata/cover-search/cover-search.component.html
+++ b/booklore-ui/src/app/metadata/cover-search/cover-search.component.html
@@ -97,4 +97,3 @@
     </div>
   }
 </div>
-
diff --git a/booklore-ui/src/app/stats-component/charts-service/author-popularity-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/author-popularity-chart.service.ts
new file mode 100644
index 000000000..eb44fbce6
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/author-popularity-chart.service.ts
@@ -0,0 +1,321 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+interface AuthorStats {
+  author: string;
+  bookCount: number;
+  averageRating: number;
+  totalPages: number;
+  readStatusCounts: Record<ReadStatus, number>;
+}
+
+const READ_STATUS_COLORS: Record<ReadStatus, string> = {
+  [ReadStatus.READ]: '#2ecc71',
+  [ReadStatus.READING]: '#f39c12',
+  [ReadStatus.RE_READING]: '#9b59b6',
+  [ReadStatus.PARTIALLY_READ]: '#e67e22',
+  [ReadStatus.PAUSED]: '#34495e',
+  [ReadStatus.UNREAD]: '#4169e1',
+  [ReadStatus.WONT_READ]: '#95a5a6',
+  [ReadStatus.ABANDONED]: '#e74c3c',
+  [ReadStatus.UNSET]: '#3498db'
+};
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  hoverBorderWidth: 1,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type AuthorChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthorPopularityChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly authorChartType = 'bar' as const;
+
+  public readonly authorChartOptions: ChartConfiguration<'bar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        stacked: true,
+        ticks: {
+          color: '#ffffff',
+          font: {size: 10},
+          maxRotation: 45,
+          minRotation: 0
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Authors',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+        }
+      },
+      y: {
+        stacked: true,
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          stepSize: 1,
+          maxTicksLimit: 25
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.05)'
+        },
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top',
+        labels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 10
+          },
+          padding: 15,
+          boxWidth: 12
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => {
+            const dataIndex = context[0].dataIndex;
+            const stats = this.getLastCalculatedStats();
+            return stats[dataIndex]?.author || 'Unknown Author';
+          },
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'index'
+    }
+  };
+
+  private readonly authorChartDataSubject = new BehaviorSubject<AuthorChartData>({
+    labels: [],
+    datasets: Object.values(ReadStatus).map(status => ({
+      label: this.formatReadStatusLabel(status),
+      data: [],
+      backgroundColor: READ_STATUS_COLORS[status],
+      ...CHART_DEFAULTS
+    }))
+  });
+
+  public readonly authorChartData$: Observable<AuthorChartData> =
+    this.authorChartDataSubject.asObservable();
+
+  private lastCalculatedStats: AuthorStats[] = [];
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing author stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateAuthorStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: AuthorStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const topAuthors = stats
+        .sort((a, b) => b.bookCount - a.bookCount)
+        .slice(0, 25);
+
+      const labels = topAuthors.map(s => {
+        return s.author.length > 20
+          ? s.author.substring(0, 15) + '..'
+          : s.author;
+      });
+
+      const datasets = Object.values(ReadStatus).map(status => ({
+        label: this.formatReadStatusLabel(status),
+        data: topAuthors.map(s => s.readStatusCounts[status] || 0),
+        backgroundColor: READ_STATUS_COLORS[status],
+        ...CHART_DEFAULTS
+      }));
+
+      this.authorChartDataSubject.next({
+        labels,
+        datasets
+      });
+    } catch (error) {
+      console.error('Error updating author chart data:', error);
+    }
+  }
+
+  private calculateAuthorStats(): AuthorStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, selectedLibraryId);
+    return this.processAuthorStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processAuthorStats(books: Book[]): AuthorStats[] {
+    const authorMap = new Map<string, {
+      bookCount: number;
+      totalRating: number;
+      ratingCount: number;
+      totalPages: number;
+      readStatusCounts: Record<ReadStatus, number>;
+    }>();
+
+    books.forEach(book => {
+      const authors = book.metadata?.authors || ['Unknown Author'];
+
+      authors.forEach(author => {
+        if (!authorMap.has(author)) {
+          authorMap.set(author, {
+            bookCount: 0,
+            totalRating: 0,
+            ratingCount: 0,
+            totalPages: 0,
+            readStatusCounts: Object.values(ReadStatus).reduce((acc, status) => {
+              acc[status] = 0;
+              return acc;
+            }, {} as Record<ReadStatus, number>)
+          });
+        }
+
+        const stats = authorMap.get(author)!;
+        stats.bookCount++;
+
+        if (book.metadata?.pageCount) {
+          stats.totalPages += book.metadata.pageCount;
+        }
+
+        const rawStatus = book.readStatus;
+        const readStatus: ReadStatus = Object.values(ReadStatus).includes(rawStatus as ReadStatus)
+          ? (rawStatus as ReadStatus)
+          : ReadStatus.UNSET;
+        stats.readStatusCounts[readStatus]++;
+
+        const ratings = [];
+        if (book.metadata?.goodreadsRating) ratings.push(book.metadata.goodreadsRating);
+        if (book.metadata?.amazonRating) ratings.push(book.metadata.amazonRating);
+        if (book.metadata?.hardcoverRating) ratings.push(book.metadata.hardcoverRating);
+        if (book.metadata?.personalRating) ratings.push(book.metadata.personalRating);
+
+        if (ratings.length > 0) {
+          const avgRating = ratings.reduce((sum, rating) => sum + rating, 0) / ratings.length;
+          stats.totalRating += avgRating;
+          stats.ratingCount++;
+        }
+      });
+    });
+
+    return Array.from(authorMap.entries()).map(([author, stats]) => ({
+      author,
+      bookCount: stats.bookCount,
+      averageRating: stats.ratingCount > 0 ? stats.totalRating / stats.ratingCount : 0,
+      totalPages: stats.totalPages,
+      readStatusCounts: stats.readStatusCounts
+    })).filter(stat => stat.bookCount > 0);
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${context.parsed.y} books`;
+    }
+
+    const author = stats[dataIndex];
+    const value = context.parsed.y;
+    const datasetLabel = context.dataset.label;
+
+    if (context.dataset.label === 'Read' && author.averageRating > 0) {
+      return `${datasetLabel}: ${value} | Avg Rating: ${author.averageRating.toFixed(1)}`;
+    } else {
+      return `${datasetLabel}: ${value}`;
+    }
+  }
+
+  private formatReadStatusLabel(status: ReadStatus): string {
+    return status.split('_').map(word =>
+      word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+    ).join(' ');
+  }
+
+  private getLastCalculatedStats(): AuthorStats[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/author-series-portfolio-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/author-series-portfolio-chart.service.ts
new file mode 100644
index 000000000..2bebec38d
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/author-series-portfolio-chart.service.ts
@@ -0,0 +1,355 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface AuthorSeriesStats {
+  category: string;
+  count: number;
+  authorNames: string[];
+  totalSeries: number;
+  averageSeriesLength: number;
+  description: string;
+}
+
+const CHART_COLORS = [
+  '#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6',
+  '#e67e22', '#1abc9c', '#34495e', '#95a5a6', '#27ae60',
+  '#2980b9', '#c0392b', '#d35400', '#8e44ad', '#16a085'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type AuthorSeriesChartData = ChartData<'polarArea', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthorSeriesPortfolioChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly authorSeriesChartType = 'polarArea' as const;
+
+  public readonly authorSeriesChartOptions: ChartConfiguration<'polarArea'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      r: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          stepSize: 1,
+          backdropColor: 'transparent'
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.15)'
+        },
+        angleLines: {
+          color: 'rgba(255, 255, 255, 0.15)'
+        },
+        pointLabels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          padding: 10,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    }
+  };
+
+  private readonly authorSeriesChartDataSubject = new BehaviorSubject<AuthorSeriesChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly authorSeriesChartData$: Observable<AuthorSeriesChartData> = this.authorSeriesChartDataSubject.asObservable();
+
+  constructor() {
+    this.initializeChartDataSubscription();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private initializeChartDataSubscription(): void {
+    this.getAuthorSeriesStats()
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError((error) => {
+          console.error('Error processing author series stats:', error);
+          return [];
+        })
+      )
+      .subscribe((stats) => this.updateChartData(stats));
+  }
+
+  private updateChartData(stats: AuthorSeriesStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => s.category);
+      const dataValues = stats.map(s => s.count);
+      const colors = this.getColorsForData(stats.length);
+
+      this.authorSeriesChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating author series chart data:', error);
+    }
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  public getAuthorSeriesStats(): Observable<AuthorSeriesStats[]> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.libraryFilterService.selectedLibrary$
+    ]).pipe(
+      map(([state, selectedLibraryId]) => {
+        if (!this.isValidBookState(state)) {
+          return [];
+        }
+
+        const filteredBooks = this.filterBooksByLibrary(state.books!, String(selectedLibraryId));
+        return this.processAuthorSeriesStats(filteredBooks);
+      }),
+      catchError((error) => {
+        console.error('Error getting author series stats:', error);
+        return [];
+      })
+    );
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processAuthorSeriesStats(books: Book[]): AuthorSeriesStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const authorSeriesMap = new Map<string, Map<string, Book[]>>();
+
+    books.forEach(book => {
+      if (!book.metadata?.authors || !book.metadata.seriesName) return;
+
+      book.metadata.authors.forEach(author => {
+        if (!authorSeriesMap.has(author)) {
+          authorSeriesMap.set(author, new Map());
+        }
+
+        const authorSeries = authorSeriesMap.get(author)!;
+        const seriesName = book.metadata!.seriesName!;
+
+        if (!authorSeries.has(seriesName)) {
+          authorSeries.set(seriesName, []);
+        }
+        authorSeries.get(seriesName)!.push(book);
+      });
+    });
+
+    const authorPatterns = new Map<string, { authors: string[], totalSeries: number, totalSeriesLength: number }>();
+
+    const categories = [
+      'Single Series Masters',
+      'Prolific Series Writers',
+      'Multi-Series Creators',
+      'Series Experimenters',
+      'Franchise Builders',
+      'Diverse Portfolio Authors'
+    ];
+
+    categories.forEach(cat => {
+      authorPatterns.set(cat, {authors: [], totalSeries: 0, totalSeriesLength: 0});
+    });
+
+    for (const [author, authorSeries] of authorSeriesMap) {
+      const seriesCount = authorSeries.size;
+      const seriesLengths: number[] = [];
+      let totalBooks = 0;
+
+      for (const [_, seriesBooks] of authorSeries) {
+        const seriesTotals = seriesBooks
+          .map(book => book.metadata?.seriesTotal)
+          .filter((total): total is number => total != null && total > 0);
+
+        const seriesLength = seriesTotals.length > 0
+          ? Math.max(...seriesTotals)
+          : seriesBooks.length;
+
+        seriesLengths.push(seriesLength);
+        totalBooks += seriesBooks.length;
+      }
+
+      const averageSeriesLength = seriesLengths.reduce((sum, length) => sum + length, 0) / seriesLengths.length;
+      const maxSeriesLength = Math.max(...seriesLengths);
+
+      let category: string;
+
+      if (seriesCount === 1 && maxSeriesLength >= 10) {
+        category = 'Single Series Masters';
+      } else if (seriesCount >= 5 && averageSeriesLength >= 5) {
+        category = 'Prolific Series Writers';
+      } else if (seriesCount >= 3 && seriesCount <= 4) {
+        category = 'Multi-Series Creators';
+      } else if (seriesCount >= 2 && averageSeriesLength <= 3) {
+        category = 'Series Experimenters';
+      } else if (seriesCount >= 2 && maxSeriesLength >= 15) {
+        category = 'Franchise Builders';
+      } else {
+        category = 'Diverse Portfolio Authors';
+      }
+
+      const categoryData = authorPatterns.get(category)!;
+      categoryData.authors.push(author);
+      categoryData.totalSeries += seriesCount;
+      categoryData.totalSeriesLength += Math.round(averageSeriesLength);
+    }
+
+    const descriptions: Record<string, string> = {
+      'Single Series Masters': 'Authors focused on one long-running series',
+      'Prolific Series Writers': 'Authors with multiple substantial series',
+      'Multi-Series Creators': 'Authors balancing several series',
+      'Series Experimenters': 'Authors exploring shorter series formats',
+      'Franchise Builders': 'Authors creating extensive fictional universes',
+      'Diverse Portfolio Authors': 'Authors with varied series approaches'
+    };
+
+    return Array.from(authorPatterns.entries())
+      .filter(([_, data]) => data.authors.length > 0)
+      .map(([category, data]) => ({
+        category,
+        count: data.authors.length,
+        authorNames: data.authors,
+        totalSeries: data.totalSeries,
+        averageSeriesLength: data.authors.length > 0
+          ? Math.round(data.totalSeriesLength / data.authors.length)
+          : 0,
+        description: descriptions[category] || 'Various series approaches'
+      }))
+      .sort((a, b) => b.count - a.count);
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+    const dataValues = dataset.data as number[];
+
+    return data.labels.map((label: string, index: number) => {
+      const isVisible = typeof chart.getDataVisibility === 'function'
+        ? chart.getDataVisibility(index)
+        : !((chart.getDatasetMeta && chart.getDatasetMeta(0)?.data?.[index]?.hidden) || false);
+
+      return {
+        text: `${label} (${dataValues[index]})`,
+        fillStyle: (dataset.backgroundColor as string[])[index],
+        strokeStyle: '#ffffff',
+        lineWidth: 1,
+        hidden: !isVisible,
+        index,
+        fontColor: '#ffffff'
+      };
+    });
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${context.parsed} authors`;
+    }
+
+    const categoryStats = stats[dataIndex];
+    const exampleAuthors = categoryStats.authorNames.slice(0, 3).join(', ');
+    const moreAuthors = categoryStats.authorNames.length > 3 ? `... +${categoryStats.authorNames.length - 3} more` : '';
+
+    return `${categoryStats.count} authors | ${categoryStats.totalSeries} total series | Avg ${categoryStats.averageSeriesLength} books/series | ${categoryStats.description} | Examples: ${exampleAuthors}${moreAuthors}`;
+  }
+
+  private lastCalculatedStats: AuthorSeriesStats[] = [];
+
+  private getLastCalculatedStats(): AuthorSeriesStats[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/book-quality-score-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/book-quality-score-chart.service.ts
new file mode 100644
index 000000000..481f809f4
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/book-quality-score-chart.service.ts
@@ -0,0 +1,290 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface QualityScoreStats {
+  category: string;
+  count: number;
+  averageScore: number;
+  scoreRange: string;
+}
+
+const CHART_COLORS = [
+  '#e74c3c', '#e67e22', '#f39c12', '#f1c40f', '#2ecc71',
+  '#27ae60', '#3498db', '#9b59b6', '#8e44ad', '#34495e'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+const QUALITY_COLORS = {
+  'Excellent (9+)': '#2ecc71',     // Green
+  'Very Good (8-9)': '#27ae60',    // Dark Green
+  'Good (6-8)': '#3498db',         // Blue
+  'Average (4-6)': '#f39c12',      // Orange
+  'Poor (2-4)': '#e67e22',         // Dark Orange
+  'Very Poor (0-2)': '#e74c3c'     // Red
+} as const;
+
+type QualityChartData = ChartData<'doughnut', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BookQualityScoreChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly qualityChartType = 'doughnut' as const;
+
+  public readonly qualityChartOptions: ChartConfiguration<'doughnut'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          padding: 12,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    },
+    cutout: '45%'
+  };
+
+  private readonly qualityChartDataSubject = new BehaviorSubject<QualityChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly qualityChartData$: Observable<QualityChartData> = this.qualityChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing quality score stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateQualityScoreStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: QualityScoreStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => s.category);
+      const dataValues = stats.map(s => s.count);
+      const colors = this.getColorsForQualityData(stats);
+
+      this.qualityChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating quality chart data:', error);
+    }
+  }
+
+  private getColorsForQualityData(stats: QualityScoreStats[]): string[] {
+    return stats.map(stat => QUALITY_COLORS[stat.category as keyof typeof QUALITY_COLORS] || '#34495e');
+  }
+
+  private calculateQualityScoreStats(): QualityScoreStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processQualityScoreStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processQualityScoreStats(books: Book[]): QualityScoreStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const qualityCategories = this.categorizeByQualityScore(books);
+    return this.convertToQualityStats(qualityCategories);
+  }
+
+  private categorizeByQualityScore(books: Book[]): Map<string, { books: Book[], scores: number[] }> {
+    const categories = new Map<string, { books: Book[], scores: number[] }>();
+
+    // Initialize 6 categories
+    categories.set('Excellent (9+)', {books: [], scores: []});
+    categories.set('Very Good (8-9)', {books: [], scores: []});
+    categories.set('Good (6-8)', {books: [], scores: []});
+    categories.set('Average (4-6)', {books: [], scores: []});
+    categories.set('Poor (2-4)', {books: [], scores: []});
+    categories.set('Very Poor (0-2)', {books: [], scores: []});
+
+    for (const book of books) {
+      const qualityScore = this.calculateQualityScore(book);
+      const category = this.getQualityCategory(qualityScore);
+
+      categories.get(category)!.books.push(book);
+      categories.get(category)!.scores.push(qualityScore);
+    }
+
+    return categories;
+  }
+
+  private calculateQualityScore(book: Book): number {
+    // Use metadataMatchScore directly, scale from 0-100 to 0-10
+    if (book.metadataMatchScore !== null && book.metadataMatchScore !== undefined) {
+      return Math.min(10, Math.max(0, book.metadataMatchScore / 10));
+    }
+    return 0;
+  }
+
+  private getQualityCategory(score: number): string {
+    if (score >= 9) return 'Excellent (9+)';
+    if (score >= 8) return 'Very Good (8-9)';
+    if (score >= 6) return 'Good (6-8)';
+    if (score >= 4) return 'Average (4-6)';
+    if (score >= 2) return 'Poor (2-4)';
+    return 'Very Poor (0-2)';
+  }
+
+  private convertToQualityStats(categoriesMap: Map<string, { books: Book[], scores: number[] }>): QualityScoreStats[] {
+    const scoreRanges: Record<string, string> = {
+      'Excellent (9+)': '90-100%',
+      'Very Good (8-9)': '80-89%',
+      'Good (6-8)': '60-79%',
+      'Average (4-6)': '40-59%',
+      'Poor (2-4)': '20-39%',
+      'Very Poor (0-2)': '0-19%'
+    };
+
+    return Array.from(categoriesMap.entries())
+      .filter(([_, data]) => data.books.length > 0)
+      .map(([category, data]) => {
+        const averageScore = data.scores.reduce((sum, score) => sum + score, 0) / data.scores.length;
+
+        return {
+          category,
+          count: data.books.length,
+          averageScore: Number(averageScore.toFixed(1)),
+          scoreRange: scoreRanges[category] || 'Unknown'
+        };
+      })
+      .sort((a, b) => b.averageScore - a.averageScore);
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+
+    return data.labels.map((label: string, index: number) => {
+      const isVisible = typeof chart.getDataVisibility === 'function'
+        ? chart.getDataVisibility(index)
+        : !((chart.getDatasetMeta && chart.getDatasetMeta(0)?.data?.[index]?.hidden) || false);
+
+      return {
+        text: label,
+        fillStyle: (dataset.backgroundColor as string[])[index],
+        strokeStyle: '#ffffff',
+        lineWidth: 1,
+        hidden: !isVisible,
+        index,
+        fontColor: '#ffffff'
+      };
+    });
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const qualityStats = this.getLastCalculatedStats();
+
+    if (!qualityStats || dataIndex >= qualityStats.length) {
+      return `${context.parsed} books`;
+    }
+
+    const stats = qualityStats[dataIndex];
+    const total = context.chart.data.datasets[0].data.reduce((a: number, b: number) => a + b, 0);
+    const percentage = ((stats.count / total) * 100).toFixed(1);
+
+    return `${stats.count} books (${percentage}%) | Average Score: ${stats.averageScore}/10 (${stats.scoreRange})`;
+  }
+
+  private lastCalculatedStats: QualityScoreStats[] = [];
+
+  private getLastCalculatedStats(): QualityScoreStats[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/book-rating-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/book-rating-chart.service.ts
new file mode 100644
index 000000000..78b731fba
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/book-rating-chart.service.ts
@@ -0,0 +1,249 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+interface RatingStats {
+  ratingRange: string;
+  count: number;
+  averageRating: number;
+}
+
+const CHART_COLORS = [
+  '#DC2626', // Red (1.0-1.9)
+  '#EA580C', // Red-orange (2.0-2.9)
+  '#F59E0B', // Orange (3.0-3.9)
+  '#16A34A', // Green (4.0-4.5)
+  '#2563EB'  // Blue (4.6-5.0)
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 1,
+  hoverBorderWidth: 2,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+const RATING_RANGES = [
+  {range: '1.0-1.9', min: 1.0, max: 1.9},
+  {range: '2.0-2.9', min: 2.0, max: 2.9},
+  {range: '3.0-3.9', min: 3.0, max: 3.9},
+  {range: '4.0-4.5', min: 4.0, max: 4.5},
+  {range: '4.6-5.0', min: 4.6, max: 5.0},
+  {range: 'No Rating', min: 0, max: 0}
+] as const;
+
+type RatingChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BookRatingChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly ratingChartType: ChartType = 'bar';
+
+  public readonly ratingChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false,
+        labels: {
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#666666',
+        borderWidth: 1,
+        callbacks: {
+          title: (context) => `External Rating Range: ${context[0].label}`,
+          label: (context) => {
+            const value = context.parsed.y;
+            return `${value} book${value === 1 ? '' : 's'}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.1)'},
+        title: {
+          display: true,
+          text: 'External Rating Range',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          stepSize: 1
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.05)'},
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+        }
+      }
+    }
+  };
+
+  private readonly ratingChartDataSubject = new BehaviorSubject<RatingChartData>({
+    labels: [],
+    datasets: [{
+      label: 'Books by External Rating',
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly ratingChartData$: Observable<RatingChartData> =
+    this.ratingChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing rating stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateRatingStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: RatingStats[]): void {
+    try {
+      const labels = stats.map(s => s.ratingRange);
+      const dataValues = stats.map(s => s.count);
+
+      this.ratingChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books by External Rating',
+          data: dataValues,
+          backgroundColor: [...CHART_COLORS],
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  private calculateRatingStats(): RatingStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, selectedLibraryId);
+    return this.processRatingStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processRatingStats(books: Book[]): RatingStats[] {
+    const rangeCounts = new Map<string, { count: number, totalRating: number }>();
+    RATING_RANGES.forEach(range => rangeCounts.set(range.range, {count: 0, totalRating: 0}));
+
+    books.forEach(book => {
+      const rating = this.getBookRating(book);
+
+      if (rating === 0) {
+        const noRatingData = rangeCounts.get('No Rating')!;
+        noRatingData.count++;
+      } else {
+        for (const range of RATING_RANGES) {
+          if (range.range !== 'No Rating' && rating >= range.min && rating <= range.max) {
+            const rangeData = rangeCounts.get(range.range)!;
+            rangeData.count++;
+            rangeData.totalRating += rating;
+            break;
+          }
+        }
+      }
+    });
+
+    return RATING_RANGES.map(range => {
+      const data = rangeCounts.get(range.range)!;
+      return {
+        ratingRange: range.range,
+        count: data.count,
+        averageRating: data.count > 0 ? data.totalRating / data.count : 0
+      };
+    }).filter(stat => stat.ratingRange !== 'No Rating');
+  }
+
+  private getBookRating(book: Book): number {
+    const ratings = [];
+
+    if (book.metadata?.goodreadsRating) ratings.push(book.metadata.goodreadsRating);
+    if (book.metadata?.amazonRating) ratings.push(book.metadata.amazonRating);
+    if (book.metadata?.hardcoverRating) ratings.push(book.metadata.hardcoverRating);
+
+    if (ratings.length > 0) {
+      return ratings.reduce((sum, rating) => sum + rating, 0) / ratings.length;
+    }
+
+    if (book.metadata?.rating) return book.metadata.rating;
+    return 0;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/book-size-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/book-size-chart.service.ts
new file mode 100644
index 000000000..3f4f0f659
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/book-size-chart.service.ts
@@ -0,0 +1,252 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface BookSizeStats {
+  title: string;
+  sizeMB: number;
+  bookType: string;
+  pageCount?: number;
+}
+
+const BOOK_TYPE_COLORS = {
+  'PDF': '#e74c3c',
+  'EPUB': '#3498db',
+  'CBZ': '#27a153',
+  'CBX': '#d4b50f',
+  'CBR': '#e67e22',
+  'CB7': '#9b59b6'
+} as const;
+
+const CHART_DEFAULTS = {
+  borderWidth: 1,
+  hoverBorderWidth: 2,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type BookSizeChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BookSizeChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly bookSizeChartType = 'bar' as const;
+
+  public readonly bookSizeChartOptions: ChartConfiguration<'bar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    indexAxis: 'y',
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          callback: function (value) {
+            return value + ' MB';
+          }
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'File Size (MB)',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 12
+          }
+        }
+      },
+      y: {
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          maxTicksLimit: 25
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.05)'
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      datalabels: {
+        display: true,
+        color: '#ffffff',
+        font: {
+          size: 10,
+          family: "'Inter', sans-serif",
+          weight: 'bold'
+        },
+        align: 'center',
+        offset: 8,
+        formatter: (value: number) => `${Math.round(value)} MB`
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => {
+            const dataIndex = context[0].dataIndex;
+            const stats = this.getLastCalculatedStats();
+            return stats[dataIndex]?.title || 'Unknown';
+          },
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    }
+  };
+
+  private readonly bookSizeChartDataSubject = new BehaviorSubject<BookSizeChartData>({
+    labels: [],
+    datasets: []
+  });
+
+  public readonly bookSizeChartData$: Observable<BookSizeChartData> = this.bookSizeChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing book size stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateBookSizeStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: BookSizeStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => this.truncateTitle(s.title, 30));
+      const dataValues = stats.map(s => s.sizeMB);
+      const colors = stats.map(s => BOOK_TYPE_COLORS[s.bookType as keyof typeof BOOK_TYPE_COLORS] || '#95a5a6');
+
+      this.bookSizeChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'File Size',
+          data: dataValues,
+          backgroundColor: colors,
+          borderColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating book size chart data:', error);
+    }
+  }
+
+  private calculateBookSizeStats(): BookSizeStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processBookSizeStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processBookSizeStats(books: Book[]): BookSizeStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const booksWithSize = books
+      .filter(book => book.fileSizeKb && book.fileSizeKb > 0)
+      .map(book => ({
+        title: book.metadata?.title || book.fileName || 'Unknown Title',
+        sizeMB: Number((book.fileSizeKb! / 1024).toFixed(2)),
+        bookType: book.bookType,
+        pageCount: book.metadata?.pageCount || undefined
+      }))
+      .sort((a, b) => b.sizeMB - a.sizeMB)
+      .slice(0, 20);
+
+    return booksWithSize;
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${context.parsed.x} MB`;
+    }
+
+    const book = stats[dataIndex];
+    const sizeInfo = `${book.sizeMB} MB`;
+    const typeInfo = `Format: ${book.bookType}`;
+    const pageInfo = book.pageCount ? `Pages: ${book.pageCount}` : 'Pages: Unknown';
+
+    return `${sizeInfo} | ${typeInfo} | ${pageInfo}`;
+  }
+
+  private lastCalculatedStats: BookSizeStats[] = [];
+
+  private getLastCalculatedStats(): BookSizeStats[] {
+    return this.lastCalculatedStats;
+  }
+
+  private truncateTitle(title: string, maxLength: number): string {
+    return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/book-type-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/book-type-chart.service.ts
new file mode 100644
index 000000000..4d79266c1
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/book-type-chart.service.ts
@@ -0,0 +1,237 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface BookTypeStats {
+  bookType: string;
+  count: number;
+  percentage: number;
+}
+
+const CHART_COLORS = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFA726', '#AB47BC'] as const;
+const CHART_DEFAULTS = {
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  borderColor: '#ffffff',
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type BookTypeChartData = ChartData<'pie', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BookTypeChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly bookTypeChartType: ChartType = 'pie';
+
+  public readonly bookTypeChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          color: '#ffffff',
+          padding: 12,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    }
+  };
+
+  private readonly bookTypeChartDataSubject = new BehaviorSubject<BookTypeChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly bookTypeChartData$: Observable<BookTypeChartData> =
+    this.bookTypeChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing book type stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateBookTypeStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: BookTypeStats[]): void {
+    try {
+      const labels = stats.map(s => s.bookType);
+      const dataValues = stats.map(s => s.count);
+      const colors = this.getColorsForData(stats.length);
+
+      this.bookTypeChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    // Repeat colors if we have more data points than colors
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  private calculateBookTypeStats(): BookTypeStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processBookTypeStats(filteredBooks);
+  }
+
+  public updateFromStats(stats: BookTypeStats[]): void {
+    this.updateChartData(stats);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processBookTypeStats(books: Book[]): BookTypeStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const typeMap = this.buildTypeMap(books);
+    return this.convertMapToStats(typeMap, books.length);
+  }
+
+  private buildTypeMap(books: Book[]): Map<string, number> {
+    const typeMap = new Map<string, number>();
+
+    for (const book of books) {
+      const type = book.bookType || 'Unknown';
+      typeMap.set(type, (typeMap.get(type) || 0) + 1);
+    }
+
+    return typeMap;
+  }
+
+  private convertMapToStats(typeMap: Map<string, number>, totalBooks: number): BookTypeStats[] {
+    return Array.from(typeMap.entries())
+      .map(([bookType, count]) => ({
+        bookType: this.formatBookType(bookType),
+        count,
+        percentage: Number(((count / totalBooks) * 100).toFixed(1))
+      }))
+      .sort((a, b) => b.count - a.count);
+  }
+
+  private formatBookType(type: string): string {
+    const TYPE_MAPPING: Record<string, string> = {
+      PDF: 'PDF',
+      EPUB: 'EPUB',
+      CBX: 'Comic Books',
+      Unknown: 'Unknown Format'
+    } as const;
+
+    return TYPE_MAPPING[type] || type;
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+    const dataValues = dataset.data as number[];
+
+    return data.labels.map((label: string, index: number) => ({
+      text: `${label} (${dataValues[index]})`,
+      fillStyle: (dataset.backgroundColor as string[])[index],
+      strokeStyle: '#ffffff',
+      lineWidth: 1,
+      hidden: false,
+      fontColor: '#ffffff',
+      index
+    }));
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const dataset = context.dataset;
+    const value = dataset.data[dataIndex] as number;
+    const label = context.chart.data.labels?.[dataIndex] || 'Unknown';
+    const total = (dataset.data as number[]).reduce((a: number, b: number) => a + b, 0);
+    const percentage = ((value / total) * 100).toFixed(1);
+    return `${label}: ${value} books (${percentage}%)`;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/chart-config.service.ts b/booklore-ui/src/app/stats-component/charts-service/chart-config.service.ts
new file mode 100644
index 000000000..a67d06fa4
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/chart-config.service.ts
@@ -0,0 +1,173 @@
+import {Injectable} from '@angular/core';
+import {BehaviorSubject} from 'rxjs';
+
+export interface ChartConfig {
+  id: string;
+  name: string;
+  enabled: boolean;
+  category: 'small' | 'medium' | 'large' | 'full-width';
+  order: number;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChartConfigService {
+  private readonly STORAGE_KEY = 'booklore-chart-config';
+
+  private readonly defaultCharts: ChartConfig[] = [
+    {id: 'readingStatus', name: 'Reading Status', enabled: true, category: 'small', order: 0},
+    {id: 'bookFormats', name: 'Book Formats', enabled: true, category: 'small', order: 1},
+    {id: 'languageDistribution', name: 'Language Distribution', enabled: true, category: 'small', order: 2},
+    {id: 'bookMetadataScore', name: 'Book Metadata Score', enabled: true, category: 'small', order: 3},
+    {id: 'topAuthors', name: 'Top 25 Authors', enabled: true, category: 'large', order: 4},
+    {id: 'topCategories', name: 'Top 25 Categories', enabled: true, category: 'large', order: 5},
+    {id: 'monthlyReadingPatterns', name: 'Monthly Reading Patterns', enabled: true, category: 'large', order: 6},
+    {id: 'readingVelocityTimeline', name: 'Reading Velocity Timeline', enabled: true, category: 'large', order: 7},
+    {id: 'readingProgress', name: 'Reading Progress', enabled: true, category: 'medium', order: 8},
+    {id: 'externalRating', name: 'External Rating Distribution', enabled: true, category: 'medium', order: 9},
+    {id: 'personalRating', name: 'Personal Rating Distribution', enabled: true, category: 'medium', order: 10},
+    {id: 'pageCount', name: 'Page Count Distribution', enabled: true, category: 'medium', order: 11},
+    {id: 'topBooksBySize', name: 'Top 20 Largest Books', enabled: true, category: 'large', order: 12},
+    {id: 'topSeries', name: 'Top 20 Series', enabled: true, category: 'large', order: 13},
+    {id: 'readingDNA', name: 'Reading DNA Profile', enabled: true, category: 'large', order: 14},
+    {id: 'readingHabits', name: 'Reading Habits Analysis', enabled: true, category: 'large', order: 15},
+    {id: 'publicationYear', name: 'Publication Year Timeline', enabled: true, category: 'full-width', order: 16},
+    {id: 'finishedBooksTimeline', name: 'Books Finished Timeline', enabled: true, category: 'full-width', order: 17}
+  ];
+
+  private chartsConfigSubject = new BehaviorSubject<ChartConfig[]>(this.loadConfig());
+  public chartsConfig$ = this.chartsConfigSubject.asObservable();
+
+  constructor() {
+    this.initializeConfig();
+  }
+
+  private initializeConfig(): void {
+    const savedConfig = this.loadConfig();
+    this.chartsConfigSubject.next(savedConfig);
+  }
+
+  private loadConfig(): ChartConfig[] {
+    try {
+      const saved = localStorage.getItem(this.STORAGE_KEY);
+      if (saved) {
+        const savedConfig = JSON.parse(saved) as ChartConfig[];
+        return this.mergeWithDefaults(savedConfig);
+      }
+    } catch (error) {
+      console.error('Error loading chart config from localStorage:', error);
+    }
+    return [...this.defaultCharts];
+  }
+
+  private mergeWithDefaults(savedConfig: ChartConfig[]): ChartConfig[] {
+    const merged = [...this.defaultCharts];
+
+    savedConfig.forEach(saved => {
+      const index = merged.findIndex(chart => chart.id === saved.id);
+      if (index !== -1) {
+        merged[index] = {
+          ...merged[index],
+          enabled: saved.enabled,
+          order: saved.order !== undefined ? saved.order : merged[index].order
+        };
+      }
+    });
+
+    return merged.sort((a, b) => a.order - b.order);
+  }
+
+  private saveConfig(config: ChartConfig[]): void {
+    try {
+      localStorage.setItem(this.STORAGE_KEY, JSON.stringify(config));
+    } catch (error) {
+      console.error('Error saving chart config to localStorage:', error);
+    }
+  }
+
+  public toggleChart(chartId: string): void {
+    const currentConfig = this.chartsConfigSubject.value;
+    const updatedConfig = currentConfig.map(chart =>
+      chart.id === chartId ? {...chart, enabled: !chart.enabled} : chart
+    );
+
+    this.chartsConfigSubject.next(updatedConfig);
+    this.saveConfig(updatedConfig);
+  }
+
+  public isChartEnabled(chartId: string): boolean {
+    const config = this.chartsConfigSubject.value;
+    const chart = config.find(c => c.id === chartId);
+    return chart?.enabled ?? false;
+  }
+
+  public enableAllCharts(): void {
+    const updatedConfig = this.chartsConfigSubject.value.map(chart => ({...chart, enabled: true}));
+    this.chartsConfigSubject.next(updatedConfig);
+    this.saveConfig(updatedConfig);
+  }
+
+  public disableAllCharts(): void {
+    const updatedConfig = this.chartsConfigSubject.value.map(chart => ({...chart, enabled: false}));
+    this.chartsConfigSubject.next(updatedConfig);
+    this.saveConfig(updatedConfig);
+  }
+
+  public getChartsByCategory(category: string): ChartConfig[] {
+    return this.chartsConfigSubject.value.filter(chart => chart.category === category);
+  }
+
+  public getEnabledChartsSorted(): ChartConfig[] {
+    return this.chartsConfigSubject.value
+      .filter(chart => chart.enabled)
+      .sort((a, b) => a.order - b.order);
+  }
+
+  public reorderCharts(fromIndex: number, toIndex: number): void {
+    const currentConfig = [...this.chartsConfigSubject.value];
+    const enabledCharts = currentConfig.filter(chart => chart.enabled).sort((a, b) => a.order - b.order);
+
+    if (fromIndex >= enabledCharts.length || toIndex >= enabledCharts.length) {
+      return;
+    }
+
+    // Move the chart from fromIndex to toIndex
+    const [movedChart] = enabledCharts.splice(fromIndex, 1);
+    enabledCharts.splice(toIndex, 0, movedChart);
+
+    // Update order values for all enabled charts
+    enabledCharts.forEach((chart, index) => {
+      const configIndex = currentConfig.findIndex(c => c.id === chart.id);
+      if (configIndex !== -1) {
+        currentConfig[configIndex] = {...currentConfig[configIndex], order: index};
+      }
+    });
+
+    this.chartsConfigSubject.next(currentConfig);
+    this.saveConfig(currentConfig);
+  }
+
+  public resetOrder(): void {
+    const currentConfig = this.chartsConfigSubject.value.map((chart, index) => ({
+      ...chart,
+      order: this.defaultCharts.find(d => d.id === chart.id)?.order ?? index
+    }));
+
+    this.chartsConfigSubject.next(currentConfig);
+    this.saveConfig(currentConfig);
+  }
+
+  public resetPositions(): void {
+    const resetConfig = this.defaultCharts.map(defaultChart => {
+      const currentChart = this.chartsConfigSubject.value.find(c => c.id === defaultChart.id);
+      return {
+        ...defaultChart,
+        enabled: currentChart?.enabled ?? defaultChart.enabled
+      };
+    });
+
+    this.chartsConfigSubject.next(resetConfig);
+    this.saveConfig(resetConfig);
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/finished-books-timeline-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/finished-books-timeline-chart.service.ts
new file mode 100644
index 000000000..c1fd24f1f
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/finished-books-timeline-chart.service.ts
@@ -0,0 +1,248 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface FinishedBooksStats {
+  yearMonth: string;
+  count: number;
+  year: number;
+  month: number;
+}
+
+const CHART_COLORS = {
+  primary: '#EF476F',
+  primaryBackground: 'rgba(239, 71, 111, 0.1)',
+  border: '#ffffff'
+} as const;
+
+const CHART_DEFAULTS = {
+  borderColor: CHART_COLORS.primary,
+  backgroundColor: CHART_COLORS.primaryBackground,
+  borderWidth: 2,
+  pointBackgroundColor: CHART_COLORS.primary,
+  pointBorderColor: CHART_COLORS.border,
+  pointBorderWidth: 2,
+  pointRadius: 4,
+  pointHoverRadius: 6,
+  fill: true,
+  tension: 0.4
+} as const;
+
+type FinishedBooksChartData = ChartData<'line', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FinishedBooksTimelineChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly finishedBooksChartType = 'line' as const;
+
+  public readonly finishedBooksChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {display: false},
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 13},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => {
+            return context[0].label; // Already formatted as "Month Year"
+          },
+          label: this.formatTooltipLabel.bind(this)
+        }
+      },
+      datalabels: {
+        display: true,
+        color: '#ffffff',
+        font: {
+          size: 10,
+          weight: 'bold'
+        },
+        align: 'top',
+        offset: 8,
+        formatter: (value: number) => value.toString()
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    },
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          maxRotation: 45,
+          callback: function (value, index, values) {
+            const totalLabels = values.length;
+            const skipInterval = totalLabels > 24 ? Math.ceil(totalLabels / 12) : totalLabels > 12 ? 2 : 1;
+            return index % skipInterval === 0 ? this.getLabelForValue(value as number) : '';
+          }
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.1)'},
+        title: {
+          display: true,
+          text: 'Month',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          stepSize: 1
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.05)'},
+        title: {
+          display: true,
+          text: 'Books Finished',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      }
+    }
+  };
+
+  private readonly finishedBooksChartDataSubject = new BehaviorSubject<FinishedBooksChartData>({
+    labels: [],
+    datasets: [{
+      label: 'Books Finished',
+      data: [],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly finishedBooksChartData$: Observable<FinishedBooksChartData> =
+    this.finishedBooksChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing finished books stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateFinishedBooksStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: FinishedBooksStats[]): void {
+    try {
+      const labels = stats.map(s => {
+        const [year, month] = s.yearMonth.split('-');
+        const monthName = new Date(parseInt(year), parseInt(month) - 1).toLocaleString('default', { month: 'short' });
+        return `${monthName} ${year}`;
+      });
+      const dataValues = stats.map(s => s.count);
+
+      this.finishedBooksChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books Finished',
+          data: dataValues,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  private calculateFinishedBooksStats(): FinishedBooksStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, selectedLibraryId);
+    return this.processFinishedBooksStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processFinishedBooksStats(books: Book[]): FinishedBooksStats[] {
+    const yearMonthMap = new Map<string, number>();
+
+    books.forEach(book => {
+      if (book.dateFinished) {
+        const finishedDate = new Date(book.dateFinished);
+        const yearMonth = `${finishedDate.getFullYear()}-${(finishedDate.getMonth() + 1).toString().padStart(2, '0')}`;
+        yearMonthMap.set(yearMonth, (yearMonthMap.get(yearMonth) || 0) + 1);
+      }
+    });
+
+    return Array.from(yearMonthMap.entries())
+      .filter(([yearMonth, count]) => count > 0)
+      .map(([yearMonth, count]) => ({
+        yearMonth,
+        count,
+        year: parseInt(yearMonth.split('-')[0]),
+        month: parseInt(yearMonth.split('-')[1])
+      }))
+      .sort((a, b) => a.yearMonth.localeCompare(b.yearMonth));
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const value = context.parsed.y;
+    return `${value} book${value === 1 ? '' : 's'} finished`;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/language-distribution-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/language-distribution-chart.service.ts
new file mode 100644
index 000000000..0bb4d585f
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/language-distribution-chart.service.ts
@@ -0,0 +1,284 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface LanguageStats {
+  language: string;
+  count: number;
+  percentage: number;
+}
+
+const CHART_COLORS = [
+  '#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f',
+  '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab',
+  '#17becf', '#bcbd22', '#1f77b4', '#ff7f0e', '#2ca02c'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type LanguageChartData = ChartData<'doughnut', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LanguageDistributionChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly languageChartType = 'doughnut' as const;
+
+  public readonly languageChartOptions: ChartConfiguration<'doughnut'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          padding: 12,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    },
+    cutout: '45%'
+  };
+
+  private readonly languageChartDataSubject = new BehaviorSubject<LanguageChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly languageChartData$: Observable<LanguageChartData> = this.languageChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing language stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateLanguageStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: LanguageStats[]): void {
+    try {
+      const topLanguages = stats.slice(0, 12); // Show top 12 languages
+      const labels = topLanguages.map(s => s.language);
+      const dataValues = topLanguages.map(s => s.count);
+      const colors = this.getColorsForData(topLanguages.length);
+
+      this.languageChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating language chart data:', error);
+    }
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  private calculateLanguageStats(): LanguageStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processLanguageStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processLanguageStats(books: Book[]): LanguageStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const languageMap = this.buildLanguageMap(books);
+    return this.convertMapToStats(languageMap, books.length);
+  }
+
+  private buildLanguageMap(books: Book[]): Map<string, number> {
+    const languageMap = new Map<string, number>();
+
+    for (const book of books) {
+      const language = book.metadata?.language;
+      if (language && language.trim()) {
+        const normalizedLanguage = this.normalizeLanguage(language.trim());
+        languageMap.set(normalizedLanguage, (languageMap.get(normalizedLanguage) || 0) + 1);
+      } else {
+        languageMap.set('Unknown', (languageMap.get('Unknown') || 0) + 1);
+      }
+    }
+
+    return languageMap;
+  }
+
+  private normalizeLanguage(language: string): string {
+    const languageMap: Record<string, string> = {
+      'en': 'English',
+      'eng': 'English',
+      'english': 'English',
+      'es': 'Spanish',
+      'spa': 'Spanish',
+      'spanish': 'Spanish',
+      'fr': 'French',
+      'fre': 'French',
+      'fra': 'French',
+      'french': 'French',
+      'de': 'German',
+      'ger': 'German',
+      'deu': 'German',
+      'german': 'German',
+      'it': 'Italian',
+      'ita': 'Italian',
+      'italian': 'Italian',
+      'pt': 'Portuguese',
+      'por': 'Portuguese',
+      'portuguese': 'Portuguese',
+      'ru': 'Russian',
+      'rus': 'Russian',
+      'russian': 'Russian',
+      'ja': 'Japanese',
+      'jpn': 'Japanese',
+      'japanese': 'Japanese',
+      'zh': 'Chinese',
+      'chi': 'Chinese',
+      'chinese': 'Chinese',
+      'ko': 'Korean',
+      'kor': 'Korean',
+      'korean': 'Korean',
+      'ar': 'Arabic',
+      'ara': 'Arabic',
+      'arabic': 'Arabic'
+    };
+
+    const normalized = language.toLowerCase();
+    return languageMap[normalized] || this.capitalizeFirst(language);
+  }
+
+  private capitalizeFirst(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+  }
+
+  private convertMapToStats(languageMap: Map<string, number>, totalBooks: number): LanguageStats[] {
+    return Array.from(languageMap.entries())
+      .map(([language, count]) => ({
+        language,
+        count,
+        percentage: Number(((count / totalBooks) * 100).toFixed(1))
+      }))
+      .sort((a, b) => b.count - a.count);
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+    const dataValues = dataset.data as number[];
+
+    return data.labels.map((label: string, index: number) => {
+      const isVisible = typeof chart.getDataVisibility === 'function'
+        ? chart.getDataVisibility(index)
+        : !((chart.getDatasetMeta && chart.getDatasetMeta(0)?.data?.[index]?.hidden) || false);
+
+      return {
+        text: `${label} (${dataValues[index]})`,
+        fillStyle: (dataset.backgroundColor as string[])[index],
+        strokeStyle: '#ffffff',
+        lineWidth: 1,
+        hidden: !isVisible,
+        index,
+        fontColor: '#ffffff'
+      };
+    });
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const dataset = context.dataset;
+    const value = dataset.data[dataIndex] as number;
+    const label = context.chart.data.labels?.[dataIndex] || 'Unknown';
+    const total = (dataset.data as number[]).reduce((a: number, b: number) => a + b, 0);
+    const percentage = ((value / total) * 100).toFixed(1);
+    return `${label}: ${value} books (${percentage}%)`;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/libraries-summary.service.ts b/booklore-ui/src/app/stats-component/charts-service/libraries-summary.service.ts
new file mode 100644
index 000000000..5bff9dfb4
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/libraries-summary.service.ts
@@ -0,0 +1,87 @@
+import {inject, Injectable} from '@angular/core';
+import {combineLatest, map, Observable} from 'rxjs';
+import {BookService} from '../../book/service/book.service';
+import {LibraryFilterService} from './library-filter.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LibrariesSummaryService {
+  private bookService = inject(BookService);
+  private libraryFilterService = inject(LibraryFilterService);
+
+  selectedLibrary$ = this.libraryFilterService.selectedLibrary$;
+
+  getBooksSummary(): Observable<{
+    totalBooks: number;
+    totalSizeKb: number;
+    totalAuthors: number;
+    totalSeries: number;
+    totalPublishers: number;
+  }> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.selectedLibrary$
+    ]).pipe(
+      map(([state, selectedLibraryId]) => {
+        if (!state.loaded || !state.books || state.books.length === 0) {
+          return {totalBooks: 0, totalSizeKb: 0, totalAuthors: 0, totalSeries: 0, totalPublishers: 0};
+        }
+
+        const filteredBooks = selectedLibraryId
+          ? state.books.filter(book => book.libraryId === selectedLibraryId)
+          : state.books;
+
+        const totalBooks = filteredBooks.length;
+        const totalSizeKb = filteredBooks.reduce((sum, book) => sum + (book.fileSizeKb || 0), 0);
+
+        const authorSet = new Set<string>();
+        const seriesSet = new Set<string>();
+        const publisherSet = new Set<string>();
+
+        filteredBooks.forEach(book => {
+          if (Array.isArray(book.metadata?.authors)) {
+            book.metadata.authors.forEach(a => {
+              const name = a?.trim();
+              if (name) authorSet.add(name);
+            });
+          }
+
+          const seriesName = book.metadata?.seriesName?.trim();
+          if (seriesName) seriesSet.add(seriesName);
+
+          const publisher = book.metadata?.publisher?.trim();
+          if (publisher) publisherSet.add(publisher);
+        });
+
+        return {
+          totalBooks,
+          totalSizeKb,
+          totalAuthors: authorSet.size,
+          totalSeries: seriesSet.size,
+          totalPublishers: publisherSet.size
+        };
+      })
+    );
+  }
+
+  getFormattedSize(): Observable<string> {
+    return this.getBooksSummary().pipe(
+      map(summary => this.formatSizeKb(summary.totalSizeKb))
+    );
+  }
+
+  private formatSizeKb(kb: number): string {
+    if (!kb) return '0 KB';
+    const kilo = 1024;
+    const megaKb = kilo; // 1 MB = 1024 KB
+    const gigaKb = kilo * megaKb; // 1 GB = 1024 * 1024 KB
+    if (kb >= gigaKb) {
+      return (kb / gigaKb).toFixed(2) + ' GB';
+    }
+    if (kb >= megaKb) {
+      return (kb / megaKb).toFixed(2) + ' MB';
+    }
+    return kb + ' KB';
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/library-filter.service.ts b/booklore-ui/src/app/stats-component/charts-service/library-filter.service.ts
new file mode 100644
index 000000000..37f893c47
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/library-filter.service.ts
@@ -0,0 +1,66 @@
+import {Injectable, inject} from '@angular/core';
+import {BehaviorSubject, combineLatest, map, Observable} from 'rxjs';
+import {BookService} from '../../book/service/book.service';
+import {LibraryService} from '../../book/service/library.service';
+
+export interface LibraryOption {
+  id: number | null;
+  name: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LibraryFilterService {
+  private selectedLibrarySubject = new BehaviorSubject<number | null>(null);
+
+  selectedLibrary$ = this.selectedLibrarySubject.asObservable();
+
+  getCurrentSelectedLibrary(): number | null {
+    return this.selectedLibrarySubject.value;
+  }
+
+  setSelectedLibrary(libraryId: number | null): void {
+    this.selectedLibrarySubject.next(libraryId);
+  }
+
+  private bookService = inject(BookService);
+  private libraryService = inject(LibraryService);
+
+  getLibraryOptions(): Observable<LibraryOption[]> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.libraryService.libraryState$
+    ]).pipe(
+      map(([bookState, libraryState]) => {
+        if (!bookState.loaded || !bookState.books || bookState.books.length === 0) {
+          return [{id: null, name: 'All Libraries'}];
+        }
+
+        if (!libraryState.loaded || !libraryState.libraries) {
+          return [{id: null, name: 'All Libraries'}];
+        }
+
+        const libraryMap = new Map<number, string>();
+        bookState.books.forEach(book => {
+          if (!libraryMap.has(book.libraryId)) {
+            const library = libraryState.libraries?.find(lib => lib.id === book.libraryId);
+            const libraryName = library?.name || `Library ${book.libraryId}`;
+            libraryMap.set(book.libraryId, libraryName);
+          }
+        });
+
+        const options: LibraryOption[] = [
+          {id: null, name: 'All Libraries'},
+          ...Array.from(libraryMap.entries()).map(([id, name]) => ({id, name}))
+        ];
+
+        return options.sort((a, b) => {
+          if (a.id === null) return -1;
+          if (b.id === null) return 1;
+          return a.name.localeCompare(b.name);
+        });
+      })
+    );
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/monthly-reading-patterns-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/monthly-reading-patterns-chart.service.ts
new file mode 100644
index 000000000..287f7a564
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/monthly-reading-patterns-chart.service.ts
@@ -0,0 +1,492 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+
+interface MonthlyPattern {
+  month: string;
+  booksStarted: number;
+  booksFinished: number;
+  booksAdded: number;
+  averageProgress: number;
+  totalReadingTime: number;
+  genreDiversity: number;
+}
+
+const CHART_COLORS = {
+  booksStarted: '#3498db',
+  booksFinished: '#2ecc71',
+  booksAdded: '#f39c12',
+  averageProgress: '#e74c3c',
+  genreDiversity: '#9b59b6'
+} as const;
+
+type MonthlyPatternsChartData = ChartData<'line', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MonthlyReadingPatternsChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly monthlyPatternsChartType = 'line' as const;
+
+  public readonly monthlyPatternsChartOptions: ChartConfiguration<'line'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        type: 'category',
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Month',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Book Count',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        beginAtZero: true,
+        max: 100,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          callback: function(value) {
+            return value + '%';
+          }
+        },
+        grid: {
+          drawOnChartArea: false
+        },
+        title: {
+          display: true,
+          text: 'Progress %',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top',
+        labels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          padding: 12,
+          usePointStyle: true
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'index'
+    },
+    elements: {
+      point: {
+        radius: 4,
+        hoverRadius: 6
+      },
+      line: {
+        tension: 0.3,
+        borderWidth: 2
+      }
+    }
+  };
+
+  private readonly monthlyPatternsChartDataSubject = new BehaviorSubject<MonthlyPatternsChartData>({
+    labels: [],
+    datasets: []
+  });
+
+  public readonly monthlyPatternsChartData$: Observable<MonthlyPatternsChartData> = this.monthlyPatternsChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing monthly patterns stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateMonthlyPatternsStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: MonthlyPattern[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => s.month);
+
+      const datasets = [
+        {
+          label: 'Books Started',
+          data: stats.map(s => s.booksStarted),
+          borderColor: CHART_COLORS.booksStarted,
+          backgroundColor: CHART_COLORS.booksStarted + '20',
+          yAxisID: 'y',
+          tension: 0.3,
+          fill: false,
+          pointStyle: 'circle'
+        },
+        {
+          label: 'Books Finished',
+          data: stats.map(s => s.booksFinished),
+          borderColor: CHART_COLORS.booksFinished,
+          backgroundColor: CHART_COLORS.booksFinished + '20',
+          yAxisID: 'y',
+          tension: 0.3,
+          fill: false,
+          pointStyle: 'triangle'
+        },
+        {
+          label: 'Books Added',
+          data: stats.map(s => s.booksAdded),
+          borderColor: CHART_COLORS.booksAdded,
+          backgroundColor: CHART_COLORS.booksAdded + '20',
+          yAxisID: 'y',
+          tension: 0.3,
+          fill: false,
+          pointStyle: 'rect',
+          borderDash: [3, 3]
+        },
+        {
+          label: 'Avg Progress %',
+          data: stats.map(s => s.averageProgress),
+          borderColor: CHART_COLORS.averageProgress,
+          backgroundColor: CHART_COLORS.averageProgress + '20',
+          yAxisID: 'y1',
+          tension: 0.3,
+          fill: true,
+          fillOpacity: 0.1,
+          pointStyle: 'star'
+        },
+        {
+          label: 'Genre Diversity',
+          data: stats.map(s => s.genreDiversity),
+          borderColor: CHART_COLORS.genreDiversity,
+          backgroundColor: CHART_COLORS.genreDiversity + '20',
+          yAxisID: 'y',
+          tension: 0.3,
+          fill: false,
+          pointStyle: 'cross',
+          borderDash: [5, 2, 2, 2]
+        }
+      ];
+
+      this.monthlyPatternsChartDataSubject.next({
+        labels,
+        datasets
+      });
+    } catch (error) {
+      console.error('Error updating monthly patterns chart data:', error);
+    }
+  }
+
+  private calculateMonthlyPatternsStats(): MonthlyPattern[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processMonthlyPatternsStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processMonthlyPatternsStats(books: Book[]): MonthlyPattern[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    // Generate last 12 months
+    const monthlyPatterns: MonthlyPattern[] = [];
+    const currentDate = new Date();
+
+    for (let i = 11; i >= 0; i--) {
+      const monthDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - i, 1);
+      const monthKey = this.formatMonthYear(monthDate);
+      const displayMonth = this.formatDisplayMonth(monthKey);
+
+      const pattern = this.calculateMonthlyPattern(books, monthDate, displayMonth);
+      monthlyPatterns.push(pattern);
+    }
+
+    return monthlyPatterns;
+  }
+
+  private calculateMonthlyPattern(books: Book[], monthDate: Date, displayMonth: string): MonthlyPattern {
+    const year = monthDate.getFullYear();
+    const month = monthDate.getMonth();
+    const startOfMonth = new Date(year, month, 1);
+    const endOfMonth = new Date(year, month + 1, 0, 23, 59, 59);
+
+    // Books started this month (estimated by reading status changes)
+    const booksStarted = this.getBooksStartedInMonth(books, startOfMonth, endOfMonth);
+
+    // Books finished this month
+    const booksFinished = books.filter(book => {
+      if (!book.dateFinished) return false;
+      const finishDate = new Date(book.dateFinished);
+      return finishDate >= startOfMonth && finishDate <= endOfMonth;
+    }).length;
+
+    // Books added this month
+    const booksAdded = books.filter(book => {
+      if (!book.addedOn) return false;
+      const addedDate = new Date(book.addedOn);
+      return addedDate >= startOfMonth && addedDate <= endOfMonth;
+    }).length;
+
+    // Average progress of books being read
+    const averageProgress = this.calculateAverageProgress(books, endOfMonth);
+
+    // Estimated total reading time (placeholder calculation)
+    const totalReadingTime = this.estimateMonthlyReadingTime(books, startOfMonth, endOfMonth);
+
+    // Genre diversity (unique categories being read)
+    const genreDiversity = this.calculateGenreDiversity(books, startOfMonth, endOfMonth);
+
+    return {
+      month: displayMonth,
+      booksStarted,
+      booksFinished,
+      booksAdded,
+      averageProgress,
+      totalReadingTime,
+      genreDiversity
+    };
+  }
+
+  private getBooksStartedInMonth(books: Book[], startOfMonth: Date, endOfMonth: Date): number {
+    // Estimate books started by looking at currently reading books and their last read time
+    return books.filter(book => {
+      if (book.readStatus !== ReadStatus.READING && book.readStatus !== ReadStatus.PARTIALLY_READ) {
+        return false;
+      }
+
+      if (book.lastReadTime) {
+        const lastReadDate = new Date(book.lastReadTime);
+        return lastReadDate >= startOfMonth && lastReadDate <= endOfMonth;
+      }
+
+      // Fallback: if added this month and currently reading, assume started this month
+      if (book.addedOn) {
+        const addedDate = new Date(book.addedOn);
+        return addedDate >= startOfMonth && addedDate <= endOfMonth;
+      }
+
+      return false;
+    }).length;
+  }
+
+  private calculateAverageProgress(books: Book[], asOfDate: Date): number {
+    const booksInProgress = books.filter(book =>
+      book.readStatus === ReadStatus.READING ||
+      book.readStatus === ReadStatus.PARTIALLY_READ
+    );
+
+    if (booksInProgress.length === 0) return 0;
+
+    const totalProgress = booksInProgress.reduce((sum, book) => {
+      const progress = this.getBookProgress(book);
+      return sum + progress;
+    }, 0);
+
+    return Math.round(totalProgress / booksInProgress.length);
+  }
+
+  private getBookProgress(book: Book): number {
+    const epubProgress = book.epubProgress?.percentage || 0;
+    const pdfProgress = book.pdfProgress?.percentage || 0;
+    const cbxProgress = book.cbxProgress?.percentage || 0;
+    const koreaderProgress = book.koreaderProgress?.percentage || 0;
+
+    return Math.max(epubProgress, pdfProgress, cbxProgress, koreaderProgress);
+  }
+
+  private estimateMonthlyReadingTime(books: Book[], startOfMonth: Date, endOfMonth: Date): number {
+    // Simplified estimation based on completed books and their page counts
+    const booksFinishedThisMonth = books.filter(book => {
+      if (!book.dateFinished) return false;
+      const finishDate = new Date(book.dateFinished);
+      return finishDate >= startOfMonth && finishDate <= endOfMonth;
+    });
+
+    const totalPages = booksFinishedThisMonth.reduce((sum, book) =>
+      sum + (book.metadata?.pageCount || 0), 0
+    );
+
+    // Assume 1 page per minute reading speed
+    return Math.round(totalPages);
+  }
+
+  private calculateGenreDiversity(books: Book[], startOfMonth: Date, endOfMonth: Date): number {
+    const relevantBooks = books.filter(book => {
+      // Books finished, started, or being read during this month
+      const wasFinished = book.dateFinished &&
+        new Date(book.dateFinished) >= startOfMonth &&
+        new Date(book.dateFinished) <= endOfMonth;
+
+      const isReading = book.readStatus === ReadStatus.READING ||
+        book.readStatus === ReadStatus.PARTIALLY_READ;
+
+      return wasFinished || isReading;
+    });
+
+    const uniqueGenres = new Set<string>();
+
+    relevantBooks.forEach(book => {
+      if (book.metadata?.categories) {
+        book.metadata.categories.forEach(category => {
+          uniqueGenres.add(category.toLowerCase());
+        });
+      }
+    });
+
+    return uniqueGenres.size;
+  }
+
+  private formatMonthYear(date: Date): string {
+    return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0');
+  }
+
+  private formatDisplayMonth(monthKey: string): string {
+    const [year, month] = monthKey.split('-');
+    const monthNames = [
+      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+    ];
+    return `${monthNames[parseInt(month) - 1]} ${year}`;
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const datasetLabel = context.dataset.label;
+    const value = context.parsed.y;
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${datasetLabel}: ${value}`;
+    }
+
+    const monthStats = stats[dataIndex];
+
+    switch (datasetLabel) {
+      case 'Books Started':
+        return `${value} books started | ${monthStats.genreDiversity} genres explored`;
+      case 'Books Finished':
+        return `${value} books completed | ${monthStats.totalReadingTime} est. minutes read`;
+      case 'Books Added':
+        return `${value} books added to library`;
+      case 'Avg Progress %':
+        return `${value}% average progress on current reads`;
+      case 'Genre Diversity':
+        return `${value} unique genres being read`;
+      default:
+        return `${datasetLabel}: ${value}`;
+    }
+  }
+
+  private lastCalculatedStats: MonthlyPattern[] = [];
+
+  private getLastCalculatedStats(): MonthlyPattern[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/page-count-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/page-count-chart.service.ts
new file mode 100644
index 000000000..e2817c896
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/page-count-chart.service.ts
@@ -0,0 +1,220 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface PageCountStats {
+  category: string;
+  count: number;
+  avgPages: number;
+  minPages: number;
+  maxPages: number;
+}
+
+const CHART_COLORS = [
+  '#81C784', '#4FC3F7', '#FFB74D', '#F06292', '#BA68C8'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 1,
+  hoverBorderWidth: 2,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type PageCountChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PageCountChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly pageCountChartType: ChartType = 'bar';
+
+  public readonly pageCountChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => context[0].label,
+          label: (context) => {
+            const value = context.parsed.y;
+            return `${value} book${value === 1 ? '' : 's'}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          maxRotation: 45
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.1)'},
+        title: {
+          display: true,
+          text: 'Page Count Category',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          stepSize: 1
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.05)'},
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      }
+    }
+  };
+
+  private readonly pageCountChartDataSubject = new BehaviorSubject<PageCountChartData>({
+    labels: [],
+    datasets: [{
+      label: 'Books by Page Count',
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly pageCountChartData$: Observable<PageCountChartData> =
+    this.pageCountChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing page count stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculatePageCountStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: PageCountStats[]): void {
+    try {
+      const labels = stats.map(s => s.category);
+      const dataValues = stats.map(s => s.count);
+
+      this.pageCountChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books by Page Count',
+          data: dataValues,
+          backgroundColor: [...CHART_COLORS],
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  private calculatePageCountStats(): PageCountStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, selectedLibraryId);
+    return this.processPageCountStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processPageCountStats(books: Book[]): PageCountStats[] {
+    const categories = [
+      {name: 'Short (< 200)', min: 0, max: 199},
+      {name: 'Medium (200-400)', min: 200, max: 400},
+      {name: 'Long (401-600)', min: 401, max: 600},
+      {name: 'Very Long (601-800)', min: 601, max: 800},
+      {name: 'Epic (> 800)', min: 801, max: 9999}
+    ];
+
+    return categories.map(category => {
+      const booksInCategory = books.filter(book => {
+        const pageCount = book.metadata?.pageCount;
+        return pageCount && pageCount >= category.min && pageCount <= category.max;
+      });
+
+      const pageCounts = booksInCategory
+        .map(book => book.metadata?.pageCount || 0)
+        .filter(count => count > 0);
+
+      return {
+        category: category.name,
+        count: booksInCategory.length,
+        avgPages: pageCounts.length > 0 ? Math.round(pageCounts.reduce((a, b) => a + b, 0) / pageCounts.length) : 0,
+        minPages: pageCounts.length > 0 ? Math.min(...pageCounts) : 0,
+        maxPages: pageCounts.length > 0 ? Math.max(...pageCounts) : 0
+      };
+    }).filter(stat => stat.count > 0);
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/personal-rating-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/personal-rating-chart.service.ts
new file mode 100644
index 000000000..47a93ed1d
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/personal-rating-chart.service.ts
@@ -0,0 +1,237 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+interface RatingStats {
+  ratingRange: string;
+  count: number;
+  averageRating: number;
+}
+
+const CHART_COLORS = [
+  '#DC2626', // Red (rating 1)
+  '#EA580C', // Red-orange (rating 2)
+  '#F59E0B', // Orange (rating 3)
+  '#EAB308', // Yellow-orange (rating 4)
+  '#FACC15', // Yellow (rating 5)
+  '#BEF264', // Yellow-green (rating 6)
+  '#65A30D', // Green (rating 7)
+  '#16A34A', // Green (rating 8)
+  '#059669', // Teal-green (rating 9)
+  '#2563EB'  // Blue (rating 10)
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 1,
+  hoverBorderWidth: 2,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+const RATING_RANGES = [
+  {range: '1', min: 1.0, max: 1.0},
+  {range: '2', min: 2.0, max: 2.0},
+  {range: '3', min: 3.0, max: 3.0},
+  {range: '4', min: 4.0, max: 4.0},
+  {range: '5', min: 5.0, max: 5.0},
+  {range: '6', min: 6.0, max: 6.0},
+  {range: '7', min: 7.0, max: 7.0},
+  {range: '8', min: 8.0, max: 8.0},
+  {range: '9', min: 9.0, max: 9.0},
+  {range: '10', min: 10.0, max: 10.0},
+  {range: 'No Rating', min: 0, max: 0}
+] as const;
+
+type RatingChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PersonalRatingChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly personalRatingChartType = 'bar' as const;
+
+  public readonly personalRatingChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {display: false},
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#666666',
+        borderWidth: 1,
+        callbacks: {
+          title: (context) => `Personal Rating Range: ${context[0].label}`,
+          label: (context) => {
+            const value = context.parsed.y;
+            return `${value} book${value === 1 ? '' : 's'}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.1)'},
+        title: {
+          display: true,
+          text: 'Personal Rating Range',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          stepSize: 1
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.05)'},
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      }
+    }
+  };
+
+  private readonly personalRatingChartDataSubject = new BehaviorSubject<RatingChartData>({
+    labels: [],
+    datasets: [{
+      label: 'Books by Personal Rating',
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly personalRatingChartData$: Observable<RatingChartData> =
+    this.personalRatingChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing personal rating stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculatePersonalRatingStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: RatingStats[]): void {
+    try {
+      const labels = stats.map(s => s.ratingRange);
+      const dataValues = stats.map(s => s.count);
+      const colors = stats.map((_, index) => CHART_COLORS[index % CHART_COLORS.length]);
+
+      this.personalRatingChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books by Personal Rating',
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating personal rating chart data:', error);
+    }
+  }
+
+  private calculatePersonalRatingStats(): RatingStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, selectedLibraryId);
+    return this.processPersonalRatingStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processPersonalRatingStats(books: Book[]): RatingStats[] {
+    const rangeCounts = new Map<string, { count: number, totalRating: number }>();
+    RATING_RANGES.forEach(range => rangeCounts.set(range.range, {count: 0, totalRating: 0}));
+
+    books.forEach(book => {
+      const personalRating = book.metadata?.personalRating;
+
+      if (!personalRating || personalRating === 0) {
+        const noRatingData = rangeCounts.get('No Rating')!;
+        noRatingData.count++;
+      } else {
+        for (const range of RATING_RANGES) {
+          if (range.range !== 'No Rating' && personalRating >= range.min && personalRating <= range.max) {
+            const rangeData = rangeCounts.get(range.range)!;
+            rangeData.count++;
+            rangeData.totalRating += personalRating;
+            break;
+          }
+        }
+      }
+    });
+
+    return RATING_RANGES.map(range => {
+      const data = rangeCounts.get(range.range)!;
+      return {
+        ratingRange: range.range,
+        count: data.count,
+        averageRating: data.count > 0 ? data.totalRating / data.count : 0
+      };
+    }).filter(stat => stat.ratingRange !== 'No Rating');
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/publication-year-chart-service.ts b/booklore-ui/src/app/stats-component/charts-service/publication-year-chart-service.ts
new file mode 100644
index 000000000..b2542858b
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/publication-year-chart-service.ts
@@ -0,0 +1,251 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface PublicationYearStats {
+  year: string;
+  count: number;
+  decade: string;
+}
+
+const CHART_COLORS = {
+  primary: '#4ECDC4',
+  primaryBackground: 'rgba(78, 205, 196, 0.1)',
+  border: '#ffffff'
+} as const;
+
+const CHART_DEFAULTS = {
+  borderColor: CHART_COLORS.primary,
+  backgroundColor: CHART_COLORS.primaryBackground,
+  borderWidth: 2,
+  pointBackgroundColor: CHART_COLORS.primary,
+  pointBorderColor: CHART_COLORS.border,
+  pointBorderWidth: 2,
+  pointRadius: 4,
+  pointHoverRadius: 6,
+  fill: true,
+  tension: 0.4
+} as const;
+
+type YearChartData = ChartData<'line', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PublicationYearChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly yearChartType = 'line' as const;
+
+  public readonly yearChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {display: false},
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 13},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => `Year ${context[0].label}`,
+          label: this.formatTooltipLabel.bind(this)
+        }
+      },
+      datalabels: {
+        display: true,
+        color: '#ffffff',
+        font: {
+          size: 10,
+          weight: 'bold'
+        },
+        align: 'top',
+        offset: 8,
+        formatter: (value: number) => value.toString()
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    },
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          maxRotation: 45,
+          callback: function (value, index, values) {
+            // Show every 5th year to avoid crowding
+            return index % 5 === 0 ? this.getLabelForValue(value as number) : '';
+          }
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.1)'},
+        title: {
+          display: true,
+          text: 'Publication Year',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          stepSize: 1
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.05)'},
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      }
+    }
+  };
+
+  private readonly yearChartDataSubject = new BehaviorSubject<YearChartData>({
+    labels: [],
+    datasets: [{
+      label: 'Books Published',
+      data: [],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly yearChartData$: Observable<YearChartData> =
+    this.yearChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing publication year stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculatePublicationYearStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: PublicationYearStats[]): void {
+    try {
+      const labels = stats.map(s => s.year);
+      const dataValues = stats.map(s => s.count);
+
+      this.yearChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books Published',
+          data: dataValues,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  private calculatePublicationYearStats(): PublicationYearStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, selectedLibraryId);
+    return this.processPublicationYearStats(filteredBooks);
+  }
+
+  public updateFromStats(stats: PublicationYearStats[]): void {
+    this.updateChartData(stats);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processPublicationYearStats(books: Book[]): PublicationYearStats[] {
+    const yearMap = new Map<string, number>();
+
+    books.forEach(book => {
+      if (book.metadata?.publishedDate) {
+        const year = this.extractYear(book.metadata.publishedDate);
+        if (year && year >= 1800 && year <= new Date().getFullYear()) {
+          const yearStr = year.toString();
+          yearMap.set(yearStr, (yearMap.get(yearStr) || 0) + 1);
+        }
+      }
+    });
+
+    // Only return years that have books (no 0 entries)
+    return Array.from(yearMap.entries())
+      .filter(([year, count]) => count > 0)
+      .map(([year, count]) => ({
+        year,
+        count,
+        decade: `${Math.floor(parseInt(year) / 10) * 10}s`
+      }))
+      .sort((a, b) => parseInt(a.year) - parseInt(b.year));
+  }
+
+  private extractYear(dateString: string): number | null {
+    const yearMatch = dateString.match(/(\d{4})/);
+    return yearMatch ? parseInt(yearMatch[1]) : null;
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const value = context.parsed.y;
+    return `${value} book${value === 1 ? '' : 's'} published`;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/read-status-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/read-status-chart.service.ts
new file mode 100644
index 000000000..a8d7946b5
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/read-status-chart.service.ts
@@ -0,0 +1,250 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+
+interface ReadingStatusStats {
+  status: string;
+  count: number;
+  percentage: number;
+}
+
+const CHART_COLORS = [
+  '#28a745', '#17a2b8', '#ffc107', '#6f42c1',
+  '#fd7e14', '#6c757d', '#dc3545', '#343a40', '#e9ecef'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type StatusChartData = ChartData<'doughnut', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadStatusChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly statusChartType: ChartType = 'doughnut';
+
+  public readonly statusChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          padding: 15,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 13},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    }
+  };
+
+  private readonly statusChartDataSubject = new BehaviorSubject<StatusChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly statusChartData$: Observable<StatusChartData> = this.statusChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing reading status stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateReadingStatusStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: ReadingStatusStats[]): void {
+    try {
+      const labels = stats.map(s => s.status);
+      const dataValues = stats.map(s => s.count);
+      const colors = this.getColorsForData(stats.length);
+
+      this.statusChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  private calculateReadingStatusStats(): ReadingStatusStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processReadingStatusStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processReadingStatusStats(books: Book[]): ReadingStatusStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const statusMap = this.buildStatusMap(books);
+    return this.convertMapToStats(statusMap, books.length);
+  }
+
+  private buildStatusMap(books: Book[]): Map<ReadStatus, number> {
+    const statusMap = new Map<ReadStatus, number>();
+
+    for (const book of books) {
+      const rawStatus = book.readStatus;
+      const status: ReadStatus = Object.values(ReadStatus).includes(rawStatus as ReadStatus)
+        ? (rawStatus as ReadStatus)
+        : ReadStatus.UNSET;
+
+      statusMap.set(status, (statusMap.get(status) || 0) + 1);
+    }
+
+    return statusMap;
+  }
+
+  private convertMapToStats(statusMap: Map<ReadStatus, number>, totalBooks: number): ReadingStatusStats[] {
+    return Array.from(statusMap.entries())
+      .map(([status, count]) => ({
+        status: this.formatReadStatus(status),
+        count,
+        percentage: Number(((count / totalBooks) * 100).toFixed(1))
+      }))
+      .sort((a, b) => b.count - a.count);
+  }
+
+  private formatReadStatus(status: ReadStatus | null | undefined): string {
+    const STATUS_MAPPING: Record<string, string> = {
+      [ReadStatus.UNREAD]: 'Unread',
+      [ReadStatus.READING]: 'Currently Reading',
+      [ReadStatus.RE_READING]: 'Re-reading',
+      [ReadStatus.READ]: 'Read',
+      [ReadStatus.PARTIALLY_READ]: 'Partially Read',
+      [ReadStatus.PAUSED]: 'Paused',
+      [ReadStatus.WONT_READ]: "Won't Read",
+      [ReadStatus.ABANDONED]: 'Abandoned',
+      [ReadStatus.UNSET]: 'No Status'
+    };
+
+    if (!status) return 'No Status';
+    return STATUS_MAPPING[status] ?? 'No Status';
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+    const dataValues = dataset.data as number[];
+
+    return data.labels.map((label: string, index: number) => {
+      const isVisible = typeof chart.getDataVisibility === 'function'
+        ? chart.getDataVisibility(index)
+        : !((chart.getDatasetMeta && chart.getDatasetMeta(0)?.data?.[index]?.hidden) || false);
+
+      return {
+        text: `${label} (${dataValues[index]})`,
+        fillStyle: (dataset.backgroundColor as string[])[index],
+        strokeStyle: '#ffffff',
+        lineWidth: 1,
+        hidden: !isVisible,
+        index,
+        fontColor: '#ffffff'
+      };
+    });
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const dataset = context.dataset;
+    const value = dataset.data[dataIndex] as number;
+    const label = context.chart.data.labels?.[dataIndex] || 'Unknown';
+    const total = (dataset.data as number[]).reduce((a: number, b: number) => a + b, 0);
+    const percentage = ((value / total) * 100).toFixed(1);
+    return `${label}: ${value} books (${percentage}%)`;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/reading-completion-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/reading-completion-chart.service.ts
new file mode 100644
index 000000000..9821c399e
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/reading-completion-chart.service.ts
@@ -0,0 +1,290 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {catchError, filter, first, map, switchMap, takeUntil} from 'rxjs/operators';
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+interface CompletionStats {
+  category: string;
+  readStatusCounts: Record<ReadStatus, number>;
+  total: number;
+}
+
+const READ_STATUS_COLORS: Record<ReadStatus, string> = {
+  [ReadStatus.READ]: '#2ecc71',
+  [ReadStatus.READING]: '#f39c12',
+  [ReadStatus.RE_READING]: '#9b59b6',
+  [ReadStatus.PARTIALLY_READ]: '#e67e22',
+  [ReadStatus.PAUSED]: '#34495e',
+  [ReadStatus.UNREAD]: '#4169e1',
+  [ReadStatus.WONT_READ]: '#95a5a6',
+  [ReadStatus.ABANDONED]: '#e74c3c',
+  [ReadStatus.UNSET]: '#3498db'
+};
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  hoverBorderWidth: 1,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type CompletionChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadingCompletionChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly completionChartType = 'bar' as const;
+
+  public readonly completionChartOptions: ChartConfiguration<'bar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        stacked: true,
+        ticks: {
+          color: '#ffffff',
+          font: {size: 10},
+          maxRotation: 45,
+          minRotation: 0
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Categories',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+        }
+      },
+      y: {
+        stacked: true,
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          stepSize: 1,
+          maxTicksLimit: 25
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.05)'
+        },
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top',
+        labels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 10
+          },
+          padding: 15,
+          boxWidth: 12
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => {
+            const dataIndex = context[0].dataIndex;
+            const stats = this.getLastCalculatedStats();
+            return stats[dataIndex]?.category || 'Unknown Category';
+          },
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'index'
+    }
+  };
+
+  private readonly completionChartDataSubject = new BehaviorSubject<CompletionChartData>({
+    labels: [],
+    datasets: Object.values(ReadStatus).map(status => ({
+      label: this.formatReadStatusLabel(status),
+      data: [],
+      backgroundColor: READ_STATUS_COLORS[status],
+      ...CHART_DEFAULTS
+    }))
+  });
+
+  public readonly completionChartData$: Observable<CompletionChartData> =
+    this.completionChartDataSubject.asObservable();
+
+  private lastCalculatedStats: CompletionStats[] = [];
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing completion stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateCompletionStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: CompletionStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const topCategories = stats
+        .sort((a, b) => b.total - a.total)
+        .slice(0, 25);
+
+      const labels = topCategories.map(s => {
+        return s.category.length > 20
+          ? s.category.substring(0, 15) + '..'
+          : s.category;
+      });
+
+      const datasets = Object.values(ReadStatus).map(status => ({
+        label: this.formatReadStatusLabel(status),
+        data: topCategories.map(s => s.readStatusCounts[status] || 0),
+        backgroundColor: READ_STATUS_COLORS[status],
+        ...CHART_DEFAULTS
+      }));
+
+      this.completionChartDataSubject.next({
+        labels,
+        datasets
+      });
+    } catch (error) {
+      console.error('Error updating completion chart data:', error);
+    }
+  }
+
+  private calculateCompletionStats(): CompletionStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, selectedLibraryId);
+    return this.processCompletionStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processCompletionStats(books: Book[]): CompletionStats[] {
+    const categoryMap = new Map<string, {
+      readStatusCounts: Record<ReadStatus, number>;
+    }>();
+
+    books.forEach(book => {
+      const categories = book.metadata?.categories || ['Uncategorized'];
+
+      categories.forEach(category => {
+        if (!categoryMap.has(category)) {
+          categoryMap.set(category, {
+            readStatusCounts: Object.values(ReadStatus).reduce((acc, status) => {
+              acc[status] = 0;
+              return acc;
+            }, {} as Record<ReadStatus, number>)
+          });
+        }
+
+        const stats = categoryMap.get(category)!;
+        const rawStatus = book.readStatus;
+        const readStatus: ReadStatus = Object.values(ReadStatus).includes(rawStatus as ReadStatus)
+          ? (rawStatus as ReadStatus)
+          : ReadStatus.UNSET;
+        stats.readStatusCounts[readStatus]++;
+      });
+    });
+
+    return Array.from(categoryMap.entries()).map(([category, stats]) => {
+      const total = Object.values(stats.readStatusCounts).reduce((sum, count) => sum + count, 0);
+      return {
+        category,
+        readStatusCounts: stats.readStatusCounts,
+        total
+      };
+    }).filter(stat => stat.total > 0);
+  }
+
+  private formatReadStatusLabel(status: ReadStatus): string {
+    return status.split('_').map(word =>
+      word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+    ).join(' ');
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${context.parsed.y} books`;
+    }
+
+    const category = stats[dataIndex];
+    const value = context.parsed.y;
+    const datasetLabel = context.dataset.label;
+
+    return `${datasetLabel}: ${value}`;
+  }
+
+  private getLastCalculatedStats(): CompletionStats[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/reading-dna-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/reading-dna-chart.service.ts
new file mode 100644
index 000000000..65bf9924b
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/reading-dna-chart.service.ts
@@ -0,0 +1,573 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject, of} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+
+interface ReadingDNAProfile {
+  adventurous: number; // Genre diversity and experimental reading
+  perfectionist: number; // Completion rate and quality focus
+  intellectual: number; // Non-fiction preference and complex books
+  emotional: number; // Fiction preference and rating engagement
+  patient: number; // Long book preference and series completion
+  social: number; // Popular books and mainstream choices
+  nostalgic: number; // Older books and classic literature
+  ambitious: number; // Reading volume and challenging material
+}
+
+interface PersonalityInsight {
+  trait: string;
+  score: number;
+  description: string;
+  color: string;
+}
+
+type ReadingDNAChartData = ChartData<'radar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadingDNAChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly readingDNAChartType = 'radar' as const;
+
+  public readonly readingDNAChartOptions: ChartConfiguration<'radar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      r: {
+        beginAtZero: true,
+        min: 0,
+        max: 100,
+        ticks: {
+          stepSize: 20,
+          color: 'rgba(255, 255, 255, 0.6)',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 12
+          },
+          backdropColor: 'transparent',
+          showLabelBackdrop: false
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.2)',
+          circular: true
+        },
+        angleLines: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        },
+        pointLabels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 12
+          },
+          padding: 25,
+          callback: function (label: string) {
+            const icons: Record<string, string> = {
+              'Adventurous': '🌟',
+              'Perfectionist': '💎',
+              'Intellectual': '🧠',
+              'Emotional': '💖',
+              'Patient': '🕰️',
+              'Social': '👥',
+              'Nostalgic': '📚',
+              'Ambitious': '🚀'
+            };
+            return [icons[label] || '', label];
+          }
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.95)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#4fc3f7',
+        borderWidth: 2,
+        cornerRadius: 8,
+        padding: 16,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => {
+            const label = context[0]?.label || '';
+            return `${label} Personality`;
+          },
+          label: (context) => {
+            const score = context.parsed.r;
+            const insights = this.getPersonalityInsights();
+            const insight = insights.find(i => i.trait === context.label);
+
+            return [
+              `Score: ${score.toFixed(1)}/100`,
+              '',
+              insight ? insight.description : 'Your reading personality trait'
+            ];
+          }
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    },
+    elements: {
+      line: {
+        borderWidth: 3,
+        tension: 0.1
+      },
+      point: {
+        radius: 5,
+        hoverRadius: 8,
+        borderWidth: 3,
+        backgroundColor: 'rgba(255, 255, 255, 0.8)'
+      }
+    }
+  };
+
+  private readonly readingDNAChartDataSubject = new BehaviorSubject<ReadingDNAChartData>({
+    labels: [
+      'Adventurous', 'Perfectionist', 'Intellectual', 'Emotional',
+      'Patient', 'Social', 'Nostalgic', 'Ambitious'
+    ],
+    datasets: []
+  });
+
+  public readonly readingDNAChartData$: Observable<ReadingDNAChartData> = this.readingDNAChartDataSubject.asObservable();
+  private lastCalculatedInsights: PersonalityInsight[] = [];
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing reading DNA data:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const profile = this.calculateReadingDNAData();
+        this.updateChartData(profile);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(profile: ReadingDNAProfile | null): void {
+    try {
+      if (!profile) {
+        this.readingDNAChartDataSubject.next({
+          labels: [],
+          datasets: []
+        });
+        return;
+      }
+
+      const data = [
+        profile.adventurous,
+        profile.perfectionist,
+        profile.intellectual,
+        profile.emotional,
+        profile.patient,
+        profile.social,
+        profile.nostalgic,
+        profile.ambitious
+      ];
+
+      // Create gradient effect colors
+      const gradientColors = [
+        '#ff6b9d', '#45aaf2', '#96f7d2', '#feca57',
+        '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3'
+      ];
+
+      this.readingDNAChartDataSubject.next({
+        labels: [
+          'Adventurous', 'Perfectionist', 'Intellectual', 'Emotional',
+          'Patient', 'Social', 'Nostalgic', 'Ambitious'
+        ],
+        datasets: [{
+          label: 'Reading DNA Profile',
+          data,
+          backgroundColor: 'rgba(79, 195, 247, 0.2)',
+          borderColor: '#4fc3f7',
+          borderWidth: 3,
+          pointBackgroundColor: gradientColors,
+          pointBorderColor: '#ffffff',
+          pointBorderWidth: 3,
+          pointRadius: 5,
+          pointHoverRadius: 8,
+          fill: true
+        }]
+      });
+
+      // Store insights for tooltip
+      this.lastCalculatedInsights = this.convertToPersonalityInsights(profile);
+    } catch (error) {
+      console.error('Error updating reading DNA chart data:', error);
+    }
+  }
+
+  private calculateReadingDNAData(): ReadingDNAProfile | null {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return null;
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.analyzeReadingDNA(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private analyzeReadingDNA(books: Book[]): ReadingDNAProfile {
+    if (books.length === 0) {
+      return this.getDefaultProfile();
+    }
+
+    return {
+      adventurous: this.calculateAdventurousScore(books),
+      perfectionist: this.calculatePerfectionistScore(books),
+      intellectual: this.calculateIntellectualScore(books),
+      emotional: this.calculateEmotionalScore(books),
+      patient: this.calculatePatienceScore(books),
+      social: this.calculateSocialScore(books),
+      nostalgic: this.calculateNostalgicScore(books),
+      ambitious: this.calculateAmbitiousScore(books)
+    };
+  }
+
+  private calculateAdventurousScore(books: Book[]): number {
+    // Genre diversity + experimental choices + different formats
+    const genres = new Set<string>();
+    const languages = new Set<string>();
+    const formats = new Set<string>();
+
+    books.forEach(book => {
+      book.metadata?.categories?.forEach(cat => genres.add(cat.toLowerCase()));
+      if (book.metadata?.language) languages.add(book.metadata.language);
+      formats.add(book.bookType);
+    });
+
+    const genreScore = Math.min(60, genres.size * 4); // Max 60 for 15+ genres
+    const languageScore = Math.min(20, languages.size * 10); // Max 20 for 2+ languages
+    const formatScore = Math.min(20, formats.size * 7); // Max 20 for 3+ formats
+
+    return genreScore + languageScore + formatScore;
+  }
+
+  private calculatePerfectionistScore(books: Book[]): number {
+    const completedBooks = books.filter(b => b.readStatus === ReadStatus.READ);
+    const completionRate = completedBooks.length / books.length;
+
+    // High-quality book preference
+    const qualityBooks = books.filter(book => {
+      const metadata = book.metadata;
+      if (!metadata) return false;
+      return (metadata.goodreadsRating && metadata.goodreadsRating >= 4.0) ||
+        (metadata.amazonRating && metadata.amazonRating >= 4.0) ||
+        (metadata.personalRating && metadata.personalRating >= 4);
+    });
+
+    const qualityRate = qualityBooks.length / books.length;
+    const completionScore = completionRate * 60; // Max 60
+    const qualityScore = qualityRate * 40; // Max 40
+
+    return Math.min(100, completionScore + qualityScore);
+  }
+
+  private calculateIntellectualScore(books: Book[]): number {
+    const intellectualGenres = [
+      'philosophy', 'science', 'history', 'biography', 'politics',
+      'psychology', 'sociology', 'economics', 'technology', 'mathematics',
+      'physics', 'chemistry', 'medicine', 'law', 'education',
+      'anthropology', 'archaeology', 'astronomy', 'biology', 'geology',
+      'linguistics', 'neuroscience', 'quantum physics', 'engineering',
+      'computer science', 'artificial intelligence', 'data science',
+      'research', 'academic', 'scholarly', 'theoretical', 'scientific',
+      'analytical', 'critical thinking', 'logic', 'rhetoric',
+      'cultural studies', 'international relations', 'diplomacy',
+      'public policy', 'governance', 'constitutional law', 'ethics',
+      'moral philosophy', 'epistemology', 'metaphysics', 'theology',
+      'religious studies', 'comparative religion', 'apologetics'
+    ];
+
+    const intellectualBooks = books.filter(book => {
+      if (!book.metadata?.categories) return false;
+      return book.metadata.categories.some(cat =>
+        intellectualGenres.some(genre => cat.toLowerCase().includes(genre))
+      );
+    });
+
+    // Long books indicate patience for complex material
+    const longBooks = books.filter(book =>
+      book.metadata?.pageCount && book.metadata.pageCount > 400
+    );
+
+    const intellectualRate = intellectualBooks.length / books.length;
+    const longBookRate = longBooks.length / books.length;
+
+    return Math.min(100, (intellectualRate * 70) + (longBookRate * 30));
+  }
+
+  private calculateEmotionalScore(books: Book[]): number {
+    const emotionalGenres = [
+      'fiction', 'romance', 'drama', 'literary', 'contemporary',
+      'memoir', 'poetry', 'young adult', 'coming of age', 'family',
+      'love story', 'relationships', 'emotional', 'heartbreak',
+      'healing', 'self-help', 'personal development', 'inspirational',
+      'motivational', 'spiritual', 'mindfulness', 'meditation',
+      'grief', 'loss', 'trauma', 'recovery', 'therapy',
+      'women\'s fiction', 'chick lit', 'new adult', 'teen',
+      'childhood', 'parenting', 'motherhood', 'fatherhood',
+      'friendship', 'betrayal', 'forgiveness', 'redemption',
+      'slice of life', 'domestic fiction', 'family saga',
+      'generational saga', 'multicultural', 'immigrant stories',
+      'lgbtq+', 'queer fiction', 'feminist', 'gender studies',
+      'social issues', 'mental health', 'addiction', 'wellness',
+      'autobiography', 'personal narrative', 'diary', 'journal'
+    ];
+
+    const emotionalBooks = books.filter(book => {
+      if (!book.metadata?.categories) return false;
+      return book.metadata.categories.some(cat =>
+        emotionalGenres.some(genre => cat.toLowerCase().includes(genre))
+      );
+    });
+
+    // Personal rating engagement shows emotional connection
+    const personallyRatedBooks = books.filter(book => book.metadata?.personalRating);
+
+    const emotionalRate = emotionalBooks.length / books.length;
+    const ratingEngagement = personallyRatedBooks.length / books.length;
+
+    return Math.min(100, (emotionalRate * 60) + (ratingEngagement * 40));
+  }
+
+  private calculatePatienceScore(books: Book[]): number {
+    // Long books + series completion + slow reading pace
+    const longBooks = books.filter(book =>
+      book.metadata?.pageCount && book.metadata.pageCount > 500
+    );
+
+    const seriesBooks = books.filter(book =>
+      book.metadata?.seriesName && book.metadata?.seriesNumber
+    );
+
+    // Books with high progress indicate patience to work through them
+    const progressBooks = books.filter(book => {
+      const progress = Math.max(
+        book.epubProgress?.percentage || 0,
+        book.pdfProgress?.percentage || 0,
+        book.cbxProgress?.percentage || 0,
+        book.koreaderProgress?.percentage || 0
+      );
+      return progress > 50;
+    });
+
+    const longBookRate = longBooks.length / books.length;
+    const seriesRate = seriesBooks.length / books.length;
+    const progressRate = progressBooks.length / books.length;
+
+    return Math.min(100, (longBookRate * 40) + (seriesRate * 35) + (progressRate * 25));
+  }
+
+  private calculateSocialScore(books: Book[]): number {
+    // Popular books (high ratings, many reviews) + mainstream genres
+    const popularBooks = books.filter(book => {
+      const metadata = book.metadata;
+      if (!metadata) return false;
+      return (metadata.goodreadsReviewCount && metadata.goodreadsReviewCount > 1000) ||
+        (metadata.amazonReviewCount && metadata.amazonReviewCount > 500);
+    });
+
+    const mainstreamGenres = [
+      'thriller', 'mystery', 'romance', 'fantasy', 'science fiction',
+      'horror', 'adventure', 'bestseller', 'contemporary', 'popular',
+      'crime', 'detective', 'suspense', 'action', 'espionage',
+      'spy', 'police procedural', 'cozy mystery', 'psychological thriller',
+      'domestic thriller', 'legal thriller', 'medical thriller',
+      'urban fantasy', 'paranormal', 'supernatural', 'magic',
+      'dystopian', 'post-apocalyptic', 'cyberpunk', 'space opera',
+      'military science fiction', 'hard science fiction', 'steampunk',
+      'alternate history', 'time travel', 'vampire', 'werewolf',
+      'zombie', 'ghost', 'gothic', 'dark fantasy', 'epic fantasy',
+      'sword and sorcery', 'high fantasy', 'historical romance',
+      'regency romance', 'western', 'sports', 'celebrity',
+      'entertainment', 'pop culture', 'reality tv', 'social media',
+      'true crime', 'celebrity biography', 'gossip', 'lifestyle',
+      'fashion', 'beauty', 'cooking', 'travel', 'humor',
+      'comedy', 'satire', 'graphic novel', 'manga', 'comic'
+    ];
+
+    const mainstreamBooks = books.filter(book => {
+      if (!book.metadata?.categories) return false;
+      return book.metadata.categories.some(cat =>
+        mainstreamGenres.some(genre => cat.toLowerCase().includes(genre))
+      );
+    });
+
+    const popularRate = popularBooks.length / books.length;
+    const mainstreamRate = mainstreamBooks.length / books.length;
+
+    return Math.min(100, (popularRate * 50) + (mainstreamRate * 50));
+  }
+
+  private calculateNostalgicScore(books: Book[]): number {
+    const currentYear = new Date().getFullYear();
+    const classicThreshold = currentYear - 30; // Books older than 30 years
+
+    const oldBooks = books.filter(book => {
+      if (!book.metadata?.publishedDate) return false;
+      const pubYear = new Date(book.metadata.publishedDate).getFullYear();
+      return pubYear < classicThreshold;
+    });
+
+    const classicGenres = [
+      'classic', 'literature', 'historical', 'vintage', 'traditional',
+      'heritage', 'timeless', 'canonical', 'masterpiece', 'landmark',
+      'seminal', 'influential', 'groundbreaking', 'pioneering',
+      'classical literature', 'world literature', 'nobel prize',
+      'pulitzer prize', 'booker prize', 'national book award',
+      'literary fiction', 'modernist', 'post-modernist', 'realist',
+      'naturalist', 'romantic', 'victorian', 'edwardian',
+      'renaissance', 'enlightenment', 'ancient', 'medieval',
+      'colonial', 'antebellum', 'gilded age', 'jazz age',
+      'lost generation', 'beat generation', 'harlem renaissance',
+      'golden age', 'silver age', 'folk tales', 'fairy tales',
+      'mythology', 'legends', 'folklore', 'oral tradition',
+      'epic poetry', 'sonnets', 'ballads', 'odes',
+      'dramatic works', 'shakespearean', 'greek tragedy',
+      'roman literature', 'biblical', 'religious classics',
+      'philosophical classics', 'historical classics'
+    ];
+
+    const oldBookRate = oldBooks.length / books.length;
+    const classicRate = classicGenres.length / books.length;
+
+    return Math.min(100, (oldBookRate * 60) + (classicRate * 40));
+  }
+
+  private calculateAmbitiousScore(books: Book[]): number {
+    // Volume + challenging material + completion of difficult books
+    const totalBooks = books.length;
+    const volumeScore = Math.min(40, totalBooks * 2); // Max 40 for 20+ books
+
+    const challengingBooks = books.filter(book =>
+      book.metadata?.pageCount && book.metadata.pageCount > 600
+    );
+
+    const completedChallenging = challengingBooks.filter(book =>
+      book.readStatus === ReadStatus.READ
+    );
+
+    const challengingRate = challengingBooks.length / books.length;
+    const completionRate = challengingBooks.length > 0 ?
+      completedChallenging.length / challengingBooks.length : 0;
+
+    const challengingScore = challengingRate * 35; // Max 35
+    const completionBonus = completionRate * 25; // Max 25
+
+    return Math.min(100, volumeScore + challengingScore + completionBonus);
+  }
+
+  private getDefaultProfile(): ReadingDNAProfile {
+    return {
+      adventurous: 50,
+      perfectionist: 50,
+      intellectual: 50,
+      emotional: 50,
+      patient: 50,
+      social: 50,
+      nostalgic: 50,
+      ambitious: 50
+    };
+  }
+
+  private convertToPersonalityInsights(profile: ReadingDNAProfile): PersonalityInsight[] {
+    return [
+      {
+        trait: 'Adventurous',
+        score: profile.adventurous,
+        description: 'You explore diverse genres and experimental content',
+        color: '#ff6b9d'
+      },
+      {
+        trait: 'Perfectionist',
+        score: profile.perfectionist,
+        description: 'You prefer high-quality books and finish what you start',
+        color: '#45aaf2'
+      },
+      {
+        trait: 'Intellectual',
+        score: profile.intellectual,
+        description: 'You gravitate toward complex, educational material',
+        color: '#96f7d2'
+      },
+      {
+        trait: 'Emotional',
+        score: profile.emotional,
+        description: 'You connect emotionally with fiction and personal stories',
+        color: '#feca57'
+      },
+      {
+        trait: 'Patient',
+        score: profile.patient,
+        description: 'You tackle long books and complete series',
+        color: '#ff9ff3'
+      },
+      {
+        trait: 'Social',
+        score: profile.social,
+        description: 'You enjoy popular, widely-discussed books',
+        color: '#54a0ff'
+      },
+      {
+        trait: 'Nostalgic',
+        score: profile.nostalgic,
+        description: 'You appreciate classic literature and older works',
+        color: '#5f27cd'
+      },
+      {
+        trait: 'Ambitious',
+        score: profile.ambitious,
+        description: 'You challenge yourself with volume and difficulty',
+        color: '#00d2d3'
+      }
+    ];
+  }
+
+  public getPersonalityInsights(): PersonalityInsight[] {
+    return this.lastCalculatedInsights;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/reading-habits-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/reading-habits-chart.service.ts
new file mode 100644
index 000000000..f451ea7e5
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/reading-habits-chart.service.ts
@@ -0,0 +1,611 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject, of} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+
+interface ReadingHabitsProfile {
+  consistency: number; // Regular reading patterns vs sporadic
+  multitasking: number; // Multiple books at once
+  completionism: number; // Finishing vs abandoning books
+  exploration: number; // Trying new vs sticking to familiar
+  organization: number; // Series order, metadata attention
+  intensity: number; // Reading session length preferences
+  methodology: number; // Systematic vs random book selection
+  momentum: number; // Reading streaks and continuity
+}
+
+interface HabitInsight {
+  habit: string;
+  score: number;
+  description: string;
+  color: string;
+}
+
+type ReadingHabitsChartData = ChartData<'radar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadingHabitsChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly readingHabitsChartType = 'radar' as const;
+
+  public readonly readingHabitsChartOptions: ChartConfiguration<'radar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      r: {
+        beginAtZero: true,
+        min: 0,
+        max: 100,
+        ticks: {
+          stepSize: 20,
+          color: 'rgba(255, 255, 255, 0.6)',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 12
+          },
+          backdropColor: 'transparent',
+          showLabelBackdrop: false
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.2)',
+          circular: true
+        },
+        angleLines: {
+          color: 'rgba(255, 255, 255, 0.3)'
+        },
+        pointLabels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 12
+          },
+          padding: 25,
+          callback: function (label: string) {
+            const icons: Record<string, string> = {
+              'Consistency': '📅',
+              'Multitasking': '📚',
+              'Completionism': '✅',
+              'Exploration': '🔍',
+              'Organization': '📋',
+              'Intensity': '⚡',
+              'Methodology': '🎯',
+              'Momentum': '🔥'
+            };
+            return [icons[label] || '', label];
+          }
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.95)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#9c27b0',
+        borderWidth: 2,
+        cornerRadius: 8,
+        padding: 16,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => {
+            const label = context[0]?.label || '';
+            return `${label} Habit`;
+          },
+          label: (context) => {
+            const score = context.parsed.r;
+            const insights = this.getHabitInsights();
+            const insight = insights.find(i => i.habit === context.label);
+
+            return [
+              `Score: ${score.toFixed(1)}/100`,
+              '',
+              insight ? insight.description : 'Your reading habit pattern'
+            ];
+          }
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    },
+    elements: {
+      line: {
+        borderWidth: 3,
+        tension: 0.1
+      },
+      point: {
+        radius: 5,
+        hoverRadius: 8,
+        borderWidth: 3,
+        backgroundColor: 'rgba(255, 255, 255, 0.8)'
+      }
+    }
+  };
+
+  private readonly readingHabitsChartDataSubject = new BehaviorSubject<ReadingHabitsChartData>({
+    labels: [
+      'Consistency', 'Multitasking', 'Completionism', 'Exploration',
+      'Organization', 'Intensity', 'Methodology', 'Momentum'
+    ],
+    datasets: []
+  });
+
+  public readonly readingHabitsChartData$: Observable<ReadingHabitsChartData> = this.readingHabitsChartDataSubject.asObservable();
+  private lastCalculatedInsights: HabitInsight[] = [];
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing reading habits data:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const profile = this.calculateReadingHabitsData();
+        this.updateChartData(profile);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(profile: ReadingHabitsProfile | null): void {
+    try {
+      if (!profile) {
+        this.readingHabitsChartDataSubject.next({
+          labels: [],
+          datasets: []
+        });
+        return;
+      }
+
+      const data = [
+        profile.consistency,
+        profile.multitasking,
+        profile.completionism,
+        profile.exploration,
+        profile.organization,
+        profile.intensity,
+        profile.methodology,
+        profile.momentum
+      ];
+
+      // Purple gradient colors for habits theme
+      const habitColors = [
+        '#9c27b0', '#e91e63', '#ff5722', '#ff9800',
+        '#ffc107', '#4caf50', '#2196f3', '#673ab7'
+      ];
+
+      this.readingHabitsChartDataSubject.next({
+        labels: [
+          'Consistency', 'Multitasking', 'Completionism', 'Exploration',
+          'Organization', 'Intensity', 'Methodology', 'Momentum'
+        ],
+        datasets: [{
+          label: 'Reading Habits Profile',
+          data,
+          backgroundColor: 'rgba(156, 39, 176, 0.2)',
+          borderColor: '#9c27b0',
+          borderWidth: 3,
+          pointBackgroundColor: habitColors,
+          pointBorderColor: '#ffffff',
+          pointBorderWidth: 3,
+          pointRadius: 5,
+          pointHoverRadius: 8,
+          fill: true
+        }]
+      });
+
+      // Store insights for tooltip
+      this.lastCalculatedInsights = this.convertToHabitInsights(profile);
+    } catch (error) {
+      console.error('Error updating reading habits chart data:', error);
+    }
+  }
+
+  private calculateReadingHabitsData(): ReadingHabitsProfile | null {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return null;
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.analyzeReadingHabits(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private analyzeReadingHabits(books: Book[]): ReadingHabitsProfile {
+    if (books.length === 0) {
+      return this.getDefaultProfile();
+    }
+
+    return {
+      consistency: this.calculateConsistencyScore(books),
+      multitasking: this.calculateMultitaskingScore(books),
+      completionism: this.calculateCompletionismScore(books),
+      exploration: this.calculateExplorationScore(books),
+      organization: this.calculateOrganizationScore(books),
+      intensity: this.calculateIntensityScore(books),
+      methodology: this.calculateMethodologyScore(books),
+      momentum: this.calculateMomentumScore(books)
+    };
+  }
+
+  private calculateConsistencyScore(books: Book[]): number {
+    // Look for consistent reading patterns through completion dates and progress
+    const booksWithDates = books.filter(book => book.dateFinished || book.addedOn);
+    if (booksWithDates.length === 0) return 30;
+
+    // Books completed in sequence suggest consistent reading habits
+    const completedBooks = books.filter(book => book.readStatus === ReadStatus.READ && book.dateFinished);
+    if (completedBooks.length < 2) return 25;
+
+    // Calculate time intervals between completed books
+    const sortedByCompletion = completedBooks
+      .sort((a, b) => new Date(a.dateFinished!).getTime() - new Date(b.dateFinished!).getTime());
+
+    let consistencyScore = 50;
+
+    // Books in progress suggest active reading habit
+    const inProgress = books.filter(book =>
+      book.readStatus === ReadStatus.READING || book.readStatus === ReadStatus.RE_READING
+    );
+    const progressRate = inProgress.length / books.length;
+    consistencyScore += progressRate * 30;
+
+    // Regular completion pattern
+    if (sortedByCompletion.length >= 3) {
+      consistencyScore += 20;
+    }
+
+    return Math.min(100, consistencyScore);
+  }
+
+  private calculateMultitaskingScore(books: Book[]): number {
+    // Multiple books in reading status indicates multitasking
+    const currentlyReading = books.filter(book => book.readStatus === ReadStatus.READING);
+    const reReading = books.filter(book => book.readStatus === ReadStatus.RE_READING);
+    const activeBooks = currentlyReading.length + reReading.length;
+
+    // Books with partial progress suggest juggling multiple reads
+    const booksWithProgress = books.filter(book => {
+      const progress = Math.max(
+        book.epubProgress?.percentage || 0,
+        book.pdfProgress?.percentage || 0,
+        book.cbxProgress?.percentage || 0,
+        book.koreaderProgress?.percentage || 0
+      );
+      return progress > 0 && progress < 100;
+    });
+
+    const multitaskingScore = Math.min(60, activeBooks * 15); // Max 60 for 4+ concurrent books
+    const progressScore = Math.min(40, (booksWithProgress.length / books.length) * 80); // Max 40
+
+    return Math.min(100, multitaskingScore + progressScore);
+  }
+
+  private calculateCompletionismScore(books: Book[]): number {
+    // High completion rate vs abandonment
+    const completed = books.filter(book => book.readStatus === ReadStatus.READ);
+    const abandoned = books.filter(book => book.readStatus === ReadStatus.ABANDONED);
+    const unfinished = books.filter(book => book.readStatus === ReadStatus.UNREAD || book.readStatus === ReadStatus.UNSET);
+
+    const completionRate = completed.length / (books.length - unfinished.length);
+    const abandonmentRate = abandoned.length / books.length;
+
+    const completionScore = completionRate * 70; // Max 70
+    const abandonmentPenalty = abandonmentRate * 30; // Max 30 penalty
+
+    return Math.max(0, Math.min(100, completionScore - abandonmentPenalty + 30));
+  }
+
+  private calculateExplorationScore(books: Book[]): number {
+    // Trying new authors vs sticking to favorites
+    const authors = new Set<string>();
+    const authorCounts = new Map<string, number>();
+
+    books.forEach(book => {
+      book.metadata?.authors?.forEach(author => {
+        const authorName = author.toLowerCase();
+        authors.add(authorName);
+        authorCounts.set(authorName, (authorCounts.get(authorName) || 0) + 1);
+      });
+    });
+
+    // Calculate author diversity
+    const authorDiversityScore = Math.min(50, authors.size * 2); // Max 50
+
+    // Penalty for too many books by same author (indicates less exploration)
+    const maxBooksPerAuthor = Math.max(...Array.from(authorCounts.values()));
+    const concentrationPenalty = Math.max(0, (maxBooksPerAuthor - 3) * 5); // Penalty after 3 books per author
+
+    // Different publication years indicate temporal exploration
+    const years = new Set<number>();
+    books.forEach(book => {
+      if (book.metadata?.publishedDate) {
+        years.add(new Date(book.metadata.publishedDate).getFullYear());
+      }
+    });
+    const temporalScore = Math.min(30, years.size * 2); // Max 30
+
+    // Different languages indicate linguistic exploration
+    const languages = new Set<string>();
+    books.forEach(book => {
+      if (book.metadata?.language) languages.add(book.metadata.language);
+    });
+    const languageScore = Math.min(20, (languages.size - 1) * 10); // Max 20
+
+    return Math.max(10, Math.min(100, authorDiversityScore + temporalScore + languageScore - concentrationPenalty));
+  }
+
+  private calculateOrganizationScore(books: Book[]): number {
+    // Series reading in order, metadata completion
+    const seriesBooks = books.filter(book => book.metadata?.seriesName && book.metadata?.seriesNumber);
+    const seriesScore = (seriesBooks.length / books.length) * 40; // Max 40
+
+    // Books with comprehensive metadata suggest organized approach
+    const wellOrganizedBooks = books.filter(book => {
+      const metadata = book.metadata;
+      if (!metadata) return false;
+
+      const hasBasicInfo = metadata.title && metadata.authors && metadata.authors.length > 0;
+      const hasDetailedInfo = metadata.publishedDate || metadata.publisher || metadata.isbn10;
+      const hasCategories = metadata.categories && metadata.categories.length > 0;
+
+      return hasBasicInfo && (hasDetailedInfo || hasCategories);
+    });
+
+    const metadataScore = (wellOrganizedBooks.length / books.length) * 35; // Max 35
+
+    // Personal ratings suggest systematic tracking
+    const ratedBooks = books.filter(book => book.metadata?.personalRating);
+    const ratingScore = (ratedBooks.length / books.length) * 25; // Max 25
+
+    return Math.min(100, seriesScore + metadataScore + ratingScore);
+  }
+
+  private calculateIntensityScore(books: Book[]): number {
+    // Preference for longer books suggests intensive reading sessions
+    const booksWithPages = books.filter(book => book.metadata?.pageCount && book.metadata.pageCount > 0);
+    if (booksWithPages.length === 0) return 40;
+
+    const averagePages = booksWithPages.reduce((sum, book) => sum + (book.metadata?.pageCount || 0), 0) / booksWithPages.length;
+    const intensityFromLength = Math.min(50, averagePages / 8); // Max 50 for 400+ page average
+
+    // High progress percentages on multiple books suggest intensive reading
+    const highProgressBooks = books.filter(book => {
+      const progress = Math.max(
+        book.epubProgress?.percentage || 0,
+        book.pdfProgress?.percentage || 0,
+        book.cbxProgress?.percentage || 0,
+        book.koreaderProgress?.percentage || 0
+      );
+      return progress > 75;
+    });
+
+    const progressScore = (highProgressBooks.length / books.length) * 30; // Max 30
+
+    // Series completion suggests sustained intensive reading
+    const completedSeriesBooks = books.filter(book =>
+      book.metadata?.seriesName && book.readStatus === ReadStatus.READ
+    );
+    const seriesIntensityScore = (completedSeriesBooks.length / books.length) * 20; // Max 20
+
+    return Math.min(100, intensityFromLength + progressScore + seriesIntensityScore);
+  }
+
+  private calculateMethodologyScore(books: Book[]): number {
+    // Series reading in order vs random selection
+    const seriesBooks = books.filter(book => book.metadata?.seriesName);
+    const seriesGroups = new Map<string, Book[]>();
+
+    seriesBooks.forEach(book => {
+      const seriesName = book.metadata!.seriesName!.toLowerCase();
+      if (!seriesGroups.has(seriesName)) {
+        seriesGroups.set(seriesName, []);
+      }
+      seriesGroups.get(seriesName)!.push(book);
+    });
+
+    let systematicSeriesScore = 0;
+    seriesGroups.forEach(books => {
+      if (books.length > 1) {
+        const orderedBooks = books.filter(book => book.metadata?.seriesNumber).sort((a, b) =>
+          (a.metadata?.seriesNumber || 0) - (b.metadata?.seriesNumber || 0)
+        );
+        if (orderedBooks.length >= 2) {
+          systematicSeriesScore += 20;
+        }
+      }
+    });
+
+    // Author exploration in systematic way (multiple books per favored author)
+    const authorBooks = new Map<string, Book[]>();
+    books.forEach(book => {
+      book.metadata?.authors?.forEach(author => {
+        const authorName = author.toLowerCase();
+        if (!authorBooks.has(authorName)) {
+          authorBooks.set(authorName, []);
+        }
+        authorBooks.get(authorName)!.push(book);
+      });
+    });
+
+    const systematicAuthors = Array.from(authorBooks.values()).filter(books => books.length >= 2).length;
+    const authorMethodologyScore = Math.min(30, systematicAuthors * 5); // Max 30
+
+    // Genre consistency suggests methodical selection
+    const categoryBooks = new Map<string, number>();
+    books.forEach(book => {
+      book.metadata?.categories?.forEach(category => {
+        const cat = category.toLowerCase();
+        categoryBooks.set(cat, (categoryBooks.get(cat) || 0) + 1);
+      });
+    });
+
+    const majorCategories = Array.from(categoryBooks.values()).filter(count => count >= 3).length;
+    const categoryMethodologyScore = Math.min(25, majorCategories * 8); // Max 25
+
+    const baseMethodologyScore = books.length >= 10 ? 15 : Math.max(5, books.length); // Base score
+
+    return Math.min(100, systematicSeriesScore + authorMethodologyScore + categoryMethodologyScore + baseMethodologyScore);
+  }
+
+  private calculateMomentumScore(books: Book[]): number {
+    // Reading streaks and continuity
+    const completedBooks = books.filter(book => book.readStatus === ReadStatus.READ && book.dateFinished);
+
+    if (completedBooks.length === 0) {
+      // Score based on current activity
+      const activeBooks = books.filter(book =>
+        book.readStatus === ReadStatus.READING || book.readStatus === ReadStatus.RE_READING
+      );
+      return Math.min(40, activeBooks.length * 10);
+    }
+
+    // Sort by completion date
+    const sortedBooks = completedBooks.sort((a, b) =>
+      new Date(a.dateFinished!).getTime() - new Date(b.dateFinished!).getTime()
+    );
+
+    let momentumScore = 20; // Base score
+
+    // Recent completion activity (last 6 months)
+    const sixMonthsAgo = new Date();
+    sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
+
+    const recentCompletions = sortedBooks.filter(book =>
+      new Date(book.dateFinished!) > sixMonthsAgo
+    );
+
+    momentumScore += Math.min(40, recentCompletions.length * 5); // Max 40
+
+    // Currently reading books add to momentum
+    const currentlyReading = books.filter(book =>
+      book.readStatus === ReadStatus.READING || book.readStatus === ReadStatus.RE_READING
+    );
+
+    momentumScore += Math.min(25, currentlyReading.length * 8); // Max 25
+
+    // High progress books indicate active momentum
+    const highProgressBooks = books.filter(book => {
+      const progress = Math.max(
+        book.epubProgress?.percentage || 0,
+        book.pdfProgress?.percentage || 0,
+        book.cbxProgress?.percentage || 0,
+        book.koreaderProgress?.percentage || 0
+      );
+      return progress > 50 && progress < 100;
+    });
+
+    momentumScore += Math.min(15, highProgressBooks.length * 3); // Max 15
+
+    return Math.min(100, momentumScore);
+  }
+
+  private getDefaultProfile(): ReadingHabitsProfile {
+    return {
+      consistency: 40,
+      multitasking: 30,
+      completionism: 50,
+      exploration: 45,
+      organization: 35,
+      intensity: 40,
+      methodology: 35,
+      momentum: 30
+    };
+  }
+
+  private convertToHabitInsights(profile: ReadingHabitsProfile): HabitInsight[] {
+    return [
+      {
+        habit: 'Consistency',
+        score: profile.consistency,
+        description: 'You maintain regular reading patterns and schedules',
+        color: '#9c27b0'
+      },
+      {
+        habit: 'Multitasking',
+        score: profile.multitasking,
+        description: 'You juggle multiple books simultaneously',
+        color: '#e91e63'
+      },
+      {
+        habit: 'Completionism',
+        score: profile.completionism,
+        description: 'You finish books rather than abandon them',
+        color: '#ff5722'
+      },
+      {
+        habit: 'Exploration',
+        score: profile.exploration,
+        description: 'You actively seek out new authors and genres',
+        color: '#ff9800'
+      },
+      {
+        habit: 'Organization',
+        score: profile.organization,
+        description: 'You maintain systematic book tracking and metadata',
+        color: '#ffc107'
+      },
+      {
+        habit: 'Intensity',
+        score: profile.intensity,
+        description: 'You prefer longer, immersive reading sessions',
+        color: '#4caf50'
+      },
+      {
+        habit: 'Methodology',
+        score: profile.methodology,
+        description: 'You follow systematic approaches to book selection',
+        color: '#2196f3'
+      },
+      {
+        habit: 'Momentum',
+        score: profile.momentum,
+        description: 'You maintain active reading streaks and continuity',
+        color: '#673ab7'
+      }
+    ];
+  }
+
+  public getHabitInsights(): HabitInsight[] {
+    return this.lastCalculatedInsights;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/reading-progress-chart-service.ts b/booklore-ui/src/app/stats-component/charts-service/reading-progress-chart-service.ts
new file mode 100644
index 000000000..07e0ad9b4
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/reading-progress-chart-service.ts
@@ -0,0 +1,241 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface ReadingProgressStats {
+  progressRange: string;
+  count: number;
+  description: string;
+}
+
+const CHART_COLORS = [
+  '#6c757d', '#ffc107', '#fd7e14', '#17a2b8', '#6f42c1', '#28a745'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 1,
+  hoverBorderWidth: 2,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+const PROGRESS_RANGES = [
+  {range: '0%', min: 0, max: 0, desc: 'Not Started'},
+  {range: '1-25%', min: 0.1, max: 25, desc: 'Just Started'},
+  {range: '26-50%', min: 26, max: 50, desc: 'Getting Into It'},
+  {range: '51-75%', min: 51, max: 75, desc: 'Halfway Through'},
+  {range: '76-99%', min: 76, max: 99, desc: 'Almost Finished'},
+  {range: '100%', min: 100, max: 100, desc: 'Completed'}
+] as const;
+
+type ProgressChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadingProgressChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly progressChartType: ChartType = 'bar';
+
+  public readonly progressChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {display: false},
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#666666',
+        borderWidth: 1,
+        callbacks: {
+          title: (context) => context[0].label,
+          label: this.formatTooltipLabel
+        }
+      }
+    },
+    scales: {
+      x: {
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.1)'},
+        title: {
+          display: true,
+          text: 'Progress Range',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff', font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }, stepSize: 1
+        },
+        grid: {color: 'rgba(255, 255, 255, 0.05)'},
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      }
+    }
+  };
+
+  private readonly progressChartDataSubject = new BehaviorSubject<ProgressChartData>({
+    labels: [],
+    datasets: [{
+      label: 'Books by Progress',
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly progressChartData$: Observable<ProgressChartData> =
+    this.progressChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing reading progress stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateReadingProgressStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: ReadingProgressStats[]): void {
+    try {
+      const labels = stats.map(s => s.progressRange);
+      const dataValues = stats.map(s => s.count);
+
+      this.progressChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books by Progress',
+          data: dataValues,
+          backgroundColor: [...CHART_COLORS],
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  private calculateReadingProgressStats(): ReadingProgressStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processReadingProgressStats(filteredBooks);
+  }
+
+  public updateFromStats(stats: ReadingProgressStats[]): void {
+    this.updateChartData(stats);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processReadingProgressStats(books: Book[]): ReadingProgressStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const rangeCounts = this.buildProgressMap(books);
+    return this.convertMapToStats(rangeCounts);
+  }
+
+  private buildProgressMap(books: Book[]): Map<string, number> {
+    const rangeCounts = new Map<string, number>();
+    PROGRESS_RANGES.forEach(range => rangeCounts.set(range.range, 0));
+
+    for (const book of books) {
+      const progress = this.getBookProgress(book);
+
+      for (const range of PROGRESS_RANGES) {
+        if (progress >= range.min && progress <= range.max) {
+          rangeCounts.set(range.range, (rangeCounts.get(range.range) || 0) + 1);
+          break;
+        }
+      }
+    }
+
+    return rangeCounts;
+  }
+
+  private convertMapToStats(rangeCounts: Map<string, number>): ReadingProgressStats[] {
+    return PROGRESS_RANGES.map(range => ({
+      progressRange: range.range,
+      count: rangeCounts.get(range.range) || 0,
+      description: range.desc
+    }));
+  }
+
+  private getBookProgress(book: Book): number {
+    if (book.pdfProgress?.percentage) return book.pdfProgress.percentage;
+    if (book.epubProgress?.percentage) return book.epubProgress.percentage;
+    if (book.cbxProgress?.percentage) return book.cbxProgress.percentage;
+    if (book.koreaderProgress?.percentage) return book.koreaderProgress.percentage;
+    return 0;
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const value = context.parsed.y;
+    const label = context.label;
+    const rangeInfo = PROGRESS_RANGES.find(r => r.range === label);
+    const description = rangeInfo ? ` (${rangeInfo.desc})` : '';
+    return `${value} book${value === 1 ? '' : 's'}${description}`;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/reading-velocity-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/reading-velocity-chart.service.ts
new file mode 100644
index 000000000..49ceb7bb0
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/reading-velocity-chart.service.ts
@@ -0,0 +1,379 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+
+interface ReadingVelocityStats {
+  category: string;
+  count: number;
+  averagePages: number;
+  averageRating: number;
+  description: string;
+}
+
+const CHART_COLORS = [
+  '#ff6b9d', '#45aaf2', '#96f7d2', '#feca57', '#ff9ff3',
+  '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43', '#10ac84',
+  '#ee5a6f', '#60a3bc', '#130f40', '#30336b', '#535c68'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type VelocityChartData = ChartData<'polarArea', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadingVelocityChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly velocityChartType = 'polarArea' as const;
+
+  public readonly velocityChartOptions: ChartConfiguration<'polarArea'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      r: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {size: 10},
+          stepSize: 1,
+          backdropColor: 'transparent'
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.15)'
+        },
+        angleLines: {
+          color: 'rgba(255, 255, 255, 0.15)'
+        },
+        pointLabels: {
+          color: '#ffffff',
+          font: {size: 10}
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          color: '#ffffff',
+          font: {size: 10},
+          padding: 10,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    }
+  };
+
+  private readonly velocityChartDataSubject = new BehaviorSubject<VelocityChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly velocityChartData$: Observable<VelocityChartData> = this.velocityChartDataSubject.asObservable();
+
+  constructor() {
+    this.initializeChartDataSubscription();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private initializeChartDataSubscription(): void {
+    this.getReadingVelocityStats()
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError((error) => {
+          console.error('Error processing reading velocity stats:', error);
+          return [];
+        })
+      )
+      .subscribe((stats) => this.updateChartData(stats));
+  }
+
+  private updateChartData(stats: ReadingVelocityStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => s.category);
+      const dataValues = stats.map(s => s.count);
+      const colors = this.getColorsForData(stats.length);
+
+      this.velocityChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating velocity chart data:', error);
+    }
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  public getReadingVelocityStats(): Observable<ReadingVelocityStats[]> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.libraryFilterService.selectedLibrary$
+    ]).pipe(
+      map(([state, selectedLibraryId]) => {
+        if (!this.isValidBookState(state)) {
+          return [];
+        }
+
+        const filteredBooks = this.filterBooksByLibrary(state.books!, String(selectedLibraryId));
+        return this.processReadingVelocityStats(filteredBooks);
+      }),
+      catchError((error) => {
+        console.error('Error getting reading velocity stats:', error);
+        return [];
+      })
+    );
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processReadingVelocityStats(books: Book[]): ReadingVelocityStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const velocityCategories = this.categorizeByReadingVelocity(books);
+    return this.convertToVelocityStats(velocityCategories);
+  }
+
+  private categorizeByReadingVelocity(books: Book[]): Map<string, Book[]> {
+    const categories = new Map<string, Book[]>();
+
+    // Initialize categories
+    categories.set('Speed Readers', []);
+    categories.set('Consistent Readers', []);
+    categories.set('Selective Readers', []);
+    categories.set('Exploratory Readers', []);
+    categories.set('Deep Readers', []);
+    categories.set('Casual Readers', []);
+    categories.set('Quality Seekers', []);
+
+    const readBooks = books.filter(book =>
+      book.readStatus === ReadStatus.READ &&
+      book.metadata?.pageCount &&
+      book.metadata.pageCount > 0
+    );
+
+    const completedBooks = readBooks.length;
+    const totalBooks = books.length;
+    const completionRate = completedBooks / totalBooks;
+
+    const averagePageCount = readBooks.reduce((sum, book) => sum + (book.metadata?.pageCount || 0), 0) / readBooks.length || 0;
+    const averageRating = this.calculateAverageRating(readBooks);
+
+    for (const book of books) {
+      const pageCount = book.metadata?.pageCount || 0;
+      const hasHighRating = this.hasHighQualityRating(book);
+      const isCompleted = book.readStatus === ReadStatus.READ;
+      const isCurrentlyReading = book.readStatus === ReadStatus.READING;
+      const progress = this.getReadingProgress(book);
+
+      // Speed Readers: High completion rate + prefer shorter books
+      if (completionRate > 0.6 && pageCount > 0 && pageCount < averagePageCount * 0.8) {
+        categories.get('Speed Readers')!.push(book);
+      }
+      // Deep Readers: Prefer longer, high-quality books
+      else if (pageCount > averagePageCount * 1.5 && hasHighRating) {
+        categories.get('Deep Readers')!.push(book);
+      }
+      // Quality Seekers: Focus on highly-rated books regardless of length
+      else if (hasHighRating && (isCompleted || progress > 0.5)) {
+        categories.get('Quality Seekers')!.push(book);
+      }
+      // Exploratory Readers: Wide variety of books, many started but not finished
+      else if (!isCompleted && (progress > 0.1 && progress < 0.8)) {
+        categories.get('Exploratory Readers')!.push(book);
+      }
+      // Consistent Readers: Steady reading pattern, average book length
+      else if (isCompleted && pageCount > averagePageCount * 0.8 && pageCount < averagePageCount * 1.2) {
+        categories.get('Consistent Readers')!.push(book);
+      }
+      // Selective Readers: Few books but high completion rate
+      else if (completionRate > 0.4 && totalBooks < 50) {
+        categories.get('Selective Readers')!.push(book);
+      }
+      // Casual Readers: Everything else
+      else {
+        categories.get('Casual Readers')!.push(book);
+      }
+    }
+
+    return categories;
+  }
+
+  private hasHighQualityRating(book: Book): boolean {
+    const metadata = book.metadata;
+    if (!metadata) return false;
+
+    const goodreadsRating = metadata.goodreadsRating || 0;
+    const amazonRating = metadata.amazonRating || 0;
+    const personalRating = metadata.personalRating || 0;
+
+    return goodreadsRating >= 4.0 || amazonRating >= 4.0 || personalRating >= 4;
+  }
+
+  private getReadingProgress(book: Book): number {
+    if (book.readStatus === ReadStatus.READ) return 1.0;
+
+    const epubProgress = book.epubProgress?.percentage || 0;
+    const pdfProgress = book.pdfProgress?.percentage || 0;
+    const cbxProgress = book.cbxProgress?.percentage || 0;
+    const koreaderProgress = book.koreaderProgress?.percentage || 0;
+
+    return Math.max(epubProgress, pdfProgress, cbxProgress, koreaderProgress) / 100;
+  }
+
+  private calculateAverageRating(books: Book[]): number {
+    const ratingsBooks = books.filter(book => {
+      const metadata = book.metadata;
+      return metadata && (metadata.goodreadsRating || metadata.amazonRating || metadata.personalRating);
+    });
+
+    if (ratingsBooks.length === 0) return 0;
+
+    const totalRating = ratingsBooks.reduce((sum, book) => {
+      const metadata = book.metadata!;
+      const rating = metadata.goodreadsRating || metadata.amazonRating || metadata.personalRating || 0;
+      return sum + rating;
+    }, 0);
+
+    return totalRating / ratingsBooks.length;
+  }
+
+  private convertToVelocityStats(categoriesMap: Map<string, Book[]>): ReadingVelocityStats[] {
+    const descriptions: Record<string, string> = {
+      'Speed Readers': 'High completion rate with shorter books',
+      'Consistent Readers': 'Steady reading pattern with average-length books',
+      'Selective Readers': 'Few books but high completion rate',
+      'Exploratory Readers': 'Wide variety, many started but not finished',
+      'Deep Readers': 'Prefer longer, high-quality books',
+      'Casual Readers': 'Mixed reading patterns',
+      'Quality Seekers': 'Focus on highly-rated books'
+    };
+
+    return Array.from(categoriesMap.entries())
+      .filter(([_, books]) => books.length > 0)
+      .map(([category, books]) => {
+        const completedBooks = books.filter(book => book.readStatus === ReadStatus.READ);
+        const averagePages = books.reduce((sum, book) => sum + (book.metadata?.pageCount || 0), 0) / books.length;
+        const averageRating = this.calculateAverageRating(books);
+
+        return {
+          category,
+          count: books.length,
+          averagePages: Math.round(averagePages),
+          averageRating: Number(averageRating.toFixed(1)),
+          description: descriptions[category] || 'Mixed reading patterns'
+        };
+      })
+      .sort((a, b) => b.count - a.count);
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+    const dataValues = dataset.data as number[];
+
+    return data.labels.map((label: string, index: number) => {
+      const isVisible = typeof chart.getDataVisibility === 'function'
+        ? chart.getDataVisibility(index)
+        : !((chart.getDatasetMeta && chart.getDatasetMeta(0)?.data?.[index]?.hidden) || false);
+
+      return {
+        text: `${label} (${dataValues[index]})`,
+        fillStyle: (dataset.backgroundColor as string[])[index],
+        strokeStyle: '#ffffff',
+        lineWidth: 1,
+        hidden: !isVisible,
+        index,
+        fontColor: '#ffffff'
+      };
+    });
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const velocityStats = this.getLastCalculatedStats();
+
+    if (!velocityStats || dataIndex >= velocityStats.length) {
+      return `${context.parsed} books`;
+    }
+
+    const stats = velocityStats[dataIndex];
+    return `${stats.count} books | Avg. ${stats.averagePages} pages | Avg. rating: ${stats.averageRating}/5 | ${stats.description}`;
+  }
+
+  private lastCalculatedStats: ReadingVelocityStats[] = [];
+
+  private getLastCalculatedStats(): ReadingVelocityStats[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/reading-velocity-timeline-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/reading-velocity-timeline-chart.service.ts
new file mode 100644
index 000000000..2db476d63
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/reading-velocity-timeline-chart.service.ts
@@ -0,0 +1,388 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+
+interface VelocityTimelineData {
+  month: string;
+  booksCompleted: number;
+  totalPages: number;
+  averagePages: number;
+  averageRating: number;
+  avgPagesPerDay: number;
+  readingVelocity: number; // Books per month
+}
+
+const CHART_COLORS = {
+  booksCompleted: '#3498db',
+  avgPagesPerDay: '#e74c3c',
+  averageRating: '#f39c12',
+  readingVelocity: '#2ecc71'
+} as const;
+
+type VelocityTimelineChartData = ChartData<'line', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadingVelocityTimelineChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly velocityTimelineChartType = 'line' as const;
+
+  public readonly velocityTimelineChartOptions: ChartConfiguration<'line'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        type: 'category',
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          maxRotation: 45
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Month',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Books Completed',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          }
+        },
+        grid: {
+          drawOnChartArea: false
+        },
+        title: {
+          display: true,
+          text: 'Pages per Day',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          }
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top',
+        labels: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          padding: 15,
+          usePointStyle: true
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: { size: 14, weight: 'bold' },
+        bodyFont: { size: 12 },
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'index'
+    },
+    elements: {
+      point: {
+        radius: 4,
+        hoverRadius: 6
+      },
+      line: {
+        tension: 0.2,
+        borderWidth: 2
+      }
+    }
+  };
+
+  private readonly velocityTimelineChartDataSubject = new BehaviorSubject<VelocityTimelineChartData>({
+    labels: [],
+    datasets: []
+  });
+
+  public readonly velocityTimelineChartData$: Observable<VelocityTimelineChartData> = this.velocityTimelineChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing velocity timeline stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateVelocityTimelineStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: VelocityTimelineData[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => s.month);
+
+      const datasets = [
+        {
+          label: 'Books Completed',
+          data: stats.map(s => s.booksCompleted),
+          borderColor: CHART_COLORS.booksCompleted,
+          backgroundColor: CHART_COLORS.booksCompleted + '20',
+          yAxisID: 'y',
+          tension: 0.2,
+          fill: false
+        },
+        {
+          label: 'Avg Pages/Day',
+          data: stats.map(s => s.avgPagesPerDay),
+          borderColor: CHART_COLORS.avgPagesPerDay,
+          backgroundColor: CHART_COLORS.avgPagesPerDay + '20',
+          yAxisID: 'y1',
+          tension: 0.2,
+          fill: false
+        },
+        {
+          label: 'Avg Rating (×2)',
+          data: stats.map(s => s.averageRating * 2), // Scale for visibility
+          borderColor: CHART_COLORS.averageRating,
+          backgroundColor: CHART_COLORS.averageRating + '20',
+          yAxisID: 'y',
+          tension: 0.2,
+          fill: false,
+          borderDash: [5, 5]
+        },
+        {
+          label: 'Reading Velocity',
+          data: stats.map(s => s.readingVelocity),
+          borderColor: CHART_COLORS.readingVelocity,
+          backgroundColor: CHART_COLORS.readingVelocity + '20',
+          yAxisID: 'y',
+          tension: 0.2,
+          fill: true,
+          fillOpacity: 0.1
+        }
+      ];
+
+      this.velocityTimelineChartDataSubject.next({
+        labels,
+        datasets
+      });
+    } catch (error) {
+      console.error('Error updating velocity timeline chart data:', error);
+    }
+  }
+
+  private calculateVelocityTimelineStats(): VelocityTimelineData[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processVelocityTimelineStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processVelocityTimelineStats(books: Book[]): VelocityTimelineData[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    // Filter completed books with finish dates
+    const completedBooks = books.filter(book =>
+      book.readStatus === ReadStatus.READ &&
+      book.dateFinished
+    );
+
+    if (completedBooks.length === 0) {
+      return [];
+    }
+
+    // Group books by month-year
+    const monthlyData = new Map<string, Book[]>();
+
+    for (const book of completedBooks) {
+      const finishDate = new Date(book.dateFinished!);
+      if (isNaN(finishDate.getTime())) continue;
+
+      const monthKey = this.formatMonthYear(finishDate);
+      if (!monthlyData.has(monthKey)) {
+        monthlyData.set(monthKey, []);
+      }
+      monthlyData.get(monthKey)!.push(book);
+    }
+
+    // Convert to timeline data and sort chronologically
+    const timelineData = Array.from(monthlyData.entries())
+      .map(([monthKey, monthBooks]) => this.calculateMonthlyMetrics(monthKey, monthBooks))
+      .sort((a, b) => new Date(a.month + '-01').getTime() - new Date(b.month + '-01').getTime())
+      .slice(-24); // Last 24 months
+
+    return timelineData;
+  }
+
+  private formatMonthYear(date: Date): string {
+    return date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0');
+  }
+
+  private calculateMonthlyMetrics(monthKey: string, books: Book[]): VelocityTimelineData {
+    const totalPages = books.reduce((sum, book) => sum + (book.metadata?.pageCount || 0), 0);
+    const averagePages = books.length > 0 ? Math.round(totalPages / books.length) : 0;
+
+    // Calculate average rating
+    const ratedBooks = books.filter(book => book.metadata?.personalRating || book.metadata?.goodreadsRating);
+    const totalRating = ratedBooks.reduce((sum, book) => {
+      const rating = book.metadata?.personalRating || book.metadata?.goodreadsRating || 0;
+      return sum + rating;
+    }, 0);
+    const averageRating = ratedBooks.length > 0 ? Number((totalRating / ratedBooks.length).toFixed(1)) : 0;
+
+    // Calculate days in month for pages per day calculation
+    const [year, month] = monthKey.split('-').map(Number);
+    const daysInMonth = new Date(year, month, 0).getDate();
+    const avgPagesPerDay = Math.round(totalPages / daysInMonth);
+
+    // Reading velocity is books per month
+    const readingVelocity = books.length;
+
+    return {
+      month: this.formatDisplayMonth(monthKey),
+      booksCompleted: books.length,
+      totalPages,
+      averagePages,
+      averageRating,
+      avgPagesPerDay,
+      readingVelocity
+    };
+  }
+
+  private formatDisplayMonth(monthKey: string): string {
+    const [year, month] = monthKey.split('-');
+    const monthNames = [
+      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+    ];
+    return `${monthNames[parseInt(month) - 1]} ${year}`;
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const datasetLabel = context.dataset.label;
+    const value = context.parsed.y;
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${datasetLabel}: ${value}`;
+    }
+
+    const monthStats = stats[dataIndex];
+
+    switch (datasetLabel) {
+      case 'Books Completed':
+        return `${value} books completed | ${monthStats.totalPages} total pages`;
+      case 'Avg Pages/Day':
+        return `${value} pages/day | ${monthStats.averagePages} avg pages/book`;
+      case 'Avg Rating (×2)':
+        const actualRating = value / 2;
+        return `${actualRating.toFixed(1)}/5 avg rating | ${monthStats.booksCompleted} books rated`;
+      case 'Reading Velocity':
+        return `${value} books/month | ${monthStats.avgPagesPerDay} pages/day velocity`;
+      default:
+        return `${datasetLabel}: ${value}`;
+    }
+  }
+
+  private lastCalculatedStats: VelocityTimelineData[] = [];
+
+  private getLastCalculatedStats(): VelocityTimelineData[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/series-completion-progress-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/series-completion-progress-chart.service.ts
new file mode 100644
index 000000000..1aa8dff6e
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/series-completion-progress-chart.service.ts
@@ -0,0 +1,327 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book, ReadStatus} from '../../book/model/book.model';
+
+interface SeriesCompletionStats {
+  seriesName: string;
+  totalBooks: number;
+  ownedBooks: number;
+  readBooks: number;
+  completionPercentage: number;
+  collectionPercentage: number;
+  isComplete: boolean;
+  averageRating: number;
+}
+
+const CHART_COLORS = [
+  '#2ecc71', '#3498db', '#e74c3c', '#f39c12', '#9b59b6',
+  '#1abc9c', '#34495e', '#e67e22', '#95a5a6', '#27ae60',
+  '#2980b9', '#c0392b', '#d35400', '#8e44ad', '#16a085'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 1,
+  hoverBorderWidth: 2,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type SeriesCompletionChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeriesCompletionProgressChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly seriesCompletionChartType = 'bar' as const;
+
+  public readonly seriesCompletionChartOptions: ChartConfiguration<'bar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        ticks: {
+          color: '#ffffff',
+          font: { size: 10 },
+          maxRotation: 45
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Series',
+          color: '#ffffff',
+          font: { size: 12 }
+        }
+      },
+      y: {
+        beginAtZero: true,
+        max: 100,
+        ticks: {
+          color: '#ffffff',
+          font: { size: 10 },
+          callback: function(value) {
+            return value + '%';
+          }
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Completion %',
+          color: '#ffffff',
+          font: { size: 12 }
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top',
+        labels: {
+          color: '#ffffff',
+          font: { size: 11 },
+          padding: 15,
+          usePointStyle: true
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: { size: 14, weight: 'bold' },
+        bodyFont: { size: 12 },
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'index'
+    }
+  };
+
+  private readonly seriesCompletionChartDataSubject = new BehaviorSubject<SeriesCompletionChartData>({
+    labels: [],
+    datasets: []
+  });
+
+  public readonly seriesCompletionChartData$: Observable<SeriesCompletionChartData> = this.seriesCompletionChartDataSubject.asObservable();
+
+  constructor() {
+    this.initializeChartDataSubscription();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private initializeChartDataSubscription(): void {
+    this.getSeriesCompletionStats()
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError((error) => {
+          console.error('Error processing series completion stats:', error);
+          return [];
+        })
+      )
+      .subscribe((stats) => this.updateChartData(stats));
+  }
+
+  private updateChartData(stats: SeriesCompletionStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => this.truncateSeriesName(s.seriesName, 20));
+
+      const datasets = [
+        {
+          label: 'Reading Progress',
+          data: stats.map(s => s.completionPercentage),
+          backgroundColor: '#2ecc71',
+          ...CHART_DEFAULTS
+        },
+        {
+          label: 'Collection Progress',
+          data: stats.map(s => s.collectionPercentage),
+          backgroundColor: '#3498db',
+          ...CHART_DEFAULTS
+        }
+      ];
+
+      this.seriesCompletionChartDataSubject.next({
+        labels,
+        datasets
+      });
+    } catch (error) {
+      console.error('Error updating series completion chart data:', error);
+    }
+  }
+
+  private truncateSeriesName(name: string, maxLength: number): string {
+    if (name.length <= maxLength) return name;
+    return name.substring(0, maxLength - 3) + '...';
+  }
+
+  public getSeriesCompletionStats(): Observable<SeriesCompletionStats[]> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.libraryFilterService.selectedLibrary$
+    ]).pipe(
+      map(([state, selectedLibraryId]) => {
+        if (!this.isValidBookState(state)) {
+          return [];
+        }
+
+        const filteredBooks = this.filterBooksByLibrary(state.books!, String(selectedLibraryId));
+        return this.processSeriesCompletionStats(filteredBooks);
+      }),
+      catchError((error) => {
+        console.error('Error getting series completion stats:', error);
+        return [];
+      })
+    );
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processSeriesCompletionStats(books: Book[]): SeriesCompletionStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    // Group books by series
+    const seriesMap = new Map<string, Book[]>();
+
+    books.forEach(book => {
+      const seriesName = book.metadata?.seriesName;
+      if (seriesName && seriesName.trim()) {
+        if (!seriesMap.has(seriesName)) {
+          seriesMap.set(seriesName, []);
+        }
+        seriesMap.get(seriesName)!.push(book);
+      }
+    });
+
+    // Calculate completion stats for each series
+    const seriesStats: SeriesCompletionStats[] = [];
+
+    for (const [seriesName, seriesBooks] of seriesMap) {
+      const stats = this.calculateSeriesStats(seriesName, seriesBooks);
+      if (stats.totalBooks > 1) { // Only include actual series (more than 1 book)
+        seriesStats.push(stats);
+      }
+    }
+
+    return seriesStats
+      .sort((a, b) => {
+        // Sort by completion percentage, then by collection percentage
+        if (a.completionPercentage !== b.completionPercentage) {
+          return b.completionPercentage - a.completionPercentage;
+        }
+        return b.collectionPercentage - a.collectionPercentage;
+      })
+      .slice(0, 15); // Top 15 series
+  }
+
+  private calculateSeriesStats(seriesName: string, books: Book[]): SeriesCompletionStats {
+    // Determine total books in series
+    const seriesTotals = books
+      .map(book => book.metadata?.seriesTotal)
+      .filter((total): total is number => total != null && total > 0);
+
+    const totalBooks = seriesTotals.length > 0
+      ? Math.max(...seriesTotals)
+      : books.length; // Fallback to owned books count
+
+    const ownedBooks = books.length;
+    const readBooks = books.filter(book => book.readStatus === ReadStatus.READ).length;
+
+    // Calculate completion and collection percentages
+    const completionPercentage = totalBooks > 0
+      ? Math.round((readBooks / totalBooks) * 100)
+      : 0;
+
+    const collectionPercentage = totalBooks > 0
+      ? Math.round((ownedBooks / totalBooks) * 100)
+      : 100;
+
+    const isComplete = ownedBooks >= totalBooks;
+
+    // Calculate average rating
+    const ratedBooks = books.filter(book => {
+      const rating = book.metadata?.personalRating || book.metadata?.goodreadsRating;
+      return rating && rating > 0;
+    });
+
+    const averageRating = ratedBooks.length > 0
+      ? Number((ratedBooks.reduce((sum, book) => {
+          const rating = book.metadata?.personalRating || book.metadata?.goodreadsRating || 0;
+          return sum + rating;
+        }, 0) / ratedBooks.length).toFixed(1))
+      : 0;
+
+    return {
+      seriesName,
+      totalBooks,
+      ownedBooks,
+      readBooks,
+      completionPercentage,
+      collectionPercentage,
+      isComplete,
+      averageRating
+    };
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const datasetLabel = context.dataset.label;
+    const value = context.parsed.y;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${datasetLabel}: ${value}%`;
+    }
+
+    const series = stats[dataIndex];
+
+    if (datasetLabel === 'Reading Progress') {
+      return `${value}% read (${series.readBooks}/${series.totalBooks} books) | Avg rating: ${series.averageRating}/5`;
+    } else if (datasetLabel === 'Collection Progress') {
+      return `${value}% collected (${series.ownedBooks}/${series.totalBooks} books) | ${series.isComplete ? 'Complete!' : 'Incomplete'}`;
+    }
+
+    return `${datasetLabel}: ${value}%`;
+  }
+
+  private lastCalculatedStats: SeriesCompletionStats[] = [];
+
+  private getLastCalculatedStats(): SeriesCompletionStats[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/series-length-distribution-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/series-length-distribution-chart.service.ts
new file mode 100644
index 000000000..181f2b9a5
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/series-length-distribution-chart.service.ts
@@ -0,0 +1,298 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface SeriesLengthStats {
+  category: string;
+  count: number;
+  percentage: number;
+  seriesNames: string[];
+  averageBooksOwned: number;
+}
+
+const CHART_COLORS = [
+  '#3498db', '#2ecc71', '#e74c3c', '#f39c12', '#9b59b6',
+  '#1abc9c', '#34495e', '#e67e22', '#95a5a6', '#27ae60'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type SeriesLengthChartData = ChartData<'doughnut', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeriesLengthDistributionChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly seriesLengthChartType = 'doughnut' as const;
+
+  public readonly seriesLengthChartOptions: ChartConfiguration<'doughnut'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          color: '#ffffff',
+          font: { size: 11 },
+          padding: 12,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: { size: 14, weight: 'bold' },
+        bodyFont: { size: 12 },
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel.bind(this)
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    },
+    cutout: '50%'
+  };
+
+  private readonly seriesLengthChartDataSubject = new BehaviorSubject<SeriesLengthChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly seriesLengthChartData$: Observable<SeriesLengthChartData> = this.seriesLengthChartDataSubject.asObservable();
+
+  constructor() {
+    this.initializeChartDataSubscription();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private initializeChartDataSubscription(): void {
+    this.getSeriesLengthStats()
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError((error) => {
+          console.error('Error processing series length stats:', error);
+          return [];
+        })
+      )
+      .subscribe((stats) => this.updateChartData(stats));
+  }
+
+  private updateChartData(stats: SeriesLengthStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => s.category);
+      const dataValues = stats.map(s => s.count);
+      const colors = this.getColorsForData(stats.length);
+
+      this.seriesLengthChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating series length chart data:', error);
+    }
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  public getSeriesLengthStats(): Observable<SeriesLengthStats[]> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.libraryFilterService.selectedLibrary$
+    ]).pipe(
+      map(([state, selectedLibraryId]) => {
+        if (!this.isValidBookState(state)) {
+          return [];
+        }
+
+        const filteredBooks = this.filterBooksByLibrary(state.books!, String(selectedLibraryId));
+        return this.processSeriesLengthStats(filteredBooks);
+      }),
+      catchError((error) => {
+        console.error('Error getting series length stats:', error);
+        return [];
+      })
+    );
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processSeriesLengthStats(books: Book[]): SeriesLengthStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    // Group books by series
+    const seriesMap = new Map<string, Book[]>();
+
+    books.forEach(book => {
+      const seriesName = book.metadata?.seriesName;
+      if (seriesName && seriesName.trim()) {
+        if (!seriesMap.has(seriesName)) {
+          seriesMap.set(seriesName, []);
+        }
+        seriesMap.get(seriesName)!.push(book);
+      }
+    });
+
+    // Categorize series by length
+    const categories = new Map<string, { count: number, seriesNames: string[], totalBooksOwned: number }>();
+
+    // Initialize categories
+    const categoryRanges = [
+      { name: 'Duologies (2 books)', min: 2, max: 2 },
+      { name: 'Trilogies (3 books)', min: 3, max: 3 },
+      { name: 'Short Series (4-5 books)', min: 4, max: 5 },
+      { name: 'Medium Series (6-10 books)', min: 6, max: 10 },
+      { name: 'Long Series (11-20 books)', min: 11, max: 20 },
+      { name: 'Epic Series (21+ books)', min: 21, max: Infinity },
+      { name: 'Unknown Length', min: 0, max: 0 }
+    ];
+
+    categoryRanges.forEach(range => {
+      categories.set(range.name, { count: 0, seriesNames: [], totalBooksOwned: 0 });
+    });
+
+    // Categorize each series
+    for (const [seriesName, seriesBooks] of seriesMap) {
+      if (seriesBooks.length < 2) continue; // Skip single books
+
+      // Determine series total length
+      const seriesTotals = seriesBooks
+        .map(book => book.metadata?.seriesTotal)
+        .filter((total): total is number => typeof total === 'number' && total > 0);
+
+      const seriesLength = seriesTotals.length > 0
+        ? Math.max(...seriesTotals)
+        : 0; // Unknown length
+
+      let categoryName = 'Unknown Length';
+
+      if (seriesLength > 0) {
+        for (const range of categoryRanges) {
+          if (seriesLength >= range.min && seriesLength <= range.max) {
+            categoryName = range.name;
+            break;
+          }
+        }
+      }
+
+      const categoryData = categories.get(categoryName)!;
+      categoryData.count++;
+      categoryData.seriesNames.push(seriesName);
+      categoryData.totalBooksOwned += seriesBooks.length;
+    }
+
+    // Convert to stats array
+    const totalSeries = Array.from(categories.values()).reduce((sum, cat) => sum + cat.count, 0);
+
+    return Array.from(categories.entries())
+      .filter(([_, data]) => data.count > 0)
+      .map(([category, data]) => ({
+        category,
+        count: data.count,
+        percentage: Number(((data.count / totalSeries) * 100).toFixed(1)),
+        seriesNames: data.seriesNames,
+        averageBooksOwned: data.count > 0 ? Math.round(data.totalBooksOwned / data.count) : 0
+      }))
+      .sort((a, b) => b.count - a.count);
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+    const dataValues = dataset.data as number[];
+
+    return data.labels.map((label: string, index: number) => {
+      const isVisible = typeof chart.getDataVisibility === 'function'
+        ? chart.getDataVisibility(index)
+        : !((chart.getDatasetMeta && chart.getDatasetMeta(0)?.data?.[index]?.hidden) || false);
+
+      return {
+        text: `${label} (${dataValues[index]})`,
+        fillStyle: (dataset.backgroundColor as string[])[index],
+        strokeStyle: '#ffffff',
+        lineWidth: 1,
+        hidden: !isVisible,
+        index,
+        fontColor: '#ffffff'
+      };
+    });
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${context.parsed} series`;
+    }
+
+    const categoryStats = stats[dataIndex];
+    const total = context.chart.data.datasets[0].data.reduce((a: number, b: number) => a + b, 0);
+    const percentage = ((categoryStats.count / total) * 100).toFixed(1);
+
+    return `${categoryStats.count} series (${percentage}%) | Avg ${categoryStats.averageBooksOwned} books owned | Examples: ${categoryStats.seriesNames.slice(0, 3).join(', ')}${categoryStats.seriesNames.length > 3 ? '...' : ''}`;
+  }
+
+  private lastCalculatedStats: SeriesLengthStats[] = [];
+
+  private getLastCalculatedStats(): SeriesLengthStats[] {
+    return this.lastCalculatedStats;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/series-standalone-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/series-standalone-chart.service.ts
new file mode 100644
index 000000000..5bd9b6ab7
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/series-standalone-chart.service.ts
@@ -0,0 +1,309 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface SeriesStats {
+  category: string;
+  count: number;
+  percentage: number;
+  description: string;
+}
+
+const CHART_COLORS = [
+  '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#ffeaa7',
+  '#dda0dd', '#98d8c8', '#ff7675', '#74b9ff', '#fdcb6e'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 2,
+  hoverBorderWidth: 3,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type SeriesChartData = ChartData<'polarArea', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeriesStandaloneChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly seriesChartType = 'polarArea' as const;
+
+  public readonly seriesChartOptions: ChartConfiguration<'polarArea'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      r: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {size: 10},
+          stepSize: 1
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.2)'
+        },
+        angleLines: {
+          color: 'rgba(255, 255, 255, 0.2)'
+        },
+        pointLabels: {
+          color: '#ffffff',
+          font: {size: 11}
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'bottom',
+        labels: {
+          color: '#ffffff',
+          font: {size: 11},
+          padding: 12,
+          usePointStyle: true,
+          generateLabels: this.generateLegendLabels.bind(this)
+        }
+      },
+      tooltip: {
+        enabled: true,
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 13},
+        position: 'nearest',
+        callbacks: {
+          title: (context) => context[0]?.label || '',
+          label: this.formatTooltipLabel
+        }
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    }
+  };
+
+  private readonly seriesChartDataSubject = new BehaviorSubject<SeriesChartData>({
+    labels: [],
+    datasets: [{
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly seriesChartData$: Observable<SeriesChartData> = this.seriesChartDataSubject.asObservable();
+
+  constructor() {
+    this.initializeChartDataSubscription();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private initializeChartDataSubscription(): void {
+    this.getSeriesStats()
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError((error) => {
+          console.error('Error processing series stats:', error);
+          return [];
+        })
+      )
+      .subscribe((stats) => this.updateChartData(stats));
+  }
+
+  private updateChartData(stats: SeriesStats[]): void {
+    try {
+      const labels = stats.map(s => s.category);
+      const dataValues = stats.map(s => s.count);
+      const colors = this.getColorsForData(stats.length);
+
+      this.seriesChartDataSubject.next({
+        labels,
+        datasets: [{
+          data: dataValues,
+          backgroundColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating series chart data:', error);
+    }
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  public getSeriesStats(): Observable<SeriesStats[]> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.libraryFilterService.selectedLibrary$
+    ]).pipe(
+      map(([state, selectedLibraryId]) => {
+        if (!this.isValidBookState(state)) {
+          return [];
+        }
+
+        const filteredBooks = this.filterBooksByLibrary(state.books!, String(selectedLibraryId));
+        return this.processSeriesStats(filteredBooks);
+      }),
+      catchError((error) => {
+        console.error('Error getting series stats:', error);
+        return [];
+      })
+    );
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processSeriesStats(books: Book[]): SeriesStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const stats = this.categorizeBooks(books);
+    return this.convertToStats(stats, books.length);
+  }
+
+  private categorizeBooks(books: Book[]): Map<string, { count: number; description: string }> {
+    const categories = new Map<string, { count: number; description: string }>();
+
+    // Initialize categories
+    categories.set('Standalone Books', { count: 0, description: 'Books not part of any series' });
+    categories.set('Series Books', { count: 0, description: 'Books that are part of a series' });
+    categories.set('Complete Series', { count: 0, description: 'Books in complete series' });
+    categories.set('Incomplete Series', { count: 0, description: 'Books in incomplete series' });
+    categories.set('Unknown Series Status', { count: 0, description: 'Books with unclear series information' });
+
+    // Group books by series
+    const seriesMap = new Map<string, Book[]>();
+    const standaloneBooks: Book[] = [];
+
+    for (const book of books) {
+      const seriesName = book.metadata?.seriesName;
+      if (seriesName && seriesName.trim()) {
+        if (!seriesMap.has(seriesName)) {
+          seriesMap.set(seriesName, []);
+        }
+        seriesMap.get(seriesName)!.push(book);
+      } else {
+        standaloneBooks.push(book);
+      }
+    }
+
+    // Count standalone books
+    categories.get('Standalone Books')!.count = standaloneBooks.length;
+
+    // Process series books
+    let seriesBooks = 0;
+    let completeSeriesBooks = 0;
+    let incompleteSeriesBooks = 0;
+    let unknownSeriesBooks = 0;
+
+    for (const [seriesName, seriesBookList] of seriesMap) {
+      seriesBooks += seriesBookList.length;
+
+      // Check if series is complete
+      const seriesTotal = seriesBookList[0]?.metadata?.seriesTotal;
+      const hasSeriesNumbers = seriesBookList.every(book => book.metadata?.seriesNumber);
+
+      if (seriesTotal && hasSeriesNumbers) {
+        const uniqueNumbers = new Set(seriesBookList.map(book => book.metadata?.seriesNumber));
+        if (uniqueNumbers.size === seriesTotal) {
+          completeSeriesBooks += seriesBookList.length;
+        } else {
+          incompleteSeriesBooks += seriesBookList.length;
+        }
+      } else {
+        unknownSeriesBooks += seriesBookList.length;
+      }
+    }
+
+    categories.get('Series Books')!.count = seriesBooks;
+    categories.get('Complete Series')!.count = completeSeriesBooks;
+    categories.get('Incomplete Series')!.count = incompleteSeriesBooks;
+    categories.get('Unknown Series Status')!.count = unknownSeriesBooks;
+
+    return categories;
+  }
+
+  private convertToStats(categoriesMap: Map<string, { count: number; description: string }>, totalBooks: number): SeriesStats[] {
+    return Array.from(categoriesMap.entries())
+      .filter(([_, data]) => data.count > 0) // Only include categories with books
+      .map(([category, data]) => ({
+        category,
+        count: data.count,
+        percentage: Number(((data.count / totalBooks) * 100).toFixed(1)),
+        description: data.description
+      }))
+      .sort((a, b) => b.count - a.count);
+  }
+
+  private generateLegendLabels(chart: any) {
+    const data = chart.data;
+    if (!data.labels?.length || !data.datasets?.[0]?.data?.length) {
+      return [];
+    }
+
+    const dataset = data.datasets[0];
+    const dataValues = dataset.data as number[];
+
+    return data.labels.map((label: string, index: number) => {
+      const isVisible = typeof chart.getDataVisibility === 'function'
+        ? chart.getDataVisibility(index)
+        : !((chart.getDatasetMeta && chart.getDatasetMeta(0)?.data?.[index]?.hidden) || false);
+
+      return {
+        text: `${label} (${dataValues[index]})`,
+        fillStyle: (dataset.backgroundColor as string[])[index],
+        strokeStyle: '#ffffff',
+        lineWidth: 1,
+        hidden: !isVisible,
+        index,
+        fontColor: '#ffffff'
+      };
+    });
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const dataset = context.dataset;
+    const value = dataset.data[dataIndex] as number;
+    const label = context.chart.data.labels?.[dataIndex] || 'Unknown';
+    const total = (dataset.data as number[]).reduce((a: number, b: number) => a + b, 0);
+    const percentage = ((value / total) * 100).toFixed(1);
+    return `${label}: ${value} books (${percentage}%)`;
+  }
+}
+
diff --git a/booklore-ui/src/app/stats-component/charts-service/top-categories-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/top-categories-chart.service.ts
new file mode 100644
index 000000000..14e70b919
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/top-categories-chart.service.ts
@@ -0,0 +1,223 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError} from 'rxjs/operators';
+import {ChartConfiguration, ChartData, ChartType} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface CategoryStats {
+  category: string;
+  count: number;
+}
+
+const CHART_COLORS = [
+  '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FECA57',
+  '#FF9FF3', '#54A0FF', '#5F27CD', '#00D2D3', '#FF9F43',
+  '#FF6348', '#2ED573', '#3742FA', '#F368E0', '#FF3838',
+  '#FF4757', '#5352ED', '#70A1FF', '#7F8FA6', '#40407A',
+  '#2C2C54', '#40407A', '#706FD3', '#F97F51', '#F8B500'
+] as const;
+
+const HOVER_COLORS = [
+  '#FF5252', '#26A69A', '#2196F3', '#66BB6A', '#FFB74D',
+  '#E91E63', '#3F51B5', '#9C27B0', '#00BCD4', '#FF9800',
+  '#F44336', '#4CAF50', '#2196F3', '#E91E63', '#FF5722',
+  '#FF4081', '#3F51B5', '#5C6BC0', '#607D8B', '#303F9F',
+  '#1A237E', '#303F9F', '#5E35B1', '#FF6F00', '#E65100'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderColor: '#ffffff',
+  borderWidth: 1,
+  hoverBorderColor: '#ffffff',
+  hoverBorderWidth: 2
+} as const;
+
+type CategoriesChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TopCategoriesChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly categoriesChartType: ChartType = 'bar';
+
+  public readonly categoriesChartOptions: ChartConfiguration['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    indexAxis: 'y',
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#666666',
+        borderWidth: 1,
+        callbacks: {
+          title: () => '',
+          label: (context) => {
+            const label = context.label || '';
+            const value = context.parsed.x;
+            return `${label}: ${value} books`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            size: 12
+          }
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            size: 14,
+            weight: 'bold'
+          }
+        }
+      },
+      y: {
+        ticks: {
+          color: '#ffffff',
+          font: {
+            size: 11
+          },
+          maxRotation: 0,
+          callback: function (value, index) {
+            const label = this.getLabelForValue(value as number);
+            return label.length > 25 ? label.substring(0, 25) + '...' : label;
+          }
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.05)'
+        }
+      }
+    }
+  };
+
+  private readonly categoriesChartDataSubject = new BehaviorSubject<CategoriesChartData>({
+    labels: [],
+    datasets: [{
+      label: 'Books',
+      data: [],
+      backgroundColor: [...CHART_COLORS],
+      hoverBackgroundColor: [...HOVER_COLORS],
+      ...CHART_DEFAULTS
+    }]
+  });
+
+  public readonly categoriesChartData$: Observable<CategoriesChartData> =
+    this.categoriesChartDataSubject.asObservable();
+
+  constructor() {
+    this.initializeChartDataSubscription();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private initializeChartDataSubscription(): void {
+    this.getCategoryStats()
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError((error) => {
+          console.error('Error processing category stats:', error);
+          return [];
+        })
+      )
+      .subscribe((stats) => this.updateChartData(stats));
+  }
+
+  private updateChartData(stats: CategoryStats[]): void {
+    try {
+      const reversedStats = [...stats].reverse();
+      const labels = reversedStats.map(s => s.category);
+      const dataValues = reversedStats.map(s => s.count);
+
+      this.categoriesChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books',
+          data: dataValues,
+          backgroundColor: [...CHART_COLORS],
+          hoverBackgroundColor: [...HOVER_COLORS],
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating chart data:', error);
+    }
+  }
+
+  public getCategoryStats(): Observable<CategoryStats[]> {
+    return combineLatest([
+      this.bookService.bookState$,
+      this.libraryFilterService.selectedLibrary$
+    ]).pipe(
+      map(([state, selectedLibraryId]) => {
+        if (!this.isValidBookState(state)) {
+          return [];
+        }
+
+        const filteredBooks = this.filterBooksByLibrary(state.books!, selectedLibraryId);
+        return this.processCategoryStats(filteredBooks);
+      }),
+      catchError((error) => {
+        console.error('Error getting category stats:', error);
+        return [];
+      })
+    );
+  }
+
+  public updateFromStats(stats: CategoryStats[]): void {
+    this.updateChartData(stats);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | number | null): Book[] {
+    return selectedLibraryId
+      ? books.filter(book => book.libraryId === selectedLibraryId)
+      : books;
+  }
+
+  private processCategoryStats(books: Book[]): CategoryStats[] {
+    const categoryMap = new Map<string, number>();
+
+    books.forEach(book => {
+      if (book.metadata?.categories && Array.isArray(book.metadata.categories)) {
+        book.metadata.categories.forEach(category => {
+          if (category) {
+            categoryMap.set(category, (categoryMap.get(category) || 0) + 1);
+          }
+        });
+      }
+    });
+
+    return Array.from(categoryMap.entries())
+      .map(([category, count]) => ({category, count}))
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 15);
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/charts-service/top-series-chart.service.ts b/booklore-ui/src/app/stats-component/charts-service/top-series-chart.service.ts
new file mode 100644
index 000000000..079dda53a
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/charts-service/top-series-chart.service.ts
@@ -0,0 +1,268 @@
+import {inject, Injectable, OnDestroy} from '@angular/core';
+import {BehaviorSubject, EMPTY, Observable, Subject} from 'rxjs';
+import {map, takeUntil, catchError, filter, first, switchMap} from 'rxjs/operators';
+import {ChartConfiguration, ChartData} from 'chart.js';
+
+import {LibraryFilterService} from './library-filter.service';
+import {BookService} from '../../book/service/book.service';
+import {Book} from '../../book/model/book.model';
+
+interface SeriesStats {
+  seriesName: string;
+  bookCount: number;
+}
+
+const CHART_COLORS = [
+  '#4e79a7', '#f28e2c', '#e15759', '#76b7b2',
+  '#59a14f', '#edc949', '#af7aa1', '#ff9da7',
+  '#9c755f', '#bab0ab', '#5778a4', '#e69138',
+  '#d62728', '#6aa7b8', '#54a24b', '#fdd247',
+  '#b07aa1', '#ff9d9a', '#9e6762', '#c9b2d6'
+] as const;
+
+const CHART_DEFAULTS = {
+  borderWidth: 1,
+  hoverBorderWidth: 2,
+  hoverBorderColor: '#ffffff'
+} as const;
+
+type SeriesChartData = ChartData<'bar', number[], string>;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TopSeriesChartService implements OnDestroy {
+  private readonly bookService = inject(BookService);
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly destroy$ = new Subject<void>();
+
+  public readonly seriesChartType = 'bar' as const;
+
+  public readonly seriesChartOptions: ChartConfiguration<'bar'>['options'] = {
+    responsive: true,
+    maintainAspectRatio: false,
+    indexAxis: 'y',
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11.5
+          },
+          precision: 0
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.1)'
+        },
+        title: {
+          display: true,
+          text: 'Number of Books',
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 12
+          }
+        }
+      },
+      y: {
+        ticks: {
+          color: '#ffffff',
+          font: {
+            family: "'Inter', sans-serif",
+            size: 11
+          },
+          maxTicksLimit: 20
+        },
+        grid: {
+          color: 'rgba(255, 255, 255, 0.05)'
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0, 0, 0, 0.9)',
+        titleColor: '#ffffff',
+        bodyColor: '#ffffff',
+        borderColor: '#ffffff',
+        borderWidth: 1,
+        cornerRadius: 6,
+        displayColors: true,
+        padding: 12,
+        titleFont: {size: 14, weight: 'bold'},
+        bodyFont: {size: 12},
+        callbacks: {
+          title: (context) => {
+            const dataIndex = context[0].dataIndex;
+            const stats = this.getLastCalculatedStats();
+            return stats[dataIndex]?.seriesName || 'Unknown Series';
+          },
+          label: this.formatTooltipLabel.bind(this)
+        }
+      },
+      datalabels: {
+        display: true,
+        color: '#ffffff',
+        font: {
+          size: 10,
+          family: "'Inter', sans-serif",
+          weight: 'bold'
+        },
+        align: 'center',
+        offset: 8,
+        formatter: (value: number) => value.toString()
+      }
+    },
+    interaction: {
+      intersect: false,
+      mode: 'point'
+    }
+  };
+
+  private readonly seriesChartDataSubject = new BehaviorSubject<SeriesChartData>({
+    labels: [],
+    datasets: []
+  });
+
+  public readonly seriesChartData$: Observable<SeriesChartData> = this.seriesChartDataSubject.asObservable();
+
+  constructor() {
+    this.bookService.bookState$
+      .pipe(
+        filter(state => state.loaded),
+        first(),
+        switchMap(() =>
+          this.libraryFilterService.selectedLibrary$.pipe(
+            takeUntil(this.destroy$)
+          )
+        ),
+        catchError((error) => {
+          console.error('Error processing top series stats:', error);
+          return EMPTY;
+        })
+      )
+      .subscribe(() => {
+        const stats = this.calculateTopSeriesStats();
+        this.updateChartData(stats);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private updateChartData(stats: SeriesStats[]): void {
+    try {
+      this.lastCalculatedStats = stats;
+      const labels = stats.map(s => this.truncateTitle(s.seriesName, 30));
+      const dataValues = stats.map(s => s.bookCount);
+      const colors = this.getColorsForData(stats.length);
+
+      this.seriesChartDataSubject.next({
+        labels,
+        datasets: [{
+          label: 'Books',
+          data: dataValues,
+          backgroundColor: colors,
+          borderColor: colors,
+          ...CHART_DEFAULTS
+        }]
+      });
+    } catch (error) {
+      console.error('Error updating series chart data:', error);
+    }
+  }
+
+  private calculateTopSeriesStats(): SeriesStats[] {
+    const currentState = this.bookService.getCurrentBookState();
+    const selectedLibraryId = this.libraryFilterService.getCurrentSelectedLibrary();
+
+    if (!this.isValidBookState(currentState)) {
+      return [];
+    }
+
+    const filteredBooks = this.filterBooksByLibrary(currentState.books!, String(selectedLibraryId));
+    return this.processTopSeriesStats(filteredBooks);
+  }
+
+  private isValidBookState(state: any): boolean {
+    return state?.loaded && state?.books && Array.isArray(state.books) && state.books.length > 0;
+  }
+
+  private filterBooksByLibrary(books: Book[], selectedLibraryId: string | null): Book[] {
+    return selectedLibraryId && selectedLibraryId !== 'null'
+      ? books.filter(book => String(book.libraryId) === selectedLibraryId)
+      : books;
+  }
+
+  private processTopSeriesStats(books: Book[]): SeriesStats[] {
+    if (books.length === 0) {
+      return [];
+    }
+
+    const seriesMap = this.buildSeriesMap(books);
+    return this.convertMapToStats(seriesMap);
+  }
+
+  private buildSeriesMap(books: Book[]): Map<string, number> {
+    const seriesMap = new Map<string, number>();
+
+    for (const book of books) {
+      const seriesName = book.metadata?.seriesName;
+      if (seriesName && seriesName.trim()) {
+        const normalizedName = seriesName.trim();
+        seriesMap.set(normalizedName, (seriesMap.get(normalizedName) || 0) + 1);
+      }
+    }
+
+    return seriesMap;
+  }
+
+  private convertMapToStats(seriesMap: Map<string, number>): SeriesStats[] {
+    return Array.from(seriesMap.entries())
+      .map(([seriesName, bookCount]) => ({
+        seriesName,
+        bookCount
+      }))
+      .sort((a, b) => b.bookCount - a.bookCount)
+      .slice(0, 20);
+  }
+
+  private getColorsForData(dataLength: number): string[] {
+    const colors = [...CHART_COLORS];
+    while (colors.length < dataLength) {
+      colors.push(...CHART_COLORS);
+    }
+    return colors.slice(0, dataLength);
+  }
+
+  private formatTooltipLabel(context: any): string {
+    const dataIndex = context.dataIndex;
+    const stats = this.getLastCalculatedStats();
+
+    if (!stats || dataIndex >= stats.length) {
+      return `${context.parsed.x} books`;
+    }
+
+    const series = stats[dataIndex];
+    const bookCount = series.bookCount;
+    const bookText = bookCount === 1 ? 'book' : 'books';
+
+    return `${bookCount} ${bookText}`;
+  }
+
+  private lastCalculatedStats: SeriesStats[] = [];
+
+  private getLastCalculatedStats(): SeriesStats[] {
+    return this.lastCalculatedStats;
+  }
+
+  private truncateTitle(title: string, maxLength: number): string {
+    return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/stats-component.html b/booklore-ui/src/app/stats-component/stats-component.html
new file mode 100644
index 000000000..1be376c4b
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/stats-component.html
@@ -0,0 +1,438 @@
+<div class="stats-container">
+  <div class="header-card">
+    <div class="filter-section">
+      <div class="library-filter">
+        <div class="select-row">
+          <label for="library-dropdown">Library Statistics</label>
+          <p-select
+            id="library-dropdown"
+            [options]="libraryOptions"
+            [(ngModel)]="selectedLibrary"
+            optionLabel="name"
+            size="small"
+            placeholder="Select a library"
+            (onChange)="onLibraryChange()"
+            appendTo="body"
+            [style]="{'min-width': '200px'}"
+            class="library-dropdown">
+          </p-select>
+
+          <p-button
+            outlined
+            size="small"
+            (onClick)="toggleConfigPanel()"
+            icon="pi pi-cog">
+          </p-button>
+        </div>
+
+        <div class="library-totals" role="status" aria-live="polite">
+          <div class="total-item total-books" title="Total books">
+            <i class="pi pi-book"></i>
+            <span class="total-label">Books</span>
+            <span class="total-value">{{ totalBooks$ | async }}</span>
+          </div>
+
+          <div class="total-item total-authors" title="Total authors">
+            <i class="pi pi-users"></i>
+            <span class="total-label">Authors</span>
+            <span class="total-value">{{ totalAuthors$ | async }}</span>
+          </div>
+
+          <div class="total-item total-series" title="Total series">
+            <i class="pi pi-bookmark"></i>
+            <span class="total-label">Series</span>
+            <span class="total-value">{{ totalSeries$ | async }}</span>
+          </div>
+
+          <div class="total-item total-publishers" title="Total publishers">
+            <i class="pi pi-building"></i>
+            <span class="total-label">Publishers</span>
+            <span class="total-value">{{ totalPublishers$ | async }}</span>
+          </div>
+
+          <div class="total-item total-size" title="Total size">
+            <i class="pi pi-file"></i>
+            <span class="total-label">Library Size</span>
+            <span class="total-value">{{ totalSize$ | async }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Chart Configuration Modal Overlay -->
+  @if (showConfigPanel) {
+    <div class="config-modal-overlay" (click)="closeConfigPanel()">
+      <div class="config-modal" (click)="$event.stopPropagation()">
+        <div class="config-modal-header">
+          <h3><i class="pi pi-cog"></i> Chart Configuration</h3>
+          <button type="button" class="close-btn" (click)="closeConfigPanel()" title="Close">
+            <i class="pi pi-times"></i>
+          </button>
+        </div>
+
+        <div class="config-modal-actions">
+          <button type="button" class="config-action-btn enable-all" (click)="enableAllCharts()">
+            <i class="pi pi-check"></i> Enable All
+          </button>
+          <button type="button" class="config-action-btn disable-all" (click)="disableAllCharts()">
+            <i class="pi pi-times"></i> Disable All
+          </button>
+          <button type="button" class="config-action-btn reset-order" (click)="resetChartOrder()">
+            <i class="pi pi-refresh"></i> Reset Order
+          </button>
+          <button type="button" class="config-action-btn reset-positions" (click)="resetChartPositions()">
+            <i class="pi pi-map"></i> Reset Positions
+          </button>
+        </div>
+
+        <div class="config-modal-content">
+          <div class="config-categories">
+            <div class="config-category">
+              <h4>Small Charts</h4>
+              <div class="chart-toggles">
+                @for (chart of getChartsByCategory('small'); track chart.id) {
+                  <div class="chart-toggle">
+                    <input
+                      type="checkbox"
+                      [id]="'chart-' + chart.id"
+                      [checked]="chart.enabled"
+                      (change)="toggleChart(chart.id)">
+                    <label [for]="'chart-' + chart.id">{{ chart.name }}</label>
+                  </div>
+                }
+              </div>
+            </div>
+
+            <div class="config-category">
+              <h4>Medium Charts</h4>
+              <div class="chart-toggles">
+                @for (chart of getChartsByCategory('medium'); track chart.id) {
+                  <div class="chart-toggle">
+                    <input
+                      type="checkbox"
+                      [id]="'chart-' + chart.id"
+                      [checked]="chart.enabled"
+                      (change)="toggleChart(chart.id)">
+                    <label [for]="'chart-' + chart.id">{{ chart.name }}</label>
+                  </div>
+                }
+              </div>
+            </div>
+
+            <div class="config-category">
+              <h4>Large Charts</h4>
+              <div class="chart-toggles">
+                @for (chart of getChartsByCategory('large'); track chart.id) {
+                  <div class="chart-toggle">
+                    <input
+                      type="checkbox"
+                      [id]="'chart-' + chart.id"
+                      [checked]="chart.enabled"
+                      (change)="toggleChart(chart.id)">
+                    <label [for]="'chart-' + chart.id">{{ chart.name }}</label>
+                  </div>
+                }
+              </div>
+            </div>
+
+            <div class="config-category">
+              <h4>Full Width Charts</h4>
+              <div class="chart-toggles">
+                @for (chart of getChartsByCategory('full-width'); track chart.id) {
+                  <div class="chart-toggle">
+                    <input
+                      type="checkbox"
+                      [id]="'chart-' + chart.id"
+                      [checked]="chart.enabled"
+                      (change)="toggleChart(chart.id)">
+                    <label [for]="'chart-' + chart.id">{{ chart.name }}</label>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+
+  @if (!isLoading && hasData) {
+    <div class="charts-grid"
+         cdkDropList
+         (cdkDropListDropped)="onChartReorder($event)"
+         [cdkDropListData]="getEnabledChartsSorted()">
+
+      @for (chartConfig of getEnabledChartsSorted(); track chartConfig.id) {
+        <div class="chart-container"
+             cdkDrag
+             [cdkDragData]="chartConfig"
+             [class]="'chart-section ' + chartConfig.category">
+
+          <div class="drag-handle" cdkDragHandle title="Drag to reorder">
+            <i class="pi pi-bars"></i>
+          </div>
+
+          @switch (chartConfig.id) {
+            @case ('readingStatus') {
+              <h3>Reading Status</h3>
+              <div class="chart-wrapper status-chart">
+                <canvas baseChart
+                        [data]="(readStatusChartService.statusChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="readStatusChartService.statusChartOptions"
+                        [type]="readStatusChartService.statusChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('bookFormats') {
+              <h3>Book Formats</h3>
+              <div class="chart-wrapper book-type-chart">
+                <canvas baseChart
+                        [data]="(bookTypeChartService.bookTypeChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="bookTypeChartService.bookTypeChartOptions"
+                        [type]="bookTypeChartService.bookTypeChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('languageDistribution') {
+              <h3>Language Distribution</h3>
+              <div class="chart-wrapper language-chart">
+                <canvas baseChart
+                        [data]="(languageDistributionChartService.languageChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="languageDistributionChartService.languageChartOptions"
+                        [type]="languageDistributionChartService.languageChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('bookMetadataScore') {
+              <h3>Book Metadata Score</h3>
+              <div class="chart-wrapper quality-chart">
+                <canvas baseChart
+                        [data]="(bookQualityScoreChartService.qualityChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="bookQualityScoreChartService.qualityChartOptions"
+                        [type]="bookQualityScoreChartService.qualityChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('topAuthors') {
+              <h3>Top 25 Authors (with Reading Breakdown)</h3>
+              <div class="chart-wrapper author-chart">
+                <canvas baseChart
+                        [data]="(authorPopularityChartService.authorChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="authorPopularityChartService.authorChartOptions"
+                        [type]="authorPopularityChartService.authorChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('topCategories') {
+              <h3>Top 25 Categories (with Reading Breakdown)</h3>
+              <div class="chart-wrapper completion-chart">
+                <canvas baseChart
+                        [data]="(readingCompletionChartService.completionChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="readingCompletionChartService.completionChartOptions"
+                        [type]="readingCompletionChartService.completionChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('topBooksBySize') {
+              <h3>Top 20 Largest Books by File Size</h3>
+              <div class="chart-wrapper book-size-chart">
+                <canvas baseChart
+                        [data]="(bookSizeChartService.bookSizeChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="bookSizeChartService.bookSizeChartOptions"
+                        [type]="bookSizeChartService.bookSizeChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('monthlyReadingPatterns') {
+              <h3>Monthly Reading Patterns</h3>
+              <div class="chart-wrapper monthly-patterns-chart">
+                <canvas baseChart
+                        [data]="(monthlyReadingPatternsChartService.monthlyPatternsChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="monthlyReadingPatternsChartService.monthlyPatternsChartOptions"
+                        [type]="monthlyReadingPatternsChartService.monthlyPatternsChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('readingProgress') {
+              <h3>Reading Progress</h3>
+              <div class="chart-wrapper progress-chart">
+                <canvas baseChart
+                        [data]="(readingProgressChartService.progressChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="readingProgressChartService.progressChartOptions"
+                        [type]="readingProgressChartService.progressChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('externalRating') {
+              <h3>External Rating Distribution</h3>
+              <div class="chart-wrapper rating-chart">
+                <canvas baseChart
+                        [data]="(bookRatingChartService.ratingChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="bookRatingChartService.ratingChartOptions"
+                        [type]="bookRatingChartService.ratingChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('personalRating') {
+              <h3>Personal Rating Distribution</h3>
+              <div class="chart-wrapper personal-rating-chart">
+                <canvas baseChart
+                        [data]="(personalRatingChartService.personalRatingChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="personalRatingChartService.personalRatingChartOptions"
+                        [type]="personalRatingChartService.personalRatingChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('pageCount') {
+              <h3>Page Count Distribution</h3>
+              <div class="chart-wrapper page-count-chart">
+                <canvas baseChart
+                        [data]="(pageCountChartService.pageCountChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="pageCountChartService.pageCountChartOptions"
+                        [type]="pageCountChartService.pageCountChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('readingVelocityTimeline') {
+              <h3>Reading Velocity Timeline</h3>
+              <div class="chart-wrapper velocity-timeline-chart">
+                <canvas baseChart
+                        [data]="(readingVelocityTimelineChartService.velocityTimelineChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="readingVelocityTimelineChartService.velocityTimelineChartOptions"
+                        [type]="readingVelocityTimelineChartService.velocityTimelineChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('topSeries') {
+              <h3>Top 20 Series by Book Count</h3>
+              <div class="chart-wrapper top-series-chart">
+                <canvas baseChart
+                        [data]="(topSeriesChartService.seriesChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="topSeriesChartService.seriesChartOptions"
+                        [type]="topSeriesChartService.seriesChartType">
+                </canvas>
+              </div>
+            }
+
+            @case ('publicationYear') {
+              <h3>Publication Year Timeline</h3>
+              <div class="chart-wrapper year-chart">
+                <canvas baseChart
+                        [data]="(publicationYearChartService.yearChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="publicationYearChartService.yearChartOptions"
+                        [type]="publicationYearChartService.yearChartType"
+                        [plugins]="[ChartDataLabels]">
+                </canvas>
+              </div>
+            }
+
+            @case ('finishedBooksTimeline') {
+              <h3>Books Finished Timeline (Per Month)</h3>
+              <div class="chart-wrapper finished-books-timeline-chart">
+                <canvas baseChart
+                        [data]="(finishedBooksTimelineChartService.finishedBooksChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="finishedBooksTimelineChartService.finishedBooksChartOptions"
+                        [type]="finishedBooksTimelineChartService.finishedBooksChartType"
+                        [plugins]="[ChartDataLabels]">
+                </canvas>
+              </div>
+            }
+
+            @case ('readingDNA') {
+              <h3>Your Reading DNA Profile</h3>
+              <div class="chart-description">
+                Discover your unique reading personality based on behavioral patterns and preferences
+              </div>
+              <div class="chart-wrapper reading-dna-chart">
+                <canvas baseChart
+                        [data]="(readingDNAChartService.readingDNAChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="readingDNAChartService.readingDNAChartOptions"
+                        [type]="readingDNAChartService.readingDNAChartType">
+                </canvas>
+              </div>
+              <div class="dna-insights">
+                @if ((readingDNAChartService.readingDNAChartData$ | async)?.datasets?.[0]?.data?.length) {
+                  <div class="insights-grid">
+                    @for (insight of readingDNAChartService.getPersonalityInsights(); track trackByTrait($index, insight)) {
+                      <div class="insight-card">
+                        <div class="insight-header">
+                          <div class="trait-dot" [style.background-color]="insight.color"></div>
+                          <span class="trait-name">{{ insight.trait }}</span>
+                          <span class="trait-score">{{ insight.score.toFixed(0) }}%</span>
+                        </div>
+                        <div class="insight-bar">
+                          <div class="insight-fill" [style.width.%]="insight.score" [style.background-color]="insight.color"></div>
+                        </div>
+                        <p class="insight-description">{{ insight.description }}</p>
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+
+            @case ('readingHabits') {
+              <h3>Reading Habits Analysis</h3>
+              <div class="chart-description">
+                Analyze your behavioral reading patterns, routines, and systematic approaches
+              </div>
+              <div class="chart-wrapper reading-habits-chart">
+                <canvas baseChart
+                        [data]="(readingHabitsChartService.readingHabitsChartData$ | async) ?? {labels: [], datasets: []}"
+                        [options]="readingHabitsChartService.readingHabitsChartOptions"
+                        [type]="readingHabitsChartService.readingHabitsChartType">
+                </canvas>
+              </div>
+              <div class="dna-insights">
+                @if ((readingHabitsChartService.readingHabitsChartData$ | async)?.datasets?.[0]?.data?.length) {
+                  <div class="insights-grid">
+                    @for (habit of readingHabitsChartService.getHabitInsights(); track trackByHabit($index, habit)) {
+                      <div class="insight-card">
+                        <div class="insight-header">
+                          <div class="trait-dot" [style.background-color]="habit.color"></div>
+                          <span class="trait-name">{{ habit.habit }}</span>
+                          <span class="trait-score">{{ habit.score.toFixed(0) }}%</span>
+                        </div>
+                        <div class="insight-bar">
+                          <div class="insight-fill" [style.width.%]="habit.score" [style.background-color]="habit.color"></div>
+                        </div>
+                        <p class="insight-description">{{ habit.description }}</p>
+                      </div>
+                    }
+                  </div>
+                }
+              </div>
+            }
+          }
+        </div>
+      }
+    </div>
+  }
+
+  @if (isLoading) {
+    <div class="loading-message">
+      Loading statistics...
+    </div>
+  }
+
+  @if (!isLoading && !hasData) {
+    <div class="no-data-message">
+      No data available.
+      <small>Make sure your library contains books with metadata.</small>
+    </div>
+  }
+</div>
diff --git a/booklore-ui/src/app/stats-component/stats-component.scss b/booklore-ui/src/app/stats-component/stats-component.scss
new file mode 100644
index 000000000..cf18d9cc4
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/stats-component.scss
@@ -0,0 +1,1017 @@
+.stats-container {
+  max-width: 2500px;
+  margin: 0 auto;
+  background: transparent;
+  height: calc(100dvh - 6.25rem);
+  overflow-y: auto;
+}
+
+.header-card {
+  background: var(--surface-card, rgba(255, 255, 255, 0.05));
+  border-radius: 8px;
+  padding: 25px;
+  margin-bottom: 30px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: visible;
+}
+
+.filter-section {
+  display: flex;
+  justify-content: center;
+
+  .library-filter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+
+    .select-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      width: auto;
+    }
+
+    label {
+      color: var(--text-color, #ffffff);
+      font-weight: 500;
+      white-space: nowrap;
+      font-size: 1.15rem;
+    }
+
+    .library-totals {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+      margin-top: 8px;
+      font-size: 0.95rem;
+      color: var(--text-color-secondary, #cccccc);
+      flex-wrap: wrap;
+
+      .total-item {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        background: rgba(255, 255, 255, 0.02);
+        padding: 6px 10px;
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.04);
+      }
+
+      .pi {
+        font-size: 1.35rem;
+        color: var(--primary-color, #80bdff);
+      }
+
+      .total-label {
+        color: var(--text-color-secondary, #cccccc);
+        font-size: 0.9rem;
+        white-space: nowrap;
+      }
+
+      .total-value {
+        color: var(--text-color, #ffffff);
+        font-weight: 600;
+        margin-left: 4px;
+        font-size: 1.35rem;
+      }
+    }
+  }
+}
+
+.chart-config-btn {
+  background: var(--primary-color, #80bdff);
+  border: 1px solid var(--primary-color, #80bdff);
+  color: #ffffff;
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--primary-color-darker, #6ba3e0);
+    border-color: var(--primary-color-darker, #6ba3e0);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(128, 189, 255, 0.3);
+  }
+
+  .pi {
+    font-size: 0.9rem;
+  }
+}
+
+.config-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.config-modal {
+  background: var(--surface-card, rgba(30, 30, 30, 0.95));
+  border-radius: 12px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  width: 100%;
+  max-width: 800px;
+  max-height: 80vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .config-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 25px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--surface-ground, rgba(40, 40, 40, 0.8));
+
+    h3 {
+      color: var(--text-color, #ffffff);
+      font-weight: 500;
+      font-size: 1.2rem;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      .pi {
+        color: var(--primary-color, #80bdff);
+        font-size: 1.1rem;
+      }
+    }
+
+    .close-btn {
+      background: transparent;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: var(--text-color, #ffffff);
+      padding: 8px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+        border-color: rgba(255, 255, 255, 0.3);
+      }
+
+      .pi {
+        font-size: 0.9rem;
+      }
+    }
+  }
+
+  .config-modal-actions {
+    display: flex;
+    gap: 12px;
+    padding: 20px 25px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    background: var(--surface-ground, rgba(35, 35, 35, 0.6));
+
+    .config-action-btn {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: var(--text-color, #ffffff);
+      padding: 10px 16px;
+      border-radius: 6px;
+      font-size: 0.9rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      justify-content: center;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.15);
+        border-color: rgba(255, 255, 255, 0.3);
+        transform: translateY(-1px);
+      }
+
+      &.enable-all {
+        background: rgba(34, 197, 94, 0.2);
+        border-color: rgba(34, 197, 94, 0.4);
+        color: #22c55e;
+
+        &:hover {
+          background: rgba(34, 197, 94, 0.3);
+          border-color: rgba(34, 197, 94, 0.6);
+        }
+      }
+
+      &.disable-all {
+        background: rgba(239, 68, 68, 0.2);
+        border-color: rgba(239, 68, 68, 0.4);
+        color: #ef4444;
+
+        &:hover {
+          background: rgba(239, 68, 68, 0.3);
+          border-color: rgba(239, 68, 68, 0.6);
+        }
+      }
+
+      &.reset-order {
+        background: rgba(251, 191, 36, 0.2);
+        border-color: rgba(251, 191, 36, 0.4);
+        color: #fbbf24;
+
+        &:hover {
+          background: rgba(251, 191, 36, 0.3);
+          border-color: rgba(251, 191, 36, 0.6);
+        }
+      }
+
+      &.reset-positions {
+        background: rgba(168, 85, 247, 0.2);
+        border-color: rgba(168, 85, 247, 0.4);
+        color: #a855f7;
+
+        &:hover {
+          background: rgba(168, 85, 247, 0.3);
+          border-color: rgba(168, 85, 247, 0.6);
+        }
+      }
+
+      .pi {
+        font-size: 0.85rem;
+      }
+    }
+  }
+
+  .config-modal-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 25px;
+
+    .config-categories {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 25px;
+
+      .config-category {
+        h4 {
+          color: var(--text-color, #ffffff);
+          font-size: 1rem;
+          font-weight: 600;
+          margin: 0 0 15px 0;
+          padding-bottom: 8px;
+          border-bottom: 2px solid var(--primary-color, #80bdff);
+          display: flex;
+          align-items: center;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+
+        .chart-toggles {
+          display: flex;
+          flex-direction: column;
+
+          .chart-toggle {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 8px;
+            border-radius: 6px;
+            transition: background-color 0.2s ease;
+
+            &:hover {
+              background: rgba(255, 255, 255, 0.05);
+            }
+
+            input[type="checkbox"] {
+              width: 18px;
+              height: 18px;
+              accent-color: var(--primary-color, #80bdff);
+              cursor: pointer;
+            }
+
+            label {
+              color: var(--text-color-secondary, #cccccc);
+              font-size: 0.9rem;
+              cursor: pointer;
+              user-select: none;
+              transition: color 0.2s ease;
+              flex: 1;
+
+              &:hover {
+                color: var(--text-color, #ffffff);
+              }
+            }
+
+            input[type="checkbox"]:checked + label {
+              color: var(--text-color, #ffffff);
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  margin-bottom: 30px;
+  position: relative;
+}
+
+.chart-container {
+  position: relative;
+
+  &.cdk-drag {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  &.cdk-drag-animating {
+    transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  &.cdk-drag-disabled {
+    cursor: default;
+  }
+
+  &.cdk-drag-preview {
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(15px);
+    border: 2px solid var(--primary-color, #80bdff);
+    border-radius: 8px;
+    transform: rotate(2deg);
+  }
+
+  &.cdk-drag-placeholder {
+    opacity: 0.3;
+    border: 2px dashed var(--primary-color, #80bdff);
+    background: transparent !important;
+  }
+}
+
+.cdk-drop-list-dragging .chart-container:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.drag-handle {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  padding: 6px;
+  cursor: default;
+  opacity: 0;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.8);
+    border-color: var(--primary-color, #80bdff);
+  }
+
+  &:active {
+    background: rgba(0, 0, 0, 0.9);
+    transform: scale(1.1);
+  }
+
+  .pi {
+    color: var(--text-color, #ffffff);
+    font-size: 0.8rem;
+    cursor: grab;
+
+    &:hover {
+      cursor: grab;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+.chart-container:hover .drag-handle {
+  opacity: 1;
+}
+
+.chart-section {
+  background: var(--surface-card, rgba(255, 255, 255, 0.05));
+  border-radius: 8px;
+  padding: 15px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+
+  &:hover {
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+
+  &.small {
+    grid-column: span 1;
+    padding: 12px;
+  }
+
+  &.medium {
+    grid-column: span 1;
+    padding: 15px;
+  }
+
+  &.large {
+    grid-column: span 2;
+    padding: 18px;
+  }
+
+  &.full-width {
+    grid-column: 1 / -1;
+  }
+
+  h3 {
+    color: var(--text-color, #ffffff);
+    margin: 0 0 15px 0;
+    font-weight: 500;
+    font-size: 1.1rem;
+
+    .small & {
+      font-size: 1rem;
+      margin-bottom: 10px;
+    }
+
+    .large & {
+      font-size: 1.2rem;
+      margin-bottom: 20px;
+    }
+  }
+
+  .chart-description {
+    text-align: center;
+    color: var(--text-color-secondary, #cccccc);
+    font-size: 0.9rem;
+    margin-bottom: 15px;
+    line-height: 1.4;
+  }
+
+  .chart-wrapper {
+    position: relative;
+    width: 100%;
+    height: auto;
+
+    canvas {
+      width: 100% !important;
+      height: auto !important;
+    }
+
+    &.status-chart,
+    &.book-type-chart,
+    &.language-chart,
+    &.series-chart {
+      height: 300px;
+    }
+
+    &.progress-chart,
+    &.rating-chart,
+    &.personal-rating-chart,
+    &.page-count-chart,
+    &.reading-speed-chart,
+    &.quality-chart,
+    &.velocity-chart {
+      height: 320px;
+    }
+
+    &.categories-chart,
+    &.author-chart,
+    &.completion-chart,
+    &.publisher-chart,
+    &.author-rating-chart,
+    &.book-size-chart {
+      height: 400px;
+    }
+
+    &.year-chart,
+    &.books-added-chart,
+    &.monthly-chart,
+    &.series-completion-chart,
+    &.velocity-timeline-chart,
+    &.monthly-patterns-chart,
+    &.finished-books-timeline-chart {
+      height: 350px;
+    }
+
+    &.series-length-chart,
+    &.author-series-chart,
+    &.top-series-chart {
+      height: 400px;
+    }
+
+    &.reading-profile-radar-chart,
+    &.reading-dna-chart,
+    &.reading-habits-chart {
+      height: 450px;
+    }
+  }
+}
+
+.loading-message,
+.no-data-message {
+  text-align: center;
+  padding: 50px;
+  color: var(--text-color-secondary, #cccccc);
+  font-size: 16px;
+}
+
+.loading-message {
+  font-style: italic;
+}
+
+.no-data-message {
+  color: var(--text-color-secondary, #999999);
+}
+
+.dna-insights {
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+
+  .insights-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 12px;
+  }
+
+  .insight-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    padding: 12px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.06);
+      border-color: rgba(255, 255, 255, 0.15);
+      transform: translateY(-1px);
+    }
+
+    .insight-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      .trait-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+
+      .trait-name {
+        color: #ffffff;
+        font-weight: 500;
+        font-size: 0.95rem;
+        flex: 1;
+      }
+
+      .trait-score {
+        color: #ffffff;
+        font-weight: 800;
+        font-size: 0.9rem;
+      }
+    }
+
+    .insight-bar {
+      background: rgba(255, 255, 255, 0.1);
+      height: 4px;
+      border-radius: 2px;
+      overflow: hidden;
+      margin-bottom: 8px;
+
+      .insight-fill {
+        height: 100%;
+        border-radius: 2px;
+        transition: width 0.8s ease;
+        opacity: 0.8;
+      }
+    }
+
+    .insight-description {
+      color: var(--text-color-secondary, #cccccc);
+      font-size: 0.85rem;
+      line-height: 1.4;
+      margin: 0;
+      font-style: italic;
+    }
+  }
+}
+
+.intelligence-insights {
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid rgba(0, 212, 170, 0.2);
+
+  .insights-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 12px;
+  }
+
+  .insight-card {
+    background: rgba(0, 212, 170, 0.05);
+    border: 1px solid rgba(0, 212, 170, 0.15);
+    border-radius: 6px;
+    padding: 12px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(0, 212, 170, 0.08);
+      border-color: rgba(0, 212, 170, 0.25);
+      box-shadow: 0 4px 12px rgba(0, 212, 170, 0.1);
+      transform: translateY(-1px);
+    }
+
+    .insight-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      .trait-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+
+      .trait-name {
+        color: #ffffff;
+        font-weight: 500;
+        font-size: 0.95rem;
+        flex: 1;
+      }
+
+      .trait-score {
+        color: #00d4aa;
+        font-weight: 600;
+        font-size: 0.9rem;
+      }
+    }
+
+    .insight-bar {
+      background: rgba(0, 212, 170, 0.15);
+      height: 4px;
+      border-radius: 2px;
+      overflow: hidden;
+      margin-bottom: 8px;
+
+      .insight-fill {
+        height: 100%;
+        border-radius: 2px;
+        transition: width 0.8s ease;
+        opacity: 0.9;
+      }
+    }
+
+    .insight-description {
+      color: var(--text-color-secondary, #cccccc);
+      font-size: 0.85rem;
+      line-height: 1.4;
+      margin: 0;
+      font-style: italic;
+    }
+  }
+}
+
+@media (max-width: 1600px) {
+  .charts-grid {
+    grid-template-columns: repeat(3, 1fr);
+
+    .chart-section.small {
+      grid-column: span 1;
+    }
+
+    .chart-section.medium {
+      grid-column: span 1;
+    }
+
+    .chart-section.large {
+      grid-column: span 2;
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .charts-grid {
+    grid-template-columns: repeat(2, 1fr);
+
+    .chart-section.small,
+    .chart-section.medium {
+      grid-column: span 1;
+    }
+
+    .chart-section.large {
+      grid-column: span 2;
+    }
+
+    .chart-section.full-width {
+      grid-column: 1 / -1;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-container {
+    padding: 15px;
+    max-width: 100%;
+  }
+
+  .header-card {
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  .filter-section {
+    .library-filter {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 8px;
+
+      .select-row {
+        flex-direction: column;
+        gap: 10px;
+        align-items: stretch;
+      }
+
+      label {
+        text-align: center;
+      }
+
+      .library-totals {
+        justify-content: center;
+      }
+    }
+  }
+
+  .chart-config-btn {
+    justify-content: center;
+    padding: 12px 16px;
+  }
+
+  .config-modal {
+    max-width: 95%;
+    max-height: 85vh;
+    margin: 10px;
+
+    .config-modal-header {
+      padding: 15px 20px;
+
+      h3 {
+        font-size: 1.1rem;
+      }
+    }
+
+    .config-modal-actions {
+      padding: 15px 20px;
+      flex-direction: column;
+      gap: 8px;
+
+      .config-action-btn {
+        flex: none;
+      }
+    }
+
+    .config-modal-content {
+      padding: 15px 20px;
+
+      .config-categories {
+        grid-template-columns: 1fr;
+        gap: 20px;
+      }
+    }
+  }
+
+  .charts-grid {
+    grid-template-columns: 1fr;
+    gap: 15px;
+
+    .chart-container {
+      &.small,
+      &.medium,
+      &.large,
+      &.full-width {
+        grid-column: 1;
+      }
+    }
+  }
+
+  .drag-handle {
+    opacity: 1;
+    top: 4px;
+    right: 4px;
+    width: 32px;
+    height: 32px;
+    background: rgba(0, 0, 0, 0.7);
+
+    .pi {
+      font-size: 0.9rem;
+    }
+  }
+
+  .chart-section {
+    padding: 12px;
+  }
+
+  .chart-wrapper {
+    &.status-chart,
+    &.book-type-chart,
+    &.language-chart,
+    &.series-chart {
+      height: 250px;
+    }
+
+    &.progress-chart,
+    &.rating-chart,
+    &.personal-rating-chart,
+    &.page-count-chart,
+    &.reading-speed-chart,
+    &.quality-chart,
+    &.velocity-chart {
+      height: 280px;
+    }
+
+    &.categories-chart,
+    &.author-chart,
+    &.completion-chart,
+    &.publisher-chart,
+    &.author-rating-chart,
+    &.book-size-chart {
+      height: 350px;
+    }
+
+    &.year-chart,
+    &.books-added-chart,
+    &.monthly-chart,
+    &.series-completion-chart,
+    &.velocity-timeline-chart,
+    &.monthly-patterns-chart,
+    &.finished-books-timeline-chart {
+      height: 300px;
+    }
+
+    &.series-length-chart,
+    &.author-series-chart,
+    &.top-series-chart {
+      height: 280px;
+    }
+
+    &.reading-profile-radar-chart,
+    &.reading-dna-chart,
+    &.reading-habits-chart {
+      height: 350px;
+    }
+  }
+
+  .dna-insights,
+  .intelligence-insights {
+    .insights-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .insight-card {
+      padding: 10px;
+
+      .insight-header {
+        .trait-name {
+          font-size: 0.9rem;
+        }
+
+        .trait-score {
+          font-size: 0.85rem;
+        }
+      }
+
+      .insight-description {
+        font-size: 0.8rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .header-card {
+    padding: 15px;
+  }
+
+  .charts-grid {
+    gap: 12px;
+  }
+
+  .chart-wrapper {
+    &.status-chart,
+    &.book-type-chart,
+    &.language-chart,
+    &.series-chart {
+      height: 220px;
+    }
+
+    &.progress-chart,
+    &.rating-chart,
+    &.personal-rating-chart,
+    &.page-count-chart,
+    &.reading-speed-chart,
+    &.quality-chart,
+    &.velocity-chart {
+      height: 250px;
+    }
+
+    &.categories-chart,
+    &.author-chart,
+    &.completion-chart,
+    &.publisher-chart,
+    &.author-rating-chart,
+    &.book-size-chart {
+      height: 300px;
+    }
+
+    &.year-chart,
+    &.books-added-chart,
+    &.monthly-chart,
+    &.series-completion-chart,
+    &.velocity-timeline-chart,
+    &.monthly-patterns-chart,
+    &.finished-books-timeline-chart {
+      height: 250px;
+    }
+
+    &.series-length-chart,
+    &.author-series-chart,
+    &.top-series-chart {
+      height: 250px;
+    }
+
+    .reading-profile-radar-chart,
+    &.reading-dna-chart,
+    &.reading-habits-chart {
+      height: 300px;
+    }
+  }
+
+  .config-modal-overlay {
+    padding: 10px;
+  }
+
+  .config-modal {
+    max-width: 100%;
+    max-height: 90vh;
+
+    .config-modal-header {
+      padding: 12px 15px;
+
+      h3 {
+        font-size: 1rem;
+      }
+    }
+
+    .config-modal-actions {
+      padding: 12px 15px;
+    }
+
+    .config-modal-content {
+      padding: 12px 15px;
+    }
+  }
+
+  .drag-handle {
+    width: 36px;
+    height: 36px;
+
+    .pi {
+      font-size: 1rem;
+    }
+  }
+}
diff --git a/booklore-ui/src/app/stats-component/stats-component.ts b/booklore-ui/src/app/stats-component/stats-component.ts
new file mode 100644
index 000000000..00421df15
--- /dev/null
+++ b/booklore-ui/src/app/stats-component/stats-component.ts
@@ -0,0 +1,222 @@
+import {Component, inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {BaseChartDirective} from 'ng2-charts';
+import {Chart, registerables, Tooltip} from 'chart.js';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {catchError, map, of, startWith, Subject, takeUntil} from 'rxjs';
+import {CdkDragDrop, DragDropModule} from '@angular/cdk/drag-drop';
+import {LibraryFilterService, LibraryOption} from './charts-service/library-filter.service';
+import {LibrariesSummaryService} from './charts-service/libraries-summary.service';
+import {Select} from 'primeng/select';
+import {ReadStatusChartService} from './charts-service/read-status-chart.service';
+import {BookTypeChartService} from './charts-service/book-type-chart.service';
+import {ReadingProgressChartService} from './charts-service/reading-progress-chart-service';
+import {PageCountChartService} from './charts-service/page-count-chart.service';
+import {BookRatingChartService} from './charts-service/book-rating-chart.service';
+import {PersonalRatingChartService} from './charts-service/personal-rating-chart.service';
+import {PublicationYearChartService} from './charts-service/publication-year-chart-service';
+import {AuthorPopularityChartService} from './charts-service/author-popularity-chart.service';
+import {ReadingCompletionChartService} from './charts-service/reading-completion-chart.service';
+import {LanguageDistributionChartService} from './charts-service/language-distribution-chart.service';
+import {BookQualityScoreChartService} from './charts-service/book-quality-score-chart.service';
+import {BookSizeChartService} from './charts-service/book-size-chart.service';
+import {ReadingVelocityTimelineChartService} from './charts-service/reading-velocity-timeline-chart.service';
+import {MonthlyReadingPatternsChartService} from './charts-service/monthly-reading-patterns-chart.service';
+import {TopSeriesChartService} from './charts-service/top-series-chart.service';
+import {FinishedBooksTimelineChartService} from './charts-service/finished-books-timeline-chart.service';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import {ReadingDNAChartService} from './charts-service/reading-dna-chart.service';
+import {ReadingHabitsChartService} from './charts-service/reading-habits-chart.service';
+import {ChartConfigService, ChartConfig} from './charts-service/chart-config.service';
+import {Button} from 'primeng/button';
+
+@Component({
+  selector: 'app-stats-component',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    BaseChartDirective,
+    Select,
+    DragDropModule,
+    Button
+  ],
+  templateUrl: './stats-component.html',
+  styleUrls: ['./stats-component.scss']
+})
+export class StatsComponent implements OnInit, OnDestroy {
+
+  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
+
+  private readonly libraryFilterService = inject(LibraryFilterService);
+  private readonly librariesSummaryService = inject(LibrariesSummaryService);
+  protected readonly readStatusChartService = inject(ReadStatusChartService);
+  protected readonly bookTypeChartService = inject(BookTypeChartService);
+  protected readonly readingProgressChartService = inject(ReadingProgressChartService);
+  protected readonly pageCountChartService = inject(PageCountChartService);
+  protected readonly bookRatingChartService = inject(BookRatingChartService);
+  protected readonly personalRatingChartService = inject(PersonalRatingChartService);
+  protected readonly publicationYearChartService = inject(PublicationYearChartService);
+  protected readonly authorPopularityChartService = inject(AuthorPopularityChartService);
+  protected readonly readingCompletionChartService = inject(ReadingCompletionChartService);
+  protected readonly languageDistributionChartService = inject(LanguageDistributionChartService);
+  protected readonly bookQualityScoreChartService = inject(BookQualityScoreChartService);
+  protected readonly bookSizeChartService = inject(BookSizeChartService);
+  protected readonly readingVelocityTimelineChartService = inject(ReadingVelocityTimelineChartService);
+  protected readonly monthlyReadingPatternsChartService = inject(MonthlyReadingPatternsChartService);
+  protected readonly topSeriesChartService = inject(TopSeriesChartService);
+  protected readonly finishedBooksTimelineChartService = inject(FinishedBooksTimelineChartService);
+  protected readonly readingDNAChartService = inject(ReadingDNAChartService);
+  protected readonly readingHabitsChartService = inject(ReadingHabitsChartService);
+  protected readonly chartConfigService = inject(ChartConfigService);
+  private readonly destroy$ = new Subject<void>();
+
+  public isLoading = true;
+  public hasData = false;
+  public hasError = false;
+  public libraryOptions: LibraryOption[] = [];
+  public selectedLibrary: LibraryOption | null = null;
+  public showConfigPanel = false;
+  public chartsConfig: ChartConfig[] = [];
+
+  booksSummary$ = this.librariesSummaryService.getBooksSummary().pipe(
+    catchError(error => {
+      console.error('Error loading books summary:', error);
+      this.hasError = true;
+      return of({totalBooks: 0, totalSizeKb: 0, totalAuthors: 0, totalSeries: 0, totalPublishers: 0});
+    })
+  );
+
+  public readonly totalBooks$ = this.booksSummary$.pipe(map(summary => summary.totalBooks));
+  public readonly totalAuthors$ = this.booksSummary$.pipe(map(summary => summary.totalAuthors));
+  public readonly totalSeries$ = this.booksSummary$.pipe(map(summary => summary.totalSeries));
+  public readonly totalPublishers$ = this.booksSummary$.pipe(map(summary => summary.totalPublishers));
+  public readonly totalSize$ = this.librariesSummaryService.getFormattedSize().pipe(catchError(() => of('0 KB')));
+
+  ngOnInit(): void {
+    Chart.register(...registerables, Tooltip, ChartDataLabels);
+    Chart.defaults.plugins.legend.labels.font = {
+      family: "'Inter', sans-serif",
+      size: 11.5,
+    };
+    this.loadLibraryOptions();
+    this.loadChartConfig();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  onLibraryChange(): void {
+    if (!this.selectedLibrary) {
+      return;
+    }
+    const libraryId = this.selectedLibrary.id;
+    this.libraryFilterService.setSelectedLibrary(libraryId);
+  }
+
+  private loadLibraryOptions(): void {
+    this.libraryFilterService.getLibraryOptions()
+      .pipe(
+        takeUntil(this.destroy$),
+        startWith([]),
+        catchError(error => {
+          console.error('Error loading library options:', error);
+          this.hasError = true;
+          this.isLoading = false;
+          return of([]);
+        })
+      )
+      .subscribe({
+        next: (options) => {
+          this.libraryOptions = options;
+          this.initializeSelectedLibrary(options);
+        },
+        error: (error) => {
+          console.error('Subscription error:', error);
+          this.hasError = true;
+          this.isLoading = false;
+        }
+      });
+  }
+
+  private initializeSelectedLibrary(options: LibraryOption[]): void {
+    if (options.length === 0) {
+      this.hasData = false;
+      this.isLoading = false;
+      return;
+    }
+
+    if (!this.selectedLibrary) {
+      this.hasData = true;
+      this.isLoading = false;
+      this.selectedLibrary = options[0];
+      this.libraryFilterService.setSelectedLibrary(this.selectedLibrary.id);
+    }
+  }
+
+  private loadChartConfig(): void {
+    this.chartConfigService.chartsConfig$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(config => {
+        this.chartsConfig = config;
+      });
+  }
+
+  public toggleConfigPanel(): void {
+    this.showConfigPanel = !this.showConfigPanel;
+  }
+
+  public closeConfigPanel(): void {
+    this.showConfigPanel = false;
+  }
+
+  public toggleChart(chartId: string): void {
+    this.chartConfigService.toggleChart(chartId);
+  }
+
+  public isChartEnabled(chartId: string): boolean {
+    return this.chartConfigService.isChartEnabled(chartId);
+  }
+
+  public enableAllCharts(): void {
+    this.chartConfigService.enableAllCharts();
+  }
+
+  public disableAllCharts(): void {
+    this.chartConfigService.disableAllCharts();
+  }
+
+  public getChartsByCategory(category: string): ChartConfig[] {
+    return this.chartsConfig.filter(chart => chart.category === category);
+  }
+
+  public getEnabledChartsSorted(): ChartConfig[] {
+    return this.chartConfigService.getEnabledChartsSorted();
+  }
+
+  public onChartReorder(event: CdkDragDrop<ChartConfig[]>): void {
+    if (event.previousIndex !== event.currentIndex) {
+      this.chartConfigService.reorderCharts(event.previousIndex, event.currentIndex);
+    }
+  }
+
+  public resetChartOrder(): void {
+    this.chartConfigService.resetOrder();
+  }
+
+  public resetChartPositions(): void {
+    this.chartConfigService.resetPositions();
+  }
+
+  trackByTrait(index: number, insight: any): string {
+    return insight.trait;
+  }
+
+  trackByHabit(index: number, habit: any): string {
+    return habit.habit;
+  }
+
+  protected readonly ChartDataLabels = ChartDataLabels;
+}
diff --git a/booklore-ui/src/main.ts b/booklore-ui/src/main.ts
index 6575e2f3b..aed3ad0b8 100644
--- a/booklore-ui/src/main.ts
+++ b/booklore-ui/src/main.ts
@@ -17,9 +17,12 @@ import {provideOAuthClient} from 'angular-oauth2-oidc';
 import {APP_INITIALIZER, provideAppInitializer} from '@angular/core';
 import {initializeAuthFactory} from './app/auth-initializer';
 import {StartupService} from './app/core/service/startup.service';
+import {provideCharts, withDefaultRegisterables} from 'ng2-charts';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 
 bootstrapApplication(AppComponent, {
   providers: [
+    provideCharts(withDefaultRegisterables(), ChartDataLabels),
     {
       provide: APP_INITIALIZER,
       useFactory: websocketInitializer,