diff --git a/src/controllers/dashboard/users/userparentalcontrol.html b/src/controllers/dashboard/users/userparentalcontrol.html
deleted file mode 100644
index 8a93c3f931..0000000000
--- a/src/controllers/dashboard/users/userparentalcontrol.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="userParentalControlPage" data-role="page" class="page type-interior">
-
-</div>
diff --git a/src/components/pages/UserParentalControl.tsx b/src/routes/UserParentalControl.tsx
similarity index 92%
rename from src/components/pages/UserParentalControl.tsx
rename to src/routes/UserParentalControl.tsx
index 435f6c3831..85cef59ef7 100644
--- a/src/components/pages/UserParentalControl.tsx
+++ b/src/routes/UserParentalControl.tsx
@@ -1,18 +1,19 @@
 import { AccessSchedule, DynamicDayOfWeek, UserDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
-import globalize from '../../scripts/globalize';
-import LibraryMenu from '../../scripts/libraryMenu';
-import AccessScheduleList from '../dashboard/users/AccessScheduleList';
-import BlockedTagList from '../dashboard/users/BlockedTagList';
-import ButtonElement from '../dashboard/elements/ButtonElement';
-import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
-import SectionTabs from '../dashboard/users/SectionTabs';
-import loading from '../loading/loading';
-import toast from '../toast/toast';
-import { getParameterByName } from '../../utils/url';
-import CheckBoxElement from '../dashboard/elements/CheckBoxElement';
+import globalize from '../scripts/globalize';
+import LibraryMenu from '../scripts/libraryMenu';
+import AccessScheduleList from '../components/dashboard/users/AccessScheduleList';
+import BlockedTagList from '../components/dashboard/users/BlockedTagList';
+import ButtonElement from '../components/dashboard/elements/ButtonElement';
+import SectionTitleContainer from '../components/dashboard/elements/SectionTitleContainer';
+import SectionTabs from '../components/dashboard/users/SectionTabs';
+import loading from '../components/loading/loading';
+import toast from '../components/toast/toast';
+import { getParameterByName } from '../utils/url';
+import CheckBoxElement from '../components/dashboard/elements/CheckBoxElement';
 import escapeHTML from 'escape-html';
-import SelectElement from '../dashboard/elements/SelectElement';
+import SelectElement from '../components/dashboard/elements/SelectElement';
+import Page from '../components/Page';
 
 type RatingsArr = {
     Name: string;
@@ -241,7 +242,7 @@ const UserParentalControl: FunctionComponent = () => {
 
         const showSchedulePopup = (schedule: AccessSchedule, index: number) => {
             schedule = schedule || {};
-            import('../../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
+            import('../components/accessSchedule/accessSchedule').then(({default: accessschedule}) => {
                 accessschedule.show({
                     schedule: schedule
                 }).then(function (updatedSchedule) {
@@ -274,7 +275,7 @@ const UserParentalControl: FunctionComponent = () => {
         };
 
         const showBlockedTagPopup = () => {
-            import('../../components/prompt/prompt').then(({default: prompt}) => {
+            import('../components/prompt/prompt').then(({default: prompt}) => {
                 prompt({
                     label: globalize.translate('LabelTag')
                 }).then(function (value) {
@@ -326,8 +327,11 @@ const UserParentalControl: FunctionComponent = () => {
     };
 
     return (
-        <div ref={element}>
-            <div className='content-primary'>
+        <Page
+            id='userParentalControlPage'
+            className='mainAnimatedPage type-interior'
+        >
+            <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={userName}
@@ -419,7 +423,8 @@ const UserParentalControl: FunctionComponent = () => {
                     </div>
                 </form>
             </div>
-        </div>
+        </Page>
+
     );
 };
 
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 0ea8b888c9..de5a6f170e 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -6,6 +6,7 @@ import NewUserPage from './NewUserPage';
 import SearchPage from './search';
 import UserEditPage from './UserEditPage';
 import UserLibraryAccessPage from './UserLibraryAccessPage';
+import UserParentalControl from './UserParentalControl';
 import UserProfilesPage from './UserProfilesPage';
 
 const AppRoutes = () => (
@@ -51,6 +52,14 @@ const AppRoutes = () => (
                     </ConnectionRequired>
                 }
             />
+            <Route
+                path='userparentalcontrol.html'
+                element={
+                    <ConnectionRequired>
+                        <UserParentalControl />
+                    </ConnectionRequired>
+                }
+            />
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />
         </Route>
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 0c52e0018d..2e7ab3e11b 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -429,14 +429,6 @@ import { appRouter } from '../components/appRouter';
         controller: 'shows/tvrecommended'
     });
 
-    defineRoute({
-        alias: '/userparentalcontrol.html',
-        path: 'dashboard/users/userparentalcontrol.html',
-        autoFocus: false,
-        roles: 'admin',
-        pageComponent: 'UserParentalControl'
-    });
-
     defineRoute({
         alias: '/userpassword.html',
         path: 'dashboard/users/userpassword.html',