diff --git a/angular.json b/angular.json
index 684bdf6..de1701f 100644
--- a/angular.json
+++ b/angular.json
@@ -90,7 +90,9 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
@@ -98,7 +100,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.scss",
+              "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ],
             "scripts": []
           }
diff --git a/package-lock.json b/package-lock.json
index 0faeffb..580ac88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,25 +16,25 @@
         "@angular/platform-browser": "^20.0.4",
         "@angular/platform-browser-dynamic": "^20.0.4",
         "@angular/router": "^20.0.4",
-        "rxjs": "~6.6.3",
-        "tslib": "^2.3.1",
-        "zone.js": "~0.15.0"
+        "rxjs": "~7.8.2",
+        "tslib": "^2.8.1",
+        "zone.js": "~0.15.1"
       },
       "devDependencies": {
         "@angular/build": "^20.0.3",
         "@angular/cli": "^20.0.3",
         "@angular/compiler-cli": "^20.0.4",
         "@angular/language-service": "^20.0.4",
-        "@types/jasmine": "~5.1.0",
-        "bootstrap": "4.0.0-alpha.6",
-        "jasmine-core": "~5.1.0",
-        "karma": "~6.3.2",
-        "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "~3.0.2",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "^1.5.0",
+        "@types/jasmine": "~5.1.8",
+        "bootstrap": "4.6.2",
+        "jasmine-core": "~5.8.0",
+        "karma": "~6.4.4",
+        "karma-chrome-launcher": "~3.2.0",
+        "karma-coverage-istanbul-reporter": "~3.0.3",
+        "karma-jasmine": "~4.0.2",
+        "karma-jasmine-html-reporter": "^1.7.0",
         "ng-packagr": "^20.0.1",
-        "ts-node": "~7.0.0",
+        "ts-node": "~7.0.1",
         "typescript": "~5.8.3"
       }
     },
@@ -113,6 +113,24 @@
         }
       }
     },
+    "node_modules/@angular-devkit/architect/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@angular-devkit/architect/node_modules/picomatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
@@ -126,14 +144,20 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@angular-devkit/architect/node_modules/rxjs": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+    "node_modules/@angular-devkit/architect/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@angular-devkit/architect/node_modules/source-map": {
@@ -211,6 +235,24 @@
         }
       }
     },
+    "node_modules/@angular-devkit/schematics/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@angular-devkit/schematics/node_modules/picomatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
@@ -224,14 +266,20 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@angular-devkit/schematics/node_modules/rxjs": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+    "node_modules/@angular-devkit/schematics/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@angular-devkit/schematics/node_modules/source-map": {
@@ -893,6 +941,24 @@
         }
       }
     },
+    "node_modules/@angular/cli/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@angular/cli/node_modules/picomatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
@@ -906,14 +972,20 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@angular/cli/node_modules/rxjs": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+    "node_modules/@angular/cli/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@angular/cli/node_modules/semver": {
@@ -4068,6 +4140,24 @@
         }
       }
     },
+    "node_modules/@schematics/angular/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@schematics/angular/node_modules/picomatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
@@ -4081,14 +4171,20 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@schematics/angular/node_modules/rxjs": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+    "node_modules/@schematics/angular/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@schematics/angular/node_modules/source-map": {
@@ -4260,10 +4356,11 @@
       "license": "MIT"
     },
     "node_modules/@types/jasmine": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.4.tgz",
-      "integrity": "sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==",
-      "dev": true
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.8.tgz",
+      "integrity": "sha512-u7/CnvRdh6AaaIzYjCgUuVbREFgulhX05Qtf6ZtW+aOcjCKKVvKgpkPYJBFTZSHtFBYimzU4zP0V2vrEsq9Wcg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "22.10.0",
@@ -4506,16 +4603,24 @@
       "license": "ISC"
     },
     "node_modules/bootstrap": {
-      "version": "4.0.0-alpha.6",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz",
-      "integrity": "sha512-WK8cg+bejSa7rsVi+nHp5RRF2XrI+o2atUxUYhMfaVDlmVjgwfQ77Na88kGZTRVO7gcmIIM4ZVeeYjEdFE1IGQ==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
       "dev": true,
-      "dependencies": {
-        "jquery": ">=1.9.1",
-        "tether": "^1.4.0"
-      },
-      "engines": {
-        "node": ">=4"
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
       }
     },
     "node_modules/brace-expansion": {
@@ -6502,16 +6607,18 @@
       }
     },
     "node_modules/jasmine-core": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.1.2.tgz",
