diff --git a/mtdrworkshop/backend/pom.xml b/mtdrworkshop/backend/pom.xml
index a2b65ed..377814c 100644
--- a/mtdrworkshop/backend/pom.xml
+++ b/mtdrworkshop/backend/pom.xml
@@ -13,7 +13,7 @@
     <parent>
         <groupId>io.helidon.applications</groupId>
         <artifactId>helidon-se</artifactId>
-        <version>2.2.0</version>
+        <version>2.4.2</version>
         <relativePath/>
     </parent>
 
@@ -24,7 +24,7 @@
     <name>${project.artifactId}</name>
 
     <properties>
-        <helidon.version>2.0.0</helidon.version>
+        <helidon.version>2.4.2</helidon.version>
         <mainClass>com.oracle.todoapp.Main</mainClass>
         <libs.classpath.prefix>libs</libs.classpath.prefix>
         <copied.libs.dir>${project.build.directory}/${libs.classpath.prefix}</copied.libs.dir>
diff --git a/mtdrworkshop/frontend/package.json b/mtdrworkshop/frontend/package.json
index 714efde..d0fa439 100644
--- a/mtdrworkshop/frontend/package.json
+++ b/mtdrworkshop/frontend/package.json
@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
+    "@mui/styles": "^5.4.4",
     "moment": "^2.29.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-moment": "^1.0.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "5.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/mtdrworkshop/frontend/src/API.js b/mtdrworkshop/frontend/src/API.js
index 6e424a4..939210e 100644
--- a/mtdrworkshop/frontend/src/API.js
+++ b/mtdrworkshop/frontend/src/API.js
@@ -17,4 +17,5 @@
 // Copy from the endpoint from the API Gateway Deployment
 // Example: const API_LIST = 'https://di2eyonlz5s7kmuektcddaw5zq.apigateway.<region>.oci.customer-oci.com/todolist';
 const API_LIST = 'https://di2eyonlz5s7kmuektcddaw5zq.apigateway.eu-frankfurt-1.oci.customer-oci.com/todolist';
+
 export default API_LIST;
diff --git a/mtdrworkshop/frontend/src/App.js b/mtdrworkshop/frontend/src/App.js
index e277761..2afab33 100644
--- a/mtdrworkshop/frontend/src/App.js
+++ b/mtdrworkshop/frontend/src/App.js
@@ -13,8 +13,8 @@
 import React, { useState, useEffect } from 'react';
 import NewItem from './NewItem';
 import API_LIST from './API';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { Button, TableBody, CircularProgress } from '@material-ui/core';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Button, TableBody, CircularProgress } from '@mui/material';
 import Moment from 'react-moment';
 
 /* In this application we're using Function Components with the State Hooks
diff --git a/mtdrworkshop/frontend/src/NewItem.js b/mtdrworkshop/frontend/src/NewItem.js
index 811fb57..87ef076 100644
--- a/mtdrworkshop/frontend/src/NewItem.js
+++ b/mtdrworkshop/frontend/src/NewItem.js
@@ -10,7 +10,8 @@
  */
 
 import React, { useState } from "react";
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
+
 
 function NewItem(props) {
   const [item, setItem] = useState('');
diff --git a/mtdrworkshop/frontend/src/index.css b/mtdrworkshop/frontend/src/index.css
index a7e5a0c..8705797 100644
--- a/mtdrworkshop/frontend/src/index.css
+++ b/mtdrworkshop/frontend/src/index.css
@@ -109,6 +109,7 @@ button.AddButton,
 button.DoneButton {
   font-size: max(8px,min(2vw, 12px));
   padding: 0.35em 0.5em;
+  color:#161513;
 }
 /* from the redwood theme */
 button.AddButton {