diff --git a/apps/image-labeler/src/routeTree.gen.ts b/apps/image-labeler/src/routeTree.gen.ts
index 9eca8b87a9..d5e88ea546 100644
--- a/apps/image-labeler/src/routeTree.gen.ts
+++ b/apps/image-labeler/src/routeTree.gen.ts
@@ -29,7 +29,9 @@ const IndexLazyRoute = IndexLazyImport.update({
 const ProjectProjectIdRoute = ProjectProjectIdImport.update({
   path: '/project/$projectId',
   getParentRoute: () => rootRoute,
-} as any)
+} as any).lazy(() =>
+  import('./routes/project.$projectId.lazy').then((d) => d.Route),
+)
 
 // Populate the FileRoutesByPath interface
 
diff --git a/apps/image-labeler/src/routes/project.$projectId.lazy.tsx b/apps/image-labeler/src/routes/project.$projectId.lazy.tsx
new file mode 100644
index 0000000000..0203b2457c
--- /dev/null
+++ b/apps/image-labeler/src/routes/project.$projectId.lazy.tsx
@@ -0,0 +1,6 @@
+import { createLazyFileRoute } from '@tanstack/react-router'
+import TasksComponent from '../features/project/Project'
+
+export const Route = createLazyFileRoute('/project/$projectId')({
+  component: TasksComponent,
+})
diff --git a/apps/image-labeler/src/routes/project.$projectId.tsx b/apps/image-labeler/src/routes/project.$projectId.tsx
index 215d9870d8..d13cc96828 100644
--- a/apps/image-labeler/src/routes/project.$projectId.tsx
+++ b/apps/image-labeler/src/routes/project.$projectId.tsx
@@ -1,12 +1,10 @@
 import { createFileRoute } from '@tanstack/react-router'
-import TasksComponent from '../features/project/Project'
 
 type ProjectSearchState = {
   activeTaskId?: string
 }
 
 export const Route = createFileRoute('/project/$projectId')({
-  component: TasksComponent,
   validateSearch: (search: Record<string, unknown>): ProjectSearchState => {
     // validate and parse the search params into a typed state
     return {