diff --git a/src/controllers/dashboard/users/userpassword.html b/src/controllers/dashboard/users/userpassword.html
deleted file mode 100644
index 984fcc2c9..000000000
--- a/src/controllers/dashboard/users/userpassword.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div id="userPasswordPage" data-role="page" class="page type-interior userPasswordPage">
-
-</div>
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/routes/UserPasswordPage.tsx
similarity index 71%
rename from src/components/pages/UserPasswordPage.tsx
rename to src/routes/UserPasswordPage.tsx
index f0dac9a48..e97f3f3f3 100644
--- a/src/components/pages/UserPasswordPage.tsx
+++ b/src/routes/UserPasswordPage.tsx
@@ -1,8 +1,9 @@
 import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
-import SectionTabs from '../dashboard/users/SectionTabs';
-import UserPasswordForm from '../dashboard/users/UserPasswordForm';
-import { getParameterByName } from '../../utils/url';
-import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
+import SectionTabs from '../components/dashboard/users/SectionTabs';
+import UserPasswordForm from '../components/dashboard/users/UserPasswordForm';
+import { getParameterByName } from '../utils/url';
+import SectionTitleContainer from '../components/dashboard/elements/SectionTitleContainer';
+import Page from '../components/Page';
 
 const UserPasswordPage: FunctionComponent = () => {
     const userId = getParameterByName('userId');
@@ -21,7 +22,10 @@ const UserPasswordPage: FunctionComponent = () => {
     }, [loadUser]);
 
     return (
-        <div>
+        <Page
+            id='userPasswordPage'
+            className='mainAnimatedPage type-interior userPasswordPage'
+        >
             <div className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer
@@ -36,7 +40,8 @@ const UserPasswordPage: FunctionComponent = () => {
                     />
                 </div>
             </div>
-        </div>
+        </Page>
+
     );
 };
 
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index de5a6f170..dbfe714e1 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -7,6 +7,7 @@ import SearchPage from './search';
 import UserEditPage from './UserEditPage';
 import UserLibraryAccessPage from './UserLibraryAccessPage';
 import UserParentalControl from './UserParentalControl';
+import UserPasswordPage from './UserPasswordPage';
 import UserProfilesPage from './UserProfilesPage';
 
 const AppRoutes = () => (
@@ -60,6 +61,14 @@ const AppRoutes = () => (
                     </ConnectionRequired>
                 }
             />
+            <Route
+                path='userpassword.html'
+                element={
+                    <ConnectionRequired>
+                        <UserPasswordPage />
+                    </ConnectionRequired>
+                }
+            />
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />
         </Route>
diff --git a/src/scripts/routes.js b/src/scripts/routes.js
index 2e7ab3e11..d76b8c52d 100644
--- a/src/scripts/routes.js
+++ b/src/scripts/routes.js
@@ -429,13 +429,6 @@ import { appRouter } from '../components/appRouter';
         controller: 'shows/tvrecommended'
     });
 
-    defineRoute({
-        alias: '/userpassword.html',
-        path: 'dashboard/users/userpassword.html',
-        autoFocus: false,
-        pageComponent: 'UserPasswordPage'
-    });
-
     defineRoute({
         alias: '/wizardremoteaccess.html',
         path: 'wizard/remote/index.html',