diff --git a/README.md b/README.md
index e188b6f..37d29ad 100755
--- a/README.md
+++ b/README.md
@@ -17,8 +17,8 @@ but I originally used it because Angular Material was still in alpha at the time
 
 ### Prerequisites
 
-- Node >= 18.0
-- NPM >= 10.0
+- Node >= 18.19
+- NPM >= 10.2.3
 
 ```bash
 # Clone the repo
diff --git a/package.json b/package.json
index 042a67d..853ab1c 100755
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "url": "https://github.com/awesomehub/app.git"
   },
   "engines": {
-    "node": ">=18.0.0",
-    "npm": ">=10.0.0"
+    "node": ">=18.19.0",
+    "npm": ">=10.2.3"
   },
   "scripts": {
     "ng": "ng",
diff --git a/src/app/lists/components/list-categories/list-categories.component.ts b/src/app/lists/components/list-categories/list-categories.component.ts
index c4d4f62..a9b1a02 100755
--- a/src/app/lists/components/list-categories/list-categories.component.ts
+++ b/src/app/lists/components/list-categories/list-categories.component.ts
@@ -11,7 +11,7 @@ import { List, ListCategory } from '@app/lists'
         [routerLink]="['/list', list.id, category.path]"
         (click)="navigate.emit(category)"
       >
-        {{ category.title }} <span class="category-count">{{ category.count.all | number }}</span>
+        {{ category.title }}
       </a>
       <ah-list-categories [list]="list" [depth]="depth + 1" [parent]="category.id" (navigate)="navigate.emit($event)">
       </ah-list-categories>
diff --git a/src/app/lists/components/list-repo-card/list-repo-card.component.ts b/src/app/lists/components/list-repo-card/list-repo-card.component.ts
index 8f6ba44..69bf77e 100755
--- a/src/app/lists/components/list-repo-card/list-repo-card.component.ts
+++ b/src/app/lists/components/list-repo-card/list-repo-card.component.ts
@@ -107,6 +107,6 @@ export class ListRepoCardComponent {
   public scoreColorLegend: string[]
 
   constructor(private repoScoreService: ListRepoScoreService) {
-    this.scoreColorLegend = repoScoreService.getScoreColors()
+    this.scoreColorLegend = repoScoreService.getScoreColorTheme()
   }
 }
diff --git a/src/app/lists/components/list-repos/list-repos.component.ts b/src/app/lists/components/list-repos/list-repos.component.ts
index 54e1148..6428d49 100755
--- a/src/app/lists/components/list-repos/list-repos.component.ts
+++ b/src/app/lists/components/list-repos/list-repos.component.ts
@@ -17,7 +17,10 @@ import { ListRepo } from '@app/lists'
   selector: 'ah-list-repos',
   styleUrls: ['list-repos.component.css'],
   template: `
-    <h3 *ngIf="heading" class="content-heading">{{ heading }}</h3>
+    <h3 *ngIf="heading" class="content-heading">
+      {{ heading }}
+      <span *ngIf="count">({{ count | number }})</span>
+    </h3>
     <div *ngIf="sortable" class="repos-sort">
       <button #sortbtn class="mdl-button mdl-js-button">
         <span [ngSwitch]="recordset.sorting.by">
