From b007a2001361cd00588fa8123c52efc7dfa58d0f Mon Sep 17 00:00:00 2001
From: mwiraszka <michal@wiraszka.com>
Date: Sun, 19 Jan 2025 03:19:02 +0200
Subject: [PATCH] feat: Implement NgRx Entity Adapter for CRUD operations on
 Article, Member and Event entities; improve custom sort algorithm to take in
 secondary key & set as last name in members table

---
 package.json                                  |  13 +-
 pnpm-lock.yaml                                | 187 ++++++------
 .../article-grid/article-grid.component.scss  |   4 +-
 .../member-form/member-form.component.html    |   4 +-
 .../member-form/member-form.component.ts      |   6 +-
 .../member-form/new-member-form-template.ts   |   2 +-
 .../members-table.component.html              | 206 ++++++-------
 .../members-table/members-table.component.ts  |  10 +-
 .../schedule/schedule.component.html          |   2 +-
 src/app/models/index.ts                       |   1 -
 src/app/models/store-features.model.ts        |  14 -
 src/app/store/app/app-store.module.ts         |   5 +-
 src/app/store/app/app.actions.ts              |   2 +-
 src/app/store/app/app.effects.ts              |   2 -
 src/app/store/app/app.reducer.ts              |  19 +-
 src/app/store/app/app.selectors.ts            |   4 +-
 src/app/store/app/app.state.ts                |  15 -
 src/app/store/app/index.ts                    |   1 +
 .../store/articles/articles-store.module.ts   |   5 +-
 src/app/store/articles/articles.reducer.ts    | 131 ++++-----
 src/app/store/articles/articles.selectors.ts  |  28 +-
 src/app/store/articles/articles.state.ts      |  15 -
 src/app/store/articles/index.ts               |   1 +
 src/app/store/auth/auth-store.module.ts       |   5 +-
 src/app/store/auth/auth.reducer.ts            |  19 +-
 src/app/store/auth/auth.selectors.ts          |   4 +-
 src/app/store/auth/auth.state.ts              |  13 -
 src/app/store/auth/index.ts                   |   1 +
 src/app/store/events/events-store.module.ts   |   5 +-
 src/app/store/events/events.reducer.ts        |  71 +++--
 src/app/store/events/events.selectors.ts      |  27 +-
 src/app/store/events/events.state.ts          |  17 --
 src/app/store/events/index.ts                 |   1 +
 src/app/store/images/images-store.module.ts   |   5 +-
 src/app/store/images/images.reducer.ts        |  19 +-
 src/app/store/images/images.selectors.ts      |   4 +-
 src/app/store/images/images.state.ts          |  11 -
 src/app/store/images/index.ts                 |   1 +
 src/app/store/members/index.ts                |   1 +
 src/app/store/members/members-store.module.ts |   5 +-
 src/app/store/members/members.effects.ts      |   7 +-
 src/app/store/members/members.reducer.ts      |  78 ++---
 src/app/store/members/members.selectors.ts    |  52 ++--
 src/app/store/members/members.state.ts        |  25 --
 src/app/store/meta-reducers.ts                |  54 ++--
 src/app/store/nav/index.ts                    |   1 +
 src/app/store/nav/nav-store.module.ts         |   5 +-
 src/app/store/nav/nav.reducer.ts              |  11 +-
 src/app/store/nav/nav.selectors.ts            |   4 +-
 src/app/store/nav/nav.state.ts                |   7 -
 src/app/store/notifications/index.ts          |   1 +
 .../notifications-store.module.ts             |   8 +-
 .../notifications/notifications.reducer.ts    |  15 +-
 .../notifications/notifications.selectors.ts  |   4 +-
 .../notifications/notifications.state.ts      |   9 -
 src/app/utils/index.ts                        |   1 -
 .../rating/get-new-peak-rating.util.spec.ts   |  12 +-
 .../utils/rating/get-new-peak-rating.util.ts  |   9 +-
 src/app/utils/sort/custom-sort.util.spec.ts   | 270 +++++++++++++-----
 src/app/utils/sort/custom-sort.util.ts        |  66 +++--
 src/app/utils/sort/sort-articles.util.ts      |  16 --
 src/main.ts                                   |   2 +-
 62 files changed, 828 insertions(+), 715 deletions(-)
 delete mode 100644 src/app/models/store-features.model.ts
 delete mode 100644 src/app/store/app/app.state.ts
 delete mode 100644 src/app/store/articles/articles.state.ts
 delete mode 100644 src/app/store/auth/auth.state.ts
 delete mode 100644 src/app/store/events/events.state.ts
 delete mode 100644 src/app/store/images/images.state.ts
 delete mode 100644 src/app/store/members/members.state.ts
 delete mode 100644 src/app/store/nav/nav.state.ts
 delete mode 100644 src/app/store/notifications/notifications.state.ts
 delete mode 100644 src/app/utils/sort/sort-articles.util.ts

diff --git a/package.json b/package.json
index d018ee02..0ddf3498 100644
--- a/package.json
+++ b/package.json
@@ -35,11 +35,12 @@
     "@angular/service-worker": "19.0.2",
     "@googlemaps/js-api-loader": "1.16.8",
     "@ngneat/until-destroy": "10.0.0",
-    "@ngrx/effects": "19.0.0-beta.0",
-    "@ngrx/operators": "19.0.0-beta.0",
-    "@ngrx/router-store": "19.0.0-beta.0",
-    "@ngrx/store": "19.0.0-beta.0",
-    "@ngrx/store-devtools": "19.0.0-beta.0",
+    "@ngrx/effects": "19.0.0",
+    "@ngrx/entity": "19.0.0",
+    "@ngrx/operators": "19.0.0",
+    "@ngrx/router-store": "19.0.0",
+    "@ngrx/store": "19.0.0",
+    "@ngrx/store-devtools": "19.0.0",
     "@types/lodash": "4.17.13",
     "@types/ws": "8.5.13",
     "@webcomponents/webcomponentsjs": "2.8.0",
@@ -87,4 +88,4 @@
     "typescript-eslint": "^8.18.2",
     "yargs": "17.7.2"
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b157cfd9..18bec254 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,20 +48,23 @@ importers:
         specifier: 10.0.0
         version: 10.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       '@ngrx/effects':
-        specifier: 19.0.0-beta.0
-        version: 19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)
+        specifier: 19.0.0
+        version: 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)
+      '@ngrx/entity':
+        specifier: 19.0.0
+        version: 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)
       '@ngrx/operators':
-        specifier: 19.0.0-beta.0
-        version: 19.0.0-beta.0(rxjs@7.8.1)
+        specifier: 19.0.0
+        version: 19.0.0(rxjs@7.8.1)
       '@ngrx/router-store':
-        specifier: 19.0.0-beta.0
-        version: 19.0.0-beta.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/router@19.0.2(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.0.2(@angular/animations@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)
+        specifier: 19.0.0
+        version: 19.0.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/router@19.0.2(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.0.2(@angular/animations@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)
       '@ngrx/store':
-        specifier: 19.0.0-beta.0
-        version: 19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
+        specifier: 19.0.0
+        version: 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       '@ngrx/store-devtools':
-        specifier: 19.0.0-beta.0
-        version: 19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)
+        specifier: 19.0.0
+        version: 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)
       '@types/lodash':
         specifier: 4.17.13
         version: 4.17.13
@@ -100,7 +103,7 @@ importers:
         version: 10.3.4(encoding@0.1.13)
       ngrx-store-localstorage:
         specifier: 18.0.0
-        version: 18.0.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))
+        version: 18.0.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))
       ngx-markdown:
         specifier: 19.0.0
         version: 19.0.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.0.2(@angular/animations@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(marked@15.0.3)(rxjs@7.8.1)(zone.js@0.15.0)
@@ -414,8 +417,8 @@ packages:
   '@aws-crypto/util@1.2.2':
     resolution: {integrity: sha512-H8PjG5WJ4wz0UXAFXeJjWCW1vkvIJ3qUUD+rGRwJ2/hj+xT58Qle2MTql/2MGzkU+1JLAFuR6aJpLAjHwhmwwg==}
 
-  '@aws-sdk/types@3.723.0':
-    resolution: {integrity: sha512-LmK3kwiMZG1y5g3LGihT9mNkeNOmwEyPk6HGcJqh0wOSV4QpWoKu2epyKE4MLQNUUlz2kOVbVbOrwmI6ZcteuA==}
+  '@aws-sdk/types@3.731.0':
+    resolution: {integrity: sha512-NrdkJg6oOUbXR2r9WvHP408CLyvST8cJfp1/jP9pemtjvjPoh6NukbCtiSFdOOb1eryP02CnqQWItfJC1p2Y/Q==}
     engines: {node: '>=18.0.0'}
 
   '@aws-sdk/util-utf8-browser@3.259.0':
@@ -1980,36 +1983,43 @@ packages:
       '@angular/core': '>=13'
       rxjs: ^6.4.0 || ^7.0.0
 
-  '@ngrx/effects@19.0.0-beta.0':
-    resolution: {integrity: sha512-No+qZtPxOGCp07Ob06qJKwzLFd/edlKnyX0eQlP8eP9OCNkFJYKgXRbCTBzHWHwq1heGxV/prMEm3YTs3bJWAQ==}
+  '@ngrx/effects@19.0.0':
+    resolution: {integrity: sha512-McNrbaPoDUlukrVPAckpRYLFSOoHwMQgMaiiNUvIGJuH/S1Wja+0xAT/e7+h+SO6xaFqDiEqj7GiR8lPkIAnVw==}
+    peerDependencies:
+      '@angular/core': ^19.0.0
+      '@ngrx/store': 19.0.0
+      rxjs: ^6.5.3 || ^7.5.0
+
+  '@ngrx/entity@19.0.0':
+    resolution: {integrity: sha512-qHMgR46YYm1ysEe2hwwTj5Gq6aAg9AxLLMtnBtsUWG6+UKk9irSCl6EoT7QteUGYImNK6LO1wiwapoNgFMr8dg==}
     peerDependencies:
       '@angular/core': ^19.0.0
-      '@ngrx/store': 19.0.0-beta.0
+      '@ngrx/store': 19.0.0
       rxjs: ^6.5.3 || ^7.5.0
 
-  '@ngrx/operators@19.0.0-beta.0':
-    resolution: {integrity: sha512-5bcCNKlPIfSvHYhLFV9lzopKb06wG+KutkMzePiWdlNeyuXRwJtyKAMeCj8PrW8D7Fa+1bbYlIAmpPmRTAAECg==}
+  '@ngrx/operators@19.0.0':
+    resolution: {integrity: sha512-IHh5bEjcubn3IZtm686tBfHctkgZESqu9Rgb76P+fsfTkLc4BEXlEBesIX8O6T0HS2OuTwOnyNRkWyexdZ0pmQ==}
     peerDependencies:
       rxjs: ^6.5.3 || ^7.4.0
 
-  '@ngrx/router-store@19.0.0-beta.0':
-    resolution: {integrity: sha512-/hU2eIzzcxv355PGKwH2m+m5j5UtXHpptVC500WW67/s0pF04J84DgAr23YOWuu1y0g/BCSk1aMwbmJlwAxoeg==}
+  '@ngrx/router-store@19.0.0':
+    resolution: {integrity: sha512-kkgxXPK2xYEh5HRk323dFbsF0LSAsNiEWUg0oH5WLwy2cgnlmyoJ1QRToTgH+B76Bbd1NRMTITZJtNIOakj1Pg==}
     peerDependencies:
       '@angular/common': ^19.0.0
       '@angular/core': ^19.0.0
       '@angular/router': ^19.0.0
-      '@ngrx/store': 19.0.0-beta.0
+      '@ngrx/store': 19.0.0
       rxjs: ^6.5.3 || ^7.5.0
 
-  '@ngrx/store-devtools@19.0.0-beta.0':
-    resolution: {integrity: sha512-tK2Qkz7Ff4GUlRhLII1Q/dzyQRubHWQDWbVc/bUt8/o+W3UppPCYhvMYYL8ymqc2g7zpHW90+49lcYGMidwexA==}
+  '@ngrx/store-devtools@19.0.0':
+    resolution: {integrity: sha512-ZlnvWx1mYzZnnwEnMLMv2xDwK/IPN7bZ/901e6kwISKn+9HliC5Z4GzAhaRP/8iq0gAHvmMdBlrcvJrKmBVBSQ==}
     peerDependencies:
       '@angular/core': ^19.0.0
-      '@ngrx/store': 19.0.0-beta.0
+      '@ngrx/store': 19.0.0
       rxjs: ^6.5.3 || ^7.5.0
 
-  '@ngrx/store@19.0.0-beta.0':
-    resolution: {integrity: sha512-vc7WgocKsQAcz7w5JFIwSSQauIl5OmDm92Wq00Vc2PjMWM2gcns20IHK+qAlpK/scJ6oiiBztWK3kNTu24QaEg==}
+  '@ngrx/store@19.0.0':
+    resolution: {integrity: sha512-AaryTJF1DsXUVWFhCl833LhvjyPjDOAMX9tqGBDfYGhaNOWWX3q/3z5HQ0XCrJ8kDJN3EHiNQa3XHxFaFQUo9A==}
     peerDependencies:
       '@angular/core': ^19.0.0
       rxjs: ^6.5.3 || ^7.5.0
@@ -2458,8 +2468,8 @@ packages:
   '@types/express-serve-static-core@4.19.6':
     resolution: {integrity: sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==}
 
-  '@types/express-serve-static-core@5.0.4':
-    resolution: {integrity: sha512-5kz9ScmzBdzTgB/3susoCgfqNDzBjvLL4taparufgSvlwjdLy6UyUy9T/tCpYd2GIdIilCatC4iSQS0QSYHt0w==}
+  '@types/express-serve-static-core@5.0.5':
+    resolution: {integrity: sha512-GLZPrd9ckqEBFMcVM/qRFAP0Hg3qiVEojgEFsx/N/zKXsBzbGF6z5FBDpZ0+Xhp1xr+qRZYjfGr1cWHB9oFHSA==}
 
   '@types/express@4.17.21':
     resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
@@ -2506,14 +2516,14 @@ packages:
   '@types/node-forge@1.3.11':
     resolution: {integrity: sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==}
 
-  '@types/node@20.17.12':
-    resolution: {integrity: sha512-vo/wmBgMIiEA23A/knMfn/cf37VnuF52nZh5ZoW0GWt4e4sxNquibrMRJ7UQsA06+MBx9r/H1jsI9grYjQCQlw==}
+  '@types/node@20.17.14':
+    resolution: {integrity: sha512-w6qdYetNL5KRBiSClK/KWai+2IMEJuAj+EujKCumalFOwXtvOXaEan9AuwcRID2IcOIAWSIfR495hBtgKlx2zg==}
 
   '@types/node@22.9.0':
     resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
 
-  '@types/qs@6.9.17':
-    resolution: {integrity: sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==}
+  '@types/qs@6.9.18':
+    resolution: {integrity: sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==}
 
   '@types/range-parser@1.2.7':
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
@@ -3655,8 +3665,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.80:
-    resolution: {integrity: sha512-LTrKpW0AqIuHwmlVNV+cjFYTnXtM9K37OGhpe0ZI10ScPSxqVSryZHIY3WnCS5NSYbBODRTZyhRMS2h5FAEqAw==}
+  electron-to-chromium@1.5.83:
+    resolution: {integrity: sha512-LcUDPqSt+V0QmI47XLzZrz5OqILSMGsPFkDYus22rIbgorSvBYEFqq854ltTmUdHkY92FSdAAvsh4jWEULMdfQ==}
 
   emittery@0.13.1:
     resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
@@ -3726,8 +3736,8 @@ packages:
   es-module-lexer@1.6.0:
     resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==}
 