-      "integrity": "sha512-2oIUMGn00FdUiqz6epiiJr7xcFyNYj3rDcfmnzfkBnHyBQ3cBQUs4mmyGsOb7TTLb9kxk7dBcmEmqhDKkBoDyA==",
-      "dev": true
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.8.0.tgz",
+      "integrity": "sha512-Q9dqmpUAfptwyueW3+HqBOkSuYd9I/clZSSfN97wXE/Nr2ROFNCwIBEC1F6kb3QXS9Fcz0LjFYSDQT+BiwjuhA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/jquery": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
       "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -6579,9 +6686,9 @@
       "license": "MIT"
     },
     "node_modules/karma": {
-      "version": "6.3.20",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.20.tgz",
-      "integrity": "sha512-HRNQhMuKOwKpjYlWiJP0DUrJOh+QjaI/DTaD8b9rEm4Il3tJ8MijutVZH4ts10LuUFst/CedwTS6vieCN8yTSw==",
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.4.tgz",
+      "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6604,7 +6711,7 @@
         "qjobs": "^1.2.0",
         "range-parser": "^1.2.1",
         "rimraf": "^3.0.2",
-        "socket.io": "^4.4.1",
+        "socket.io": "^4.7.2",
         "source-map": "^0.6.1",
         "tmp": "^0.2.1",
         "ua-parser-js": "^0.7.30",
@@ -6618,9 +6725,9 @@
       }
     },
     "node_modules/karma-chrome-launcher": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz",
-      "integrity": "sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.2.0.tgz",
+      "integrity": "sha512-rE9RkUPI7I9mAxByQWkGJFXfFD6lE4gC5nPuZdobf/QdTEJI6EU4yIay/cfU/xV4ZxlM5JiTv7zWYgA64NpS5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7653,16 +7760,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/ng-packagr/node_modules/rxjs": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.1.0"
-      }
-    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -8348,6 +8445,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -8643,21 +8753,14 @@
       }
     },
     "node_modules/rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^1.9.0"
-      },
-      "engines": {
-        "npm": ">=2.0.0"
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/rxjs/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -9255,12 +9358,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/tether": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.7.tgz",
-      "integrity": "sha512-Z0J1aExjoFU8pybVkQAo/vD2wfSO63r+XOPfWQMC5qtf1bI7IWqNk4MiyBcgvvnY8kqnY06dVdvwTK2S3PU/Fw==",
-      "dev": true
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -9870,9 +9967,9 @@
       }
     },
     "node_modules/zone.js": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.0.tgz",
-      "integrity": "sha512-9oxn0IIjbCZkJ67L+LkhYWRyAy7axphb3VgE2MBDlOqnmHMPWGYMxJxBYFueFq/JGY2GMwS0rU+UCLunEmy5UA==",
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
+      "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
       "license": "MIT"
     }
   },
@@ -9920,20 +10017,30 @@
             "ajv": "^8.0.0"
           }
         },
+        "chokidar": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "readdirp": "^4.0.1"
+          }
+        },
         "picomatch": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
           "dev": true
         },
-        "rxjs": {
-          "version": "7.8.2",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-          "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+        "readdirp": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
           "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
+          "optional": true,
+          "peer": true
         },
         "source-map": {
           "version": "0.7.4",
@@ -9979,20 +10086,30 @@
             "ajv": "^8.0.0"
           }
         },
+        "chokidar": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "readdirp": "^4.0.1"
+          }
+        },
         "picomatch": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
           "dev": true
         },
-        "rxjs": {
-          "version": "7.8.2",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-          "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+        "readdirp": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
           "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
+          "optional": true,
+          "peer": true
         },
         "source-map": {
           "version": "0.7.4",
@@ -10242,7 +10359,8 @@
           "version": "6.4.6",
           "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
           "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "picomatch": {
           "version": "4.0.2",
@@ -10345,20 +10463,30 @@
             "ajv": "^8.0.0"
           }
         },
+        "chokidar": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "readdirp": "^4.0.1"
+          }
+        },
         "picomatch": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
           "dev": true
         },
