diff --git a/frontend/.nvmrc b/frontend/.nvmrc
index 790e1105f22b..3516580bbbc0 100644
--- a/frontend/.nvmrc
+++ b/frontend/.nvmrc
@@ -1 +1 @@
-v20.10.0
+20.17.0
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 5890f5ab2949..b5d15eb069e0 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,7 +1,7 @@
 # Frontend dockerfile
 # Pinning to 20.10.0 to avoid GH Action lint error exit code 243
 # See: https://stackoverflow.com/a/71892226/3120863
-FROM node:20.10.0
+FROM node:20.17.0
 
 # install dependencies first, in a different location for easier app bind mounting for local development
 # due to default /opt permissions we have to create the dir with root and change perms
diff --git a/frontend/package.json b/frontend/package.json
index c9c752945ff7..620c13473bcd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,15 +8,15 @@
     "@blueprintjs/core": "^5.8.2",
     "@blueprintjs/icons": "^5.7.0",
     "@blueprintjs/select": "^5.0.23",
-    "@czi-sds/components": "^20.4.0",
-    "@czi-sds/data-viz": "^0.3.0",
+    "@czi-sds/components": "^21.0.0",
+    "@czi-sds/data-viz": "^0.10.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@loadable/component": "^5.15.3",
     "@mui/base": "^5.0.0-beta.3",
     "@mui/lab": "^5.0.0-alpha.136",
-    "@mui/material": "^5.14.0",
+    "@mui/material": "^6.0.0",
     "@playwright/test": "^1.41.2",
     "@types/d3-scale-chromatic": "^3.0.0",
     "@vgrid/sass-inline-svg": "^1.0.1",
@@ -35,13 +35,13 @@
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
     "html-to-image": "^1.11.11",
-    "jschardet": "^2.3.0",
+    "jschardet": "^3.0.0",
     "lodash": "^4.17.21",
     "ml-hclust": "^3.1.0",
     "next": "^14.1.0",
-    "next-mdx-remote": "^4.4.1",
+    "next-mdx-remote": "^5.0.0",
     "next-secure-headers": "^2.2.0",
-    "next-sitemap": "^3.1.55",
+    "next-sitemap": "^4.0.0",
     "pako": "^2.1.0",
     "papaparse": "^5.4.1",
     "react": "^18.2.0",
@@ -49,15 +49,15 @@
     "react-highlight": "^0.15.0",
     "react-intersection-observer": "^9.5.2",
     "react-move": "^6.5.0",
-    "react-query": "^3.39.3",
+    "@tanstack/react-query": "^4.0.5",
     "react-table": "^7.8.0",
     "react-tweet-embed": "^2.0.0",
     "react-use": "^17.4.0",
     "react-uuid": "^2.0.0",
     "react-window": "^1.8.9",
-    "rehype-mathjax": "^4.0.2",
-    "rehype-slug": "^5.1.0",
-    "remark-math": "^5.1.1",
+    "rehype-mathjax": "^6.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-math": "^6.0.0",
     "sass": "^1.63.6"
   },
   "devDependencies": {
@@ -77,41 +77,41 @@
     "@types/papaparse": "^5.3.7",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.5",
-    "@types/react": "18.2.42",
+    "@types/react": "18.3.11",
     "@types/react-dom": "^18.2.18",
     "@types/react-highlight": "^0.12.8",
     "@types/react-table": "^7.7.14",
     "@types/react-window": "^1.8.5",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "adm-zip": "^0.5.10",
     "allure-commandline": "^2.23.0",
-    "allure-playwright": "^2.4.0",
-    "babel-eslint": "^10.1.0",
-    "concurrently": "^6.5.1",
-    "eslint": "^8.53.0",
+    "allure-playwright": "^3.0.0",
+    "@babel/eslint-parser": "^7.11.0",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.0.0",
     "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-jsx-expressions": "^1.3.1",
-    "eslint-plugin-mdx": "^2.1.0",
-    "eslint-plugin-playwright": "^0.15.3",
+    "eslint-plugin-mdx": "^3.0.0",
+    "eslint-plugin-playwright": "^1.0.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-sonarjs": "^0.19.0",
+    "eslint-plugin-sonarjs": "^2.0.0",
     "expect-playwright": "^0.8.0",
     "gray-matter": "^4.0.3",
-    "pixelmatch": "^5.3.0",
+    "pixelmatch": "^6.0.0",
     "prettier": "^3.0.2",
-    "prettier-plugin-organize-imports": "^2.3.4",
-    "sharp": "^0.32.6",
-    "start-server-and-test": "^1.15.4",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-config-standard": "^20.0.0",
-    "typescript": "^4.9.5"
+    "prettier-plugin-organize-imports": "^4.0.0",
+    "sharp": "^0.33.0",
+    "start-server-and-test": "^2.0.0",
+    "stylelint": "^16.0.0",
+    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "typescript": "^5.0.0"
   },
   "engines": {
-    "node": "v20.10.0"
+    "node": "20.17.0"
   },
   "keywords": [
     "cellxgene",