diff --git a/appinfo/routes.php b/appinfo/routes.php
index cae6f6d..f2b27a0 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -45,14 +45,24 @@
 		['name' => 'dashboard#page', 'url' => '/', 'verb' => 'GET'],
 		['name' => 'configuration#index', 'url' => '/api/configuration', 'verb' => 'GET'],
 		['name' => 'configuration#create', 'url' => '/api/configuration', 'verb' => 'POST'],
+		['name' => 'contactMomenten#page', 'url' => '/contactmomenten', 'verb' => 'GET'],
+		['name' => 'contactMomenten#page', 'postfix' => 'details', 'url' => '/contactmomenten/{id}', 'verb' => 'GET'],
 		['name' => 'zaken#page', 'url' => '/zaken', 'verb' => 'GET'],
+		['name' => 'zaken#page', 'postfix'  => 'details', 'url' => '/zaken/{id}', 'verb' => 'GET'],
 		['name' => 'rollen#page', 'url' => '/rollen', 'verb' => 'GET'],
 		['name' => 'statussen#page', 'url' => '/statussen', 'verb' => 'GET'],
 		['name' => 'zaakinformatieobjecten#page', 'url' => '/zaakinformatieobjecten', 'verb' => 'GET'],
-		['name' => 'zaakTypen#page','url' => '/zaak_typen', 'verb' => 'GET'],
+		['name' => 'zaakTypen#page','url' => '/zaaktypen', 'verb' => 'GET'],
+		['name' => 'zaakTypen#page','postfix' => 'details', 'url' => '/zaaktypen/{id}', 'verb' => 'GET'],
 		['name' => 'taken#page','url' => '/taken', 'verb' => 'GET'],
+		['name' => 'taken#page','postfix' => 'details', 'url' => '/taken/{id}', 'verb' => 'GET'],
 		['name' => 'klanten#page','url' => '/klanten', 'verb' => 'GET'],
-		['name' => 'berichten#index','url' => '/berichten', 'verb' => 'GET'],
+		['name' => 'klanten#page','postfix' => 'details', 'url' => '/klanten/{id}', 'verb' => 'GET'],
+		['name' => 'medewerkers#page','url' => '/medewerkers', 'verb' => 'GET'],
+		['name' => 'medewerkers#page','postfix' => 'details', 'url' => '/medewerkers/{id}', 'verb' => 'GET'],
+		['name' => 'berichten#page','url' => '/berichten', 'verb' => 'GET'],
+		['name' => 'berichten#page','postfix' => 'details', 'url' => '/berichten/{id}', 'verb' => 'GET'],
+		['name' => 'dashboard#page', 'postfix' => 'search', 'url' => '/zoeken', 'verb' => 'GET'],
 		// user Settings
 		['name' => 'settings#index','url' => '/settings', 'verb' => 'GET'],
 		['name' => 'settings#create', 'url' => '/settings', 'verb' => 'POST'],
diff --git a/lib/Controller/BerichtenController.php b/lib/Controller/BerichtenController.php
index bef5944..f3fb8ce 100644
--- a/lib/Controller/BerichtenController.php
+++ b/lib/Controller/BerichtenController.php
@@ -6,6 +6,8 @@
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 
 class BerichtenController extends Controller
 {
@@ -39,6 +41,42 @@ public function index(): JSONResponse
 		 return new JSONResponse($data);
 	}
 
+    /**
+     * Render no page.
+     *
+     * @param string|null $getParameter Optional GET parameter
+     * @return TemplateResponse The rendered template response
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function page(?string $getParameter): TemplateResponse
+    {
+        try {
+            // Create a new TemplateResponse for the index page
+            $response = new TemplateResponse(
+                $this->appName,
+                'index',
+                []
+            );
+            
+            // Set up Content Security Policy
+            $csp = new ContentSecurityPolicy();
+            $csp->addAllowedConnectDomain('*');
+            $response->setContentSecurityPolicy($csp);
+
+            return $response;
+        } catch (\Exception $e) {
+            // Return an error template response if an exception occurs
+            return new TemplateResponse(
+                $this->appName,
+                'error',
+                ['error' => $e->getMessage()],
+                '500'
+            );
+        }
+    }
+
 	/**
 	 * Read a single object
 	 *
diff --git a/lib/Controller/ContactMomentenController.php b/lib/Controller/ContactMomentenController.php
index 05a1fd4..cec2b96 100644
--- a/lib/Controller/ContactMomentenController.php
+++ b/lib/Controller/ContactMomentenController.php
@@ -6,6 +6,8 @@
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 
 /**
  * Controller for handling contact moments (contactmomenten) operations
@@ -41,6 +43,42 @@ public function index(): JSONResponse
 		 return new JSONResponse($data);
 	}
 
+    /**
+     * Render no page.
+     *
+     * @param string|null $getParameter Optional GET parameter
+     * @return TemplateResponse The rendered template response
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function page(?string $getParameter): TemplateResponse
+    {
+        try {
+            // Create a new TemplateResponse for the index page
+            $response = new TemplateResponse(
+                $this->appName,
+                'index',
+                []
+            );
+            
+            // Set up Content Security Policy
+            $csp = new ContentSecurityPolicy();
+            $csp->addAllowedConnectDomain('*');
+            $response->setContentSecurityPolicy($csp);
+
+            return $response;
+        } catch (\Exception $e) {
+            // Return an error template response if an exception occurs
+            return new TemplateResponse(
+                $this->appName,
+                'error',
+                ['error' => $e->getMessage()],
+                '500'
+            );
+        }
+    }
+
 	/**
 	 * Read a single contact moment
 	 *
diff --git a/lib/Controller/KlantenController.php b/lib/Controller/KlantenController.php
index b6e8fe8..83639be 100644
--- a/lib/Controller/KlantenController.php
+++ b/lib/Controller/KlantenController.php
@@ -6,6 +6,8 @@
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 
 class KlantenController extends Controller
 {
@@ -41,6 +43,42 @@ public function index(): JSONResponse
         return new JSONResponse($data);
     }
 
+    /**
+     * Render no page.
+     *
+     * @param string|null $getParameter Optional GET parameter
+     * @return TemplateResponse The rendered template response
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function page(?string $getParameter): TemplateResponse
+    {
+        try {
+            // Create a new TemplateResponse for the index page
+            $response = new TemplateResponse(
+                $this->appName,
+                'index',
+                []
+            );
+            
+            // Set up Content Security Policy
+            $csp = new ContentSecurityPolicy();
+            $csp->addAllowedConnectDomain('*');
+            $response->setContentSecurityPolicy($csp);
+
+            return $response;
+        } catch (\Exception $e) {
+            // Return an error template response if an exception occurs
+            return new TemplateResponse(
+                $this->appName,
+                'error',
+                ['error' => $e->getMessage()],
+                '500'
+            );
+        }
+    }
+
     /**
      * Read a single object
      *
diff --git a/lib/Controller/MedewerkersController.php b/lib/Controller/MedewerkersController.php
index 751d052..29dff0e 100644
--- a/lib/Controller/MedewerkersController.php
+++ b/lib/Controller/MedewerkersController.php
@@ -6,6 +6,8 @@
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 
 /**
  * Controller for handling employees (medewerkers) operations
@@ -41,6 +43,42 @@ public function index(): JSONResponse
 		 return new JSONResponse($data);
 	}
 
+    /**
+     * Render no page.
+     *
+     * @param string|null $getParameter Optional GET parameter
+     * @return TemplateResponse The rendered template response
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function page(?string $getParameter): TemplateResponse
+    {
+        try {
+            // Create a new TemplateResponse for the index page
+            $response = new TemplateResponse(
+                $this->appName,
+                'index',
+                []
+            );
+            
+            // Set up Content Security Policy
+            $csp = new ContentSecurityPolicy();
+            $csp->addAllowedConnectDomain('*');
+            $response->setContentSecurityPolicy($csp);
+
+            return $response;
+        } catch (\Exception $e) {
+            // Return an error template response if an exception occurs
+            return new TemplateResponse(
+                $this->appName,
+                'error',
+                ['error' => $e->getMessage()],
+                '500'
+            );
+        }
+    }
+
 	/**
 	 * Read a single employee
 	 *
diff --git a/lib/Controller/TakenController.php b/lib/Controller/TakenController.php
index fed3e4d..7a046e2 100644
--- a/lib/Controller/TakenController.php
+++ b/lib/Controller/TakenController.php
@@ -1,142 +1,180 @@
-<?php
-
-namespace OCA\ZaakAfhandelApp\Controller;
-
-use OCA\ZaakAfhandelApp\Service\MailService;
-use OCA\ZaakAfhandelApp\Service\ObjectService;
-use OCP\AppFramework\Controller;
-use OCP\AppFramework\Http\JSONResponse;
-use OCP\IRequest;
-
-class TakenController extends Controller
-{
-    public function __construct(
-        $appName,
-        IRequest $request,
-		private readonly MailService $mailService,
-        private readonly ObjectService $objectService,
-    ) {
-        parent::__construct($appName, $request);
-    }
-
-
-	/**
-	 * Return (and serach) all objects
-	 *
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return JSONResponse
-	 */
-	public function index(): JSONResponse
-	{
-		 // Retrieve all request parameters
-		 $requestParams = $this->request->getParams();
-
-		 // Fetch catalog objects based on filters and order
-		 $data = $this->objectService->getResultArrayForRequest('taken', $requestParams);
-
-		 // Return JSON response
-		 return new JSONResponse($data);
-	}
-
-	/**
-	 * Read a single object
-	 *
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return JSONResponse
-	 */
-	public function show(string $id): JSONResponse
-	{
-        // Fetch the catalog object by its ID
-        $object = $this->objectService->getObject('taken', $id);
-
-        // Return the catalog as a JSON response
-        return new JSONResponse($object);
-	}
-
-
-	/**
-	 * Creatue an object
-	 *
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return JSONResponse
-	 */
-	public function create(): JSONResponse
-	{
-        // Get all parameters from the request
-        $data = $this->request->getParams();
-
-        // Remove the 'id' field if it exists, as we're creating a new object
-        unset($data['id']);
-
-        // Save the new catalog object
-        $object = $this->objectService->saveObject('taken', $data);
-
-		$this->mailService->sendMail([], is_array($object) === true ? $object : $object->jsonSerialize());
-
-        // Return the created object as a JSON response
-        return new JSONResponse($object);
-	}
-
-	/**
-	 * Update an object
-	 *
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return JSONResponse
-	 */
-	public function update(string $id): JSONResponse
-	{
-        // Get all parameters from the request
-        $data = $this->request->getParams();
-
-		$oldObject = $this->objectService->getObject('taken', $id);
-
-		$data['id'] = $id;
-
-        // Save the new catalog object
-        $object = $this->objectService->saveObject('taken', $data);
-
-		$this->mailService->sendMail(is_array($oldObject) === true ? $oldObject : $oldObject->jsonSerialize(), is_array($object) === true ? $object : $object->jsonSerialize());
-
-        // Return the created object as a JSON response
-        return new JSONResponse($object);
-	}
-
-	/**
-	 * Delate an object
-	 *
-	 * @NoAdminRequired
-	 * @NoCSRFRequired
-	 *
-	 * @return JSONResponse
-	 */
-	public function destroy(string $id): JSONResponse
-	{
-        // Delete the catalog object
-        $result = $this->objectService->deleteObject('taken', $id);
-
-        // Return the result as a JSON response
-		return new JSONResponse(['success' => $result], $result === true ? '200' : '404');
-	}
-
-	/**
-	* Get audit trail for a specific klant
-	*
-	* @NoAdminRequired
-	* @NoCSRFRequired
-	*
-	* @return JSONResponse
-	*/
-   public function getAuditTrail(string $id): JSONResponse
-   {
-	   $auditTrail = $this->objectService->getAuditTrail('taken', $id);
-	   return new JSONResponse($auditTrail);
-   }
-}
+<?php
+
+namespace OCA\ZaakAfhandelApp\Controller;
+
+use OCA\ZaakAfhandelApp\Service\MailService;
+use OCA\ZaakAfhandelApp\Service\ObjectService;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\IRequest;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
+
+class TakenController extends Controller
+{
+    public function __construct(
+        $appName,
+        IRequest $request,
+		private readonly MailService $mailService,
+        private readonly ObjectService $objectService,
+    ) {
+        parent::__construct($appName, $request);
+    }
+
+
+	/**
+	 * Return (and serach) all objects
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function index(): JSONResponse
+	{
+		 // Retrieve all request parameters
+		 $requestParams = $this->request->getParams();
+
+		 // Fetch catalog objects based on filters and order
+		 $data = $this->objectService->getResultArrayForRequest('taken', $requestParams);
+
+		 // Return JSON response
+		 return new JSONResponse($data);
+	}
+
+    /**
+     * Render no page.
+     *
+     * @param string|null $getParameter Optional GET parameter
+     * @return TemplateResponse The rendered template response
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function page(?string $getParameter): TemplateResponse
+    {
+        try {
+            // Create a new TemplateResponse for the index page
+            $response = new TemplateResponse(
+                $this->appName,
+                'index',
+                []
+            );
+            
+            // Set up Content Security Policy
+            $csp = new ContentSecurityPolicy();
+            $csp->addAllowedConnectDomain('*');
+            $response->setContentSecurityPolicy($csp);
+
+            return $response;
+        } catch (\Exception $e) {
+            // Return an error template response if an exception occurs
+            return new TemplateResponse(
+                $this->appName,
+                'error',
+                ['error' => $e->getMessage()],
+                '500'
+            );
+        }
+    }
+
+	/**
+	 * Read a single object
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function show(string $id): JSONResponse
+	{
+        // Fetch the catalog object by its ID
+        $object = $this->objectService->getObject('taken', $id);
+
+        // Return the catalog as a JSON response
+        return new JSONResponse($object);
+	}
+
+
+	/**
+	 * Creatue an object
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function create(): JSONResponse
+	{
+        // Get all parameters from the request
+        $data = $this->request->getParams();
+
+        // Remove the 'id' field if it exists, as we're creating a new object
+        unset($data['id']);
+
+        // Save the new catalog object
+        $object = $this->objectService->saveObject('taken', $data);
+
+		$this->mailService->sendMail([], is_array($object) === true ? $object : $object->jsonSerialize());
+
+        // Return the created object as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Update an object
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function update(string $id): JSONResponse
+	{
+        // Get all parameters from the request
+        $data = $this->request->getParams();
+
+		$oldObject = $this->objectService->getObject('taken', $id);
+
+		$data['id'] = $id;
+
+        // Save the new catalog object
+        $object = $this->objectService->saveObject('taken', $data);
+
+		$this->mailService->sendMail(is_array($oldObject) === true ? $oldObject : $oldObject->jsonSerialize(), is_array($object) === true ? $object : $object->jsonSerialize());
+
+        // Return the created object as a JSON response
+        return new JSONResponse($object);
+	}
+
+	/**
+	 * Delate an object
+	 *
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 *
+	 * @return JSONResponse
+	 */
+	public function destroy(string $id): JSONResponse
+	{
+        // Delete the catalog object
+        $result = $this->objectService->deleteObject('taken', $id);
+
+        // Return the result as a JSON response
+		return new JSONResponse(['success' => $result], $result === true ? '200' : '404');
+	}
+
+	/**
+	* Get audit trail for a specific klant
+	*
+	* @NoAdminRequired
+	* @NoCSRFRequired
+	*
+	* @return JSONResponse
+	*/
+   public function getAuditTrail(string $id): JSONResponse
+   {
+	   $auditTrail = $this->objectService->getAuditTrail('taken', $id);
+	   return new JSONResponse($auditTrail);
+   }
+}
diff --git a/lib/Controller/ZaakTypenController.php b/lib/Controller/ZaakTypenController.php
index ffed1e1..e7e5186 100644
--- a/lib/Controller/ZaakTypenController.php
+++ b/lib/Controller/ZaakTypenController.php
@@ -6,6 +6,8 @@
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 
 class ZaakTypenController extends Controller
 {
@@ -39,6 +41,42 @@ public function index(): JSONResponse
 		 return new JSONResponse($data);
 	}
 
