diff --git a/.eslintrc.json b/.eslintrc.json
index d506fa2..3fff59d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,12 @@
 {
   "root": true,
-  "ignorePatterns": ["dist/**", ".output/**", ".nuxt/**", "dockerdata/**"],
+  "ignorePatterns": [
+    "dist/**",
+    ".output/**",
+    ".nuxt/**",
+    "dockerdata/**",
+    "node_modules/**"
+  ],
   "extends": [
     "eslint:recommended",
     "plugin:json/recommended",
@@ -37,6 +43,7 @@
           "*~/server/logic",
           "*~/server/prisma",
           "*~/server/sync",
+          "*~/server/types",
           "*~/server/validation",
           "*~/server/utils",
           "*~/utils/*"
diff --git a/components/Breadcrumbs.vue b/components/Breadcrumbs.vue
new file mode 100644
index 0000000..d0877b2
--- /dev/null
+++ b/components/Breadcrumbs.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="text-xl breadcrumbs">
+    <ul class="text-primary font-bold">
+      <li v-for="crumb in crumbs" :key="crumb.name">
+        <NuxtLink :to="crumb.link">{{ crumb.name }}</NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  crumbs: {
+    name: string;
+    link: string;
+  }[];
+}>();
+</script>
diff --git a/components/Input/Select.vue b/components/Input/Select.vue
index ae39305..ac4916c 100644
--- a/components/Input/Select.vue
+++ b/components/Input/Select.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="form-control mb-4">
+  <div class="form-control">
     <label v-if="title" class="label">
       <span class="label-text text-base font-bold">{{ title }}</span>
       <span v-if="required" class="label-text-alt text-error text-lg">*</span>
diff --git a/components/Input/Text.vue b/components/Input/Text.vue
index f283742..5ed3cbe 100644
--- a/components/Input/Text.vue
+++ b/components/Input/Text.vue
@@ -5,7 +5,7 @@
       <span v-if="required" class="label-text-alt text-error text-lg">*</span>
     </label>
     <input
-      type="text"
+      :type="type"
       class="input"
       :class="classes"
       :title="title"
@@ -26,9 +26,10 @@
 <script lang="ts" setup>
 interface Props {
   modelValue?: string;
+  type: "text" | "search" | "date";
   title?: string;
   error?: string;
-  placeholder: string;
+  placeholder?: string;
   size?: "xs" | "sm" | "md" | "lg";
   color?:
     | "primary"
diff --git a/components/NavBar/NavBar.vue b/components/NavBar/NavBar.vue
index 2a3d04f..67d4b74 100644
--- a/components/NavBar/NavBar.vue
+++ b/components/NavBar/NavBar.vue
@@ -59,28 +59,32 @@ const menuItems: MenuItem[] = [
       },
     ],
   },
-  { name: "Foto's", icon: "material-symbols:camera", target: "/foto" },
+  {
+    name: "Foto's",
+    icon: "material-symbols:camera",
+    target: "https://proteus-eretes.nl/fotos",
+  },
   {
     name: "Leden",
     icon: "material-symbols:person",
-    target: "/lid",
+    target: "/leden",
     children: [
       {
         name: "Groepen",
         icon: "material-symbols:group",
-        target: "/groups",
+        target: "/groepen",
       },
       {
         name: "Lebberlijst",
         icon: "ph:graph",
-        target: "/lebberlijst",
+        target: "https://proteus-eretes.nl/lebberlijst",
       },
     ],
   },
   {
     name: "Evenementen",
     icon: "material-symbols:calendar-today",
-    target: "/event",
+    target: "https://proteus-eretes.nl/eetlijst",
   },
 ];
 </script>
diff --git a/components/NavBar/ProfileDropdown.vue b/components/NavBar/ProfileDropdown.vue
index 1bee6cb..7ddd978 100644
--- a/components/NavBar/ProfileDropdown.vue
+++ b/components/NavBar/ProfileDropdown.vue
@@ -14,7 +14,18 @@
       class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
     >
       <li>
-        <NuxtLink to="/me" title="Mijn Profiel">Profiel</NuxtLink>
+        <!-- TODO: change link to logged in member's profile -->
+        <NuxtLink to="/leden" title="Mijn Profiel">Profiel</NuxtLink>
+      </li>
+      <li>
+        <!-- TODO: change link to logged in member's memberships -->
+        <NuxtLink to="/groepen" title="Lidmaatschappen"
+          >Lidmaatschappen
+        </NuxtLink>
+      </li>
+      <li>
+        <!-- TODO: change link to logged in member's settings -->
+        <NuxtLink to="/leden" title="Instellingen">Instellingen</NuxtLink>
       </li>
       <li><a @click.prevent="() => signOut()">Log uit</a></li>
     </ul>
diff --git a/components/NavBar/Search.vue b/components/NavBar/Search.vue
index 60e9077..ba05518 100644
--- a/components/NavBar/Search.vue
+++ b/components/NavBar/Search.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="form-control max-lg:hidden mx-4">
-    <InputText placeholder="Proteus Zoek!" bordered />
+    <InputText type="text" placeholder="Proteus Zoek!" bordered />
   </div>
-  <Button title="Seearch" ghost shape="circle" class="lg:hidden">
+  <Button title="Search" ghost shape="circle" class="lg:hidden">
     <Icon name="material-symbols:search" size="28px" />
   </Button>
 </template>
diff --git a/components/Page/Material/TypesCreate.vue b/components/Page/Material/TypesCreate.vue
index f291d1b..e047365 100644
--- a/components/Page/Material/TypesCreate.vue
+++ b/components/Page/Material/TypesCreate.vue
@@ -4,6 +4,7 @@
       <Alert type="error" :content="error?.global" />
       <InputText
         v-model="name"
+        type="text"
         title="Naam Materiaaltype"
         placeholder="Helicopter"
         :error="error?.name"
diff --git a/components/TwoColumn.vue b/components/TwoColumn.vue
index 9b0c76e..3e1937b 100644
--- a/components/TwoColumn.vue
+++ b/components/TwoColumn.vue
@@ -8,7 +8,24 @@
         {{ title }}
       </div>
       <div class="collapse-content">
