diff --git a/web/package-lock.json b/web/package-lock.json
index 25bfeba70..bbb6cd64e 100644
Binary files a/web/package-lock.json and b/web/package-lock.json differ
diff --git a/web/package.json b/web/package.json
index a88f27a6e..fdea244f6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,14 +4,14 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.2",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "antd": "^4.18.4",
+    "antd": "^4.24.16",
     "babel-plugin-import": "^1.13.8",
     "customize-cra": "^1.0.0",
     "eslint-config-prettier": "^9.1.0",
@@ -20,10 +20,10 @@
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "prettier": "^3.3.2",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-app-rewired": "^2.1.11",
-    "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.4",
     "react-scripts": "^5.0.0",
     "slugify": "^1.6.6",
     "typescript": "^4.9.5",
@@ -56,4 +56,4 @@
       "last 1 safari version"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/web/src/components/listInfoDrawer/ListInfoDrawer.tsx b/web/src/components/listInfoDrawer/ListInfoDrawer.tsx
index 5a893ce16..71ea3e717 100644
--- a/web/src/components/listInfoDrawer/ListInfoDrawer.tsx
+++ b/web/src/components/listInfoDrawer/ListInfoDrawer.tsx
@@ -74,7 +74,7 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
   const viewUrls = viewUrlModels == null ? [] : viewUrlModels.map((u) => u.url);
   return list ? (
     <Drawer
-      visible={true}
+      open={true}
       width={350}
       placement={"right"}
       mask={false}
diff --git a/web/src/components/listsTable/ListsTable.tsx b/web/src/components/listsTable/ListsTable.tsx
index 3e08e2b85..69b747d0f 100644
--- a/web/src/components/listsTable/ListsTable.tsx
+++ b/web/src/components/listsTable/ListsTable.tsx
@@ -283,7 +283,7 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             value: t.id.toString(),
           }))}
           onFilter={(value, record) =>
-            record.tagIds ? record.tagIds.includes(+value) : false
+            record.tagIds ? record.tagIds.includes(Number(value)) : false
           }
           render={(tagIds: number[]) =>
             tagIds ? (
@@ -318,7 +318,9 @@ export const ListsTable = (props: RouteComponentProps & Props) => {
             value: t.id.toString(),
           }))}
           onFilter={(value, record) =>
-            record.maintainerIds ? record.maintainerIds.includes(+value) : false
+            record.maintainerIds
+              ? record.maintainerIds.includes(Number(value))
+              : false
           }
           render={(maintainerIds: number[]) =>
             maintainerIds ? (
diff --git a/web/src/hooks/useSearchColumnFilter.tsx b/web/src/hooks/useSearchColumnFilter.tsx
index 130e283e7..54ec142eb 100644
--- a/web/src/hooks/useSearchColumnFilter.tsx
+++ b/web/src/hooks/useSearchColumnFilter.tsx
@@ -39,7 +39,7 @@ export const useSearchColumnFilter = <T extends {}>(dataIndex: string) => {
             placeholder={`Search ${
               dataIndex.charAt(0).toUpperCase() + dataIndex.slice(1)
             }`}
-            value={selectedKeys && selectedKeys[0]}
+            value={(selectedKeys && (selectedKeys[0] as string)) || ""}
             onChange={(e) =>
               setSelectedKeys &&
               setSelectedKeys(e.target.value ? [e.target.value] : [])
diff --git a/web/src/index.tsx b/web/src/index.tsx
index 8bed81909..35eaa8517 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,14 +1,16 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { App } from "./App";
 import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root"),
 );
 
 // If you want to start measuring performance in your app, pass a function