diff --git a/apps/web/src/navigation/route.js b/apps/web/src/navigation/route.js
index 8f1342dae..2f26492c3 100644
--- a/apps/web/src/navigation/route.js
+++ b/apps/web/src/navigation/route.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { Box, Flex, Heading, Text } from "rebass";
 import * as Icon from "../components/icons";
 import ThemeProvider from "../components/theme-provider";
@@ -94,7 +94,9 @@ function Route(props) {
         )}
       </Flex>
       {props.route.component && (
-        <props.route.component navigator={navigator} {...props.params} />
+        <Suspense fallback={<Text>Loading...</Text>}>
+          <props.route.component navigator={navigator} {...props.params} />
+        </Suspense>
       )}
     </ThemeProvider>
   );
diff --git a/apps/web/src/views/index.js b/apps/web/src/views/index.js
index 54a0ad7cd..79de587f6 100644
--- a/apps/web/src/views/index.js
+++ b/apps/web/src/views/index.js
@@ -1,9 +1,11 @@
-export const Home = require("./Home").default;
-export const Notebooks = require("./Notebooks").default;
-export const Notes = require("./Notes").default;
-export const Topics = require("./Topics").default;
-export const Settings = require("./Settings").default;
-export const Trash = require("./Trash").default;
-export const Account = require("./Account").default;
-export const Tags = require("./Tags").default;
-export const Search = require("./Search").default;
+import { lazy } from "react";
+
+export const Home = lazy(() => import("./Home"));
+export const Notebooks = lazy(() => import("./Notebooks"));
+export const Notes = lazy(() => import("./Notes"));
+export const Topics = lazy(() => import("./Topics"));
+export const Settings = lazy(() => import("./Settings"));
+export const Trash = lazy(() => import("./Trash"));
+export const Account = lazy(() => import("./Account"));
+export const Tags = lazy(() => import("./Tags"));
+export const Search = lazy(() => import("./Search"));