-        "rxjs": {
-          "version": "7.8.2",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-          "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+        "readdirp": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
           "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
+          "optional": true,
+          "peer": true
         },
         "semver": {
           "version": "7.7.2",
@@ -11130,7 +11258,8 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.7.tgz",
       "integrity": "sha512-PfunHQcjwnju84L+ycmcMKB/pTPIngjUJvfnRhKY6FKPuYXlM4aQCb/nIdTFR6BEhMjFvngzvng/vBAJMZpLSA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@isaacs/cliui": {
       "version": "8.0.2",
@@ -12038,20 +12167,30 @@
             "ajv": "^8.0.0"
           }
         },
+        "chokidar": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+          "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+          "dev": true,
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "readdirp": "^4.0.1"
+          }
+        },
         "picomatch": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
           "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
           "dev": true
         },
-        "rxjs": {
-          "version": "7.8.2",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-          "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+        "readdirp": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+          "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
           "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
+          "optional": true,
+          "peer": true
         },
         "source-map": {
           "version": "0.7.4",
@@ -12181,9 +12320,9 @@
       "dev": true
     },
     "@types/jasmine": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.4.tgz",
-      "integrity": "sha512-px7OMFO/ncXxixDe1zR13V1iycqWae0MxTaw62RpFlksUi5QuNWgQJFkTQjIOvrmutJbI7Fp2Y2N1F6D2R4G6w==",
+      "version": "5.1.8",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-5.1.8.tgz",
+      "integrity": "sha512-u7/CnvRdh6AaaIzYjCgUuVbREFgulhX05Qtf6ZtW+aOcjCKKVvKgpkPYJBFTZSHtFBYimzU4zP0V2vrEsq9Wcg==",
       "dev": true
     },
     "@types/node": {
@@ -12199,7 +12338,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.0.0.tgz",
       "integrity": "sha512-gc9Tjg8bUxBVSTzeWT3Njc0Cl3PakHFKdNfABnZWiUgbxqmHDEn7uECv3fHVylxoYgNzAcmU7ZrILz+BwSo3sA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@yarnpkg/lockfile": {
       "version": "1.1.0",
@@ -12362,14 +12502,11 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.0.0-alpha.6",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz",
-      "integrity": "sha512-WK8cg+bejSa7rsVi+nHp5RRF2XrI+o2atUxUYhMfaVDlmVjgwfQ77Na88kGZTRVO7gcmIIM4ZVeeYjEdFE1IGQ==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+      "integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
       "dev": true,
-      "requires": {
-        "jquery": ">=1.9.1",
-        "tether": "^1.4.0"
-      }
+      "requires": {}
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -13756,16 +13893,17 @@
       }
     },
     "jasmine-core": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.1.2.tgz",
-      "integrity": "sha512-2oIUMGn00FdUiqz6epiiJr7xcFyNYj3rDcfmnzfkBnHyBQ3cBQUs4mmyGsOb7TTLb9kxk7dBcmEmqhDKkBoDyA==",
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.8.0.tgz",
+      "integrity": "sha512-Q9dqmpUAfptwyueW3+HqBOkSuYd9I/clZSSfN97wXE/Nr2ROFNCwIBEC1F6kb3QXS9Fcz0LjFYSDQT+BiwjuhA==",
       "dev": true
     },
     "jquery": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
       "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -13813,9 +13951,9 @@
       "dev": true
     },
     "karma": {
-      "version": "6.3.20",
-      "resolved": "https://registry.npmjs.org/karma/-/karma-6.3.20.tgz",
-      "integrity": "sha512-HRNQhMuKOwKpjYlWiJP0DUrJOh+QjaI/DTaD8b9rEm4Il3tJ8MijutVZH4ts10LuUFst/CedwTS6vieCN8yTSw==",
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.4.tgz",
+      "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
       "requires": {
         "@colors/colors": "1.5.0",
@@ -13837,7 +13975,7 @@
         "qjobs": "^1.2.0",
         "range-parser": "^1.2.1",
         "rimraf": "^3.0.2",
-        "socket.io": "^4.4.1",
+        "socket.io": "^4.7.2",
         "source-map": "^0.6.1",
         "tmp": "^0.2.1",
         "ua-parser-js": "^0.7.30",
@@ -13888,9 +14026,9 @@
       }
     },
     "karma-chrome-launcher": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.1.1.tgz",