@@ -69,6 +72,7 @@ export class ListReposComponent implements AfterViewInit {
   @HostBinding('class') private class = 'list-repos'
 
   @Input() heading: string
+  @Input() count: number
   @Input() sortable = false
   @Input() infinite = false
   @Input() wide = true
diff --git a/src/app/lists/route-components/list-all/list-all.component.ts b/src/app/lists/route-components/list-all/list-all.component.ts
index deb1247..6f1a67b 100755
--- a/src/app/lists/route-components/list-all/list-all.component.ts
+++ b/src/app/lists/route-components/list-all/list-all.component.ts
@@ -12,6 +12,7 @@ import { List, ListRepo } from '@app/lists'
       <ah-list-repos
         class=""
         heading="All Repositories"
+        [count]="list.entries['repo.github'].length"
         [recordset]="recordset$ | async"
         (needMore)="recordset.paginate()"
         (sort)="recordset.sort($event)"
diff --git a/src/app/lists/route-components/list-categories/list-categories.component.css b/src/app/lists/route-components/list-categories/list-categories.component.css
index c4edcdc..f889e06 100755
--- a/src/app/lists/route-components/list-categories/list-categories.component.css
+++ b/src/app/lists/route-components/list-categories/list-categories.component.css
@@ -1,8 +1,3 @@
-.list-navigation .category-count {
-  position: absolute;
-  right: 8px;
-}
-
 .list-navigation .level-1::before,
 .list-navigation .level-2::before {
   content: ' - ';
diff --git a/src/app/lists/route-components/list-categories/list-categories.component.ts b/src/app/lists/route-components/list-categories/list-categories.component.ts
index 4e83eea..0e9a89d 100755
--- a/src/app/lists/route-components/list-categories/list-categories.component.ts
+++ b/src/app/lists/route-components/list-categories/list-categories.component.ts
@@ -22,7 +22,7 @@ import { List } from '@app/lists'
         routerLinkActive="mdl-navigation__link--current"
         [routerLink]="['/list', list.id, 'all']"
         (click)="app.toggleDrawer()"
-        >All <span class="category-count">{{ allCount | number }}</span></a
+        >All</a
       >
       <ah-list-categories [list]="list" [parent]="0" (navigate)="app.toggleDrawer()"></ah-list-categories>
     </nav>
@@ -31,9 +31,8 @@ import { List } from '@app/lists'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListCategoriesRouteComponent extends DrawerRouteComponent {
-  public title
+  public title: string
   public list: List
-  public allCount: number
 
   constructor(
     private route: ActivatedRoute,
@@ -45,7 +44,6 @@ export class ListCategoriesRouteComponent extends DrawerRouteComponent {
     this.route.data.forEach((data: { list: List }) => {
       this.list = data.list
       this.title = this.list.name
-      this.allCount = this.list.entries['repo.github'].length
     })
   }
 }
diff --git a/src/app/lists/route-components/list-category/list-category.component.ts b/src/app/lists/route-components/list-category/list-category.component.ts
index 5acf02c..f4f918a 100755
--- a/src/app/lists/route-components/list-category/list-category.component.ts
+++ b/src/app/lists/route-components/list-category/list-category.component.ts
@@ -20,6 +20,7 @@ import { List, ListCategory, ListRepo } from '@app/lists'
     <ah-content transparent="true" layout="compact">
       <ah-list-repos
         [heading]="category.title"
+        [count]="category.count.all"
         [recordset]="recordset$ | async"
         (needMore)="recordset.paginate()"
         (sort)="recordset.sort($event)"
diff --git a/src/app/lists/route-components/list-search/list-search.component.ts b/src/app/lists/route-components/list-search/list-search.component.ts
index 8583755..ed2015a 100755
--- a/src/app/lists/route-components/list-search/list-search.component.ts
+++ b/src/app/lists/route-components/list-search/list-search.component.ts
@@ -10,7 +10,8 @@ import { List, ListRepo } from '@app/lists'
   template: `
     <ah-content transparent="true" layout="compact">
       <ah-list-repos
-        heading="Search Results ({{ (recordset$ | async).set.length }})"
+        heading="Search Results"
+        [count]="(recordset$ | async).set.length"
         [recordset]="recordset$ | async"
         (needMore)="recordset.paginate()"
         (sort)="recordset.sort($event)"
diff --git a/src/app/lists/services/list-repo-score/list-repo-score.service.ts b/src/app/lists/services/list-repo-score/list-repo-score.service.ts
index aca74c5..725b864 100755
--- a/src/app/lists/services/list-repo-score/list-repo-score.service.ts
+++ b/src/app/lists/services/list-repo-score/list-repo-score.service.ts
@@ -11,10 +11,10 @@ export class ListRepoScoreService {
   constructor() {
     const { p, h, a, m } = config.lists.listRepoScoreScale
     this.colorScales = {
-      p: new ColorScale(this.theme, 0, p),
-      h: new ColorScale(this.theme, 0, h),
-      a: new ColorScale(this.theme, 0, a),
-      m: new ColorScale(this.theme, 0, m),
+      p: new ColorScale(this.theme, [0, p]),
+      h: new ColorScale(this.theme, [0, h]),
+      a: new ColorScale(this.theme, [0, a]),
+      m: new ColorScale(this.theme, [0, m]),
     }
   }
 
@@ -27,23 +27,22 @@ export class ListRepoScoreService {
   }
 
   getScoreColor(type: ListRepoScoreType, score: number): { bg: string; text: string } {
-    const legend = this.getScoreColors()
     const color = this.getScoreColorScale(type).getColor(score)
     return {
       bg: color,
-      text: this.isColorBright(color) ? legend[legend.length - 2] : legend[1],
+      text: this.isColorBright(color) ? this.theme[this.theme.length - 2] : this.theme[1],
     }
   }
 
-  getScoreColors(): string[] {
+  getScoreColorTheme(): string[] {
     return this.theme
   }
 
-  isColorBright(hex: string) {
-    hex = hex.replace('#', '')
-    const r = parseInt(hex.substr(0, 2), 16),
-      g = parseInt(hex.substr(2, 2), 16),
-      b = parseInt(hex.substr(4, 2), 16)
+  isColorBright(color: string) {
+    const hex = color.substring(color.length - 6, color.length)
+    const r = parseInt(hex.substring(0, 2), 16),
+      g = parseInt(hex.substring(2, 4), 16),
+      b = parseInt(hex.substring(4, 6), 16)
 
     return 150 < (r * 299 + g * 587 + b * 114) / 1000
   }
diff --git a/src/app/lists/util/color/gradient.d.ts b/src/app/lists/util/color/gradient.d.ts
deleted file mode 100755
index 1551693..0000000
--- a/src/app/lists/util/color/gradient.d.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export declare class ColorGradient {
-  /**
-   * Constructor.
-   *
-   * @param colorStart
-   * @param colorEnd
-   * @param min
-   * @param max
-   */
-  constructor(colorStart?: string, colorEnd?: string, min?: number, max?: number)
-
-  /**
-   * Sets gradient colors.
-   *
-   * @param colorStart
-   * @param colorEnd
-   */
-  setGradient(colorStart: string, colorEnd: string)
-
-  /**
-   * Sets the gradient domain.
-   *
-   * @param min
-   * @param max
-   */
-  setDomain(min: number, max: number)
-
-  /**
-   * Gets a color hex by number.
-   *
-   * @param number
-   * @return string
-   */
-  getColor(number: number)
-}
diff --git a/src/app/lists/util/color/gradient.js b/src/app/lists/util/color/gradient.js
deleted file mode 100755
index a8a3531..0000000
--- a/src/app/lists/util/color/gradient.js
+++ /dev/null
@@ -1,62 +0,0 @@
-export var ColorGradient = (function () {
-  function ColorGradient(colorStart, colorEnd, min, max) {
-    this.setDomain(min || 0, max || 100)
-    if (colorStart && colorStart) {
-      this.setGradient(colorStart, colorEnd)
-    }
-  }
-
-  ColorGradient.prototype.setDomain = function (min, max) {
-    if (min >= max) {
-      throw new RangeError('Invalid color gradient domain (' + min + ', ' + max + ')')
-    }
-
-    this.min = min
-    this.max = max
-  }
-
-  ColorGradient.prototype.setGradient = function (colorStart, colorEnd) {
-    this.colorStart = this.getHexColor(colorStart)
-    this.colorEnd = this.getHexColor(colorEnd)
-  }
-
-  ColorGradient.prototype.getColor = function (number) {
-    return (
-      '#' +
-      this.calcHex(number, this.colorStart.substring(0, 2), this.colorEnd.substring(0, 2)) +
-      this.calcHex(number, this.colorStart.substring(2, 4), this.colorEnd.substring(2, 4)) +
-      this.calcHex(number, this.colorStart.substring(4, 6), this.colorEnd.substring(4, 6))
-    )
-  }
-
-  ColorGradient.prototype.getHexColor = function (color) {
-    if (!this.isHexColor(color)) {
-      throw new Error(color + ' is not a valid colour.')
-    }
-
-    return color.substring(color.length - 6, color.length)
-  }
-
-  ColorGradient.prototype.isHexColor = function (color) {
-    return /^#?[0-9a-fA-F]{6}$/i.test(color)
-  }
-
-  ColorGradient.prototype.calcHex = function (number, channelStartBase16, channelEndBase16) {
-    if (number < this.min) {
-      number = this.min
-    }
-    if (number > this.max) {
-      number = this.max
-    }
-
-    var numRange = this.max - this.min
-    var channelStartBase10 = parseInt(channelStartBase16, 16)
-    var channelEndBase10 = parseInt(channelEndBase16, 16)
-    var channelPerUnit = (channelEndBase10 - channelStartBase10) / numRange
-    var channelBase10 = Math.round(channelPerUnit * (number - this.min) + channelStartBase10)
-    var channel = channelBase10.toString(16)
-    return channel.length === 1 ? '0' + channel : channel
-  }
-
-  return ColorGradient
-})()
diff --git a/src/app/lists/util/color/gradient.ts b/src/app/lists/util/color/gradient.ts
new file mode 100755
index 0000000..475a7a9
--- /dev/null
+++ b/src/app/lists/util/color/gradient.ts
@@ -0,0 +1,74 @@
+/**
+ * Class representing a color gradient.
+ */
+export class ColorGradient {
+  private readonly start: string
+  private readonly end: string
+  private readonly min: number
+  private readonly max: number
+
+  /**
+   * Constructor for creating a color gradient within a specified domain and range.
+   */
+  constructor(range: [start: string, end: string], domain: [min: number, max: number]) {
+    // Set color domain
+    if (domain[0] >= domain[1]) {
+      throw new RangeError(`'Invalid color gradient domain provided "${domain}"`)
+    }
+    this.min = domain[0]
+    this.max = domain[1]
+
+    // Set start and end colors
+    this.start = this.getHexColor(range[0])
+    this.end = this.getHexColor(range[1])
+  }
+
+  /**
+   * Computes a color value at a given position between a start and end color.
+   */
+  getColor(position: number) {
+    return (
+      '#' +
+      this.calculateHex(position, [this.start.substring(0, 2), this.end.substring(0, 2)]) +
+      this.calculateHex(position, [this.start.substring(2, 4), this.end.substring(2, 4)]) +
+      this.calculateHex(position, [this.start.substring(4, 6), this.end.substring(4, 6)])
+    )
+  }
+
+  /**
+   * Extracts the hex color code from the provided string if it is valid.
+   */
+  private getHexColor(color: string) {
+    if (!this.isHexColor(color)) {
+      throw new TypeError(`Invalid hex color provided "${color}"`)
+    }
+
+    return color.substring(color.length - 6, color.length)
+  }
+
+  /**
+   * Checks if a string is a valid hexadecimal color code.
+   */
+  private isHexColor(color: string) {
+    return /^#?[0-9a-fA-F]{6}$/i.test(color)
+  }
+
+  /**
+   * Calculates the hexadecimal string representation of a position within a given range.
+   *
+   * @param position - The position for which the hexadecimal value should be calculated.
+   * @param range - The range within which the position falls, specified as an array containing the start and end hexadecimal values.
+   *
+   * @return The calculated hexadecimal string, zero-padded if necessary to ensure it is two characters long.
+   */
+  private calculateHex(position: number, range: [start: string, end: string]) {
+    const channelPosition = Math.min(Math.max(position, this.max), this.min)
+    const numRange = this.max - this.min
+    const channelStartBase10 = parseInt(range[0], 16)
+    const channelEndBase10 = parseInt(range[1], 16)
+    const channelPerUnit = (channelEndBase10 - channelStartBase10) / numRange
+    const channelBase10 = Math.round(channelPerUnit * (channelPosition - this.min) + channelStartBase10)
+    const channel = channelBase10.toString(16)
+    return channel.length === 1 ? '0' + channel : channel
+  }
+}
diff --git a/src/app/lists/util/color/scale.d.ts b/src/app/lists/util/color/scale.d.ts
deleted file mode 100755
index 3ddd02b..0000000
--- a/src/app/lists/util/color/scale.d.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export declare class ColorScale {
-  /**
-   * Constructor.
-   *
-   * @param colors
-   * @param min
-   * @param max
-   */
-  constructor(colors?: string[], min?: number, max?: number)
-
-  /**
-   * Sets the scale domain.
-   *
-   * @param min
-   * @param max
-   */
-  setDomain(min: number, max: number)
-
-  /**
-   * Sets scale colors.
-   *
-   * @param colors
-   */
-  setColors(colors: string[])
-
-  /**
-   * Gets a color hex by number.
-   *
-   * @param number
-   * @return string
-   */
-  getColor(number: number)
-}
diff --git a/src/app/lists/util/color/scale.js b/src/app/lists/util/color/scale.js
deleted file mode 100755
index 5a27551..0000000
--- a/src/app/lists/util/color/scale.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ColorGradient } from './gradient'
-
-export var ColorScale = (function () {
-  function ColorScale(colors, min, max) {
-    this.min = min || 0
-    this.max = max || 100
-    this.colors = []
-    this.gradients = []
-    if (colors) {
-      this.setColors(colors)
-    }
-  }
-
-  ColorScale.prototype.setDomain = function (min, max) {
-    if (min >= max) {
-      throw new RangeError('Invalid color scale domain (' + min + ', ' + max + ')')
-    }
-
-    this.min = min
-    this.max = max
-    this.updateGradients()
-  }
-
-  ColorScale.prototype.setColors = function (colors) {
-    if (colors.length < 2) {
-      throw new Error('Rainbow must have two or more colours.')
-    }
-
-    this.colors = colors
-    this.updateGradients()
-  }
-
-  ColorScale.prototype.updateGradients = function () {
-    var increment = (this.max - this.min) / (this.colors.length - 1)
-    this.gradients = [new ColorGradient(this.colors[0], this.colors[1], this.min, this.min + increment)]
-    for (var i = 1; i < this.colors.length - 1; i++) {
-      this.gradients[i] = new ColorGradient(
-        this.colors[i],
-        this.colors[i + 1],
-        this.min + increment * i,
-        this.min + increment * (i + 1),
-      )
-    }
-  }
-
-  ColorScale.prototype.getColor = function (number) {
-    if (isNaN(number)) {
-      throw new TypeError('Invalid number provided (' + number + ')')
-    }
-
-    if (this.gradients.length === 1) {
-      return this.gradients[0].getColor(number)
-    }
-
-    var segment = (this.max - this.min) / this.gradients.length
-    var index = Math.min(Math.floor((Math.max(number, this.min) - this.min) / segment), this.gradients.length - 1)
-    return this.gradients[index].getColor(number)
-  }
-
-  return ColorScale
-})()
diff --git a/src/app/lists/util/color/scale.ts b/src/app/lists/util/color/scale.ts
new file mode 100755
index 0000000..9f95c86
--- /dev/null
+++ b/src/app/lists/util/color/scale.ts
@@ -0,0 +1,67 @@
+import { ColorGradient } from './gradient'
+
+/**
+ * Represents a color scale for interpolating colors based on a given domain.
+ */
+export class ColorScale {
+  private readonly min: number
+  private readonly max: number
+  private readonly colors: string[]
+  private readonly gradients: ColorGradient[]
+
+  /**
+   * Creates a new instance of the color scale with the specified colors and domain range.
+   */
+  constructor(colors: string[], domain: [min: number, max: number] = [0, 100]) {
+    // Set color domain
+    if (domain[0] >= domain[1]) {
+      throw new RangeError(`'Invalid color scale domain provided "${domain}"`)
+    }
+    this.min = domain[0]
+    this.max = domain[1]
+
+    // Set colors
+    if (colors.length < 2) {
+      throw new Error('Color scale must have two or more colors.')
+    }
+    this.colors = colors
+
+    // Set gradients
+    this.gradients = this.calculateGradients()
+  }
+
+  /**
+   * Retrieves a color based on the given position.
+   */
+  getColor(position: number) {
+    if (isNaN(position)) {
+      throw new TypeError(`'Invalid color position provided "${position}"`)
+    }
+
+    if (this.gradients.length === 1) {
+      return this.gradients[0].getColor(position)
+    }
+
+    const segment = (this.max - this.min) / this.gradients.length
+    const index = Math.min(Math.floor((Math.max(position, this.min) - this.min) / segment), this.gradients.length - 1)
+    return this.gradients[index].getColor(position)
+  }
+
+  /**
+   * Calculates gradients based on the range between minimum and maximum values
+   * and the number of colors provided. It creates an array of ColorGradient objects
+   * where each gradient represents the transition between two consecutive colors
+   * over a specific range of values.
+   */
+  private calculateGradients() {
+    const increment = (this.max - this.min) / (this.colors.length - 1)
+    const gradients = [new ColorGradient([this.colors[0], this.colors[1]], [this.min, this.min + increment])]
+    for (let i = 1; i < this.colors.length - 1; i++) {
+      gradients[i] = new ColorGradient(
+        [this.colors[i], this.colors[i + 1]],
+        [this.min + increment * i, this.min + increment * (i + 1)],
+      )
+    }
+    return gradients
+  }
+}
diff --git a/src/constants.ts b/src/constants.ts
index cf1b2f6..5a25367 100755
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -23,12 +23,15 @@ export const config = {
       summary: 'LIST_SUMMARY_RECORDSET',
       repo: 'LIST_REPO_RECORDSET',
     },