-  es-object-atoms@1.0.0:
-    resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
 
   esbuild-wasm@0.24.0:
@@ -4691,8 +4701,8 @@ packages:
   karma-source-map-support@1.4.0:
     resolution: {integrity: sha512-RsBECncGO17KAoJCYXjv+ckIz+Ii9NCi+9enk+rq6XC81ezYkb4/RHE6CTXdA7IOJqoF3wcaLfVG0CPmE5ca6A==}
 
-  katex@0.16.20:
-    resolution: {integrity: sha512-jjuLaMGD/7P8jUTpdKhA9IoqnH+yMFB3sdAFtq5QdAqeP2PjiSbnC3EaguKPNtv6dXXanHxp1ckwvF4a86LBig==}
+  katex@0.16.21:
+    resolution: {integrity: sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==}
     hasBin: true
 
   keyv@4.5.4:
@@ -5375,11 +5385,8 @@ packages:
     resolution: {integrity: sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==}
     engines: {node: '>=6'}
 
-  pathe@1.1.2:
-    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
-
-  pathe@2.0.1:
-    resolution: {integrity: sha512-6jpjMpOth5S9ITVu5clZ7NOgHNsv5vRQdheL9ztp2vZmM6fRbLvyua1tiBIL4lk8SAe3ARzeXEly6siXCjDHDw==}
+  pathe@2.0.2:
+    resolution: {integrity: sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==}
 
   pdfjs-dist@4.6.82:
     resolution: {integrity: sha512-BUOryeRFwvbLe0lOU6NhkJNuVQUp06WxlJVVCsxdmJ4y5cU3O3s3/0DunVdK1PMm7v2MUw52qKYaidhDH1Z9+w==}
@@ -5415,8 +5422,8 @@ packages:
     resolution: {integrity: sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==}
     engines: {node: '>=14.16'}
 
-  pkg-types@1.3.0:
-    resolution: {integrity: sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==}
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
   points-on-curve@0.2.0:
     resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
@@ -5940,8 +5947,8 @@ packages:
   spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
 
-  spdx-license-ids@3.0.20:
-    resolution: {integrity: sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==}
+  spdx-license-ids@3.0.21:
+    resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
 
   spdy-transport@3.0.0:
     resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==}
@@ -6899,16 +6906,16 @@ snapshots:
   '@aws-crypto/sha256-js@1.2.2':
     dependencies:
       '@aws-crypto/util': 1.2.2
-      '@aws-sdk/types': 3.723.0
+      '@aws-sdk/types': 3.731.0
       tslib: 1.14.1
 
   '@aws-crypto/util@1.2.2':
     dependencies:
-      '@aws-sdk/types': 3.723.0
+      '@aws-sdk/types': 3.731.0
       '@aws-sdk/util-utf8-browser': 3.259.0
       tslib: 1.14.1
 
-  '@aws-sdk/types@3.723.0':
+  '@aws-sdk/types@3.731.0':
     dependencies:
       '@smithy/types': 4.1.0
       tslib: 2.8.1
@@ -8545,35 +8552,42 @@ snapshots:
       rxjs: 7.8.1
       tslib: 2.8.1
 
-  '@ngrx/effects@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)':
+  '@ngrx/effects@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)':
     dependencies:
       '@angular/core': 19.0.2(rxjs@7.8.1)(zone.js@0.15.0)
-      '@ngrx/store': 19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
+      '@ngrx/store': 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       rxjs: 7.8.1
       tslib: 2.8.1
 
-  '@ngrx/operators@19.0.0-beta.0(rxjs@7.8.1)':
+  '@ngrx/entity@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)':
     dependencies:
+      '@angular/core': 19.0.2(rxjs@7.8.1)(zone.js@0.15.0)
+      '@ngrx/store': 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       rxjs: 7.8.1
       tslib: 2.8.1
 
-  '@ngrx/router-store@19.0.0-beta.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/router@19.0.2(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.0.2(@angular/animations@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)':
+  '@ngrx/operators@19.0.0(rxjs@7.8.1)':
+    dependencies:
+      rxjs: 7.8.1
+      tslib: 2.8.1
+
+  '@ngrx/router-store@19.0.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/router@19.0.2(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.0.2(@angular/animations@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)':
     dependencies:
       '@angular/common': 19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       '@angular/core': 19.0.2(rxjs@7.8.1)(zone.js@0.15.0)
       '@angular/router': 19.0.2(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@angular/platform-browser@19.0.2(@angular/animations@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0)))(rxjs@7.8.1)
-      '@ngrx/store': 19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
+      '@ngrx/store': 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       rxjs: 7.8.1
       tslib: 2.8.1
 
-  '@ngrx/store-devtools@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)':
+  '@ngrx/store-devtools@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(rxjs@7.8.1)':
     dependencies:
       '@angular/core': 19.0.2(rxjs@7.8.1)(zone.js@0.15.0)
-      '@ngrx/store': 19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
+      '@ngrx/store': 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       rxjs: 7.8.1
       tslib: 2.8.1
 
-  '@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)':
+  '@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)':
     dependencies:
       '@angular/core': 19.0.2(rxjs@7.8.1)(zone.js@0.15.0)
       rxjs: 7.8.1
@@ -8899,7 +8913,7 @@ snapshots:
 
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
-      '@types/express-serve-static-core': 5.0.4
+      '@types/express-serve-static-core': 5.0.5
       '@types/node': 22.9.0
 
   '@types/connect@3.4.38':
@@ -9069,14 +9083,14 @@ snapshots:
   '@types/express-serve-static-core@4.19.6':
     dependencies:
       '@types/node': 22.9.0
-      '@types/qs': 6.9.17
+      '@types/qs': 6.9.18
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
 
-  '@types/express-serve-static-core@5.0.4':
+  '@types/express-serve-static-core@5.0.5':
     dependencies:
       '@types/node': 22.9.0
-      '@types/qs': 6.9.17
+      '@types/qs': 6.9.18
       '@types/range-parser': 1.2.7
       '@types/send': 0.17.4
 
@@ -9084,7 +9098,7 @@ snapshots:
     dependencies:
       '@types/body-parser': 1.19.5
       '@types/express-serve-static-core': 4.19.6
-      '@types/qs': 6.9.17
+      '@types/qs': 6.9.18
       '@types/serve-static': 1.15.7
 
   '@types/geojson@7946.0.15':
@@ -9133,7 +9147,7 @@ snapshots:
     dependencies:
       '@types/node': 22.9.0
 
-  '@types/node@20.17.12':
+  '@types/node@20.17.14':
     dependencies:
       undici-types: 6.19.8
 
@@ -9141,7 +9155,7 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
-  '@types/qs@6.9.17': {}
+  '@types/qs@6.9.18': {}
 
   '@types/range-parser@1.2.7': {}
 
@@ -9783,7 +9797,7 @@ snapshots:
   browserslist@4.24.4:
     dependencies:
       caniuse-lite: 1.0.30001692
-      electron-to-chromium: 1.5.80
+      electron-to-chromium: 1.5.83
       node-releases: 2.0.19
       update-browserslist-db: 1.1.2(browserslist@4.24.4)
 
@@ -10484,7 +10498,7 @@ snapshots:
     dependencies:
       jake: 10.9.2
 
-  electron-to-chromium@1.5.80: {}
+  electron-to-chromium@1.5.83: {}
 
   emittery@0.13.1: {}
 
@@ -10536,7 +10550,7 @@ snapshots:
 
   es-module-lexer@1.6.0: {}
 
-  es-object-atoms@1.0.0:
+  es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0
 
@@ -11026,7 +11040,7 @@ snapshots:
       call-bind-apply-helpers: 1.0.1
       es-define-property: 1.0.1
       es-errors: 1.3.0
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
       function-bind: 1.1.2
       get-proto: 1.0.1
       gopd: 1.2.0
@@ -11039,7 +11053,7 @@ snapshots:
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
-      es-object-atoms: 1.0.0
+      es-object-atoms: 1.1.1
 
   get-stream@6.0.1: {}
 
@@ -11881,7 +11895,7 @@ snapshots:
     dependencies:
       source-map-support: 0.5.21
 
-  katex@0.16.20:
+  katex@0.16.21:
     dependencies:
       commander: 8.3.0
     optional: true
@@ -11955,7 +11969,7 @@ snapshots:
 
   lichess-pgn-viewer@2.1.3:
     dependencies:
-      '@types/node': 20.17.12
+      '@types/node': 20.17.14
       chessground: 9.1.1
       chessops: 0.12.7
       snabbdom: 3.6.2
@@ -12000,7 +12014,7 @@ snapshots:
   local-pkg@0.5.1:
     dependencies:
       mlly: 1.7.4
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
     optional: true
 
   locate-path@5.0.0:
@@ -12128,7 +12142,7 @@ snapshots:
       dagre-d3-es: 7.0.11
       dayjs: 1.11.13
       dompurify: 3.2.3
-      katex: 0.16.20
+      katex: 0.16.21
       khroma: 2.1.0
       lodash-es: 4.17.21
       marked: 13.0.3
@@ -12237,8 +12251,8 @@ snapshots:
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.0
-      pathe: 2.0.1
-      pkg-types: 1.3.0
+      pathe: 2.0.2
+      pkg-types: 1.3.1
       ufo: 1.5.4
     optional: true
 
@@ -12327,11 +12341,11 @@ snapshots:
       - encoding
       - supports-color
 
-  ngrx-store-localstorage@18.0.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)):
+  ngrx-store-localstorage@18.0.0(@angular/common@19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1))(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(@ngrx/store@19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)):
     dependencies:
       '@angular/common': 19.0.2(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       '@angular/core': 19.0.2(rxjs@7.8.1)(zone.js@0.15.0)
-      '@ngrx/store': 19.0.0-beta.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
+      '@ngrx/store': 19.0.0(@angular/core@19.0.2(rxjs@7.8.1)(zone.js@0.15.0))(rxjs@7.8.1)
       deepmerge: 4.3.1
       tslib: 2.8.1
 
@@ -12347,7 +12361,7 @@ snapshots:
     optionalDependencies:
       clipboard: 2.0.11
       emoji-toolkit: 9.0.1
-      katex: 0.16.20
+      katex: 0.16.21
       mermaid: 11.4.1
       prismjs: 1.29.0
     transitivePeerDependencies:
@@ -12645,10 +12659,7 @@ snapshots:
   path2d@0.2.2:
     optional: true
 
-  pathe@1.1.2:
-    optional: true
-
-  pathe@2.0.1:
+  pathe@2.0.2:
     optional: true
 
   pdfjs-dist@4.6.82(encoding@0.1.13):
@@ -12682,11 +12693,11 @@ snapshots:
     dependencies:
       find-up: 6.3.0
 
-  pkg-types@1.3.0:
+  pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
       mlly: 1.7.4
-      pathe: 1.1.2
+      pathe: 2.0.2
     optional: true
 
   points-on-curve@0.2.0:
@@ -13240,16 +13251,16 @@ snapshots:
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.20
+      spdx-license-ids: 3.0.21
 
   spdx-exceptions@2.5.0: {}
 
   spdx-expression-parse@3.0.1:
     dependencies:
       spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.20
+      spdx-license-ids: 3.0.21
 
-  spdx-license-ids@3.0.20: {}
+  spdx-license-ids@3.0.21: {}
 
   spdy-transport@3.0.0:
     dependencies:
diff --git a/src/app/components/article-grid/article-grid.component.scss b/src/app/components/article-grid/article-grid.component.scss
index 4590630e..176dabfb 100644
--- a/src/app/components/article-grid/article-grid.component.scss
+++ b/src/app/components/article-grid/article-grid.component.scss
@@ -65,8 +65,8 @@ lcc-link-list,
       position: absolute;
       margin: 4px;
       color: var(--lcc-color--articleGrid-bookmarkIcon);
-      height: 18px;
-      width: 18px;
+      height: 24px;
+      width: 24px;
     }
 
     .article-summary-container {
diff --git a/src/app/components/member-form/member-form.component.html b/src/app/components/member-form/member-form.component.html
index a5d8444e..eea7562a 100644
--- a/src/app/components/member-form/member-form.component.html
+++ b/src/app/components/member-form/member-form.component.html
@@ -109,7 +109,7 @@
           }
         </div>
 