-        <slot name="content" />
+        <ul class="menu">
+          <li v-for="item in items" :key="item.title" :class="classes(item.to)">
+            <span v-if="!item.to">{{ item.title }}</span>
+            <NuxtLink v-else :to="item.to">
+              <Icon
+                :name="item.icon || 'ic:baseline-question-mark'"
+                size="20px"
+              />
+              {{ item.title }}
+              <span
+                v-if="item.badge"
+                class="indicator-item indicator-middle badge badge-secondary"
+              >
+                {{ item.badge }}
+              </span>
+            </NuxtLink>
+          </li>
+        </ul>
       </div>
     </div>
     <div class="divider divider-horizontal max-lg:hidden"></div>
@@ -19,7 +36,20 @@
 </template>
 
 <script lang="ts" setup>
+export interface MenuItem {
+  icon?: string;
+  title: string;
+  to?: string;
+  badge?: string;
+}
+
 defineProps<{
   title: string;
+  items: MenuItem[];
 }>();
+
+const classes = (route?: string): string => {
+  if (!route) return "menu-title pt-5";
+  return useRoute().path.endsWith(route) ? "bordered" : "";
+};
 </script>
diff --git a/composables/useBreadcrumbs.ts b/composables/useBreadcrumbs.ts
new file mode 100644
index 0000000..7c24536
--- /dev/null
+++ b/composables/useBreadcrumbs.ts
@@ -0,0 +1,59 @@
+import { Group, Member } from "~/server/types";
+
+export const useBreadcrumbs = () => {
+  const route = computed(() => useRoute().path.slice(1).split("/"));
+
+  const breadCrumbs = computed(() => {
+    const crumbs = [];
+    let link = "";
+
+    for (const crumb of route.value) {
+      crumbs.push({
+        name: formatCrumb(crumb),
+        link: (link = link + "/" + crumb),
+      });
+    }
+    return crumbs;
+  });
+
+  const groupCrumbs = (group: Group) =>
+    computed(() => {
+      const crumbs = [];
+      let link = "";
+
+      for (const crumb of route.value) {
+        link = link + "/" + crumb;
+        const name = crumb === group.id ? group.name : formatCrumb(crumb);
+        crumbs.push({ name, link });
+      }
+      return crumbs;
+    });
+
+  const memberCrumbs = (member: Member) =>
+    computed(() => {
+      const crumbs = [];
+      let link = "";
+
+      for (const crumb of route.value) {
+        link = link + "/" + crumb;
+        const name =
+          crumb === member.id
+            ? `${member.firstName} ${member.insertion} ${member.lastName}`
+            : formatCrumb(crumb);
+        crumbs.push({ name, link });
+      }
+      return crumbs;
+    });
+
+  return {
+    breadCrumbs,
+    memberCrumbs,
+    groupCrumbs,
+  };
+};
+
+const formatCrumb = (crumb: string) => {
+  let parts = crumb.split("-");
+  parts = parts.map((p) => p.charAt(0).toUpperCase() + p.slice(1));
+  return parts.join(" ");
+};
diff --git a/composables/useDateFormatter.ts b/composables/useDateFormatter.ts
new file mode 100644
index 0000000..31685c6
--- /dev/null
+++ b/composables/useDateFormatter.ts
@@ -0,0 +1,31 @@
+export const useDateFormatter = () => {
+  const dateToString = (date?: Date) =>
+    computed<string>(() => {
+      if (!date) return "-";
+      const day = date.getDate();
+      const month = date.getMonth() + 1;
+      const year = date.getFullYear();
+      return `${day}-${month}-${year}`;
+    });
+
+  const ISOToString = (date?: string) =>
+    computed<string>(() => {
+      if (!date) return "-";
+      const day = date.slice(8, 10);
+      const month = date.slice(5, 7);
+      const year = date.slice(0, 4);
+      return `${day}-${month}-${year}`;
+    });
+
+  const ISOToDateInputString = (date?: string) =>
+    computed<string>(() => {
+      if (!date) return "";
+      return date.slice(0, 10);
+    });
+
+  return {
+    dateToString,
+    ISOToString,
+    ISOToDateInputString,
+  };
+};
diff --git a/middleware/validateRouteUUID.global.ts b/middleware/validateRouteUUID.global.ts
new file mode 100644
index 0000000..c0950b4
--- /dev/null
+++ b/middleware/validateRouteUUID.global.ts
@@ -0,0 +1,13 @@
+import validator from "validator";
+
+export default defineNuxtRouteMiddleware((to) => {
+  if (!to.params.id) {
+    return true;
+  }
+
+  if (typeof to.params.id !== "string") {
+    return false;
+  }
+
+  return validator.isUUID(to.params.id);
+});
diff --git a/package.json b/package.json
index 729dd03..7c0afd7 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@nuxtjs/eslint-config-typescript": "^11.0.0",
     "@nuxtjs/tailwindcss": "^6.1.3",
-    "@prisma/client": "^4.6.1",
+    "@prisma/client": "^4.7.1",
     "@types/node": "^18.11.9",
     "@types/validator": "^13.7.10",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
@@ -39,12 +39,12 @@
     "nuxt-icon": "^0.1.7",
     "postcss-custom-properties": "^13.0.0",
     "prettier": "^2.7.1",
