diff --git a/packages/gui/src/components/case-page.ts b/packages/gui/src/components/case-page.ts
new file mode 100644
index 0000000..3fc35a9
--- /dev/null
+++ b/packages/gui/src/components/case-page.ts
@@ -0,0 +1,43 @@
+import m from 'mithril';
+import { Pages } from '../models';
+import { MeiosisComponent, t } from '../services';
+import { Chips } from 'mithril-materialized';
+import { ChipData } from 'materialize-css';
+
+export const CasePage: MeiosisComponent = () => {
+  const tags: string[] = [];
+
+  return {
+    oninit: ({
+      attrs: {
+        actions: { setPage },
+      },
+    }) => {
+      setPage(Pages.CASE);
+    },
+    view: ({ attrs: { state, actions } }) => {
+      const { caseTags = [], caseResults = [] } = state;
+      const { update } = actions;
+      const data: ChipData[] = caseTags.map((tag) => ({ tag }));
+
+      return m('#case-page.row.case.page.markdown', [
+        m('.col.s12', [
+          m(Chips, {
+            data,
+            label: 'Aangetroffen zaken',
+            className: 'center-align',
+            onchange: (tags) => {
+              const caseTags = tags.map((tag) => tag.tag);
+              update({ caseTags });
+            },
+          }),
+        ]),
+        // caseResults.length > 0 &&
+        caseTags.length > 0 && m('.col.s12', m('h4', 'Meest waarschijnlijke acts')),
+        caseTags.map((tag) => {
+          return m('.col.s12', m('h5', tag));
+        }),
+      ]);
+    },
+  };
+};
diff --git a/packages/gui/src/components/index.ts b/packages/gui/src/components/index.ts
index 9f7f529..36a4a9a 100644
--- a/packages/gui/src/components/index.ts
+++ b/packages/gui/src/components/index.ts
@@ -1,6 +1,7 @@
 export * from './about-page';
 export * from './home-page';
 export * from './crime-script-page';
+export * from './case-page';
 export * from './settings-page';
 export * from './landing-page';
 export * from './layout';
diff --git a/packages/gui/src/models/page.ts b/packages/gui/src/models/page.ts
index 2de7398..310b6fd 100644
--- a/packages/gui/src/models/page.ts
+++ b/packages/gui/src/models/page.ts
@@ -10,6 +10,7 @@ export enum Pages {
   CRIME_SCRIPT = 'CRIME_SCRIPT',
   SETTINGS = 'SETTINGS',
   ABOUT = 'ABOUT',
+  CASE = 'CASE',
 }
 
 export type VisibilityResolver = (s: State) => boolean;
diff --git a/packages/gui/src/services/routing-service.ts b/packages/gui/src/services/routing-service.ts
index d70c290..93ba3b6 100644
--- a/packages/gui/src/services/routing-service.ts
+++ b/packages/gui/src/services/routing-service.ts
@@ -1,7 +1,7 @@
 import m, { RouteDefs } from 'mithril';
 import { Pages, Page } from '../models';
 import { Layout } from '../components/layout';
-import { AboutPage, CrimeScriptPage, HomePage, LandingPage, SettingsPage } from '../components';
+import { AboutPage, CasePage, CrimeScriptPage, HomePage, LandingPage, SettingsPage } from '../components';
 import { t } from './translations';
 import { appActions, cells } from './meiosis';
 
@@ -36,17 +36,27 @@ class RoutingService {
         title: t('CRIME_SCRIPT', 'TITLE'),
         route: t('CRIME_SCRIPT', 'ROUTE'),
         visible: true,
-        hasSidebar: true,
+        hasSidebar: false,
         component: CrimeScriptPage,
       },
+      {
+        id: Pages.CASE,
+        icon: 'cases',
+        // iconClass: 'blue-text',
+        title: t('CASE', 'TITLE'),
+        route: t('CASE', 'ROUTE'),
+        hasSidebar: false,
+        visible: true, // ({ role }) => role === 'admin',
+        component: CasePage,
+      },
       {
         id: Pages.SETTINGS,
         icon: 'edit_attributes',
         // iconClass: 'blue-text',
         title: t('SETTINGS', 'TITLE'),
         route: t('SETTINGS', 'ROUTE'),
-        hasSidebar: true,
-        visible: ({ role }) => role === 'admin',
+        hasSidebar: false,
+        visible: true, // ({ role }) => role === 'admin',
         component: SettingsPage,
       },
       {