+    /**
+     * Render no page.
+     *
+     * @param string|null $getParameter Optional GET parameter
+     * @return TemplateResponse The rendered template response
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function page(?string $getParameter): TemplateResponse
+    {
+        try {
+            // Create a new TemplateResponse for the index page
+            $response = new TemplateResponse(
+                $this->appName,
+                'index',
+                []
+            );
+            
+            // Set up Content Security Policy
+            $csp = new ContentSecurityPolicy();
+            $csp->addAllowedConnectDomain('*');
+            $response->setContentSecurityPolicy($csp);
+
+            return $response;
+        } catch (\Exception $e) {
+            // Return an error template response if an exception occurs
+            return new TemplateResponse(
+                $this->appName,
+                'error',
+                ['error' => $e->getMessage()],
+                '500'
+            );
+        }
+    }
+
 	/**
 	 * Read a single object
 	 *
diff --git a/lib/Controller/ZakenController.php b/lib/Controller/ZakenController.php
index 6e8529e..fa54500 100644
--- a/lib/Controller/ZakenController.php
+++ b/lib/Controller/ZakenController.php
@@ -6,6 +6,8 @@
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\IRequest;
+use OCP\AppFramework\Http\TemplateResponse;
+use OCP\AppFramework\Http\ContentSecurityPolicy;
 
 /**
  * Geeft invulling aan https://vng-realisatie.github.io/gemma-zaken/standaard/zaken/
@@ -41,6 +43,42 @@ public function index(): JSONResponse
         return new JSONResponse($data);
 	}
 
+	/**
+     * Render no page.
+     *
+     * @param string|null $getParameter Optional GET parameter
+     * @return TemplateResponse The rendered template response
+     *
+     * @NoAdminRequired
+     * @NoCSRFRequired
+     */
+    public function page(?string $getParameter): TemplateResponse
+    {
+        try {
+            // Create a new TemplateResponse for the index page
+            $response = new TemplateResponse(
+                $this->appName,
+                'index',
+                []
+            );
+            
+            // Set up Content Security Policy
+            $csp = new ContentSecurityPolicy();
+            $csp->addAllowedConnectDomain('*');
+            $response->setContentSecurityPolicy($csp);
+
+            return $response;
+        } catch (\Exception $e) {
+            // Return an error template response if an exception occurs
+            return new TemplateResponse(
+                $this->appName,
+                'error',
+                ['error' => $e->getMessage()],
+                '500'
+            );
+        }
+    }
+
 	/**
 	 * Read a single object
 	 *
diff --git a/package-lock.json b/package-lock.json
index 7ac9a80..5e35d3d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
                 "@nextcloud/dialogs": "^3.2.0",
                 "@nextcloud/initial-state": "^2.2.0",
                 "@nextcloud/l10n": "^2.0.1",
-                "@nextcloud/router": "^2.0.1",
+                "@nextcloud/router": "^2.1.2",
                 "@nextcloud/vue": "^8.12.0",
                 "bootstrap-vue": "^2.23.1",
                 "lodash": "^4.17.21",
@@ -23,6 +23,7 @@
                 "vue": "^2.7.14",
                 "vue-loading-overlay": "^3.4.3",
                 "vue-material-design-icons": "^5.3.0",
+                "vue-router": "^3.6.5",
                 "zod": "^3.23.8"
             },
             "devDependencies": {
@@ -3554,17 +3555,16 @@
             }
         },
         "node_modules/@nextcloud/router": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.2.1.tgz",
-            "integrity": "sha512-ZRc/WI0RaksEJMz08H/6LimIdP+1A1xTHThCYEghs7VgAKNp5917vT2OKSpG0cMRbIwk0ongFVt5FB5qjy/iFg==",
-            "license": "GPL-3.0-or-later",
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/@nextcloud/router/-/router-2.1.2.tgz",
+            "integrity": "sha512-Jj5fgjeHT1vVIgOyUGOeHfwk2KgaO77QGfqZAT6GWXvpAsN0mkqwljkg4FkHrQRouYqCE4VnJ5o8/w0DAN89tA==",
             "dependencies": {
-                "@nextcloud/typings": "^1.7.0",
+                "@nextcloud/typings": "^1.0.0",
                 "core-js": "^3.6.4"
             },
             "engines": {
-                "node": "^20.0.0",
-                "npm": "^10.0.0"
+                "node": "^16.0.0",
+                "npm": "^7.0.0 || ^8.0.0"
             }
         },
         "node_modules/@nextcloud/sharing": {
@@ -21872,8 +21872,7 @@
         "node_modules/vue-router": {
             "version": "3.6.5",
             "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
-            "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
-            "license": "MIT"
+            "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
         },
         "node_modules/vue-style-loader": {
             "version": "4.1.3",
diff --git a/package.json b/package.json
index 2be7d13..239e9f0 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@nextcloud/dialogs": "^3.2.0",
         "@nextcloud/initial-state": "^2.2.0",
         "@nextcloud/l10n": "^2.0.1",
-        "@nextcloud/router": "^2.0.1",
+        "@nextcloud/router": "^2.1.2",
         "@nextcloud/vue": "^8.12.0",
         "bootstrap-vue": "^2.23.1",
         "lodash": "^4.17.21",
@@ -34,6 +34,7 @@
         "vue": "^2.7.14",
         "vue-loading-overlay": "^3.4.3",
         "vue-material-design-icons": "^5.3.0",
+        "vue-router": "^3.6.5",
         "zod": "^3.23.8"
     },
     "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 2a2f5b2..b2612fe 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
 	<NcContent app-name="zaakafhandelapp">
 		<MainMenu />
-		<Views />
+		<RouterView />
 		<SideBars />
 		<Modals />
 		<Dialogs />
@@ -9,12 +9,11 @@
 </template>
 
 <script>
-
 import { NcContent } from '@nextcloud/vue'
+import { RouterView } from 'vue-router'
 import MainMenu from './navigation/MainMenu.vue'
 import Modals from './modals/Modals.vue'
 import Dialogs from './dialogs/Dialogs.vue'
-import Views from './views/Views.vue'
 import SideBars from './sidebars/SideBars.vue'
 
 export default {
@@ -22,9 +21,9 @@ export default {
 	components: {
 		NcContent,
 		MainMenu,
+		RouterView,
 		Modals,
 		Dialogs,
-		Views,
 		SideBars,
 	},
 }
diff --git a/src/main.js b/src/main.js
index 6481955..c99c726 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,7 @@ import { PiniaVuePlugin } from 'pinia'
 import pinia from './pinia.js'
 import App from './App.vue'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import router from './router/router.ts'
 
 Vue.mixin({ methods: { t, n } })
 
@@ -13,6 +14,7 @@ Vue.directive('tooltip', Tooltip)
 new Vue(
 	{
 		pinia,
+		router,
 		render: h => h(App),
 	},
 ).$mount('#content')
diff --git a/src/navigation/MainMenu.vue b/src/navigation/MainMenu.vue
index 5e7f75d..51157c1 100644
--- a/src/navigation/MainMenu.vue
+++ b/src/navigation/MainMenu.vue
@@ -12,89 +12,100 @@ import { navigationStore } from '../store/store.js'
 					<Plus :size="20" />
 				</template>
 			</NcAppNavigationNew>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'dashboard'"
-				name="Dashboard"
-				@click="navigationStore.setSelected('dashboard')">
-				<template #icon>
-					<Finance :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'zaken'"
-				name="Zaken"
-				@click="navigationStore.setSelected('zaken')">
-				<template #icon>
-					<BriefcaseAccountOutline :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'taken'"
-				name="Taken"
-				@click="navigationStore.setSelected('taken')">
-				<template #icon>
-					<CalendarMonthOutline :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'klanten'"
-				name="Klanten"
-				@click="navigationStore.setSelected('klanten')">
-				<template #icon>
-					<AccountGroupOutline :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'medewerkers'"
-				name="Medewerkers"
-				@click="navigationStore.setSelected('medewerkers')">
-				<template #icon>
-					<AccountGroupOutline :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'contactMomenten'"
-				name="Contact momenten"
-				@click="navigationStore.setSelected('contactMomenten')">
-				<template #icon>
-					<CardAccountPhoneOutline :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'berichten'"
-				name="Berichten"
-				@click="navigationStore.setSelected('berichten')">
-				<template #icon>
-					<ChatOutline :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'search'"
-				name="Zoeken"
-				@click="navigationStore.setSelected('search')">
-				<template #icon>
-					<Magnify :size="20" />
-				</template>
-			</NcAppNavigationItem>
+
+			<router-link to="/">
+				<NcAppNavigationItem
+					:active="$route.path === '/'"
+					name="Dashboard">
+					<template #icon>
+						<Finance :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/zaken">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/zaken')"
+					name="Zaken">
+					<template #icon>
+						<BriefcaseAccountOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/taken">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/taken')"
+					name="Taken">
+					<template #icon>
+						<CalendarMonthOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/klanten">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/klanten')"
+					name="Klanten">
+					<template #icon>
+						<AccountGroupOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/medewerkers">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/medewerkers')"
+					name="Medewerkers">
+					<template #icon>
+						<AccountGroupOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/contactmomenten">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/contactmomenten')"
+					name="Contact momenten">
+					<template #icon>
+						<CardAccountPhoneOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/berichten">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/berichten')"
+					name="Berichten">
+					<template #icon>
+						<ChatOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/zoeken">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/zoeken')"
+					name="Zoeken">
+					<template #icon>
+						<Magnify :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
 		</NcAppNavigationList>
 
 		<NcAppNavigationSettings>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'zaakTypen'"
-				name="Zaak Typen"
-				@click="navigationStore.setSelected('zaakTypen')">
-				<template #icon>
-					<AlphaTBoxOutline :size="20" />
-				</template>
-			</NcAppNavigationItem>
-			<NcAppNavigationItem
-				:active="navigationStore.selected === 'auditTrail'"
-				name="Audit trail"
-				@click="navigationStore.setSelected('auditTrail')">
-				<template #icon>
-					<SortVariantLock :size="20" />
-				</template>
-			</NcAppNavigationItem>
+			<router-link to="/zaaktypen">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/zaaktypen')"
+					name="Zaak Typen">
+					<template #icon>
+						<AlphaTBoxOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
+			<router-link to="/auditTrail">
+				<NcAppNavigationItem
+					:active="$route.path.startsWith('/auditTrail')"
+					name="Audit trail">
+					<template #icon>
+						<SortVariantLock :size="20" />
+					</template>
+				</NcAppNavigationItem>
+			</router-link>
 			<Configuration />
 		</NcAppNavigationSettings>
 	</NcAppNavigation>
diff --git a/src/router/router.ts b/src/router/router.ts
new file mode 100644
index 0000000..8863978
--- /dev/null
+++ b/src/router/router.ts
@@ -0,0 +1,72 @@
+//  ===============================================
+//  Please do not touch this if you don't know what you're doing
+//  Even I barely know what I'm doing
+//
+//  If you want to learn more, ask GPT about things like nested routes
+//  ===============================================
+
+import type { RawLocation, Route } from 'vue-router'
+import type { ErrorHandler } from 'vue-router/types/router.d.ts'
+
+import { generateUrl } from '@nextcloud/router'
+import Router from 'vue-router'
+import Vue from 'vue'
+
+// Pages
+import Views from '../views/Views.vue'
+import DashboardIndex from '../views/dashboard/DashboardIndex.vue'
+
+// Prevent router from throwing errors when we're already on the page we're trying to go to
+const originalPush = Router.prototype.push as (to: any, onComplete?: any, onAbort?: any) => Promise<Route>
+Router.prototype.push = function push(to: RawLocation, onComplete?: ((route: Route) => void) | undefined, onAbort?: ErrorHandler | undefined): Promise<Route> {
+	if (onComplete || onAbort) return originalPush.call(this, to, onComplete, onAbort)
+	return originalPush.call(this, to).catch((err: any) => err)
+}
+
+Vue.use(Router)
+
+const router = new Router({
+	mode: 'history',
+
+	// if index.php is in the url AND we got this far, then it's working:
+	// let's keep using index.php in the url
+	base: generateUrl('/apps/zaakafhandelapp'),
+	linkActiveClass: 'active',
+
+	routes: [
+		{
+			path: '/',
+			component: Views,
+			children: [
+				{
+					path: '',
+					name: 'dashboard',
+					component: DashboardIndex,
+				},
+				// A generic route that captures the view name and optional ID
+				{
+					path: ':view/:id?',
+					name: 'dynamic-view',
+					// Instead of directly specifying a component here,
+					// we will let Views.vue handle dynamic component loading.
+					// So we can either define a placeholder component here or none.
+					// If we leave it empty, it means Views will have <router-view>
+					// and we dynamically load inside Views.
+					// But to keep it simple, let's just keep Views.vue responsible for it.
+					component: {
+						// A simple dummy component that just displays a <router-view />
+						// This can also be done by making Views handle directly.
+						// But let's assume Views.vue will have the <router-view />.
+						render(h: any) { return h('div', [h('router-view')]) },
+					},
+					// used to watch for changes in the views modal
+					// otherwise it wont reload the component
+					meta: { watchParam: 'id' },
+				},
+			],
+
+		},
+	],
+})
+
+export default router
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 0000000..b93ce22
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module '*.vue' {
+    import Vue from 'vue'
+    export default Vue
+}
diff --git a/src/sidebars/SideBars.vue b/src/sidebars/SideBars.vue
index b94fa7d..bb8b919 100644
--- a/src/sidebars/SideBars.vue
+++ b/src/sidebars/SideBars.vue
@@ -1,12 +1,8 @@
-<script setup>
-import { navigationStore } from '../store/store.js'
-</script>
-
 <template>
 	<div>
 		<!-- Placeholder div for all of the sidebars-->
-		<SearchSideBar v-if="navigationStore.selected === 'search'" />
-		<DashboardSideBar v-if="navigationStore.selected === 'dashboard'" />
+		<SearchSideBar v-if="$route.path.startsWith('/zoeken')" />
+		<DashboardSideBar v-if="$route.path === '/'" />
 	</div>
 </template>
 
diff --git a/src/sidebars/dashboard/DashboardSideBar.vue b/src/sidebars/dashboard/DashboardSideBar.vue
index 43a42d0..9dc8894 100644
--- a/src/sidebars/dashboard/DashboardSideBar.vue
+++ b/src/sidebars/dashboard/DashboardSideBar.vue
@@ -1,7 +1,3 @@
-<script setup>
-import { store } from '../../store.js'
-</script>
-
 <template>
 	<NcAppSidebar
 		name="Snelle start"
@@ -31,13 +27,10 @@ import { store } from '../../store.js'
 </template>
 <script>
 
-import { NcAppSidebar, NcAppSidebarTab, NcTextField, NcNoteCard, NcListItem, NcActionButton } from '@nextcloud/vue'
+import { NcAppSidebar, NcAppSidebarTab, NcNoteCard } from '@nextcloud/vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import BriefcaseAccountOutline from 'vue-material-design-icons/BriefcaseAccountOutline.vue'
 import CalendarMonthOutline from 'vue-material-design-icons/CalendarMonthOutline.vue'
-import Pencil from 'vue-material-design-icons/Pencil.vue'
-import Publish from 'vue-material-design-icons/Publish.vue'
-import Delete from 'vue-material-design-icons/Delete.vue'
 
 export default {
 	name: 'DashboardSideBar',
diff --git a/src/store/modules/berichten.js b/src/store/modules/berichten.js
index 286cd24..2aa2529 100644
--- a/src/store/modules/berichten.js
+++ b/src/store/modules/berichten.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { defineStore } from 'pinia'
 import { Bericht } from '../../entities/index.js'
+import router from '../../router/router.ts'
 
 const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/berichten'
 
@@ -86,6 +87,7 @@ export const useBerichtStore = defineStore('berichten', {
 			}
 
 			this.refreshBerichtenList()
+			router.push({ name: 'dynamic-view', params: { view: 'berichten' } })
 
 			return { response }
 		},
@@ -122,6 +124,7 @@ export const useBerichtStore = defineStore('berichten', {
 
 			this.setBerichtItem(data)
 			this.refreshBerichtenList()
+			router.push({ name: 'dynamic-view', params: { view: 'berichten', id: entity.id } })
 
 			return { response, data, entity }
 		},
diff --git a/src/store/modules/contactmoment.ts b/src/store/modules/contactmoment.ts
index 6f20257..6ae2b14 100644
--- a/src/store/modules/contactmoment.ts
+++ b/src/store/modules/contactmoment.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { defineStore } from 'pinia'
 import { ContactMoment, TContactMoment } from '../../entities/index.js'
+import router from '../../router/router'
 
 const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/contactmomenten'
 
@@ -124,6 +125,7 @@ export const useContactMomentStore = defineStore('contactmomenten', {
 			}
 
 			this.refreshContactMomentenList()
+			router.push({ name: 'dynamic-view', params: { view: 'contactmomenten' } })
 
 			return { response }
 		},
@@ -167,6 +169,7 @@ export const useContactMomentStore = defineStore('contactmomenten', {
 
 			this.setContactMomentItem(data)
 			this.refreshContactMomentenList()
+			router.push({ name: 'dynamic-view', params: { view: 'contactmomenten', id: entity.id } })
 
 			return { response, data, entity }
 		},
diff --git a/src/store/modules/klanten.js b/src/store/modules/klanten.js
index 7f4fc7e..f1de01f 100644
--- a/src/store/modules/klanten.js
+++ b/src/store/modules/klanten.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { defineStore } from 'pinia'
 import { Klant } from '../../entities/index.js'
+import router from '../../router/router.ts'
 
 const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/klanten'
 
@@ -168,6 +169,7 @@ export const useKlantStore = defineStore('klanten', {
 			}
 
 			this.refreshKlantenList()
+			router.push({ name: 'dynamic-view', params: { view: 'klanten' } })
 
 			return { response }
 		},
@@ -204,6 +206,7 @@ export const useKlantStore = defineStore('klanten', {
 
 			this.setKlantItem(data)
 			this.refreshKlantenList()
+			router.push({ name: 'dynamic-view', params: { view: 'klanten', id: entity.id } })
 
 			return { response, data, entity }
 		},
diff --git a/src/store/modules/medewerkers.js b/src/store/modules/medewerkers.js
index 28f7940..ec170eb 100644
--- a/src/store/modules/medewerkers.js
+++ b/src/store/modules/medewerkers.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { defineStore } from 'pinia'
 import { Medewerker } from '../../entities/index.js'
+import router from '../../router/router.ts'
 
 const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/medewerkers'
 
@@ -168,6 +169,7 @@ export const useMedewerkerStore = defineStore('medewerkers', {
 			}
 
 			this.refreshMedewerkersList()
+			router.push({ name: 'dynamic-view', params: { view: 'medewerkers' } })
 
 			return { response }
 		},
@@ -204,6 +206,7 @@ export const useMedewerkerStore = defineStore('medewerkers', {
 
 			this.setMedewerkerItem(data)
 			this.refreshMedewerkersList()
+			router.push({ name: 'dynamic-view', params: { view: 'medewerkers', id: entity.id } })
 
 			return { response, data, entity }
 		},
diff --git a/src/store/modules/navigation.ts b/src/store/modules/navigation.ts
index 79a521e..6a61e63 100644
--- a/src/store/modules/navigation.ts
+++ b/src/store/modules/navigation.ts
@@ -2,7 +2,6 @@
 import { defineStore } from 'pinia'
 
 interface NavigationStoreState {
-    selected: 'dashboard' | 'berichten' | 'klanten' | 'rollen' | 'taken' | 'zaken' | 'zaakTypen' | 'search' | 'auditTrail' | 'contactMomenten' | 'medewerkers';
     modal: string;
     viewModal: string;
     dialog: string;
@@ -11,8 +10,6 @@ interface NavigationStoreState {
 
 export const useNavigationStore = defineStore('ui', {
 	state: () => ({
-		// The currently active menu item, defaults to '' which triggers the dashboard
-		selected: 'dashboard',
 		// The currently active modal, managed trough the state to ensure that only one modal can be active at the same time
 		modal: null,
 		// The currently active view modal, managed trough the state to ensure that only one view modal can be active at the same time
@@ -23,10 +20,6 @@ export const useNavigationStore = defineStore('ui', {
 		transferData: null,
 	} as NavigationStoreState),
 	actions: {
-		setSelected(selected: NavigationStoreState['selected']) {
-			this.selected = selected
-			console.log('Active menu item set to ' + selected)
-		},
 		setModal(modal: NavigationStoreState['modal']) {
 			this.modal = modal
 			console.log('Active modal set to ' + modal)
diff --git a/src/store/modules/taak.js b/src/store/modules/taak.js
index 4dc9a3c..cb61051 100644
--- a/src/store/modules/taak.js
+++ b/src/store/modules/taak.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { defineStore } from 'pinia'
 import { Taak } from '../../entities/index.js'
+import router from '../../router/router.ts'
 
 const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/taken'
 
@@ -107,6 +108,8 @@ export const useTaakStore = defineStore('taken', {
 			}
 
 			this.refreshTakenList()
+			// go back to taken list
+			router.replace({ name: 'dynamic-view', params: { view: 'taken' } })
 
 			return { response }
 		},
@@ -145,6 +148,8 @@ export const useTaakStore = defineStore('taken', {
 			if (!options.doNotRefresh) {
 				this.refreshTakenList()
 			}
+			// go to new item with this id
+			router.push({ name: 'dynamic-view', params: { view: 'taken', id: entity.id } })
 
 			return { response, data, entity }
 		},
diff --git a/src/store/modules/zaakTypen.ts b/src/store/modules/zaakTypen.ts
index d8f956c..d241306 100644
--- a/src/store/modules/zaakTypen.ts
+++ b/src/store/modules/zaakTypen.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { TZaakType, ZaakType } from '../../entities/index.js'
+import router from '../../router/router'
 
 const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/ztc/zaaktypen'
 
@@ -120,6 +121,7 @@ export const useZaakTypeStore = defineStore('zaakTypen', {
 
 			this.setZaakTypeItem(null)
 			this.refreshZaakTypenList()
+			router.push({ name: 'dynamic-view', params: { view: 'zaaktypen' } })
 
 			return { response }
 		},
@@ -169,6 +171,7 @@ export const useZaakTypeStore = defineStore('zaakTypen', {
 
 			options.setItem && this.setZaakTypeItem(data)
 			this.refreshZaakTypenList()
+			router.push({ name: 'dynamic-view', params: { view: 'zaaktypen', id: entity.id } })
 
 			return { response, data, entity }
 		},
diff --git a/src/store/modules/zaken.ts b/src/store/modules/zaken.ts
index 427d434..bc72305 100644
--- a/src/store/modules/zaken.ts
+++ b/src/store/modules/zaken.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import { TZaak, Zaak } from '../../entities/index.js'
+import router from '../../router/router'
 
 const apiEndpoint = '/index.php/apps/zaakafhandelapp/api/zrc/zaken'
 
@@ -124,6 +125,7 @@ export const useZaakStore = defineStore('zaken', {
 			}
 
 			this.refreshZakenList()
+			router.push({ name: 'dynamic-view', params: { view: 'zaken' } })
 
 			return { response }
 		},
@@ -173,6 +175,7 @@ export const useZaakStore = defineStore('zaken', {
 
 			options.setItem && this.setZaakItem(data)
 			this.refreshZakenList()
+			router.push({ name: 'dynamic-view', params: { view: 'zaken', id: entity.id } })
 
 			return { response, data, entity }
 		},
diff --git a/src/views/Views.vue b/src/views/Views.vue
index 235e237..4658766 100644
--- a/src/views/Views.vue
+++ b/src/views/Views.vue
@@ -1,61 +1,29 @@
-<script setup>
-import { navigationStore } from '../store/store.js'
-</script>
-
 <template>
 	<!-- Placeholder div for all of the vieuws-->
 	<NcAppContent>
 		<template #default>
-			<BerichtenIndex v-if="navigationStore.selected === 'berichten'" />
-			<BesluitenIndex v-if="navigationStore.selected === 'besluiten'" />
-			<DashboardIndex v-if="navigationStore.selected === 'dashboard'" />
-			<DocumentenIndex v-if="navigationStore.selected === 'documenten'" />
-			<KlantenIndex v-if="navigationStore.selected === 'klanten'" />
-			<MedewerkerIndex v-if="navigationStore.selected === 'medewerkers'" />
-			<ResultatenIndex v-if="navigationStore.selected === 'resultaten'" />
-			<RollenIndex v-if="navigationStore.selected === 'rollen'" />
-			<StatusssenIndex v-if="navigationStore.selected === 'statusssen'" />
-			<TakenIndex v-if="navigationStore.selected === 'taken'" />
-			<ZaakTypenIndex v-if="navigationStore.selected === 'zaakTypen'" />
-			<ZakenIndex v-if="navigationStore.selected === 'zaken'" />
-			<ContactMomentenIndex v-if="navigationStore.selected === 'contactMomenten'" />
+			<RouterView />
+			<component :is="currentViewComponent" :key="$route.params[$route.meta.watchParam]" />
 		</template>
 	</NcAppContent>
 </template>
 
 <script>
 import { NcAppContent } from '@nextcloud/vue'
-import BerichtenIndex from './berichten/BerichtenIndex.vue'
-import BesluitenIndex from './besluiten/BesluitenIndex.vue'
-import DashboardIndex from './dashboard/DashboardIndex.vue'
-import SearchIndex from './search/SearchIndex.vue'
-import DocumentenIndex from './documenten/DocumentenIndex.vue'
-import KlantenIndex from './klanten/KlantenIndex.vue'
-import MedewerkerIndex from './medewerkers/MedewerkerIndex.vue'
-import ResultatenIndex from './resultaten/ResultatenIndex.vue'
-import RollenIndex from './rollen/RollenIndex.vue'
-import StatusssenIndex from './statussen/StatussenIndex.vue'
-import TakenIndex from './taken/TakenIndex.vue'
-import ZaakTypenIndex from './zaakTypen/ZakenTypenIndex.vue'
-import ZakenIndex from './zaken/ZakenIndex.vue'
-import ContactMomentenIndex from './contactMomenten/ContactMomentenIndex.vue'
+import { viewComponents } from './componentMapping.js'
+import { RouterView } from 'vue-router'
+
 export default {
 	name: 'Views',
 	components: {
-		BerichtenIndex,
-		BesluitenIndex,
-		DashboardIndex,
-		SearchIndex,
-		ContactMomentenIndex,
-		DocumentenIndex,
-		KlantenIndex,
-		MedewerkerIndex,
-		ResultatenIndex,
-		RollenIndex,
-		StatusssenIndex,
-		TakenIndex,
-		ZaakTypenIndex,
 		NcAppContent,
+		RouterView,
+	},
+	computed: {
+		currentViewComponent() {
+			const viewName = this.$route.params.view
+			return viewComponents[viewName] || null
+		},
 	},
 }
 </script>
diff --git a/src/views/berichten/BerichtDetails.vue b/src/views/berichten/BerichtDetails.vue
index 3f86dcd..6f9fddf 100644
--- a/src/views/berichten/BerichtDetails.vue
+++ b/src/views/berichten/BerichtDetails.vue
@@ -5,8 +5,9 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 <template>
 	<div class="detailContainer">
 		<div id="app-content">
+			<NcLoadingIcon v-if="!berichtStore.berichtItem && loading" :size="64" />
 			<!-- app-content-wrapper is optional, only use if app-content-list  -->
-			<div>
+			<div v-if="berichtStore.berichtItem">
 				<div class="head">
 					<h1 class="h1">
 						{{ berichtStore.berichtItem.onderwerp }}
@@ -120,7 +121,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 
 <script>
 // Components
-import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { BTabs, BTab } from 'bootstrap-vue'
 
 // Icons
@@ -136,30 +137,44 @@ export default {
 		// Components
 		NcActions,
 		NcActionButton,
+		NcLoadingIcon,
 		// Icons
 		Pencil,
 		DotsHorizontal,
 		TrashCanOutline,
 	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			currentActiveBericht: null,
 			auditTrails: [],
+			loading: false,
 		}
 	},
-	mounted() {
-		if (berichtStore.berichtItem?.id) {
-			this.currentActiveBericht = berichtStore.berichtItem
-			this.fetchAuditTrails(berichtStore.berichtItem.id)
-		}
+	watch: {
+		id(newId) {
+			this.fetchData(newId)
+		},
 	},
-	updated() {
-		if (berichtStore.berichtItem?.id && JSON.stringify(this.currentActiveBericht) !== JSON.stringify(berichtStore.berichtItem)) {
-			this.currentActiveBericht = berichtStore.berichtItem
-			this.fetchAuditTrails(berichtStore.berichtItem.id)
-		}
+	mounted() {
+		this.fetchData(this.id)
 	},
 	methods: {
+		fetchData(id) {
+			this.loading = true
+
+			berichtStore.getBericht(id)
+				.finally(() => {
+					this.loading = false
+				})
+
+			this.fetchAuditTrails(id)
+		},
 		fetchAuditTrails(id) {
 			fetch(`/index.php/apps/zaakafhandelapp/api/berichten/${id}/audit_trail`)
 				.then(response => response.json())
diff --git a/src/views/berichten/BerichtenIndex.vue b/src/views/berichten/BerichtenIndex.vue
index 64ab8a4..dad9e6b 100644
--- a/src/views/berichten/BerichtenIndex.vue
+++ b/src/views/berichten/BerichtenIndex.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, berichtStore } from '../../store/store.js'
+import { navigationStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 			<BerichtenList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!berichtStore.berichtItem?.id|| navigationStore.selected !== 'berichten'"
+			<NcEmptyContent v-if="!id"
 				class="detailContainer"
 				name="Geen bericht"
 				description="Nog geen bericht geselecteerd">
@@ -21,7 +21,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<BerichDetails v-if="berichtStore.berichtItem?.id && navigationStore.selected === 'berichten'" :bericht-id="berichtStore.berichtItem?.id" />
+			<BerichtDetails v-if="id" :id="id" />
 		</template>
 	</NcAppContent>
 </template>
@@ -29,7 +29,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 <script>
 import { NcAppContent, NcEmptyContent, NcButton } from '@nextcloud/vue'
 import BerichtenList from './BerichtenList.vue'
-import BerichDetails from './BerichtDetails.vue'
+import BerichtDetails from './BerichtDetails.vue'
 // eslint-disable-next-line n/no-missing-import
 import ChatOutline from 'vue-material-design-icons/ChatOutline'
 
@@ -40,8 +40,13 @@ export default {
 		NcEmptyContent,
 		NcButton,
 		BerichtenList,
-		BerichDetails,
+		BerichtDetails,
 		ChatOutline,
 	},
+	data() {
+		return {
+			id: this.$route.params.id,
+		}
+	},
 }
 </script>
diff --git a/src/views/berichten/BerichtenList.vue b/src/views/berichten/BerichtenList.vue
index 65707e7..416660c 100644
--- a/src/views/berichten/BerichtenList.vue
+++ b/src/views/berichten/BerichtenList.vue
@@ -30,19 +30,17 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="berichtStore.berichtenList?.length && !loading">
+			<div v-if="berichtStore.berichtenList?.length">
 				<NcListItem v-for="(bericht, i) in berichtStore.berichtenList"
 					:key="`${bericht}${i}`"
 					:name="bericht?.onderwerp || bericht?.title || 'onbekend'"
-					:active="berichtStore.berichtItem?.id === bericht?.id"
+					:active="$route.params.id === bericht?.id"
 					:details="'1h'"
 					:counter-number="44"
 					:force-display-actions="true"
-					@click="berichtStore.setBerichtItem(bericht)">
+					@click="openBericht(bericht)">
 					<template #icon>
-						<ChatOutline :class="berichtStore.berichtItem?.id === bericht.id && 'selectedZaakIcon'"
-							disable-menu
-							:size="44" />
+						<ChatOutline disable-menu :size="44" />
 					</template>
 					<template #subname>
 						{{ bericht?.berichttekst }}
@@ -69,7 +67,7 @@ import { navigationStore, berichtStore } from '../../store/store.js'
 			Geen berichten gedefinieerd.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="berichtStore.berichtenList.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -119,6 +117,10 @@ export default {
 		})
 	},
 	methods: {
+		openBericht(bericht) {
+			berichtStore.setBerichtItem(bericht)
+			this.$router.push({ name: 'dynamic-view', params: { view: 'berichten', id: bericht.id } })
+		},
 		editBericht(bericht) {
 			berichtStore.setBerichtItem(bericht)
 			navigationStore.setModal('editBericht')
diff --git a/src/views/componentMapping.js b/src/views/componentMapping.js
new file mode 100644
index 0000000..3e23439
--- /dev/null
+++ b/src/views/componentMapping.js
@@ -0,0 +1,31 @@
+import BerichtenIndex from './berichten/BerichtenIndex.vue'
+import BesluitenIndex from './besluiten/BesluitenIndex.vue'
+import SearchIndex from './search/SearchIndex.vue'
+import DocumentenIndex from './documenten/DocumentenIndex.vue'
+import KlantenIndex from './klanten/KlantenIndex.vue'
+import MedewerkerIndex from './medewerkers/MedewerkerIndex.vue'
+import ResultatenIndex from './resultaten/ResultatenIndex.vue'
+import RollenIndex from './rollen/RollenIndex.vue'
+import StatusssenIndex from './statussen/StatussenIndex.vue'
+import TakenIndex from './taken/TakenIndex.vue'
+import ZaakTypenIndex from './zaakTypen/ZakenTypenIndex.vue'
+import ZakenIndex from './zaken/ZakenIndex.vue'
+import ContactMomentenIndex from './contactMomenten/ContactMomentenIndex.vue'
+
+// the keys in this object are the names of the routes in the router
+// a.k.a. will be used in the url `/klanten/id`
+export const viewComponents = {
+	berichten: BerichtenIndex,
+	besluiten: BesluitenIndex,
+	zoeken: SearchIndex,
+	documenten: DocumentenIndex,
+	klanten: KlantenIndex,
+	medewerkers: MedewerkerIndex,
+	resultaten: ResultatenIndex,
+	rollen: RollenIndex,
+	statussen: StatusssenIndex,
+	taken: TakenIndex,
+	zaaktypen: ZaakTypenIndex,
+	zaken: ZakenIndex,
+	contactmomenten: ContactMomentenIndex,
+}
diff --git a/src/views/contactMomenten/ContactMomentDetails.vue b/src/views/contactMomenten/ContactMomentDetails.vue
index d1df84d..272b42b 100644
--- a/src/views/contactMomenten/ContactMomentDetails.vue
+++ b/src/views/contactMomenten/ContactMomentDetails.vue
@@ -5,8 +5,9 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 <template>
 	<div class="detailContainer">
 		<div id="app-content">
+			<NcLoadingIcon v-if="!contactMomentStore.contactMomentItem && loading" :size="64" />
 			<!-- app-content-wrapper is optional, only use if app-content-list  -->
-			<div>
+			<div v-if="contactMomentStore.contactMomentItem">
 				<div class="head">
 					<h1 class="h1">
 						{{ contactMomentStore.contactMomentItem.titel }}
@@ -110,7 +111,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 
 <script>
 // Components
-import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import { BTabs, BTab } from 'bootstrap-vue'
 
 // Entities
@@ -130,30 +131,41 @@ export default {
 		// Components
 		NcActions,
 		NcActionButton,
+		NcLoadingIcon,
 		// Icons
 		Pencil,
 		DotsHorizontal,
 		TrashCanOutline,
 	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			currentActiveContactMoment: null,
 			auditTrails: [],
 		}
 	},
-	mounted() {
-		if (contactMomentStore.contactMomentItem?.id) {
-			this.currentActiveContactMoment = contactMomentStore.contactMomentItem
-			// this.fetchAuditTrails(contactMomentStore.contactMomentItem.id)
-		}
+	watch: {
+		id(newId) {
+			this.fetchData(newId)
+		},
 	},
-	updated() {
-		if (contactMomentStore.contactMomentItem?.id && JSON.stringify(this.currentActiveContactMoment) !== JSON.stringify(contactMomentStore.contactMomentItem)) {
-			this.currentActiveContactMoment = contactMomentStore.contactMomentItem
-			// this.fetchAuditTrails(contactMomentStore.contactMomentItem.id)
-		}
+	mounted() {
+		this.fetchData(this.id)
 	},
 	methods: {
+		fetchData(id) {
+			this.loading = true
+
+			contactMomentStore.getContactMoment(id)
+				.finally(() => {
+					this.loading = false
+				})
+		},
 		fetchAuditTrails(id) {
 			fetch(`/index.php/apps/zaakafhandelapp/api/contact_momenten/${id}/audit_trail`)
 				.then(response => response.json())
diff --git a/src/views/contactMomenten/ContactMomentenIndex.vue b/src/views/contactMomenten/ContactMomentenIndex.vue
index a5fd398..aac2bbe 100644
--- a/src/views/contactMomenten/ContactMomentenIndex.vue
+++ b/src/views/contactMomenten/ContactMomentenIndex.vue
@@ -8,8 +8,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 			<ContactMomentenList />
 		</template>
 		<template #default>
-			<NcEmptyContent
-				v-if="!contactMomentStore.contactMomentItem?.id || navigationStore.selected !== 'contactMomenten'"
+			<NcEmptyContent v-if="!id"
 				class="detailContainer"
 				name="Geen contact moment"
 				description="Nog geen contact moment geselecteerd">
@@ -23,9 +22,7 @@ import { navigationStore, contactMomentStore } from '../../store/store.js'
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<ContactMomentDetails
-				v-if="contactMomentStore.contactMomentItem?.id && navigationStore.selected === 'contactMomenten'"
-				:contact-moment-id="contactMomentStore.contactMomentItem?.id" />
+			<ContactMomentDetails v-if="id" :id="id" />
 		</template>
 	</NcAppContent>
 </template>
@@ -46,5 +43,10 @@ export default {
 		ContactMomentDetails,
 		CardAccountPhoneOutline,
 	},
+	data() {
+		return {
+			id: this.$route.params.id,
+		}
+	},
 }
 </script>
diff --git a/src/views/contactMomenten/ContactMomentenList.vue b/src/views/contactMomenten/ContactMomentenList.vue
index 4e09e5d..b435826 100644
--- a/src/views/contactMomenten/ContactMomentenList.vue
+++ b/src/views/contactMomenten/ContactMomentenList.vue
@@ -31,18 +31,15 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="contactMomentStore.contactMomentenList?.length && !loading">
+			<div v-if="contactMomentStore.contactMomentenList?.length">
 				<NcListItem v-for="(contactMoment, i) in contactMomentStore.contactMomentenList"
 					:key="`${contactMoment}${i}`"
 					:name="getKlantName(contactMoment.klant) || 'onbekend'"
-					:active="contactMomentStore.contactMomentItem?.id === contactMoment?.id"
+					:active="$route.params?.id === contactMoment?.id"
 					:force-display-actions="true"
-					@click="contactMomentStore.setContactMomentItem(contactMoment)">
+					@click="openContactMoment(contactMoment)">
 					<template #icon>
-						<CardAccountPhoneOutline
-							:class="contactMomentStore.contactMomentItem?.id === contactMoment.id && 'selectedZaakIcon'"
-							disable-menu
-							:size="44" />
+						<CardAccountPhoneOutline disable-menu :size="44" />
 					</template>
 					<template #subname>
 						{{ new Date(contactMoment.startDate).toLocaleString() }}
@@ -71,7 +68,7 @@ import { navigationStore, contactMomentStore, klantStore } from '../../store/sto
 			Geen contact momenten gedefinieerd.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!contactMomentStore.contactMomentenList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -124,6 +121,10 @@ export default {
 		})
 	},
 	methods: {
+		openContactMoment(contactMoment) {
+			contactMomentStore.setContactMomentItem(contactMoment)
+			this.$router.push({ name: 'dynamic-view', params: { view: 'contactmomenten', id: contactMoment.id } })
+		},
 		editContactMoment(contactMoment) {
 			contactMomentStore.setContactMomentItem(contactMoment)
 			navigationStore.setModal('editContactMoment')
@@ -133,6 +134,9 @@ export default {
 		},
 		getKlantName(klantId) {
 			const klant = klantStore.klantenList.find(klant => klant.id === klantId)
+			if (!klant) {
+				return 'onbekend'
+			}
 			if (klant.type === 'persoon') {
 				return `${klant.voornaam} ${klant.tussenvoegsel} ${klant.achternaam}` ?? 'onbekend'
 			}
diff --git a/src/views/klanten/KlantDetails.vue b/src/views/klanten/KlantDetails.vue
index 6b7dcdf..0152d2b 100644
--- a/src/views/klanten/KlantDetails.vue
+++ b/src/views/klanten/KlantDetails.vue
@@ -5,8 +5,9 @@ import { navigationStore, klantStore, taakStore, berichtStore, zaakStore, contac
 <template>
 	<div class="detailContainer">
 		<div id="app-content">
+			<NcLoadingIcon v-if="!klantStore.klantItem && loading" :size="64" />
 			<!-- app-content-wrapper is optional, only use if app-content-list  -->
-			<div>
+			<div v-if="klantStore.klantItem">
 				<div class="head">
 					<h1 class="h1">
 						{{ getName(klantStore.klantItem) }}
@@ -288,7 +289,7 @@ import { navigationStore, klantStore, taakStore, berichtStore, zaakStore, contac
 <script>
 // Components
 import { BTabs, BTab } from 'bootstrap-vue'
-import { NcActions, NcActionButton, NcEmptyContent, NcListItem } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcEmptyContent, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
 import { countries } from '../../data/countries.js'
 
 // Icons
@@ -311,6 +312,7 @@ export default {
 		BTabs,
 		BTab,
 		NcListItem,
+		NcLoadingIcon,
 		// Icons
 		DotsHorizontal,
 		Pencil,
@@ -321,6 +323,12 @@ export default {
 		Eye,
 		TimelineQuestionOutline,
 	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			currentActiveKlant: undefined, // whole klant object
@@ -328,6 +336,7 @@ export default {
 			taken: [],
 			berichten: [],
 			auditTrails: [],
+			loading: true,
 		}
 	},
 	computed: {
@@ -335,21 +344,26 @@ export default {
 			return contactMomentStore.contactMomentenList.filter(contactMoment => contactMoment.klant === klantStore.klantItem.id)
 		},
 	},
-	mounted() {
-		this.fetchContactMomenten()
-
-		if (klantStore.klantItem?.id) {
-			this.currentActiveKlant = klantStore.klantItem
-			this.fetchKlantData(klantStore.klantItem.id)
-		}
+	watch: {
+		id(newId) {
+			this.fetchKlantData(newId)
+		},
 	},
-	updated() {
-		if (klantStore.klantItem?.id && JSON.stringify(this.currentActiveKlant) !== JSON.stringify(klantStore.klantItem)) {
-			this.currentActiveKlant = klantStore.klantItem
-			this.fetchKlantData(klantStore.klantItem.id)
-		}
+	mounted() {
+		this.fetchData(this.id)
 	},
 	methods: {
+		fetchData(id) {
+			this.loading = true
+
+			klantStore.getKlant(id)
+				.finally(() => {
+					this.loading = false
+				})
+
+			this.fetchContactMomenten()
+			this.fetchKlantData(id)
+		},
 		async fetchKlantData(id) {
 			// when using Promise.allSettled, it will return an array of items.
 			// these items contain a status string, which is either 'fulfilled' or 'rejected'.
diff --git a/src/views/klanten/KlantenIndex.vue b/src/views/klanten/KlantenIndex.vue
index d5adc0a..4ba760b 100644
--- a/src/views/klanten/KlantenIndex.vue
+++ b/src/views/klanten/KlantenIndex.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, klantStore } from '../../store/store.js'
+import { navigationStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 			<KlantenList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!klantStore.klantItem?.id || navigationStore.selected != 'klanten' "
+			<NcEmptyContent v-if="!id"
 				class="detailContainer"
 				name="Geen klant"
 				description="Nog geen klant geselecteerd">
@@ -21,7 +21,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<KlantDetails v-if="klantStore.klantItem?.id && navigationStore.selected === 'klanten'" :klant-id="klantStore.klantItem.id" />
+			<KlantDetails v-if="id" :id="id" />
 		</template>
 	</NcAppContent>
 </template>
@@ -44,8 +44,7 @@ export default {
 	},
 	data() {
 		return {
-			activeMetaData: false,
-			klantId: undefined,
+			id: this.$route.params.id,
 		}
 	},
 }
diff --git a/src/views/klanten/KlantenList.vue b/src/views/klanten/KlantenList.vue
index beecbc0..1cd731e 100644
--- a/src/views/klanten/KlantenList.vue
+++ b/src/views/klanten/KlantenList.vue
@@ -30,18 +30,16 @@ import { navigationStore, klantStore } from '../../store/store.js'
 					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="klantStore.klantenList?.length && !loading">
+			<div v-if="klantStore.klantenList?.length">
 				<NcListItem v-for="(klant, i) in klantStore.klantenList"
 					:key="`${klant}${i}`"
 					:name="getName(klant)"
-					:active="klantStore.klantItem?.id === klant?.id"
+					:active="$route.params?.id === klant?.id"
 					:force-display-actions="true"
 					:details="_.upperFirst(klant.type)"
-					@click="klantStore.setKlantItem(klant)">
+					@click="openKlant(klant)">
 					<template #icon>
-						<AccountOutline :class="klantStore.klantItem === klant.id && 'selectedZaakIcon'"
-							disable-menu
-							:size="44" />
+						<AccountOutline disable-menu :size="44" />
 					</template>
 					<template #subname>
 						{{ getSubname(klant) }}
@@ -62,7 +60,7 @@ import { navigationStore, klantStore } from '../../store/store.js'
 			Geen klanten gedefinieerd.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!klantStore.klantenList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -108,6 +106,10 @@ export default {
 		})
 	},
 	methods: {
+		openKlant(klant) {
+			klantStore.setKlantItem(klant)
+			this.$router.push({ params: { id: klant.id } })
+		},
 		fullName(klant) {
 			let name = klant.achternaam
 			if (klant.tussenvoegsel) {
diff --git a/src/views/medewerkers/MedewerkerDetails.vue b/src/views/medewerkers/MedewerkerDetails.vue
index 12f42c5..457e887 100644
--- a/src/views/medewerkers/MedewerkerDetails.vue
+++ b/src/views/medewerkers/MedewerkerDetails.vue
@@ -5,8 +5,9 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 <template>
 	<div class="detailContainer">
 		<div id="app-content">
+			<NcLoadingIcon v-if="!medewerkerStore.medewerkerItem && loading" :size="64" />
 			<!-- app-content-wrapper is optional, only use if app-content-list  -->
-			<div>
+			<div v-if="medewerkerStore.medewerkerItem">
 				<div class="head">
 					<h1 class="h1">
 						{{ getName(medewerkerStore.medewerkerItem) }}
@@ -67,7 +68,7 @@ import { navigationStore, medewerkerStore, taakStore, berichtStore, zaakStore }
 
 <script>
 // Components
-import { NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcLoadingIcon } from '@nextcloud/vue'
 import { countries } from '../../data/countries.js'
 
 // Icons
@@ -91,28 +92,39 @@ export default {
 		BriefcaseAccountOutline,
 		TrashCanOutline,
 	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
 	data() {
 		return {
-			currentActiveKlant: undefined, // whole klant object
 			zaken: [],
 			taken: [],
 			berichten: [],
 			contactMomenten: [],
 			auditTrails: [],
+			loading: true,
 		}
 	},
-	mounted() {
-		if (medewerkerStore.medewerkerItem?.id) {
-			this.currentActiveMedewerker = medewerkerStore.medewerkerItem
-		}
+	watch: {
+		id(newId) {
+			this.fetchData(newId)
+		},
 	},
-	updated() {
-		if (medewerkerStore.medewerkerItem?.id && JSON.stringify(this.currentActiveMedewerker) !== JSON.stringify(medewerkerStore.medewerkerItem)) {
-			this.currentActiveMedewerker = medewerkerStore.medewerkerItem
-		}
+	mounted() {
+		this.fetchData(this.id)
 	},
 	methods: {
+		fetchData(id) {
+			this.loading = true
 
+			medewerkerStore.getMedewerker(id)
+				.finally(() => {
+					this.loading = false
+				})
+		},
 		getName(medewerker) {
 			return `${medewerker.voornaam} ${medewerker.tussenvoegsel} ${medewerker.achternaam}` ?? 'onbekend'
 		},
diff --git a/src/views/medewerkers/MedewerkerIndex.vue b/src/views/medewerkers/MedewerkerIndex.vue
index 7009b0b..4ee0fe5 100644
--- a/src/views/medewerkers/MedewerkerIndex.vue
+++ b/src/views/medewerkers/MedewerkerIndex.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, medewerkerStore } from '../../store/store.js'
+import { navigationStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 			<MedewerkerList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!medewerkerStore.medewerkerItem?.id || navigationStore.selected != 'medewerkers' "
+			<NcEmptyContent v-if="!id"
 				class="detailContainer"
 				name="Geen medewerker"
 				description="Nog geen medewerker geselecteerd">
@@ -21,7 +21,7 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<MedewerkerDetails v-if="medewerkerStore.medewerkerItem?.id && navigationStore.selected === 'medewerkers'" :medewerker-id="medewerkerStore.medewerkerItem.id" />
+			<MedewerkerDetails v-if="id" :id="id" />
 		</template>
 	</NcAppContent>
 </template>
@@ -44,8 +44,7 @@ export default {
 	},
 	data() {
 		return {
-			activeMetaData: false,
-			medewerkerId: undefined,
+			id: this.$route.params.id,
 		}
 	},
 }
diff --git a/src/views/medewerkers/MedewerkerList.vue b/src/views/medewerkers/MedewerkerList.vue
index e6d5c9f..2200b6d 100644
--- a/src/views/medewerkers/MedewerkerList.vue
+++ b/src/views/medewerkers/MedewerkerList.vue
@@ -30,18 +30,16 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 					</NcActionButton>
 				</NcActions>
 			</div>
-			<div v-if="medewerkerStore.medewerkersList?.length && !loading">
+			<div v-if="medewerkerStore.medewerkersList?.length">
 				<NcListItem v-for="(medewerker, i) in medewerkerStore.medewerkersList"
 					:key="`${medewerker}${i}`"
 					:name="getName(medewerker)"
-					:active="medewerkerStore.medewerkerItem?.id === medewerker?.id"
+					:active="$route.params?.id === medewerker?.id"
 					:force-display-actions="true"
 					:details="_.upperFirst(medewerker.type)"
-					@click="medewerkerStore.setMedewerkerItem(medewerker)">
+					@click="openMedewerker(medewerker)">
 					<template #icon>
-						<AccountOutline :class="medewerkerStore.medewerkerItem === medewerker.id && 'selectedZaakIcon'"
-							disable-menu
-							:size="44" />
+						<AccountOutline disable-menu :size="44" />
 					</template>
 					<template #subname>
 						{{ medewerker.email }}
@@ -63,7 +61,7 @@ import { navigationStore, medewerkerStore } from '../../store/store.js'
 			Geen medewerkers gedefinieerd.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!medewerkerStore.medewerkersList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -109,6 +107,10 @@ export default {
 		})
 	},
 	methods: {
+		openMedewerker(medewerker) {
+			medewerkerStore.setMedewerkerItem(medewerker)
+			this.$router.push({ name: 'dynamic-view', params: { view: 'medewerkers', id: medewerker.id } })
+		},
 		fullName(medewerker) {
 			let name = medewerker.achternaam
 			if (medewerker.tussenvoegsel) {
diff --git a/src/views/taken/TaakDetails.vue b/src/views/taken/TaakDetails.vue
index 71b8819..1b46c0e 100644
--- a/src/views/taken/TaakDetails.vue
+++ b/src/views/taken/TaakDetails.vue
@@ -5,8 +5,9 @@ import { navigationStore, taakStore, klantStore, medewerkerStore } from '../../s
 <template>
 	<div class="detailContainer">
 		<div id="app-content">
+			<NcLoadingIcon v-if="!taakStore.taakItem && loading" :size="64" />
 			<!-- app-content-wrapper is optional, only use if app-content-list  -->
-			<div>
+			<div v-if="taakStore.taakItem">
 				<div class="head">
 					<h1 class="h1">
 						{{ taakStore.taakItem.title }}
@@ -105,7 +106,7 @@ import { navigationStore, taakStore, klantStore, medewerkerStore } from '../../s
 
 <script>
 // Components
-import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcActionLink } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcActionLink, NcLoadingIcon } from '@nextcloud/vue'
 import { BTabs, BTab } from 'bootstrap-vue'
 
 // Icons
@@ -120,6 +121,7 @@ export default {
 	name: 'TaakDetails',
 	components: {
 		NcActionLink,
+		NcLoadingIcon,
 		// Icons
 		Pencil,
 		DotsHorizontal,
@@ -128,33 +130,46 @@ export default {
 		TimelineQuestionOutline,
 		Eye,
 	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
 	data() {
 		return {
-			currentActiveTaak: null,
 			auditTrails: [],
 			klant: null,
 			medewerker: null,
 			klantLoading: false,
 			medewerkerLoading: false,
+			loading: false,
 		}
 	},
-	mounted() {
-		if (taakStore.taakItem?.id) {
-			this.currentActiveTaak = taakStore.taakItem
-			this.fetchAuditTrails(taakStore.taakItem.id)
-			if (taakStore.taakItem.klant) this.fetchKlant(taakStore.taakItem.klant)
-			if (taakStore.taakItem.medewerker) this.fetchMedewerker(taakStore.taakItem.medewerker)
-		}
+	watch: {
+		id(newId) {
+			this.fetchData(newId)
+		},
 	},
-	updated() {
-		if (taakStore.taakItem?.id && JSON.stringify(this.currentActiveTaak) !== JSON.stringify(taakStore.taakItem)) {
-			this.currentActiveTaak = taakStore.taakItem
-			this.fetchAuditTrails(taakStore.taakItem.id)
-			if (taakStore.taakItem.klant) this.fetchKlant(taakStore.taakItem.klant)
-			if (taakStore.taakItem.medewerker) this.fetchMedewerker(taakStore.taakItem.medewerker)
-		}
+	mounted() {
+		this.fetchData(this.id)
 	},
 	methods: {
+		async fetchData(id) {
+			this.loading = true
+
+			const [{ data: taakData }] = await Promise.all([
+				taakStore.getTaak(id, { setItem: true }),
+				this.fetchAuditTrails(id),
+			])
+
+			this.loading = false
+
+			Promise.all([
+				...(taakData.klant ? [this.fetchKlant(taakData.klant)] : []),
+				...(taakData.medewerker ? [this.fetchMedewerker(taakData.medewerker)] : []),
+			])
+		},
 		fetchAuditTrails(id) {
 			fetch(`/index.php/apps/zaakafhandelapp/api/taken/${id}/audit_trail`)
 				.then(response => response.json())
@@ -172,11 +187,11 @@ export default {
 		},
 		goToKlant() {
 			klantStore.setKlantItem(this.klant)
-			navigationStore.setSelected('klanten')
+			this.$router.push({ name: 'dynamic-view', params: { view: 'klanten', id: this.klant.id } })
 		},
 		goToMedewerker() {
 			medewerkerStore.setMedewerkerItem(this.medewerker)
-			navigationStore.setSelected('medewerkers')
+			this.$router.push({ name: 'dynamic-view', params: { view: 'medewerkers', id: this.medewerker.id } })
 		},
 		fetchKlant(klant) {
 			this.klantLoading = true
diff --git a/src/views/taken/TakenIndex.vue b/src/views/taken/TakenIndex.vue
index 04f421e..10bbd71 100644
--- a/src/views/taken/TakenIndex.vue
+++ b/src/views/taken/TakenIndex.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { navigationStore, taakStore } from '../../store/store.js'
+import { navigationStore } from '../../store/store.js'
 </script>
 
 <template>
@@ -8,7 +8,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 			<TakenList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!taakStore.taakItem?.id || navigationStore.selected != 'taken' "
+			<NcEmptyContent v-if="!id"
 				class="detailContainer"
 				name="Geen taak"
 				description="Nog geen taak geselecteerd">
@@ -21,7 +21,7 @@ import { navigationStore, taakStore } from '../../store/store.js'
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<TaakDetails v-if="taakStore.taakItem?.id && navigationStore.selected === 'taken'" :taak-id="taakStore.taakItem?.id" />
+			<TaakDetails v-if="id" :id="id" />
 		</template>
 	</NcAppContent>
 </template>
@@ -43,5 +43,10 @@ export default {
 		TaakDetails,
 		CalendarMonthOutline,
 	},
+	data() {
+		return {
+			id: this.$route.params.id,
+		}
+	},
 }
 </script>
diff --git a/src/views/taken/TakenList.vue b/src/views/taken/TakenList.vue
index 41ee6fc..f880421 100644
--- a/src/views/taken/TakenList.vue
+++ b/src/views/taken/TakenList.vue
@@ -35,14 +35,12 @@ import { klantStore, navigationStore, taakStore } from '../../store/store.js'
 					:key="`${taak}${i}`"
 					:name="taak?.title"
 					:force-display-actions="true"
-					:active="taakStore.taakItem?.id === taak?.id"
+					:active="$route.params?.id === taak?.id"
 					:details="taak.status"
 					:counter-number="taak.deadline ? `${Math.ceil((new Date(taak.deadline) - new Date()) / (1000 * 60 * 60 * 24))} dagen` : 'no deadline'"
-					@click="taakStore.setTaakItem(taak)">
+					@click="openTaak(taak)">
 					<template #icon>
-						<CalendarMonthOutline :class="taakStore.taakItem?.id === taak.id && 'selectedZaakIcon'"
-							disable-menu
-							:size="44" />
+						<CalendarMonthOutline disable-menu :size="44" />
 					</template>
 					<template #subname>
 						{{ getName(taak) }}
@@ -69,7 +67,7 @@ import { klantStore, navigationStore, taakStore } from '../../store/store.js'
 			Geen taken gedefinieerd.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!taakStore.takenList?.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -136,6 +134,10 @@ export default {
 				this.users = Object.values(data.ocs.data.users)
 			})
 		},
+		openTaak(taak) {
+			taakStore.setTaakItem(taak)
+			this.$router.push({ params: { id: taak.id } })
+		},
 		getName(taak) {
 			const medewerker = this.users.find(user => user.email === taak.medewerker)
 			const klant = klantStore.klantenList.find(klant => klant.id === taak.klant)
diff --git a/src/views/zaakTypen/ZaakTypeDetails.vue b/src/views/zaakTypen/ZaakTypeDetails.vue
index 10d84ed..b79346b 100644
--- a/src/views/zaakTypen/ZaakTypeDetails.vue
+++ b/src/views/zaakTypen/ZaakTypeDetails.vue
@@ -4,143 +4,142 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 
 <template>
 	<div class="detailContainer">
-		<div v-if="!loading" id="app-content">
-			<div class="head">
-				<h1 class="h1">
-					{{ zaakTypeStore.zaakTypeItem?.identificatie }}
-				</h1>
+		<div id="app-content">
+			<NcLoadingIcon v-if="!zaakTypeStore.zaakTypeItem && loading" :size="64" />
 
-				<NcActions :primary="true" menu-name="Acties">
-					<template #icon>
-						<DotsHorizontal :size="20" />
-					</template>
-					<NcActionButton @click="navigationStore.setModal('zaaktypeForm')">
-						<template #icon>
-							<Pencil :size="20" />
-						</template>
-						Bewerken
-					</NcActionButton>
-					<NcActionButton @click="navigationStore.setModal('deleteZaaktype')">
+			<div v-if="zaakTypeStore.zaakTypeItem">
+				<div class="head">
+					<h1 class="h1">
+						{{ zaakTypeStore.zaakTypeItem?.identificatie }}
+					</h1>
+
+					<NcActions :primary="true" menu-name="Acties">
 						<template #icon>
-							<TrashCanOutline :size="20" />
+							<DotsHorizontal :size="20" />
 						</template>
-						Verwijderen
-					</NcActionButton>
-				</NcActions>
-			</div>
-
-			<div class="detailGrid">
-				<div>
-					<h4>Omschrijving:</h4>
-					<span>{{ zaakTypeStore.zaakTypeItem?.omschrijving || '-' }}</span>
-				</div>
-				<div>
-					<h4>Generieke omschrijving:</h4>
-					<span>{{ zaakTypeStore.zaakTypeItem?.omschrijvingGeneriek || '-' }}</span>
-				</div>
-				<div>
-					<h4>Vertrouwelijkheidaanduiding:</h4>
-					<span>{{ zaakTypeStore.zaakTypeItem?.vertrouwelijkheidaanduiding || '-' }}</span>
-				</div>
-				<div>
-					<h4>Doel:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.doel || '-' }}</p>
-				</div>
-				<div>
-					<h4>Aanleiding:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.aanleiding || '-' }}</p>
-				</div>
-				<div>
-					<h4>Toelichting:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.toelichting || '-' }}</p>
-				</div>
-				<div>
-					<h4>Indicatie intern of extern:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.indicatieInternOfExtern || '-' }}</p>
-				</div>
-				<div>
-					<h4>Handeling initiatie:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.handelingInitiator || '-' }}</p>
-				</div>
-				<div>
-					<h4>Onderwerp:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.onderwerp || '-' }}</p>
-				</div>
-				<div>
-					<h4>Handeling behandelaar:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.handelingBehandelaar || '-' }}</p>
-				</div>
-				<div>
-					<h4>Doorlooptijd:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.doorlooptijd || '-' }}</p>
-				</div>
-				<div>
-					<h4>Servicenorm:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.servicenorm || '-' }}</p>
-				</div>
-				<div>
-					<h4>Opschorting en aanhouding mogelijk:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.opschortingEnAanhoudingMogelijk || '-' }}</p>
-				</div>
-				<div>
-					<h4>Verlenging mogelijk:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.verlengingMogelijk || '-' }}</p>
-				</div>
-				<div>
-					<h4>Verlengingstermijn:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.verlengingstermijn || '-' }}</p>
+						<NcActionButton @click="navigationStore.setModal('zaaktypeForm')">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							Bewerken
+						</NcActionButton>
+						<NcActionButton @click="navigationStore.setModal('deleteZaaktype')">
+							<template #icon>
+								<TrashCanOutline :size="20" />
+							</template>
+							Verwijderen
+						</NcActionButton>
+					</NcActions>
 				</div>
-				<div>
-					<h4>Publicatie indicatie:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.publicatieIndicatie || '-' }}</p>
-				</div>
-				<div>
-					<h4>Publicatietekst:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.publicatietekst || '-' }}</p>
-				</div>
-				<div>
-					<h4>Producten of diensten:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.productenOfDiensten || '-' }}</p>
-				</div>
-				<div>
-					<h4>Selectielijst proces type:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.selectielijstProcestype || '-' }}</p>
-				</div>
-				<div>
-					<h4>Referentieproces:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.referentieproces || '-' }}</p>
-				</div>
-				<div>
-					<h4>Catalogus:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.catalogus || '-' }}</p>
-				</div>
-				<div>
-					<h4>Begin geldigheid:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.beginGeldigheid || '-' }}</p>
-				</div>
-				<div>
-					<h4>Einde geldigheid:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.eindeGeldigheid || '-' }}</p>
-				</div>
-				<div>
-					<h4>Begin object:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.beginObject || '-' }}</p>
-				</div>
-				<div>
-					<h4>Einde object:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.eindeObject || '-' }}</p>
-				</div>
-				<div>
-					<h4>Versiedatum:</h4>
-					<p>{{ zaakTypeStore.zaakTypeItem?.versiedatum || '-' }}</p>
+
+				<div class="detailGrid">
+					<div>
+						<h4>Omschrijving:</h4>
+						<span>{{ zaakTypeStore.zaakTypeItem?.omschrijving || '-' }}</span>
+					</div>
+					<div>
+						<h4>Generieke omschrijving:</h4>
+						<span>{{ zaakTypeStore.zaakTypeItem?.omschrijvingGeneriek || '-' }}</span>
+					</div>
+					<div>
+						<h4>Vertrouwelijkheidaanduiding:</h4>
+						<span>{{ zaakTypeStore.zaakTypeItem?.vertrouwelijkheidaanduiding || '-' }}</span>
+					</div>
+					<div>
+						<h4>Doel:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.doel || '-' }}</p>
+					</div>
+					<div>
+						<h4>Aanleiding:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.aanleiding || '-' }}</p>
+					</div>
+					<div>
+						<h4>Toelichting:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.toelichting || '-' }}</p>
+					</div>
+					<div>
+						<h4>Indicatie intern of extern:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.indicatieInternOfExtern || '-' }}</p>
+					</div>
+					<div>
+						<h4>Handeling initiatie:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.handelingInitiator || '-' }}</p>
+					</div>
+					<div>
+						<h4>Onderwerp:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.onderwerp || '-' }}</p>
+					</div>
+					<div>
+						<h4>Handeling behandelaar:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.handelingBehandelaar || '-' }}</p>
+					</div>
+					<div>
+						<h4>Doorlooptijd:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.doorlooptijd || '-' }}</p>
+					</div>
+					<div>
+						<h4>Servicenorm:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.servicenorm || '-' }}</p>
+					</div>
+					<div>
+						<h4>Opschorting en aanhouding mogelijk:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.opschortingEnAanhoudingMogelijk || '-' }}</p>
+					</div>
+					<div>
+						<h4>Verlenging mogelijk:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.verlengingMogelijk || '-' }}</p>
+					</div>
+					<div>
+						<h4>Verlengingstermijn:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.verlengingstermijn || '-' }}</p>
+					</div>
+					<div>
+						<h4>Publicatie indicatie:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.publicatieIndicatie || '-' }}</p>
+					</div>
+					<div>
+						<h4>Publicatietekst:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.publicatietekst || '-' }}</p>
+					</div>
+					<div>
+						<h4>Producten of diensten:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.productenOfDiensten || '-' }}</p>
+					</div>
+					<div>
+						<h4>Selectielijst proces type:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.selectielijstProcestype || '-' }}</p>
+					</div>
+					<div>
+						<h4>Referentieproces:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.referentieproces || '-' }}</p>
+					</div>
+					<div>
+						<h4>Catalogus:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.catalogus || '-' }}</p>
+					</div>
+					<div>
+						<h4>Begin geldigheid:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.beginGeldigheid || '-' }}</p>
+					</div>
+					<div>
+						<h4>Einde geldigheid:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.eindeGeldigheid || '-' }}</p>
+					</div>
+					<div>
+						<h4>Begin object:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.beginObject || '-' }}</p>
+					</div>
+					<div>
+						<h4>Einde object:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.eindeObject || '-' }}</p>
+					</div>
+					<div>
+						<h4>Versiedatum:</h4>
+						<p>{{ zaakTypeStore.zaakTypeItem?.versiedatum || '-' }}</p>
+					</div>
 				</div>
 			</div>
 		</div>
-
-		<NcLoadingIcon v-if="loading"
-			:size="100"
-			appearance="dark"
-			name="Zaaktype details aan het laden" />
 	</div>
 </template>
 
@@ -164,28 +163,33 @@ export default {
 		DotsHorizontal,
 		Pencil,
 	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			loading: true,
 			currentId: null,
 		}
 	},
-	mounted() {
-		this.fetchData()
+	watch: {
+		id(newId) {
+			this.fetchData(newId)
+		},
 	},
-	updated() {
-		if (zaakTypeStore.zaakTypeItem?.id && this.currentId !== zaakTypeStore.zaakTypeItem.id) {
-			this.currentId = zaakTypeStore.zaakTypeItem.id
-			this.fetchData()
-		}
+	mounted() {
+		this.fetchData(this.id)
 	},
 	methods: {
-		fetchData() {
+		fetchData(id) {
 			this.loading = true
 
 			// get current zaaktype once
-			zaakTypeStore.getZaakType(zaakTypeStore.zaakTypeItem.id, { setItem: true })
-				.then(() => {
+			zaakTypeStore.getZaakType(id, { setItem: true })
+				.finally(() => {
 					this.loading = false
 				})
 		},
diff --git a/src/views/zaakTypen/ZaakTypenList.vue b/src/views/zaakTypen/ZaakTypenList.vue
index db3b63e..c4908d1 100644
--- a/src/views/zaakTypen/ZaakTypenList.vue
+++ b/src/views/zaakTypen/ZaakTypenList.vue
@@ -31,19 +31,17 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 				</NcActions>
 			</div>
 
-			<div v-if="zaakTypeStore.zaakTypeList?.length && !loading">
+			<div v-if="zaakTypeStore.zaakTypeList?.length">
 				<NcListItem v-for="(zaaktype, i) in zaakTypeStore.zaakTypeList"
 					:key="`${zaaktype}${i}`"
 					:name="zaaktype?.identificatie"
 					:force-display-actions="true"
-					:active="zaakTypeStore.zaakTypeItem?.id === zaaktype?.id"
+					:active="$route.params.id === zaaktype?.id"
 					:details="'1h'"
 					:counter-number="44"
-					@click="zaakTypeStore.setZaakTypeItem(zaaktype)">
+					@click="openZaakType(zaaktype)">
 					<template #icon>
-						<AlphaTBoxOutline :class="zaakTypeStore.zaakTypeItem?.id === zaaktype?.id && 'selectedZaakIcon'"
-							disable-menu
-							:size="44" />
+						<AlphaTBoxOutline disable-menu :size="44" />
 					</template>
 					<template #subname>
 						{{ zaaktype?.omschrijvingGeneriek }}
@@ -70,7 +68,7 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 			Geen zaaktypen gedefinieerd.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!zaakTypeStore.zaakTypeList.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -125,6 +123,10 @@ export default {
 			})
 	},
 	methods: {
+		openZaakType(zaaktype) {
+			zaakTypeStore.setZaakTypeItem(zaaktype)
+			this.$router.push({ name: 'dynamic-view', params: { view: 'zaaktypen', id: zaaktype.id } })
+		},
 		clearText() {
 			this.search = ''
 		},
diff --git a/src/views/zaakTypen/ZakenTypenIndex.vue b/src/views/zaakTypen/ZakenTypenIndex.vue
index eafd0a9..5f88970 100644
--- a/src/views/zaakTypen/ZakenTypenIndex.vue
+++ b/src/views/zaakTypen/ZakenTypenIndex.vue
@@ -8,7 +8,7 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 			<ZaakTypeList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!zaakTypeStore.zaakTypeItem || navigationStore.selected != 'zaakTypen' "
+			<NcEmptyContent v-if="!id"
 				class="detailContainer"
 				name="Geen Zaaktype"
 				description="Nog geen zaaktype geselecteerd">
@@ -21,7 +21,7 @@ import { navigationStore, zaakTypeStore } from '../../store/store.js'
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<ZaakTypeDetails v-if="zaakTypeStore.zaakTypeItem && navigationStore.selected === 'zaakTypen'" />
+			<ZaakTypeDetails v-if="id" :id="id" />
 		</template>
 	</NcAppContent>
 </template>
@@ -42,5 +42,10 @@ export default {
 		ZaakTypeList,
 		ZaakTypeDetails,
 	},
+	data() {
+		return {
+			id: this.$route.params.id,
+		}
+	},
 }
 </script>
diff --git a/src/views/zaken/ZaakDetails.vue b/src/views/zaken/ZaakDetails.vue
index 48703ca..4938120 100644
--- a/src/views/zaken/ZaakDetails.vue
+++ b/src/views/zaken/ZaakDetails.vue
@@ -5,8 +5,9 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 <template>
 	<div class="detailContainer">
 		<div id="app-content">
+			<NcLoadingIcon v-if="!zaakStore.zaakItem && loading" :size="64" />
 			<!-- app-content-wrapper is optional, only use if app-content-list  -->
-			<div>
+			<div v-if="zaakStore.zaakItem">
 				<div class="head">
 					<h1 class="h1">
 						{{ zaakStore.zaakItem?.identificatie }}
@@ -176,7 +177,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 <script>
 // Components
 import { BTabs, BTab } from 'bootstrap-vue'
-import { NcActions, NcActionButton, NcListItem, NcEmptyContent } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcListItem, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 
 // Icons
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
@@ -206,6 +207,7 @@ export default {
 		NcActionButton,
 		BTabs,
 		BTab,
+		NcLoadingIcon,
 		// Views
 		ZaakEigenschappen,
 		ZaakRollen,
@@ -222,29 +224,39 @@ export default {
 		FileDocumentPlusOutline,
 		VectorPolylineEdit,
 	},
+	props: {
+		id: {
+			type: String,
+			required: true,
+		},
+	},
 	data() {
 		return {
 			// state
 			loading: true,
-			currentActiveZaak: null,
 			// data
 			auditTrails: [],
 			zaak: [],
 		}
 	},
-	mounted() {
-		this.currentActiveZaak = zaakStore.zaakItem
-		this.fetchAuditTrails(zaakStore.zaakItem.id)
+	watch: {
+		id(newId) {
+			this.fetchData(newId)
+		},
 	},
-	updated() {
-		if (zaakStore.zaakItem?.id && JSON.stringify(this.currentActiveZaak) !== JSON.stringify(zaakStore.zaakItem)) {
-			this.currentActiveZaak = zaakStore.zaakItem
-			this.fetchAuditTrails(zaakStore.zaakItem.id)
-		}
+	mounted() {
+		this.fetchData(this.id)
 	},
 	methods: {
-		fetchData() {
+		fetchData(id) {
 			this.loading = true
+
+			Promise.all([
+				zaakStore.getZaak(id, { setItem: true }),
+				this.fetchAuditTrails(id),
+			]).finally(() => {
+				this.loading = false
+			})
 		},
 		fetchAuditTrails(id) {
 
diff --git a/src/views/zaken/ZakenIndex.vue b/src/views/zaken/ZakenIndex.vue
index c5e2604..65fb2ef 100644
--- a/src/views/zaken/ZakenIndex.vue
+++ b/src/views/zaken/ZakenIndex.vue
@@ -8,7 +8,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 			<ZakenList />
 		</template>
 		<template #default>
-			<NcEmptyContent v-if="!zaakStore.zaakItem || navigationStore.selected != 'zaken' "
+			<NcEmptyContent v-if="!id"
 				class="detailContainer"
 				name="Geen Zaak"
 				description="Nog geen zaak geselecteerd">
@@ -21,7 +21,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 					</NcButton>
 				</template>
 			</NcEmptyContent>
-			<ZaakDetails v-if="zaakStore.zaakItem && navigationStore.selected === 'zaken'" />
+			<ZaakDetails v-if="id" :id="id" />
 		</template>
 	</NcAppContent>
 </template>
@@ -42,5 +42,10 @@ export default {
 		ZaakDetails,
 		BriefcaseAccountOutline,
 	},
+	data() {
+		return {
+			id: this.$route.params.id,
+		}
+	},
 }
 </script>
diff --git a/src/views/zaken/ZakenList.vue b/src/views/zaken/ZakenList.vue
index e4479ac..19e7ba2 100644
--- a/src/views/zaken/ZakenList.vue
+++ b/src/views/zaken/ZakenList.vue
@@ -31,15 +31,15 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 				</NcActions>
 			</div>
 
-			<div v-if="zaakStore.zakenList?.length && !loading">
+			<div v-if="zaakStore.zakenList?.length">
 				<NcListItem v-for="(zaak, i) in zaakStore.zakenList"
 					:key="`${zaak}${i}`"
 					:name="zaak?.identificatie"
 					:force-display-actions="true"
-					:active="zaakStore.zaakItem?.id === zaak?.id"
+					:active="$route.params?.id === zaak?.id"
 					:details="'1h'"
 					:counter-number="zaak.uiterlijkeEinddatumAfdoening ? `${Math.ceil((new Date(zaak.uiterlijkeEinddatumAfdoening) - new Date()) / (1000 * 60 * 60 * 24))} dagen` : 'no deadline'"
-					@click="zaakStore.setZaakItem(zaak)">
+					@click="openZaak(zaak)">
 					<template #icon>
 						<BriefcaseAccountOutline :class="zaakStore.zaakItem?.id === zaak?.id && 'selectedZaakIcon'"
 							disable-menu
@@ -70,7 +70,7 @@ import { navigationStore, zaakStore } from '../../store/store.js'
 			Geen zaken gedefinieerd.
 		</div>
 
-		<NcLoadingIcon v-if="loading"
+		<NcLoadingIcon v-if="!zaakStore.zakenList.length && loading"
 			class="loadingIcon"
 			:size="64"
 			appearance="dark"
@@ -125,6 +125,10 @@ export default {
 		clearText() {
 			this.search = ''
 		},
+		openZaak(zaak) {
+			zaakStore.setZaakItem(zaak)
+			this.$router.push({ params: { id: zaak.id } })
+		},
 	},
 }
 </script>
diff --git a/tsconfig.json b/tsconfig.json
index fcd7d19..497714a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,6 @@
         "skipLibCheck": true,
         "baseUrl": ".",
     },
-    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+    "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/shims-vue.d.ts"],
     "exclude": ["node_modules"]
 }
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 923a8db..62f5006 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -46,4 +46,11 @@ webpackConfig.entry = {
 	},
 }
 
+webpackConfig.resolve = {
+	extensions: ['.ts', '.js', '.vue', '.json'],
+	alias: {
+		'@': path.resolve(__dirname, 'src/'),
+	},
+}
+
 module.exports = webpackConfig