diff --git a/frontend/README.md b/frontend/README.md
index b97c7e21e..f56e29699 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,6 +1,10 @@
 # GreedyBear - frontend
 
-Built with [gb-ui](https://github.com/GreedyBear-Project/gb-ui).
+## Shared UI components
+
+Shared UI components in `src/components/common/gb-ui/` were originally derived
+from [certego-ui](https://github.com/certego/certego-ui) and are now maintained
+locally in GreedyBear.
 
 ## Design thesis
 
@@ -59,4 +63,3 @@ npm start
 
 - JS app main configs are available in `package.json` and `enviroments.js`.
 
-
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c0721b2df..a6bd35c7a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,13 +8,16 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@greedybear/gb-ui": "github:GreedyBear-Project/gb-ui#1.0.1",
+        "@tanstack/react-table": "^8.21.3",
         "@vnedyalk0v/react19-simple-maps": "^2.0.10",
         "axios": "^1.20.0",
         "axios-hooks": "^5.1.1",
         "bootstrap": ">=5.3.8",
+        "classnames": "^2.5.1",
+        "date-fns": "^2.30.0",
         "formik": "^2.4.9",
         "i18n-iso-countries": "^7.14.0",
+        "nanoid": "^3.3.11",
         "prop-types": "^15.8.1",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
@@ -28,6 +31,7 @@
         "zustand": "^5.0.15"
       },
       "devDependencies": {
+        "@playwright/test": "^1.62.1",
         "@testing-library/jest-dom": "^7.0.1",
         "@testing-library/react": "^16.3.3",
         "@testing-library/user-event": "^14.6.6",
@@ -85,6 +89,7 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
       "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.28.5",
@@ -95,48 +100,11 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/generator": {
-      "version": "7.29.1",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
-      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.29.0",
-        "@babel/types": "^7.29.0",
-        "@jridgewell/gen-mapping": "^0.3.12",
-        "@jridgewell/trace-mapping": "^0.3.28",
-        "jsesc": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-globals": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
-      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
-      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -146,6 +114,7 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -155,6 +124,7 @@
       "version": "7.29.3",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
       "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -175,42 +145,11 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
-      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.28.6",
-        "@babel/parser": "^7.28.6",
-        "@babel/types": "^7.28.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
-      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.29.0",
-        "@babel/generator": "^7.29.0",
-        "@babel/helper-globals": "^7.28.0",
-        "@babel/parser": "^7.29.0",
-        "@babel/template": "^7.28.6",
-        "@babel/types": "^7.29.0",
-        "debug": "^4.3.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/types": {
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -514,126 +453,6 @@
         "postcss-selector-parser": "^7.1.1"
       }
     },
-    "node_modules/@emotion/babel-plugin": {
-      "version": "11.13.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
-      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/runtime": "^7.18.3",
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/serialize": "^1.3.3",
-        "babel-plugin-macros": "^3.1.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^4.0.0",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/cache": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
-      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/sheet": "^1.4.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "stylis": "4.2.0"
-      }
-    },
-    "node_modules/@emotion/hash": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
-      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
-      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/react": {
-      "version": "11.14.0",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
-      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.13.5",
-        "@emotion/cache": "^11.14.0",
-        "@emotion/serialize": "^1.3.3",
-        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
-        "@emotion/utils": "^1.4.2",
-        "@emotion/weak-memoize": "^0.4.0",
-        "hoist-non-react-statics": "^3.3.1"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@emotion/serialize": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
-      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/hash": "^0.9.2",
-        "@emotion/memoize": "^0.9.0",
-        "@emotion/unitless": "^0.10.0",
-        "@emotion/utils": "^1.4.2",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
-      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
-      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
-      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
-    "node_modules/@emotion/utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
-      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
-      "license": "MIT"
-    },
-    "node_modules/@emotion/weak-memoize": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
-      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
-      "license": "MIT"
-    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
@@ -796,85 +615,6 @@
         }
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
-      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
-      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.5",
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
-      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
-      "license": "MIT"
-    },
-    "node_modules/@greedybear/gb-ui": {
-      "version": "1.0.1",
-      "resolved": "git+ssh://git@github.com/GreedyBear-Project/gb-ui.git#72f95eee3dc48e4353933ce747d2e6488bcc363c",
-      "license": "MIT",
-      "dependencies": {
-        "@microlink/react-json-view": "^1.31.22",
-        "@tanstack/react-table": "^8.21.3",
-        "classnames": "^2.5.1",
-        "date-fns": "^2.30.0",
-        "match-sorter": "^6.4.0",
-        "nanoid": "^6.0.0",
-        "react-compound-slider": "^3.4.0",
-        "react-icons": "^5.7.0",
-        "react-infinite-scroll-component": "^7.2.1",
-        "react-json-editor-ajrm": "^2.5.14",
-        "react-select": "^5.10.2",
-        "react-share": "^5.3.0",
-        "react-top-loading-bar": "^3.0.2",
-        "react-use": "^17.6.1",
-        "recharts": "^3.9.2",
-        "zustand": "^5.0.14"
-      },
-      "engines": {
-        "node": ">=20"
-      },
-      "peerDependencies": {
-        "axios": "^1.6.0",
-        "axios-hooks": "^5.1.1",
-        "bootstrap": "^5.2.1",
-        "formik": "^2.2.9",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "react-router-dom": "^6.3.0 || ^7.0.0",
-        "reactstrap": "^9.0.3"
-      }
-    },
-    "node_modules/@greedybear/gb-ui/node_modules/nanoid": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-6.0.0.tgz",
-      "integrity": "sha512-mkUH+rPkwU2qPadJ0oJZOjeZ5Mxn8Q1UhevwkTRWNuUZzyia3h4rhzK39hxaHTk0o2OxB8W2SQ6A8k23ZDi1pQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^22 || ^24 || >=26"
-      }
-    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
@@ -941,20 +681,11 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.13",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
-      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      }
-    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -970,6 +701,7 @@
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -983,24 +715,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@microlink/react-json-view": {
-      "version": "1.31.22",
-      "resolved": "https://registry.npmjs.org/@microlink/react-json-view/-/react-json-view-1.31.22.tgz",
-      "integrity": "sha512-cfszidqClRqjnF5YQ5PSGeORo9MnMZvDv+csgq92G1LRZduWEBjeHXKLnulvhE7bX9+ORvjRCWcMQfwRlhPxmA==",
-      "license": "MIT",
-      "dependencies": {
-        "react-base16-styling": "~0.10.0",
-        "react-lifecycles-compat": "~3.0.4",
-        "react-textarea-autosize": "~8.5.9"
-      },
-      "engines": {
-        "node": ">=17"
-      },
-      "peerDependencies": {
-        "react": ">= 15",
-        "react-dom": ">= 15"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1044,7 +758,6 @@
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.147.0.tgz",
       "integrity": "sha512-IJ3s6ltHLp45S0bh7phkX+gJO7A1Wuz2EaqpAhb8WjqDwbzMiWKHhyyT42tskaWjEYXtHtVCPpnBJVT9+dcRLg==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
       }
@@ -1172,6 +885,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1192,6 +908,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1252,6 +971,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1272,6 +994,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1345,6 +1070,21 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
+      "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -1406,7 +1146,6 @@
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "android"
@@ -1423,7 +1162,6 @@
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1440,7 +1178,6 @@
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -1457,7 +1194,6 @@
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "freebsd"
@@ -1474,7 +1210,6 @@
         "arm"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1491,10 +1226,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1511,10 +1242,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1531,10 +1258,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1551,10 +1274,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1571,10 +1290,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1591,10 +1306,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
@@ -1611,7 +1322,6 @@
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "openharmony"
@@ -1628,7 +1338,6 @@
         "arm64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1645,7 +1354,6 @@
         "x64"
       ],
       "dev": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
@@ -1809,7 +1517,6 @@
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.6.tgz",
       "integrity": "sha512-Jbs9FpkkIDw8FgSc6kOVsOv8JuuqGAL7J4X1oot77JxAoDlkNn2GRkd0aYRVuQ+pVQAiHWVkE4rX/dkF5fBiCw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=12",
         "npm": ">=6"
@@ -1939,18 +1646,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/lodash": {
-      "version": "4.17.24",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
-      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
-      "license": "MIT"
-    },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
-      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
-      "license": "MIT"
-    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
@@ -1961,15 +1656,6 @@
         "csstype": "^3.2.2"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.12",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
-      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
@@ -1981,7 +1667,6 @@
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.1.tgz",
       "integrity": "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@rolldown/pluginutils": "^1.0.1"
       },
@@ -2154,7 +1839,6 @@
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@vnedyalk0v/react19-simple-maps/-/react19-simple-maps-2.0.10.tgz",
       "integrity": "sha512-tw8PYah/5c1UiwqhtB0k40p+jlYRW9QjdZZQ37CKONXErIZFHl0Sn8Ho03HNP/mXQs0YrogrBIeolln5mfbIsA==",
-      "license": "MIT",
       "dependencies": {
         "d3-color": "^3.1.0",
         "d3-geo": "^3.1.0",
@@ -2357,42 +2041,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
-      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "cosmiconfig": "^7.0.0",
-        "resolve": "^1.19.0"
-      },
-      "engines": {
-        "node": ">=10",
-        "npm": ">=6"
-      }
-    },
-    "node_modules/babel-plugin-macros/node_modules/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2430,9 +2078,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.18",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
-      "integrity": "sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==",
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.16.tgz",
+      "integrity": "sha512-IDw48K2/2kRkg9LdJxurvq3lV3aBgq0REY89duEqFRthjlPdXHKMj7EnQOXVckxzgisinf3nHfrcE2FufFLXMw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2494,6 +2142,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2556,23 +2205,11 @@
         "node": ">=6"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -2585,18 +2222,9 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -2640,7 +2268,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
       "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
-      "license": "MIT",
       "engines": {
         "node": ">=18"
       },
@@ -2658,31 +2285,6 @@
         "toggle-selection": "^1.0.6"
       }
     },
-    "node_modules/cosmiconfig": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
-      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/cosmiconfig/node_modules/yaml": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
-      "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3125,6 +2727,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
       "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
@@ -3205,6 +2808,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -3455,9 +3059,9 @@
       "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
     },
     "node_modules/fast-uri": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz",
-      "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.4.tgz",
+      "integrity": "sha512-8JnbkQ4juDyvYs4mgFGQqg4yCYtFDtUtmp2QIQq11ZZe5CFQ5wcqm1rqDgAh/QdMySuBnPzMUiJUNZG5N/AiQw==",
       "dev": true,
       "funding": [
         {
@@ -3541,12 +3145,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-      "license": "MIT"
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -3652,7 +3250,6 @@
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -4015,6 +3612,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -4087,23 +3685,9 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.2",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
-      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -4304,18 +3888,6 @@
         "node": "^22.14.0 || >=24.0.0"
       }
     },
-    "node_modules/jsesc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
-      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -4327,6 +3899,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
@@ -4343,29 +3916,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/jsonp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
-      "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==",
-      "dependencies": {
-        "debug": "^2.1.3"
-      }
-    },
-    "node_modules/jsonp/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/jsonp/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "license": "MIT"
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4405,7 +3955,6 @@
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
       "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
       "dev": true,
-      "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
       },
@@ -4438,7 +3987,6 @@
         "arm64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "android"
@@ -4459,7 +4007,6 @@
         "arm64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
@@ -4480,7 +4027,6 @@
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "darwin"
@@ -4501,7 +4047,6 @@
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "freebsd"
@@ -4522,7 +4067,6 @@
         "arm"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -4543,10 +4087,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -4567,10 +4107,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -4591,10 +4127,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -4615,10 +4147,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "linux"
@@ -4639,7 +4167,6 @@
         "arm64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
@@ -4660,7 +4187,6 @@
         "x64"
       ],
       "dev": true,
-      "license": "MPL-2.0",
       "optional": true,
       "os": [
         "win32"
@@ -4677,6 +4203,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/locate-path": {
@@ -4804,17 +4331,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/match-sorter": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.4.0.tgz",
-      "integrity": "sha512-d4664ahzdL1QTTvmK1iI0JsrxWeJ6gn33qkYtnPg3mcn+naBLtXSgSPOe+X2vUgtgGwaAk3eiaj7gwKjjMAq+Q==",
-      "deprecated": "This was arguably a breaking change. Not in API, but more results can be returned. Upgrade to the next major when you are ready for that",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "remove-accents": "0.5.0"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4842,12 +4358,6 @@
       "dev": true,
       "license": "CC0-1.0"
     },
-    "node_modules/memoize-one": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
-      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
-      "license": "MIT"
-    },
     "node_modules/meow": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/meow/-/meow-14.1.0.tgz",
@@ -5006,14 +4516,12 @@
       "version": "3.3.18",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz",
       "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -5119,6 +4627,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -5131,6 +4640,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
@@ -5178,21 +4688,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "license": "MIT"
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -5204,6 +4699,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -5219,6 +4715,50 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.62.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.26",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz",
@@ -5238,7 +4778,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.17",
         "picocolors": "^1.1.1",
@@ -5441,57 +4980,14 @@
       "version": "19.2.8",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
       "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==",
-      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-base16-styling": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.10.0.tgz",
-      "integrity": "sha512-H1k2eFB6M45OaiRru3PBXkuCcn2qNmx+gzLb4a9IPMR7tMH8oBRXU5jGbPDYG1Hz+82d88ED0vjR8BmqU3pQdg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/lodash": "^4.17.0",
-        "color": "^4.2.3",
-        "csstype": "^3.1.3",
-        "lodash-es": "^4.17.21"
-      }
-    },
-    "node_modules/react-compound-slider": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/react-compound-slider/-/react-compound-slider-3.4.0.tgz",
-      "integrity": "sha512-KSje/rB0xSvvcb7YV0+82hkiXTV5ljSS7axKrNiXLf9AEO+rrr1Xq4MJWA+6v030YNNo/RoSoEB6D6fnoy+8ng==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "d3-array": "^2.8.0",
-        "warning": "^4.0.3"
-      },
-      "peerDependencies": {
-        "react": ">=16.9"
-      }
-    },
-    "node_modules/react-compound-slider/node_modules/d3-array": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
-      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "internmap": "^1.0.0"
-      }
-    },
-    "node_modules/react-compound-slider/node_modules/internmap": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
-      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
-      "license": "ISC"
-    },
     "node_modules/react-dom": {
       "version": "19.2.8",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz",
       "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==",
-      "license": "MIT",
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -5523,7 +5019,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-2.2.4.tgz",
       "integrity": "sha512-Eb57FsgOMYOfsUGrMI1ku/FFR+dPNPrE8qo+3hwZubpqVSy4GO9v52DeX50Tl3JDYAlCypP4rmw7Vrqk/zOIvA==",
-      "license": "MIT",
       "dependencies": {
         "clsx": "^2.1.1",
         "fast-equals": "^4.0.3",
@@ -5546,19 +5041,6 @@
         "react": "*"
       }
     },
-    "node_modules/react-infinite-scroll-component": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-7.2.1.tgz",
-      "integrity": "sha512-yPuEf6VHBJXFt+YXDxjlnAuhorUwiA2cKURx/P6a7WW3k+TvwY/mbx7KP1rQ1hxGzDcwreczRyLIv6eSd1sFIw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
     "node_modules/react-is": {
       "version": "19.2.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.6.tgz",
@@ -5566,25 +5048,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/react-json-editor-ajrm": {
-      "version": "2.5.14",
-      "resolved": "https://registry.npmjs.org/react-json-editor-ajrm/-/react-json-editor-ajrm-2.5.14.tgz",
-      "integrity": "sha512-z2035l5lnU0Wo73AUonj68d1Eh9vjVcLXEa8YogDEeFPcogzYkfT6R38fvYlLKDhP0oI+LyOO/IBWsFkXs4M0Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.0.0-rc.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.2.0",
-        "react-dom": ">=16.2.0"
-      }
-    },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
-      "license": "MIT"
-    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -5660,69 +5123,6 @@
         "react-dom": ">=18"
       }
     },
-    "node_modules/react-select": {
-      "version": "5.10.2",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.2.tgz",
-      "integrity": "sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.12.0",
-        "@emotion/cache": "^11.4.0",
-        "@emotion/react": "^11.8.1",
-        "@floating-ui/dom": "^1.0.1",
-        "@types/react-transition-group": "^4.4.0",
-        "memoize-one": "^6.0.0",
-        "prop-types": "^15.6.0",
-        "react-transition-group": "^4.3.0",
-        "use-isomorphic-layout-effect": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/react-share": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/react-share/-/react-share-5.3.0.tgz",
-      "integrity": "sha512-NU4TqizVi2TuyLpN93/ng2ux+uIGHK5b2dT15cHvZDwfi5b5NuzGych4htCGObN8lubygeamhRxUot4lZ0Pv6Q==",
-      "license": "MIT",
-      "dependencies": {
-        "classnames": "^2.3.2",
-        "jsonp": "^0.2.1"
-      },
-      "peerDependencies": {
-        "react": "^17 || ^18 || ^19"
-      }
-    },
-    "node_modules/react-textarea-autosize": {
-      "version": "8.5.9",
-      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.9.tgz",
-      "integrity": "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.20.13",
-        "use-composed-ref": "^1.3.0",
-        "use-latest": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
-    "node_modules/react-top-loading-bar": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/react-top-loading-bar/-/react-top-loading-bar-3.0.2.tgz",
-      "integrity": "sha512-hW0CHrHqKdBOBsVhms73ka0rgb9/aoiRfqo7jiS1vwIYDK7VkyMj52ypo5ewhshTQGHKE6mRvR99GZBZ+FuM/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": "^16 || ^17 || ^18 || ^19"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5839,10 +5239,6 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.10.1.tgz",
       "integrity": "sha512-QXFrvt6IVcw7eeZCoyXTwkIJAX3Dv1nyVhMicXJ47GsGDDpcN8z6o644DibE9XjpBTThtsomLKnTV6lc+cVFUA==",
-      "license": "MIT",
-      "workspaces": [
-        "www"
-      ],
       "dependencies": {
         "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
         "clsx": "^2.1.1",
@@ -5900,12 +5296,6 @@
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "license": "MIT"
     },
-    "node_modules/remove-accents": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
-      "license": "MIT"
-    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -5932,6 +5322,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -5953,7 +5344,6 @@
       "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.6.tgz",
       "integrity": "sha512-vMM4q3aixf46GiF1Kok8jDPFsEpXgFWGjUHXNkNHNm+Y2adXAG2dbX91jkti3i0ZRsOlcmbuzAz1poObSHCmUA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@oxc-project/types": "=0.147.0",
         "@rolldown/pluginutils": "^1.0.0"
@@ -6069,8 +5459,7 @@
     "node_modules/set-cookie-parser": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
-      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
-      "license": "MIT"
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="
     },
     "node_modules/set-harmonic-interval": {
       "version": "1.0.1",
@@ -6124,21 +5513,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
-      "integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
-      "license": "MIT",
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
-      "integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
-      "license": "MIT"
-    },
     "node_modules/slash": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
@@ -6170,15 +5544,6 @@
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6438,12 +5803,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
-      "license": "MIT"
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6500,18 +5859,6 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -6794,51 +6141,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/use-composed-ref": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.4.0.tgz",
-      "integrity": "sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-isomorphic-layout-effect": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz",
-      "integrity": "sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/use-latest": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.3.0.tgz",
-      "integrity": "sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "use-isomorphic-layout-effect": "^1.1.1"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -6882,7 +6184,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.2.tgz",
       "integrity": "sha512-cFKLV/PRgAUlIRm5WjMjJ86jrftzpqcgH+Us+DS8mI3CDNiH30Whrz8uHL3+MOLPAgqbMBAqWdAHAphOAM+z/Q==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "lightningcss": "^1.33.0",
         "picomatch": "^4.0.5",
diff --git a/frontend/package.json b/frontend/package.json
index 7d21cf856..b5a71f08b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,13 +9,16 @@
     "prettier": "../.github/configurations/node_linters/prettier/.prettierrc.js"
   },
   "dependencies": {
-    "@greedybear/gb-ui": "github:GreedyBear-Project/gb-ui#1.0.1",
+    "@tanstack/react-table": "^8.21.3",
     "@vnedyalk0v/react19-simple-maps": "^2.0.10",
     "axios": "^1.20.0",
     "axios-hooks": "^5.1.1",
     "bootstrap": ">=5.3.8",
+    "classnames": "^2.5.1",
+    "date-fns": "^2.30.0",
     "formik": "^2.4.9",
     "i18n-iso-countries": "^7.14.0",
+    "nanoid": "^3.3.11",
     "prop-types": "^15.8.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -34,6 +37,9 @@
     "preview": "vite preview",
     "test": "vitest",
     "test-coverage": "vitest run --coverage",
+    "start:visual": "vite --host 127.0.0.1 --port 3002",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
     "lint-config-install": "cd ../.github/configurations/node_linters/eslint && npm i",
     "lint": "eslint 'src/**/*.{js,jsx}' 'tests/**/*.{js,jsx}'",
     "lint-fix": "npm run lint -- --fix",
@@ -47,6 +53,7 @@
     "d3-color": "^3.1.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.62.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
diff --git a/frontend/playwright.config.js b/frontend/playwright.config.js
new file mode 100644
index 000000000..a440a4e28
--- /dev/null
+++ b/frontend/playwright.config.js
@@ -0,0 +1,33 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests/visual",
+  fullyParallel: true,
+  reporter: "html",
+  snapshotPathTemplate: "{testDir}/{testFilePath}-snapshots/{arg}{ext}",
+  use: {
+    baseURL: "http://127.0.0.1:3002",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "desktop-chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        viewport: { width: 1440, height: 1200 },
+      },
+    },
+    {
+      name: "mobile-chromium",
+      use: {
+        ...devices["Pixel 7"],
+      },
+    },
+  ],
+  webServer: {
+    command: "npm run start:visual",
+    url: "http://127.0.0.1:3002/tests/visual.html",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});
diff --git a/frontend/src/components/Routes.jsx b/frontend/src/components/Routes.jsx
index 95fa3786e..820d1c58b 100644
--- a/frontend/src/components/Routes.jsx
+++ b/frontend/src/components/Routes.jsx
@@ -1,5 +1,5 @@
 import React, { Suspense } from "react";
