diff --git a/src/components/App.js b/src/components/App.js
index bfcdbcd8f..1e6ab8c80 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -8,8 +8,11 @@ import AppDebug from 'components/AppDebug';
 import {Cosign} from 'components/CoSign';
 import Form from 'components/Form';
 import LanguageSelection from 'components/LanguageSelection';
-import {CreateAppointment, appointmentRoutes} from 'components/appointments';
-import ManageAppointment from 'components/appointments/ManageAppointment';
+import {
+  CreateAppointment,
+  appointmentRoutes,
+  manageAppointmentRoutes,
+} from 'components/appointments';
 import useFormContext from 'hooks/useFormContext';
 import useQuery from 'hooks/useQuery';
 import useZodErrorMap from 'hooks/useZodErrorMap';
@@ -21,7 +24,7 @@ import AppDisplay from './AppDisplay';
 export const routes = [
   {
     path: 'afspraak-annuleren/*',
-    element: <ManageAppointment />,
+    children: manageAppointmentRoutes,
   },
   {
     path: 'afspraak-maken/*',
diff --git a/src/components/appointments/ManageAppointment.js b/src/components/appointments/ManageAppointment.js
deleted file mode 100644
index f9cd2c7d2..000000000
--- a/src/components/appointments/ManageAppointment.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {Route, Routes} from 'react-router-dom';
-
-import ErrorBoundary from 'components/Errors/ErrorBoundary';
-
-import {CancelAppointment, CancelAppointmentSuccess} from './cancel';
-
-// with react router v6, these routes can be hoisted into the App if we'd like to
-
-const ManageAppointment = () => {
-  return (
-    <Routes>
-      <Route
-        path=""
-        element={
-          <ErrorBoundary>
-            <CancelAppointment />
-          </ErrorBoundary>
-        }
-      />
-      <Route path="succes" element={<CancelAppointmentSuccess />} />
-    </Routes>
-  );
-};
-
-export default ManageAppointment;
diff --git a/src/components/appointments/ManageAppointment/index.js b/src/components/appointments/ManageAppointment/index.js
new file mode 100644
index 000000000..77bd44d6f
--- /dev/null
+++ b/src/components/appointments/ManageAppointment/index.js
@@ -0,0 +1 @@
+export {routes} from './routes';
diff --git a/src/components/appointments/ManageAppointment/routes.js b/src/components/appointments/ManageAppointment/routes.js
new file mode 100644
index 000000000..a02da59f6
--- /dev/null
+++ b/src/components/appointments/ManageAppointment/routes.js
@@ -0,0 +1,18 @@
+import ErrorBoundary from 'components/Errors/ErrorBoundary';
+
+import {CancelAppointment, CancelAppointmentSuccess} from '../cancel';
+
+export const routes = [
+  {
+    path: '',
+    element: (
+      <ErrorBoundary>
+        <CancelAppointment />
+      </ErrorBoundary>
+    ),
+  },
+  {
+    path: 'succes',
+    element: <CancelAppointmentSuccess />,
+  },
+];
diff --git a/src/components/appointments/index.js b/src/components/appointments/index.js
index 62660d31b..6eee0217f 100644
--- a/src/components/appointments/index.js
+++ b/src/components/appointments/index.js
@@ -1 +1,2 @@
 export {default as CreateAppointment, routes as appointmentRoutes} from './CreateAppointment';
+export {routes as manageAppointmentRoutes} from './ManageAppointment';