-        @if (!vm.isSafeMode) {
+        @if (!(isSafeMode$ | async)) {
           <label for="email-input">Email:</label>
           <input
             id="email-input"
@@ -207,7 +207,7 @@
 
       <aside class="lcc-required-fields-legend">Required fields</aside>
 
-      @if (vm.isSafeMode) {
+      @if (isSafeMode$ | async) {
         <aside class="safe-mode-notice">
           <i-feather
             name="check-circle"
diff --git a/src/app/components/member-form/member-form.component.ts b/src/app/components/member-form/member-form.component.ts
index afecd77f..79842502 100644
--- a/src/app/components/member-form/member-form.component.ts
+++ b/src/app/components/member-form/member-form.component.ts
@@ -27,6 +27,7 @@ import type {
   MemberFormGroup,
 } from '@app/models';
 import { DialogService } from '@app/services';
+import { AppSelectors } from '@app/store/app';
 import { MembersActions, MembersSelectors } from '@app/store/members';
 import { isDefined } from '@app/utils';
 import {
@@ -53,9 +54,12 @@ import { newMemberFormTemplate } from './new-member-form-template';
   ],
 })
 export class MemberFormComponent implements OnInit {
+  // TODO: Figure out why this doesn't work when a part of the config$ view model selector
+  public readonly isSafeMode$ = this.store.select(AppSelectors.selectIsSafeMode);
   public readonly memberFormViewModel$ = this.store.select(
     MembersSelectors.selectMemberFormViewModel,
   );
+
   public form: FormGroup<MemberFormGroup<MemberFormData>> | null = null;
 
   private controlMode: ControlMode | null = null;
@@ -173,7 +177,7 @@ export class MemberFormComponent implements OnInit {
       }),
       rating: new FormControl(memberFormData.rating, {
         nonNullable: true,
-        validators: [Validators.required, ratingValidator, Validators.max(3000)],
+        validators: [Validators.required, ratingValidator],
       }),
       dateJoined: new FormControl(memberFormData.dateJoined, {
         nonNullable: true,
diff --git a/src/app/components/member-form/new-member-form-template.ts b/src/app/components/member-form/new-member-form-template.ts
index 61039f3b..435c6411 100644
--- a/src/app/components/member-form/new-member-form-template.ts
+++ b/src/app/components/member-form/new-member-form-template.ts
@@ -7,7 +7,7 @@ export const newMemberFormTemplate: MemberFormData = {
   lastName: '',
   city: 'London',
   rating: '1000/0',
-  peakRating: '1000/0',
+  peakRating: '',
   dateJoined: moment().toISOString(),
   isActive: true,
   chessComUsername: '',
diff --git a/src/app/components/members-table/members-table.component.html b/src/app/components/members-table/members-table.component.html
index 817c0a23..9fdbe18c 100644
--- a/src/app/components/members-table/members-table.component.html
+++ b/src/app/components/members-table/members-table.component.html
@@ -1,109 +1,111 @@
-@if (membersTableViewModel$ | async; as vm) {
-  @if (vm.isAdmin) {
-    <lcc-link-list [links]="[addMemberLink]"></lcc-link-list>
-  }
+@if (members$ | async; as members) {
+  @if (config$ | async; as config) {
+    @if (config.isAdmin) {
+      <lcc-link-list [links]="[addMemberLink]"></lcc-link-list>
+    }
 
-  <div class="lcc-table-wrapper">
-    <table
-      class="lcc-table"
-      [class.lcc-show-admin-columns]="vm.isAdmin && !vm.isSafeMode">
-      @if (vm.members.displayed.length) {
-        <thead>
-          <tr>
-            <th class="row-number"></th>
-            @for (
-              header of vm.isAdmin && !vm.isSafeMode
-                ? tableHeaders
-                : tableHeaders.slice(0, -4);
-              track header
-            ) {
-              <th
-                [ngClass]="header | kebabCase"
-                (click)="onSelectTableHeader(header)">
-                <span>{{ header }}</span>
-                <div class="sort-icon-container">
-                  @if (vm.sortedBy === (header | camelCase)) {
-                    <i-feather
-                      class="sort-icon"
-                      [name]="vm.isAscending ? 'chevron-up' : 'chevron-down'">
-                    </i-feather>
-                  }
-                </div>
-              </th>
-            }
-          </tr>
-        </thead>
-      }
+    <div class="lcc-table-wrapper">
+      <table
+        class="lcc-table"
+        [class.lcc-show-admin-columns]="config.isAdmin && !(isSafeMode$ | async)">
+        @if (members.displayed.length) {
+          <thead>
+            <tr>
+              <th class="row-number"></th>
+              @for (
+                header of config.isAdmin && !(isSafeMode$ | async)
+                  ? tableHeaders
+                  : tableHeaders.slice(0, -4);
+                track header
+              ) {
+                <th
+                  [ngClass]="header | kebabCase"
+                  (click)="onSelectTableHeader(header)">
+                  <span>{{ header }}</span>
+                  <div class="sort-icon-container">
+                    @if (config.sortedBy === (header | camelCase)) {
+                      <i-feather
+                        class="sort-icon"
+                        [name]="config.isAscending ? 'chevron-up' : 'chevron-down'">
+                      </i-feather>
+                    }
+                  </div>
+                </th>
+              }
+            </tr>
+          </thead>
+        }
 
-      <tbody>
-        @for (
-          member of vm.members.displayed;
-          track member.id;
-          let i = $index;
-          let last = $last
-        ) {
-          <tr
-            [adminControls]="vm.isAdmin ? getAdminControlsConfig(member) : null"
-            [ngClass]="{ 'last-row': last }"
-            [class.inactive]="!member.isActive">
-            <td class="row-number">
-              {{ i + vm.startIndex + 1 }}
-            </td>
-            <td class="first-name lcc-truncate">{{ member.firstName }}</td>
-            <td class="last-name lcc-truncate">{{ member.lastName }}</td>
-            <td class="rating">{{ member.rating }}</td>
-            <td class="peak-rating">{{ member.peakRating }}</td>
-            <td class="city lcc-truncate">{{ member.city }}</td>
-            <td class="chess-com-username lcc-truncate">
-              {{ member?.chessComUsername }}
-            </td>
-            <td class="lichess-username lcc-truncate">
-              {{ member?.lichessUsername }}
-            </td>
-            <td class="last-updated">
-              {{ member.modificationInfo.dateLastEdited | formatDate: 'short no-time' }}
-            </td>
-            @if (vm.isAdmin) {
-              <td class="born">{{ member?.yearOfBirth }}</td>
-              <td class="email">{{ member?.email }}</td>
-              <td class="phone-number">{{ member?.phoneNumber }}</td>
-              <td class="date-joined">
-                {{ member.dateJoined | formatDate: 'short no-time' }}
+        <tbody>
+          @for (
+            member of members.displayed;
+            track member.id;
+            let i = $index;
+            let last = $last
+          ) {
+            <tr
+              [adminControls]="config.isAdmin ? getAdminControlsConfig(member) : null"
+              [ngClass]="{ 'last-row': last }"
+              [class.inactive]="!member.isActive">
+              <td class="row-number">
+                {{ i + config.startIndex + 1 }}
               </td>
-            }
-          </tr>
-        }
-      </tbody>
+              <td class="first-name lcc-truncate">{{ member.firstName }}</td>
+              <td class="last-name lcc-truncate">{{ member.lastName }}</td>
+              <td class="rating">{{ member.rating }}</td>
+              <td class="peak-rating">{{ member.peakRating }}</td>
+              <td class="city lcc-truncate">{{ member.city }}</td>
+              <td class="chess-com-username lcc-truncate">
+                {{ member?.chessComUsername }}
+              </td>
+              <td class="lichess-username lcc-truncate">
+                {{ member?.lichessUsername }}
+              </td>
+              <td class="last-updated">
+                {{ member.modificationInfo.dateLastEdited | formatDate: 'short no-time' }}
+              </td>
+              @if (config.isAdmin) {
+                <td class="born">{{ member?.yearOfBirth }}</td>
+                <td class="email">{{ member?.email }}</td>
+                <td class="phone-number">{{ member?.phoneNumber }}</td>
+                <td class="date-joined">
+                  {{ member.dateJoined | formatDate: 'short no-time' }}
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
 
-      <tfoot>
-        <tr>
-          <td colspan="100%">
-            {{ vm.members.all.length }} members ({{ vm.members.active.length }}
-            active)
-          </td>
-        </tr>
-      </tfoot>
-    </table>
-  </div>
+        <tfoot>
+          <tr>
+            <td colspan="100%">
+              {{ members.all.length }} members ({{ members.active.length }}
+              active)
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
 
-  <lcc-paginator
-    typeOfItems="members"
-    [pageNum]="vm.pagination.pageNum"
-    [pageSize]="vm.pagination.pageSize"
-    [totalItems]="vm.members.filtered.length"
-    (pageChange)="onChangePage($event)"
-    (pageSizeChange)="onChangePageSize($event)">
-  </lcc-paginator>
+    <lcc-paginator
+      typeOfItems="members"
+      [pageNum]="config.pageNum"
+      [pageSize]="config.pageSize"
+      [totalItems]="members.filtered.length"
+      (pageChange)="onChangePage($event)"
+      (pageSizeChange)="onChangePageSize($event)">
+    </lcc-paginator>
 
-  <aside>
-    <h5>inactive members *</h5>
-    <div class="checkbox-section">
-      <label for="active-only">Show active members only</label>
-      <input
-        id="active-only"
-        type="checkbox"
-        [checked]="vm.showActiveOnly"
-        (change)="onToggleInactiveMembers()" />
-    </div>
-  </aside>
+    <aside>
+      <h5>inactive members *</h5>
+      <div class="checkbox-section">
+        <label for="active-only">Show active members only</label>
+        <input
+          id="active-only"
+          type="checkbox"
+          [checked]="config.showActiveOnly"
+          (change)="onToggleInactiveMembers()" />
+      </div>
+    </aside>
+  }
 }
diff --git a/src/app/components/members-table/members-table.component.ts b/src/app/components/members-table/members-table.component.ts
index 79f460a8..7ade3f16 100644
--- a/src/app/components/members-table/members-table.component.ts
+++ b/src/app/components/members-table/members-table.component.ts
@@ -18,6 +18,7 @@ import type {
 } from '@app/models';
 import { CamelCasePipe, FormatDatePipe, KebabCasePipe } from '@app/pipes';
 import { DialogService } from '@app/services';
+import { AppSelectors } from '@app/store/app';
 import { MembersActions, MembersSelectors } from '@app/store/members';
 
 @Component({
@@ -41,8 +42,13 @@ export class MembersTableComponent implements OnInit {
     text: 'Add a member',
     icon: 'plus-circle',
   };
-  public readonly membersTableViewModel$ = this.store.select(
-    MembersSelectors.selectMembersTableViewModel,
+  public readonly config$ = this.store.select(
+    MembersSelectors.selectMembersTableConfigViewModel,
+  );
+  // TODO: Figure out why this doesn't work when a part of the config$ view model selector
+  public readonly isSafeMode$ = this.store.select(AppSelectors.selectIsSafeMode);
+  public readonly members$ = this.store.select(
+    MembersSelectors.selectMembersTableMembersViewModel,
   );
   public readonly tableHeaders = [
     'First Name',
diff --git a/src/app/components/schedule/schedule.component.html b/src/app/components/schedule/schedule.component.html
index 71167d70..ba5bc75d 100644
--- a/src/app/components/schedule/schedule.component.html
+++ b/src/app/components/schedule/schedule.component.html
@@ -12,7 +12,7 @@
     <tbody>
       @for (
         event of vm.showPastEvents && allowTogglePastEvents
-          ? vm.events
+          ? vm.allEvents
           : vm.upcomingEvents.slice(0, upcomingEventLimit ?? vm.upcomingEvents.length);
         track event.id
       ) {
diff --git a/src/app/models/index.ts b/src/app/models/index.ts
index 92f1974a..4f2998bb 100644
--- a/src/app/models/index.ts
+++ b/src/app/models/index.ts
@@ -27,6 +27,5 @@ export type {
   PasswordChangeResponse,
 } from './password-change.model';
 export type { Photo } from './photo.model';
-export type { StoreFeature } from './store-features.model';
 export type { Toast } from './toast.model';
 export type { AdminUser, UnverifiedUser, User } from './user.model';
diff --git a/src/app/models/store-features.model.ts b/src/app/models/store-features.model.ts
deleted file mode 100644
index dd0058a0..00000000
--- a/src/app/models/store-features.model.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const storeFeatures = [
-  'app',
-  'articles',
-  'auth',
-  'events',
-  'members',
-  'nav',
-  'notifications',
-] as const;
-export type StoreFeature = (typeof storeFeatures)[number];
-
-export function isStoreFeature(value: unknown): value is StoreFeature {
-  return storeFeatures.indexOf(value as StoreFeature) !== -1;
-}
diff --git a/src/app/store/app/app-store.module.ts b/src/app/store/app/app-store.module.ts
index 09454425..92bd9df1 100644
--- a/src/app/store/app/app-store.module.ts
+++ b/src/app/store/app/app-store.module.ts
@@ -5,14 +5,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { AppEffects } from './app.effects';
-import { appReducer } from './app.reducer';
-import { AppState } from './app.state';
+import { AppState, appReducer } from './app.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([AppEffects]),
-    StoreModule.forFeature<AppState>('app', appReducer),
+    StoreModule.forFeature<AppState>('appState', appReducer),
   ],
 })
 export class AppStoreModule {}
diff --git a/src/app/store/app/app.actions.ts b/src/app/store/app/app.actions.ts
index 52ca5a77..e494ff79 100755
--- a/src/app/store/app/app.actions.ts
+++ b/src/app/store/app/app.actions.ts
@@ -22,7 +22,7 @@ export const itemSetInLocalStorage = createAction(
 );
 
 export const itemRemovedFromLocalStorage = createAction(
-  '[Images] Item removed from local storage',
+  '[App] Item removed from local storage',
   props<{ key: string }>(),
 );
 
diff --git a/src/app/store/app/app.effects.ts b/src/app/store/app/app.effects.ts
index eeb1b9ad..0e6aec45 100644
--- a/src/app/store/app/app.effects.ts
+++ b/src/app/store/app/app.effects.ts
@@ -1,5 +1,4 @@
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { Store } from '@ngrx/store';
 import { tap } from 'rxjs/operators';
 
 import { Injectable } from '@angular/core';
@@ -33,6 +32,5 @@ export class AppEffects {
   constructor(
     private readonly actions$: Actions,
     private readonly localStorageService: LocalStorageService,
-    private readonly store: Store,
   ) {}
 }
diff --git a/src/app/store/app/app.reducer.ts b/src/app/store/app/app.reducer.ts
index 9d8deaed..51cd3a7e 100755
--- a/src/app/store/app/app.reducer.ts
+++ b/src/app/store/app/app.reducer.ts
@@ -1,11 +1,26 @@
 import { createReducer, on } from '@ngrx/store';
 import moment from 'moment-timezone';
 
+import { IsoDate } from '@app/models';
+
 import * as AppActions from './app.actions';
-import { AppState, initialState } from './app.state';
+
+export interface AppState {
+  isDarkMode: boolean;
+  isSafeMode: boolean;
+  bannerLastCleared: IsoDate | null;
+  showUpcomingEventBanner: boolean;
+}
+
+export const appInitialState: AppState = {
+  isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
+  isSafeMode: false,
+  bannerLastCleared: null,
+  showUpcomingEventBanner: true,
+};
 
 export const appReducer = createReducer(
-  initialState,
+  appInitialState,
 
   on(
     AppActions.themeToggled,
diff --git a/src/app/store/app/app.selectors.ts b/src/app/store/app/app.selectors.ts
index e04e15a2..e563ec1d 100755
--- a/src/app/store/app/app.selectors.ts
+++ b/src/app/store/app/app.selectors.ts
@@ -3,9 +3,9 @@ import { createFeatureSelector, createSelector } from '@ngrx/store';
 import { EventsSelectors } from '@app/store/events';
 import { NotificationsSelectors } from '@app/store/notifications';
 
-import { AppState } from './app.state';
+import { AppState } from './app.reducer';
 
-export const selectAppState = createFeatureSelector<AppState>('app');
+export const selectAppState = createFeatureSelector<AppState>('appState');
 
 export const selectIsDarkMode = createSelector(selectAppState, state => state.isDarkMode);
 
diff --git a/src/app/store/app/app.state.ts b/src/app/store/app/app.state.ts
deleted file mode 100644
index 8abe5b0f..00000000
--- a/src/app/store/app/app.state.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { IsoDate } from '@app/models';
-
-export interface AppState {
-  isDarkMode: boolean;
-  isSafeMode: boolean;
-  bannerLastCleared: IsoDate | null;
-  showUpcomingEventBanner: boolean;
-}
-
-export const initialState: AppState = {
-  isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
-  isSafeMode: false,
-  bannerLastCleared: null,
-  showUpcomingEventBanner: true,
-};
diff --git a/src/app/store/app/index.ts b/src/app/store/app/index.ts
index 4fe8ccac..0961a112 100644
--- a/src/app/store/app/index.ts
+++ b/src/app/store/app/index.ts
@@ -3,3 +3,4 @@ export { AppStoreModule } from './app-store.module';
 export * as AppActions from './app.actions';
 export { AppEffects } from './app.effects';
 export * as AppSelectors from './app.selectors';
+export { AppState, appInitialState } from './app.reducer';
diff --git a/src/app/store/articles/articles-store.module.ts b/src/app/store/articles/articles-store.module.ts
index c053183f..66c023a4 100644
--- a/src/app/store/articles/articles-store.module.ts
+++ b/src/app/store/articles/articles-store.module.ts
@@ -5,14 +5,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ArticlesEffects } from './articles.effects';
-import { articlesReducer } from './articles.reducer';
-import { ArticlesState } from './articles.state';
+import { ArticlesState, articlesReducer } from './articles.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([ArticlesEffects]),
-    StoreModule.forFeature<ArticlesState>('articles', articlesReducer),
+    StoreModule.forFeature<ArticlesState>('articlesState', articlesReducer),
   ],
 })
 export class ArticlesStoreModule {}
diff --git a/src/app/store/articles/articles.reducer.ts b/src/app/store/articles/articles.reducer.ts
index 7aeeccc8..bfbd343a 100755
--- a/src/app/store/articles/articles.reducer.ts
+++ b/src/app/store/articles/articles.reducer.ts
@@ -1,56 +1,69 @@
+import { EntityState, createEntityAdapter } from '@ngrx/entity';
 import { createReducer, on } from '@ngrx/store';
 
-import type { ArticleFormData } from '@app/models';
+import type { Article, ArticleFormData, ControlMode, Id } from '@app/models';
 import { ImagesActions } from '@app/store/images';
-import { sortArticles } from '@app/utils';
+import { customSort } from '@app/utils';
 
 import * as ArticlesActions from './articles.actions';
-import { ArticlesState, initialState } from './articles.state';
+
+export interface ArticlesState extends EntityState<Article> {
+  articleId: Id | null;
+  articleFormData: ArticleFormData | null;
+  controlMode: ControlMode | null;
+}
+
+export const articlesAdapter = createEntityAdapter<Article>({
+  sortComparer: (a, b) =>
+    customSort(a, b, 'bookmarkDate', true, 'modificationInfo.dateCreated', true),
+});
+
+export const articlesInitialState: ArticlesState = articlesAdapter.getInitialState({
+  articleId: null,
+  articleFormData: null,
+  controlMode: null,
+});
 
 export const articlesReducer = createReducer(
-  initialState,
+  articlesInitialState,
 
   on(
     ArticlesActions.fetchArticlesSucceeded,
-    (state, { articles }): ArticlesState => ({
-      ...state,
-      articles: sortArticles(articles),
-    }),
+    (state, { articles }): ArticlesState => articlesAdapter.addMany(articles, state),
   ),
 
   on(
     ImagesActions.fetchArticleBannerImageSucceeded,
-    (state, { image }): ArticlesState => ({
-      ...state,
-      articles: state.articles.length
-        ? state.articles.map(article =>
-            article.imageId === image.id
-              ? { ...article, imageUrl: image.presignedUrl }
-              : article,
-          )
-        : state.articles,
-      article:
-        state.article?.imageId === image.id
-          ? { ...state.article, imageUrl: image.presignedUrl }
-          : state.article,
-    }),
+    (state, { image }): ArticlesState => {
+      const entityEntry = Object.entries(state.entities).find(
+        entity => entity[1]!.imageId === image.id,
+      );
+      if (!entityEntry) {
+        return state;
+      }
+      const articleId = entityEntry[0];
+
+      return articlesAdapter.mapOne(
+        {
+          id: articleId,
+          map: article => ({ ...article, imageUrl: image.presignedUrl }),
+        },
+        state,
+      );
+    },
   ),
 
   on(
     ImagesActions.fetchArticleBannerImageThumbnailsSucceeded,
-    (state, { images }): ArticlesState => ({
-      ...state,
-      articles: state.articles.length
-        ? state.articles.map(article => {
-            const articleBannerImage = images.find(
-              image => image.id === `${article.imageId}-600x400`,
-            );
-            return articleBannerImage
-              ? { ...article, thumbnailImageUrl: articleBannerImage.presignedUrl }
-              : article;
-          })
-        : state.articles,
-    }),
+    (state, { images }): ArticlesState =>
+      articlesAdapter.map(article => {
+        const articleBannerImage = images.find(
+          image => image.id === `${article.imageId}-600x400`,
+        );
+        return articleBannerImage
+          ? { ...article, thumbnailImageUrl: articleBannerImage.presignedUrl }
+          : article;
+      }, state),
   ),
 
   on(
@@ -69,43 +82,31 @@ export const articlesReducer = createReducer(
     }),
   ),
 
-  on(ArticlesActions.fetchArticleSucceeded, (state, { article }): ArticlesState => {
-    return {
-      ...state,
-      articles: state.articles.length
-        ? sortArticles([
-            ...state.articles.map(storedArticle =>
-              storedArticle.id === article.id ? article : storedArticle,
-            ),
-          ])
-        : [article],
-      article,
-    };
-  }),
+  on(
+    ArticlesActions.fetchArticleSucceeded,
+    (state, { article }): ArticlesState =>
+      articlesAdapter.upsertOne(article, { ...state, articleId: article.id }),
+  ),
 
   on(
     ArticlesActions.publishArticleSucceeded,
     ArticlesActions.updateArticleSucceeded,
-    (state, { article }): ArticlesState => ({
-      ...state,
-      articles: sortArticles([
-        ...state.articles.map(storedArticle =>
-          storedArticle.id === article.id ? article : storedArticle,
-        ),
-      ]),
-      article: null,
-      articleFormData: null,
-    }),
+    (state, { article }): ArticlesState =>
+      articlesAdapter.upsertOne(article, {
+        ...state,
+        articleId: null,
+        articleFormData: null,
+      }),
   ),
 
   on(
     ArticlesActions.deleteArticleSucceeded,
-    (state, { article }): ArticlesState => ({
-      ...state,
-      articles: state.articles.filter(storedArticle => storedArticle.id !== article.id),
-      article: null,
-      articleFormData: null,
-    }),
+    (state, { article }): ArticlesState =>
+      articlesAdapter.removeOne(article.id!, {
+        ...state,
+        articleId: null,
+        articleFormData: null,
+      }),
   ),
 
   on(
@@ -120,7 +121,7 @@ export const articlesReducer = createReducer(
     ArticlesActions.articleUnset,
     (state): ArticlesState => ({
       ...state,
-      article: null,
+      articleId: null,
       articleFormData: null,
       controlMode: null,
     }),
diff --git a/src/app/store/articles/articles.selectors.ts b/src/app/store/articles/articles.selectors.ts
index f22c2362..05661a82 100755
--- a/src/app/store/articles/articles.selectors.ts
+++ b/src/app/store/articles/articles.selectors.ts
@@ -6,21 +6,29 @@ import { AuthSelectors } from '@app/store/auth';
 import { ImagesSelectors } from '@app/store/images';
 import { areSame } from '@app/utils';
 
-import { ArticlesState } from './articles.state';
+import { ArticlesState, articlesAdapter } from './articles.reducer';
 
-export const selectArticlesState = createFeatureSelector<ArticlesState>('articles');
+const selectArticlesState = createFeatureSelector<ArticlesState>('articlesState');
 
-export const selectArticles = createSelector(
-  selectArticlesState,
-  state => state.articles,
-);
+const { selectAll: selectAllArticles } =
+  articlesAdapter.getSelectors(selectArticlesState);
 
 export const selectArticleById = (id: Id) =>
-  createSelector(selectArticles, articles =>
-    articles ? articles.find(article => article.id === id) : null,
+  createSelector(selectAllArticles, allArticles =>
+    allArticles ? allArticles.find(article => article.id === id) : null,
   );
 
-export const selectArticle = createSelector(selectArticlesState, state => state.article);
+export const selectArticleId = createSelector(
+  selectArticlesState,
+  state => state.articleId,
+);
+
+export const selectArticle = createSelector(
+  selectAllArticles,
+  selectArticleId,
+  (allArticles, articleId) =>
+    articleId ? allArticles.find(article => article.id === articleId) : null,
+);
 
 export const selectArticleTitle = createSelector(
   selectArticle,
@@ -82,7 +90,7 @@ export const selectArticleEditorScreenViewModel = createSelector({
 });
 
 export const selectArticleGridViewModel = createSelector({
-  articles: selectArticles,
+  articles: selectAllArticles,
   isAdmin: AuthSelectors.selectIsAdmin,
 });
 
diff --git a/src/app/store/articles/articles.state.ts b/src/app/store/articles/articles.state.ts
deleted file mode 100644
index 65eabd2c..00000000
--- a/src/app/store/articles/articles.state.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Article, ArticleFormData, ControlMode } from '@app/models';
-
-export interface ArticlesState {
-  articles: Article[];
-  article: Article | null;
-  articleFormData: ArticleFormData | null;
-  controlMode: ControlMode | null;
-}
-
-export const initialState: ArticlesState = {
-  articles: [],
-  article: null,
-  articleFormData: null,
-  controlMode: null,
-};
diff --git a/src/app/store/articles/index.ts b/src/app/store/articles/index.ts
index 35b6d173..0bfbe5c0 100644
--- a/src/app/store/articles/index.ts
+++ b/src/app/store/articles/index.ts
@@ -3,3 +3,4 @@ export { ArticlesStoreModule } from './articles-store.module';
 export * as ArticlesActions from './articles.actions';
 export { ArticlesEffects } from './articles.effects';
 export * as ArticlesSelectors from './articles.selectors';
+export { ArticlesState, articlesInitialState } from './articles.reducer';
diff --git a/src/app/store/auth/auth-store.module.ts b/src/app/store/auth/auth-store.module.ts
index 6d194d84..ae3ae747 100644
--- a/src/app/store/auth/auth-store.module.ts
+++ b/src/app/store/auth/auth-store.module.ts
@@ -5,14 +5,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { AuthEffects } from './auth.effects';
-import { authReducer } from './auth.reducer';
-import { AuthState } from './auth.state';
+import { AuthState, authReducer } from './auth.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([AuthEffects]),
-    StoreModule.forFeature<AuthState>('auth', authReducer),
+    StoreModule.forFeature<AuthState>('authState', authReducer),
   ],
 })
 export class AuthStoreModule {}
diff --git a/src/app/store/auth/auth.reducer.ts b/src/app/store/auth/auth.reducer.ts
index ddfbb7ec..4a1ba069 100755
--- a/src/app/store/auth/auth.reducer.ts
+++ b/src/app/store/auth/auth.reducer.ts
@@ -1,10 +1,23 @@
 import { createReducer, on } from '@ngrx/store';
 
+import { User } from '@app/models';
+
 import * as AuthActions from './auth.actions';
-import { AuthState, initialState } from './auth.state';
+
+export interface AuthState {
+  user: User | null;
+  hasCode: boolean;
+  temporaryPassword: string | null;
+}
+
+export const authInitialState: AuthState = {
+  user: null,
+  hasCode: false,
+  temporaryPassword: null,
+};
 
 export const authReducer = createReducer(
-  initialState,
+  authInitialState,
 
   on(
     AuthActions.loginSucceeded,
@@ -15,7 +28,7 @@ export const authReducer = createReducer(
     }),
   ),
 
-  on(AuthActions.logoutSucceeded, (): AuthState => initialState),
+  on(AuthActions.logoutSucceeded, (): AuthState => authInitialState),
 
   on(
     AuthActions.codeForPasswordChangeSucceeded,
diff --git a/src/app/store/auth/auth.selectors.ts b/src/app/store/auth/auth.selectors.ts
index 66267e44..3a83f3db 100755
--- a/src/app/store/auth/auth.selectors.ts
+++ b/src/app/store/auth/auth.selectors.ts
@@ -1,8 +1,8 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 
-import { AuthState } from './auth.state';
+import { AuthState } from './auth.reducer';
 
-export const selectAuthState = createFeatureSelector<AuthState>('auth');
+export const selectAuthState = createFeatureSelector<AuthState>('authState');
 
 export const selectIsAdmin = createSelector(
   selectAuthState,
diff --git a/src/app/store/auth/auth.state.ts b/src/app/store/auth/auth.state.ts
deleted file mode 100644
index 6bad394b..00000000
--- a/src/app/store/auth/auth.state.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { User } from '@app/models';
-
-export interface AuthState {
-  user: User | null;
-  hasCode: boolean;
-  temporaryPassword: string | null;
-}
-
-export const initialState: AuthState = {
-  user: null,
-  hasCode: false,
-  temporaryPassword: null,
-};
diff --git a/src/app/store/auth/index.ts b/src/app/store/auth/index.ts
index 6f37ceae..bb3f3b2b 100644
--- a/src/app/store/auth/index.ts
+++ b/src/app/store/auth/index.ts
@@ -3,3 +3,4 @@ export { AuthStoreModule } from './auth-store.module';
 export * as AuthActions from './auth.actions';
 export { AuthEffects } from './auth.effects';
 export * as AuthSelectors from './auth.selectors';
+export { AuthState, authInitialState } from './auth.reducer';
diff --git a/src/app/store/events/events-store.module.ts b/src/app/store/events/events-store.module.ts
index 7da7df8c..96536c77 100644
--- a/src/app/store/events/events-store.module.ts
+++ b/src/app/store/events/events-store.module.ts
@@ -5,14 +5,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { EventsEffects } from './events.effects';
-import { eventsReducer } from './events.reducer';
-import { EventsState } from './events.state';
+import { EventsState, eventsReducer } from './events.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([EventsEffects]),
-    StoreModule.forFeature<EventsState>('events', eventsReducer),
+    StoreModule.forFeature<EventsState>('eventsState', eventsReducer),
   ],
 })
 export class EventsStoreModule {}
diff --git a/src/app/store/events/events.reducer.ts b/src/app/store/events/events.reducer.ts
index 0d59237a..d432d805 100755
--- a/src/app/store/events/events.reducer.ts
+++ b/src/app/store/events/events.reducer.ts
@@ -1,19 +1,35 @@
+import { EntityState, createEntityAdapter } from '@ngrx/entity';
 import { createReducer, on } from '@ngrx/store';
 
-import type { EventFormData } from '@app/models';
+import type { ControlMode, Event, EventFormData, Id } from '@app/models';
+import { customSort } from '@app/utils';
 
 import * as EventsActions from './events.actions';
-import { EventsState, initialState } from './events.state';
+
+export interface EventsState extends EntityState<Event> {
+  eventId: Id | null;
+  eventFormData: EventFormData | null;
+  controlMode: ControlMode | null;
+  showPastEvents: boolean;
+}
+
+export const eventsAdapter = createEntityAdapter<Event>({
+  sortComparer: (a, b) => customSort(a, b, 'eventDate'),
+});
+
+export const eventsInitialState: EventsState = eventsAdapter.getInitialState({
+  eventId: null,
+  eventFormData: null,
+  controlMode: null,
+  showPastEvents: false,
+});
 
 export const eventsReducer = createReducer(
-  initialState,
+  eventsInitialState,
 
   on(
     EventsActions.fetchEventsSucceeded,
-    (state, { events }): EventsState => ({
-      ...state,
-      events,
-    }),
+    (state, { events }): EventsState => eventsAdapter.addMany(events, state),
   ),
 
   on(
@@ -34,44 +50,25 @@ export const eventsReducer = createReducer(
 
   on(
     EventsActions.fetchEventSucceeded,
-    (state, { event }): EventsState => ({
-      ...state,
-      events: state.events.length
-        ? [
-            ...state.events.map(storedEvent =>
-              storedEvent.id === event.id ? event : storedEvent,
-            ),
-          ]
-        : [event],
-      event,
-    }),
+    (state, { event }): EventsState =>
+      eventsAdapter.upsertOne(event, { ...state, eventId: event.id }),
   ),
 
   on(
     EventsActions.addEventSucceeded,
     EventsActions.updateEventSucceeded,
-    (state, { event }): EventsState => ({
-      ...state,
-      events: state.events.length
-        ? [
-            ...state.events.map(storedEvent =>
-              storedEvent.id === event.id ? event : storedEvent,
-            ),
-          ]
-        : [event],
-      event: null,
-      eventFormData: null,
-    }),
+    (state, { event }): EventsState =>
+      eventsAdapter.upsertOne(event, { ...state, eventId: null, eventFormData: null }),
   ),
 
   on(
     EventsActions.deleteEventSucceeded,
-    (state, { event }): EventsState => ({
-      ...state,
-      events: state.events.filter(storedEvent => storedEvent.id !== event.id),
-      event: null,
-      eventFormData: null,
-    }),
+    (state, { event }): EventsState =>
+      eventsAdapter.removeOne(event.id!, {
+        ...state,
+        eventId: null,
+        eventFormData: null,
+      }),
   ),
 
   on(
@@ -86,7 +83,7 @@ export const eventsReducer = createReducer(
     EventsActions.eventUnset,
     (state): EventsState => ({
       ...state,
-      event: null,
+      eventId: null,
       eventFormData: null,
       controlMode: null,
     }),
diff --git a/src/app/store/events/events.selectors.ts b/src/app/store/events/events.selectors.ts
index 519ea79b..32652b9d 100755
--- a/src/app/store/events/events.selectors.ts
+++ b/src/app/store/events/events.selectors.ts
@@ -4,22 +4,27 @@ import moment from 'moment-timezone';
 import { newEventFormTemplate } from '@app/components/event-form/new-event-form-template';
 import type { Id } from '@app/models';
 import { AuthSelectors } from '@app/store/auth';
-import { areSame, customSort } from '@app/utils';
+import { areSame } from '@app/utils';
 
-import { EventsState } from './events.state';
+import { EventsState, eventsAdapter } from './events.reducer';
 
-export const selectEventsState = createFeatureSelector<EventsState>('events');
+const selectEventsState = createFeatureSelector<EventsState>('eventsState');
 
-export const selectEvents = createSelector(selectEventsState, state =>
-  state.events?.length ? [...state.events].sort(customSort('eventDate')) : [],
-);
+const { selectAll: selectAllEvents } = eventsAdapter.getSelectors(selectEventsState);
 
 export const selectEventById = (id: Id) =>
-  createSelector(selectEvents, allEvents =>
+  createSelector(selectAllEvents, allEvents =>
     allEvents ? allEvents.find(event => event.id === id) : null,
   );
 
-export const selectEvent = createSelector(selectEventsState, state => state.event);
+export const selectEventId = createSelector(selectEventsState, state => state.eventId);
+
+export const selectEvent = createSelector(
+  selectAllEvents,
+  selectEventId,
+  (allEvents, eventId) =>
+    eventId ? allEvents.find(event => event.id === eventId) : null,
+);
 
 export const selectEventTitle = createSelector(selectEvent, event => event?.title);
 
@@ -28,8 +33,8 @@ export const selectEventFormData = createSelector(
   state => state.eventFormData,
 );
 
-export const selectUpcomingEvents = createSelector(selectEvents, events =>
-  events.filter(event => moment(event.eventDate).add(3, 'hours').isAfter(moment())),
+export const selectUpcomingEvents = createSelector(selectAllEvents, allEvents =>
+  allEvents.filter(event => moment(event.eventDate).add(3, 'hours').isAfter(moment())),
 );
 
 export const selectNextEvent = createSelector(selectUpcomingEvents, upcomingEvents =>
@@ -75,7 +80,7 @@ export const selectEventEditorScreenViewModel = createSelector({
 });
 
 export const selectScheduleViewModel = createSelector({
-  events: selectEvents,
+  allEvents: selectAllEvents,
   upcomingEvents: selectUpcomingEvents,
   nextEvent: selectNextEvent,
   showPastEvents: selectShowPastEvents,
diff --git a/src/app/store/events/events.state.ts b/src/app/store/events/events.state.ts
deleted file mode 100644
index df86da4e..00000000
--- a/src/app/store/events/events.state.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ControlMode, Event, EventFormData } from '@app/models';
-
-export interface EventsState {
-  events: Event[];
-  event: Event | null;
-  eventFormData: EventFormData | null;
-  controlMode: ControlMode | null;
-  showPastEvents: boolean;
-}
-
-export const initialState: EventsState = {
-  events: [],
-  event: null,
-  eventFormData: null,
-  controlMode: null,
-  showPastEvents: false,
-};
diff --git a/src/app/store/events/index.ts b/src/app/store/events/index.ts
index 8f3b9a41..6f31f3c3 100644
--- a/src/app/store/events/index.ts
+++ b/src/app/store/events/index.ts
@@ -3,3 +3,4 @@ export { EventsStoreModule } from './events-store.module';
 export * as EventsActions from './events.actions';
 export { EventsEffects } from './events.effects';
 export * as EventsSelectors from './events.selectors';
+export { EventsState, eventsInitialState } from './events.reducer';
diff --git a/src/app/store/images/images-store.module.ts b/src/app/store/images/images-store.module.ts
index 6e0e80c0..c6b48af1 100644
--- a/src/app/store/images/images-store.module.ts
+++ b/src/app/store/images/images-store.module.ts
@@ -5,14 +5,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { ImagesEffects } from './images.effects';
-import { imagesReducer } from './images.reducer';
-import { ImagesState } from './images.state';
+import { ImagesState, imagesReducer } from './images.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([ImagesEffects]),
-    StoreModule.forFeature<ImagesState>('images', imagesReducer),
+    StoreModule.forFeature<ImagesState>('imagesState', imagesReducer),
   ],
 })
 export class ImagesStoreModule {}
diff --git a/src/app/store/images/images.reducer.ts b/src/app/store/images/images.reducer.ts
index ddb95408..f6f0b93f 100755
--- a/src/app/store/images/images.reducer.ts
+++ b/src/app/store/images/images.reducer.ts
@@ -1,12 +1,23 @@
 import { createReducer, on } from '@ngrx/store';
 
+import { Image } from '@app/models';
+import { AppActions } from '@app/store/app';
+
 import { IMAGE_KEY } from '.';
-import { AppActions } from '../app';
 import * as ImagesActions from './images.actions';
-import { ImagesState, initialState } from './images.state';
+
+export interface ImagesState {
+  images: Image[];
+  isNewImageStored: boolean;
+}
+
+export const imagesInitialState: ImagesState = {
+  images: [],
+  isNewImageStored: false,
+};
 
 export const imagesReducer = createReducer(
-  initialState,
+  imagesInitialState,
 
   on(
     ImagesActions.fetchArticleBannerImageThumbnailsSucceeded,
@@ -17,7 +28,7 @@ export const imagesReducer = createReducer(
             const updatedImage = images.find(image => image.id === storedImage.id);
             return updatedImage ?? storedImage;
           })
-        : state.images,
+        : images,
     }),
   ),
 
diff --git a/src/app/store/images/images.selectors.ts b/src/app/store/images/images.selectors.ts
index fd287bd2..f5798bd8 100755
--- a/src/app/store/images/images.selectors.ts
+++ b/src/app/store/images/images.selectors.ts
@@ -2,9 +2,9 @@ import { createFeatureSelector, createSelector } from '@ngrx/store';
 
 import { Id } from '@app/models';
 
-import { ImagesState } from './images.state';
+import { ImagesState } from './images.reducer';
 
-export const selectImagesState = createFeatureSelector<ImagesState>('images');
+export const selectImagesState = createFeatureSelector<ImagesState>('imagesState');
 
 export const selectImages = createSelector(selectImagesState, state => state.images);
 
diff --git a/src/app/store/images/images.state.ts b/src/app/store/images/images.state.ts
deleted file mode 100644
index 32321864..00000000
--- a/src/app/store/images/images.state.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Image } from '@app/models';
-
-export interface ImagesState {
-  images: Image[];
-  isNewImageStored: boolean;
-}
-
-export const initialState: ImagesState = {
-  images: [],
-  isNewImageStored: false,
-};
diff --git a/src/app/store/images/index.ts b/src/app/store/images/index.ts
index adff4f90..a66ad73a 100644
--- a/src/app/store/images/index.ts
+++ b/src/app/store/images/index.ts
@@ -3,5 +3,6 @@ export { ImagesStoreModule } from './images-store.module';
 export * as ImagesActions from './images.actions';
 export { ImagesEffects } from './images.effects';
 export * as ImagesSelectors from './images.selectors';
+export { ImagesState, imagesInitialState } from './images.reducer';
 
 export const IMAGE_KEY = 'lcc-article-image';
diff --git a/src/app/store/members/index.ts b/src/app/store/members/index.ts
index 3ad0b102..049cc8f2 100644
--- a/src/app/store/members/index.ts
+++ b/src/app/store/members/index.ts
@@ -3,3 +3,4 @@ export { MembersStoreModule } from './members-store.module';
 export * as MembersActions from './members.actions';
 export { MembersEffects } from './members.effects';
 export * as MembersSelectors from './members.selectors';
+export { MembersState, membersInitialState } from './members.reducer';
diff --git a/src/app/store/members/members-store.module.ts b/src/app/store/members/members-store.module.ts
index 9fcd64ce..5c465880 100644
--- a/src/app/store/members/members-store.module.ts
+++ b/src/app/store/members/members-store.module.ts
@@ -5,14 +5,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { MembersEffects } from './members.effects';
-import { membersReducer } from './members.reducer';
-import { MembersState } from './members.state';
+import { MembersState, membersReducer } from './members.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([MembersEffects]),
-    StoreModule.forFeature<MembersState>('members', membersReducer),
+    StoreModule.forFeature<MembersState>('membersState', membersReducer),
   ],
 })
 export class MembersStoreModule {}
diff --git a/src/app/store/members/members.effects.ts b/src/app/store/members/members.effects.ts
index 7db8f150..f1060d4a 100755
--- a/src/app/store/members/members.effects.ts
+++ b/src/app/store/members/members.effects.ts
@@ -71,7 +71,12 @@ export class MembersEffects {
           lastEditedBy: `${user.firstName} ${user.lastName}`,
           dateLastEdited: moment().toISOString(),
         };
-        const modifiedMember = { ...memberFormData, modificationInfo, id: null };
+        const modifiedMember = {
+          ...memberFormData,
+          modificationInfo,
+          id: null,
+          peakRating: memberFormData.rating,
+        };
 
         return this.membersService.addMember(modifiedMember).pipe(
           map(response =>
diff --git a/src/app/store/members/members.reducer.ts b/src/app/store/members/members.reducer.ts
index 51d6db1d..25e709da 100755
--- a/src/app/store/members/members.reducer.ts
+++ b/src/app/store/members/members.reducer.ts
@@ -1,19 +1,40 @@
+import { EntityState, createEntityAdapter } from '@ngrx/entity';
 import { createReducer, on } from '@ngrx/store';
 
-import { MemberFormData } from '@app/models';
+import { ControlMode, Id, Member, MemberFormData } from '@app/models';
 
 import * as MembersActions from './members.actions';
-import { MembersState, initialState } from './members.state';
+
+export interface MembersState extends EntityState<Member> {
+  memberId: Id | null;
+  memberFormData: MemberFormData | null;
+  controlMode: ControlMode | null;
+  sortedBy: string;
+  isAscending: boolean;
+  pageNum: number;
+  pageSize: number;
+  showActiveOnly: boolean;
+}
+
+export const membersAdapter = createEntityAdapter<Member>();
+
+export const membersInitialState: MembersState = membersAdapter.getInitialState({
+  memberId: null,
+  memberFormData: null,
+  controlMode: null,
+  sortedBy: 'rating',
+  isAscending: false,
+  pageNum: 1,
+  pageSize: 20,
+  showActiveOnly: true,
+});
 
 export const membersReducer = createReducer(
-  initialState,
+  membersInitialState,
 
   on(
     MembersActions.fetchMembersSucceeded,
-    (state, { members }): MembersState => ({
-      ...state,
-      members,
-    }),
+    (state, { members }): MembersState => membersAdapter.addMany(members, state),
   ),
 
   on(
@@ -34,42 +55,29 @@ export const membersReducer = createReducer(
 
   on(
     MembersActions.fetchMemberSucceeded,
-    (state, { member }): MembersState => ({
-      ...state,
-      members: [
-        ...state.members.map(storedMember =>
-          storedMember.id === member.id ? member : storedMember,
-        ),
-      ],
-      member,
-    }),
+    (state, { member }): MembersState =>
+      membersAdapter.upsertOne(member, { ...state, memberId: member.id }),
   ),
 
   on(
     MembersActions.addMemberSucceeded,
     MembersActions.updateMemberSucceeded,
-    (state, { member }): MembersState => ({
-      ...state,
-      members: state.members.length
-        ? [
-            ...state.members.map(storedMember =>
-              storedMember.id === member.id ? member : storedMember,
-            ),
-          ]
-        : state.members,
-      member: null,
-      memberFormData: null,
-    }),
+    (state, { member }): MembersState =>
+      membersAdapter.upsertOne(member, {
+        ...state,
+        memberId: null,
+        memberFormData: null,
+      }),
   ),
 
   on(
     MembersActions.deleteMemberSucceeded,
-    (state, { member }): MembersState => ({
-      ...state,
-      members: state.members.filter(storedMember => storedMember.id !== member.id),
-      member: null,
-      memberFormData: null,
-    }),
+    (state, { member }): MembersState =>
+      membersAdapter.removeOne(member.id!, {
+        ...state,
+        memberId: null,
+        memberFormData: null,
+      }),
   ),
 
   on(MembersActions.formValueChanged, (state, { value }): MembersState => {
@@ -119,7 +127,7 @@ export const membersReducer = createReducer(
     MembersActions.memberUnset,
     (state): MembersState => ({
       ...state,
-      member: null,
+      memberId: null,
       memberFormData: null,
       controlMode: null,
     }),
diff --git a/src/app/store/members/members.selectors.ts b/src/app/store/members/members.selectors.ts
index 1b5c58f3..ddd74f4c 100755
--- a/src/app/store/members/members.selectors.ts
+++ b/src/app/store/members/members.selectors.ts
@@ -2,26 +2,28 @@ import { createFeatureSelector, createSelector } from '@ngrx/store';
 
 import { newMemberFormTemplate } from '@app/components/member-form/new-member-form-template';
 import type { Id } from '@app/models';
-import { AppSelectors } from '@app/store/app';
 import { AuthSelectors } from '@app/store/auth';
 import { areSame, customSort } from '@app/utils';
 
-import { MembersState } from './members.state';
+import { MembersState, membersAdapter } from './members.reducer';
 
-export const selectMembersState = createFeatureSelector<MembersState>('members');
+const selectMembersState = createFeatureSelector<MembersState>('membersState');
 
-export const selectMembers = createSelector(selectMembersState, state => state.members);
+const { selectAll: selectAllMembers } = membersAdapter.getSelectors(selectMembersState);
 
 export const selectMemberById = (id: Id) =>
-  createSelector(selectMembers, members => {
-    return members ? members.find(member => member.id === id) : null;
-  });
+  createSelector(selectAllMembers, allMembers =>
+    allMembers ? allMembers.find(member => member.id === id) : null,
+  );
 
-export const selectActiveMembers = createSelector(selectMembersState, state =>
-  state.members.filter(member => member.isActive),
-);
+export const selectMemberId = createSelector(selectMembersState, state => state.memberId);
 
-export const selectMember = createSelector(selectMembersState, state => state.member);
+export const selectMember = createSelector(
+  selectAllMembers,
+  selectMemberId,
+  (allMembers, memberId) =>
+    memberId ? allMembers.find(member => member.id === memberId) : null,
+);
 
 export const selectMemberName = createSelector(selectMember, member =>
   member?.firstName && member?.lastName ? `${member.firstName} ${member.lastName}` : null,
@@ -91,19 +93,24 @@ export const selectShowActiveOnly = createSelector(
   state => state.showActiveOnly,
 );
 
+export const selectActiveMembers = createSelector(selectAllMembers, allMembers =>
+  allMembers.filter(member => member.isActive),
+);
+
 export const selectSortedMembers = createSelector(
-  selectMembers,
+  selectAllMembers,
   selectSortedBy,
   selectIsAscending,
-  (members, sortedBy, isAscending) => {
+  (allMembers, sortedBy, isAscending) => {
     const sortKey =
       sortedBy === 'born'
         ? 'yearOfBirth'
         : sortedBy === 'lastUpdated'
           ? 'modificationInfo.dateLastEdited'
           : sortedBy;
-    const sortedMembers = [...members].sort(customSort(sortKey));
-    return isAscending ? sortedMembers : sortedMembers.reverse();
+    return [...allMembers].sort((a, b) =>
+      customSort(a, b, sortKey, isAscending, 'lastName'),
+    );
   },
 );
 
@@ -122,27 +129,21 @@ export const selectDisplayedMembers = createSelector(
     filteredMembers.slice(startIndex ?? 0, endIndex ?? undefined),
 );
 
-const _selectMembersTableViewModelMembers = createSelector({
-  all: selectMembers,
+export const selectMembersTableMembersViewModel = createSelector({
+  all: selectAllMembers,
   active: selectActiveMembers,
   displayed: selectDisplayedMembers,
   filtered: selectFilteredMembers,
 });
 
-const _selectMembersTableViewModelPagination = createSelector({
+export const selectMembersTableConfigViewModel = createSelector({
   pageNum: selectPageNum,
   pageSize: selectPageSize,
-});
-
-export const selectMembersTableViewModel = createSelector({
-  members: _selectMembersTableViewModelMembers,
-  pagination: _selectMembersTableViewModelPagination,
-  isAdmin: AuthSelectors.selectIsAdmin,
   isAscending: selectIsAscending,
-  isSafeMode: AppSelectors.selectIsSafeMode,
   showActiveOnly: selectShowActiveOnly,
   sortedBy: selectSortedBy,
   startIndex: selectStartIndex,
+  isAdmin: AuthSelectors.selectIsAdmin,
 });
 
 export const selectMemberFormViewModel = createSelector({
@@ -152,7 +153,6 @@ export const selectMemberFormViewModel = createSelector({
   memberNameInForm: selectMemberNameInForm,
   controlMode: selectControlMode,
   hasUnsavedChanges: selectHasUnsavedChanges,
-  isSafeMode: AppSelectors.selectIsSafeMode,
 });
 
 export const selectMemberEditorViewModel = createSelector({
diff --git a/src/app/store/members/members.state.ts b/src/app/store/members/members.state.ts
deleted file mode 100644
index 47984377..00000000
--- a/src/app/store/members/members.state.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { ControlMode, Member, MemberFormData } from '@app/models';
-
-export interface MembersState {
-  members: Member[];
-  member: Member | null;
-  memberFormData: MemberFormData | null;
-  controlMode: ControlMode | null;
-  sortedBy: string;
-  isAscending: boolean;
-  pageNum: number;
-  pageSize: number;
-  showActiveOnly: boolean;
-}
-
-export const initialState: MembersState = {
-  members: [],
-  member: null,
-  memberFormData: null,
-  controlMode: null,
-  sortedBy: 'rating',
-  isAscending: false,
-  pageNum: 1,
-  pageSize: 20,
-  showActiveOnly: true,
-};
diff --git a/src/app/store/meta-reducers.ts b/src/app/store/meta-reducers.ts
index 16cd6c7b..fea5ab9f 100644
--- a/src/app/store/meta-reducers.ts
+++ b/src/app/store/meta-reducers.ts
@@ -2,33 +2,29 @@ import { RouterState } from '@ngrx/router-store';
 import { Action, ActionReducer, MetaReducer } from '@ngrx/store';
 import { localStorageSync } from 'ngrx-store-localstorage';
 
-import { AppState } from '@app/store/app/app.state';
-import { ArticlesState } from '@app/store/articles/articles.state';
-import { AuthState } from '@app/store/auth/auth.state';
-import { EventsState } from '@app/store/events/events.state';
-import { ImagesState } from '@app/store/images/images.state';
-import { MembersState } from '@app/store/members/members.state';
-import { NavState } from '@app/store/nav/nav.state';
-import { NotificationsState } from '@app/store/notifications/notifications.state';
-
 import { environment } from '@env';
 
-class MetaStateClass {
-  constructor(
-    readonly app?: AppState,
-    readonly articles?: ArticlesState,
-    readonly auth?: AuthState,
-    readonly events?: EventsState,
-    readonly images?: ImagesState,
-    readonly members?: MembersState,
-    readonly nav?: NavState,
-    readonly notifications?: NotificationsState,
-    readonly router?: RouterState,
-  ) {}
+import { AppState } from './app';
+import { ArticlesState } from './articles';
+import { AuthState } from './auth';
+import { EventsState } from './events';
+import { ImagesState } from './images';
+import { MembersState } from './members';
+import { NavState } from './nav';
+import { NotificationsState } from './notifications';
+
+export interface MetaState {
+  appState?: AppState;
+  articlesState?: ArticlesState;
+  authState?: AuthState;
+  eventsState?: EventsState;
+  imagesState?: ImagesState;
+  membersState?: MembersState;
+  navState?: NavState;
+  notificationsState?: NotificationsState;
+  routerState?: RouterState;
 }
 
-export type MetaState = MetaStateClass;
-
 function actionLogMetaReducer(
   reducer: ActionReducer<MetaState>,
 ): ActionReducer<MetaState> {
@@ -41,9 +37,15 @@ function actionLogMetaReducer(
   };
 }
 
-const hydratedStates = Object.keys(new MetaStateClass()).filter(
-  key => !['notifications', 'router'].includes(key),
-) as Array<keyof Exclude<MetaState, RouterState>>;
+const hydratedStates = [
+  'appState',
+  'articlesState',
+  'authState',
+  'eventsState',
+  'imagesState',
+  'membersState',
+  'navState',
+] as Array<keyof Exclude<MetaState, NotificationsState | RouterState>>;
 
 function hydrationMetaReducer(
   reducer: ActionReducer<MetaState>,
diff --git a/src/app/store/nav/index.ts b/src/app/store/nav/index.ts
index c6ad5cc1..9111119d 100644
--- a/src/app/store/nav/index.ts
+++ b/src/app/store/nav/index.ts
@@ -3,3 +3,4 @@ export { NavStoreModule } from './nav-store.module';
 export * as NavActions from './nav.actions';
 export { NavEffects } from './nav.effects';
 export * as NavSelectors from './nav.selectors';
+export { NavState, navInitialState } from './nav.reducer';
diff --git a/src/app/store/nav/nav-store.module.ts b/src/app/store/nav/nav-store.module.ts
index ab8b3ede..51c1629b 100644
--- a/src/app/store/nav/nav-store.module.ts
+++ b/src/app/store/nav/nav-store.module.ts
@@ -5,14 +5,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NavEffects } from './nav.effects';
-import { navReducer } from './nav.reducer';
-import { NavState } from './nav.state';
+import { NavState, navReducer } from './nav.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([NavEffects]),
-    StoreModule.forFeature<NavState>('nav', navReducer),
+    StoreModule.forFeature<NavState>('navState', navReducer),
   ],
 })
 export class NavStoreModule {}
diff --git a/src/app/store/nav/nav.reducer.ts b/src/app/store/nav/nav.reducer.ts
index e5fcb979..13488735 100644
--- a/src/app/store/nav/nav.reducer.ts
+++ b/src/app/store/nav/nav.reducer.ts
@@ -1,10 +1,17 @@
 import { createReducer, on } from '@ngrx/store';
 
 import * as navActions from './nav.actions';
-import { NavState, initialState } from './nav.state';
+
+export interface NavState {
+  pathHistory: string[] | null;
+}
+
+export const navInitialState: NavState = {
+  pathHistory: null,
+};
 
 export const navReducer = createReducer(
-  initialState,
+  navInitialState,
 
   on(navActions.appendPathToHistory, (state, { path }): NavState => {
     const currentPathHistory = state.pathHistory;
diff --git a/src/app/store/nav/nav.selectors.ts b/src/app/store/nav/nav.selectors.ts
index e02b954c..40a323a2 100644
--- a/src/app/store/nav/nav.selectors.ts
+++ b/src/app/store/nav/nav.selectors.ts
@@ -4,9 +4,9 @@ import { createFeatureSelector, createSelector } from '@ngrx/store';
 import { AppSelectors } from '@app/store/app';
 import { AuthSelectors } from '@app/store/auth';
 
-import { NavState } from './nav.state';
+import { NavState } from './nav.reducer';
 
-export const selectNavState = createFeatureSelector<NavState>('nav');
+export const selectNavState = createFeatureSelector<NavState>('navState');
 
 export const selectPathHistory = createSelector(
   selectNavState,
diff --git a/src/app/store/nav/nav.state.ts b/src/app/store/nav/nav.state.ts
deleted file mode 100644
index fa99ccc4..00000000
--- a/src/app/store/nav/nav.state.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface NavState {
-  pathHistory: string[] | null;
-}
-
-export const initialState: NavState = {
-  pathHistory: null,
-};
diff --git a/src/app/store/notifications/index.ts b/src/app/store/notifications/index.ts
index 91315250..2b41f008 100644
--- a/src/app/store/notifications/index.ts
+++ b/src/app/store/notifications/index.ts
@@ -2,3 +2,4 @@ export { NotificationsStoreModule } from './notifications-store.module';
 
 export * as NotificationsActions from './notifications.actions';
 export * as NotificationsSelectors from './notifications.selectors';
+export { NotificationsState, notificationsInitialState } from './notifications.reducer';
diff --git a/src/app/store/notifications/notifications-store.module.ts b/src/app/store/notifications/notifications-store.module.ts
index 495981aa..f4d3390f 100644
--- a/src/app/store/notifications/notifications-store.module.ts
+++ b/src/app/store/notifications/notifications-store.module.ts
@@ -5,14 +5,16 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NotificationsEffects } from './notifications.effects';
-import { appReducer } from './notifications.reducer';
-import { NotificationsState } from './notifications.state';
+import { NotificationsState, notificationsReducer } from './notifications.reducer';
 
 @NgModule({
   imports: [
     CommonModule,
     EffectsModule.forFeature([NotificationsEffects]),
-    StoreModule.forFeature<NotificationsState>('notifications', appReducer),
+    StoreModule.forFeature<NotificationsState>(
+      'notificationsState',
+      notificationsReducer,
+    ),
   ],
 })
 export class NotificationsStoreModule {}
diff --git a/src/app/store/notifications/notifications.reducer.ts b/src/app/store/notifications/notifications.reducer.ts
index 9e4e59ac..967dca8d 100755
--- a/src/app/store/notifications/notifications.reducer.ts
+++ b/src/app/store/notifications/notifications.reducer.ts
@@ -1,10 +1,19 @@
 import { createReducer, on } from '@ngrx/store';
 
+import { Toast } from '@app/models';
+
 import * as AppActions from './notifications.actions';
-import { NotificationsState, initialState } from './notifications.state';
 
-export const appReducer = createReducer(
-  initialState,
+export interface NotificationsState {
+  toasts: Toast[];
+}
+
+export const notificationsInitialState: NotificationsState = {
+  toasts: [],
+};
+
+export const notificationsReducer = createReducer(
+  notificationsInitialState,
 
   on(
     AppActions.toastAdded,
diff --git a/src/app/store/notifications/notifications.selectors.ts b/src/app/store/notifications/notifications.selectors.ts
index 704d9287..2da9c7dc 100755
--- a/src/app/store/notifications/notifications.selectors.ts
+++ b/src/app/store/notifications/notifications.selectors.ts
@@ -1,9 +1,9 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store';
 
-import { NotificationsState } from './notifications.state';
+import { NotificationsState } from './notifications.reducer';
 
 export const selectNotificationsState =
-  createFeatureSelector<NotificationsState>('notifications');
+  createFeatureSelector<NotificationsState>('notificationsState');
 
 export const selectToasts = createSelector(
   selectNotificationsState,
diff --git a/src/app/store/notifications/notifications.state.ts b/src/app/store/notifications/notifications.state.ts
deleted file mode 100644
index 0157dd55..00000000
--- a/src/app/store/notifications/notifications.state.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Toast } from '@app/models';
-
-export interface NotificationsState {
-  toasts: Toast[];
-}
-
-export const initialState: NotificationsState = {
-  toasts: [],
-};
diff --git a/src/app/utils/index.ts b/src/app/utils/index.ts
index 474dde2b..4d8fe3a0 100644
--- a/src/app/utils/index.ts
+++ b/src/app/utils/index.ts
@@ -27,6 +27,5 @@ export { getScore } from './pgn/get-score.util';
 export { getNewPeakRating } from './rating/get-new-peak-rating.util';
 
 export { customSort } from './sort/custom-sort.util';
-export { sortArticles } from './sort/sort-articles.util';
 
 export { actionSanitizer } from './store/action-sanitizer.util';
diff --git a/src/app/utils/rating/get-new-peak-rating.util.spec.ts b/src/app/utils/rating/get-new-peak-rating.util.spec.ts
index 1ce25774..1a05301a 100644
--- a/src/app/utils/rating/get-new-peak-rating.util.spec.ts
+++ b/src/app/utils/rating/get-new-peak-rating.util.spec.ts
@@ -1,14 +1,10 @@
 import { getNewPeakRating } from './get-new-peak-rating.util';
 
 describe('getNewPeakRating', () => {
-  it('returns an empty string if either rating is `undefined` or a non-numeric value', () => {
-    expect(getNewPeakRating(undefined, '1000')).toBe('');
-    expect(getNewPeakRating('1000', undefined)).toBe('');
-    expect(getNewPeakRating(undefined, undefined)).toBe('');
-    expect(getNewPeakRating('', '')).toBe('');
-    expect(getNewPeakRating('abc', 'abc')).toBe('');
-    expect(getNewPeakRating('1000/5', 'd/5')).toBe('');
-    expect(getNewPeakRating('1000/a', '1000')).toBe('');
+  it('returns 0 if either rating is a non-numeric value', () => {
+    expect(getNewPeakRating('1000/5', 'd/5')).toBe('0');
+    expect(getNewPeakRating('1000/a', '1000')).toBe('0');
+    expect(getNewPeakRating('abc', 'abc')).toBe('0');
   });
 
   it('returns correct new peak rating', () => {
diff --git a/src/app/utils/rating/get-new-peak-rating.util.ts b/src/app/utils/rating/get-new-peak-rating.util.ts
index c4fa3f82..c053d690 100644
--- a/src/app/utils/rating/get-new-peak-rating.util.ts
+++ b/src/app/utils/rating/get-new-peak-rating.util.ts
@@ -1,11 +1,7 @@
 /**
  * Return new peak Elo rating based on current rating and current peak rating.
  */
-export function getNewPeakRating(rating?: string, peakRating?: string): string {
-  if (!rating || !peakRating) {
-    return '';
-  }
-
+export function getNewPeakRating(rating: string, peakRating: string): string {
   const [_rating, provisionalRatingCount] = rating.split('/');
   const [_peakRating, provisionalPeakRatingCount] = peakRating.split('/');
 
@@ -19,7 +15,8 @@ export function getNewPeakRating(rating?: string, peakRating?: string): string {
     (provisionalPeakRatingCount !== undefined &&
       isNaN(Number(provisionalPeakRatingCount)))
   ) {
-    return '';
+    console.error('[LCC] Unable to parse ratings to determine new peak rating.');
+    return '0';
   }
 
   const surpassedCurrentPeakRating = ratingNum > peakRatingNum;
diff --git a/src/app/utils/sort/custom-sort.util.spec.ts b/src/app/utils/sort/custom-sort.util.spec.ts
index 2b6774fa..19cb0049 100644
--- a/src/app/utils/sort/custom-sort.util.spec.ts
+++ b/src/app/utils/sort/custom-sort.util.spec.ts
@@ -2,81 +2,211 @@ import { customSort } from './custom-sort.util';
 
 describe('customSort', () => {
   it('should handle `undefined` and `null` correctly', () => {
-    const result = [undefined, null, null].sort(customSort('key'));
+    const result = [undefined, null, null].sort((a, b) => customSort(a, b, 'key'));
     expect(result).toEqual([null, null, undefined]);
   });
 
-  describe('should sort correctly based on types:', () => {
-    it('number', () => {
-      const a = { key: 4 };
-      const b = { key: 6 };
-      const c = { key: 2 };
-
-      const result = [a, b, c].sort(customSort('key'));
-      expect(result).toEqual([c, a, b]);
-    });
-
-    it('string', () => {
-      const a = { key: 'abc' };
-      const b = { key: 'xyz' };
-      const c = { key: 'def' };
-
-      const result = [a, b, c].sort(customSort('key'));
-      expect(result).toEqual([a, c, b]);
-    });
-
-    it('boolean', () => {
-      const a = { key: false };
-      const b = { key: false };
-      const c = { key: true };
-
-      const result = [a, b, c].sort(customSort('key'));
-      expect(result).toEqual([c, a, b]);
-    });
-
-    it('null', () => {
-      const a = { key: null };
-      const b = { key: null };
-      const c = { key: null };
-
-      const result = [a, b, c].sort(customSort('key'));
-      expect(result).toEqual([a, b, c]);
+  describe('should correctly sort based on provided keys and reverse flags', () => {
+    describe('with only a primary key', () => {
+      describe('when `reversePrimarySort` is set to `false` (default)', () => {
+        it('number', () => {
+          const a = { key: 4 };
+          const b = { key: 6 };
+          const c = { key: 2 };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key'));
+          expect(result).toEqual([c, a, b]);
+        });
+
+        it('string', () => {
+          const a = { key: '111' };
+          const b = { key: '22' };
+          const c = { key: '3' };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key'));
+          expect(result).toEqual([a, b, c]);
+        });
+
+        it('boolean', () => {
+          const a = { key: false };
+          const b = { key: false };
+          const c = { key: true };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key'));
+          expect(result).toEqual([c, a, b]);
+        });
+
+        it('null', () => {
+          const a = { key: null };
+          const b = { key: null };
+          const c = { key: null };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key'));
+          expect(result).toEqual([a, b, c]);
+        });
+
+        it('undefined', () => {
+          const a = { key: undefined };
+          const b = { key: undefined };
+          const c = { key: undefined };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key'));
+          expect(result).toEqual([a, b, c]);
+        });
+
+        it('empty object', () => {
+          const a = {};
+          const b = {};
+          const c = {};
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key'));
+          expect(result).toEqual([a, b, c]);
+        });
+
+        it('nested object', () => {
+          const a = { outerKey: { innerKey: '3' } };
+          const b = { outerKey: { innerKey: '5' } };
+          const c = { outerKey: { innerKey: '1' } };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'outerKey.innerKey'));
+          expect(result).toEqual([c, a, b]);
+        });
+
+        it('deep-nested object', () => {
+          const a = { outerKey: { innerKey1: { x: '3', y: 10 }, innerKey2: null } };
+          const b = { outerKey: { innerKey1: { x: '5', y: 10 }, innerKey2: 'value' } };
+          const c = { outerKey: { innerKey1: { x: '1', y: 10 }, innerKey2: undefined } };
+
+          const result = [a, b, c].sort((a, b) =>
+            customSort(a, b, 'outerKey.innerKey1.x'),
+          );
+          expect(result).toEqual([c, a, b]);
+        });
+      });
+
+      describe('when `reversePrimarySort` is set to `true`', () => {
+        it('number', () => {
+          const a = { key: 4 };
+          const b = { key: 6 };
+          const c = { key: 2 };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key', true));
+          expect(result).toEqual([b, a, c]);
+        });
+
+        it('string', () => {
+          const a = { key: '111' };
+          const b = { key: '22' };
+          const c = { key: '3' };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key', true));
+          expect(result).toEqual([c, b, a]);
+        });
+
+        it('boolean', () => {
+          const a = { key: false };
+          const b = { key: false };
+          const c = { key: true };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key', true));
+          expect(result).toEqual([a, b, c]);
+        });
+
+        it('null', () => {
+          const a = { key: null };
+          const b = { key: null };
+          const c = { key: null };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key', true));
+          expect(result).toEqual([c, b, a]);
+        });
+
+        it('undefined', () => {
+          const a = { key: undefined };
+          const b = { key: undefined };
+          const c = { key: undefined };
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key', true));
+          expect(result).toEqual([c, b, a]);
+        });
+
+        it('empty object', () => {
+          const a = {};
+          const b = {};
+          const c = {};
+
+          const result = [a, b, c].sort((a, b) => customSort(a, b, 'key', true));
+          expect(result).toEqual([c, b, a]);
+        });
+
+        it('nested object', () => {
+          const a = { outerKey: { innerKey: '3' } };
+          const b = { outerKey: { innerKey: '5' } };
+          const c = { outerKey: { innerKey: '1' } };
+
+          const result = [a, b, c].sort((a, b) =>
+            customSort(a, b, 'outerKey.innerKey', true),
+          );
+          expect(result).toEqual([b, a, c]);
+        });
+
+        it('deep-nested object', () => {
+          const a = { outerKey: { innerKey1: { x: '3', y: 10 }, innerKey2: null } };
+          const b = { outerKey: { innerKey1: { x: '5', y: 10 }, innerKey2: 'value' } };
+          const c = { outerKey: { innerKey1: { x: '1', y: 10 }, innerKey2: undefined } };
+
+          const result = [a, b, c].sort((a, b) =>
+            customSort(a, b, 'outerKey.innerKey1.x', true),
+          );
+          expect(result).toEqual([b, a, c]);
+        });
+      });
     });
 
-    it('undefined', () => {
-      const a = { key: undefined };
-      const b = { key: undefined };
-      const c = { key: undefined };
-
-      const result = [a, b, c].sort(customSort('key'));
-      expect(result).toEqual([a, b, c]);
-    });
-
-    it('empty object', () => {
-      const a = {};
-      const b = {};
-      const c = {};
-
-      const result = [a, b, c].sort(customSort('key'));
-      expect(result).toEqual([a, b, c]);
-    });
-
-    it('nested object', () => {
-      const a = { outerKey: { innerKey: '3' } };
-      const b = { outerKey: { innerKey: '5' } };
-      const c = { outerKey: { innerKey: '1' } };
-
-      const result = [a, b, c].sort(customSort('outerKey.innerKey'));
-      expect(result).toEqual([c, a, b]);
-    });
-
-    it('deep-nested object', () => {
-      const a = { outerKey: { innerKey: '3', x: null } };
-      const b = { outerKey: { innerKey: '5', x: 'value' } };
-      const c = { outerKey: { innerKey: '1', x: undefined } };
-
-      const result = [a, b, c].sort(customSort('outerKey.innerKey.x'));
-      expect(result).toEqual([c, a, b]);
+    describe('with both a primary and secondary key', () => {
+      it('should ignore secondary key if can be sorted by primary key (`reversePrimarySort` = false)', () => {
+        const a = { outerKey: { innerKey1: '3', innerKey2: 'z' } };
+        const b = { outerKey: { innerKey1: '5', innerKey2: 'y' } };
+        const c = { outerKey: { innerKey1: '1', innerKey2: 'x' } };
+
+        const result = [a, b, c].sort((a, b) =>
+          customSort(a, b, 'outerKey.innerKey2', false, 'outerKey.innerKey1'),
+        );
+        expect(result).toEqual([c, b, a]);
+      });
+
+      it('should ignore secondary key if can be sorted by primary key (`reversePrimarySort` = true)', () => {
+        const a = { outerKey: { innerKey1: '3', innerKey2: 'z' } };
+        const b = { outerKey: { innerKey1: '5', innerKey2: 'y' } };
+        const c = { outerKey: { innerKey1: '1', innerKey2: 'x' } };
+
+        const result = [a, b, c].sort((a, b) =>
+          customSort(a, b, 'outerKey.innerKey2', true, 'outerKey.innerKey1'),
+        );
+        expect(result).toEqual([a, b, c]);
+      });
+
+      it('should sort by secondary key if sort by primary key resulted in 0 (`reversePrimarySort` = false)', () => {
+        const a = { outerKey: { innerKey1: true, innerKey2: 'z' } };
+        const b = { outerKey: { innerKey1: true, innerKey2: 'x' } };
+        const c = { outerKey: { innerKey1: true, innerKey2: 'y' } };
+
+        const result = [a, b, c].sort((a, b) =>
+          customSort(a, b, 'outerKey.innerKey1', false, 'outerKey.innerKey2'),
+        );
+        expect(result).toEqual([b, c, a]);
+      });
+
+      it('should sort by secondary key if sort by primary key resulted in 0 (`reversePrimarySort` = true)', () => {
+        const a = { outerKey: { innerKey1: true, innerKey2: 'z' } };
+        const b = { outerKey: { innerKey1: true, innerKey2: 'x' } };
+        const c = { outerKey: { innerKey1: true, innerKey2: 'y' } };
+
+        const result = [a, b, c].sort((a, b) =>
+          customSort(a, b, 'outerKey.innerKey1', true, 'outerKey.innerKey2', true),
+        );
+        expect(result).toEqual([a, c, b]);
+      });
     });
   });
 });
diff --git a/src/app/utils/sort/custom-sort.util.ts b/src/app/utils/sort/custom-sort.util.ts
index 5392d0aa..0f93cea9 100644
--- a/src/app/utils/sort/custom-sort.util.ts
+++ b/src/app/utils/sort/custom-sort.util.ts
@@ -3,42 +3,58 @@ import { has } from 'lodash';
 import { isDefined } from '@app/utils';
 
 /**
- * A custom sorting algorithm, to be used within an array sort method, e.g.
- * `sortedItems = items.sort(customSort(key))`.
- *
- * Return a sort function which sorts based on keys' types, which returns `-1` if the first value
+ * A custom sorting algorithm, primarily intended as a custom sort comparer function to be passed
+ * in to NgRx entity adapters. Sorts based on the keys' types, returning `-1` if the first value
  * is less; `0` if equal; and `1` if the first value is greater.
  *
- * @param {string} key The object property to sort by
+ * @param {unknown} a The first object
+ * @param {unknown} b The second object
+ * @param {string} primaryKey The primary object property to sort by
+ * @param {boolean=} reversePrimarySort Whether to reverse the order of the primary sort
+ * (defaults to `false`)
+ * @param {string=} secondaryKey An optional secondary object property to sort by in case the
+ * first sort returned 0
+ * @param {boolean=} reverseSecondarySort Whether to reverse the order of the secondary sort
+ * (defaults to `false`)
+ *
  */
-export function customSort(key: string) {
-  return function _sort(a: unknown, b: unknown, _key = key): -1 | 0 | 1 {
-    const [nestedObject, nestedKey] = _key.split('.');
-    if (_key.includes('.') && has(a, nestedObject) && has(b, nestedObject)) {
-      // Call _sort() recursively until lowest-level property is reached
+export function customSort(
+  a: unknown,
+  b: unknown,
+  primaryKey: string,
+  reversePrimarySort: boolean | undefined = false,
+  secondaryKey?: string,
+  reverseSecondarySort: boolean | undefined = false,
+): -1 | 0 | 1 {
+  const _sort = (a: unknown, b: unknown, key: string): -1 | 0 | 1 => {
+    const [nestedObject, ...remainder] = key.split('.');
+    const nestedKey = remainder.join('.');
+
+    if (key.includes('.') && has(a, nestedObject) && has(b, nestedObject)) {
+      // Call _sort recursively until lowest-level property is reached
       return _sort(a[nestedObject], b[nestedObject], nestedKey);
     }
 
-    if (!has(a, _key) || !has(b, _key)) {
+    if (!has(a, key) || !has(b, key)) {
       console.error(
-        `[LCC] Sort error: property '${_key}' does not exist on both objects.`,
+        `[LCC] Sort error: property '${key}' does not exist on both objects.`,
       );
       return 0;
     }
 
-    const aVal = a[_key as keyof typeof a];
-    const bVal = b[_key as keyof typeof b];
+    const aVal = a[key as keyof typeof a];
+    const bVal = b[key as keyof typeof b];
 
     if (!isDefined(aVal) && !isDefined(bVal)) {
       return 0;
     }
 
     if (!isDefined(aVal)) {
-      return 1;
+      return -1;
     }
 
     if (!isDefined(bVal)) {
-      return -1;
+      return 1;
     }
 
     if (typeof aVal !== typeof bVal) {
@@ -51,7 +67,7 @@ export function customSort(key: string) {
     }
 
     if (aVal instanceof Date || bVal instanceof Date) {
-      console.error(`[LCC] Sort error: JS date object detected while sorting '${_key}'`);
+      console.error(`[LCC] Sort error: JS date object detected while sorting '${key}'`);
       return 0;
     }
 
@@ -65,14 +81,14 @@ export function customSort(key: string) {
 
     if (typeof aVal !== 'string') {
       console.error(
-        `[LCC] Sort error: unknown property type detected while sorting '${_key}': '${typeof aVal}'`,
+        `[LCC] Sort error: unknown property type detected while sorting '${key}': '${typeof aVal}'`,
       );
       return 0;
     }
 
     if (typeof bVal !== 'string') {
       console.error(
-        `[LCC] Sort error: unknown property type detected while sorting '${_key}': '${typeof bVal}'`,
+        `[LCC] Sort error: unknown property type detected while sorting '${key}': '${typeof bVal}'`,
       );
       return 0;
     }
@@ -90,4 +106,16 @@ export function customSort(key: string) {
       return aCompare < bCompare ? -1 : aCompare === bCompare ? 0 : 1;
     }
   };
+
+  const primarySortResult = _sort(a, b, primaryKey);
+  if (primarySortResult !== 0 || !secondaryKey) {
+    return reversePrimarySort
+      ? ((primarySortResult * -1) as 1 | 0 | -1)
+      : primarySortResult;
+  }
+
+  const secondarySortResult = _sort(a, b, secondaryKey);
+  return reverseSecondarySort
+    ? ((secondarySortResult * -1) as 1 | 0 | -1)
+    : secondarySortResult;
 }
diff --git a/src/app/utils/sort/sort-articles.util.ts b/src/app/utils/sort/sort-articles.util.ts
deleted file mode 100644
index 9054b990..00000000
--- a/src/app/utils/sort/sort-articles.util.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Article } from '@app/models';
-import { customSort, isDefined } from '@app/utils';
-
-// TODO: Modify customSort() to accept an optional secondary key so that this can be done in one go
-/**
- * Sort articles by date created, then by bookmark date
- */
-export function sortArticles(articles: Article[]): Article[] {
-  const bookmarkedArticles = articles.filter(article => isDefined(article.bookmarkDate));
-  const remainingArticles = articles.filter(article => !isDefined(article.bookmarkDate));
-
-  return [
-    ...bookmarkedArticles.sort(customSort('bookmarkDate')).reverse(),
-    ...remainingArticles.sort(customSort('modificationInfo.dateCreated')).reverse(),
-  ];
-}
diff --git a/src/main.ts b/src/main.ts
index 17a44440..3e9dddab 100755
--- a/src/main.ts
+++ b/src/main.ts
@@ -61,7 +61,7 @@ bootstrapApplication(AppComponent, {
         registrationStrategy: 'registerWhenStable:30000',
       }),
       StoreModule.forRoot<MetaState, Action<string>>(
-        { router: routerReducer },
+        { routerState: routerReducer },
         {
           metaReducers,
           runtimeChecks: {