diff --git a/src/queries/area/construct-view-model.ts b/src/queries/area/construct-view-model.ts
new file mode 100644
index 00000000..95b7aaf8
--- /dev/null
+++ b/src/queries/area/construct-view-model.ts
@@ -0,0 +1,19 @@
+import {pipe} from 'fp-ts/lib/function';
+import {User} from '../../types';
+import {Dependencies} from '../../dependencies';
+import * as TE from 'fp-ts/TaskEither';
+import {readModels} from '../../read-models';
+import {FailureWithStatus} from '../../types/failureWithStatus';
+import {ViewModel} from './view-model';
+
+export const constructViewModel =
+  (deps: Dependencies) =>
+  (user: User): TE.TaskEither<FailureWithStatus, ViewModel> =>
+    pipe(
+      deps.getAllEvents(),
+      TE.map(events => ({
+        user: user,
+        isSuperUser: readModels.superUsers.is(user.memberNumber)(events),
+        areaName: '3D Printers',
+      }))
+    );
diff --git a/src/queries/area/index.ts b/src/queries/area/index.ts
new file mode 100644
index 00000000..d8554874
--- /dev/null
+++ b/src/queries/area/index.ts
@@ -0,0 +1,27 @@
+import {Request, Response} from 'express';
+import {pipe} from 'fp-ts/lib/function';
+import * as TE from 'fp-ts/TaskEither';
+import {Dependencies} from '../../dependencies';
+import {getUserFromSession} from '../../authentication';
+import {logInRoute} from '../../authentication/configure-auth-routes';
+import {failureWithStatus} from '../../types/failureWithStatus';
+import {StatusCodes} from 'http-status-codes';
+import {constructViewModel} from './construct-view-model';
+import {render} from './render';
+
+export const area =
+  (deps: Dependencies) => async (req: Request, res: Response) => {
+    await pipe(
+      req.session,
+      getUserFromSession(deps),
+      TE.fromOption(() =>
+        failureWithStatus('You are not logged in.', StatusCodes.UNAUTHORIZED)()
+      ),
+      TE.chain(constructViewModel(deps)),
+      TE.map(render),
+      TE.matchW(
+        () => res.redirect(logInRoute),
+        page => res.status(200).send(page)
+      )
+    )();
+  };
diff --git a/src/queries/area/render.ts b/src/queries/area/render.ts
new file mode 100644
index 00000000..f33a07fd
--- /dev/null
+++ b/src/queries/area/render.ts
@@ -0,0 +1,11 @@
+import {pipe} from 'fp-ts/lib/function';
+import {pageTemplate} from '../../templates';
+import {html} from '../../types/html';
+import * as O from 'fp-ts/Option';
+import {ViewModel} from './view-model';
+
+export const render = (viewModel: ViewModel) =>
+  pipe(
+    html` <h1>${viewModel.areaName}</h1> `,
+    pageTemplate(viewModel.areaName, O.some(viewModel.user))
+  );
diff --git a/src/queries/area/view-model.ts b/src/queries/area/view-model.ts
new file mode 100644
index 00000000..4174224f
--- /dev/null
+++ b/src/queries/area/view-model.ts
@@ -0,0 +1,6 @@
+import {User} from '../../types';
+
+export type ViewModel = {
+  areaName: string;
+  user: User;
+};
diff --git a/src/queries/index.ts b/src/queries/index.ts
index 57e112f1..3bc79131 100644
--- a/src/queries/index.ts
+++ b/src/queries/index.ts
@@ -3,9 +3,11 @@ import {areas} from './areas';
 import {landing} from './landing';
 import {superUsers} from './super-users';
 import asyncHandler from 'express-async-handler';
+import {area} from './area';
 
 export const queries = {
   areas: flow(areas, asyncHandler),
+  area: flow(area, asyncHandler),
   superUsers: flow(superUsers, asyncHandler),
   landing: flow(landing, asyncHandler),
 };
diff --git a/src/router.ts b/src/router.ts
index e1765495..74c79319 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -15,6 +15,7 @@ export const createRouter = (deps: Dependencies, conf: Config): Router => {
   router.get('/', queries.landing(deps));
 
   router.get('/areas', queries.areas(deps));
+  router.get('/areas/:area', queries.area(deps));
   router.get('/areas/create', http.formGet(deps, commands.area.create));
   router.post(
     '/areas/create',