diff --git a/querybook/webapp/components/AppAdmin/AppAdmin.tsx b/querybook/webapp/components/AppAdmin/AppAdmin.tsx
index f0ecb5225..4f9414501 100644
--- a/querybook/webapp/components/AppAdmin/AppAdmin.tsx
+++ b/querybook/webapp/components/AppAdmin/AppAdmin.tsx
@@ -31,7 +31,7 @@ import './AppAdmin.scss';
 const ENTITY_SIDEBAR_WIDTH = 200;
 const NAV_SIDEBAR_WIDTH = 200;
 
-export const AppAdmin: React.FunctionComponent = () => {
+const AppAdmin: React.FunctionComponent = () => {
     const { entity: selectedEntity }: { entity: AdminEntity } = useParams();
 
     const { data: environments, forceFetch: loadEnvironments } = useDataFetch<
@@ -280,3 +280,5 @@ const AdminTaskStatus: React.FC = () => (
         <TaskStatus />
     </div>
 );
+
+export default AppAdmin;
diff --git a/querybook/webapp/components/AppRouter/AppRouter.tsx b/querybook/webapp/components/AppRouter/AppRouter.tsx
index 72acbd21e..3a31de787 100644
--- a/querybook/webapp/components/AppRouter/AppRouter.tsx
+++ b/querybook/webapp/components/AppRouter/AppRouter.tsx
@@ -1,31 +1,35 @@
 import React from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
 
-import { AppAdmin } from 'components/AppAdmin/AppAdmin';
 import { UserLoader } from 'components/UserLoader/UserLoader';
-import { EnvironmentsRouter } from 'components/EnvironmentsRouter/EnvironmentsRouter';
-
 import history from 'lib/router-history';
-
 import { AppLayout } from 'components/AppLayout/AppLayout';
 import { ConfirmationManager } from 'components/ConfirmationManager/ConfirmationManager';
 import { ToastManager } from 'ui/ToastManager/ToastManager';
 import { FourOhFour } from 'ui/ErrorPage/FourOhFour';
+import { Loading } from 'ui/Loading/Loading';
+
+const AppAdmin = React.lazy(() => import('components/AppAdmin/AppAdmin'));
+const EnvironmentsRouter = React.lazy(() =>
+    import('components/EnvironmentsRouter/EnvironmentsRouter')
+);
 
 export const AppRouter: React.FunctionComponent = () => (
     <Router history={history}>
         <UserLoader>
             <AppLayout>
-                <Switch>
-                    <Route path="/admin/:entity?" component={AppAdmin} />
-                    <Route
-                        exact
-                        path="/"
-                        render={() => <EnvironmentsRouter />}
-                    />
-                    <Route path="/:env/" component={EnvironmentsRouter} />
-                    <Route component={FourOhFour} />
-                </Switch>
+                <React.Suspense fallback={<Loading />}>
+                    <Switch>
+                        <Route path="/admin/:entity?" component={AppAdmin} />
+                        <Route
+                            exact
+                            path="/"
+                            render={() => <EnvironmentsRouter />}
+                        />
+                        <Route path="/:env/" component={EnvironmentsRouter} />
+                        <Route component={FourOhFour} />
+                    </Switch>
+                </React.Suspense>
             </AppLayout>
         </UserLoader>
         <ConfirmationManager />
diff --git a/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx b/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx
index ec23d7378..833bfb6d4 100644
--- a/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx
+++ b/querybook/webapp/components/DataDocSchemaNavigator/DataDocSchemaNavigator.tsx
@@ -5,9 +5,9 @@ import { getCurrentEnv } from 'lib/utils/query-string';
 
 import { DataTableNavigator } from 'components/DataTableNavigator/DataTableNavigator';
 import { FullHeight } from 'ui/FullHeight/FullHeight';
-import './DataDocSchemaNavigator.scss';
 import { DataTableViewMini } from 'components/DataTableViewMini/DataTableViewMini';
 import { enableResizable } from 'lib/utils';
+import './DataDocSchemaNavigator.scss';
 
 export const DataDocSchemaNavigator: React.FunctionComponent = () => {
     const [tableId, setTableId] = React.useState<number>(null);
diff --git a/querybook/webapp/components/EmbeddedQueryPage/EmbeddedQueryPage.tsx b/querybook/webapp/components/EmbeddedQueryPage/EmbeddedQueryPage.tsx
index a5712fe83..5783a4cb7 100644
--- a/querybook/webapp/components/EmbeddedQueryPage/EmbeddedQueryPage.tsx
+++ b/querybook/webapp/components/EmbeddedQueryPage/EmbeddedQueryPage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { QueryComposer } from 'components/QueryComposer/QueryComposer';
+import QueryComposer from 'components/QueryComposer/QueryComposer';
 import { IAdhocQuery } from 'const/adhocQuery';
 import { IStoreState, Dispatch } from 'redux/store/types';
 import { receiveAdhocQuery } from 'redux/adhocQuery/action';
@@ -9,7 +9,7 @@ import { FullHeight } from 'ui/FullHeight/FullHeight';
 import { Button } from 'ui/Button/Button';
 import './EmbeddedQueryPage.scss';
 
-export const EmbeddedQueryPage: React.FunctionComponent = () => {
+const EmbeddedQueryPage: React.FunctionComponent = () => {
     const environmentId = useSelector(
         (state: IStoreState) => state.environment.currentEnvironmentId
     );
@@ -71,3 +71,5 @@ export const EmbeddedQueryPage: React.FunctionComponent = () => {
         </FullHeight>
     );
 };
+
+export default EmbeddedQueryPage;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/EnvironmentAppRouter.tsx b/querybook/webapp/components/EnvironmentAppRouter/EnvironmentAppRouter.tsx
index a2f214889..34d1841e8 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/EnvironmentAppRouter.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/EnvironmentAppRouter.tsx
@@ -5,6 +5,7 @@ import { useDispatch } from 'react-redux';
 import { IEnvironment } from 'redux/environment/types';
 import { loadQueryEngine } from 'redux/queryEngine/action';
 import { fetchQueryMetastore } from 'redux/dataSources/action';
+import { rehydrateAdhocQueryForEnvironment } from 'redux/adhocQuery/action';
 
 import { Loading } from 'ui/Loading/Loading';
 import { EnvironmentAppSidebar } from 'components/EnvironmentAppSidebar/EnvironmentAppSidebar';
@@ -12,7 +13,6 @@ import { EnvironmentModalSwitchRouter } from 'components/EnvironmentAppRouter/En
 import { FullHeight } from 'ui/FullHeight/FullHeight';
 
 import './EnvironmentAppRouter.scss';
-import { rehydrateAdhocQueryForEnvironment } from 'redux/adhocQuery/action';
 
 interface IProps {
     environment?: IEnvironment;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/EnvironmentModalSwitchRouter.tsx b/querybook/webapp/components/EnvironmentAppRouter/EnvironmentModalSwitchRouter.tsx
index 2a60d646e..34b2e4aaa 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/EnvironmentModalSwitchRouter.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/EnvironmentModalSwitchRouter.tsx
@@ -4,20 +4,35 @@ import { Switch, Route, useHistory, useLocation } from 'react-router-dom';
 import { usePrevious } from 'hooks/usePrevious';
 import { useModalRoute } from 'hooks/useModalRoute';
 
-import { AppDataDoc } from 'components/AppDataDoc/AppDataDoc';
-import { BoardWrapper } from 'components/Board/BoardWrapper';
-import { EmbeddedQueryPage } from 'components/EmbeddedQueryPage/EmbeddedQueryPage';
-import { Landing } from 'components/Landing/Landing';
-import { QueryComposer } from 'components/QueryComposer/QueryComposer';
-import { QuerySnippetRoute } from 'components/QuerySnippetRoute/QuerySnippetRoute';
 import { FourOhFour } from 'ui/ErrorPage/FourOhFour';
+import { Loading } from 'ui/Loading/Loading';
+import { Modal } from 'ui/Modal/Modal';
 
-import { ChangeLogRoute } from './ChangeLogRoute';
-import { DataTableRoute } from './DataTableRoute';
-import { InfoMenuRoute } from './InfoMenuRoute';
-import { QueryExecutionRoute } from './QueryExecutionRoute';
-import { SearchRoute } from './SearchRoute';
-import { UserSettingsMenuRoute } from './UserSettingsMenuRoute';
+// Main Routes
+const Landing = React.lazy(() => import('components/Landing/Landing'));
+const DataDocRoute = React.lazy(() => import('./mainRoute/DataDocRoute'));
+const BoardRoute = React.lazy(() => import('./mainRoute/BoardRoute'));
+const EmbeddedQueryPage = React.lazy(() =>
+    import('components/EmbeddedQueryPage/EmbeddedQueryPage')
+);
+const QueryComposer = React.lazy(() =>
+    import('components/QueryComposer/QueryComposer')
+);
+
+// Modal Routes
+const QuerySnippetRoute = React.lazy(() =>
+    import('components/QuerySnippetRoute/QuerySnippetRoute')
+);
+const ChangeLogRoute = React.lazy(() => import('./modalRoute/ChangeLogRoute'));
+const DataTableRoute = React.lazy(() => import('./modalRoute/DataTableRoute'));
+const InfoMenuRoute = React.lazy(() => import('./modalRoute/InfoMenuRoute'));
+const QueryExecutionRoute = React.lazy(() =>
+    import('./modalRoute/QueryExecutionRoute')
+);
+const SearchRoute = React.lazy(() => import('./modalRoute/SearchRoute'));
+const UserSettingsMenuRoute = React.lazy(() =>
+    import('./modalRoute/UserSettingsMenuRoute')
+);
 
 export const EnvironmentModalSwitchRouter: React.FC = () => {
     const location = useLocation();
@@ -75,32 +90,46 @@ export const EnvironmentModalSwitchRouter: React.FC = () => {
         />,
     ];
 
-    const modalSwitch = needsToShowModal && <Switch>{modalRoutes}</Switch>;
+    const modalSwitch = needsToShowModal && (
+        <React.Suspense
+            fallback={
+                <Modal onHide={() => null}>
+                    <Loading />
+                </Modal>
+            }
+        >
+            <Switch>{modalRoutes}</Switch>
+        </React.Suspense>
+    );
     return (
         <>
-            <Switch
-                location={
-                    // Show lastNotModalLocation when a modal route is presented
-                    // In case we refresh the page (so lastNotModalLocation is null)
-                    // We show the root which is the 404 Page. Null is not passed because
-                    // Switch would use the current browser location instead
-                    needsToShowModal
-                        ? lastNotModalLocation ?? { pathname: '/' }
-                        : location
-                }
-            >
-                <Route path="/:env/" exact component={Landing} />
-                <Route path="/:env/datadoc/" component={AppDataDoc} />
-                <Route path="/:env/adhoc/" render={() => <QueryComposer />} />
-                <Route
-                    path="/:env/_/embedded_editor/"
-                    render={() => <EmbeddedQueryPage />}
-                />
-                <Route path="/:env/list/:boardId/" component={BoardWrapper} />
-                {modalRoutes}
-                <Route component={FourOhFour} />
-            </Switch>
-
+            <React.Suspense fallback={<Loading />}>
+                <Switch
+                    location={
+                        // Show lastNotModalLocation when a modal route is presented
+                        // In case we refresh the page (so lastNotModalLocation is null)
+                        // We show the root which is the 404 Page. Null is not passed because
+                        // Switch would use the current browser location instead
+                        needsToShowModal
+                            ? lastNotModalLocation ?? { pathname: '/' }
+                            : location
+                    }
+                >
+                    <Route path="/:env/" exact component={Landing} />
+                    <Route path="/:env/datadoc/" component={DataDocRoute} />
+                    <Route
+                        path="/:env/adhoc/"
+                        render={() => <QueryComposer />}
+                    />
+                    <Route
+                        path="/:env/_/embedded_editor/"
+                        render={() => <EmbeddedQueryPage />}
+                    />
+                    <Route path="/:env/list/:boardId/" component={BoardRoute} />
+                    {modalRoutes}
+                    <Route component={FourOhFour} />
+                </Switch>
+            </React.Suspense>
             {modalSwitch}
         </>
     );
diff --git a/querybook/webapp/components/Board/BoardWrapper.tsx b/querybook/webapp/components/EnvironmentAppRouter/mainRoute/BoardRoute.tsx
similarity index 58%
rename from querybook/webapp/components/Board/BoardWrapper.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/mainRoute/BoardRoute.tsx
index 651c58953..bcc1cbed0 100644
--- a/querybook/webapp/components/Board/BoardWrapper.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/mainRoute/BoardRoute.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import { Board } from './Board';
+import { Board } from 'components/Board/Board';
 
-export const BoardWrapper: React.FunctionComponent<RouteComponentProps> = ({
+const BoardRoute: React.FunctionComponent<RouteComponentProps> = ({
     match,
 }) => {
     const boardId = Number(match.params['boardId']);
     return <Board boardId={boardId} />;
 };
+
+export default BoardRoute;
diff --git a/querybook/webapp/components/AppDataDoc/AppDataDoc.tsx b/querybook/webapp/components/EnvironmentAppRouter/mainRoute/DataDocRoute.tsx
similarity index 50%
rename from querybook/webapp/components/AppDataDoc/AppDataDoc.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/mainRoute/DataDocRoute.tsx
index 299dc6c03..9e2e6141b 100644
--- a/querybook/webapp/components/AppDataDoc/AppDataDoc.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/mainRoute/DataDocRoute.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
-import { Route, Switch, RouteComponentProps } from 'react-router-dom';
+import { Route, Switch, RouteComponentProps, Redirect } from 'react-router-dom';
 
 import { DataDocWrapper } from 'components/DataDoc/DataDocWrapper';
-import { Landing } from 'components/Landing/Landing';
 
 import { FourOhFour } from 'ui/ErrorPage/FourOhFour';
 
-export const AppDataDoc: React.FunctionComponent<RouteComponentProps> = () => (
+const DataDocRoute: React.FunctionComponent<RouteComponentProps> = () => (
     <Switch>
         <Route path="/:env/datadoc/:docId/" component={DataDocWrapper} />
-        <Route path="/:env/datadoc/" exact={true} component={Landing} />
+        <Route path="/:env/datadoc/" exact={true}>
+            <Redirect to="/" />
+        </Route>
         <Route component={FourOhFour} />
     </Switch>
 );
+
+export default DataDocRoute;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/ChangeLogRoute.tsx b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/ChangeLogRoute.tsx
similarity index 90%
rename from querybook/webapp/components/EnvironmentAppRouter/ChangeLogRoute.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/modalRoute/ChangeLogRoute.tsx
index 2281635a7..b4d8b8175 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/ChangeLogRoute.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/ChangeLogRoute.tsx
@@ -13,7 +13,7 @@ import { ChangeLog } from 'components/ChangeLog/ChangeLog';
 
 import { Modal } from 'ui/Modal/Modal';
 
-export const ChangeLogRoute: React.FunctionComponent<RouteComponentProps> = ({
+const ChangeLogRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('Change Log');
@@ -37,3 +37,5 @@ export const ChangeLogRoute: React.FunctionComponent<RouteComponentProps> = ({
         </div>
     );
 };
+
+export default ChangeLogRoute;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/DataTableRoute.tsx b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/DataTableRoute.tsx
similarity index 87%
rename from querybook/webapp/components/EnvironmentAppRouter/DataTableRoute.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/modalRoute/DataTableRoute.tsx
index 26ed077a3..fcfcec6ac 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/DataTableRoute.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/DataTableRoute.tsx
@@ -6,7 +6,7 @@ import { DataTableView } from 'components/DataTableView/DataTableView';
 import { Modal } from 'ui/Modal/Modal';
 import { useModalRoute } from 'hooks/useModalRoute';
 
-export const DataTableRoute: React.FunctionComponent<RouteComponentProps> = ({
+const DataTableRoute: React.FunctionComponent<RouteComponentProps> = ({
     match,
     location,
 }) => {
@@ -26,3 +26,5 @@ export const DataTableRoute: React.FunctionComponent<RouteComponentProps> = ({
         contentDOM
     );
 };
+
+export default DataTableRoute;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/InfoMenuRoute.tsx b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/InfoMenuRoute.tsx
similarity index 93%
rename from querybook/webapp/components/EnvironmentAppRouter/InfoMenuRoute.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/modalRoute/InfoMenuRoute.tsx
index b0dd0fe11..b5a1b0e99 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/InfoMenuRoute.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/InfoMenuRoute.tsx
@@ -12,7 +12,7 @@ import { Tours } from 'components/Info/Tours';
 
 import { Modal } from 'ui/Modal/Modal';
 
-export const InfoMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
+const InfoMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('Info');
@@ -47,3 +47,5 @@ export const InfoMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
         <div className="InfoMenuRoute m24">{getContentDOM()}</div>
     );
 };
+
+export default InfoMenuRoute;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/QueryExecutionRoute.tsx b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/QueryExecutionRoute.tsx
similarity index 86%
rename from querybook/webapp/components/EnvironmentAppRouter/QueryExecutionRoute.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/modalRoute/QueryExecutionRoute.tsx
index 33303214a..26ddcaab0 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/QueryExecutionRoute.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/QueryExecutionRoute.tsx
@@ -7,7 +7,7 @@ import { Modal } from 'ui/Modal/Modal';
 import { QueryView } from 'components/QueryView/QueryView';
 import { useBrowserTitle } from 'hooks/useBrowserTitle';
 
-export const QueryExecutionRoute: React.FunctionComponent<RouteComponentProps> = ({
+const QueryExecutionRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
     match,
 }) => {
@@ -24,3 +24,5 @@ export const QueryExecutionRoute: React.FunctionComponent<RouteComponentProps> =
         contentDOM
     );
 };
+
+export default QueryExecutionRoute;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/SearchRoute.tsx b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/SearchRoute.tsx
similarity index 92%
rename from querybook/webapp/components/EnvironmentAppRouter/SearchRoute.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/modalRoute/SearchRoute.tsx
index 8cc36b04b..def5bd1ec 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/SearchRoute.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/SearchRoute.tsx
@@ -10,7 +10,7 @@ import { useModalRoute } from 'hooks/useModalRoute';
 import { SearchOverview } from 'components/Search/SearchOverview';
 import { Modal } from 'ui/Modal/Modal';
 
-export const SearchRoute: React.FunctionComponent<RouteComponentProps> = ({
+const SearchRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('Search');
@@ -42,3 +42,5 @@ export const SearchRoute: React.FunctionComponent<RouteComponentProps> = ({
         contentDOM
     );
 };
+
+export default SearchRoute;
diff --git a/querybook/webapp/components/EnvironmentAppRouter/UserSettingsMenuRoute.tsx b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/UserSettingsMenuRoute.tsx
similarity index 87%
rename from querybook/webapp/components/EnvironmentAppRouter/UserSettingsMenuRoute.tsx
rename to querybook/webapp/components/EnvironmentAppRouter/modalRoute/UserSettingsMenuRoute.tsx
index 548ebcd39..d994bccd2 100644
--- a/querybook/webapp/components/EnvironmentAppRouter/UserSettingsMenuRoute.tsx
+++ b/querybook/webapp/components/EnvironmentAppRouter/modalRoute/UserSettingsMenuRoute.tsx
@@ -8,7 +8,7 @@ import { useBrowserTitle } from 'hooks/useBrowserTitle';
 import { useModalRoute } from 'hooks/useModalRoute';
 import { UserSettingsMenu } from 'components/UserSettingsMenu/UserSettingsMenu';
 
-export const UserSettingsMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
+const UserSettingsMenuRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
 }) => {
     useBrowserTitle('User Settings');
@@ -27,3 +27,5 @@ export const UserSettingsMenuRoute: React.FunctionComponent<RouteComponentProps>
         </Modal>
     );
 };
+
+export default UserSettingsMenuRoute;
diff --git a/querybook/webapp/components/EnvironmentAppSidebar/EnvironmentAppSidebar.tsx b/querybook/webapp/components/EnvironmentAppSidebar/EnvironmentAppSidebar.tsx
index 5fd4e062a..5057c5d2b 100644
--- a/querybook/webapp/components/EnvironmentAppSidebar/EnvironmentAppSidebar.tsx
+++ b/querybook/webapp/components/EnvironmentAppSidebar/EnvironmentAppSidebar.tsx
@@ -13,10 +13,10 @@ import { Icon } from 'ui/Icon/Icon';
 import { Entity } from './types';
 import { EnvironmentTopbar } from './EnvironmentTopbar';
 import { EntitySidebar } from './EntitySidebar';
-import './EnvironmentAppSidebar.scss';
 import { EnvironmentDropdownButton } from './EnvironmentDropdownButton';
 import { useEvent } from 'hooks/useEvent';
 import { matchKeyMap, KeyMap } from 'lib/utils/keyboard';
+import './EnvironmentAppSidebar.scss';
 
 const SIDEBAR_WIDTH = 320;
 
diff --git a/querybook/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx b/querybook/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx
index e69405237..0d1f17758 100644
--- a/querybook/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx
+++ b/querybook/webapp/components/EnvironmentsRouter/EnvironmentsRouter.tsx
@@ -217,6 +217,6 @@ function mapDispatchToProps(dispatch: Dispatch) {
     };
 }
 
-export const EnvironmentsRouter = withRouter(
+export default withRouter(
     connect(mapStateToProps, mapDispatchToProps)(EnvironmentsRouterComponent)
 );
diff --git a/querybook/webapp/components/Landing/Landing.tsx b/querybook/webapp/components/Landing/Landing.tsx
index 2f62d4c15..065f30fe2 100644
--- a/querybook/webapp/components/Landing/Landing.tsx
+++ b/querybook/webapp/components/Landing/Landing.tsx
@@ -131,7 +131,7 @@ const DefaultLanding: React.FC = ({ children }) => {
     );
 };
 
-export const Landing: React.FC = () => {
+const Landing: React.FC = () => {
     useBrowserTitle();
 
     const customLandingConfig = window.CUSTOM_LANDING_PAGE;
@@ -141,3 +141,5 @@ export const Landing: React.FC = () => {
 
     return <DefaultLanding>{customLandingConfig?.renderer()}</DefaultLanding>;
 };
+
+export default Landing;
diff --git a/querybook/webapp/components/QueryComposer/QueryComposer.tsx b/querybook/webapp/components/QueryComposer/QueryComposer.tsx
index c4d282ca3..1f4ebf8c2 100644
--- a/querybook/webapp/components/QueryComposer/QueryComposer.tsx
+++ b/querybook/webapp/components/QueryComposer/QueryComposer.tsx
@@ -188,7 +188,7 @@ function useQueryEditorHelpers() {
     };
 }
 
-export const QueryComposer: React.FC = () => {
+const QueryComposer: React.FC = () => {
     useBrowserTitle('Adhoc Query');
 
     const environmentId = useSelector(
@@ -370,3 +370,5 @@ export const QueryComposer: React.FC = () => {
         </FullHeight>
     );
 };
+
+export default QueryComposer;
diff --git a/querybook/webapp/components/QuerySnippetRoute/QuerySnippetRoute.tsx b/querybook/webapp/components/QuerySnippetRoute/QuerySnippetRoute.tsx
index eb9fd98a6..591b7cdf1 100644
--- a/querybook/webapp/components/QuerySnippetRoute/QuerySnippetRoute.tsx
+++ b/querybook/webapp/components/QuerySnippetRoute/QuerySnippetRoute.tsx
@@ -6,7 +6,7 @@ import { useModalRoute } from 'hooks/useModalRoute';
 import { Modal } from 'ui/Modal/Modal';
 import { QuerySnippetWrapper } from './QuerySnippetWrapper';
 
-export const QuerySnippetRoute: React.FunctionComponent<RouteComponentProps> = ({
+const QuerySnippetRoute: React.FunctionComponent<RouteComponentProps> = ({
     location,
     match,
 }) => {
@@ -21,3 +21,5 @@ export const QuerySnippetRoute: React.FunctionComponent<RouteComponentProps> = (
         contentDOM
     );
 };
+
+export default QuerySnippetRoute;