diff --git a/src/App.js b/src/App.js
index 981c5aa51..d7203d7a3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import "./App.css";
 import Header from "./Header";
 import Home from "./Home";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Checkout from "./Checkout";
 import Login from "./Login";
 import Payment from "./Payment";
@@ -43,31 +43,15 @@ function App() {
   }, []);
 
   return (
-    <Router>
+     <Router>
       <div className="app">
-        <Switch>
-          <Route path="/orders">
-            <Header />
-            <Orders />
-          </Route>
-          <Route path="/login">
-            <Login />
-          </Route>
-          <Route path="/checkout">
-            <Header />
-            <Checkout />
-          </Route>
-          <Route path="/payment">
-            <Header />
-            <Elements stripe={promise}>
-              <Payment />
-            </Elements>
-          </Route>
-          <Route path="/">
-            <Header />
-            <Home />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route path='/login' element={<Login />} />
+          <Route path='/' element={[<Header />, <Home />]} />
+          <Route path='/checkout' element={[<Header />, <Checkout />]} />
+         <Route path='/payment' element={[<Header />, <Elements stripe={Promise} />],<Payment/>} />
+         <Route path='/' element={[<Header />, <Home/>} />
+        </Routes>
       </div>
     </Router>
   );