diff --git a/.gitignore b/.gitignore
index c9f4466..e52fd27 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,6 @@ CACHE/
 media/
 tmp/
 frontend/dist
-static/modern
+static/
 .python-version
-.env
\ No newline at end of file
+.env
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index faa680a..001b9d4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,7 +7,6 @@ import { Routes } from "./Routes";
 import client from "./client";
 import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
-import { Splash as Splash } from "./components/Splash";
 import { Toast } from "./components/Toast";
 import { ToastProvider } from "./components/ToastProvider";
 import { Wireframe } from "./components/Wireframe";
diff --git a/frontend/src/Routes.tsx b/frontend/src/Routes.tsx
index 919fd78..fdcc504 100644
--- a/frontend/src/Routes.tsx
+++ b/frontend/src/Routes.tsx
@@ -1,28 +1,30 @@
 import React from "react";
 import { Route, Routes as ReactRouterRoutes } from "react-router-dom";
 
-import { Splash } from "./components/Splash";
-import { UserCreate } from "./features/auth/UserCreate";
-import { Deposit } from "./features/deposit/Deposit";
-import { Log } from "./features/log/Log";
-import { Register } from "./features/register/Register";
-import { OrderStats } from "./features/stats/OrderStats";
-import { ProductStats } from "./features/stats/ProductStats";
-import { Stats } from "./features/stats/Stats";
-import { UserDetail } from "./features/users/UserDetail";
-import { UserList } from "./features/users/UserList";
+const Splash = React.lazy(() => import("./components/Splash"));
+const UserCreate = React.lazy(() => import("./features/auth/UserCreate"));
+const Deposit = React.lazy(() => import("./features/deposit/Deposit"));
+const Log = React.lazy(() => import("./features/log/Log"));
+const Register = React.lazy(() => import("./features/register/Register"));
+const OrderStats = React.lazy(() => import("./features/stats/OrderStats"));
+const ProductStats = React.lazy(() => import("./features/stats/ProductStats"));
+const Stats = React.lazy(() => import("./features/stats/Stats"));
+const UserDetail = React.lazy(() => import("./features/users/UserDetail"));
+const UserList = React.lazy(() => import("./features/users/UserList"));
 
 export const Routes = (): JSX.Element => (
-  <ReactRouterRoutes>
-    <Route path="/deposit" element={<Deposit />} />
-    <Route path="/log" element={<Log />} />
-    <Route path="/stats" element={<Stats />} />
-    <Route path="/stats/orders" element={<OrderStats />} />
-    <Route path="/stats/products" element={<ProductStats />} />
-    <Route path="/users" element={<UserList />} />
-    <Route path="/users/create" element={<UserCreate />} />
-    <Route path="/user/:userId" element={<UserDetail />} />
-    <Route path="/" element={<Register />} />
-    <Route path="*" element={<Splash brandText="404" noOverlay />} />
-  </ReactRouterRoutes>
+  <React.Suspense fallback={<div>Loading...</div>}>
+    <ReactRouterRoutes>
+      <Route path="/deposit" element={<Deposit />} />
+      <Route path="/log" element={<Log />} />
+      <Route path="/stats" element={<Stats />} />
+      <Route path="/stats/orders" element={<OrderStats />} />
+      <Route path="/stats/products" element={<ProductStats />} />
+      <Route path="/users" element={<UserList />} />
+      <Route path="/users/create" element={<UserCreate />} />
+      <Route path="/user/:userId" element={<UserDetail />} />
+      <Route path="/" element={<Register />} />
+      <Route path="*" element={<Splash brandText="404" noOverlay />} />
+    </ReactRouterRoutes>
+  </React.Suspense>
 );
diff --git a/frontend/src/components/Splash.tsx b/frontend/src/components/Splash.tsx
index 7b63825..ca56203 100644
--- a/frontend/src/components/Splash.tsx
+++ b/frontend/src/components/Splash.tsx
@@ -8,7 +8,7 @@ interface SplashProps {
   noOverlay?: boolean;
 }
 
-export const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): JSX.Element => (
+const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): JSX.Element => (
   <div className={clsx(styles.splash, { [styles.overlay]: !noOverlay })}>
     <div className={styles.wrap}>
       <div className={styles.sun}></div>
@@ -17,3 +17,4 @@ export const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): J
     </div>
   </div>
 );
+export default Splash;
diff --git a/frontend/src/features/auth/UserCreate.tsx b/frontend/src/features/auth/UserCreate.tsx
index e0fddda..16848aa 100644
--- a/frontend/src/features/auth/UserCreate.tsx
+++ b/frontend/src/features/auth/UserCreate.tsx
@@ -11,7 +11,7 @@ type FormValues = {
   email: string;
 };
 