-      "integrity": "sha512-hsIglcq1vtboGPAN+DGCISCFOxW+ZVnIqhDQcCMqqCp+4dmJ0Qpq5QAjkbA0X2L9Mi6OBkHi2Srrbmm7pUKkzQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-3.2.0.tgz",
+      "integrity": "sha512-rE9RkUPI7I9mAxByQWkGJFXfFD6lE4gC5nPuZdobf/QdTEJI6EU4yIay/cfU/xV4ZxlM5JiTv7zWYgA64NpS5Q==",
       "dev": true,
       "requires": {
         "which": "^1.2.1"
@@ -13930,7 +14068,8 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
       "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "less": {
       "version": "4.3.0",
@@ -14560,15 +14699,6 @@
           "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
           "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
           "dev": true
-        },
-        "rxjs": {
-          "version": "7.8.2",
-          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
-          "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
-          "dev": true,
-          "requires": {
-            "tslib": "^2.1.0"
-          }
         }
       }
     },
@@ -15037,6 +15167,13 @@
         "find-up-simple": "^1.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "dev": true,
+      "peer": true
+    },
     "postcss": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -15226,18 +15363,11 @@
       }
     },
     "rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
       "requires": {
-        "tslib": "^1.9.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
+        "tslib": "^2.1.0"
       }
     },
     "safer-buffer": {
@@ -15667,12 +15797,6 @@
         }
       }
     },
-    "tether": {
-      "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/tether/-/tether-1.4.7.tgz",
-      "integrity": "sha512-Z0J1aExjoFU8pybVkQAo/vD2wfSO63r+XOPfWQMC5qtf1bI7IWqNk4MiyBcgvvnY8kqnY06dVdvwTK2S3PU/Fw==",
-      "dev": true
-    },
     "tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -15687,7 +15811,8 @@
           "version": "6.4.6",
           "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
           "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "picomatch": {
           "version": "4.0.2",
@@ -15874,7 +15999,8 @@
           "version": "6.4.6",
           "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
           "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "picomatch": {
           "version": "4.0.2",
@@ -15970,7 +16096,8 @@
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
       "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",
@@ -16018,9 +16145,9 @@
       "dev": true
     },
     "zone.js": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.0.tgz",
-      "integrity": "sha512-9oxn0IIjbCZkJ67L+LkhYWRyAy7axphb3VgE2MBDlOqnmHMPWGYMxJxBYFueFq/JGY2GMwS0rU+UCLunEmy5UA=="
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
+      "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w=="
     }
   }
 }
diff --git a/package.json b/package.json
index d47f5a4..8f0da5a 100644
--- a/package.json
+++ b/package.json
@@ -24,25 +24,25 @@
     "@angular/platform-browser": "^20.0.4",
     "@angular/platform-browser-dynamic": "^20.0.4",
     "@angular/router": "^20.0.4",
-    "rxjs": "~6.6.3",
-    "tslib": "^2.3.1",
-    "zone.js": "~0.15.0"
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
     "@angular/build": "^20.0.3",
     "@angular/cli": "^20.0.3",
     "@angular/compiler-cli": "^20.0.4",
     "@angular/language-service": "^20.0.4",
-    "@types/jasmine": "~5.1.0",
-    "bootstrap": "4.0.0-alpha.6",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.3.2",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "@types/jasmine": "~5.1.8",
+    "bootstrap": "4.6.2",
+    "jasmine-core": "~5.8.0",
+    "karma": "~6.4.4",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.2",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "ng-packagr": "^20.0.1",
-    "ts-node": "~7.0.0",
+    "ts-node": "~7.0.1",
     "typescript": "~5.8.3"
   }
-}
\ No newline at end of file
+}
diff --git a/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html b/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html
index a22b1be..f001f81 100644
--- a/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html
+++ b/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.html
@@ -5,7 +5,7 @@
 <div class="controls">
     <div class="controls-row hue-alpha">
         <div class="column">
-            <indicator-component [colorType]="presentations[selectedPresentation]" [color]="control().value" />
+            <indicator-component [colorType]="presentations[selectedPresentation()]" [color]="control().value" />
         </div>
         <div class="column">
             <hue-component [(color)]="control().value" />
@@ -16,7 +16,7 @@
     </div>
     <div class="controls-row presentation">
         <div class="column">
