diff --git a/package-lock.json b/package-lock.json
index 1da289304..859667e1c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "jbi-svelte",
 			"version": "0.0.1",
 			"dependencies": {
+				"@prismicio/helpers": "^2.3.8",
 				"boxicons": "^2.1.4"
 			},
 			"devDependencies": {
@@ -410,7 +411,6 @@
 			"version": "2.3.8",
 			"resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.8.tgz",
 			"integrity": "sha512-YHkEI2gHBRtNbMIEY8+ao9TLAqAMJSPbhGOAX9hiXHofcKSCBrpd9zaMxKNo5iXCWHnyBk1dsTsWXjKx0d1Rew==",
-			"dev": true,
 			"dependencies": {
 				"@prismicio/richtext": "^2.1.3",
 				"@prismicio/types": "^0.2.7",
@@ -425,7 +425,6 @@
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.4.tgz",
 			"integrity": "sha512-hyC8XItj+2yMmLGNjg9xGA/lRMO5UgbPF132VFrpZHzHhtIKvHN3iYxCZxnrEoPaTcT6JjA8vWyYLjmmB49bvw==",
-			"dev": true,
 			"dependencies": {
 				"@prismicio/types": "^0.2.7"
 			},
@@ -437,7 +436,6 @@
 			"version": "0.2.7",
 			"resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.7.tgz",
 			"integrity": "sha512-xHPBWg+lPcl8U97VB/2oYK3MJlQoVPZq91hbeQO8WRyvq+zgpNST3xFOTk8SkQpgoH6wd50AxGZELvPrpojajQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=12.7.0"
 			}
@@ -655,8 +653,7 @@
 		"node_modules/escape-html": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-			"dev": true
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
 		},
 		"node_modules/esm-env": {
 			"version": "1.0.0",
@@ -730,7 +727,6 @@
 			"version": "0.0.3",
 			"resolved": "https://registry.npmjs.org/imgix-url-builder/-/imgix-url-builder-0.0.3.tgz",
 			"integrity": "sha512-8Oc2Cn4+jF06sEfJcVPlWYfD2F6RjrwIMbk1xEzux8unoB5LsvFc/GL1BQ47HPaeE12ReX2nMUcjUslGYWLxHA==",
-			"dev": true,
 			"engines": {
 				"node": ">=12.7.0"
 			}
@@ -1437,7 +1433,6 @@
 			"version": "2.3.8",
 			"resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.8.tgz",
 			"integrity": "sha512-YHkEI2gHBRtNbMIEY8+ao9TLAqAMJSPbhGOAX9hiXHofcKSCBrpd9zaMxKNo5iXCWHnyBk1dsTsWXjKx0d1Rew==",
-			"dev": true,
 			"requires": {
 				"@prismicio/richtext": "^2.1.3",
 				"@prismicio/types": "^0.2.7",
@@ -1449,7 +1444,6 @@
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.4.tgz",
 			"integrity": "sha512-hyC8XItj+2yMmLGNjg9xGA/lRMO5UgbPF132VFrpZHzHhtIKvHN3iYxCZxnrEoPaTcT6JjA8vWyYLjmmB49bvw==",
-			"dev": true,
 			"requires": {
 				"@prismicio/types": "^0.2.7"
 			}
@@ -1457,8 +1451,7 @@
 		"@prismicio/types": {
 			"version": "0.2.7",
 			"resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.7.tgz",
-			"integrity": "sha512-xHPBWg+lPcl8U97VB/2oYK3MJlQoVPZq91hbeQO8WRyvq+zgpNST3xFOTk8SkQpgoH6wd50AxGZELvPrpojajQ==",
-			"dev": true
+			"integrity": "sha512-xHPBWg+lPcl8U97VB/2oYK3MJlQoVPZq91hbeQO8WRyvq+zgpNST3xFOTk8SkQpgoH6wd50AxGZELvPrpojajQ=="
 		},
 		"@sveltejs/adapter-auto": {
 			"version": "1.0.2",
@@ -1628,8 +1621,7 @@
 		"escape-html": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-			"dev": true
+			"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
 		},
 		"esm-env": {
 			"version": "1.0.0",
@@ -1692,8 +1684,7 @@
 		"imgix-url-builder": {
 			"version": "0.0.3",
 			"resolved": "https://registry.npmjs.org/imgix-url-builder/-/imgix-url-builder-0.0.3.tgz",
-			"integrity": "sha512-8Oc2Cn4+jF06sEfJcVPlWYfD2F6RjrwIMbk1xEzux8unoB5LsvFc/GL1BQ47HPaeE12ReX2nMUcjUslGYWLxHA==",
-			"dev": true
+			"integrity": "sha512-8Oc2Cn4+jF06sEfJcVPlWYfD2F6RjrwIMbk1xEzux8unoB5LsvFc/GL1BQ47HPaeE12ReX2nMUcjUslGYWLxHA=="
 		},
 		"import-meta-resolve": {
 			"version": "2.2.1",
diff --git a/package.json b/package.json
index e71f84c98..3dcf90d41 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@prismicio/helpers": "^2.3.8",
 		"boxicons": "^2.1.4"
 	}
 }
diff --git a/src/components/+nav.svelte b/src/components/+nav.svelte
new file mode 100644
index 000000000..edbfd80c9
--- /dev/null
+++ b/src/components/+nav.svelte
@@ -0,0 +1,27 @@
+<script>
+  import { page } from "$app/stores";
+</script>
+
+<nav>
+    <h1>logo</h1>
+    <ul>
+        <li><a href="/">Home</a></li>
+        <li><a href="/diensten">Diensten</a></li>
+        <li><a href="/over">Over ons</a>/li>
+        <li><a href="/contact">Contact</a></li>
+    </ul>
+</nav>
+
+<style>
+  /* NAV MENU */
+  nav {
+    display: flex;
+    max-width: 1000px;
+    width: 100%;
+    margin: 0 auto;
+    justify-content: space-between;
+  }
+  ul{
+    display: flex;
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 000000000..89637c655
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,12 @@
+<script>
+ import { page } from "$app/stores";
+ import Nav from "../components/+nav.svelte";
+
+
+</script>
+
+<header>
+    <Nav></Nav>
+</header>
+<slot/>
+
diff --git a/src/routes/+page.js b/src/routes/+page.js
new file mode 100644
index 000000000..d0de30cac
--- /dev/null
+++ b/src/routes/+page.js
@@ -0,0 +1,17 @@
+import createClient from "$lib/vendors/prismicClient.js";
+
+export async function load({ fetch, request }) {
+  
+  const client = createClient({ fetch, request })
+  const documents = await client.getAllByType('homepage')
+
+    if (documents) {
+        return { 
+          documents
+        }
+    }
+
+    return {
+        status: 404,
+    }
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5982b0ae3..4cc2bd1ec 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,14 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+      import * as prismicH from "@prismicio/helpers";
+      
+      export let data;
+      const textfield = data.documents[0].data.ritch_text_field
+      console.log(data.documents[0].data.ritch_text_field)
+</script>
+
+<h1>Dit is de home pagina</h1>
+
+<h2>api data</h2>
+{@html prismicH.asHTML(textfield)}
+
+<!-- <pre>{JSON.stringify(data, null, 2)}</pre> -->
diff --git a/src/routes/contact/+page.js b/src/routes/contact/+page.js
new file mode 100644
index 000000000..f6779c050
--- /dev/null
+++ b/src/routes/contact/+page.js
@@ -0,0 +1,17 @@
+import createClient from "$lib/vendors/prismicClient.js";
+
+export async function load({ fetch, request }) {
+  
+  const client = createClient({ fetch, request })
+  const documents = await client.getAllByType('page')
+
+    if (documents) {
+        return { 
+          documents
+        }
+    }
+
+    return {
+        status: 404,
+    }
+}
\ No newline at end of file
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
new file mode 100644
index 000000000..8a9d62678
--- /dev/null
+++ b/src/routes/contact/+page.svelte
@@ -0,0 +1,8 @@
+<script>
+      export let data;
+      console.log(data.documents)
+</script>
+
+<h1>contact pagina</h1>
+
+<pre>{JSON.stringify(data, null, 2)}</pre>