-import { FallBackLoading } from "@greedybear/gb-ui";
+import { FallBackLoading } from "./common/gb-ui/index";
 
 import IfAuthRedirectGuard from "../wrappers/ifAuthRedirectGuard";
 import AuthGuard from "../wrappers/AuthGuard";
diff --git a/frontend/src/components/auth/EmailVerification.jsx b/frontend/src/components/auth/EmailVerification.jsx
index 371c659b4..b339ed203 100644
--- a/frontend/src/components/auth/EmailVerification.jsx
+++ b/frontend/src/components/auth/EmailVerification.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Navigate, useSearchParams } from "react-router-dom";
 import { Spinner } from "reactstrap";
-import { ContentSection } from "@greedybear/gb-ui";
+import { ContentSection } from "../common/gb-ui/index";
 
 import { verifyEmail } from "./api";
 
diff --git a/frontend/src/components/auth/Login.jsx b/frontend/src/components/auth/Login.jsx
index ba488f4ca..bf4253a2b 100644
--- a/frontend/src/components/auth/Login.jsx
+++ b/frontend/src/components/auth/Login.jsx
@@ -12,7 +12,7 @@ import {
 import { MdInfoOutline } from "react-icons/md";
 import { Form, Formik } from "formik";
 
-import { ContentSection } from "@greedybear/gb-ui";
+import { ContentSection } from "../common/gb-ui/index";
 
 import { useAuthStore } from "../../stores";
 import {
diff --git a/frontend/src/components/auth/Logout.jsx b/frontend/src/components/auth/Logout.jsx
index a3fd1d2f2..ab3d57a6e 100644
--- a/frontend/src/components/auth/Logout.jsx
+++ b/frontend/src/components/auth/Logout.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useShallow } from "zustand/shallow";
 
-import { FallBackLoading } from "@greedybear/gb-ui";
+import { FallBackLoading } from "../common/gb-ui/index";
 
 import { useAuthStore } from "../../stores";
 import { AUTHENTICATION_STATUSES } from "../../constants";
diff --git a/frontend/src/components/auth/Register.jsx b/frontend/src/components/auth/Register.jsx
index 62265ae32..fc37a60cf 100644
--- a/frontend/src/components/auth/Register.jsx
+++ b/frontend/src/components/auth/Register.jsx
@@ -14,7 +14,7 @@ import {
 import { Form, Formik } from "formik";
 import { useTitle } from "react-use";
 
-import { ContentSection, Select } from "@greedybear/gb-ui";
+import { ContentSection, Select } from "../common/gb-ui/index";
 
 import {
   AfterRegistrationModalAlert,
diff --git a/frontend/src/components/auth/ResetPassword.jsx b/frontend/src/components/auth/ResetPassword.jsx
index 7f319bcd2..cdce34664 100644
--- a/frontend/src/components/auth/ResetPassword.jsx
+++ b/frontend/src/components/auth/ResetPassword.jsx
@@ -4,7 +4,7 @@ import { FormGroup, Label, Col, Input, Button, Spinner } from "reactstrap";
 import { Form, Formik } from "formik";
 import { useTitle } from "react-use";
 
-import { ContentSection } from "@greedybear/gb-ui";
+import { ContentSection } from "../common/gb-ui/index";
 
 import { UUID_REGEX } from "../../constants/index";
 import { resetPassword } from "./api";
diff --git a/frontend/src/components/auth/api.js b/frontend/src/components/auth/api.js
index 9f732943d..8fe4f72a0 100644
--- a/frontend/src/components/auth/api.js
+++ b/frontend/src/components/auth/api.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../common/gb-ui/index";
 
 import { AUTH_BASE_URI } from "../../constants/api";
 
diff --git a/frontend/src/components/auth/utils/registration-buttons.jsx b/frontend/src/components/auth/utils/registration-buttons.jsx
index fb67d4084..bc52c6a58 100644
--- a/frontend/src/components/auth/utils/registration-buttons.jsx
+++ b/frontend/src/components/auth/utils/registration-buttons.jsx
@@ -2,7 +2,7 @@ import React from "react";
 // import PropTypes from "prop-types";
 import { Alert, PopoverBody } from "reactstrap";
 import { IoMail } from "react-icons/io5";
-import { PopupFormButton } from "@greedybear/gb-ui";
+import { PopupFormButton } from "../../common/gb-ui/index";
 import EmailForm from "./EmailForm";
 import { resendVerificationMail, requestPasswordReset } from "../api";
 
diff --git a/frontend/src/components/common/gb-ui/components/alerts/ErrorAlert.jsx b/frontend/src/components/common/gb-ui/components/alerts/ErrorAlert.jsx
new file mode 100644
index 000000000..aa1d0e643
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/alerts/ErrorAlert.jsx
@@ -0,0 +1,39 @@
+import React from "react";
+import classnames from "classnames";
+import { Alert, Col } from "reactstrap";
+import { MdError } from "react-icons/md";
+
+const sizeToWidth = {
+  sm: 4,
+  md: 8,
+  lg: 10,
+  xl: 12,
+};
+
+function ErrorAlert({ error, size = "md", className = undefined, ...rest }) {
+  return (
+    <Alert
+      tag={Col}
+      md={sizeToWidth[size]}
+      color="danger"
+      className={classnames("mx-auto m-3", className)}
+      {...rest}
+    >
+      <h4>
+        <MdError />
+        &nbsp; Error!
+      </h4>
+      <hr />
+      <h5>
+        {[error?.response?.status, error?.response?.statusText]
+          .filter(Boolean)
+          .join(" | ")}
+      </h5>
+      <div className="p-2 border border-darker">
+        <code className="text-light">{error?.parsedMsg?.toString()}</code>
+      </div>
+    </Alert>
+  );
+}
+
+export default ErrorAlert;
diff --git a/frontend/src/components/common/gb-ui/components/buttons/CopyToClipboardButton.jsx b/frontend/src/components/common/gb-ui/components/buttons/CopyToClipboardButton.jsx
new file mode 100644
index 000000000..07a867956
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/buttons/CopyToClipboardButton.jsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Tooltip, UncontrolledTooltip } from "reactstrap";
+import { HiClipboardCopy } from "react-icons/hi";
+
+import useCopyToClipboard from "react-use/lib/useCopyToClipboard";
+
+function CopyToClipboardButton({
+  id,
+  text,
+  children = null,
+  tooltip = null,
+  showOnHover = false,
+  ...rest
+}) {
+  // props
+
+  // local state
+  const [copied, setCopied] = React.useState(false);
+  const timeoutRef = React.useRef(null);
+
+  const [, copyToClipboard] = useCopyToClipboard();
+
+  React.useEffect(
+    () => () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  // callbacks
+  const onCopy = () => {
+    copyToClipboard(text);
+    setCopied(true);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(
+      () => setCopied(false),
+      tooltip?.timeout || 1000,
+    );
+  };
+
+  return (
+    <>
+      <span
+        id={`copyBtn-${id}`}
+        role="button"
+        tabIndex={0}
+        className="pointer"
+        onClick={onCopy}
+        onKeyPress={onCopy}
+        {...rest}
+      >
+        {children || <HiClipboardCopy size="1.5em" />}
+      </span>
+      <Tooltip
+        isOpen={copied}
+        placement="top"
+        target={`copyBtn-${id}`}
+        trigger="click"
+        innerClassName="bg-info text-darker"
+        delay={{ show: 0, hide: 0 }}
+      >
+        {tooltip?.text || "Copied!"}
+      </Tooltip>
+      {showOnHover && (
+        <UncontrolledTooltip target={`copyBtn-${id}`} trigger="hover">
+          Click to copy
+        </UncontrolledTooltip>
+      )}
+    </>
+  );
+}
+
+export default CopyToClipboardButton;
diff --git a/frontend/src/components/common/gb-ui/components/buttons/IconButton.jsx b/frontend/src/components/common/gb-ui/components/buttons/IconButton.jsx
new file mode 100644
index 000000000..2ed4b827e
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/buttons/IconButton.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Button, UncontrolledTooltip } from "reactstrap";
+import { nanoid } from "nanoid";
+
+function IconButton({
+  id = undefined,
+  title = undefined,
+  titlePlacement = "right-start",
+  Icon,
+  ...rest
+}) {
+  // props
+
+  // vars
+  const btnId = React.useMemo(() => id || `iconbtn-${nanoid(4)}`, [id]);
+
+  return (
+    <Button id={btnId} type="button" {...rest}>
+      <Icon />
+      {title && (
+        <UncontrolledTooltip
+          target={btnId}
+          placement={titlePlacement}
+          delay={{ show: 0 }}
+        >
+          {title}
+        </UncontrolledTooltip>
+      )}
+    </Button>
+  );
+}
+
+export default IconButton;
diff --git a/frontend/src/components/common/gb-ui/components/buttons/PopupFormButton.jsx b/frontend/src/components/common/gb-ui/components/buttons/PopupFormButton.jsx
new file mode 100644
index 000000000..4c69694b0
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/buttons/PopupFormButton.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { Button, Popover, UncontrolledTooltip, PopoverBody } from "reactstrap";
+import { nanoid } from "nanoid";
+import { IoMdClose } from "react-icons/io";
+
+export default function PopupFormButton({
+  id = undefined,
+  title = null,
+  titlePlacement = "right-start",
+  popOverPlacement = "right-start",
+  Icon,
+  Form,
+  onFormSuccess = () => null,
+  ...rest
+}) {
+  // props
+
+  // state
+  const [popoverOpen, setPopoverOpen] = React.useState(false);
+  const closeTimeoutRef = React.useRef(null);
+
+  React.useEffect(
+    () => () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    },
+    [],
+  );
+
+  // callbacks
+  const onFormSubmit = React.useCallback(() => {
+    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    closeTimeoutRef.current = setTimeout(() => setPopoverOpen(false), 400);
+    onFormSuccess();
+  }, [onFormSuccess]);
+
+  // vars
+  const btnId = React.useMemo(() => id || `popover-btn-${nanoid(4)}`, [id]);
+
+  return (
+    <>
+      <Button
+        id={btnId}
+        type="button"
+        className="btn-sm"
+        color="info"
+        {...rest}
+      >
+        {popoverOpen ? <IoMdClose /> : <Icon />}
+      </Button>
+      {title && (
+        <UncontrolledTooltip
+          target={btnId}
+          placement={titlePlacement}
+          delay={{ show: 0 }}
+        >
+          {title}
+        </UncontrolledTooltip>
+      )}
+      <Popover
+        placement={popOverPlacement}
+        isOpen={popoverOpen}
+        target={btnId}
+        toggle={() => setPopoverOpen(!popoverOpen)}
+      >
+        <PopoverBody className="bg-dark">
+          <Form onFormSubmit={onFormSubmit} />
+        </PopoverBody>
+      </Popover>
+    </>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/buttons/ScrollToTopButton.jsx b/frontend/src/components/common/gb-ui/components/buttons/ScrollToTopButton.jsx
new file mode 100644
index 000000000..1c7810cbd
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/buttons/ScrollToTopButton.jsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { RiArrowUpSLine } from "react-icons/ri";
+import { Button } from "reactstrap";
+
+export default function ScrollToTopButton({
+  defaultVisible = false,
+  scrollYOffset = 300,
+  ...rest
+}) {
+  // props
+
+  // local state
+  const [isVisible, setIsVisible] = React.useState(defaultVisible);
+
+  // Show button when page is scrolled upto given distance
+  const toggleVisibility = React.useCallback(
+    () =>
+      window.pageYOffset > scrollYOffset
+        ? setIsVisible(true)
+        : setIsVisible(false),
+    [scrollYOffset, setIsVisible],
+  );
+
+  // Set the top cordinate to 0
+  // make scrolling smooth
+  const scrollToTop = () =>
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", toggleVisibility);
+    toggleVisibility();
+
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, [toggleVisibility]);
+
+  return (
+    <div id="ScrollToTopButton" {...rest}>
+      {isVisible && (
+        <Button
+          onClick={scrollToTop}
+          color="accent-1"
+          className="rounded-circle btn-md"
+        >
+          <RiArrowUpSLine />
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/containers/ContentSection.jsx b/frontend/src/components/common/gb-ui/components/containers/ContentSection.jsx
new file mode 100644
index 000000000..0f883dd7f
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/containers/ContentSection.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+
+function ContentSection({ className = null, children, ...rest }) {
+  return (
+    <div className={classnames("content-section bg-dark", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+export default ContentSection;
diff --git a/frontend/src/components/common/gb-ui/components/containers/Loader.jsx b/frontend/src/components/common/gb-ui/components/containers/Loader.jsx
new file mode 100644
index 000000000..85af15350
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/containers/Loader.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Spinner } from "reactstrap";
+
+import ErrorAlert from "../alerts/ErrorAlert";
+
+function Loader({
+  loading,
+  error = null,
+  render,
+  renderError = ErrorAlert,
+  size = "md",
+}) {
+  return (
+    <>
+      {loading && (
+        <Spinner
+          type="ripple"
+          className={`d-block mx-auto my-5 spinner-border-${size}`}
+        />
+      )}
+      {error && renderError({ error, size })}
+      {!(loading || error) && render()}
+    </>
+  );
+}
+
+export default Loader;
diff --git a/frontend/src/components/common/gb-ui/components/containers/LoadingBoundary.jsx b/frontend/src/components/common/gb-ui/components/containers/LoadingBoundary.jsx
new file mode 100644
index 000000000..6f187ddac
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/containers/LoadingBoundary.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Spinner } from "reactstrap";
+
+import ErrorAlert from "../alerts/ErrorAlert";
+
+function LoadingBoundary({
+  loading = false,
+  error = null,
+  size = "md",
+  render,
+  renderError = ErrorAlert,
+}) {
+  const hasError = Boolean(error?.response || error?.message);
+  const RenderError = renderError;
+
+  return (
+    <>
+      {loading && (
+        <Spinner
+          type="ripple"
+          className={`d-block mx-auto my-5 spinner-border-${size}`}
+        />
+      )}
+      {hasError && <RenderError error={error} size={size} />}
+      {!loading && !hasError && render()}
+    </>
+  );
+}
+
+export default LoadingBoundary;
diff --git a/frontend/src/components/common/gb-ui/components/containers/SmallInfoCard.jsx b/frontend/src/components/common/gb-ui/components/containers/SmallInfoCard.jsx
new file mode 100644
index 000000000..85fd5d8d1
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/containers/SmallInfoCard.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import classNames from "classnames";
+import { Card, CardBody, CardHeader } from "reactstrap";
+
+function SmallInfoCard({ header, body, className = undefined, ...rest }) {
+  return (
+    <Card className={classNames("flat border-dark", className)} {...rest}>
+      <CardHeader className="bg-dark h5 text-center">{header}</CardHeader>
+      <CardBody className="bg-body p-0">{body}</CardBody>
+    </Card>
+  );
+}
+
+export default SmallInfoCard;
diff --git a/frontend/src/components/common/gb-ui/components/form/Select.jsx b/frontend/src/components/common/gb-ui/components/form/Select.jsx
new file mode 100644
index 000000000..a4d710b18
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/form/Select.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Input } from "reactstrap";
+
+export default function Select({
+  choices,
+  allowEmpty = false,
+  emptyLabel = "",
+  ...rest
+}) {
+  return (
+    <Input type="select" id={`select-${rest.name}`} {...rest}>
+      {allowEmpty && <option value="">{emptyLabel}</option>}
+      {choices.map(({ label: text, value }) => (
+        <option key={value} value={value}>
+          {text}
+        </option>
+      ))}
+    </Input>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/icons/ArrowToggleIcon.jsx b/frontend/src/components/common/gb-ui/components/icons/ArrowToggleIcon.jsx
new file mode 100644
index 000000000..d59ef5e42
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/icons/ArrowToggleIcon.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import { MdExpandLess, MdExpandMore } from "react-icons/md";
+import classNames from "classnames";
+
+function ArrowToggleIcon({ isExpanded, className = null, ...rest }) {
+  const cls = classNames("pointer bg-tertiary rounded-pill", className);
+
+  return isExpanded ? (
+    <MdExpandLess size="20px" className={cls} {...rest} />
+  ) : (
+    <MdExpandMore size="20px" className={cls} {...rest} />
+  );
+}
+
+export default ArrowToggleIcon;
diff --git a/frontend/src/components/common/gb-ui/components/icons/BooleanIcon.jsx b/frontend/src/components/common/gb-ui/components/icons/BooleanIcon.jsx
new file mode 100644
index 000000000..39e44e25f
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/icons/BooleanIcon.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import classnames from "classnames";
+import { MdCheck, MdCheckCircleOutline } from "react-icons/md";
+import { IoMdCloseCircleOutline, IoMdClose } from "react-icons/io";
+
+export default function BooleanIcon({
+  truthy,
+  withColors = false,
+  outline = true,
+  ...rest
+}) {
+  const Check = outline ? MdCheckCircleOutline : MdCheck;
+  const Close = outline ? IoMdCloseCircleOutline : IoMdClose;
+
+  return truthy ? (
+    <Check
+      title="true"
+      className={classnames({ "text-success": withColors })}
+      size="20px"
+      {...rest}
+    />
+  ) : (
+    <Close
+      title="false"
+      className={classnames({ "text-danger": withColors })}
+      size="20px"
+      {...rest}
+    />
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/misc/FallbackLoading.jsx b/frontend/src/components/common/gb-ui/components/misc/FallbackLoading.jsx
new file mode 100644
index 000000000..a082b694a
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/misc/FallbackLoading.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { Spinner } from "reactstrap";
+
+export default function FallBackLoading({ text = "Loading...", ...rest }) {
+  return (
+    <div className="vertical-center" {...rest}>
+      <div className="container text-center">
+        <Spinner type="ripple" className="spinner-border-lg" />
+        <h4 className="mt-4">{text}</h4>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/misc/Toaster.jsx b/frontend/src/components/common/gb-ui/components/misc/Toaster.jsx
new file mode 100644
index 000000000..86fd4072c
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/misc/Toaster.jsx
@@ -0,0 +1,49 @@
+import React, { useState, useCallback } from "react";
+import { Toast, ToastBody, ToastHeader, Spinner } from "reactstrap";
+import { MdError, MdWarning, MdInfo, MdCheckCircle } from "react-icons/md";
+
+function getIcon(color) {
+  const iconChoices = {
+    danger: MdError,
+    warning: MdWarning,
+    info: MdInfo,
+    success: MdCheckCircle,
+    spinner: Spinner,
+  };
+  return iconChoices[color] ? iconChoices[color] : iconChoices.info;
+}
+
+export default function Toaster({
+  header,
+  body = null,
+  color = "info",
+  timeout = 4000,
+  showToggle = false,
+  ...props
+}) {
+  // state
+  const [show, setShow] = useState(true);
+  const toggle = useCallback(() => setShow((v) => !v), [setShow]);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setShow(false), timeout);
+    return () => clearTimeout(timer);
+  }, [timeout]);
+
+  const Icon = getIcon(color);
+
+  const toastColor = color === "spinner" ? "info" : color;
+
+  return (
+    <Toast {...props} className={`mx-auto bg-${toastColor}`} isOpen={show}>
+      <ToastHeader
+        className={`bg-${toastColor} text-dark`}
+        toggle={showToggle ? toggle : undefined}
+      >
+        <Icon className="text-large me-2" />
+        {header}
+      </ToastHeader>
+      {body && <ToastBody>{body}</ToastBody>}
+    </Toast>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/misc/UserBubble.jsx b/frontend/src/components/common/gb-ui/components/misc/UserBubble.jsx
new file mode 100644
index 000000000..14907659f
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/misc/UserBubble.jsx
@@ -0,0 +1,42 @@
+import React from "react";
+import classnames from "classnames";
+
+/**
+ * @type {component}
+ * @param props
+ */
+export default function UserBubble({
+  userInfo,
+  size = "sm",
+  className = undefined,
+  ...elProps
+}) {
+  const userInitials =
+    userInfo?.first_name?.charAt(0).concat(userInfo?.last_name?.charAt(0)) ||
+    userInfo?.username?.slice(0, 2);
+
+  const bubbleClassName = React.useMemo(
+    () =>
+      classnames(
+        "chat-bubble",
+        {
+          "chat-bubble-sm": size === "sm",
+          "chat-bubble-xs": size === "xs",
+          highlight: true,
+        },
+        className,
+      ),
+    [className, size],
+  );
+
+  return (
+    <div
+      {...elProps}
+      aria-label="user menu bubble"
+      title={userInfo?.full_name}
+      className={bubbleClassName}
+    >
+      {userInitials}
+    </div>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/modals/ConfirmModal.jsx b/frontend/src/components/common/gb-ui/components/modals/ConfirmModal.jsx
new file mode 100644
index 000000000..29ad0b88c
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/modals/ConfirmModal.jsx
@@ -0,0 +1,69 @@
+import React, { Fragment } from "react";
+import { createRoot } from "react-dom/client";
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "reactstrap";
+
+function ConfirmModal({
+  onClose,
+  message = "Are you sure?",
+  title = "Warning!",
+  confirmText = "Ok",
+  cancelText = "Cancel",
+  confirmColor = "primary",
+  cancelColor = "",
+  className = "",
+  buttonsComponent = null,
+  size = null,
+  bodyComponent = null,
+  modalProps = {},
+}) {
+  let buttonsContent = (
+    <Fragment>
+      {cancelText && (
+        <Button color={cancelColor} onClick={() => onClose(false)}>
+          {cancelText}
+        </Button>
+      )}{" "}
+      <Button color={confirmColor} onClick={() => onClose(true)}>
+        {confirmText}
+      </Button>
+    </Fragment>
+  );
+
+  if (buttonsComponent) {
+    const CustomComponent = buttonsComponent;
+    buttonsContent = <CustomComponent onClose={onClose} />;
+  }
+
+  const BodyComponent = bodyComponent;
+
+  return (
+    <Modal
+      size={size}
+      isOpen
+      toggle={() => onClose(false)}
+      className={`reactstrap-confirm ${className}`}
+      {...modalProps}
+    >
+      {title && (
+        <ModalHeader toggle={() => onClose(false)}>{title || null}</ModalHeader>
+      )}
+      <ModalBody>{bodyComponent ? <BodyComponent /> : message}</ModalBody>
+      <ModalFooter>{buttonsContent}</ModalFooter>
+    </Modal>
+  );
+}
+
+export const confirm = (props) =>
+  new Promise((resolve) => {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    const root = createRoot(el);
+    const handleResolve = (result) => {
+      root.unmount();
+      el.remove();
+      resolve(result);
+    };
+    root.render(<ConfirmModal {...props} onClose={handleResolve} />);
+  });
+
+export default ConfirmModal;
diff --git a/frontend/src/components/common/gb-ui/components/nav/DropdownNavLink.jsx b/frontend/src/components/common/gb-ui/components/nav/DropdownNavLink.jsx
new file mode 100644
index 000000000..4a5cf9ff9
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/nav/DropdownNavLink.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { NavLink as RRNavLink } from "react-router-dom";
+
+/**
+ * @type {component}
+ * @param props
+ */
+export default function DropdownNavLink(props) {
+  const { children, ...toPassProps } = props;
+
+  return (
+    <RRNavLink
+      className={({ isActive }) => `dropdown-item${isActive ? " active" : ""}`}
+      {...toPassProps}
+    >
+      {children}
+    </RRNavLink>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/nav/NavLink.jsx b/frontend/src/components/common/gb-ui/components/nav/NavLink.jsx
new file mode 100644
index 000000000..b7f1784de
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/nav/NavLink.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import classnames from "classnames";
+import { NavLink as RRNavLink } from "react-router-dom";
+
+// constants
+const type2ClassnameMap = {
+  default: "",
+  primary: "link-primary",
+  primaryUl: "link-ul-primary",
+  muted: "link-muted",
+  mutedUl: "link-ul-muted",
+};
+
+// component
+export default function NavLink({
+  type = "default",
+  children,
+  className = null,
+  ...props
+}) {
+  return (
+    <RRNavLink
+      className={({ isActive }) =>
+        classnames(
+          "nav-link",
+          "text-lg-center",
+          type2ClassnameMap[type],
+          className,
+          { active: isActive },
+        )
+      }
+      {...props}
+    >
+      {children}
+    </RRNavLink>
+  );
+}
diff --git a/frontend/src/components/common/gb-ui/components/table/DataTable.jsx b/frontend/src/components/common/gb-ui/components/table/DataTable.jsx
new file mode 100644
index 000000000..341899044
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/DataTable.jsx
@@ -0,0 +1,570 @@
+/* eslint-disable no-nested-ternary */
+import React from "react";
+import classnames from "classnames";
+import { Table } from "reactstrap";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+} from "@tanstack/react-table";
+import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
+
+import { makeTableArgs, defaultConfig, defaultInitialState } from "./utils";
+import Paginator from "./Paginator";
+
+function getColumnId(column) {
+  return column.id || column.accessor;
+}
+
+function getAccessorFn(column) {
+  if (typeof column.accessor === "function") return column.accessor;
+  if (typeof column.accessor === "string")
+    return (row) => row?.[column.accessor];
+  return () => undefined;
+}
+
+function normalizeColumn(column, index) {
+  const id = getColumnId(column) || `column_${index}`;
+  const accessorFn = getAccessorFn(column);
+
+  return {
+    ...column,
+    id,
+    accessorFn,
+  };
+}
+
+function getLegacyRowValue(row, column) {
+  if (!column?.accessorFn) return undefined;
+  return column.accessorFn(row);
+}
+
+function legacyDefaultFilterFn(row, columnId, filterValue) {
+  if (filterValue === undefined || filterValue === null || filterValue === "")
+    return true;
+
+  const normalizedFilter = `${filterValue}`.toLowerCase();
+  const rowValue = row.getValue(columnId);
+
+  if (Array.isArray(rowValue)) {
+    return rowValue.some((value) =>
+      `${value ?? ""}`.toLowerCase().includes(normalizedFilter),
+    );
+  }
+
+  return `${rowValue ?? ""}`.toLowerCase().includes(normalizedFilter);
+}
+
+/**
+ * Suitable when data is already available client side. Thus, pagination/filtering/sorting can be performed client side too.
+ */
+function DataTable({
+  config: userConfig = defaultConfig,
+  onSelectedRowChange = undefined,
+  SubComponent = undefined,
+  tableProps = undefined,
+  tableEmptyNode = "No Data",
+  TableBodyComponent = undefined,
+  columns = [],
+  data = [],
+  initialState = defaultInitialState,
+  stateReducer = undefined,
+  isRowSelectable = () => true,
+  customProps = undefined,
+  manualPagination = false,
+  manualFilters = false,
+  manualSortBy = false,
+  pageCount = undefined,
+}) {
+  const config = React.useMemo(
+    () => ({ ...defaultConfig, ...userConfig }),
+    [userConfig],
+  );
+
+  const tableArgs = React.useMemo(() => makeTableArgs(config), [config]);
+
+  const hookRegistry = React.useMemo(() => {
+    const registry = { visibleColumns: [], getRowProps: [] };
+    tableArgs.forEach((hook) => {
+      if (typeof hook === "function") hook(registry);
+    });
+    return registry;
+  }, [tableArgs]);
+
+  const baseColumns = React.useMemo(
+    () => columns.map((column, index) => normalizeColumn(column, index)),
+    [columns],
+  );
+
+  const baseInstance = React.useMemo(
+    () => ({ customProps, isRowSelectable }),
+    [customProps, isRowSelectable],
+  );
+
+  const legacyColumns = React.useMemo(() => {
+    let transformedColumns = baseColumns;
+    hookRegistry.visibleColumns.forEach((transformer) => {
+      transformedColumns = transformer(transformedColumns, {
+        instance: baseInstance,
+      });
+    });
+    return transformedColumns;
+  }, [baseColumns, hookRegistry, baseInstance]);
+
+  const tanstackColumns = React.useMemo(
+    () =>
+      legacyColumns.map((column) => ({
+        id: column.id,
+        accessorFn: column.accessorFn,
+        enableSorting: config.enableSortBy && !column.disableSortBy,
+        enableColumnFilter: config.enableFilters && !!column.Filter,
+        filterFn: column.filterFn || legacyDefaultFilterFn,
+        meta: { legacyColumn: column },
+      })),
+    [legacyColumns, config.enableSortBy, config.enableFilters],
+  );
+
+  const legacyInitialState = React.useMemo(
+    () => ({ ...defaultInitialState, ...initialState }),
+    [initialState],
+  );
+
+  const [tableState, setTableState] = React.useState(() => ({
+    pagination: {
+      pageIndex: legacyInitialState.pageIndex || 0,
+      pageSize: legacyInitialState.pageSize || 10,
+    },
+    sorting: legacyInitialState.sortBy || [],
+    columnFilters: legacyInitialState.filters || [],
+    rowSelection: legacyInitialState.selectedRowIds || {},
+    expanded: {},
+  }));
+
+  const reduceState = React.useCallback(
+    (nextState, action, prevState) => {
+      if (!stateReducer) return nextState;
+      return stateReducer(nextState, action, prevState) || nextState;
+    },
+    [stateReducer],
+  );
+
+  const updateState = React.useCallback(
+    (producer, action) => {
+      setTableState((previousState) => {
+        const nextState = producer(previousState);
+        return reduceState(nextState, action, previousState);
+      });
+    },
+    [reduceState],
+  );
+
+  const toggleRowSelected = React.useCallback(
+    (rowId, selected) => {
+      updateState(
+        (previousState) => ({
+          ...previousState,
+          rowSelection: {
+            ...previousState.rowSelection,
+            [rowId]: selected,
+          },
+        }),
+        { type: "toggleRowSelected", id: rowId, value: selected },
+      );
+    },
+    [updateState],
+  );
+
+  const table = useReactTable({
+    data,
+    columns: tanstackColumns,
+    state: tableState,
+    pageCount,
+    manualPagination,
+    manualFiltering: manualFilters,
+    manualSorting: manualSortBy,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    enableRowSelection: (row) =>
+      isRowSelectable({
+        id: row.id,
+        original: row.original,
+      }),
+    onPaginationChange: (updater) => {
+      updateState(
+        (previousState) => {
+          const nextPagination =
+            typeof updater === "function"
+              ? updater(previousState.pagination)
+              : updater;
+
+          return {
+            ...previousState,
+            pagination: nextPagination,
+          };
+        },
+        {
+          type:
+            typeof updater === "function"
+              ? "gotoPage"
+              : updater.pageIndex !== tableState.pagination.pageIndex
+                ? "gotoPage"
+                : "setPageSize",
+          pageIndex:
+            typeof updater === "function"
+              ? updater(tableState.pagination).pageIndex
+              : updater.pageIndex,
+        },
+      );
+    },
+    onSortingChange: (updater) => {
+      updateState(
+        (previousState) => ({
+          ...previousState,
+          sorting:
+            typeof updater === "function"
+              ? updater(previousState.sorting)
+              : updater,
+        }),
+        { type: "toggleSortBy" },
+      );
+    },
+    onColumnFiltersChange: (updater) => {
+      updateState(
+        (previousState) => ({
+          ...previousState,
+          columnFilters:
+            typeof updater === "function"
+              ? updater(previousState.columnFilters)
+              : updater,
+        }),
+        { type: "setFilter" },
+      );
+    },
+    onRowSelectionChange: (updater) => {
+      updateState(
+        (previousState) => ({
+          ...previousState,
+          rowSelection:
+            typeof updater === "function"
+              ? updater(previousState.rowSelection)
+              : updater,
+        }),
+        { type: "toggleRowSelected" },
+      );
+    },
+    onExpandedChange: (updater) => {
+      updateState(
+        (previousState) => ({
+          ...previousState,
+          expanded:
+            typeof updater === "function"
+              ? updater(previousState.expanded)
+              : updater,
+        }),
+        { type: "toggleRowExpanded" },
+      );
+    },
+  });
+
+  const toLegacyRow = React.useCallback(
+    (row) => ({
+      id: row.id,
+      original: row.original,
+      values: Object.fromEntries(
+        legacyColumns.map((column) => [
+          column.id,
+          getLegacyRowValue(row.original, column),
+        ]),
+      ),
+      isSelected: row.getIsSelected(),
+      isExpanded: row.getIsExpanded(),
+      getToggleRowSelectedProps: () => ({
+        checked: row.getIsSelected(),
+        onChange: (event) => row.toggleSelected(event.target.checked),
+      }),
+      getToggleRowExpandedProps: () => ({
+        role: "button",
+        tabIndex: 0,
+        onClick: () => row.toggleExpanded(),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") row.toggleExpanded();
+        },
+      }),
+    }),
+    [legacyColumns],
+  );
+
+  const pageRows = table.getRowModel().rows;
+  const legacyPageRows = React.useMemo(
+    () => pageRows.map((row) => toLegacyRow(row)),
+    [pageRows, toLegacyRow],
+  );
+
+  const selectedFlatRows = React.useMemo(
+    () => table.getSelectedRowModel().flatRows.map((row) => toLegacyRow(row)),
+    [table, toLegacyRow],
+  );
+
+  React.useEffect(() => {
+    if (!onSelectedRowChange) return;
+    onSelectedRowChange(selectedFlatRows.map((row) => row.original));
+  }, [onSelectedRowChange, selectedFlatRows]);
+
+  const tableInstanceContext = React.useMemo(
+    () => ({
+      ...baseInstance,
+      page: legacyPageRows,
+      selectedFlatRows,
+      toggleRowSelected,
+    }),
+    [baseInstance, legacyPageRows, selectedFlatRows, toggleRowSelected],
+  );
+
+  const renderHeaderContent = React.useCallback(
+    (column) => {
+      const Header = column?.Header;
+      if (typeof Header === "function") {
+        return (
+          <Header
+            selectedFlatRows={selectedFlatRows}
+            toggleRowSelected={toggleRowSelected}
+            page={legacyPageRows}
+          />
+        );
+      }
+      return Header;
+    },
+    [selectedFlatRows, toggleRowSelected, legacyPageRows],
+  );
+
+  const renderFooterContent = React.useCallback((column) => {
+    const Footer = column?.Footer;
+    if (typeof Footer === "function") return <Footer />;
+    return Footer;
+  }, []);
+
+  const footerAvailable = legacyColumns.some((column) => !!column.Footer);
+
+  const preFilteredRows = React.useMemo(
+    () =>
+      data.map((rowObj) => ({
+        values: Object.fromEntries(
+          legacyColumns.map((column) => [
+            column.id,
+            getLegacyRowValue(rowObj, column),
+          ]),
+        ),
+      })),
+    [data, legacyColumns],
+  );
+
+  const getFilterElement = React.useCallback(
+    (column) => {
+      if (!column?.Filter || !config.enableFilters) return null;
+
+      const filterValue =
+        tableState.columnFilters.find((filter) => filter.id === column.id)
+          ?.value || "";
+
+      return (
+        <column.Filter
+          column={{
+            ...column,
+            id: column.id,
+            filterValue,
+            preFilteredRows,
+            setFilter: (value) => {
+              table.getColumn(column.id)?.setFilterValue(value);
+            },
+          }}
+        />
+      );
+    },
+    [config.enableFilters, preFilteredRows, table, tableState.columnFilters],
+  );
+
+  const getCellContent = React.useCallback(
+    (cell, legacyRow) => {
+      const legacyColumn = cell.column.columnDef.meta?.legacyColumn;
+      const cellValue = cell.getValue();
+      if (typeof legacyColumn?.Cell === "function") {
+        return legacyColumn.Cell({
+          value: cellValue,
+          row: legacyRow,
+          column: legacyColumn,
+          instance: tableInstanceContext,
+        });
+      }
+      return cellValue;
+    },
+    [tableInstanceContext],
+  );
+
+  const getRowProps = React.useCallback(
+    (legacyRow) => {
+      let rowProps = { key: legacyRow.id };
+      hookRegistry.getRowProps.forEach((getProps) => {
+        const output = getProps(rowProps, { row: legacyRow });
+        if (Array.isArray(output)) {
+          const [, extraProps] = output;
+          rowProps = { ...rowProps, ...extraProps };
+        }
+      });
+      return rowProps;
+    },
+    [hookRegistry],
+  );
+
+  const pageOptions = React.useMemo(
+    () => Array.from({ length: table.getPageCount() }, (_, index) => index),
+    [table],
+  );
+
+  const tableBody = TableBodyComponent ? (
+    <TableBodyComponent page={legacyPageRows} />
+  ) : (
+    pageRows.map((row) => {
+      const legacyRow = toLegacyRow(row);
+      const { key, ...rowProps } = getRowProps(legacyRow);
+
+      return (
+        <React.Fragment key={key}>
+          <tr
+            {...rowProps}
+            className={classnames(rowProps.className, {
+              "row-selected": legacyRow.isSelected,
+            })}
+          >
+            {row.getVisibleCells().map((cell) => (
+              <td key={cell.id} className="text-center">
+                {getCellContent(cell, legacyRow)}
+              </td>
+            ))}
+          </tr>
+          {SubComponent && config?.enableExpanded && legacyRow?.isExpanded && (
+            <tr>
+              <td colSpan={table.getVisibleLeafColumns().length}>
+                <SubComponent row={legacyRow} />
+              </td>
+            </tr>
+          )}
+        </React.Fragment>
+      );
+    })
+  );
+
+  return (
+    <div>
+      <Table striped hover responsive="xl" {...tableProps}>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr className="head-row" key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                const legacyColumn = header.column.columnDef.meta?.legacyColumn;
+                const sortState = header.column.getIsSorted();
+                const canSort =
+                  config.enableSortBy && header.column.getCanSort();
+
+                return (
+                  <th
+                    key={header.id}
+                    className={sortState ? "text-primary" : ""}
+                    style={{
+                      width: legacyColumn?.maxWidth
+                        ? `${legacyColumn.maxWidth}px`
+                        : undefined,
+                      maxWidth: legacyColumn?.maxWidth
+                        ? `${legacyColumn.maxWidth}px`
+                        : undefined,
+                    }}
+                  >
+                    {/* role, tabIndex, and click handler are applied together only when sortable */}
+                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                    <div
+                      className="text-center"
+                      role={canSort ? "button" : undefined}
+                      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                      tabIndex={canSort ? 0 : undefined}
+                      onClick={
+                        canSort
+                          ? header.column.getToggleSortingHandler()
+                          : undefined
+                      }
+                      onKeyDown={
+                        canSort
+                          ? (event) => {
+                              if (event.key === "Enter" || event.key === " ") {
+                                header.column.toggleSorting();
+                              }
+                            }
+                          : undefined
+                      }
+                    >
+                      {renderHeaderContent(legacyColumn)}
+                      {canSort &&
+                        (sortState ? (
+                          sortState === "desc" ? (
+                            <FaSortDown />
+                          ) : (
+                            <FaSortUp />
+                          )
+                        ) : (
+                          <FaSort className="text-muted small" />
+                        ))}
+                    </div>
+                    <div className="d-flex mt-1">
+                      {getFilterElement(legacyColumn)}
+                    </div>
+                  </th>
+                );
+              })}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {pageRows?.length ? (
+            tableBody
+          ) : (
+            <tr>
+              <td
+                colSpan={table.getVisibleLeafColumns().length || 1}
+                className="text-large fw-bold text-center"
+              >
+                {tableEmptyNode}
+              </td>
+            </tr>
+          )}
+        </tbody>
+        {footerAvailable && (
+          <tfoot>
+            {table.getFooterGroups().map((group) => (
+              <tr key={group.id}>
+                {group.headers.map((header) => (
+                  <th key={header.id}>
+                    {renderFooterContent(
+                      header.column.columnDef.meta?.legacyColumn,
+                    )}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </tfoot>
+        )}
+      </Table>
+      {pageOptions.length > 1 && (
+        <Paginator
+          pageIndex={table.getState().pagination.pageIndex}
+          pageOptions={pageOptions}
+          onPaginate={(nextPage) => table.setPageIndex(nextPage)}
+          className="table-paginator"
+        />
+      )}
+    </div>
+  );
+}
+
+export default DataTable;
diff --git a/frontend/src/components/common/gb-ui/components/table/Paginator.jsx b/frontend/src/components/common/gb-ui/components/table/Paginator.jsx
new file mode 100644
index 000000000..3f04669f9
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/Paginator.jsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { Pagination, PaginationItem, PaginationLink } from "reactstrap";
+
+// constants
+const INITIAL_SLICE = 5;
+const ELLIPSES_TEXT = "...";
+
+// component
+function Paginator(props) {
+  const { pageOptions, onPaginate, pageIndex, ...rest } = props;
+
+  const [slice, setSlice] = React.useState(INITIAL_SLICE);
+
+  React.useEffect(() => {
+    if (pageIndex + slice > pageOptions.length) {
+      setSlice(INITIAL_SLICE);
+    }
+  }, [pageIndex, pageOptions, slice, setSlice]);
+
+  const numPages = pageOptions.length - 1;
+  const lowerSlice = Math.max(pageIndex - INITIAL_SLICE, 0);
+  const upperSlice = Math.min(
+    pageIndex + slice + INITIAL_SLICE,
+    pageOptions.length,
+  );
+  let slicedPages = pageOptions.slice(lowerSlice, pageIndex + INITIAL_SLICE);
+  if (slice > INITIAL_SLICE) {
+    slicedPages = [
+      ...slicedPages,
+      ELLIPSES_TEXT,
+      ...pageOptions.slice(pageIndex + slice, upperSlice),
+    ];
+  }
+
+  return (
+    <Pagination aria-label="Data Table Pagination" {...rest}>
+      {/* first */}
+      {pageIndex !== 0 && (
+        <PaginationItem>
+          <PaginationLink first onClick={() => onPaginate(0)} />
+        </PaginationItem>
+      )}
+      {/* nums */}
+      {slicedPages.map((i) => (
+        <PaginationItem
+          active={i === pageIndex}
+          key={i}
+          disabled={i === ELLIPSES_TEXT}
+        >
+          <PaginationLink onClick={() => onPaginate(i)}>
+            {i === ELLIPSES_TEXT ? i : i + 1}
+          </PaginationLink>
+        </PaginationItem>
+      ))}
+      {/* ellipses */}
+      {upperSlice < numPages && (
+        <PaginationItem
+          title="load more"
+          onClick={() => setSlice((s) => s + INITIAL_SLICE)}
+        >
+          <PaginationLink>{ELLIPSES_TEXT}</PaginationLink>
+        </PaginationItem>
+      )}
+      {/* last */}
+      {pageIndex !== numPages && (
+        <PaginationItem>
+          <PaginationLink last onClick={() => onPaginate(numPages)} />
+        </PaginationItem>
+      )}
+    </Pagination>
+  );
+}
+
+export default React.memo(Paginator);
diff --git a/frontend/src/components/common/gb-ui/components/table/filters.jsx b/frontend/src/components/common/gb-ui/components/table/filters.jsx
new file mode 100644
index 000000000..193aeaa70
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/filters.jsx
@@ -0,0 +1,168 @@
+/* eslint-disable */
+import React from "react";
+import classnames from "classnames";
+import { Input } from "reactstrap";
+
+// Define a default UI for filtering
+function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
+  // state
+  const [inputValue, setInputValue] = React.useState(
+    filterValue !== undefined ? filterValue : "",
+  );
+
+  return (
+    <Input
+      id={`datatable-select-${id}`}
+      type="search"
+      bsSize="sm"
+      className={classnames(
+        {
+          "bg-body border-secondary": filterValue,
+        },
+        "input-dark",
+      )}
+      value={inputValue}
+      onChange={(e) => {
+        setInputValue(e.target.value);
+        // if the user clears the filter
+        if (e.target.value.length === 0) {
+          // Set undefined to remove the filter entirely
+          setFilter(undefined);
+        }
+      }}
+      onKeyDown={(e) => {
+        // the request is sent if the user presses 'enter'
+        if (e.key === "Enter") {
+          setFilter(e.target.value || undefined);
+        }
+      }}
+      onKeyUp={(e) => {
+        // if the user presses 'backspace'
+        // the request is sent if input value is empty
+        if (e.key === "Backspace" && e.target.value.length === 0) {
+          // Set undefined to remove the filter entirely
+          setFilter(undefined);
+        }
+      }}
+      onPaste={(e) => {
+        // if copy-paste is done, the request is sent automatically
+        setFilter(e.clipboardData.getData("text/plain") || undefined);
+      }}
+      placeholder="Search keyword.."
+    />
+  );
+}
+
+// This is a custom filter UI for selecting
+// a unique option from a list
+function SelectColumnFilter({
+  column: {
+    filterValue,
+    setFilter,
+    preFilteredRows,
+    id,
+    filterValueAccessorFn,
+  },
+}) {
+  // Calculate the options for filtering
+  // using the preFilteredRows
+  const options = React.useMemo(() => {
+    const optionsSet = new Set();
+    preFilteredRows.forEach((row) => {
+      const value = row.values[id];
+      if (value) {
+        const optVal = filterValueAccessorFn
+          ? filterValueAccessorFn(value)
+          : value;
+        if (Array.isArray(optVal)) {
+          optVal.forEach((v) => optionsSet.add(v));
+        } else {
+          optionsSet.add(optVal);
+        }
+      }
+    });
+    return [...optionsSet.values()];
+  }, [id, preFilteredRows, filterValueAccessorFn]);
+
+  // Set undefined to remove the filter entirely
+  const onChange = (e) => setFilter(e.target.value || undefined);
+
+  // Render a multi-select box
+  return (
+    <Input
+      id={`datatable-select-${id}`}
+      type="select"
+      className="custom-select-sm input-dark"
+      value={filterValue}
+      onChange={onChange}
+    >
+      <option value="">All</option>
+      {options.sort().map((value) => (
+        <option key={`datatable-select-${id}-option-${value}`} value={value}>
+          {value}
+        </option>
+      ))}
+    </Input>
+  );
+}
+
+// This is a custom filter UI for selecting
+// a unique option from a list
+function SelectOptionsFilter({
+  column: { filterValue, setFilter, id, selectOptions },
+}) {
+  const onChange = (e) => setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
+
+  return (
+    <Input
+      id={`datatable-select-${id}`}
+      type="select"
+      className={classnames(
+        {
+          "bg-body border-secondary": filterValue,
+        },
+        "custom-select-sm input-dark",
+      )}
+      value={filterValue}
+      onChange={onChange}
+    >
+      <option value="">All</option>
+      {selectOptions.map((value) => (
+        <option key={`datatable-select-${id}-option-${value}`} value={value}>
+          {value}
+        </option>
+      ))}
+    </Input>
+  );
+}
+
+// This is a custom filter UI that uses a
+// slider to set the filter value between a column's
+// min and max values
+function SliderColumnFilter({
+  column: { filterValue, setFilter, preFilteredRows, id },
+}) {
+  const [min, max] = [0, 100];
+  const value = filterValue || min;
+
+  return (
+    <div className="mx-auto text-center">
+      <div className="text-info">{`>=${value}`}</div>
+      <Input
+        id={`datatable-select-${id}`}
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        onChange={(e) => setFilter(parseInt(e.target.value, 10))}
+      />
+    </div>
+  );
+}
+
+export {
+  DefaultColumnFilter,
+  SelectOptionsFilter,
+  SelectColumnFilter,
+  SliderColumnFilter,
+};
diff --git a/frontend/src/components/common/gb-ui/components/table/hooks.jsx b/frontend/src/components/common/gb-ui/components/table/hooks.jsx
new file mode 100644
index 000000000..84038960f
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/hooks.jsx
@@ -0,0 +1,145 @@
+import React from "react";
+import { FormGroup, Input, UncontrolledTooltip, Label } from "reactstrap";
+
+import ArrowToggleIcon from "../icons/ArrowToggleIcon";
+
+// hooks factory
+
+export const createUseRowDisabledHook = (hocProps) => (hooks) => {
+  // HoC Props
+  const { objectName, onChange } = hocProps;
+
+  hooks.getRowProps.push((props, { row }) => [
+    props,
+    {
+      title: !row.original?.enabled
+        ? `This ${objectName} was marked as disabled by it's owner.`
+        : "",
+      className: !row.original?.enabled ? "row-disabled" : "",
+    },
+  ]);
+
+  hooks.visibleColumns.push((columns, { instance }) => [
+    {
+      id: "data-table-disabled_row_action",
+      width: 80,
+      Cell: ({ row: { original: obj } }) =>
+        obj?.permissions?.edit ? (
+          <>
+            <FormGroup switch id={`toggle-enable-switch__${obj?.id}`}>
+              <Input
+                type="checkbox"
+                name="ruleEnabled"
+                className={obj?.enabled ? "row-disabled" : ""}
+                defaultChecked={obj?.enabled}
+                onChange={async () => {
+                  await onChange(obj?.id, !obj?.enabled);
+                  instance?.customProps?.refetchTableData();
+                }}
+              />
+            </FormGroup>
+            <UncontrolledTooltip target={`toggle-enable-switch__${obj?.id}`}>
+              {obj?.enabled ? "Disable" : "Enable"} {objectName}
+            </UncontrolledTooltip>
+          </>
+        ) : null,
+    },
+    ...columns,
+  ]);
+};
+
+export const rowSelectHooks = [
+  (hooks) => {
+    hooks.visibleColumns.push((columns, { instance: { isRowSelectable } }) => [
+      {
+        id: "data-table_row-selection",
+        maxWidth: 80,
+        // The header can use the table's getToggleAllRowsSelectedProps method
+        // to render a checkbox
+        Header: ({ selectedFlatRows, toggleRowSelected, page: pageRows }) => {
+          const selectableRows = React.useMemo(
+            () => pageRows.filter((r) => isRowSelectable(r)),
+            [pageRows],
+          );
+          const onChange = React.useCallback(
+            (e) =>
+              e.target.checked
+                ? selectableRows.forEach((r) => toggleRowSelected(r.id, true))
+                : selectableRows.forEach((r) => toggleRowSelected(r.id, false)),
+            [selectableRows, toggleRowSelected],
+          );
+          return selectableRows.length ? (
+            <div
+              className="d-flex flex-column"
+              title="Toggle selection for all row objects you have ownership for"
+            >
+              <h6 className="text-muted">{selectedFlatRows.length} selected</h6>
+              <IndeterminateCheckbox
+                id="data-table-checkbox_header"
+                indeterminate={
+                  selectedFlatRows.length > 0 &&
+                  selectableRows.length !== selectedFlatRows.length
+                }
+                checked={
+                  selectableRows.length > 0 &&
+                  selectableRows.length === selectedFlatRows.length
+                }
+                onChange={onChange}
+              />
+            </div>
+          ) : null;
+        },
+        Cell: ({ row }) =>
+          isRowSelectable(row) ? (
+            <IndeterminateCheckbox
+              id={`data-table-checkbox_cell_${row.id}`}
+              {...row.getToggleRowSelectedProps()}
+            />
+          ) : null,
+      },
+      ...columns,
+    ]);
+  },
+];
+
+export const rowExpandHooks = [
+  (hooks) => {
+    hooks.visibleColumns.push((columns) => [
+      {
+        Header: () => null,
+        id: "data-table-row_expand",
+        maxWidth: 60,
+        Cell: ({ row }) => (
+          // Use Cell to render an expander for each row.
+          // We can use the getToggleRowExpandedProps prop-getter
+          // to build the expander.
+          <span {...row.getToggleRowExpandedProps()}>
+            <ArrowToggleIcon isExpanded={!!row?.isExpanded} />
+          </span>
+        ),
+      },
+      ...columns,
+    ]);
+  },
+];
+
+// components
+
+const IndeterminateCheckbox = React.forwardRef(
+  ({ id, indeterminate, label, ...rest }, ref) => {
+    const defaultRef = React.useRef();
+    const resolvedRef = ref || defaultRef;
+
+    React.useEffect(() => {
+      if (resolvedRef?.current)
+        resolvedRef.current.indeterminate = indeterminate;
+    }, [resolvedRef, indeterminate]);
+
+    return (
+      <FormGroup check className="d-flex justify-content-center mt-2">
+        <Input id={id} type="checkbox" innerRef={resolvedRef} {...rest} />
+        {label && <Label check>{label}</Label>}
+      </FormGroup>
+    );
+  },
+);
diff --git a/frontend/src/components/common/gb-ui/components/table/queryParamsUtils.jsx b/frontend/src/components/common/gb-ui/components/table/queryParamsUtils.jsx
new file mode 100644
index 000000000..c65785ddd
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/queryParamsUtils.jsx
@@ -0,0 +1,56 @@
+/* This functions are used to serialize and deserialize URL params, to values for ordering and filter
+
+Data in tables about filter and ordering are saved as object, but in the url is a string.
+These funcitions helps to convert from obj to string and vice versa
+*/
+
+/**
+ * This function is used to convert filters from obj to string
+ * @argument {Array<Object>} filters
+ * @return {Object}
+ */
+const serializeFilterParams = (filters) =>
+  filters.reduce((acc, { id, value }) => ({ ...acc, [id]: value }), {});
+
+/**
+ * This function is used to convert filters from string to obj
+ * @argument {Object} filters
+ * @return {Array<Object>}
+ */
+const deserializeFilterParams = (filters) =>
+  Array.from(
+    Object.entries(filters).map(([filterKey, filterValue]) => ({
+      id: filterKey,
+      value: filterValue,
+    })),
+  );
+
+/**
+ * This function is used to convert ordering key from obj to string
+ * @argument {Array<Object>} sortBy
+ * @return {String}
+ */
+const serializeSortByParams = (sortBy) =>
+  sortBy
+    .map(({ id, desc }) => `${desc ? "-" : ""}${id.split("-")[0]}`)
+    .join(",");
+
+/**
+ * This function is used to convert ordering key from string to obj
+ * @argument {String} filters
+ * @return {Array<Object>}
+ */
+const deserializeSortByParams = (sortByStr) =>
+  Array.from(
+    sortByStr.split(",").map((str) => ({
+      id: str.charAt(0) === "-" ? str.slice(1) : str,
+      desc: str.charAt(0) === "-",
+    })),
+  );
+
+export {
+  serializeFilterParams,
+  deserializeFilterParams,
+  serializeSortByParams,
+  deserializeSortByParams,
+};
diff --git a/frontend/src/components/common/gb-ui/components/table/useDataTable.jsx b/frontend/src/components/common/gb-ui/components/table/useDataTable.jsx
new file mode 100644
index 000000000..ac67256a4
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/useDataTable.jsx
@@ -0,0 +1,89 @@
+import React from "react";
+import useAxios from "axios-hooks";
+
+import LoadingBoundary from "../containers/LoadingBoundary";
+
+import DataTable from "./DataTable";
+import useQueryParamsTable from "./useQueryParamsTable";
+
+const defaultPageParams = {
+  page_size: 10,
+  page: 1,
+};
+const defaultModifier = (responseData) => responseData?.results || [];
+
+/**
+ * Suitable for fetching data from a server. Thus, pagination/filtering/sorting in most cases should be handled by the server too.
+ * @param url URL to use to make the request.
+ * @param params Query parameters that will be added to the request, which can be overridden by table filters.
+ * @param toPassTableProps Table properties (ex. columns, config, initialState, SubComponent) that will be used for creating the table component.
+ * @param modifier Function that defines in which field of the response the data that will be used is located.
+ */
+function useDataTable(
+  { url, params: defaultParams },
+  toPassTableProps,
+  modifier = defaultModifier,
+) {
+  // hook
+  const [params, tableInitialState, tableStateReducer] = useQueryParamsTable();
+
+  // state
+  const [initialLoading, setInitialLoading] = React.useState(true);
+
+  // API
+  const [{ data, loading, error }, refetch] = useAxios({
+    url,
+    params: { ...defaultPageParams, ...defaultParams, ...params },
+  });
+
+  // side-effects
+  // initial table loading (spinner)
+  React.useEffect(() => {
+    if (!loading) setInitialLoading(false);
+  }, [loading]);
+  // https://it.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
+
+  // https://it.reactjs.org/docs/hooks-reference.html#usememo
+  const tableNode = React.useMemo(
+    () => (
+      <LoadingBoundary
+        loading={initialLoading}
+        error={error}
+        render={() => (
+          <DataTable
+            data={data ? modifier(data) : []}
+            pageCount={data?.total_pages || 1}
+            stateReducer={tableStateReducer}
+            initialState={tableInitialState}
+            manualPagination
+            manualFilters
+            manualSortBy
+            customProps={{ refetchTableData: refetch }}
+            {...toPassTableProps}
+          />
+        )}
+      />
+    ),
+    [
+      data,
+      modifier,
+      initialLoading,
+      error,
+      tableInitialState,
+      tableStateReducer,
+      refetch,
+      toPassTableProps,
+    ],
+  );
+
+  return [
+    data,
+    tableNode,
+    refetch,
+    tableStateReducer,
+    loading,
+    tableInitialState,
+  ];
+}
+
+export default useDataTable;
diff --git a/frontend/src/components/common/gb-ui/components/table/useQueryParamsTable.jsx b/frontend/src/components/common/gb-ui/components/table/useQueryParamsTable.jsx
new file mode 100644
index 000000000..109c727e4
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/useQueryParamsTable.jsx
@@ -0,0 +1,98 @@
+import React from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+import useAsyncDebounce from "../../hooks/useAsyncDebounce";
+
+import {
+  serializeFilterParams,
+  deserializeFilterParams,
+  serializeSortByParams,
+  deserializeSortByParams,
+} from "./queryParamsUtils";
+
+/**
+  This function automatically defines the params to be used in the request based on the filters set in the table and the URL search parameters.
+*/
+function useQueryParamsTable() {
+  // react-router
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // Set the params based on url search params, if no parameter is set in the url it returns an empty dict
+  const [params, setParams] = React.useState(() => {
+    const urlParams = Object.fromEntries(new URLSearchParams(location.search));
+    return Object.keys(urlParams).length ? urlParams : {};
+  });
+
+  // The table state changes every time the url params are modified, therefore every time some filters are modified
+  const tableInitialState = React.useMemo(() => {
+    const { ordering, page, ...filters } = params;
+    return {
+      pageIndex: page ? parseInt(page - 1, 10) : 0,
+      sortBy: ordering ? deserializeSortByParams(ordering) : [],
+      filters: filters ? deserializeFilterParams(filters) : [],
+    };
+  }, [params]);
+
+  // Update query params to match table state and navigate to a page with the new params
+  React.useEffect(() => {
+    const qs = new URLSearchParams(params).toString();
+    const search = qs ? `?${qs}` : "";
+    if (search !== location.search) navigate({ search }, { replace: true });
+  }, [navigate, params, location.search]);
+
+  // callbacks
+  const onTableFilterDebounced = useAsyncDebounce(
+    (filters) =>
+      setParams(({ ordering }) => ({
+        ...(ordering ? { ordering } : {}), // only include 'ordering' key if it defined
+        ...serializeFilterParams(filters), // only serialize 'filters' field
+      })),
+    500,
+  ); // Debounce filter call for 500ms
+
+  const onTableSortDebounced = useAsyncDebounce(
+    (sortBy) =>
+      sortBy?.length
+        ? setParams(({ ordering, ...others }) => ({
+            ...others,
+            ordering: serializeSortByParams(sortBy), // override only 'ordering' key
+          }))
+        : setParams(({ ordering, ...others }) => others), // if sortBy has been reset remove the 'orgering' key
+    500,
+  ); // Debounce sortBy call for 500ms
+
+  const tableStateReducer = React.useCallback(
+    (newState, action) => {
+      const filters = newState?.filters || newState?.columnFilters || [];
+      const sortBy = newState?.sortBy || newState?.sorting || [];
+      const pageIndex =
+        typeof action?.pageIndex === "number"
+          ? action.pageIndex
+          : newState?.pageIndex || newState?.pagination?.pageIndex || 0;
+
+      switch (action.type) {
+        case "gotoPage":
+          setParams((currParams) => ({
+            ...currParams,
+            page: pageIndex + 1,
+          }));
+          break;
+        case "setFilter":
+          onTableFilterDebounced(filters);
+          break;
+        case "toggleSortBy":
+          onTableSortDebounced(sortBy);
+          break;
+        default:
+          break;
+      }
+      return newState;
+    },
+    [setParams, onTableFilterDebounced, onTableSortDebounced],
+  );
+
+  return [params, tableInitialState, tableStateReducer];
+}
+
+export default useQueryParamsTable;
diff --git a/frontend/src/components/common/gb-ui/components/table/utils.jsx b/frontend/src/components/common/gb-ui/components/table/utils.jsx
new file mode 100644
index 000000000..9580ee3d6
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/table/utils.jsx
@@ -0,0 +1,32 @@
+import { rowSelectHooks, rowExpandHooks } from "./hooks";
+
+// gotta maintain the order of these plugins
+function makeTableArgs(config) {
+  const args = [];
+  if (config?.enableExpanded) args.push(...rowExpandHooks);
+  if (config?.enableSelection) args.push(...rowSelectHooks);
+  return [...args, ...config.customHooks];
+}
+
+const defaultConfig = {
+  enableFlexLayout: true,
+  enableExpanded: false,
+  enableSortBy: true,
+  enableFilters: true,
+  enableSelection: false,
+  customHooks: [],
+};
+
+const defaultInitialState = {
+  pageIndex: 0,
+  pageSize: 10,
+  sortBy: [],
+  selectedRowIds: {},
+};
+
+const defaultColumn = {
+  // Let's set up our default Filter UI
+  Filter: () => null,
+};
+
+export { makeTableArgs, defaultConfig, defaultInitialState, defaultColumn };
diff --git a/frontend/src/components/common/gb-ui/components/time/DateHoverable.jsx b/frontend/src/components/common/gb-ui/components/time/DateHoverable.jsx
new file mode 100644
index 000000000..f0a576b76
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/time/DateHoverable.jsx
@@ -0,0 +1,76 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  ListGroup,
+  ListGroupItem,
+  UncontrolledPopover,
+  PopoverHeader,
+  PopoverBody,
+} from "reactstrap";
+import { addMinutes, format, formatDistanceToNow } from "date-fns";
+import { nanoid } from "nanoid";
+
+function DateHoverable({
+  id = undefined,
+  value,
+  className = undefined,
+  noHover = false,
+  ago = false,
+  showAgo = false,
+  format: formatProp = "PPpppp",
+  showFormat = "p PP",
+  ...rest
+}) {
+  const [utcVal, userTz, userTzVal] = React.useMemo(() => {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const d = new Date(value || null);
+    const dUTC = addMinutes(d, d.getTimezoneOffset());
+    return [format(dUTC, showFormat), tz, format(d, showFormat)];
+  }, [value, showFormat]);
+
+  const timeId = React.useMemo(() => id || `date-${nanoid(4)}`, [id]);
+
+  return (
+    <>
+      <time
+        id={timeId}
+        className={classnames("date-hoverable", className)}
+        {...rest}
+      >
+        {ago
+          ? formatDistanceToNow(new Date(value || null), { addSuffix: true })
+          : format(new Date(value || null), formatProp)}
+      </time>
+      {!noHover && (
+        <UncontrolledPopover target={timeId} trigger="hover">
+          <PopoverHeader className="p-1">
+            <small>Time Conversion</small>
+          </PopoverHeader>
+          <PopoverBody className="bg-body">
+            <ListGroup flush>
+              {showAgo && (
+                <ListGroupItem className="p-1 d-flex justify-content-between align-items-center text-light">
+                  <b className="mx-auto text-secondary">
+                    {formatDistanceToNow(new Date(value || null), {
+                      addSuffix: true,
+                    })}
+                  </b>
+                </ListGroupItem>
+              )}
+              <ListGroupItem className="p-1 d-flex justify-content-between align-items-center text-light">
+                <b>UTC</b>
+                <span className="ms-4">{utcVal}</span>
+              </ListGroupItem>
+              <ListGroupItem className="p-1 d-flex justify-content-between align-items-center text-light">
+                <b>{userTz} · Your computer</b>
+                <span className="ms-4">{userTzVal}</span>
+              </ListGroupItem>
+            </ListGroup>
+          </PopoverBody>
+        </UncontrolledPopover>
+      )}
+    </>
+  );
+}
+
+export default React.memo(DateHoverable);
diff --git a/frontend/src/components/common/gb-ui/components/time/ElasticTimePicker.jsx b/frontend/src/components/common/gb-ui/components/time/ElasticTimePicker.jsx
new file mode 100644
index 000000000..e26930212
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/components/time/ElasticTimePicker.jsx
@@ -0,0 +1,92 @@
+import React from "react";
+import { Button, ButtonGroup } from "reactstrap";
+import { IoInfinite } from "react-icons/io5";
+import { sub } from "date-fns";
+
+// constants
+const INFINITY = "inf";
+const TIME_INTERVALS = {
+  "6h": { hours: 6 },
+  "24h": { hours: 24 },
+  "7d": { days: 7 },
+  "3M": { months: 3 },
+  "6M": { months: 6 },
+  "2Y": { years: 2 },
+};
+
+function intervalToTime(ti) {
+  const fromTime = sub(new Date(), TIME_INTERVALS[ti]);
+  fromTime.setMinutes(0);
+  fromTime.setSeconds(0);
+  fromTime.setMilliseconds(0);
+  return fromTime.toISOString();
+}
+
+/**
+ * @type {component}
+ * @param props
+ * @example
+ *
+ * ```js
+ *   <ElasticTimePicker
+ *       size="sm"
+ *       onChoose={(ti) => console.log(ti)}
+ *   />
+ * ```
+ */
+function ElasticTimePicker({
+  onChange,
+  size = "sm",
+  defaultSelected = "24h",
+  intervals = Object.keys(TIME_INTERVALS),
+  showInfinity = false,
+  ...rest
+}) {
+  // state
+  const [selected, setSelected] = React.useState(defaultSelected);
+
+  // callbacks
+  const onClick = React.useCallback(
+    (e) => setSelected(e.currentTarget.value),
+    [setSelected],
+  );
+
+  // effects
+  React.useEffect(() => {
+    if (selected === INFINITY) {
+      onChange(selected, null);
+    } else {
+      onChange(selected, intervalToTime(selected));
+    }
+  }, [onChange, selected]);
+
+  return (
+    <ButtonGroup className={`btn-group-${size}`} {...rest}>
+      {intervals.map((ti) => (
+        <Button
+          key={ti}
+          className="fw-bold"
+          color="secondary"
+          value={ti}
+          onClick={onClick}
+          active={selected === ti}
+        >
+          {ti}
+        </Button>
+      ))}
+      {showInfinity && (
+        <Button
+          className="fw-bold"
+          color="secondary"
+          value={INFINITY}
+          onClick={onClick}
+          active={selected === INFINITY}
+        >
+          <IoInfinite />
+        </Button>
+      )}
+    </ButtonGroup>
+  );
+}
+
+export default ElasticTimePicker;
diff --git a/frontend/src/components/common/gb-ui/hooks/index.js b/frontend/src/components/common/gb-ui/hooks/index.js
new file mode 100644
index 000000000..ec17bcb15
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/hooks/index.js
@@ -0,0 +1,2 @@
+export { default as useAsyncDebounce } from "./useAsyncDebounce";
+export { default as useAxiosComponentLoader } from "./useAxiosComponentLoader";
diff --git a/frontend/src/components/common/gb-ui/hooks/useAsyncDebounce.jsx b/frontend/src/components/common/gb-ui/hooks/useAsyncDebounce.jsx
new file mode 100644
index 000000000..1e8a12690
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/hooks/useAsyncDebounce.jsx
@@ -0,0 +1,57 @@
+import React from "react";
+
+/**
+ * Debounces a callback and returns a promise that resolves with the latest call result.
+ * This mirrors the behavior commonly relied on from react-table's useAsyncDebounce helper.
+ */
+export default function useAsyncDebounce(defaultFn, defaultWait = 0) {
+  const fnRef = React.useRef(defaultFn);
+  const waitRef = React.useRef(defaultWait);
+  const debounceRef = React.useRef({});
+
+  React.useEffect(() => {
+    fnRef.current = defaultFn;
+  }, [defaultFn]);
+
+  React.useEffect(() => {
+    waitRef.current = defaultWait;
+  }, [defaultWait]);
+
+  React.useEffect(
+    () => () => {
+      if (debounceRef.current.timeout) {
+        clearTimeout(debounceRef.current.timeout);
+      }
+    },
+    [],
+  );
+
+  return React.useCallback((...args) => {
+    if (!debounceRef.current.promise) {
+      debounceRef.current.promise = new Promise((resolve, reject) => {
+        debounceRef.current.resolve = resolve;
+        debounceRef.current.reject = reject;
+      });
+    }
+
+    if (debounceRef.current.timeout) {
+      clearTimeout(debounceRef.current.timeout);
+    }
+
+    debounceRef.current.timeout = setTimeout(async () => {
+      delete debounceRef.current.timeout;
+
+      try {
+        debounceRef.current.resolve(await fnRef.current(...args));
+      } catch (error) {
+        debounceRef.current.reject(error);
+      } finally {
+        delete debounceRef.current.promise;
+        delete debounceRef.current.resolve;
+        delete debounceRef.current.reject;
+      }
+    }, waitRef.current);
+
+    return debounceRef.current.promise;
+  }, []);
+}
diff --git a/frontend/src/components/common/gb-ui/hooks/useAxiosComponentLoader.jsx b/frontend/src/components/common/gb-ui/hooks/useAxiosComponentLoader.jsx
new file mode 100644
index 000000000..25d4c9c44
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/hooks/useAxiosComponentLoader.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+import axios from "axios";
+
+import Loader from "../components/containers/Loader";
+
+const noop = (x) => x;
+
+function useAxiosComponentLoader(axiosOptions, modifier = noop) {
+  // Depend on primitive keys, not axiosOptions itself: callers commonly pass a
+  // fresh object literal every render, which would otherwise retrigger the
+  // effect unboundedly.
+  const isUrlString = typeof axiosOptions === "string";
+  const url = isUrlString ? axiosOptions : axiosOptions?.url;
+  const method = isUrlString ? undefined : axiosOptions?.method;
+  const paramsKey = isUrlString
+    ? ""
+    : JSON.stringify(axiosOptions?.params ?? null);
+
+  // Ref lets the effect read the full, latest options (headers, data, etc.)
+  // without pulling the unstable object reference into the dep list.
+  const axiosOptionsRef = React.useRef(axiosOptions);
+  axiosOptionsRef.current = axiosOptions;
+
+  const [requestKey, setRequestKey] = React.useState(0);
+  const [data, setData] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+
+  React.useEffect(() => {
+    const controller = new AbortController();
+    let isMounted = true;
+
+    setLoading(true);
+    setError(null);
+
+    const latestOptions = axiosOptionsRef.current;
+    const requestConfig =
+      typeof latestOptions === "string"
+        ? { url: latestOptions }
+        : latestOptions;
+
+    axios({
+      ...requestConfig,
+      signal: controller.signal,
+    })
+      .then((response) => {
+        if (!isMounted) return;
+
+        setData(response.data);
+      })
+      .catch((requestError) => {
+        if (!isMounted || requestError?.code === "ERR_CANCELED") return;
+
+        setError(requestError);
+      })
+      .finally(() => {
+        if (isMounted) setLoading(false);
+      });
+
+    return () => {
+      isMounted = false;
+      controller.abort();
+    };
+  }, [isUrlString, url, method, paramsKey, requestKey]);
+
+  const refetch = React.useCallback(() => {
+    setRequestKey((currentKey) => currentKey + 1);
+  }, []);
+
+  // memo
+  const MyLoader = React.useMemo(
+    // eslint-disable-next-line func-names
+    () =>
+      function (props) {
+        return <Loader loading={loading} error={error} {...props} />;
+      },
+    [loading, error],
+  );
+
+  const modifiedData = React.useMemo(
+    () => (data ? modifier(data) : []),
+    [data, modifier],
+  );
+
+  return [modifiedData, MyLoader, refetch];
+}
+
+export default useAxiosComponentLoader;
diff --git a/frontend/src/components/common/gb-ui/index.js b/frontend/src/components/common/gb-ui/index.js
new file mode 100644
index 000000000..f701268dc
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/index.js
@@ -0,0 +1,28 @@
+export { default as ErrorAlert } from "./components/alerts/ErrorAlert";
+export { default as CopyToClipboardButton } from "./components/buttons/CopyToClipboardButton";
+export { default as IconButton } from "./components/buttons/IconButton";
+export { default as PopupFormButton } from "./components/buttons/PopupFormButton";
+export { default as ScrollToTopButton } from "./components/buttons/ScrollToTopButton";
+export { default as ContentSection } from "./components/containers/ContentSection";
+export { default as Loader } from "./components/containers/Loader";
+export { default as LoadingBoundary } from "./components/containers/LoadingBoundary";
+export { default as SmallInfoCard } from "./components/containers/SmallInfoCard";
+export { default as Select } from "./components/form/Select";
+export { default as BooleanIcon } from "./components/icons/BooleanIcon";
+export { default as FallBackLoading } from "./components/misc/FallbackLoading";
+export { default as Toaster } from "./components/misc/Toaster";
+export { default as UserBubble } from "./components/misc/UserBubble";
+export { confirm } from "./components/modals/ConfirmModal";
+export { default as DropdownNavLink } from "./components/nav/DropdownNavLink";
+export { default as NavLink } from "./components/nav/NavLink";
+export { default as useDataTable } from "./components/table/useDataTable";
+export { default as DateHoverable } from "./components/time/DateHoverable";
+export { default as ElasticTimePicker } from "./components/time/ElasticTimePicker";
+export { default as useAxiosComponentLoader } from "./hooks/useAxiosComponentLoader";
+export { default as useTimePickerStore } from "./stores/useTimePickerStore";
+export { default as useToastr } from "./stores/useToastr";
+export { getRandomColorsArray } from "./utils";
+
+import useToastr from "./stores/useToastr";
+
+export const addToast = (...args) => useToastr.getState().addToast(...args);
diff --git a/frontend/src/components/common/gb-ui/stores/index.js b/frontend/src/components/common/gb-ui/stores/index.js
new file mode 100644
index 000000000..dd704d8b3
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/stores/index.js
@@ -0,0 +1,2 @@
+export { default as useTimePickerStore } from "./useTimePickerStore";
+export { default as useToastr } from "./useToastr";
diff --git a/frontend/src/components/common/gb-ui/stores/useTimePickerStore.jsx b/frontend/src/components/common/gb-ui/stores/useTimePickerStore.jsx
new file mode 100644
index 000000000..a93186cdb
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/stores/useTimePickerStore.jsx
@@ -0,0 +1,38 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+// constants
+const DEFAULT_RANGE_DATEFORMAT_MAP = {
+  "6h": "dd/MM, HH:mm",
+  "24h": "dd/MM, HH:mm",
+  "7d": "do MMM",
+  "3M": "MMM/yyyy",
+  "6M": "MMM/yyyy",
+  "1Y": "yyyy",
+  "2Y": "yyyy",
+};
+
+// store
+const useTimePickerStore = create(
+  persist(
+    (set, get) => ({
+      RANGE_DATEFORMAT_MAP: DEFAULT_RANGE_DATEFORMAT_MAP,
+      range: "24h",
+      fromTimeIsoStr: null,
+      dateFormat: DEFAULT_RANGE_DATEFORMAT_MAP["24h"],
+      onTimeIntervalChange: (range, fromTimeIsoStr) => {
+        set({
+          range,
+          fromTimeIsoStr,
+          dateFormat: get().RANGE_DATEFORMAT_MAP[range],
+        });
+      },
+    }),
+    {
+      name: "gbUI-useTimePickerStore", // unique name
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
+
+export default useTimePickerStore;
diff --git a/frontend/src/components/common/gb-ui/stores/useToastr.jsx b/frontend/src/components/common/gb-ui/stores/useToastr.jsx
new file mode 100644
index 000000000..1cac6a67a
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/stores/useToastr.jsx
@@ -0,0 +1,40 @@
+import { create } from "zustand";
+import { nanoid } from "nanoid";
+
+const toastTimeouts = new Map();
+
+// store
+const useToastr = create((set, get) => ({
+  toasts: [],
+  addToast: (header, body, color, showToggle = false, timeout = 4000) => {
+    const payload = {
+      id: `toast-${color}-${nanoid(4)}`,
+      header,
+      body,
+      color,
+      showToggle,
+      timeout,
+    };
+    const timeoutId = setTimeout(() => {
+      get().removeToast(payload.id);
+      toastTimeouts.delete(payload.id);
+    }, timeout);
+    toastTimeouts.set(payload.id, timeoutId);
+    set(({ toasts }) => ({
+      toasts: [...toasts, payload],
+    }));
+  },
+  removeToast: (id) => {
+    const timeoutId = toastTimeouts.get(id);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      toastTimeouts.delete(id);
+    }
+
+    set(({ toasts }) => ({
+      toasts: toasts.filter((t) => t.id !== id),
+    }));
+  },
+}));
+
+export default useToastr;
diff --git a/frontend/src/components/common/gb-ui/styles/_alerts.scss b/frontend/src/components/common/gb-ui/styles/_alerts.scss
new file mode 100644
index 000000000..592bbbbd6
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_alerts.scss
@@ -0,0 +1,56 @@
+/* alerts */
+
+.alert {
+  color: $light;
+  opacity: 0.8;
+  filter: alpha(opacity=30);
+  border-radius: 3px;
+  box-shadow: 0 9px 18px $body-bg;
+  box-sizing: border-box;
+}
+
+.alert-success {
+  background-color: shade-color($success, 30%);
+  border: 1px solid $success;
+}
+
+.alert-info {
+  background-color: shade-color($info, 45%);
+  border: 1px solid $info;
+}
+
+.alert-secondary {
+  background-color: shade-color($secondary, 45%);
+  border: 1px solid $secondary;
+}
+
+.alert-warning {
+  background-color: shade-color($warning, 40%);
+  border: 1px solid $warning;
+}
+
+.alert-danger {
+  background-color: shade-color($danger, 50%);
+  border: 1px solid $danger;
+}
+
+.alert-light {
+  color: $color-contrast-dark;
+  background-color: $light;
+  border: 1px solid $darker;
+}
+
+.alert-dark {
+  background-color: shade-color($dark, 5%);
+  border: 2px solid $dark;
+}
+
+.alert-accent-1 {
+  background-color: shade-color($accent-1, 20%);
+  border: 1px solid $accent-1;
+}
+
+.alert-accent-2 {
+  background-color: shade-color($accent-2, 35%);
+  border: 1px solid $accent-2;
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_button.scss b/frontend/src/components/common/gb-ui/styles/_button.scss
new file mode 100644
index 000000000..e13cc745f
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_button.scss
@@ -0,0 +1,59 @@
+// buttons
+
+.btn-darker {
+  &:not(.disabled) {
+    &:hover {
+      color: $primary !important;
+      text-decoration: none;
+    }
+  }
+}
+
+.btn-info,
+.btn-outline-info {
+  &:not(.disabled) {
+    &:hover {
+      color: $light !important;
+      text-decoration: none;
+    }
+  }
+}
+
+.btn-group-xs > .btn,
+.btn-xs {
+  padding: 0.25rem 0.4rem;
+  font-size: 0.875rem;
+  line-height: 0.75;
+  border-radius: 0.2rem;
+}
+
+.btn-gradient {
+  @extend .text-gradient;
+  &:hover {
+    color: $gradient-color-1 !important;
+    border: 1px $gradient-color-1 solid !important;
+  }
+  &:focus {
+    border: 1px $gradient-color-1 solid !important;
+  }
+}
+
+.btn-outline-gradient {
+  @extend .btn-gradient;
+  border: 1px $gradient-color-1 solid !important;
+}
+
+#ScrollToTopButton {
+  z-index: 9999 !important;
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1rem;
+  animation: fadeIn 700ms ease-in-out 1s both;
+  cursor: pointer;
+}
+
+a.btn {
+  &:hover {
+    color: inherit !important;
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_card.scss b/frontend/src/components/common/gb-ui/styles/_card.scss
new file mode 100644
index 000000000..6989330cb
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_card.scss
@@ -0,0 +1,32 @@
+// Card
+
+.card {
+  padding: 0;
+  border: 1px solid $secondary;
+  &.flat {
+    border-radius: 0 !important;
+    .card-header {
+      border-radius: 0 !important;
+      border: none !important;
+    }
+  }
+  &.shadow {
+    box-shadow: 1px 2px 4px 0 $primary !important;
+  }
+  .card-header {
+    padding: 0.4rem;
+    background-color: $tertiary;
+  }
+  .card-body {
+    padding: 0.8rem;
+  }
+  .card-footer {
+    font-size: $font-size-base * 0.9;
+    border-top-color: $light;
+    border-bottom-right-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+    &:last-child {
+      @include border-bottom-radius(0);
+    }
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_chat.scss b/frontend/src/components/common/gb-ui/styles/_chat.scss
new file mode 100644
index 000000000..09eb25717
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_chat.scss
@@ -0,0 +1,65 @@
+.chat-bubble {
+  display: inline-block;
+  flex-basis: auto;
+  flex-shrink: 0;
+  flex-grow: 0;
+  align-self: flex-start;
+  width: $chat-bubble-width;
+  padding: $chat-bubble-padding;
+  font-size: $chat-bubble-font-size;
+  font-weight: $font-weight-bold;
+  color: $color-contrast-light;
+  text-align: center;
+  text-transform: uppercase;
+  word-break: keep-all;
+  white-space: nowrap;
+  background: $chat-bubble-color;
+  border-radius: 50%;
+
+  &.chat-bubble-sm {
+    width: $chat-bubble-width-sm;
+    padding: $chat-bubble-padding-sm;
+    font-size: $chat-bubble-font-size-sm;
+
+    &.avatar-success {
+      height: $chat-bubble-width-sm;
+      padding: 0;
+    }
+  }
+
+  &.chat-bubble-xs {
+    width: $chat-bubble-width-xs;
+    padding: $chat-bubble-padding-xs;
+    font-size: $chat-bubble-font-size-xs;
+
+    &.avatar-success {
+      height: $chat-bubble-width-xs;
+      padding: 0;
+    }
+  }
+
+  &.avatar-success {
+    height: $chat-bubble-width;
+    padding: 0;
+  }
+
+  @include media-breakpoint-down(md) {
+    width: $chat-bubble-width * 0.75;
+    font-size: $chat-bubble-font-size * 0.75;
+
+    &.chat-bubble-sm {
+      font-size: $chat-bubble-font-size-sm * 0.75;
+    }
+  }
+
+  &.highlight {
+    background: $primary;
+  }
+}
+
+.navbar {
+  .chat-bubble {
+    color: $navbar-dark-bg;
+    background: $chat-nav-bubble-color;
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_form.scss b/frontend/src/components/common/gb-ui/styles/_form.scss
new file mode 100644
index 000000000..3f62e8b54
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_form.scss
@@ -0,0 +1,83 @@
+/* form */
+
+label.required:after {
+  content: "  *";
+  color: red;
+}
+
+.input-dark {
+  background-color: $darker !important;
+  border-color: $dark !important;
+  .custom-file-label {
+    background-color: $darker;
+    border-color: $dark;
+  }
+}
+
+textarea {
+  display: block;
+  background-color: $pre-bg;
+  color: $pre-color;
+  border: 2px solid $tertiary;
+  min-height: 100px;
+}
+
+.form-control-xs {
+  width: 75px;
+  height: 33px;
+}
+
+/* Weight range slider */
+
+input[type="range"] {
+  &.color-range-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    border-radius: 4px;
+    height: 5px;
+    background: linear-gradient(
+      to right,
+      var(--slider-fill-color, $range-fill-color),
+      var(--slider-fill-color, $range-fill-color)
+        var(--fill-percentage, $range-fill-percentage),
+      grey var(--fill-percentage, $range-fill-percentage),
+      grey
+    );
+  }
+  // Chrome
+  &::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    overflow: hidden;
+    height: 12px;
+    background: transparent;
+    border: none;
+  }
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    cursor: ew-resize;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: var(--slider-fill-color, $range-fill-color);
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+    margin-top: 0px;
+  }
+
+  // Firefox
+  &::-moz-range-progress {
+    background: var(--slider-fill-color, $range-fill-color);
+  }
+  &::-moz-range-track {
+    height: 2.5px;
+    background-color: grey;
+    border-radius: 4px;
+  }
+  &::-moz-range-thumb {
+    cursor: ew-resize;
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: var(--slider-fill-color, $range-fill-color);
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_list.scss b/frontend/src/components/common/gb-ui/styles/_list.scss
new file mode 100644
index 000000000..e73f86a26
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_list.scss
@@ -0,0 +1,78 @@
+// list
+
+ul.custom-list-style {
+  list-style: none;
+  li::before {
+    content: "→";
+    color: $gradient-color-1;
+    margin-left: -1.2em;
+    margin-right: 0.4em;
+  }
+}
+
+.list-group {
+  border-radius: 0;
+
+  // striped
+  &.striped {
+    .list-group-item {
+      &:nth-child(even) {
+        background-color: $table-accent-bg;
+      }
+    }
+  }
+
+  // flush
+  &.list-group-flush {
+    .list-group-item {
+      &:hover {
+        background-color: $dark-bluish-grey;
+      }
+    }
+  }
+
+  // horizontal
+  &.list-group-horizontal {
+    align-items: center;
+    .list-group-item {
+      flex-basis: 100%;
+      padding: 0.3rem !important;
+      margin-left: 2rem;
+      border: none !important;
+      border-radius: 0 !important;
+      &:hover {
+        background-color: $dark-bluish-grey;
+      }
+      textarea {
+        width: 100%;
+      }
+    }
+  }
+
+  // key-value object list
+  &.kv-list {
+    &.sm {
+      font-size: 0.85rem;
+    }
+    .list-group-item {
+      padding: 0;
+      display: flex;
+      justify-content: flex-start;
+      align-items: stretch;
+      flex-wrap: wrap;
+      border: 1px solid $darker;
+      font-weight: bold;
+      .list-key {
+        padding: 1rem 0.5rem;
+        border-right: 2px solid $darker;
+        background-color: shade-color($dark-bluish-grey, 6%);
+      }
+      .list-value {
+        padding: 1rem 0.5rem;
+        &:hover {
+          background-color: $dark-bluish-grey;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_nav.scss b/frontend/src/components/common/gb-ui/styles/_nav.scss
new file mode 100644
index 000000000..814f5e54c
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_nav.scss
@@ -0,0 +1,76 @@
+/* nav */
+
+.nav-tabs {
+  background-color: $navbar-dark-bg;
+  .nav-item {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.navbar-dark {
+  background-color: $navbar-dark-bg;
+  // only bottom shadow, useful for dark theme
+  box-shadow: $box-shadow-sm;
+  @include border-bottom-radius($border-radius-lg);
+
+  .navbar-nav {
+    .nav-item {
+      @include media-breakpoint-down(md) {
+        .dropdown-menu {
+          background-color: tint-color($navbar-dark-bg, 2.5%) !important;
+          box-shadow: none;
+
+          .dropdown-item,
+          .dropdown-header {
+            text-align: center;
+          }
+        }
+      }
+      .nav-link.active {
+        color: $nav-tabs-link-active-color !important;
+      }
+    }
+  }
+}
+
+/* links */
+
+.link {
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline !important;
+  }
+}
+
+.link-primary {
+  @extend .link;
+  color: $primary !important;
+}
+
+.link-muted {
+  @extend .link;
+  color: $text-muted-color !important;
+  &:hover {
+    color: $text-muted-color !important;
+  }
+}
+
+.link-ul-primary {
+  @extend .link-primary;
+  text-decoration: underline;
+  &:hover {
+    color: $primary !important;
+    text-decoration: none !important;
+  }
+}
+
+.link-ul-muted {
+  @extend .link-muted;
+  text-decoration: underline;
+  &:hover {
+    color: $text-muted-color !important;
+    text-decoration: none !important;
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_overwrite.scss b/frontend/src/components/common/gb-ui/styles/_overwrite.scss
new file mode 100644
index 000000000..8e0bf77d8
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_overwrite.scss
@@ -0,0 +1,38 @@
+// bg
+.bg-gradient {
+  background: $gradient !important;
+  color: $dark !important;
+}
+
+.bg-dark-blue {
+  background-color: $dark-bluish-grey !important;
+}
+
+.bg-light-blue {
+  background-color: $light-bluish-grey !important;
+}
+
+.bg-body {
+  background-color: $body-bg !important;
+}
+
+// border
+.border-gradient {
+  border-image: $gradient !important;
+  border-image-slice: 1;
+  border-style: solid;
+}
+
+// content-section
+.content-section {
+  background: $dark;
+  padding: 10px 20px;
+  border: 1px solid $dark;
+  box-shadow: 0 9px 18px 0 rgba(0, 0, 0, 0.25);
+  box-sizing: border-box;
+  border-radius: 3px;
+  margin-bottom: 20px;
+  .shadow {
+    box-shadow: 0 9px 18px 0 $darker;
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_recharts.scss b/frontend/src/components/common/gb-ui/styles/_recharts.scss
new file mode 100644
index 000000000..bf9d6ebbc
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_recharts.scss
@@ -0,0 +1,34 @@
+.recharts-reference-line {
+  stroke: $white;
+  stroke-opacity: 0.75;
+
+  .recharts-label {
+    stroke: $color-contrast-light;
+    stroke-opacity: 0.75;
+  }
+}
+
+.recharts-tooltip-wrapper {
+  .tooltip {
+    position: relative;
+  }
+}
+
+.recharts-tooltip-cursor {
+  fill: rgba($white, 0.1);
+}
+
+.recharts-cartesian-axis-tick-value {
+  &.recharts-text {
+    font-size: $rc-axis-font-size;
+    fill: $color-contrast-light;
+  }
+}
+
+svg.recharts-surface {
+  overflow: visible;
+}
+
+.recharts-text.recharts-polar-angle-axis-tick-value tspan {
+  fill: $secondary !important;
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_spinners.scss b/frontend/src/components/common/gb-ui/styles/_spinners.scss
new file mode 100644
index 000000000..31d8b3435
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_spinners.scss
@@ -0,0 +1,28 @@
+// Ripple effect
+// this mixes default grow and border styles
+.spinner-ripple {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: text-bottom;
+  border: $spinner-border-width solid currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  animation: spinner-grow 0.75s linear infinite;
+}
+
+.spinner-ripple-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+  border-width: $spinner-border-width-sm;
+}
+
+@each $size, $width in $spinner-sizes {
+  .spinner-ripple-#{$size},
+  .spinner-border#{$size},
+  .spinner-grow-#{$size} {
+    width: $width;
+    height: $width;
+    border-width: map-get($spinner-borders-widths, $size);
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_table.scss b/frontend/src/components/common/gb-ui/styles/_table.scss
new file mode 100644
index 000000000..a7a19dd89
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_table.scss
@@ -0,0 +1,72 @@
+/* table */
+
+table {
+  thead {
+    position: sticky;
+    inset-block-start: 0; /* "top" */
+    tr.head-row {
+      background-color: $darker;
+      th {
+        border-width: $table-border-width;
+        /* for no outer borders in thead
+        &:first-child,
+        &:last-child {
+          border-left: none !important;
+          border-right: none !important;
+        }
+        */
+      }
+    }
+  }
+  th,
+  td {
+    // force borders
+    border: $table-border-width solid $table-border-color !important;
+    border-collapse: collapse;
+  }
+}
+
+// table row selection
+
+tr {
+  background-color: $table-bg;
+  &.row-selected {
+    background-color: $tertiary !important;
+    td:first-child {
+      background-color: $info !important;
+    }
+  }
+  &.row-disabled {
+    background-color: $table-row-disabled-bg !important;
+  }
+}
+
+.custom-checkbox {
+  text-align: center !important;
+  :checked ~ .custom-control-label {
+    &::before {
+      background-color: $dark-bluish-grey;
+      border-color: $dark-bluish-grey;
+    }
+  }
+}
+
+// Pagination
+
+.table-paginator {
+  @extend .d-flex;
+  @extend .justify-content-sm-start;
+  @extend .justify-content-lg-center;
+  position: sticky;
+  inset-block-end: 0; /* "bottom" */
+  margin-top: 1rem;
+}
+
+.pagination {
+  @extend .content-section;
+  background-color: $pagination-bg !important;
+  padding: 0.5rem !important;
+  .page-link {
+    border-radius: 0 !important;
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_text.scss b/frontend/src/components/common/gb-ui/styles/_text.scss
new file mode 100644
index 000000000..ab60ae589
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_text.scss
@@ -0,0 +1,69 @@
+// Text
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $light;
+}
+
+pre {
+  color: $color-contrast-light;
+  background: $pre-bg;
+}
+
+mark {
+  background: $dark-bluish-grey;
+  color: $sev-high;
+}
+
+.text-larger {
+  font-size: 95%;
+}
+
+.text-large {
+  font-size: 150%;
+}
+
+.text-ul {
+  text-decoration: underline;
+}
+
+.blurry-text {
+  cursor: default;
+  user-select: none;
+  color: transparent;
+  text-shadow: 0 0 10px #fff;
+}
+
+.text-gradient {
+  color: $gradient-color-1 !important;
+  background: $gradient;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+a.text-gradient,
+.btn.text-gradient {
+  &:hover {
+    opacity: 0.7;
+    color: $gradient-color-1 !important;
+    -webkit-text-fill-color: $gradient-color-1 !important;
+  }
+}
+
+.standout {
+  font-weight: $btn-font-weight;
+  font-family: $btn-font-family;
+}
+
+// line spacing
+
+@for $i from 1 through 5 {
+  ._0#{$i} {
+    letter-spacing: unquote($string: "0." + $i + "em");
+  }
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_toast.scss b/frontend/src/components/common/gb-ui/styles/_toast.scss
new file mode 100644
index 000000000..62fda7c57
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_toast.scss
@@ -0,0 +1,8 @@
+// Toast
+
+.toast {
+  position: relative !important;
+  min-width: 400px !important;
+  max-width: 650px !important;
+  z-index: 9999 !important;
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_utils.scss b/frontend/src/components/common/gb-ui/styles/_utils.scss
new file mode 100644
index 000000000..fe84469c2
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_utils.scss
@@ -0,0 +1,111 @@
+/* utils */
+
+.glow {
+  box-shadow: 4px 1px 8px 4px $light-bluish-grey !important;
+}
+
+.glow-gradient {
+  box-shadow: 1px 0 6px 1px $gradient-color-1 !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+.w-33 {
+  width: 33% !important;
+}
+
+.center {
+  display: grid;
+  place-items: center;
+}
+
+.vertical-center {
+  min-height: 75%;
+  min-height: 75vh;
+
+  display: flex;
+  align-items: center;
+}
+
+.pointer {
+  cursor: pointer !important;
+}
+
+.cursor-normal {
+  cursor: unset !important;
+}
+
+.user-select-none {
+  user-select: none;
+}
+
+.d-flex-custom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.d-flex-start-start {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+}
+
+.d-flex-start-center {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.d-flex-start-end {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.d-flex-between-start {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.d-flex-between-center {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.d-flex-between-end {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.d-flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.d-flex-end-center {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.disabled {
+  cursor: not-allowed !important;
+}
+
+.waiting {
+  cursor: wait;
+}
diff --git a/frontend/src/components/common/gb-ui/styles/_variables.scss b/frontend/src/components/common/gb-ui/styles/_variables.scss
new file mode 100644
index 000000000..ba19b8262
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/_variables.scss
@@ -0,0 +1,278 @@
+$enable-shadows: true;
+
+$min-contrast-ratio: 2.5;
+
+// font
+$font-family-sans-serif: "Montserrat", sans-serif;
+$font-family-monospace: "Montserrat", monospace;
+$font-size-base: 1rem;
+
+// color palette
+$sev-critical: #ee4544;
+$sev-high: #d98e16;
+$sev-medium: #feb607;
+$sev-low: #b5ba66;
+$sev-very-low: #808a8f;
+
+$primary: #00adef;
+$secondary: #5593ab;
+$tertiary: #2f515e;
+$dark: #0b2b38;
+$success: #02cc56;
+$danger: $sev-critical;
+$warning: $sev-medium;
+$info: #45b8e6;
+$light: rgba(255, 255, 255, 0.85);
+$error: #ce1b28;
+$accent-1: #4f1885;
+$accent-2: #9441b7;
+$gray: $sev-very-low;
+
+$darker: #000f12;
+$light-bluish-grey: #00485a;
+$dark-bluish-grey: #1a2d35;
+$link-color: $light;
+
+$color-contrast-dark: #010101;
+$color-contrast-light: #fefefe;
+$text-muted-color: rgb(108, 117, 125);
+
+$gradient-color-1: #e55d87;
+$gradient-color-2: $secondary;
+$gradient: linear-gradient(to right, $gradient-color-1, $gradient-color-2);
+
+$custom-colors: (
+  "accent": $sev-high,
+  "accent-1": $accent-1,
+  "accent-2": $accent-2,
+  "tertiary": $tertiary,
+  "advisory": $sev-low,
+  "gray": $gray,
+  "darker": $darker,
+);
+
+$scrollbar-size: 8px;
+
+$component-active-bg: $primary;
+
+$sizes: (
+  33: 33.333333%,
+  66: 66.666667%,
+);
+
+// generic shadows
+$box-shadow-sm: 0 0.125rem 0.375rem 0.125rem #030405;
+$box-shadow: 0 0.25rem 0.65rem 0.2rem #030405;
+$box-shadow-lg: 0 0.5rem 1rem 0.25rem #030405;
+
+// border radius
+$border-radius: 0.75rem;
+$border-radius-lg: 1.5 * $border-radius;
+$border-radius-sm: 0.75 * $border-radius;
+
+$reduced-border-radius: 0.4rem;
+$reduced-border-radius-lg: 1.5 * $reduced-border-radius;
+$reduced-border-radius-sm: 0.75 * $reduced-border-radius;
+
+// badge
+$badge-border-radius: $reduced-border-radius;
+
+// body
+$body-bg: #00161f;
+$body-color: $color-contrast-light;
+
+// dropdown
+$dropdown-bg: tint-color($body-bg, 10%);
+$dropdown-box-shadow: $box-shadow;
+
+$dropdown-link-color: $secondary;
+$dropdown-link-hover-color: $dark;
+$dropdown-link-hover-bg: $secondary;
+
+// list group
+$list-group-bg: transparent;
+$list-group-hover-bg: $secondary;
+
+// tooltip
+$tooltip-color: $color-contrast-light;
+$tooltip-border-radius: 0;
+
+// jumbotron
+$jumbotron-bg: rgba($dark-bluish-grey, 0.85);
+$jumbotron-color: $info;
+
+// card
+$card-shadow: $box-shadow-sm;
+$card-bg: $dark;
+
+// alert
+$alert-item-dft-height: 3.375rem;
+$alert-time-width: 8rem;
+$alert-customer-width: 13.5rem;
+$alert-events-width: 6rem;
+$alert-module-width: 6rem;
+$alert-check-width: 2.375rem;
+$alert-filters-height: 75vh;
+
+// close
+$close-color: $color-contrast-dark;
+
+// modal
+$modal-dialog-margin-y-sm-up: 1rem;
+$modal-inner-padding: 0.75rem;
+$modal-content-bg: $dark;
+$modal-content-box-shadow-sm-up: $box-shadow-lg;
+$modal-header-border-color: $tertiary;
+$modal-header-background: rgba(255, 255, 255, 0.1);
+$modal-header-padding-y: 0.5rem;
+$modal-header-padding-x: 0.75rem;
+
+// tooltip
+$tooltip-border-radius: $reduced-border-radius;
+
+// code
+$code-font-size: 92.5%;
+$code-color: $sev-high;
+$pre-bg: rgba(#427285, 0.25);
+$pre-color: $color-contrast-light;
+
+// popover
+$popover-bg: tint-color($body-bg, 5%);
+$popover-header-bg: $tertiary;
+$popover-border-color: $dark;
+$popover-box-shadow: $box-shadow-lg;
+$popover-border-radius: $reduced-border-radius-lg;
+$popover-max-width: 1500px;
+
+// spinners
+$spinner-sizes: (
+  "sm": 1rem,
+  "md": 3rem,
+  "lg": 4rem,
+  "xl": 5rem,
+);
+$spinner-borders-widths: (
+  "sm": 0.2em,
+  "md": 0.3em,
+  "lg": 0.5em,
+  "xl": 0.75em,
+);
+
+// progress
+$progress-bg: rgba(255, 255, 255, 0.85);
+$progress-border-radius: $reduced-border-radius;
+
+// toast
+$toast-color: tint-color($color-contrast-dark, 20%);
+
+// recharts
+$rc-axis-font-size: 0.75rem;
+
+// datetime
+$datetime-border-color: $sev-very-low;
+$datetime-boder: 1px solid $datetime-border-color;
+$datetime-picker-width: 250px;
+$datetime-today-marker-width: math.div($font-size-base, 2);
+$datetime-active-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+$datetime-active-color: #428bca;
+
+// input
+$input-bg: $tertiary;
+$input-disabled-bg: rgba(255, 255, 255, 0.3);
+$input-color: $color-contrast-light;
+$input-group-addon-bg: rgba(255, 255, 255, 0.25);
+$input-btn-focus-color: rgba($primary, 0.25);
+
+$input-border-radius: $reduced-border-radius;
+$input-border-radius-lg: $reduced-border-radius-lg;
+$input-border-radius-sm: $reduced-border-radius-sm;
+
+$custom-select-indicator-color: $color-contrast-light;
+$custom-select-border-radius: $reduced-border-radius;
+$custom-select-disabled-color: $input-color;
+$custom-select-disabled-bg: $input-disabled-bg;
+
+$custom-control-indicator-size: 1.25rem;
+$custom-checkbox-indicator-border-radius: 0.25rem;
+
+$custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba(#fff, 0.1);
+
+$custom-file-button-bg: $dark;
+
+$range-fill-color: $info;
+$range-fill-percentage: 0%;
+
+// button
+$btn-font-weight: 600;
+$btn-box-shadow: none;
+$btn-border-radius: $reduced-border-radius;
+$btn-border-radius-lg: $reduced-border-radius-lg;
+$btn-border-radius-sm: $reduced-border-radius-sm;
+
+$hr-border-color: rgba(#fff, 0.1);
+
+// nav
+$nav-tabs-link-active-border-color: transparent transparent transparent;
+$nav-tabs-link-color: $color-contrast-light;
+$nav-tabs-link-active-color: $info;
+$nav-tabs-link-active-bg: $dark;
+$nav-tabs-link-hover-border-color: transparent transparent transparent;
+$nav-tabs-border-width: 2px;
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-radius: 0;
+
+// navbar
+$navbar-dark-bg: #001d24;
+$navbar-padding-y: 0.25rem;
+$navbar-dark-color: $light;
+$nav-link-disabled-color: #6c757d;
+$navbar-crosshair-height: 0.5rem;
+
+// table
+$table-bg: $body-bg;
+$table-color: $light;
+$table-hover-bg: $color-contrast-dark;
+$table-accent-bg: rgba($light-bluish-grey, 0.1);
+$table-row-disabled-bg: shade-color($dark-bluish-grey, 6.5%);
+$table-border-color: $dark;
+$table-border-width: 1px;
+
+// pagination
+$pagination-active-color: $info;
+$pagination-hover-color: $info;
+$pagination-disabled-color: $text-muted-color;
+$pagination-bg: $darker;
+$pagination-active-bg: tint-color($pagination-bg, 9%);
+$pagination-hover-bg: tint-color($pagination-bg, 6%);
+$pagination-disabled-bg: $pagination-bg;
+$pagination-border-width: 0;
+$pagination-border-radius-sm: 0;
+$pagination-border-radius-lg: 0;
+$pagination-border-color: $light;
+$pagination-line-height: 0.75rem;
+
+// chat
+$chat-color: #ebebeb;
+$chat-bubble-color: #427285;
+$chat-bubble-font-size: $font-size-base * 1.25;
+$chat-bubble-padding: $font-size-base * 0.5 $font-size-base * 0.25;
+$chat-bubble-width: $font-size-base * 3;
+$chat-bubble-font-size-sm: $font-size-base;
+$chat-bubble-padding-sm: $font-size-base * 0.4 $font-size-base * 0.2;
+$chat-bubble-width-sm: math.div($chat-bubble-width, 1.25);
+$chat-bubble-font-size-xs: $font-size-base * 0.66;
+$chat-bubble-padding-xs: $chat-bubble-font-size-xs * 0.4
+  $chat-bubble-font-size-xs * 0.2;
+$chat-bubble-width-xs: math.div($chat-bubble-font-size-xs * 3, 1.25);
+$chat-nav-bubble-color: linear-gradient(
+  315deg,
+  rgba(255, 255, 255, 0.6) 0%,
+  #fff 100%
+);
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
+// merge colors (Workaround BUG Bootstrap 5.1 https://github.com/twbs/bootstrap/issues/34756)
+// bug should be fixed after 5.2.0 so we removed the code after the following line
+$theme-colors: map.merge($theme-colors, $custom-colors);
diff --git a/frontend/src/components/common/gb-ui/styles/root.scss b/frontend/src/components/common/gb-ui/styles/root.scss
new file mode 100644
index 000000000..f729d2f0e
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/styles/root.scss
@@ -0,0 +1,91 @@
+@use "sass:math";
+@use "sass:color";
+@use "sass:map";
+
+// theme
+@import "variables";
+@import "bootstrap/scss/bootstrap";
+@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600|Roboto:700");
+
+// local files
+@import "_alerts";
+@import "_button";
+@import "_card";
+@import "_chat";
+@import "_form";
+@import "_list";
+@import "_nav";
+@import "_overwrite";
+@import "_recharts";
+@import "_spinners";
+@import "_table";
+@import "_text";
+@import "_toast";
+@import "_utils";
+
+/* custom properties */
+
+:root {
+  --primary: #{$primary} !important;
+  --secondary: #{$secondary} !important;
+  --tertiary: #{$tertiary} !important;
+  --dark: #{$dark} !important;
+  --light: #{$light} !important;
+  --info: #{$info} !important;
+  --body-bg: #{$body-bg} !important;
+  --gray: #{$gray} !important;
+  --dark-bluish-grey: #{$dark-bluish-grey} !important;
+  --light-bluish-grey: #{$light-bluish-grey} !important;
+  --accent: #{$sev-high} !important;
+  --accent-2: #{$accent-2} !important;
+  --accent-1: #{$accent-1} !important;
+  --tertiary: #{$tertiary} !important;
+  --advisory: #{$sev-low} !important;
+  --gray: #{$gray} !important;
+  --darker: #{$darker} !important;
+}
+
+/* custom SCSS */
+
+body {
+  margin-top: 5rem;
+  line-height: 1.65;
+  font-size: 12pt;
+}
+
+footer {
+  z-index: 9999 !important;
+}
+
+hr {
+  background-color: $light;
+}
+
+a:hover {
+  color: $primary !important;
+  text-decoration: none !important;
+}
+
+// date
+
+.date-hoverable {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  cursor: pointer;
+  &:hover {
+    background-color: $dark;
+    color: $info;
+  }
+}
+
+// style scrollbar for webkit (mostly Chrome)
+::-webkit-scrollbar {
+  width: $scrollbar-size;
+  height: $scrollbar-size;
+  background: rgba($gray-800, 0.8);
+}
+
+::-webkit-scrollbar-thumb {
+  background: $gray-100;
+  border-radius: math.div($scrollbar-size, 2);
+}
diff --git a/frontend/src/components/common/gb-ui/utils/index.js b/frontend/src/components/common/gb-ui/utils/index.js
new file mode 100644
index 000000000..c9c17c76b
--- /dev/null
+++ b/frontend/src/components/common/gb-ui/utils/index.js
@@ -0,0 +1,61 @@
+export function isObject(obj) {
+  return typeof obj === "object" && obj !== null;
+}
+
+export function isEmptyObject(obj) {
+  return !Object.keys(obj).length;
+}
+
+export function isFunction(func) {
+  return typeof func === "function";
+}
+
+export function getObjectSubset(obj, keys) {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => keys.includes(key)),
+  );
+}
+
+function randomHSL() {
+  return `hsla(${~~(360 * Math.random())},70%,70%,0.8)`;
+}
+
+function getRandomColor() {
+  return `#${(0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6)}`;
+}
+
+export function getRandomColorsArray(len = 10, hsl = false) {
+  return Array.from({ length: len }, hsl ? randomHSL : getRandomColor);
+}
+
+export function readFileAsync(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result);
+    };
+    reader.onerror = reject;
+    reader.readAsBinaryString(file);
+  });
+}
+
+export function objToString(obj) {
+  const stringify = (key, val) =>
+    typeof val === "object"
+      ? Object.entries(val).map(([k, v]) =>
+          stringify(Number.isNaN(k) ? `${key}.${k}` : `${key}[${k}]`, v),
+        )
+      : `${key}: ${val}`;
+  return Object.entries(obj).reduce(
+    (str, [key, val]) => `${str}${stringify(key, val)}\n`,
+    "",
+  );
+}
+
+export function uniq(arr) {
+  return arr.filter((x, i, a) => a.indexOf(x) === i);
+}
+
+export function diff(arr1, arr2, accesorFn = (d) => d) {
+  return arr1.filter((x) => arr2.indexOf(accesorFn(x)) < 0);
+}
diff --git a/frontend/src/components/dashboard/Dashboard.jsx b/frontend/src/components/dashboard/Dashboard.jsx
index c94511cc6..5d58bf39f 100644
--- a/frontend/src/components/dashboard/Dashboard.jsx
+++ b/frontend/src/components/dashboard/Dashboard.jsx
@@ -4,7 +4,7 @@ import { Container } from "reactstrap";
 import { MdSettings } from "react-icons/md";
 import { useShallow } from "zustand/shallow";
 
-import { ElasticTimePicker, useTimePickerStore } from "@greedybear/gb-ui";
+import { ElasticTimePicker, useTimePickerStore } from "../common/gb-ui/index";
 
 import DashboardRenderer from "./DashboardRenderer";
 import useDashboardStore from "../../stores/useDashboardStore";
diff --git a/frontend/src/components/dashboard/EnrichmentLookup.jsx b/frontend/src/components/dashboard/EnrichmentLookup.jsx
index f1d8a0c16..880164e6c 100644
--- a/frontend/src/components/dashboard/EnrichmentLookup.jsx
+++ b/frontend/src/components/dashboard/EnrichmentLookup.jsx
@@ -14,7 +14,7 @@ import { MdSearch } from "react-icons/md";
 import { Form, Formik } from "formik";
 import axios from "axios";
 
-import { addToast, BooleanIcon } from "@greedybear/gb-ui";
+import { addToast, BooleanIcon } from "../common/gb-ui/index";
 import { ENRICHMENT_URI } from "../../constants/api";
 import { useAuthStore } from "../../stores";
 import { AUTHENTICATION_STATUSES } from "../../constants";
diff --git a/frontend/src/components/dashboard/WidgetWrapper.jsx b/frontend/src/components/dashboard/WidgetWrapper.jsx
index 25535c2d0..005607fdf 100644
--- a/frontend/src/components/dashboard/WidgetWrapper.jsx
+++ b/frontend/src/components/dashboard/WidgetWrapper.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { SmallInfoCard } from "@greedybear/gb-ui";
+import { SmallInfoCard } from "../common/gb-ui/index";
 
 class WidgetErrorBoundary extends React.Component {
   constructor(props) {
diff --git a/frontend/src/components/dashboard/utils/charts.jsx b/frontend/src/components/dashboard/utils/charts.jsx
index 80e4a87d2..f991dc3a7 100644
--- a/frontend/src/components/dashboard/utils/charts.jsx
+++ b/frontend/src/components/dashboard/utils/charts.jsx
@@ -13,7 +13,10 @@ import {
   ComposedChart,
 } from "recharts";
 import { format } from "date-fns";
-import { getRandomColorsArray, useTimePickerStore } from "@greedybear/gb-ui";
+import {
+  getRandomColorsArray,
+  useTimePickerStore,
+} from "../../common/gb-ui/index";
 import {
   FEEDS_STATISTICS_SOURCES_URI,
   FEEDS_STATISTICS_DOWNLOADS_URI,
diff --git a/frontend/src/components/feeds/Feeds.jsx b/frontend/src/components/feeds/Feeds.jsx
index f61f02f33..6c3bc7717 100644
--- a/frontend/src/components/feeds/Feeds.jsx
+++ b/frontend/src/components/feeds/Feeds.jsx
@@ -10,7 +10,7 @@ import {
   Select,
   useAxiosComponentLoader,
   useDataTable,
-} from "@greedybear/gb-ui";
+} from "../common/gb-ui/index";
 import { MultiSelectDropdown } from "./MultiSelectDropdown";
 import { Form, Formik } from "formik";
 import { feedsTableColumns } from "./tableColumns";
diff --git a/frontend/src/components/feeds/FeedsTrending.jsx b/frontend/src/components/feeds/FeedsTrending.jsx
index 1face1a22..dcbad6640 100644
--- a/frontend/src/components/feeds/FeedsTrending.jsx
+++ b/frontend/src/components/feeds/FeedsTrending.jsx
@@ -13,7 +13,7 @@ import {
   ContentSection,
   Select,
   useAxiosComponentLoader,
-} from "@greedybear/gb-ui";
+} from "../common/gb-ui/index";
 
 import { FEEDS_TRENDING_URI, HONEYPOT_URI } from "../../constants/api";
 import { MultiSelectDropdown } from "./MultiSelectDropdown";
diff --git a/frontend/src/components/feeds/tableColumns.jsx b/frontend/src/components/feeds/tableColumns.jsx
index 84eb96750..df3257d08 100644
--- a/frontend/src/components/feeds/tableColumns.jsx
+++ b/frontend/src/components/feeds/tableColumns.jsx
@@ -1,6 +1,6 @@
 import { UncontrolledPopover, PopoverBody } from "reactstrap";
 import { FiInfo } from "react-icons/fi";
-import { BooleanIcon, IconButton } from "@greedybear/gb-ui";
+import { BooleanIcon, IconButton } from "../common/gb-ui/index";
 import { INTELOWL_URL, PUBLIC_URL } from "../../constants/environment";
 
 const formatInteger = (value) => {
diff --git a/frontend/src/components/home/Home.jsx b/frontend/src/components/home/Home.jsx
index 81d48ed40..d7f26fbe7 100644
--- a/frontend/src/components/home/Home.jsx
+++ b/frontend/src/components/home/Home.jsx
@@ -3,7 +3,7 @@ import "./Home.scss";
 import React from "react";
 import { Container } from "reactstrap";
 
-import { ContentSection } from "@greedybear/gb-ui";
+import { ContentSection } from "../common/gb-ui/index";
 
 import { PUBLIC_URL, VERSION } from "../../constants/environment";
 import { NewsWidget } from "./NewsWidget";
diff --git a/frontend/src/components/home/NewsWidget.jsx b/frontend/src/components/home/NewsWidget.jsx
index 0756006b5..d968350c0 100644
--- a/frontend/src/components/home/NewsWidget.jsx
+++ b/frontend/src/components/home/NewsWidget.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ContentSection } from "@greedybear/gb-ui";
+import { ContentSection } from "../common/gb-ui/index";
 import { Spinner } from "reactstrap";
 import { GREEDYBEAR_NEWS_URL } from "../../constants/api";
 export const MAX_NEWS_ITEMS = 3;
diff --git a/frontend/src/components/me/changepassword/ChangePassword.jsx b/frontend/src/components/me/changepassword/ChangePassword.jsx
index b77ddf889..9a8e81752 100644
--- a/frontend/src/components/me/changepassword/ChangePassword.jsx
+++ b/frontend/src/components/me/changepassword/ChangePassword.jsx
@@ -10,7 +10,7 @@ import {
 import { Form, Formik } from "formik";
 import { useTitle } from "react-use";
 
-import { ContentSection } from "@greedybear/gb-ui";
+import { ContentSection } from "../../common/gb-ui/index";
 
 import { useAuthStore } from "../../../stores";
 import {
diff --git a/frontend/src/components/me/sessions/APIaccess.jsx b/frontend/src/components/me/sessions/APIaccess.jsx
index 178ce2376..8924b4e59 100644
--- a/frontend/src/components/me/sessions/APIaccess.jsx
+++ b/frontend/src/components/me/sessions/APIaccess.jsx
@@ -12,7 +12,7 @@ import {
   CopyToClipboardButton,
   useAxiosComponentLoader,
   confirm,
-} from "@greedybear/gb-ui";
+} from "../../common/gb-ui/index";
 
 import { createNewToken, deleteToken } from "./api";
 import { APIACCESS_BASE_URI } from "../../../constants/api";
diff --git a/frontend/src/components/me/sessions/SessionList.jsx b/frontend/src/components/me/sessions/SessionList.jsx
index 2d4560b1b..65dbe034c 100644
--- a/frontend/src/components/me/sessions/SessionList.jsx
+++ b/frontend/src/components/me/sessions/SessionList.jsx
@@ -8,7 +8,7 @@ import {
   DateHoverable,
   useAxiosComponentLoader,
   confirm,
-} from "@greedybear/gb-ui";
+} from "../../common/gb-ui/index";
 
 import { deleteOtherSessions, deleteTokenById } from "./api";
 import { SESSIONS_BASE_URI } from "../../../constants/api";
diff --git a/frontend/src/components/me/sessions/Sessions.jsx b/frontend/src/components/me/sessions/Sessions.jsx
index 0ec0a500d..66e9307bc 100644
--- a/frontend/src/components/me/sessions/Sessions.jsx
+++ b/frontend/src/components/me/sessions/Sessions.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Alert, Container, Row } from "reactstrap";
 
-import { ContentSection } from "@greedybear/gb-ui";
+import { ContentSection } from "../../common/gb-ui/index";
 
 import SessionsList from "./SessionList";
 import APIAccess from "./APIaccess";
diff --git a/frontend/src/components/me/sessions/api.js b/frontend/src/components/me/sessions/api.js
index b6f88b20b..7c86feaed 100644
--- a/frontend/src/components/me/sessions/api.js
+++ b/frontend/src/components/me/sessions/api.js
@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../../common/gb-ui/index";
 
 import { APIACCESS_BASE_URI, SESSIONS_BASE_URI } from "../../../constants/api";
 
diff --git a/frontend/src/hooks/useWidgetData.js b/frontend/src/hooks/useWidgetData.js
index 52a0d1352..c8cab8286 100644
--- a/frontend/src/hooks/useWidgetData.js
+++ b/frontend/src/hooks/useWidgetData.js
@@ -1,6 +1,6 @@
 import React from "react";
 import axios from "axios";
-import { useTimePickerStore } from "@greedybear/gb-ui";
+import { useTimePickerStore } from "../components/common/gb-ui/index";
 
 /**
  * Map<cacheKey, { data: any, ts: number }>
diff --git a/frontend/src/layouts/AppFooter.jsx b/frontend/src/layouts/AppFooter.jsx
index a58ff37f9..159579252 100644
--- a/frontend/src/layouts/AppFooter.jsx
+++ b/frontend/src/layouts/AppFooter.jsx
@@ -2,7 +2,11 @@ import React from "react";
 import { Row, Col, Container } from "reactstrap";
 import { FaXTwitter, FaGithub, FaLinkedin } from "react-icons/fa6";
 
-import { ScrollToTopButton, Toaster, useToastr } from "@greedybear/gb-ui";
+import {
+  ScrollToTopButton,
+  Toaster,
+  useToastr,
+} from "../components/common/gb-ui/index";
 
 import { VERSION } from "../constants/environment";
 
diff --git a/frontend/src/layouts/AppHeader.jsx b/frontend/src/layouts/AppHeader.jsx
index 1bfded80e..a650dc4c9 100644
--- a/frontend/src/layouts/AppHeader.jsx
+++ b/frontend/src/layouts/AppHeader.jsx
@@ -17,7 +17,7 @@ import {
 import { RiBookReadFill } from "react-icons/ri";
 
 // lib
-import { NavLink } from "@greedybear/gb-ui";
+import { NavLink } from "../components/common/gb-ui/index";
 
 // constants
 import { GREEDYBEAR_DOCS_URL } from "../constants/environment";
diff --git a/frontend/src/layouts/AppMain.jsx b/frontend/src/layouts/AppMain.jsx
index 418c89db8..883ca5598 100644
--- a/frontend/src/layouts/AppMain.jsx
+++ b/frontend/src/layouts/AppMain.jsx
@@ -1,7 +1,7 @@
 import React, { Suspense } from "react";
 import { useRoutes, Outlet } from "react-router-dom";
 
-import { FallBackLoading } from "@greedybear/gb-ui";
+import { FallBackLoading } from "../components/common/gb-ui/index";
 
 // wrapper
 import withAuth from "../wrappers/withAuth";
diff --git a/frontend/src/layouts/widget/UserMenu.jsx b/frontend/src/layouts/widget/UserMenu.jsx
index 5c6651306..a71171edb 100644
--- a/frontend/src/layouts/widget/UserMenu.jsx
+++ b/frontend/src/layouts/widget/UserMenu.jsx
@@ -10,7 +10,10 @@ import { FiLogOut } from "react-icons/fi";
 import { IoMdKey, IoMdSettings } from "react-icons/io";
 import { MdPassword } from "react-icons/md";
 
-import { UserBubble, DropdownNavLink } from "@greedybear/gb-ui";
+import {
+  UserBubble,
+  DropdownNavLink,
+} from "../../components/common/gb-ui/index";
 
 import { useAuthStore } from "../../stores";
 
diff --git a/frontend/src/stores/useAuthStore.jsx b/frontend/src/stores/useAuthStore.jsx
index f38a8659a..2bde29d02 100644
--- a/frontend/src/stores/useAuthStore.jsx
+++ b/frontend/src/stores/useAuthStore.jsx
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { create } from "zustand";
 
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../components/common/gb-ui/index";
 
 import {
   USERACCESS_URI,
diff --git a/frontend/src/stores/useDashboardStore.js b/frontend/src/stores/useDashboardStore.js
index 1f32ab9c8..05e085633 100644
--- a/frontend/src/stores/useDashboardStore.js
+++ b/frontend/src/stores/useDashboardStore.js
@@ -2,7 +2,7 @@ import axios from "axios";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../components/common/gb-ui/index";
 
 import {
   WIDGET_CONFIGS,
diff --git a/frontend/src/styles/App.scss b/frontend/src/styles/App.scss
index 78399c9f2..76410f9eb 100644
--- a/frontend/src/styles/App.scss
+++ b/frontend/src/styles/App.scss
@@ -1,5 +1,5 @@
 // lib
-@import "@greedybear/gb-ui/src/styles/root";
+@import "../components/common/gb-ui/styles/root";
 
 // App.jsx
 * {
diff --git a/frontend/src/wrappers/AuthGuard.jsx b/frontend/src/wrappers/AuthGuard.jsx
index f310c47bd..c7c7d2dd9 100644
--- a/frontend/src/wrappers/AuthGuard.jsx
+++ b/frontend/src/wrappers/AuthGuard.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Navigate, useLocation } from "react-router-dom";
 
-import { FallBackLoading, addToast } from "@greedybear/gb-ui";
+import { FallBackLoading, addToast } from "../components/common/gb-ui/index";
 
 import { useAuthStore } from "../stores";
 import { AUTHENTICATION_STATUSES } from "../constants";
diff --git a/frontend/tests/components/auth/api.test.js b/frontend/tests/components/auth/api.test.js
index 42f8eed73..a810b2843 100644
--- a/frontend/tests/components/auth/api.test.js
+++ b/frontend/tests/components/auth/api.test.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../../../src/components/common/gb-ui/index";
 
 import {
   registerUser,
@@ -12,7 +12,7 @@ import {
 import { AUTH_BASE_URI } from "../../../src/constants/api";
 
 vi.mock("axios");
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../../src/components/common/gb-ui/index", () => ({
   addToast: vi.fn(),
 }));
 
diff --git a/frontend/tests/components/auth/utils/EmailForm.test.jsx b/frontend/tests/components/auth/utils/EmailForm.test.jsx
index e5e1d3b93..a9aeb2dcb 100644
--- a/frontend/tests/components/auth/utils/EmailForm.test.jsx
+++ b/frontend/tests/components/auth/utils/EmailForm.test.jsx
@@ -9,7 +9,7 @@ import axios from "axios";
 
 vi.mock("axios");
 
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../../../src/components/common/gb-ui/index", () => ({
   addToast: vi.fn(),
 }));
 
diff --git a/frontend/tests/components/dashboard/AttackOriginCountriesChart.test.jsx b/frontend/tests/components/dashboard/AttackOriginCountriesChart.test.jsx
index 6db0217bc..bc81ef4af 100644
--- a/frontend/tests/components/dashboard/AttackOriginCountriesChart.test.jsx
+++ b/frontend/tests/components/dashboard/AttackOriginCountriesChart.test.jsx
@@ -8,7 +8,7 @@ import { clearWidgetDataCache } from "../../../src/hooks/useWidgetData";
 
 vi.mock("axios");
 
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../../src/components/common/gb-ui/index", () => ({
   useTimePickerStore: () => ({ range: "7d" }),
   getRandomColorsArray: (n) => Array(n).fill("#aabbcc"),
 }));
diff --git a/frontend/tests/components/dashboard/AttackOriginMap.test.jsx b/frontend/tests/components/dashboard/AttackOriginMap.test.jsx
index 7ca60d3f2..239d77b45 100644
--- a/frontend/tests/components/dashboard/AttackOriginMap.test.jsx
+++ b/frontend/tests/components/dashboard/AttackOriginMap.test.jsx
@@ -8,7 +8,7 @@ import { clearWidgetDataCache } from "../../../src/hooks/useWidgetData";
 
 vi.mock("axios");
 
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../../src/components/common/gb-ui/index", () => ({
   useTimePickerStore: () => ({ range: "7d" }),
 }));
 
diff --git a/frontend/tests/components/dashboard/ConfigEditor.test.jsx b/frontend/tests/components/dashboard/ConfigEditor.test.jsx
index a903b03ee..f3f1e3b10 100644
--- a/frontend/tests/components/dashboard/ConfigEditor.test.jsx
+++ b/frontend/tests/components/dashboard/ConfigEditor.test.jsx
@@ -42,21 +42,24 @@ vi.mock("../../../src/components/dashboard/EnrichmentLookup", () => ({
 
 vi.mock("axios");
 
-// Mock @greedybear/gb-ui
-vi.mock("@greedybear/gb-ui", async (importOriginal) => {
-  const original = await importOriginal();
-  return {
-    ...original,
-    SmallInfoCard: ({ header, body, style, id }) => (
-      <div data-testid={`card-${id}`} style={style}>
-        <div>{header}</div>
-        <div>{body}</div>
-      </div>
-    ),
-    ElasticTimePicker: () => <div />,
-    addToast: vi.fn(),
-  };
-});
+// Mock local gb-ui
+vi.mock(
+  "../../../src/components/common/gb-ui/index",
+  async (importOriginal) => {
+    const original = await importOriginal();
+    return {
+      ...original,
+      SmallInfoCard: ({ header, body, style, id }) => (
+        <div data-testid={`card-${id}`} style={style}>
+          <div>{header}</div>
+          <div>{body}</div>
+        </div>
+      ),
+      ElasticTimePicker: () => <div />,
+      addToast: vi.fn(),
+    };
+  },
+);
 
 // Mock useAuthStore
 const mockUseAuthStore = vi.fn();
diff --git a/frontend/tests/components/dashboard/charts.test.jsx b/frontend/tests/components/dashboard/charts.test.jsx
index 9fd96b3a5..5b3625f37 100644
--- a/frontend/tests/components/dashboard/charts.test.jsx
+++ b/frontend/tests/components/dashboard/charts.test.jsx
@@ -23,7 +23,7 @@ import { clearWidgetDataCache } from "../../../src/hooks/useWidgetData";
 
 vi.mock("axios");
 
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../../src/components/common/gb-ui/index", () => ({
   useTimePickerStore: () => ({ range: "7d", dateFormat: "yyyy-MM-dd" }),
   getRandomColorsArray: (n) => Array(n).fill("#aabbcc"),
 }));
diff --git a/frontend/tests/components/feeds/Feeds.test.jsx b/frontend/tests/components/feeds/Feeds.test.jsx
index 718ee52e2..a85cdcc4d 100644
--- a/frontend/tests/components/feeds/Feeds.test.jsx
+++ b/frontend/tests/components/feeds/Feeds.test.jsx
@@ -29,66 +29,69 @@ vi.mock("../../../src/components/feeds/MultiSelectDropdown", () => {
   return { MultiSelectDropdown };
 });
 
-vi.mock("@greedybear/gb-ui", async (importOriginal) => {
-  const originalModule = await importOriginal();
-
-  const feeds = {
-    count: 1,
-    total_pages: 1,
-    results: {
-      license: "licenseTest",
-      iocs: [
-        {
-          value: "test",
-          SCANNER: true,
-          PAYLOAD_REQUEST: true,
-          first_seen: "2023-03-15",
-          last_seen: "2023-03-15",
-          attack_count: 1,
-          feed_type: "cowrie",
-        },
-      ],
-    },
-  };
-
-  const MockTableComponent = () => <div>table</div>;
-  const loader = (props) => {
-    return <originalModule.Loader loading={false} {...props} />;
-  };
-
-  // Mock the Select component to render a real select for testing
-  const Select = ({ id, choices, value, onChange, name }) => (
-    <select
-      id={id}
-      data-testid={id}
-      value={value}
-      onChange={onChange}
-      name={name}
-    >
-      {choices.map((c) => (
-        <option key={c.value} value={c.value}>
-          {c.label}
-        </option>
-      ))}
-    </select>
-  );
+vi.mock(
+  "../../../src/components/common/gb-ui/index",
+  async (importOriginal) => {
+    const originalModule = await importOriginal();
+
+    const feeds = {
+      count: 1,
+      total_pages: 1,
+      results: {
+        license: "licenseTest",
+        iocs: [
+          {
+            value: "test",
+            SCANNER: true,
+            PAYLOAD_REQUEST: true,
+            first_seen: "2023-03-15",
+            last_seen: "2023-03-15",
+            attack_count: 1,
+            feed_type: "cowrie",
+          },
+        ],
+      },
+    };
+
+    const MockTableComponent = () => <div>table</div>;
+    const loader = (props) => {
+      return <originalModule.Loader loading={false} {...props} />;
+    };
+
+    // Mock the Select component to render a real select for testing
+    const Select = ({ id, choices, value, onChange, name }) => (
+      <select
+        id={id}
+        data-testid={id}
+        value={value}
+        onChange={onChange}
+        name={name}
+      >
+        {choices.map((c) => (
+          <option key={c.value} value={c.value}>
+            {c.label}
+          </option>
+        ))}
+      </select>
+    );
 
-  return {
-    ...originalModule,
-    Select,
-    useAxiosComponentLoader: vi.fn(() => [
-      ["Honeytrap", "Glutton", "CitrixHoneypot", "Cowrie"],
-      loader,
-    ]),
-
-    useDataTable: vi.fn(() => [
-      feeds,
-      <MockTableComponent key="mock-table" />,
-      vi.fn(),
-      vi.fn(),
-    ]),
-  };
-});
+    return {
+      ...originalModule,
+      Select,
+      useAxiosComponentLoader: vi.fn(() => [
+        ["Honeytrap", "Glutton", "CitrixHoneypot", "Cowrie"],
+        loader,
+      ]),
+
+      useDataTable: vi.fn(() => [
+        feeds,
+        <MockTableComponent key="mock-table" />,
+        vi.fn(),
+        vi.fn(),
+      ]),
+    };
+  },
+);
 
 describe("Feeds component", () => {
   beforeEach(() => {
@@ -241,7 +244,8 @@ describe("Feeds component", () => {
     });
 
     test("selecting multiple types passes comma-separated feed_type to the table", async () => {
-      const { useDataTable } = await import("@greedybear/gb-ui");
+      const { useDataTable } =
+        await import("../../../src/components/common/gb-ui/index");
       const { user, feedTypeSelect } = await renderFeeds();
 
       await user.selectOptions(feedTypeSelect, ["cowrie", "honeytrap"]);
diff --git a/frontend/tests/components/feeds/FeedsTrending.test.jsx b/frontend/tests/components/feeds/FeedsTrending.test.jsx
index 4e7854012..a6bea19e0 100644
--- a/frontend/tests/components/feeds/FeedsTrending.test.jsx
+++ b/frontend/tests/components/feeds/FeedsTrending.test.jsx
@@ -4,11 +4,13 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import FeedsTrending from "../../../src/components/feeds/FeedsTrending";
-import { useAxiosComponentLoader } from "@greedybear/gb-ui";
+import { useAxiosComponentLoader } from "../../../src/components/common/gb-ui/index";
 import { FEEDS_TRENDING_URI, HONEYPOT_URI } from "../../../src/constants/api";
 
-vi.mock("@greedybear/gb-ui", async () => {
-  const actual = await vi.importActual("@greedybear/gb-ui");
+vi.mock("../../../src/components/common/gb-ui/index", async () => {
+  const actual = await vi.importActual(
+    "../../../src/components/common/gb-ui/index",
+  );
   return {
     ...actual,
     ContentSection: ({ children, className }) => (
diff --git a/frontend/tests/components/me/changepassword/ChangePassword.test.jsx b/frontend/tests/components/me/changepassword/ChangePassword.test.jsx
index bf44dea34..a46f318e0 100644
--- a/frontend/tests/components/me/changepassword/ChangePassword.test.jsx
+++ b/frontend/tests/components/me/changepassword/ChangePassword.test.jsx
@@ -8,8 +8,10 @@ import ChangePassword from "../../../../src/components/me/changepassword/ChangeP
 import { CHANGE_PASSWORD_URI } from "../../../../src/constants/api";
 
 vi.mock("axios");
-vi.mock("@greedybear/gb-ui", async () => {
-  const actual = await vi.importActual("@greedybear/gb-ui");
+vi.mock("../../../../src/components/common/gb-ui/index", async () => {
+  const actual = await vi.importActual(
+    "../../../../src/components/common/gb-ui/index",
+  );
   return {
     ...actual,
     addToast: vi.fn(),
diff --git a/frontend/tests/components/me/sessions/APIaccess.test.jsx b/frontend/tests/components/me/sessions/APIaccess.test.jsx
index 1b13e58b0..86ad1de81 100644
--- a/frontend/tests/components/me/sessions/APIaccess.test.jsx
+++ b/frontend/tests/components/me/sessions/APIaccess.test.jsx
@@ -13,7 +13,10 @@ import {
   createNewToken,
   deleteToken,
 } from "../../../../src/components/me/sessions/api";
-import { confirm, useAxiosComponentLoader } from "@greedybear/gb-ui";
+import {
+  confirm,
+  useAxiosComponentLoader,
+} from "../../../../src/components/common/gb-ui/index";
 
 vi.mock("../../../../src/components/me/sessions/api", () => ({
   createNewToken: vi.fn(),
@@ -22,8 +25,10 @@ vi.mock("../../../../src/components/me/sessions/api", () => ({
 
 const refetchMock = vi.fn();
 
-vi.mock("@greedybear/gb-ui", async () => {
-  const actual = await vi.importActual("@greedybear/gb-ui");
+vi.mock("../../../../src/components/common/gb-ui/index", async () => {
+  const actual = await vi.importActual(
+    "../../../../src/components/common/gb-ui/index",
+  );
   return {
     ...actual,
     confirm: vi.fn(),
diff --git a/frontend/tests/components/me/sessions/SessionList.test.jsx b/frontend/tests/components/me/sessions/SessionList.test.jsx
index bfee1ebc7..144df293a 100644
--- a/frontend/tests/components/me/sessions/SessionList.test.jsx
+++ b/frontend/tests/components/me/sessions/SessionList.test.jsx
@@ -8,7 +8,10 @@ import {
   deleteOtherSessions,
   deleteTokenById,
 } from "../../../../src/components/me/sessions/api";
-import { confirm, useAxiosComponentLoader } from "@greedybear/gb-ui";
+import {
+  confirm,
+  useAxiosComponentLoader,
+} from "../../../../src/components/common/gb-ui/index";
 
 vi.mock("../../../../src/components/me/sessions/api", () => ({
   deleteOtherSessions: vi.fn(),
@@ -17,8 +20,10 @@ vi.mock("../../../../src/components/me/sessions/api", () => ({
 
 const refetchMock = vi.fn();
 
-vi.mock("@greedybear/gb-ui", async () => {
-  const actual = await vi.importActual("@greedybear/gb-ui");
+vi.mock("../../../../src/components/common/gb-ui/index", async () => {
+  const actual = await vi.importActual(
+    "../../../../src/components/common/gb-ui/index",
+  );
   return {
     ...actual,
     confirm: vi.fn(),
diff --git a/frontend/tests/components/me/sessions/Sessions.test.jsx b/frontend/tests/components/me/sessions/Sessions.test.jsx
index c7cfd36a7..55df0474e 100644
--- a/frontend/tests/components/me/sessions/Sessions.test.jsx
+++ b/frontend/tests/components/me/sessions/Sessions.test.jsx
@@ -11,8 +11,8 @@ vi.mock("../../../../src/components/me/sessions/APIaccess", () => ({
   default: () => <div data-testid="mock-api-access">Mock API Access</div>,
 }));
 
-// Mock @greedybear/gb-ui components used in Sessions
-vi.mock("@greedybear/gb-ui", () => ({
+// Mock local gb-ui components used in Sessions
+vi.mock("../../../../src/components/common/gb-ui/index", () => ({
   ContentSection: ({ children, className }) => (
     <div data-testid="content-section" className={className}>
       {children}
diff --git a/frontend/tests/components/me/sessions/api.test.js b/frontend/tests/components/me/sessions/api.test.js
index bcefa95f4..4b8d1e890 100644
--- a/frontend/tests/components/me/sessions/api.test.js
+++ b/frontend/tests/components/me/sessions/api.test.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../../../../src/components/common/gb-ui/index";
 
 import {
   createNewToken,
@@ -13,7 +13,7 @@ import {
 } from "../../../../src/constants/api";
 
 vi.mock("axios");
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../../../src/components/common/gb-ui/index", () => ({
   addToast: vi.fn(),
 }));
 
diff --git a/frontend/tests/hooks/useWidgetData.test.jsx b/frontend/tests/hooks/useWidgetData.test.jsx
index 18e036831..90f462068 100644
--- a/frontend/tests/hooks/useWidgetData.test.jsx
+++ b/frontend/tests/hooks/useWidgetData.test.jsx
@@ -9,7 +9,7 @@ import useWidgetData, {
 
 vi.mock("axios");
 
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../src/components/common/gb-ui/index", () => ({
   useTimePickerStore: () => ({ range: "7d" }),
 }));
 
diff --git a/frontend/tests/stores/useAuthStore.test.jsx b/frontend/tests/stores/useAuthStore.test.jsx
index 8830c04cb..aef56ea66 100644
--- a/frontend/tests/stores/useAuthStore.test.jsx
+++ b/frontend/tests/stores/useAuthStore.test.jsx
@@ -9,10 +9,10 @@ import {
   LOGOUT_URI,
   USERACCESS_URI,
 } from "../../src/constants/api";
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../../src/components/common/gb-ui/index";
 
 vi.mock("axios");
-vi.mock("@greedybear/gb-ui", () => ({
+vi.mock("../../src/components/common/gb-ui/index", () => ({
   addToast: vi.fn(),
 }));
 
diff --git a/frontend/tests/stores/useDashboardStore.test.js b/frontend/tests/stores/useDashboardStore.test.js
index ece62219c..975b2a514 100644
--- a/frontend/tests/stores/useDashboardStore.test.js
+++ b/frontend/tests/stores/useDashboardStore.test.js
@@ -19,7 +19,7 @@ vi.mock("axios", () => ({
   default: { get: vi.fn(), put: vi.fn(), delete: vi.fn() },
 }));
 
-vi.mock("@greedybear/gb-ui", async (importOriginal) => ({
+vi.mock("../../src/components/common/gb-ui/index", async (importOriginal) => ({
   ...(await importOriginal()),
   addToast: vi.fn(),
 }));
diff --git a/frontend/tests/visual.html b/frontend/tests/visual.html
new file mode 100644
index 000000000..3c3a40716
--- /dev/null
+++ b/frontend/tests/visual.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DataTable visual fixtures</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/tests/visual/main.jsx"></script>
+  </body>
+</html>
diff --git a/frontend/tests/visual/TableVisualFixture.jsx b/frontend/tests/visual/TableVisualFixture.jsx
new file mode 100644
index 000000000..f7daaa8a2
--- /dev/null
+++ b/frontend/tests/visual/TableVisualFixture.jsx
@@ -0,0 +1,137 @@
+import { useMemo, useState } from "react";
+
+import DataTable from "../../src/components/common/gb-ui/components/table/DataTable";
+import {
+  DefaultColumnFilter,
+  SelectOptionsFilter,
+} from "../../src/components/common/gb-ui/components/table/filters";
+import { createUseRowDisabledHook } from "../../src/components/common/gb-ui/components/table/hooks";
+import BooleanIcon from "../../src/components/common/gb-ui/components/icons/BooleanIcon";
+import {
+  disabledRowFixtureRows,
+  tableFixtureRows,
+} from "./fixtures/tableFixtures";
+
+const ownerOptions = ["Atlas", "Beacon", "Cypher"];
+const initialState = { pageSize: 5 };
+
+const columns = [
+  { Header: "#", accessor: "id", Filter: () => null, maxWidth: 20 },
+  { Header: "Title", accessor: "title", Filter: DefaultColumnFilter },
+  {
+    Header: "Owner",
+    accessor: "owner",
+    Filter: SelectOptionsFilter,
+    selectOptions: ownerOptions,
+  },
+  {
+    Header: "Completed",
+    accessor: "completed",
+    Filter: SelectOptionsFilter,
+    selectOptions: ["true", "false"],
+    disableSortBy: true,
+    Cell: ({ value }) => <BooleanIcon truthy={value} />,
+    maxWidth: 40,
+  },
+];
+
+function TableDetails({ row }) {
+  return (
+    <div
+      className="p-3 text-start"
+      data-testid={`expanded-row-${row.original.id}`}
+    >
+      <strong>{`Details for ${row.original.title}`}</strong>
+      <div className="mt-2 text-muted">{`Owned by ${row.original.owner}`}</div>
+      <div className="small mt-1">{`Completed: ${row.original.completed}`}</div>
+    </div>
+  );
+}
+
+function InteractiveFixtureTable() {
+  return (
+    <section data-testid="table-visual-interactive">
+      <p className="text-muted small">
+        Deterministic local fixtures for visual regression coverage.
+      </p>
+      <DataTable
+        data={tableFixtureRows}
+        columns={columns}
+        config={{
+          enableFilters: true,
+          enableSortBy: true,
+          enableFlexLayout: true,
+          enableSelection: true,
+          enableExpanded: true,
+        }}
+        initialState={initialState}
+        isRowSelectable={(row) => !row.original.completed}
+        SubComponent={TableDetails}
+      />
+    </section>
+  );
+}
+
+function DisabledRowFixtureTable() {
+  const [rows, setRows] = useState(disabledRowFixtureRows);
+  const disabledHook = useMemo(
+    () =>
+      createUseRowDisabledHook({
+        objectName: "rule",
+        onChange: async (id, enabled) => {
+          setRows((currentRows) =>
+            currentRows.map((row) =>
+              row.id === id ? { ...row, enabled } : row,
+            ),
+          );
+        },
+      }),
+    [],
+  );
+
+  return (
+    <section data-testid="table-visual-disabled">
+      <DataTable
+        data={rows}
+        columns={columns}
+        config={{
+          enableFilters: true,
+          enableSortBy: true,
+          enableFlexLayout: true,
+          customHooks: [disabledHook],
+        }}
+        initialState={initialState}
+        customProps={{ refetchTableData: () => undefined }}
+      />
+    </section>
+  );
+}
+
+function EmptyFixtureTable() {
+  return (
+    <section data-testid="table-visual-empty">
+      <DataTable
+        data={[]}
+        columns={columns}
+        config={{
+          enableFilters: true,
+          enableSortBy: true,
+          enableFlexLayout: true,
+        }}
+        initialState={initialState}
+        tableEmptyNode="No fixture rows available"
+      />
+    </section>
+  );
+}
+
+export default function TableVisualFixture() {
+  return (
+    <main className="container py-4">
+      <h1>Table</h1>
+      <InteractiveFixtureTable />
+      <DisabledRowFixtureTable />
+      <EmptyFixtureTable />
+    </main>
+  );
+}
diff --git a/frontend/tests/visual/fixtures/tableFixtures.js b/frontend/tests/visual/fixtures/tableFixtures.js
new file mode 100644
index 000000000..4d98dd1fc
--- /dev/null
+++ b/frontend/tests/visual/fixtures/tableFixtures.js
@@ -0,0 +1,53 @@
+const ownerOptions = ["Atlas", "Beacon", "Cypher"];
+
+const baseRows = [
+  [1, "Alpha Watch", "Atlas", false],
+  [2, "Beacon Triage", "Beacon", true],
+  [3, "Cipher Sweep", "Cypher", false],
+  [4, "Delta Review", "Atlas", false],
+  [5, "Echo Archive", "Beacon", true],
+  [6, "Falcon Relay", "Cypher", false],
+  [7, "Gamma Drift", "Atlas", false],
+  [8, "Helix Mirror", "Beacon", true],
+  [9, "Ion Ledger", "Cypher", false],
+  [10, "Jade Signal", "Atlas", false],
+  [11, "Kilo Brief", "Beacon", false],
+  [12, "Lumen Trace", "Cypher", true],
+].map(([id, title, owner, completed]) => ({
+  id,
+  title,
+  owner,
+  completed,
+  enabled: true,
+  permissions: { edit: true },
+}));
+
+const generatedRows = Array.from({ length: 48 }, (_, index) => {
+  const id = index + 13;
+
+  return {
+    id,
+    title: `Visual Fixture ${id}`,
+    owner: ownerOptions[index % ownerOptions.length],
+    completed: id % 3 === 0,
+    enabled: true,
+    permissions: { edit: true },
+  };
+});
+
+export const tableFixtureRows = [...baseRows, ...generatedRows];
+
+export const disabledRowFixtureRows = [
+  [101, "Dormant Sentinel", "Atlas", false, false],
+  [102, "Muted Beacon", "Beacon", false, true],
+  [103, "Quiet Ledger", "Cypher", true, true],
+  [104, "Staged Rollout", "Atlas", false, true],
+  [105, "Fallback Queue", "Beacon", false, true],
+].map(([id, title, owner, completed, enabled]) => ({
+  id,
+  title,
+  owner,
+  completed,
+  enabled,
+  permissions: { edit: true },
+}));
diff --git a/frontend/tests/visual/main.jsx b/frontend/tests/visual/main.jsx
new file mode 100644
index 000000000..9826eed14
--- /dev/null
+++ b/frontend/tests/visual/main.jsx
@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+
+import "../../src/styles/App.scss";
+import TableVisualFixture from "./TableVisualFixture";
+
+createRoot(document.getElementById("root")).render(<TableVisualFixture />);
diff --git a/frontend/tests/visual/table.visual.spec.js b/frontend/tests/visual/table.visual.spec.js
new file mode 100644
index 000000000..57e411d6e
--- /dev/null
+++ b/frontend/tests/visual/table.visual.spec.js
@@ -0,0 +1,206 @@
+import { expect, test } from "@playwright/test";
+
+async function freezeExternalNetwork(page, baseURL) {
+  await page.route("**/*", async (route) => {
+    const url = route.request().url();
+
+    if (
+      url.startsWith(baseURL) ||
+      url.startsWith("data:") ||
+      url.startsWith("blob:")
+    ) {
+      await route.continue();
+      return;
+    }
+
+    await route.abort();
+  });
+}
+
+async function openTable(page, baseURL) {
+  await freezeExternalNetwork(page, baseURL);
+  await page.goto("/tests/visual.html");
+  await expect(page.getByRole("heading", { name: "Table" })).toBeVisible();
+  await expect(page.getByTestId("table-visual-interactive")).toBeVisible();
+}
+
+test.describe("table visual states", () => {
+  test("default state", async ({ page, baseURL, browserName, isMobile }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    await expect(page.getByTestId("table-visual-interactive")).toHaveScreenshot(
+      "table-default-desktop.png",
+      { animations: "disabled", caret: "hide" },
+    );
+  });
+
+  test("sorted ascending", async ({ page, baseURL, browserName, isMobile }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    const section = page.getByTestId("table-visual-interactive");
+    await section.getByRole("button", { name: /Title/i }).click();
+
+    await expect(section).toHaveScreenshot("table-sorted-asc-desktop.png", {
+      animations: "disabled",
+      caret: "hide",
+    });
+  });
+
+  test("sorted descending", async ({
+    page,
+    baseURL,
+    browserName,
+    isMobile,
+  }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    const section = page.getByTestId("table-visual-interactive");
+    const titleHeader = section.getByRole("button", { name: /Title/i });
+
+    await titleHeader.click();
+    await titleHeader.click();
+
+    await expect(section).toHaveScreenshot("table-sorted-desc-desktop.png", {
+      animations: "disabled",
+      caret: "hide",
+    });
+  });
+
+  test("active filters", async ({ page, baseURL, browserName, isMobile }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    const section = page.getByTestId("table-visual-interactive");
+    const titleFilter = section.getByPlaceholder("Search keyword..").first();
+
+    await titleFilter.fill("Alpha Watch");
+    await titleFilter.press("Enter");
+
+    await expect(section).toHaveScreenshot("table-filtered-desktop.png", {
+      animations: "disabled",
+      caret: "hide",
+    });
+  });
+
+  test("expanded row", async ({ page, baseURL, browserName, isMobile }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    const section = page.getByTestId("table-visual-interactive");
+
+    await section.locator("tbody tr [role='button']").first().click();
+    await expect(section.getByTestId("expanded-row-1")).toBeVisible();
+
+    await expect(section).toHaveScreenshot("table-expanded-desktop.png", {
+      animations: "disabled",
+      caret: "hide",
+    });
+  });
+
+  test("selected rows", async ({ page, baseURL, browserName, isMobile }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    const section = page.getByTestId("table-visual-interactive");
+    const alphaRow = section.locator("tbody tr", { hasText: "Alpha Watch" });
+    const cipherRow = section.locator("tbody tr", { hasText: "Cipher Sweep" });
+
+    await alphaRow.locator("input[type='checkbox']").check();
+    await cipherRow.locator("input[type='checkbox']").check();
+    await expect(alphaRow.locator("input[type='checkbox']")).toBeChecked();
+    await expect(cipherRow.locator("input[type='checkbox']")).toBeChecked();
+    await page.mouse.move(0, 0);
+    await page.evaluate(() => {
+      if (document.activeElement instanceof HTMLElement)
+        document.activeElement.blur();
+    });
+
+    await expect(section).toHaveScreenshot("table-selected-desktop.png", {
+      animations: "disabled",
+      caret: "hide",
+      maxDiffPixels: 700,
+    });
+  });
+
+  test("disabled row styling", async ({
+    page,
+    baseURL,
+    browserName,
+    isMobile,
+  }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    await expect(page.getByTestId("table-visual-disabled")).toHaveScreenshot(
+      "table-disabled-row-desktop.png",
+      { animations: "disabled", caret: "hide" },
+    );
+  });
+
+  test("empty state", async ({ page, baseURL, browserName, isMobile }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    await expect(page.getByTestId("table-visual-empty")).toHaveScreenshot(
+      "table-empty-state-desktop.png",
+      { animations: "disabled", caret: "hide" },
+    );
+  });
+
+  test("paginator ellipsis", async ({
+    page,
+    baseURL,
+    browserName,
+    isMobile,
+  }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(isMobile);
+
+    await openTable(page, baseURL);
+
+    await expect(
+      page.getByTestId("table-visual-interactive").locator(".table-paginator"),
+    ).toHaveScreenshot("table-paginator-ellipsis-desktop.png", {
+      animations: "disabled",
+      caret: "hide",
+    });
+  });
+});
+
+test.describe("table mobile visual state", () => {
+  test("default state on mobile", async ({
+    page,
+    baseURL,
+    browserName,
+    isMobile,
+  }) => {
+    test.skip(browserName !== "chromium");
+    test.skip(!isMobile);
+
+    await openTable(page, baseURL);
+
+    await expect(page.getByTestId("table-visual-interactive")).toHaveScreenshot(
+      "table-default-mobile.png",
+      { animations: "disabled", caret: "hide" },
+    );
+  });
+});
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-default-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-default-desktop.png
new file mode 100644
index 000000000..42ad3a516
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-default-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-default-mobile.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-default-mobile.png
new file mode 100644
index 000000000..efa47dfde
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-default-mobile.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-disabled-row-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-disabled-row-desktop.png
new file mode 100644
index 000000000..7a84643d1
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-disabled-row-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-empty-state-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-empty-state-desktop.png
new file mode 100644
index 000000000..c06b1d13b
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-empty-state-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-expanded-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-expanded-desktop.png
new file mode 100644
index 000000000..e6d362b5a
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-expanded-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-filtered-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-filtered-desktop.png
new file mode 100644
index 000000000..465443f93
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-filtered-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-paginator-ellipsis-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-paginator-ellipsis-desktop.png
new file mode 100644
index 000000000..8b0fed026
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-paginator-ellipsis-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-selected-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-selected-desktop.png
new file mode 100644
index 000000000..0be5bbb03
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-selected-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-sorted-asc-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-sorted-asc-desktop.png
new file mode 100644
index 000000000..c8c3460f6
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-sorted-asc-desktop.png differ
diff --git a/frontend/tests/visual/table.visual.spec.js-snapshots/table-sorted-desc-desktop.png b/frontend/tests/visual/table.visual.spec.js-snapshots/table-sorted-desc-desktop.png
new file mode 100644
index 000000000..d2d280257
Binary files /dev/null and b/frontend/tests/visual/table.visual.spec.js-snapshots/table-sorted-desc-desktop.png differ
diff --git a/frontend/tests/wrapper/AuthGuard.test.jsx b/frontend/tests/wrapper/AuthGuard.test.jsx
index 1ee9d7fa7..158b3f1e0 100644
--- a/frontend/tests/wrapper/AuthGuard.test.jsx
+++ b/frontend/tests/wrapper/AuthGuard.test.jsx
@@ -4,14 +4,14 @@ import { render, screen } from "@testing-library/react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import AuthGuard from "../../src/wrappers/AuthGuard";
 import { AUTHENTICATION_STATUSES } from "../../src/constants";
-import { addToast } from "@greedybear/gb-ui";
+import { addToast } from "../../src/components/common/gb-ui/index";
 
 const mockUseAuthStore = vi.fn();
 vi.mock("../../src/stores", () => ({
   useAuthStore: (selector) => mockUseAuthStore(selector),
 }));
 
-vi.mock("@greedybear/gb-ui", async (importOriginal) => {
+vi.mock("../../src/components/common/gb-ui/index", async (importOriginal) => {
   const original = await importOriginal();
   return {
     ...original,
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index dc979565c..71bcfa250 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import { configDefaults } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import { fileURLToPath } from 'url';
 import path from 'path';
@@ -12,6 +13,7 @@ export default defineConfig({
         environment: 'jsdom',
         setupFiles: './vitest.setup.js',
         css: true,
+        exclude: [...configDefaults.exclude, 'tests/visual/**'],
     },
     base: process.env.VITE_BASE_URL || '/',