diff --git a/frontend/src/routes/admin.js b/frontend/src/routes/admin.js
index a0746203e..62e99a4c7 100644
--- a/frontend/src/routes/admin.js
+++ b/frontend/src/routes/admin.js
@@ -1,11 +1,11 @@
-import Admin from "@/pages/Admin";
-import Migration from "@/pages/Admin/Migration";
-import Profile from "@/pages/Admin/Profile";
-import ManageUsers from "@/pages/Admin/ManageUsers";
-import Settings from "@/pages/Admin/Settings";
-import About from "@/pages/Admin/About";
-import ToolBox from "@/pages/Admin/ToolBox";
-import Dashboard from "@/pages/Admin/Dashboard";
+const Admin = () => import("@/pages/Admin");
+const Migration = () => import("@/pages/Admin/Migration");
+const Profile = () => import("@/pages/Admin/Profile");
+const ManageUsers = () => import("@/pages/Admin/ManageUsers");
+const Settings = () => import("@/pages/Admin/Settings");
+const About = () => import("@/pages/Admin/About");
+const ToolBox = () => import("@/pages/Admin/ToolBox");
+const Dashboard = () => import("@/pages/Admin/Dashboard");
 import { store } from "../store";
 
 export const adminRoutes = {
diff --git a/frontend/src/routes/auth.js b/frontend/src/routes/auth.js
index b607e5c82..742472dd3 100644
--- a/frontend/src/routes/auth.js
+++ b/frontend/src/routes/auth.js
@@ -1,5 +1,5 @@
-import LoginPage from "@/pages/LoginPage";
-import SignUpPage from "@/pages/SignUpPage";
+const LoginPage = () => import("@/pages/LoginPage");
+const SignUpPage = () => import("@/pages/SignUpPage");
 import { store } from "../store";
 
 export const authRoutes = [
diff --git a/frontend/src/routes/general.js b/frontend/src/routes/general.js
index 897ba9061..f7802fa94 100644
--- a/frontend/src/routes/general.js
+++ b/frontend/src/routes/general.js
@@ -1,6 +1,6 @@
-import SearchPage from "@/pages/SearchPage";
+const SearchPage = () => import("@/pages/SearchPage");
+const ShoppingList = () => import("@/pages/ShoppingList");
 import HomePage from "@/pages/HomePage";
-import ShoppingList from "@/pages/ShoppingList";
 
 export const generalRoutes = [
   { path: "/", name: "home", component: HomePage },
diff --git a/frontend/src/routes/meal.js b/frontend/src/routes/meal.js
index e79e8861b..5dfc042d7 100644
--- a/frontend/src/routes/meal.js
+++ b/frontend/src/routes/meal.js
@@ -1,9 +1,8 @@
-import Planner from "@/pages/MealPlan/Planner";
-import ThisWeek from "@/pages/MealPlan/ThisWeek";
+const Planner = () => import("@/pages/MealPlan/Planner");
+const ThisWeek = () => import("@/pages/MealPlan/ThisWeek");
 import { api } from "@/api";
-
-import i18n from "@/i18n.js";
 import { utils } from "@/utils";
+import i18n from "@/i18n.js";
 
 export const mealRoutes = [
   {
diff --git a/frontend/src/routes/recipes.js b/frontend/src/routes/recipes.js
index dbf52ae22..77ae04d38 100644
--- a/frontend/src/routes/recipes.js
+++ b/frontend/src/routes/recipes.js
@@ -1,8 +1,8 @@
-import ViewRecipe from "@/pages/Recipe/ViewRecipe";
-import NewRecipe from "@/pages/Recipe/NewRecipe";
-import CustomPage from "@/pages/Recipes/CustomPage";
-import AllRecipes from "@/pages/Recipes/AllRecipes";
-import CategoryTagPage from "@/pages/Recipes/CategoryTagPage";
+const ViewRecipe = () => import("@/pages/Recipe/ViewRecipe");
+const NewRecipe = () => import("@/pages/Recipe/NewRecipe");
+const CustomPage = () => import("@/pages/Recipes/CustomPage");
+const AllRecipes = () => import("@/pages/Recipes/AllRecipes");
+const CategoryTagPage = () => import("@/pages/Recipes/CategoryTagPage");
 import { api } from "@/api";
 
 export const recipeRoutes = [