-export const UserCreate = () => {
+const UserCreate = () => {
   const {
     register,
     handleSubmit,
@@ -48,3 +48,4 @@ export const UserCreate = () => {
     </div>
   );
 };
+export default UserCreate;
diff --git a/frontend/src/features/deposit/Deposit.tsx b/frontend/src/features/deposit/Deposit.tsx
index 8bd05b5..1503383 100644
--- a/frontend/src/features/deposit/Deposit.tsx
+++ b/frontend/src/features/deposit/Deposit.tsx
@@ -4,7 +4,7 @@ import { UserCard } from "../users/UserCard";
 import styles from "./Deposit.module.css";
 import { useDeposit } from "./useDeposit";
 
-export const Deposit = (): JSX.Element => {
+const Deposit = (): JSX.Element => {
   const {
     loading,
     selectedUser,
@@ -65,3 +65,4 @@ export const Deposit = (): JSX.Element => {
     </div>
   );
 };
+export default Deposit;
diff --git a/frontend/src/features/log/Log.tsx b/frontend/src/features/log/Log.tsx
index 22611cc..24f8bef 100644
--- a/frontend/src/features/log/Log.tsx
+++ b/frontend/src/features/log/Log.tsx
@@ -9,7 +9,7 @@ import styles from "./Log.module.css";
 
 const PAGE_SIZE = 10;
 
-export const Log = () => {
+const Log = () => {
   const types = {
     orderOffset: Number,
     transactionOffset: Number,
@@ -139,3 +139,4 @@ export const Log = () => {
     </div>
   );
 };
+export default Log;
diff --git a/frontend/src/features/register/Register.tsx b/frontend/src/features/register/Register.tsx
index 0de885c..2103077 100644
--- a/frontend/src/features/register/Register.tsx
+++ b/frontend/src/features/register/Register.tsx
@@ -8,7 +8,7 @@ import { useRegister } from "./useRegister";
 
 const USER_EXTERNAL = "external";
 
-export const Register = (): JSX.Element => {
+const Register = (): JSX.Element => {
   const {
     users,
     products,
@@ -80,3 +80,4 @@ export const Register = (): JSX.Element => {
     </div>
   );
 };
+export default Register;
diff --git a/frontend/src/features/stats/OrderStats.tsx b/frontend/src/features/stats/OrderStats.tsx
index 3368edd..41fa2d6 100644
--- a/frontend/src/features/stats/OrderStats.tsx
+++ b/frontend/src/features/stats/OrderStats.tsx
@@ -35,7 +35,7 @@ const OrderBar = ({ data }: { data: BarDatum[] }) => (
   />
 );
 
-export const OrderStats = () => {
+const OrderStats = () => {
   const { data, loading } = useQuery(OrderStatsDocument);
 
   return (
@@ -77,3 +77,4 @@ export const OrderStats = () => {
     </StatsView>
   );
 };
+export default OrderStats;
diff --git a/frontend/src/features/stats/ProductStats.tsx b/frontend/src/features/stats/ProductStats.tsx
index 9bb7f6a..55a2b9b 100644
--- a/frontend/src/features/stats/ProductStats.tsx
+++ b/frontend/src/features/stats/ProductStats.tsx
@@ -11,7 +11,7 @@ type UserCount = {
   count: number;
 };
 
-export const ProductStats = () => {
+const ProductStats = () => {
   const { data, loading } = useQuery(AllProductStatsDocument, {
     variables: { active: true },
   });
@@ -38,3 +38,4 @@ export const ProductStats = () => {
     </StatsView>
   );
 };
+export default ProductStats;
diff --git a/frontend/src/features/stats/Stats.tsx b/frontend/src/features/stats/Stats.tsx
index 371d75a..9163eb8 100644
--- a/frontend/src/features/stats/Stats.tsx
+++ b/frontend/src/features/stats/Stats.tsx
@@ -5,7 +5,7 @@ import React from "react";
 import { ProductStatsDocument } from "../../types";
 import { StatsView } from "./StatsView";
 
-export const Stats = () => {
+const Stats = () => {
   const { data, loading } = useQuery(ProductStatsDocument);
 
   const series: any[] = [];
@@ -68,3 +68,4 @@ export const Stats = () => {
     </StatsView>
   );
 };
+export default Stats;
diff --git a/frontend/src/features/users/UserDetail.tsx b/frontend/src/features/users/UserDetail.tsx
index c300eeb..6769fcc 100644
--- a/frontend/src/features/users/UserDetail.tsx
+++ b/frontend/src/features/users/UserDetail.tsx
@@ -7,7 +7,7 @@ import { User, UserDetailDocument, UserProfile } from "../../types";
 import { formatMonth, formatTime } from "../../utils/time";
 import styles from "./UserDetail.module.css";
 
-export const UserDetail = () => {
+const UserDetail = () => {
   const { userId } = useParams();
   const { data, loading } = useQuery(UserDetailDocument, { variables: { userId: userId || "" }, skip: !userId });
 
@@ -108,3 +108,4 @@ export const UserDetail = () => {
     </div>
   );
 };
+export default UserDetail;
diff --git a/frontend/src/features/users/UserList.tsx b/frontend/src/features/users/UserList.tsx
index d68e9f1..c2175b3 100644
--- a/frontend/src/features/users/UserList.tsx
+++ b/frontend/src/features/users/UserList.tsx
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import { AllUsersDocument } from "../../types";
 import { activeUserFilter } from "../../utils/users";
 
-export const UserList = () => {
+const UserList = () => {
   const { data, loading } = useQuery(AllUsersDocument);
   const [showAll, setShowAll] = useState(false);
 
@@ -35,3 +35,4 @@ export const UserList = () => {
     </div>
   );
 };
+export default UserList;