diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dc27a2c..423f39f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
+        "@solidjs/router": "^0.14.7",
         "beercss": "^3.7.8",
         "solid-js": "^1.8.11"
       },
@@ -1271,6 +1272,15 @@
         "solid-js": "^1.6.12"
       }
     },
+    "node_modules/@solidjs/router": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.14.7.tgz",
+      "integrity": "sha512-agLf8AUz5XnW6+F64a4Iq+QQQobI5zGHQ/gUYd/WHSwcbnFpavbsiwRLob3YhWMXVX3sQyn4ekUN+uchMCRupw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "solid-js": "^1.8.6"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1d03509..22cc414 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "vite-plugin-solid": "^2.8.2"
   },
   "dependencies": {
+    "@solidjs/router": "^0.14.7",
     "beercss": "^3.7.8",
     "solid-js": "^1.8.11"
   }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d601315..af930c7 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,7 +4,7 @@ import { createSignal } from 'solid-js';
 import TopBar from './components/TopBar';
 import DrawerMenu from './components/DrawerMenu';
 
-function App() {
+function App(props) {
     const [menuOpen, setMenuOpen] = createSignal(false);
 
     return (
@@ -14,14 +14,7 @@ function App() {
                 <DrawerMenu menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
             </header>
             <main class="responsive">
-                <div class="grid">
-                    <div class="s6">
-                        <h3>Hello world!</h3>
-                    </div>
-                    <div class="s6">
-                        <h3>Content goes here.</h3>
-                    </div>
-                </div>
+                {props.children}
             </main>
             <footer>
             </footer>
diff --git a/frontend/src/index.jsx b/frontend/src/index.jsx
index dda4b7b..482d606 100644
--- a/frontend/src/index.jsx
+++ b/frontend/src/index.jsx
@@ -1,8 +1,16 @@
 /* @refresh reload */
 import { render } from 'solid-js/web';
+import { Router, Route } from '@solidjs/router';
 
 import './index.css';
 import App from './App';
+import Splash from './pages/Splash';
+import NotFound from './pages/NotFound';
+import Recipe from './pages/Recipe';
+import Login from './pages/Login';
+import Recipes from './pages/Recipes';
+import MealPlanner from './pages/MealPlanner';
+import Settings from './pages/Settings';
 
 const root = document.getElementById('root');
 
@@ -12,4 +20,16 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
     );
 }
 
-render(() => <App />, root);
+render(
+    () => (
+        <Router root={App}>
+            <Route path="/mealplanner" component={MealPlanner} />
+            <Route path="/recipes" component={Recipes} />
+            <Route path="/recipes/:id" component={Recipe} />
+            <Route path="/settings" component={Settings} />
+            <Route path="/login" component={Login} />
+            <Route path="/" component={Splash} />
+            <Route path="*" component={NotFound} />
+        </Router>
+    ),
+    root);
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index e69de29..a1e43b2 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,9 @@
+function Login() {
+    return (
+        <div>
+            <h3>LOGIN</h3>
+        </div>
+    );
+}
+
+export default Login;
diff --git a/frontend/src/pages/MealPlanner.jsx b/frontend/src/pages/MealPlanner.jsx
index e69de29..4f92b02 100644
--- a/frontend/src/pages/MealPlanner.jsx
+++ b/frontend/src/pages/MealPlanner.jsx
@@ -0,0 +1,9 @@
+function MealPlanner() {
+    return (
+        <div>
+            <h3>MEAL PLANNER</h3>
+        </div>
+    );
+}
+
+export default MealPlanner;
diff --git a/frontend/src/pages/NotFound.jsx b/frontend/src/pages/NotFound.jsx
index e69de29..13086be 100644
--- a/frontend/src/pages/NotFound.jsx
+++ b/frontend/src/pages/NotFound.jsx
@@ -0,0 +1,9 @@
+function NotFound() {
+    return (
+        <div>
+            <h3>404 NOT FOUND</h3>
+        </div>
+    );
+}
+
+export default NotFound;
diff --git a/frontend/src/pages/Recipe.jsx b/frontend/src/pages/Recipe.jsx
index e69de29..3b7f157 100644
--- a/frontend/src/pages/Recipe.jsx
+++ b/frontend/src/pages/Recipe.jsx
@@ -0,0 +1,9 @@
+function Recipe() {
+    return (
+        <div>
+            <h3>RECIPE</h3>
+        </div>
+    );
+}
+
+export default Recipe;
diff --git a/frontend/src/pages/Recipes.jsx b/frontend/src/pages/Recipes.jsx
index e69de29..177800e 100644
--- a/frontend/src/pages/Recipes.jsx
+++ b/frontend/src/pages/Recipes.jsx
@@ -0,0 +1,9 @@
+function Recipes() {
+    return (
+        <div>
+            <h3>RECIPES</h3>
+        </div>
+    );
+}
+
+export default Recipes;
diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index e69de29..dea5083 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -0,0 +1,9 @@
+function Settings() {
+    return (
+        <div>
+            <h3>SETTINGS</h3>
+        </div>
+    );
+}
+
+export default Settings;
diff --git a/frontend/src/pages/Splash.jsx b/frontend/src/pages/Splash.jsx
index e69de29..0514f3d 100644
--- a/frontend/src/pages/Splash.jsx
+++ b/frontend/src/pages/Splash.jsx
@@ -0,0 +1,10 @@
+function Splash() {
+    return (
+        <div>
+            <h3>SPLASH</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+        </div>
+    );
+}
+
+export default Splash;
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
deleted file mode 100644
index 643dad9..0000000
--- a/frontend/src/routes.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Splash from './pages/Splash';
-import Login from './pages/Login';
-import Recipes from './pages/Recipes';
-import Recipe from './pages/Recipe';
-import MealPlanner from './pages/MealPlanner';
-import Settings from './pages/Settings';
-import NotFound from './pages/NotFound';
-
-export const routes = [
-    {
-        path: '/',
-        component: Splash,
-    },
-    {
-        path: '/login',
-        component: Login,
-    },
-    {
-        path: '/recipes',
-        component: Recipes,
-    },
-    {
-        path: '/recipe/:id',
-        component: Recipe,
-    },
-    {
-        path: '/mealplanner',
-        component: MealPlanner,
-    },
-    {
-        path: '/settings',
-        component: Settings,
-    },
-    {
-        path: '**',
-        component: NotFound,
-    }
-];