diff --git a/src/App.jsx b/src/App.jsx
index 5907bd5..c2c3a81 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,15 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { api } from './api';
-import Overview from './components/Overview';
-import Repos from './components/Repos';
-import Models from './components/Models';
-import DailyUsage from './components/DailyUsage';
-import Sessions from './components/Sessions';
-import OverviewVideoExport from './components/OverviewVideoExport';
import { buildLiveDataEnvelope, buildLiveStateFromSettled, chooseLiveEnvelope, mergeLiveEvent, shouldUseLiveData } from './live-state';
import { debugLive, summarizeLivePayload, summarizeLiveState } from './utils/liveDebug';
+const Overview = lazy(() => import('./components/Overview'));
+const Repos = lazy(() => import('./components/Repos'));
+const Models = lazy(() => import('./components/Models'));
+const DailyUsage = lazy(() => import('./components/DailyUsage'));
+const Sessions = lazy(() => import('./components/Sessions'));
+const OverviewVideoExport = lazy(() => import('./components/OverviewVideoExport'));
+
const TABS = ['Overview', 'Repos', 'Models', 'Daily', 'Sessions'];
const RANGES = [
@@ -53,7 +54,11 @@ export default function App() {
const exportMode = search?.get('export');
const exportJobId = search?.get('job');
if (exportMode === 'overview-video' && exportJobId) {
- return