-            @switch (presentations[selectedPresentation]) {
+            @switch (presentations[selectedPresentation()]) {
                 @case('rgba') {
                     <rgba-input-component [alpha]="control().alphaChannelVisibilityChanges | async" label [(color)]="control().value" />
                 }
@@ -38,4 +38,4 @@
     <color-presets-component [(color)]="control().value" [colorPresets]="control().presets" />
 }
 
-<ng-content></ng-content>
\ No newline at end of file
+<ng-content></ng-content>
diff --git a/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.ts b/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.ts
index bad311c..e23bd67 100644
--- a/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.ts
+++ b/projects/iplab/ngx-color-picker/src/lib/components/chrome-picker/chrome-picker.component.ts
@@ -48,12 +48,12 @@ import { ColorString } from '../../helpers/color.class';
 })
 export class ChromePickerComponent implements OnInit, OnChanges, OnDestroy {
 
-    public selectedPresentation: number = 0;
     public presentations: ['rgba', 'hsla', 'hex'] = ['rgba', 'hsla', 'hex'];
 
-    public color: ModelSignal<ColorString> = model<ColorString>();
+    public readonly selectedPresentation: ModelSignal<number> = model<number>(0);
+    public readonly color: ModelSignal<ColorString> = model<ColorString>();
 
-    public control: InputSignal<ColorPickerControl> = input<ColorPickerControl>(new ColorPickerControl());
+    public readonly control: InputSignal<ColorPickerControl> = input<ColorPickerControl>(new ColorPickerControl());
 
     private subscriptions: Array<Subscription> = [];
 
@@ -120,8 +120,9 @@ export class ChromePickerComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     public changePresentation(): void {
-        this.selectedPresentation =
-            this.selectedPresentation === this.presentations.length - 1 ? 0 : this.selectedPresentation + 1;
+      this.selectedPresentation.update(current =>
+        current === this.presentations.length - 1 ? 0 : current + 1
+      );
     }
 
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 316076b..aa19da0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <div class="jumbotron">
-    <div class="background" [style.backgroundColor]="colorControl?.value?.getRgba()"></div>
+    <div class="background" [style.background-color]="colorControl?.value?.getRgba()"></div>
     <div class="container">
         <div class="row">
             <div class="col">
@@ -13,7 +13,7 @@ <h1 class="display-4">&#64;iplab/ngx-color-picker</h1>
                 <sketch-picker [control]="colorControl" />
             </div>
             <div class="col col-md-6">
-                <chrome-picker [control]="chromeColorControl" />
+                <chrome-picker [control]="chromeColorControl" [selectedPresentation]="2" />
                 <!-- <ip-picker [control]="colorControl"></ip-picker> -->
             </div>
         </div>
@@ -188,7 +188,7 @@ <h6>color indicator</h6>
 class ColorPickerConfiguration implements IColorPickerConfig &#123;
     public indicatorTitle: string = 'Copy color to clipboard';
 &#125;
-                
+
 &#64;NgModule(&#123;
 imports: [
     BrowserModule,
@@ -207,7 +207,7 @@ <h6>color presets</h6>
 class ColorPickerConfiguration implements IColorPickerConfig &#123;
     public presetsTitle: string = '&#123;0&#125;. Long-click to show alternate shades.'; // &#123;0&#125; is the place where hex value will be placed
 &#125;
-                
+
 &#64;NgModule(&#123;
 imports: [
     BrowserModule,
@@ -227,7 +227,7 @@ <h6>configuration in standalone component</h6>
         return 'Copy color to clipboard';
     &#125;
 &#125;
-                
+
 &#64;Component(&#123;
     selector: 'app-standalone',
     standalone: true,
@@ -272,7 +272,7 @@ <h6>attributes explanation</h6>
             <p>
                 <b>color =></b> currently selected color (output color)<br>
                 <b>hue =></b> color used internally as current hue color<br>
-                <b>colorType =></b> specify which type of color should be copied to the clipboard<br>                
+                <b>colorType =></b> specify which type of color should be copied to the clipboard<br>
                 <b>vertical =></b> should component be placed horizontally or vertically<br>
                 <b>alpha =></b> should component display alpha channel<br>
                 <b>label =></b> whether the label will be displayed or not (rgba, hsla, hex)<br>
@@ -315,7 +315,7 @@ <h6>attributes explanation</h6>
                                 .hidePresets()
                                 .hideAlphaChannel();
 
-    constructor() &#123;    
+    constructor() &#123;
     &#125;
 &#125;</pre>
                     <p>Template code</p>
@@ -324,14 +324,14 @@ <h6>attributes explanation</h6>
             </div>
 
             <div class="buttons-row">
-                <button class="btn btn-primary" 
-                    (click)="chromeControl.isPresetVisible() 
+                <button class="btn btn-primary"
+                    (click)="chromeControl.isPresetVisible()
                             ? chromeControl.hidePresets() : chromeControl.showPresets()">Toggle presets visibility</button>
                 &nbsp;
                 <button class="btn btn-primary" (click)="chromeControl.reset()">Reset to initial</button>
                 &nbsp;
-                <button class="btn btn-primary" 
-                    (click)="chromeControl.isAlphaChannelEnabled() ? 
+                <button class="btn btn-primary"
+                    (click)="chromeControl.isAlphaChannelEnabled() ?
                     chromeControl.hideAlphaChannel() : chromeControl.showAlphaChannel()">Toggle alpha channel</button>
             </div>
         </div>
@@ -368,7 +368,7 @@ <h6>attributes explanation</h6>
     public sketchControl = new ColorPickerControl()
                                 .setValueFrom('#A6771C');
 
-    constructor() &#123;    
+    constructor() &#123;
     &#125;
 &#125;</pre>
                     <p>Template code</p>
@@ -377,14 +377,14 @@ <h6>attributes explanation</h6>
             </div>
 
             <div class="buttons-row">
-                <button class="btn btn-primary" 
-                    (click)="sketchControl.isPresetVisible() 
+                <button class="btn btn-primary"
+                    (click)="sketchControl.isPresetVisible()
                             ? sketchControl.hidePresets() : sketchControl.showPresets()">Toggle presets visibility</button>
                 &nbsp;
                 <button class="btn btn-primary" (click)="sketchControl.reset()">Reset to initial</button>
                 &nbsp;
-                <button class="btn btn-primary" 
-                    (click)="sketchControl.isAlphaChannelEnabled() ? 
+                <button class="btn btn-primary"
+                    (click)="sketchControl.isAlphaChannelEnabled() ?
                     sketchControl.hideAlphaChannel() : sketchControl.showAlphaChannel()">Toggle alpha channel</button>
             </div>
         </div>
@@ -420,7 +420,7 @@ <h6>attributes explanation</h6>
 
     public compactControl = new ColorPickerControl();
 
-    constructor() &#123;    
+    constructor() &#123;
     &#125;
 &#125;</pre>
                     <p>Template code</p>
@@ -429,8 +429,8 @@ <h6>attributes explanation</h6>
             </div>
 
             <div class="buttons-row">
-                <button class="btn btn-primary" 
-                    (click)="compactControl.isPresetVisible() 
+                <button class="btn btn-primary"
+                    (click)="compactControl.isPresetVisible()
                             ? compactControl.hidePresets() : compactControl.showPresets()">Toggle presets visibility</button>
                 &nbsp;
                 <button class="btn btn-primary" (click)="compactControl.reset()">Reset to initial</button>
@@ -469,7 +469,7 @@ <h6>attributes explanation</h6>
     public githubControl = new ColorPickerControl()
                                 .setValueFrom('#1273DE');
 
-    constructor() &#123;    
+    constructor() &#123;
     &#125;
 &#125;</pre>
                     <p>Template code</p>
@@ -508,7 +508,7 @@ <h6>attributes explanation</h6>
 
     public swatchesColor = '#F04A71'
 
-    constructor() &#123;    
+    constructor() &#123;
     &#125;
 &#125;</pre>
                     <p>Template code</p>
@@ -525,7 +525,7 @@ <h6>attributes explanation</h6>
         <div class="card-block">
             <div class="row">
                 <div class="col col-lg-4">
-                    
+
                     <div class="info-row">
                         <code>selected color: {{ wrapperColor }}</code><br>
                     </div>
@@ -598,7 +598,7 @@ <h6>attributes explanation</h6>
         this.isVisible = false;
     &#125;
 &#125;</pre>
-                    
+
                     <p>Use case</p>
                     <pre class="prettify">&lt;chrome-wrapper [(color)]="wrapperColor"&gt;&lt;/chrome-wrapper&gt;</pre>
                 </div>
@@ -665,4 +665,4 @@ <h6>attributes explanation</h6>
     </div>
     <br>
 
-</div>
\ No newline at end of file
+</div>