diff --git a/package.json b/package.json
index 332301731..075be7706 100644
--- a/package.json
+++ b/package.json
@@ -56,8 +56,8 @@
     "lint-staged": "^10.2.11",
     "mini-css-extract-plugin": "^2.7.2",
     "nodemon": "^2.0.20",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-test-renderer": "^17.0.2",
     "sass": "^1.69.5",
     "sass-loader": "^13.2.0",
diff --git a/src/404.js b/src/404.js
index 385397148..89fecdefc 100644
--- a/src/404.js
+++ b/src/404.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Action404 from './components/404'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Action404 />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/500.js b/src/500.js
index f1b3452bf..3d63f9660 100644
--- a/src/500.js
+++ b/src/500.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Action500 from './components/500'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Action500 />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/catalog.js b/src/catalog.js
index f36b1ada3..dff629f0e 100644
--- a/src/catalog.js
+++ b/src/catalog.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import CatalogPage from './components/catalog-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<CatalogPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/closed.js b/src/closed.js
index 512e3eb15..6c37adca6 100644
--- a/src/closed.js
+++ b/src/closed.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Closed from './components/closed'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Closed />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/components/detail-carousel.jsx b/src/components/detail-carousel.jsx
index c7ed6a81a..3558188d7 100644
--- a/src/components/detail-carousel.jsx
+++ b/src/components/detail-carousel.jsx
@@ -248,6 +248,7 @@ const DetailCarousel = ({widget, widgetHeight=''}) => {
 
 	const snapToImage = (fast=false) => {
 		const _pics = picScrollerRef.current
+		if(!_pics) return false //with react 18 rendering order is different, null check needed
 		const i = selectionData.selectedImage.num
 		if (_pics.children.length && _pics.children[i]) {
 			const _offset = _pics.children[i].offsetLeft * -1
diff --git a/src/creator-page.js b/src/creator-page.js
index e9a4dc4e9..403b91748 100644
--- a/src/creator-page.js
+++ b/src/creator-page.js
@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 import WidgetCreatorPage from './components/widget-creator-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<WidgetCreatorPage />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/detail.js b/src/detail.js
index 08699782e..61bfa6ec9 100644
--- a/src/detail.js
+++ b/src/detail.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import DetailPage from './components/detail-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<DetailPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)
diff --git a/src/draft-not-playable.js b/src/draft-not-playable.js
index b80ed413b..5b771d6dd 100644
--- a/src/draft-not-playable.js
+++ b/src/draft-not-playable.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import DraftNotPlayable from './components/draft-not-playable'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<DraftNotPlayable />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/embedded-only.js b/src/embedded-only.js
index 417a79a15..5306322fe 100644
--- a/src/embedded-only.js
+++ b/src/embedded-only.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import EmbeddedOnly from './components/embedded-only'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<EmbeddedOnly />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/guides.js b/src/guides.js
index 933a33a1c..e3b90acea 100644
--- a/src/guides.js
+++ b/src/guides.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import GuidePage from './components/guide-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<GuidePage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/help.js b/src/help.js
index a1803fcc5..95afba541 100644
--- a/src/help.js
+++ b/src/help.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import HelpPage from './components/help-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<HelpPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)
diff --git a/src/homepage.js b/src/homepage.js
index 95ac4d730..d53b03b71 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Homepage from './components/homepage'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Homepage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/login.js b/src/login.js
index 10070630b..4fce6ed5a 100644
--- a/src/login.js
+++ b/src/login.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import LoginPage from './components/login-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<LoginPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/lti-error.js b/src/lti-error.js
index 12332381b..9613d6cd5 100644
--- a/src/lti-error.js
+++ b/src/lti-error.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import ErrorGeneral from './components/lti/error-general'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<ErrorGeneral />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/lti-open-preview.js b/src/lti-open-preview.js
index d08e5667f..b52b445cf 100644
--- a/src/lti-open-preview.js
+++ b/src/lti-open-preview.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import OpenPreview from './components/lti/open-preview'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<OpenPreview />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/lti-post-login.js b/src/lti-post-login.js
index 558d32f99..7c446dbb5 100644
--- a/src/lti-post-login.js
+++ b/src/lti-post-login.js
@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 import PostLogin from './components/lti/post-login'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<PostLogin />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)
diff --git a/src/lti-select-item.js b/src/lti-select-item.js
index 048f2ffbc..acb1bc1fa 100644
--- a/src/lti-select-item.js
+++ b/src/lti-select-item.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import SelectItem from './components/lti/select-item'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<SelectItem />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/media.js b/src/media.js
index 05cde1a7f..a76cc895e 100644
--- a/src/media.js
+++ b/src/media.js
@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
 import MediaImporter from './components/media-importer'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<MediaImporter />
-	</QueryClientProvider>, document.getElementById('app'))
\ No newline at end of file
+	</QueryClientProvider>  )
diff --git a/src/my-widgets.js b/src/my-widgets.js
index 31db7e058..7d1467771 100644
--- a/src/my-widgets.js
+++ b/src/my-widgets.js
@@ -1,7 +1,6 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import MyWidgetsPage from './components/my-widgets-page'
 import { onError } from './util/global-cache-options'
 
