diff --git a/src/router.tsx b/src/router.tsx
index e4a8784..4e616fc 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,18 +1,14 @@
-import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router';
+import { createRootRoute, createRoute, createRouter, lazyRouteComponent } from '@tanstack/react-router';
 import { RootLayout } from './app/RootLayout';
 import { NotFound } from './app/NotFound';
 import { LivePage } from './features/live/LivePage';
 import { GroupsPage } from './features/groups/GroupsPage';
 import { BracketPage } from './features/bracket/BracketPage';
 import { PredictionsPage } from './features/predictions/PredictionsPage';
-import { StoryPage } from './features/story/StoryPage';
 import { MatchPreviewPage } from './features/match/MatchPreviewPage';
 import { TeamProfilePage } from './features/team/TeamProfilePage';
-import { MethodologyPage } from './features/methodology/MethodologyPage';
 import { TeamsPage } from './features/teams/TeamsPage';
 import { ScoreboardPage } from './features/scoreboard/ScoreboardPage';
-import { DataPage } from './features/data/DataPage';
-import { ComparePage } from './features/compare/ComparePage';
 
 const rootRoute = createRootRoute({
   component: RootLayout,
@@ -23,14 +19,14 @@ const indexRoute = createRoute({ getParentRoute: () => rootRoute, path: '/', com
 const groupsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/groups', component: GroupsPage });
 const bracketRoute = createRoute({ getParentRoute: () => rootRoute, path: '/bracket', component: BracketPage });
 const predictRoute = createRoute({ getParentRoute: () => rootRoute, path: '/predict', component: PredictionsPage });
-const storyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/story', component: StoryPage });
+const storyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/story', component: lazyRouteComponent(() => import('./features/story/StoryPage'), 'StoryPage') });
 const matchRoute = createRoute({ getParentRoute: () => rootRoute, path: '/match/$num', component: MatchPreviewPage });
 const teamRoute = createRoute({ getParentRoute: () => rootRoute, path: '/team/$name', component: TeamProfilePage });
-const methodologyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/methodology', component: MethodologyPage });
+const methodologyRoute = createRoute({ getParentRoute: () => rootRoute, path: '/methodology', component: lazyRouteComponent(() => import('./features/methodology/MethodologyPage'), 'MethodologyPage') });
 const teamsRoute = createRoute({ getParentRoute: () => rootRoute, path: '/teams', component: TeamsPage });
 const scoreboardRoute = createRoute({ getParentRoute: () => rootRoute, path: '/scoreboard', component: ScoreboardPage });
-const dataRoute = createRoute({ getParentRoute: () => rootRoute, path: '/data', component: DataPage });
-const compareRoute = createRoute({ getParentRoute: () => rootRoute, path: '/compare', component: ComparePage });
+const dataRoute = createRoute({ getParentRoute: () => rootRoute, path: '/data', component: lazyRouteComponent(() => import('./features/data/DataPage'), 'DataPage') });
+const compareRoute = createRoute({ getParentRoute: () => rootRoute, path: '/compare', component: lazyRouteComponent(() => import('./features/compare/ComparePage'), 'ComparePage') });
 
 const routeTree = rootRoute.addChildren([indexRoute, groupsRoute, bracketRoute, predictRoute, storyRoute, matchRoute, teamRoute, methodologyRoute, teamsRoute, scoreboardRoute, dataRoute, compareRoute]);