diff --git a/src/apps/experimental/AppOverrides.scss b/src/apps/experimental/AppOverrides.scss
index fa586829e9..f6ea674428 100644
--- a/src/apps/experimental/AppOverrides.scss
+++ b/src/apps/experimental/AppOverrides.scss
@@ -17,6 +17,10 @@ $drawer-width: 240px;
         left: $drawer-width;
     }
 }
+// The fallback page has no drawer
+#fallbackPage {
+    left: 0;
+}
 
 // Hide some items from the user "settings" page that are in the drawer
 #myPreferencesMenuPage {
diff --git a/src/apps/experimental/routes/routes.tsx b/src/apps/experimental/routes/routes.tsx
index 57161a9891..d0c5deab09 100644
--- a/src/apps/experimental/routes/routes.tsx
+++ b/src/apps/experimental/routes/routes.tsx
@@ -16,9 +16,11 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
         path: '/*',
         lazy: () => import('../AppLayout'),
         children: [
+            { index: true, element: <Navigate replace to='/home.html' /> },
+
             {
-                /* User routes: Any child route of this layout is authenticated */
-                element: <ConnectionRequired isUserRequired />,
+                /* User routes */
+                Component: ConnectionRequired,
                 children: [
                     ...ASYNC_USER_ROUTES.map(toAsyncPageRoute),
                     ...LEGACY_USER_ROUTES.map(toViewManagerPageRoute),
@@ -26,21 +28,26 @@ export const EXPERIMENTAL_APP_ROUTES: RouteObject[] = [
                     // The video page is special since it combines new controls with the legacy view
                     {
                         path: 'video',
-                        element: <VideoPage />
+                        Component: VideoPage
                     }
                 ],
                 ErrorBoundary
             },
 
-            /* Public routes */
-            { index: true, element: <Navigate replace to='/home.html' /> },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
-
-            /* Fallback route for invalid paths */
             {
-                path: '*',
-                Component: FallbackRoute
+                /* Public routes */
+                element: <ConnectionRequired isUserRequired={false} />,
+                children: [
+                    ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
+
+                    /* Fallback route for invalid paths */
+                    {
+                        path: '*',
+                        Component: FallbackRoute
+                    }
+                ]
             }
+
         ]
     }
 ];
diff --git a/src/apps/stable/routes/routes.tsx b/src/apps/stable/routes/routes.tsx
index 08bd56634e..f0e2718b27 100644
--- a/src/apps/stable/routes/routes.tsx
+++ b/src/apps/stable/routes/routes.tsx
@@ -17,9 +17,11 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
         path: '/*',
         Component: AppLayout,
         children: [
+            { index: true, element: <Navigate replace to='/home.html' /> },
+
             {
                 /* User routes */
-                element: <ConnectionRequired isUserRequired />,
+                Component: ConnectionRequired,
                 children: [
                     ...ASYNC_USER_ROUTES.map(toAsyncPageRoute),
                     ...LEGACY_USER_ROUTES.map(toViewManagerPageRoute)
@@ -27,15 +29,19 @@ export const STABLE_APP_ROUTES: RouteObject[] = [
                 ErrorBoundary
             },
 
-            /* Public routes */
-            { index: true, element: <Navigate replace to='/home.html' /> },
-            ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
-
-            /* Fallback route for invalid paths */
             {
-                path: '*',
-                Component: FallbackRoute
+                /* Public routes */
+                element: <ConnectionRequired isUserRequired={false} />,
+                children: [
+                    ...LEGACY_PUBLIC_ROUTES.map(toViewManagerPageRoute),
+                    /* Fallback route for invalid paths */
+                    {
+                        path: '*',
+                        Component: FallbackRoute
+                    }
+                ]
             }
+
         ]
     }
 ];
diff --git a/src/components/router/FallbackRoute.tsx b/src/components/router/FallbackRoute.tsx
index f438d730ad..24df3bb8d3 100644
--- a/src/components/router/FallbackRoute.tsx
+++ b/src/components/router/FallbackRoute.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Navigate, useLocation } from 'react-router-dom';
 
-import loading from 'components/loading/loading';
 import Page from 'components/Page';
 import globalize from 'lib/globalize';
 import LinkButton from 'elements/emby-button/LinkButton';
@@ -9,10 +8,6 @@ import LinkButton from 'elements/emby-button/LinkButton';
 const FallbackRoute = () => {
     const location = useLocation();
 
-    useEffect(() => {
-        loading.hide();
-    }, []);
-
     // Check if the requested path should be redirected
     const to = useMemo(() => {
         const _to = {
@@ -42,14 +37,16 @@ const FallbackRoute = () => {
             id='fallbackPage'
             className='mainAnimatedPage libraryPage'
         >
-            <h1>{globalize.translate('HeaderPageNotFound')}</h1>
-            <p>{globalize.translate('PageNotFound')}</p>
-            <LinkButton
-                className='button-link'
-                href='#/home.html'
-            >
-                {globalize.translate('GoHome')}
-            </LinkButton>
+            <div className='padded-left padded-right'>
+                <h1>{globalize.translate('HeaderPageNotFound')}</h1>
+                <p>{globalize.translate('PageNotFound')}</p>
+                <LinkButton
+                    className='button-link'
+                    href='#/home.html'
+                >
+                    {globalize.translate('GoHome')}
+                </LinkButton>
+            </div>
         </Page>
     );
 };