@@ -11,9 +10,9 @@ const queryCache = new QueryCache({
 
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<MyWidgetsPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app')
+	</QueryClientProvider>  
 )
diff --git a/src/no-attempts.js b/src/no-attempts.js
index ea7ed6dbf..ed637802d 100644
--- a/src/no-attempts.js
+++ b/src/no-attempts.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import NoAttempts from './components/no-attempts'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<NoAttempts />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/no-permission.js b/src/no-permission.js
index 254a3d95d..96eacdb7d 100644
--- a/src/no-permission.js
+++ b/src/no-permission.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import NoPermission from './components/no-permission'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<NoPermission />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)
diff --git a/src/notifications.js b/src/notifications.js
index 24648610f..d1fbcd9e9 100644
--- a/src/notifications.js
+++ b/src/notifications.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Notifications from './components/notifications'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Notifications />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/player-page.js b/src/player-page.js
index 3ab8cfc8c..009eae20e 100644
--- a/src/player-page.js
+++ b/src/player-page.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import WidgetPlayerPage from './components/widget-player-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<WidgetPlayerPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/pre-embed-placeholder.js b/src/pre-embed-placeholder.js
index 83ca51b29..1717112b9 100644
--- a/src/pre-embed-placeholder.js
+++ b/src/pre-embed-placeholder.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import PreEmbedPlaceholder from './components/pre-embed-placeholder'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<PreEmbedPlaceholder />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/profile.js b/src/profile.js
index 292b27854..3f97f02e6 100644
--- a/src/profile.js
+++ b/src/profile.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import ProfilePage from './components/profile-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<ProfilePage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/qset-history.js b/src/qset-history.js
index 3148d29f5..4aae6b894 100644
--- a/src/qset-history.js
+++ b/src/qset-history.js
@@ -1,15 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import QuestionHistory from './components/question-history'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<QuestionHistory />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app')
+	</QueryClientProvider>  
 )
diff --git a/src/question-importer.js b/src/question-importer.js
index 4445829e1..101b7fd67 100644
--- a/src/question-importer.js
+++ b/src/question-importer.js
@@ -1,15 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import QuestionImporter from './components/question-importer'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<QuestionImporter />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app')
-)
\ No newline at end of file
+	</QueryClientProvider>
+)
diff --git a/src/retired.js b/src/retired.js
index 19b0c3b1e..646ff8c70 100644
--- a/src/retired.js
+++ b/src/retired.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import Retired from './components/retired'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<Retired />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/scores.js b/src/scores.js
index b3e98cc1d..20e281233 100644
--- a/src/scores.js
+++ b/src/scores.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import ScorePage from './components/score-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<ScorePage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/settings.js b/src/settings.js
index b354e2b93..4c518fa70 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import SettingsPage from './components/settings-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<SettingsPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>)
diff --git a/src/support.js b/src/support.js
index 21e274c29..ebd15b99c 100644
--- a/src/support.js
+++ b/src/support.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import SupportPage from './components/support-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<SupportPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/user-admin.js b/src/user-admin.js
index 6fda500b7..7496a8ecc 100644
--- a/src/user-admin.js
+++ b/src/user-admin.js
@@ -1,14 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import UserAdminPage from './components/user-admin-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<UserAdminPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-	</QueryClientProvider>, document.getElementById('app'))
+	</QueryClientProvider>  )
diff --git a/src/widget-admin.js b/src/widget-admin.js
index ec2631691..43cf1db45 100644
--- a/src/widget-admin.js
+++ b/src/widget-admin.js
@@ -1,15 +1,15 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 import { QueryClient, QueryClientProvider, QueryCache } from 'react-query'
-import { ReactQueryDevtools } from "react-query/devtools";
 import WidgetAdminPage from './components/widget-admin-page'
 
 const queryCache = new QueryCache()
 export const queryClient = new QueryClient({ queryCache })
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('app'));
+
+root.render(
 	<QueryClientProvider client={queryClient} contextSharing={true}>
 		<WidgetAdminPage />
-		<ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>, document.getElementById('app')
+    </QueryClientProvider>
 )
diff --git a/yarn.lock b/yarn.lock
index da2722f63..71fc8428a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5952,15 +5952,13 @@ react-datepicker@^5.0.0:
     prop-types "^15.7.2"
     react-onclickoutside "^6.13.0"
 
-react-dom@^16.13.1:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.23.2"
 
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.8.6:
   version "16.13.1"
@@ -6038,14 +6036,12 @@ react-test-renderer@^17.0.2:
     react-shallow-renderer "^16.13.1"
     scheduler "^0.20.2"
 
-react@^16.13.1:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 read-pkg@^4.0.1:
   version "4.0.1"
@@ -6348,6 +6344,13 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 schema-utils@^3.1.1, schema-utils@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"