-    "prisma": "^4.6.1",
+    "prisma": "^4.7.1",
     "typescript": "^4.8.4",
     "vue-eslint-parser": "^9.1.0"
   },
   "dependencies": {
-    "@sidebase/nuxt-auth": "^0.3.0-alpha.1",
+    "@sidebase/nuxt-auth": "^0.3.0",
     "daisyui": "^2.38.0",
     "superstruct": "^1.0.3",
     "validator": "^13.7.0"
diff --git a/pages/groepen.vue b/pages/groepen.vue
new file mode 100644
index 0000000..913943e
--- /dev/null
+++ b/pages/groepen.vue
@@ -0,0 +1,50 @@
+<template>
+  <TwoColumn title="Groepen" :items="menuItems">
+    <NuxtPage />
+  </TwoColumn>
+</template>
+
+<script lang="ts" setup>
+const route = useRoute();
+
+const menuItems = computed(() => {
+  return [...standard, ...(route.params.id ? selected.value : [])];
+});
+
+const standard = [
+  { icon: "ic:search", title: "Zoeken", to: "/groepen" },
+  { icon: "ic:group", title: "Mijn Groepen", to: "/groepen/mijn-groepen" },
+  { icon: "ic:add", title: "Groep Maken", to: "/groepen/nieuw" },
+];
+
+const selected = computed(() => [
+  {
+    title: "Groep",
+  },
+  {
+    icon: "ic:baseline-groups",
+    title: "Overzicht",
+    to: `/groepen/${route.params.id}`,
+  },
+  {
+    icon: "ic:baseline-person-add-alt-1",
+    title: "Lid toevoegen",
+    to: `/groepen/${route.params.id}/toevoegen`,
+  },
+  {
+    icon: "ic:baseline-person-remove",
+    title: "Uitschrijvingen",
+    to: `/groepen/${route.params.id}/uitschrijvingen`,
+  },
+  {
+    icon: "ic:baseline-manage-accounts",
+    title: "Leden Beheren",
+    to: `/groepen/${route.params.id}/leden`,
+  },
+  {
+    icon: "ic:baseline-settings",
+    title: "Instellingen",
+    to: `/groepen/${route.params.id}/instellingen`,
+  },
+]);
+</script>
diff --git a/pages/groepen/[id].vue b/pages/groepen/[id].vue
new file mode 100644
index 0000000..35f61f1
--- /dev/null
+++ b/pages/groepen/[id].vue
@@ -0,0 +1,14 @@
+<template>
+  <Breadcrumbs :crumbs="groupCrumbs(group).value" />
+  <NuxtPage :group="group" />
+</template>
+
+<script lang="ts" setup>
+import { Group } from "~/server/types";
+
+const { groupCrumbs } = useBreadcrumbs();
+
+const { data: group } = await useFetch<Group>(
+  "/api/groups/" + useRoute().params.id,
+);
+</script>
diff --git a/pages/groepen/[id]/index.vue b/pages/groepen/[id]/index.vue
new file mode 100644
index 0000000..ef9763e
--- /dev/null
+++ b/pages/groepen/[id]/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div v-if="group" class="overflow-x-auto shadow">
+    <table class="table w-full">
+      <tbody>
+        <tr>
+          <td>ID</td>
+          <td>{{ group.id }}</td>
+        </tr>
+        <tr>
+          <td>Naam</td>
+          <td>{{ group.name }}</td>
+        </tr>
+        <tr>
+          <td>Beschrijving</td>
+          <td>{{ group.description }}</td>
+        </tr>
+        <tr>
+          <td>Sinds</td>
+          <td>{{ group.startDate }}</td>
+        </tr>
+        <tr>
+          <td>Tot</td>
+          <td>{{ group.stopDate }}</td>
+        </tr>
+        <tr
+          v-if="group.parentId"
+          class="hover cursor-pointer"
+          @click="navigateTo(`/groepen/${group.parentId}`)"
+        >
+          <td>Onderdeel van</td>
+          <td>{{ group.parentId }}</td>
+        </tr>
+        <tr>
+          <td>Contactinformatie</td>
+          <td>{{ group.contacts }}</td>
+        </tr>
+        <tr>
+          <td>Permissions</td>
+          <td>{{ group.permissions }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <h2 v-if="group?.members" class="my-4 text-3xl text-primary font-bold mb-4">
+    Leden
+  </h2>
+  <div v-if="group?.members" class="overflow-x-auto shadow">
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <td>ID</td>
+          <td>Functie</td>
+          <td>Sinds</td>
+          <td>Lid type</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="member in group.members.filter((m) => !m.stopDate)"
+          :key="member.id"
+        >
+          <td>{{ member.id }}</td>
+          <td>{{ member.function }}</td>
+          <td>{{ member.startDate }}</td>
+          <td>{{ member.isAdmin ? "Beheerder" : "Lid" }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <h2 v-if="group?.children" class="my-4 text-3xl text-primary font-bold mb-4">
+    Subgroepen
+  </h2>
+  <div v-if="group?.children" class="overflow-x-auto shadow">
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <td>Naam</td>
+          <td>Beschrijving</td>
+          <td>Sinds</td>
+          <td>Tot</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="child in group.children"
+          :key="child.id"
+          class="hover cursor-pointer"
+          @click="navigateTo(`/groepen/${child.id}`)"
+        >
+          <td>{{ child.name }}</td>
+          <td>{{ child.description }}</td>
+          <td>{{ child.startDate }}</td>
+          <td>{{ child.stopDate }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Group } from "~/server/types";
+
+defineProps<{
+  group: Group;
+}>();
+</script>
diff --git a/pages/groepen/[id]/instellingen.vue b/pages/groepen/[id]/instellingen.vue
new file mode 100644
index 0000000..3287193
--- /dev/null
+++ b/pages/groepen/[id]/instellingen.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="overflow-x-auto shadow">
+    groep dingen hiero<br />
+    <button
+      class="btn btn-error btn-outline"
+      :disabled="requesting"
+      @click="send"
+    >
+      Groep Verwijderen
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Group } from "~/server/types";
+
+defineProps<{
+  group: Group;
+}>();
+
+const { requesting, send } = useRequest<
+  Awaited<
+    ReturnType<typeof import("~/server/api/groups/[id]/index.delete").default>
+  >
+>("/api/groups/" + useRoute().params.id, apiErrorHandler([]), {
+  method: "delete",
+  async onSuccess() {
+    await navigateTo("/groepen");
+  },
+});
+</script>
diff --git a/pages/groepen/[id]/leden.vue b/pages/groepen/[id]/leden.vue
new file mode 100644
index 0000000..d9db6a4
--- /dev/null
+++ b/pages/groepen/[id]/leden.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="overflow-x-auto shadow">
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <td>Naam</td>
+          <td>Functie</td>
+          <td>Sinds</td>
+          <td>Tot</td>
+          <td>Lid Type</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="member in group.members" :key="member.id">
+          <td>{{ member.id }}</td>
+          <td>{{ member.function }}</td>
+          <td>{{ member.startDate }}</td>
+          <td>{{ member.stopDate }}</td>
+          <td>{{ member.isAdmin ? "Beheerder" : "Lid" }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Group } from "~/server/types";
+
+defineProps<{
+  group: Group;
+}>();
+</script>
diff --git a/pages/groepen/[id]/toevoegen.vue b/pages/groepen/[id]/toevoegen.vue
new file mode 100644
index 0000000..6baf423
--- /dev/null
+++ b/pages/groepen/[id]/toevoegen.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="overflow-x-auto shadow">form hiero</div>
+</template>
+
+<script setup lang="ts">
+import { Group } from "~/server/types";
+
+defineProps<{
+  group: Group;
+}>();
+</script>
diff --git a/pages/groepen/[id]/uitschrijvingen.vue b/pages/groepen/[id]/uitschrijvingen.vue
new file mode 100644
index 0000000..7d175fe
--- /dev/null
+++ b/pages/groepen/[id]/uitschrijvingen.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="overflow-x-auto shadow">uitschrijvingen hiero</div>
+</template>
+
+<script setup lang="ts">
+import { Group } from "~/server/types";
+
+defineProps<{
+  group: Group;
+}>();
+</script>
diff --git a/pages/groepen/index.vue b/pages/groepen/index.vue
new file mode 100644
index 0000000..0f6047c
--- /dev/null
+++ b/pages/groepen/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <Breadcrumbs :crumbs="breadCrumbs" />
+  <div class="overflow-x-auto shadow">
+    <input
+      type="search"
+      placeholder="Zoeken…"
+      class="input input-bordered w-full"
+      @input="
+        filter = ($event.target as HTMLTextAreaElement).value.toLowerCase()
+      "
+    />
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <th>Naam</th>
+          <th>Beschrijving</th>
+          <th>Sinds</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="group in filteredGroups"
+          :key="group.id"
+          class="hover"
+          @click="navigateTo(`/groepen/${group.id}`)"
+        >
+          <td>{{ group.name }}</td>
+          <td>{{ group.description }}</td>
+          <td>{{ group.startDate }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Groups } from "~/server/types";
+
+const { breadCrumbs } = useBreadcrumbs();
+
+const filter = ref("");
+const filteredGroups = computed(() => {
+  if (!groups.value) return [];
+  return groups.value.filter(
+    (g) =>
+      g.name.toLowerCase().includes(filter.value) ||
+      g.description.toLowerCase().includes(filter.value),
+  );
+});
+
+const { data: groups } = await useFetch<Groups>("/api/groups");
+</script>
diff --git a/pages/groepen/mijn-groepen.vue b/pages/groepen/mijn-groepen.vue
new file mode 100644
index 0000000..00a9b34
--- /dev/null
+++ b/pages/groepen/mijn-groepen.vue
@@ -0,0 +1,57 @@
+<template>
+  <Breadcrumbs :crumbs="breadCrumbs" />
+  <div class="overflow-x-auto shadow">
+    <input
+      type="search"
+      placeholder="Zoeken…"
+      class="input input-bordered w-full"
+      @input="
+        filter = ($event.target as HTMLTextAreaElement).value.toLowerCase()
+      "
+    />
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <th>Groep</th>
+          <th>Functie</th>
+          <th>Sinds</th>
+          <th>Tot</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="membership in filteredMemberships"
+          :key="membership.id"
+          class="hover"
+          @click="navigateTo(`/groepen/${membership.group.id}`)"
+        >
+          <td>{{ membership.group.name }}</td>
+          <td>{{ membership.function }}</td>
+          <td>{{ membership.startDate }}</td>
+          <td>{{ membership.stopDate }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { breadCrumbs } = useBreadcrumbs();
+
+const filter = ref("");
+const filteredMemberships = computed(() => {
+  if (!memberships.value) return [];
+  return memberships.value.filter((m) =>
+    m.group.name.toLowerCase().includes(filter.value),
+  );
+});
+
+// TODO: Fetch logged in member's memberships
+const memberships = ref<
+  Awaited<
+    ReturnType<
+      typeof import("~~/server/api/members/[id]/memberships.get").default
+    >
+  >
+>([]);
+</script>
diff --git a/pages/groepen/nieuw.vue b/pages/groepen/nieuw.vue
new file mode 100644
index 0000000..a91bb06
--- /dev/null
+++ b/pages/groepen/nieuw.vue
@@ -0,0 +1,92 @@
+<template>
+  <Breadcrumbs :crumbs="breadCrumbs" />
+  <div class="overflow-x-auto shadow p-5">
+    <form @submit.prevent="send">
+      <InputText
+        v-model="name"
+        type="text"
+        title="Naam"
+        placeholder="Boeing AH-64 Apache"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="description"
+        type="text"
+        title="Beschrijving"
+        placeholder="An American twin-turboshaft attack helicopter with a tailwheel-type landing gear"
+        :disabled="requesting"
+        bordered
+      />
+      <InputText
+        v-model="startDate"
+        type="date"
+        title="Sinds"
+        :disabled="requesting"
+        bordered
+      />
+      <InputText
+        v-model="stopDate"
+        type="date"
+        title="Tot"
+        :disabled="requesting"
+        bordered
+      />
+      <InputSelect
+        v-model="parentId"
+        title="Onderdeel van"
+        :disabled="requesting"
+        bordered
+        class="mb-4"
+      >
+        <option selected value="">-- Losstaande groep --</option>
+        <option
+          v-for="parentGroup in parents"
+          :key="parentGroup.id"
+          :value="parentGroup.id"
+        >
+          {{ parentGroup.name }}
+        </option>
+      </InputSelect>
+      <Button
+        type="submit"
+        title="Maak groep aan"
+        color="primary"
+        :loading="requesting"
+      >
+        Maak Aan
+      </Button>
+    </form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Groups } from "~/server/types";
+
+const { breadCrumbs } = useBreadcrumbs();
+
+const name = ref<string>("");
+const description = ref<string>("");
+const parentId = ref<string>("");
+const startDate = ref<string>("");
+const stopDate = ref<string>("");
+
+const { requesting, send, data } = useRequest<
+  Awaited<ReturnType<typeof import("~~/server/api/groups/index.post").default>>
+>("/api/groups", apiErrorHandler([]), {
+  method: "post",
+  body: {
+    name,
+    description,
+    parentId,
+    startDate: ref(startDate.value || undefined),
+    stopDate: ref(stopDate.value || undefined),
+  },
+  async onSuccess() {
+    await navigateTo(`/groepen/${data.value?.id}`);
+  },
+});
+
+const { data: parents } = await useFetch<Groups>("/api/groups");
+</script>
diff --git a/pages/leden.vue b/pages/leden.vue
new file mode 100644
index 0000000..27d4797
--- /dev/null
+++ b/pages/leden.vue
@@ -0,0 +1,85 @@
+<template>
+  <TwoColumn title="Leden" :items="menuItems">
+    <NuxtPage />
+  </TwoColumn>
+</template>
+
+<script lang="ts" setup>
+const route = useRoute();
+
+const menuItems = computed(() => [
+  ...standard.value,
+  ...(route.params.id ? selected.value : []),
+  ...admin.value, // TODO: Add admin check
+]);
+
+const standard = computed(() => [
+  {
+    icon: "ic:search",
+    title: "Zoeken",
+    to: "/leden",
+  },
+  {
+    icon: "ic:baseline-account-circle",
+    title: "Mijn Profiel",
+    to: `/leden`, // TODO: Route to logged in member
+  },
+]);
+
+const selected = computed(() => [
+  {
+    title: "Lid",
+  },
+  {
+    icon: "ic:baseline-account-circle",
+    title: "Profiel",
+    to: `/leden/${route.params.id}`,
+  },
+  {
+    icon: "ic:group",
+    title: "Lidmaatschappen",
+    to: `/leden/${route.params.id}/groepen`,
+  },
+  {
+    icon: "ic:baseline-menu-book",
+    title: "Studies",
+    to: `/leden/${route.params.id}/studies`,
+  },
+  {
+    icon: "ic:baseline-phone",
+    title: "Contact opties",
+    to: `/leden/${route.params.id}/contact`,
+  },
+  {
+    icon: "ic:baseline-assignment-ind",
+    title: "Gegevens",
+    to: `/leden/${route.params.id}/gegevens`,
+  },
+  {
+    icon: "ic:settings",
+    title: "Instellingen",
+    to: `/leden/${route.params.id}/instellingen`,
+  },
+]);
+
+const admin = computed(() => [
+  {
+    title: "Tools",
+  },
+  {
+    icon: "ic:baseline-person-add-alt-1",
+    title: "Toevoegen",
+    to: "/leden/toevoegen",
+  },
+  {
+    icon: "ic:baseline-mail-outline",
+    title: "Uitnodigen",
+    to: "/leden/uitnodigen",
+  },
+  {
+    icon: "ic:baseline-download",
+    title: "Exporteren",
+    to: "/leden/exporteren",
+  },
+]);
+</script>
diff --git a/pages/leden/[id].vue b/pages/leden/[id].vue
new file mode 100644
index 0000000..3ac574f
--- /dev/null
+++ b/pages/leden/[id].vue
@@ -0,0 +1,14 @@
+<template>
+  <Breadcrumbs :crumbs="memberCrumbs(member).value" />
+  <NuxtPage :member="member" />
+</template>
+
+<script lang="ts" setup>
+import { Member } from "~/server/types";
+
+const { memberCrumbs } = useBreadcrumbs();
+
+const { data: member } = await useFetch<Member>(
+  "/api/members/" + useRoute().params.id,
+);
+</script>
diff --git a/pages/leden/[id]/contact.vue b/pages/leden/[id]/contact.vue
new file mode 100644
index 0000000..a75edbd
--- /dev/null
+++ b/pages/leden/[id]/contact.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="overflow-x-auto shadow">Contactgegevensbeheersysteem hiero</div>
+</template>
+
+<script setup lang="ts">
+import { Member } from "~/server/types";
+
+defineProps<{
+  member: Member;
+}>();
+</script>
diff --git a/pages/leden/[id]/gegevens.vue b/pages/leden/[id]/gegevens.vue
new file mode 100644
index 0000000..78dcfea
--- /dev/null
+++ b/pages/leden/[id]/gegevens.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="overflow-x-auto shadow p-5">
+    <form @submit.prevent="send">
+      <InputText
+        v-model="initials"
+        type="text"
+        title="Initialen"
+        placeholder="A.B.C."
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="firstName"
+        type="text"
+        title="Voornaam"
+        placeholder="Jan"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="insertion"
+        type="text"
+        title="Tussenvoegsel"
+        placeholder="van"
+        :disabled="requesting"
+        bordered
+      />
+      <InputText
+        v-model="lastName"
+        type="text"
+        title="Achternaam"
+        placeholder="Jansen"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="dateOfBirth"
+        type="date"
+        title="Geboortedatum"
+        :disabled="requesting"
+        bordered
+      />
+      <InputSelect
+        v-model="sex"
+        title="Geslacht"
+        :disabled="requesting"
+        bordered
+      >
+        <option value="MALE">Man</option>
+        <option value="FEMALE">Vrouw</option>
+      </InputSelect>
+      <InputText
+        v-model="street"
+        type="text"
+        title="Straat"
+        placeholder="Rotterdamseweg"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="number"
+        type="text"
+        title="Huisnummer"
+        placeholder="362a"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="zipcode"
+        type="text"
+        title="Postcode"
+        placeholder="2628AT"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="city"
+        type="text"
+        title="Plaats"
+        placeholder="Delft"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="country"
+        type="text"
+        title="Land"
+        placeholder="Nederland"
+        :disabled="requesting"
+        required
+        bordered
+        class="mb-4"
+      />
+      <Button
+        type="submit"
+        title="Gegevens Opslaan"
+        color="primary"
+        :loading="requesting"
+      >
+        Opslaan
+      </Button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Member } from "~/server/types";
+
+const props = defineProps<{
+  member: Member;
+}>();
+
+const initials = ref<string>(props.member.initials);
+const firstName = ref<string>(props.member.firstName);
+const insertion = ref<string>(props.member.insertion);
+const lastName = ref<string>(props.member.lastName);
+const dateOfBirth = ref<string>(
+  // According to prisma dateOfBirth is a Date, but in reality it is an ISO string
+  (props.member.dateOfBirth as unknown as string).slice(0, 10),
+);
+const sex = ref<"MALE" | "FEMALE" | "">(props.member.sex);
+const street = ref<string>(props.member.street);
+const number = ref<string>(props.member.number);
+const city = ref<string>(props.member.city);
+const zipcode = ref<string>(props.member.zipcode);
+const country = ref<string>(props.member.country);
+
+const { requesting, send, data } = useRequest<
+  Awaited<
+    ReturnType<typeof import("~~/server/api/members/[id]/index.patch").default>
+  >
+>(`/api/members/${useRoute().params.id}`, apiErrorHandler([]), {
+  method: "patch",
+  body: {
+    initials,
+    firstName,
+    insertion,
+    lastName,
+    dateOfBirth,
+    sex,
+    street,
+    number,
+    city,
+    zipcode,
+    country,
+  },
+  async onSuccess() {
+    await navigateTo(`/members/${data.value?.id}`);
+  },
+});
+</script>
diff --git a/pages/leden/[id]/groepen.vue b/pages/leden/[id]/groepen.vue
new file mode 100644
index 0000000..4d1bf7a
--- /dev/null
+++ b/pages/leden/[id]/groepen.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="overflow-x-auto shadow">Groepbeheersysteem hiero</div>
+</template>
+
+<script setup lang="ts">
+import { Member } from "~/server/types";
+
+defineProps<{
+  member: Member;
+}>();
+</script>
diff --git a/pages/leden/[id]/index.vue b/pages/leden/[id]/index.vue
new file mode 100644
index 0000000..fabf3b7
--- /dev/null
+++ b/pages/leden/[id]/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="overflow-x-auto shadow">
+    <table class="table w-full">
+      <tbody>
+        <tr>
+          <td>ID</td>
+          <td>{{ member.id }}</td>
+        </tr>
+        <tr>
+          <td>Initialen</td>
+          <td>{{ member.initials }}</td>
+        </tr>
+        <tr>
+          <td>Naam</td>
+          <td>
+            {{ member.firstName }} {{ member.insertion }} {{ member.lastName }}
+          </td>
+        </tr>
+        <tr>
+          <td>Geboortedatum</td>
+          <td>{{ member.dateOfBirth }}</td>
+        </tr>
+        <tr>
+          <td>Geslacht</td>
+          <td>{{ member.sex }}</td>
+        </tr>
+        <tr>
+          <td>Adres</td>
+          <td>{{ member.street }} {{ member.number }} {{ member.city }}</td>
+        </tr>
+        <tr>
+          <td>Postcode</td>
+          <td>{{ member.zipcode }}</td>
+        </tr>
+        <tr>
+          <td>Land</td>
+          <td>{{ member.country }}</td>
+        </tr>
+        <tr>
+          <td>Studies</td>
+          <td>{{ member.studies }}</td>
+        </tr>
+        <tr>
+          <td>Groepen</td>
+          <td>{{ member.memberships }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Member } from "~/server/types";
+
+defineProps<{
+  member: Member;
+}>();
+</script>
diff --git a/pages/leden/[id]/instellingen.vue b/pages/leden/[id]/instellingen.vue
new file mode 100644
index 0000000..01fb617
--- /dev/null
+++ b/pages/leden/[id]/instellingen.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="overflow-x-auto shadow">toevoegen hiero</div>
+</template>
+
+<script setup lang="ts">
+import { Member } from "~/server/types";
+
+defineProps<{
+  member: Member;
+}>();
+</script>
diff --git a/pages/leden/[id]/studies.vue b/pages/leden/[id]/studies.vue
new file mode 100644
index 0000000..fb62bac
--- /dev/null
+++ b/pages/leden/[id]/studies.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="overflow-x-auto shadow">Studiebeheersysteem hiero</div>
+</template>
+
+<script setup lang="ts">
+import { Member } from "~/server/types";
+
+defineProps<{
+  member: Member;
+}>();
+</script>
diff --git a/pages/leden/exporteren.vue b/pages/leden/exporteren.vue
new file mode 100644
index 0000000..a384b94
--- /dev/null
+++ b/pages/leden/exporteren.vue
@@ -0,0 +1,8 @@
+<template>
+  <Breadcrumbs :crumbs="breadCrumbs" />
+  <div class="overflow-x-auto shadow">Export tool hiero</div>
+</template>
+
+<script setup lang="ts">
+const { breadCrumbs } = useBreadcrumbs();
+</script>
diff --git a/pages/leden/index.vue b/pages/leden/index.vue
new file mode 100644
index 0000000..9efed9f
--- /dev/null
+++ b/pages/leden/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <Breadcrumbs :crumbs="breadCrumbs" />
+  <div class="overflow-x-auto shadow">
+    <input
+      type="search"
+      placeholder="Zoeken…"
+      class="input input-bordered w-full"
+      @input="
+        filter = ($event.target as HTMLTextAreaElement).value.toLowerCase()
+      "
+    />
+    <table class="table w-full">
+      <thead>
+        <tr>
+          <th>Naam</th>
+          <th>Geboortedatum</th>
+          <th>Adres</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="member in filteredMembers"
+          :key="member.id"
+          class="hover"
+          @click="navigateTo(`/leden/${member.id}`)"
+        >
+          <td>
+            {{ member.firstName }} {{ member.insertion }} {{ member.lastName }}
+          </td>
+          <td>{{ member.dateOfBirth }}</td>
+          <td>{{ member.street }} {{ member.number }} {{ member.city }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Members } from "~/server/types";
+
+const { breadCrumbs } = useBreadcrumbs();
+
+const filter = ref("");
+const filteredMembers = computed(() => {
+  if (!members.value) return [];
+  return members.value.filter(
+    (m) =>
+      m.firstName.toLowerCase().includes(filter.value) ||
+      m.insertion.toLowerCase().includes(filter.value) ||
+      m.lastName.toLowerCase().includes(filter.value),
+  );
+});
+
+const { data: members } = await useFetch<Members>("/api/members");
+</script>
diff --git a/pages/leden/toevoegen.vue b/pages/leden/toevoegen.vue
new file mode 100644
index 0000000..799098a
--- /dev/null
+++ b/pages/leden/toevoegen.vue
@@ -0,0 +1,151 @@
+<template>
+  <Breadcrumbs :crumbs="breadCrumbs" />
+  <div class="overflow-x-auto shadow p-5">
+    <form @submit.prevent="send">
+      <InputText
+        v-model="initials"
+        type="text"
+        title="Initialen"
+        placeholder="A.B.C."
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="firstName"
+        type="text"
+        title="Voornaam"
+        placeholder="Jan"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="insertion"
+        type="text"
+        title="Tussenvoegsel"
+        placeholder="van"
+        :disabled="requesting"
+        bordered
+      />
+      <InputText
+        v-model="lastName"
+        type="text"
+        title="Achternaam"
+        placeholder="Jansen"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="dateOfBirth"
+        type="date"
+        title="Geboortedatum"
+        :disabled="requesting"
+        bordered
+      />
+      <InputSelect
+        v-model="sex"
+        title="Geslacht"
+        :disabled="requesting"
+        bordered
+      >
+        <option selected disabled value="">-- Selecteer --</option>
+        <option value="MALE">Man</option>
+        <option value="FEMALE">Vrouw</option>
+      </InputSelect>
+      <InputText
+        v-model="street"
+        type="text"
+        title="Straat"
+        placeholder="Rotterdamseweg"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="number"
+        type="text"
+        title="Huisnummer"
+        placeholder="362a"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="zipcode"
+        type="text"
+        title="Postcode"
+        placeholder="2628AT"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="city"
+        type="text"
+        title="Plaats"
+        placeholder="Delft"
+        :disabled="requesting"
+        required
+        bordered
+      />
+      <InputText
+        v-model="country"
+        type="text"
+        title="Land"
+        placeholder="Nederland"
+        :disabled="requesting"
+        required
+        bordered
+        class="mb-4"
+      />
+      <Button
+        type="submit"
+        title="Voeg persoon toe"
+        color="primary"
+        :loading="requesting"
+      >
+        Toevoegen
+      </Button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { breadCrumbs } = useBreadcrumbs();
+
+const initials = ref<string>("");
+const firstName = ref<string>("");
+const insertion = ref<string>("");
+const lastName = ref<string>("");
+const dateOfBirth = ref<string>("");
+const sex = ref<"MALE" | "FEMALE" | "">("");
+const street = ref<string>("");
+const number = ref<string>("");
+const city = ref<string>("");
+const zipcode = ref<string>("");
+const country = ref<string>("");
+
+const { requesting, send, data } = useRequest<
+  Awaited<ReturnType<typeof import("~~/server/api/members/index.post").default>>
+>("/api/members", apiErrorHandler([]), {
+  method: "post",
+  body: {
+    initials,
+    firstName,
+    insertion,
+    lastName,
+    dateOfBirth,
+    sex,
+    street,
+    number,
+    city,
+    zipcode,
+    country,
+  },
+  async onSuccess() {
+    await navigateTo(`/members/${data.value?.id}`);
+  },
+});
+</script>
diff --git a/pages/leden/uitnodigen.vue b/pages/leden/uitnodigen.vue
new file mode 100644
index 0000000..6a2194e
--- /dev/null
+++ b/pages/leden/uitnodigen.vue
@@ -0,0 +1,11 @@
+<template>
+  <Breadcrumbs :crumbs="breadCrumbs" />
+  <div class="overflow-x-auto shadow">
+    Stuur een persoonlijke link naar een email adres zodat de persoon zijn/haar
+    gegevens kan invullen (handig voor OPE)
+  </div>
+</template>
+
+<script setup lang="ts">
+const { breadCrumbs } = useBreadcrumbs();
+</script>
diff --git a/pages/material.vue b/pages/material.vue
index 4671f1f..886b6fc 100644
--- a/pages/material.vue
+++ b/pages/material.vue
@@ -1,17 +1,18 @@
 <template>
-  <TwoColumn title="Materiaal">
-    <template #content>
-      <ul class="menu rounded-box">
-        <li class="menu-title">
-          <span>Category</span>
-        </li>
-        <li><NuxtLink to="/material">Materiaal Home</NuxtLink></li>
-        <li class="menu-title">
-          <span>Category</span>
-        </li>
-        <li><NuxtLink to="/material/types">Materiaaltypes</NuxtLink></li>
-      </ul>
-    </template>
+  <TwoColumn title="Materiaal" :items="items">
     <NuxtPage />
   </TwoColumn>
 </template>
+
+<script lang="ts" setup>
+const items = [
+  {
+    title: "Materiaal Home",
+    link: "/material",
+  },
+  {
+    title: "Materiaaltypes",
+    link: "/material/types",
+  },
+];
+</script>
diff --git a/pages/material/index.vue b/pages/material/index.vue
index 2400b77..c753797 100644
--- a/pages/material/index.vue
+++ b/pages/material/index.vue
@@ -1,3 +1,7 @@
 <template>
-  <div>Materiaalbeheer</div>
+  <Breadcrumbs :crumbs="breadCrumbs" />
 </template>
+
+<script lang="ts" setup>
+const { breadCrumbs } = useBreadcrumbs();
+</script>
diff --git a/pages/material/types.vue b/pages/material/types.vue
index 4172a66..9ca762a 100644
--- a/pages/material/types.vue
+++ b/pages/material/types.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 class="text-4xl text-primary font-bold mb-4">Materiaal Types</h1>
+  <Breadcrumbs :crumbs="breadCrumbs" />
   <Alert v-if="error" type="error" content="Materiaal types ophalen mislukt" />
   <div class="overflow-x-auto shadow">
     <table class="table w-full">
@@ -42,4 +42,6 @@ const {
     ReturnType<typeof import("~~/server/api/material/type/index.get").default>
   >
 >("/api/material/type");
+
+const { breadCrumbs } = useBreadcrumbs();
 </script>
diff --git a/server/api/groups/[id]/index.get.ts b/server/api/groups/[id]/index.get.ts
index eeeb643..f2fe7dc 100644
--- a/server/api/groups/[id]/index.get.ts
+++ b/server/api/groups/[id]/index.get.ts
@@ -6,9 +6,10 @@ import { uuid } from "~~/server/validation";
 export default defineEventHandler(async (event) => {
   const id = await getValidatedRouterParam(event, "id", uuid());
   const response = await group.get(id);
+  const children = await group.getChildren(id);
 
   if (!response) {
     throw apiError(ErrorCode.NotFound, "Group not found");
   }
-  return response;
+  return { ...response, children };
 });
diff --git a/server/api/groups/index.get.ts b/server/api/groups/index.get.ts
new file mode 100644
index 0000000..1583fb2
--- /dev/null
+++ b/server/api/groups/index.get.ts
@@ -0,0 +1,5 @@
+import { group } from "~~/server/logic";
+
+export default defineEventHandler(async () => {
+  return await group.getAll();
+});
diff --git a/server/api/members/[id]/memberships.get.ts b/server/api/members/[id]/memberships.get.ts
new file mode 100644
index 0000000..03a2837
--- /dev/null
+++ b/server/api/members/[id]/memberships.get.ts
@@ -0,0 +1,8 @@
+import { getValidatedRouterParam } from "~/server/utils";
+import { member } from "~/server/logic";
+import { uuid } from "~/server/validation";
+
+export default defineEventHandler(async (event) => {
+  const id = await getValidatedRouterParam(event, "id", uuid());
+  return await member.getMemberships(id);
+});
diff --git a/server/api/members/index.get.ts b/server/api/members/index.get.ts
new file mode 100644
index 0000000..094d1bb
--- /dev/null
+++ b/server/api/members/index.get.ts
@@ -0,0 +1,5 @@
+import { member } from "~/server/logic";
+
+export default defineEventHandler(async () => {
+  return await member.getAll();
+});
diff --git a/server/logic/group.ts b/server/logic/group.ts
index 2ec3698..c1be9e9 100644
--- a/server/logic/group.ts
+++ b/server/logic/group.ts
@@ -4,7 +4,7 @@ import { prisma } from "~/server/prisma";
 
 /**
  * Add new group to the database.
- * @param data The data of the new group.
+ * @param group The data of the new group.
  * @returns The created group.
  */
 export const create = async (group: GroupCreate) => {
@@ -20,7 +20,7 @@ export const create = async (group: GroupCreate) => {
 /**
  * Update group in the database.
  * @param id The id of the group to be updated.
- * @param data The data of the group to be updated.
+ * @param group The data of the group to be updated.
  * @returns The updated group.
  */
 export const update = async (id: string, group: GroupUpdate) => {
@@ -38,6 +38,37 @@ export const update = async (id: string, group: GroupUpdate) => {
 export const get = async (id: string) => {
   return await prisma.group.findUnique({
     where: { id },
+    include: {
+      contacts: true,
+      members: true,
+    },
+  });
+};
+
+/**
+ * Get all children from a group from the database.
+ * @param id The id of the group
+ * @returns All groups where the parentId equals the id.
+ */
+export const getChildren = async (id: string) => {
+  return await prisma.group.findMany({
+    where: { parentId: id },
+    select: {
+      id: true,
+      name: true,
+      description: true,
+      startDate: true,
+      stopDate: true,
+    },
+  });
+};
+
+/**
+ * Get all groups from the database.
+ * @returns The requested groups if found, otherwise null.
+ */
+export const getAll = async () => {
+  return await prisma.group.findMany({
     include: {
       contacts: true,
     },
diff --git a/server/logic/member.ts b/server/logic/member.ts
index 22a6fa9..e68753a 100644
--- a/server/logic/member.ts
+++ b/server/logic/member.ts
@@ -15,7 +15,7 @@ export const create = async (member: MemberCreate) => {
 /**
  * Update member in the database.
  * @param id The id of the member to be updated.
- * @param data The updated data of the member.
+ * @param member The updated data of the member.
  * @returns The updated member.
  */
 export const update = async (id: string, member: MemberUpdate) => {
@@ -41,6 +41,20 @@ export const get = async (id: string) => {
   });
 };
 
+/**
+ * Get all members from the database.
+ * @returns The requested member if found, otherwise null.
+ */
+export const getAll = async () => {
+  return await prisma.member.findMany({
+    include: {
+      contacts: true,
+      studies: true,
+      memberships: true,
+    },
+  });
+};
+
 /**
  * Check if there exists a member with the specified ID.
  * @param id The id of the member.
@@ -62,6 +76,24 @@ export const count = async () => {
   return await prisma.member.count();
 };
 
+/**
+ * Get all memberships of the member.
+ * @returns The member's memberships.
+ */
+export const getMemberships = async (id: string) => {
+  return await prisma.membership.findMany({
+    where: { memberId: id },
+    include: {
+      group: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+    },
+  });
+};
+
 /**
  * Delete member from the database.
  * @param id The id of the member.
diff --git a/server/prisma/seed/testdata/group.json b/server/prisma/seed/testdata/group.json
index eccf499..76dd426 100644
--- a/server/prisma/seed/testdata/group.json
+++ b/server/prisma/seed/testdata/group.json
@@ -1,6 +1,6 @@
 [
   {
-    "name": "DSR Eretes",
+    "name": "ASRV Eretes",
     "description": "Delftse Studenten Roeivereniging Eretes",
     "startDate": "1966-01-01",
     "stopDate": "1972-01-01"
diff --git a/server/types/index.ts b/server/types/index.ts
new file mode 100644
index 0000000..1131232
--- /dev/null
+++ b/server/types/index.ts
@@ -0,0 +1,17 @@
+export type Member = Awaited<
+  ReturnType<typeof import("~/server/api/members/[id]/index.get").default>
+>;
+export type Members = Awaited<
+  ReturnType<typeof import("~/server/api/members/index.get").default>
+>;
+
+export type Group = Awaited<
+  ReturnType<typeof import("~/server/api/groups/[id]/index.get").default>
+>;
+export type Groups = Awaited<
+  ReturnType<typeof import("~/server/api/groups/index.get").default>
+>;
+
+export type Studies = Awaited<
+  ReturnType<typeof import("~/server/api/studies/options/index.get").default>
+>;
diff --git a/server/validation/group.ts b/server/validation/group.ts
index d6e2909..e0e499c 100644
--- a/server/validation/group.ts
+++ b/server/validation/group.ts
@@ -36,6 +36,7 @@ const Group: Describe<PrismaGroup> = object({
  */
 export const GroupCreate = defaulted(omit(Group, ["id"]), {
   description: "",
+  startDate: new Date(),
   stopDate: null,
   permissions: [],
   parentId: null,