-    // Repo scores color scales
-    listRepoScoreTheme: ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#3182bd', '#08519c'],
-    // listRepoScoreTheme: ['edf8e9', 'c7e9c0', 'a1d99b', '74c476', '31a354', '006d2c'];
-    // listRepoScoreTheme: ['feebe2', 'fcc5c0', 'fa9fb5', 'f768a1', 'c51b8a', '7a0177'];
-    // listRepoScoreTheme: ['eeeeee', 'FFEE4A', 'FFC501', 'FE9600', '03001C'];
-    // listRepoScoreTheme: ['f2f0f7', 'dadaeb', 'bcbddc', '9e9ac8', '756bb1', '54278f'];
+    /**
+     * Repo scores color scales
+     *
+     * @see https://gka.github.io/chroma.js/#scale-colors
+     */
+    listRepoScoreTheme: ['#eff3ff', '#c0d2eb', '#92b2d7', '#6492c4', '#3772b0', '#08519c'],
+    // listRepoScoreTheme: ['#edf8e9', '#c7e9c0', '#a1d99b', '#74c476', '#31a354', '#006d2c'],
+    // listRepoScoreTheme: ['#feebe2', '#fcc5c0', '#fa9fb5', '#f768a1', '#c51b8a', '#7a0177'],
+    // listRepoScoreTheme: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'],
     // Repo scores scales
     listRepoScoreScale: {
       p: 7500,