diff --git a/ui/src/App.js b/ui/src/App.js
index 854ceae..0cfbeae 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -10,7 +10,7 @@ import APIAddressField from './components/APIAddressField';
 const STORE_RUNTIME = 'runTime';
 
 function App() {
-  const waterPumpCtx = useWaterPumpAPI();
+  const waterPump = useWaterPumpAPI().API;
   const [runTime, setRunTime] = useState(1000);
   const NotificationsSystem = useNotificationsSystem();
 
@@ -32,7 +32,7 @@ function App() {
 
   const handleStart = async () => {
     try {
-      await waterPumpCtx.API.start(runTime);
+      await waterPump.start(runTime);
       NotificationsSystem.alert('Water pump started successfully!');
     } catch (error) {
       NotificationsSystem.alert('Error starting water pump: ' + error.message);
@@ -41,7 +41,7 @@ function App() {
 
   const handleStop = async () => {
     try {
-      await waterPumpCtx.API.stop();
+      await waterPump.stop();
       NotificationsSystem.alert('Water pump stopped successfully!');
     } catch (error) {
       NotificationsSystem.alert('Error stopping water pump: ' + error.message);
diff --git a/ui/src/index.js b/ui/src/index.js
index 175c001..6a8ce38 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,18 +1,18 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import App from './App.js';
 import 'bootstrap/dist/css/bootstrap.min.css'; // Importing Bootstrap CSS
 
 import { NotificationsProvider } from './contexts/NotificationsContext.js';
 import { WaterPumpAPIProvider } from './contexts/WaterPumpAPIContext.js';
 
-ReactDOM.render(
+import { createRoot } from 'react-dom/client';
+const root = createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <NotificationsProvider>
       <WaterPumpAPIProvider>
         <App />
       </WaterPumpAPIProvider>
     </NotificationsProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );