diff --git a/package.json b/package.json
index ff90d2a..2c0e40f 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 		"@rollup/plugin-commonjs": "^14.0.0",
 		"@rollup/plugin-node-resolve": "^8.0.0",
 		"@rollup/plugin-replace": "^2.2.0",
+		"@zerodevx/svelte-toast": "^0.6.2",
 		"depcheck": "^1.4.2",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",
diff --git a/src/components/AdminPanelTable.svelte b/src/components/AdminPanelTable.svelte
new file mode 100644
index 0000000..3962968
--- /dev/null
+++ b/src/components/AdminPanelTable.svelte
@@ -0,0 +1,268 @@
+<!-- ORIGINAL SOURCE: https://github.com/dasDaniel/svelte-table/blob/develop/src/SvelteTable.svelte -->
+<script>
+	import MultiSelect from '../components/MultiSelect.svelte';
+	import FaSortUp from 'svelte-icons/fa/FaSortUp.svelte';
+	import FaSortDown from 'svelte-icons/fa/FaSortDown.svelte';
+	import FaSort from 'svelte-icons/fa/FaSort.svelte';
+
+	export let columns;
+	export let rows;
+	export let simpleFilterOptions = {};
+	export let expandRowKey = null;
+	export let filters = [];
+
+	let sortBy = '';
+	let sortOrder = 1;
+	let expanded = [];
+
+	let iconExpand = '⌄';
+	let iconExpanded = '⌃';
+	let maxPerPage = 10;
+	let page = 1;
+	let advancedSearch = false;
+	let sortFunction = () => '';
+	let searchValue = '';
+
+	const increasePage = () => {
+		page += page * maxPerPage >= c_rows.length ? 0 : 1;
+	};
+	const decreasePage = () => {
+		page -= page == 1 ? 0 : 1;
+	};
+
+	let filterValues = {};
+	filters.forEach((el) => (filterValues[el.title] = el.defaultFiltering));
+	let columnByKey = {};
+	$: {
+		columnByKey = {};
+		columns.forEach((col) => {
+			columnByKey[col.key] = col;
+		});
+	}
+	const unsetBoolFilter = (input, title) => {
+		if (input.__value === filterValues[title]) {
+			filterValues[title] = '';
+		}
+	};
+
+	$: colspan = 1 + columns.length;
+
+	const simpleFilter = (rows, searchValue) => {
+		page = 1;
+		return rows.filter((r) => simpleFilterOptions.filter(r, searchValue));
+	};
+	const advancedFilter = (rows, filterValues) => {
+		page = 1;
+		return rows.filter((r) => filters.every((e) => e.filter(r, filterValues[e.title])));
+	};
+	// Filter rows
+	$: c_rows = (advancedSearch ? advancedFilter(rows, filterValues) : simpleFilter(rows, searchValue))
+		.map((r) =>
+			Object.assign({}, r, {
+				// internal row property for sort order
+				$sortOn: sortFunction(r),
+				// internal row property for expanded rows
+				$expanded: expandRowKey !== null && expanded.indexOf(r[expandRowKey]) >= 0
+			})
+		)
+		.sort((a, b) => {
+			if (a.$sortOn > b.$sortOn) return sortOrder;
+			else if (a.$sortOn < b.$sortOn) return -sortOrder;
+			return 0;
+		});
+
+	$: {
+		let col = columnByKey[sortBy];
+		if (col !== undefined && typeof col.value === 'function') {
+			if (typeof col.value(rows[0]) === 'string') {
+				sortFunction = (r) => col.value(r).toLocaleLowerCase();
+			} else {
+				sortFunction = (r) => col.value(r);
+			}
+		}
+	}
+
+	const handleClickCol = (event, col) => {
+		sortOrder = col.key === sortBy ? sortOrder * -1 : 1;
+		sortBy = col.key;
+	};
+
+	const handleClickExpand = (event, row) => {
+		row.$expanded = !row.$expanded;
+		if (row.$expanded) {
+			expanded = [row[expandRowKey]];
+		} else {
+			expanded = [];
+		}
+	};
+</script>
+
+<div class="filterOptions">
+	{#if !advancedSearch}
+		<p>{simpleFilterOptions.title}</p>
+		<input bind:value={searchValue} />
+	{:else}
+		{#each filters as filter}
+			{#if filter.isDate}
+				<span>
+					<p>{filter.title} før:</p>
+					<input onfocus="(this.type='date')" onblur="(this.type='text')" bind:value={filterValues[filter.title][0]} />
+				</span>
+				<span>
+					<p>{filter.title} etter:</p>
+					<input onfocus="(this.type='date')" onblur="(this.type='text')" bind:value={filterValues[filter.title][1]} />
+				</span>
+			{:else if filter.isBoolean}
+				<span class="radio">
+					<p>{filter.title}:</p>
+					<label for="html">Ja</label>
+					<input name="yes" value={true} on:click={unsetBoolFilter(this, filter.title)} bind:group={filterValues[filter.title]} type="radio" />
+					<label for="html">Nei</label>
+					<input name="yes" value={undefined} on:click={unsetBoolFilter(this, filter.title)} bind:group={filterValues[filter.title]} type="radio" />
+				</span>
+			{:else}
+				<span>
+					<p>{filter.title}:</p>
+					{#if filter.filterValues}
+						<MultiSelect bind:selected={filterValues[filter.title]} options={filter.filterValues} />
+					{:else}
+						<input bind:value={filterValues[filter.title]} />
+					{/if}
+				</span>
+			{/if}
+		{/each}
+	{/if}
+	<br />
+
+	<button on:click={() => (advancedSearch = !advancedSearch)}>{advancedSearch ? 'Skjul a' : 'A'}vansert søk</button>
+</div>
+<table>
+	<thead>
+		<tr>
+			{#each columns as col}
+				<th on:click={(e) => handleClickCol(e, col)} class="pointer header">
+					{col.title}
+					<span>
+						{#if sortBy === col.key}
+							{#if sortOrder === 1}
+								<FaSortUp />
+							{:else}
+								<FaSortDown />
+							{/if}
+						{:else}
+							<FaSort />
+						{/if}
+					</span>
+				</th>
+			{/each}
+			<th />
+		</tr>
+	</thead>
+
+	<tbody>
+		{#each c_rows.slice((page - 1) * maxPerPage, page * maxPerPage) as row, n}
+			<tr on:click={(e) => handleClickExpand(e, row)} class="expand pointer">
+				{#each columns as col}
+					<td>{col.value(row)}</td>
+				{/each}
+				<td>{@html row.$expanded ? iconExpand : iconExpanded}</td>
+			</tr>
+			{#if row.$expanded}
+				<tr>
+					<td {colspan}><slot name="expanded" {row} {n} /></td>
+				</tr>
+			{/if}
+		{/each}
+	</tbody>
+</table>
+<div class="pageination" style="display:grid;grid-template-columns: 33% 33% 34% ">
+	<p style="text-align:left" on:click={decreasePage}>←</p>
+	<p style="text-align:center">{(page - 1) * maxPerPage + (c_rows.length != 0 ? 1 : 0)}-{Math.min(page * maxPerPage, c_rows.length)} av {c_rows.length}</p>
+
+	<p style="text-align:right " on:click={increasePage}>→</p>
+	<span>
+		<p>Resultater per side:</p>
+		<select bind:value={maxPerPage} style="margin-left:10px;width:70px">
+			{#each [5, 10, 15, 20, 40, 60, 100] as num}
+				<option value={num}>{num}</option>
+			{/each}
+		</select>
+	</span>
+</div>
+
+<style>
+	.radio > input {
+		width: min-content;
+		transition: none;
+		background-color: #777;
+		margin-right: 1em;
+	}
+	.radio > input:checked {
+		background-color: var(--green-2);
+	}
+	.pageination p,
+	select {
+		margin: 0px;
+		margin-top: 15px;
+	}
+	.pageination span * {
+		display: inline;
+	}
+	.filterOptions p {
+		display: inline;
+		margin: 0px;
+		margin-right: 10px;
+	}
+	.filterOptions span {
+		display: inline;
+		width: 100%;
+		padding: 0.4em;
+	}
+	button {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		font-size: smaller;
+		width: auto;
+	}
+	.filterOptions {
+		width: 100%;
+		position: relative;
+		display: grid;
+		grid-template-columns: 50% 50%;
+		padding: 0.6em;
+		padding-bottom: 2em;
+	}
+	table {
+		width: 100%;
+	}
+	.pointer {
+		cursor: pointer;
+	}
+	tbody,
+	td {
+		border: 0px solid #666;
+		border-bottom-width: 1px;
+	}
+	th {
+		border: 0px solid #bbb;
+		border-bottom-width: 2px;
+		text-align: left;
+	}
+	table {
+		caption-side: bottom;
+		border-collapse: collapse;
+	}
+
+	.header > span {
+		display: inline-block;
+		height: 0.75em;
+		vertical-align: sub;
+		margin-left: 4px;
+		color: #fff;
+		transition: 0.4s linear;
+	}
+	.header > span:hover {
+		color: var(--green-2);
+	}
+</style>
diff --git a/src/components/EditUserPopup.svelte b/src/components/EditUserPopup.svelte
new file mode 100644
index 0000000..8f3766c
--- /dev/null
+++ b/src/components/EditUserPopup.svelte
@@ -0,0 +1,127 @@
+<script>
+	import Modal, { getModal } from './PopupModal.svelte';
+	import { createEventDispatcher } from 'svelte';
+	export let editType = '';
+	export let row = {};
+	export let attributeToEdit = undefined;
+	export let openEdit;
+
+	$: typeText = () => {
+		if (editType == 'edit') return 'Endre';
+		else if (editType == 'add') return 'Legg til';
+		else if (editType == 'delete') return 'Fjern';
+	};
+
+	$: {
+		if (openEdit) {
+			getModal('first').open(() => {
+				changeValue = '';
+			});
+			openEdit = false;
+		}
+	}
+
+	let changeValue = '';
+	let changeOptions = '';
+	const dispatch = createEventDispatcher();
+
+	function close(id) {
+		getModal(id).close();
+		changeValue = '';
+	}
+	function confirm() {
+		dispatch(editType, {
+			value: changeValue,
+			user: row,
+			attribute: attributeToEdit
+		});
+		close('second');
+		close('first');
+	}
+	$: isDisabled = ((editType == 'add' || editType == 'delete') && changeOptions?.length === 0) || changeValue == '';
+	$: {
+		changeOptions = attributeToEdit?.[editType + 'Options'];
+		if (typeof changeOptions == 'function') {
+			changeOptions = changeOptions(row);
+		}
+	}
+</script>
+
+<Modal id="first">
+	<h3>{typeText()} {attributeToEdit?.title?.toLocaleLowerCase()} for {row?.fullName}</h3>
+	{#if editType == 'edit'}
+		<p>Eksisterende verdi: {attributeToEdit?.value(row)}</p>
+		{#if Array.isArray(changeOptions)}
+			<select bind:value={changeValue}>
+				<option />
+				{#each changeOptions as v}
+					<option value={v}>{v}</option>
+				{/each}
+			</select>
+		{:else}
+			<input bind:value={changeValue} />
+		{/if}
+	{:else if editType == 'add' || editType == 'delete'}
+		{#if attributeToEdit?.value(row).length != 0}
+			<span>Med i følgende {attributeToEdit?.title_plural}:</span>
+			<ul style="margin-top:0">
+				{#each attributeToEdit?.value(row) as v}
+					<li>{v}</li>
+				{/each}
+			</ul>
+		{:else}
+			<p><i>Ikke medlem av noen {attributeToEdit?.title_plural}</i></p>
+		{/if}
+		{#if changeOptions?.length != 0}
+			<div class="options">
+				<p class="info">{attributeToEdit?.title}:</p>
+
+				<select bind:value={changeValue}>
+					<option />
+					{#each changeOptions as option}
+						<option value={option.id}>{option.name}</option>
+					{/each}
+				</select>
+			</div>
+		{:else if editType == 'add'}
+			<p><i>Brukeren er med i alle {attributeToEdit?.title_plural}</i></p>
+		{/if}
+	{/if}
+	<button class="do" disabled={isDisabled} on:click={() => getModal('second').open()}>
+		{typeText()}
+	</button>
+</Modal>
+<Modal id="second">
+	<h3>Er du sikker på at du vil {typeText()?.toLocaleLowerCase()} denne verdien?</h3>
+	<div class="verification">
+		<button on:click={() => confirm()}> Bekreft </button>
+		<button on:click={() => close('second')}> Avbryt </button>
+	</div>
+</Modal>
+
+<style>
+	.verification {
+		display: block;
+	}
+	.verification > button {
+		display: inline;
+		width: fit-content;
+	}
+	button:disabled,
+	button:disabled:hover {
+		border: inherit;
+		background-color: #999;
+		color: #666666;
+	}
+	.info {
+		display: inline;
+	}
+	.options {
+		margin: 5px;
+		padding: 5px;
+	}
+	.do {
+		width: fit-content;
+		float: right;
+	}
+</style>
diff --git a/src/components/MultiSelect.svelte b/src/components/MultiSelect.svelte
new file mode 100644
index 0000000..2b1e9f8
--- /dev/null
+++ b/src/components/MultiSelect.svelte
@@ -0,0 +1,263 @@
+<!-- original code https://github.com/janosh/svelte-multiselect/blob/main/src/lib/MultiSelect.svelte -->
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import IoMdCloseCircleOutline from 'svelte-icons/io/IoMdCloseCircleOutline.svelte';
+	import FaArrowsAltV from 'svelte-icons/fa/FaArrowsAltV.svelte';
+	export let selected;
+
+	export let placeholder = ``;
+	export let options;
+	export let input = null;
+	export let name = ``;
+	export let noOptionsMsg = `No matching options`;
+
+	export let removeBtnTitle = `Remove`;
+	export let removeAllTitle = `Remove all`;
+
+	if (!selected) selected = [];
+
+	if (!(options?.length > 0)) console.error(`MultiSelect missing options`);
+
+	const dispatch = createEventDispatcher();
+	let activeOption, searchText;
+	let showOptions = false;
+
+	$: filteredOptions = searchText ? options.filter((option) => option.toLowerCase().includes(searchText.toLowerCase())) : options;
+	$: if ((activeOption && !filteredOptions.includes(activeOption)) || (!activeOption && searchText)) activeOption = filteredOptions[0];
+
+	function add(token) {
+		if (!selected.includes(token)) {
+			searchText = ``; // reset search string on selection
+			selected = [token, ...selected];
+		}
+		if (selected.length == options.length) {
+			setOptionsVisible(false);
+		}
+	}
+
+	function remove(token) {
+		if (typeof selected === `string`) return;
+		selected = selected.filter((item) => item !== token);
+	}
+
+	function setOptionsVisible(show) {
+		// nothing to do if visibility is already as intended
+		if (show === showOptions) return;
+		showOptions = show;
+		activeOption = undefined;
+		if (show) input?.focus();
+	}
+
+	function handleKeydown(event) {
+		if (event.key === `Escape`) {
+			setOptionsVisible(false);
+			searchText = ``;
+		} else if (event.key === `Enter`) {
+			if (showOptions && activeOption) {
+				selected.includes(activeOption) ? remove(activeOption) : add(activeOption);
+				searchText = ``;
+			} // no active option means the options are closed in which case enter means open
+			else setOptionsVisible(true);
+		} else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
+			const increment = event.key === `ArrowUp` ? -1 : 1;
+			const newActiveIdx = filteredOptions.indexOf(activeOption) + increment;
+
+			if (newActiveIdx < 0) {
+				activeOption = filteredOptions[filteredOptions.length - 1];
+			} else {
+				if (newActiveIdx === filteredOptions.length) activeOption = filteredOptions[0];
+				else activeOption = filteredOptions[newActiveIdx];
+			}
+		} else if (event.key === `Backspace`) {
+			// only remove selected tags on backspace if if there are any and no searchText characters remain
+			if (selected.length > 0 && searchText.length === 0) {
+				selected = selected.slice(0, selected.length - 1);
+			}
+		}
+	}
+
+	const removeAll = () => {
+		selected = [];
+		searchText = ``;
+	};
+
+	$: isSelected = (option) => {
+		if (!(selected?.length > 0)) return false;
+		// nothing is selected if `selected` is the empty array or string
+		else return selected.includes(option);
+	};
+
+	const handleEnterAndSpaceKeys = (handler) => (event) => {
+		if ([`Enter`, `Space`].includes(event.code)) {
+			event.preventDefault();
+			handler();
+		}
+	};
+</script>
+
+<div class="multiselect" style={showOptions ? `z-index: 2;` : ``} on:mouseup|stopPropagation={() => setOptionsVisible(!showOptions)}>
+	<span>
+		<FaArrowsAltV />
+	</span>
+	<ul class="tokens">
+		{#if selected?.length > 0}
+			{#each selected as tag}
+				<li on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}>
+					{tag}
+					<button on:mouseup|stopPropagation={() => remove(tag)} on:keydown={handleEnterAndSpaceKeys(() => remove(tag))} type="button" title="{removeBtnTitle} {tag}">
+						<IoMdCloseCircleOutline height="12pt" />
+					</button>
+				</li>
+			{/each}
+		{/if}
+		{#if selected.length != options.length}
+			<input
+				autocomplete="off"
+				bind:value={searchText}
+				on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
+				on:keydown={handleKeydown}
+				on:focus={() => setOptionsVisible(true)}
+				on:blur={() => dispatch(`blur`)}
+				on:blur={() => setOptionsVisible(false)}
+				{name}
+				placeholder={selected.length ? `` : placeholder} />
+		{/if}
+	</ul>
+	<button
+		type="button"
+		class="remove-all"
+		title={removeAllTitle}
+		on:mouseup|stopPropagation={removeAll}
+		on:keydown={handleEnterAndSpaceKeys(removeAll)}
+		style={selected.length === 0 ? `display: none;` : ``}>
+		<IoMdCloseCircleOutline height="14pt" />
+	</button>
+
+	{#key showOptions}
+		<ul class="options" class:hidden={!showOptions}>
+			{#each filteredOptions as option}
+				<li
+					on:mouseup|preventDefault|stopPropagation
+					on:mousedown|preventDefault|stopPropagation={() => {
+						isSelected(option) ? remove(option) : add(option);
+					}}
+					class:selected={isSelected(option)}
+					class:active={activeOption === option}>
+					{option}
+				</li>
+			{:else}
+				{noOptionsMsg}
+			{/each}
+		</ul>
+	{/key}
+</div>
+
+<style>
+	.multiselect {
+		position: relative;
+		margin: 0 0.2em;
+		transition: 200ms linear;
+		background: #fff1;
+		border: 2px solid #fff0;
+		border-radius: 0.25em;
+		min-height: 18pt;
+		display: inline-flex;
+		cursor: text;
+		min-width: 15em;
+	}
+	.multiselect:hover {
+		border-color: #fff8;
+	}
+	.multiselect:focus-visible {
+		outline: 0.1em solid var(--green-2);
+	}
+	.multiselect:focus {
+		background-color: var(--green-3);
+		outline: none;
+	}
+
+	ul.tokens > li {
+		background: var(--green-2);
+		align-items: center;
+		border-radius: 4pt;
+		display: flex;
+		margin: 2pt;
+		padding: 0 0 0 1ex;
+		height: 16pt;
+	}
+	ul.tokens > li button,
+	button.remove-all,
+	span {
+		display: flex;
+		cursor: pointer;
+	}
+	button {
+		color: inherit;
+		background: transparent;
+		border: none;
+		padding: 0 2pt;
+	}
+	ul.tokens > li button:hover,
+	button.remove-all:hover,
+	button:focus {
+		color: var(--error);
+	}
+
+	.multiselect input {
+		border: none;
+		outline: none;
+		width: 2em;
+		background: none;
+		flex: 1;
+	}
+
+	ul.tokens {
+		display: flex;
+		padding: 0;
+		margin: 0;
+		flex-wrap: wrap;
+		flex: 1;
+	}
+
+	ul.options {
+		list-style: none;
+		max-height: 200px;
+		padding: 0;
+		margin: 2px;
+		top: 100%;
+		width: 100%;
+		position: absolute;
+		border-radius: 1ex;
+		overflow: auto;
+		background: #444;
+	}
+	ul.options.hidden {
+		visibility: hidden;
+	}
+	ul.options li {
+		padding: 3pt 2ex;
+		cursor: pointer;
+	}
+	ul.options li.selected,
+	ul.options li:not(.selected):hover {
+		border-left: 4pt solid var(--green-2);
+	}
+	ul.options li.active {
+		background: var(--green-2);
+	}
+
+	.multiselect ul.tokens > li button,
+	.multiselect button.remove-all {
+		/* buttons to remove a single or all selected options at once */
+		width: 1.5em;
+	}
+	span {
+		display: inline-flex;
+		height: 0.75em;
+		margin-left: 5px;
+		margin-right: 5px;
+		margin-top: auto;
+		margin-bottom: auto;
+		color: #fff;
+	}
+</style>
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index fa78a0b..bc65be8 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -26,6 +26,11 @@
 				<a aria-current={`/${segment}/` === side ? 'page' : undefined} href={side}> {side.replace(/-|_/g, '_')} </a>
 			</li>
 		{/each}
+		{#if $user?.roles?.includes('Styret')}
+			<li>
+				<a aria-current={segment === 'admin-panel' ? 'page' : undefined} title="Admin panel" href="/admin-panel"> {'/admin-panel/'.replace(/-|_/g, '_')} </a>
+			</li>
+		{/if}
 	</ul>
 	<ul class="navicons">
 		{#if $user}
diff --git a/src/components/PopupModal.svelte b/src/components/PopupModal.svelte
new file mode 100644
index 0000000..e7c88ae
--- /dev/null
+++ b/src/components/PopupModal.svelte
@@ -0,0 +1,111 @@
+<script context="module">
+	let onTop; //keeping track of which open modal is on top
+	const modals = {}; //all modals get registered here for easy future access
+
+	// 	returns an object for the modal specified by `id`, which contains the API functions (`open` and `close` )
+	export function getModal(id = '') {
+		return modals[id];
+	}
+</script>
+
+<script>
+	import { onDestroy } from 'svelte';
+	import IoMdCloseCircleOutline from 'svelte-icons/io/IoMdCloseCircleOutline.svelte';
+	let topDiv;
+	let visible = false;
+	let prevOnTop;
+	let closeCallback;
+
+	export let id = '';
+
+	function keyPress(ev) {
+		//only respond if the current modal is the top one
+		if (ev.key == 'Escape' && onTop == topDiv) close(); //ESC
+	}
+
+	/**  API **/
+	function open(callback) {
+		closeCallback = callback;
+		if (visible) return;
+		prevOnTop = onTop;
+		onTop = topDiv;
+		window.addEventListener('keydown', keyPress);
+
+		//this prevents scrolling of the main window on larger screens
+		document.body.style.overflow = 'hidden';
+
+		visible = true;
+		//Move the modal in the DOM to be the last child of <BODY> so that it can be on top of everything
+		document.body.appendChild(topDiv);
+	}
+
+	function close(retVal) {
+		if (!visible) return;
+		window.removeEventListener('keydown', keyPress);
+		onTop = prevOnTop;
+		if (onTop == null) document.body.style.overflow = '';
+		visible = false;
+		if (closeCallback) closeCallback(retVal);
+	}
+
+	modals[id] = { open, close };
+
+	onDestroy(() => {
+		window.removeEventListener('keydown', keyPress);
+	});
+</script>
+
+<div id="topModal" class:visible bind:this={topDiv} on:click={() => close()}>
+	<div id="modal" on:click|stopPropagation={() => {}}>
+		<span class="red" on:click={() => close()}>
+			<IoMdCloseCircleOutline />
+		</span>
+		<div id="modal-content">
+			<slot />
+		</div>
+	</div>
+</div>
+
+<style>
+	#topModal {
+		visibility: hidden;
+		z-index: 9999;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #4448;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	#modal {
+		position: relative;
+		border-radius: 6px;
+		background: var(--background);
+		border: 2px solid #000;
+		filter: drop-shadow(3px 3px 3px #555);
+		padding: 1.5em;
+	}
+
+	.visible {
+		visibility: visible !important;
+	}
+	#modal > span {
+		position: absolute;
+		top: -12px;
+		right: -12px;
+		width: 24px;
+		height: 24px;
+		cursor: pointer;
+		transition: 0.1s linear;
+	}
+	span.red:hover {
+		color: var(--error);
+	}
+	#modal-content {
+		max-width: 30vw;
+		max-height: calc(100vh);
+	}
+</style>
diff --git a/src/routes/admin-panel.svelte b/src/routes/admin-panel.svelte
new file mode 100644
index 0000000..efd5e0a
--- /dev/null
+++ b/src/routes/admin-panel.svelte
@@ -0,0 +1,480 @@
+<script context="module">
+	import api from '../utils/api';
+
+	export async function preload(page, session) {
+		if (!session.user) {
+			this.redirect(302, '/login');
+		} else if (!session.user?.roles.includes('Styret')) {
+			this.redirect(401, '/');
+		}
+		const query = 'queryString=*';
+		const dbUsers = await api.searchUsers(query, { fetch: this.fetch });
+		const dbApplications = await api.getAllApplications({ fetch: this.fetch });
+		const dbGroups = await api.getAllGroups({ fetch: this.fetch });
+		return { users: dbUsers.json.users, applications: dbApplications.json.applications, groups: dbGroups.json.groups };
+	}
+</script>
+
+<script>
+	import EditUserPopup from '../components/EditUserPopup.svelte';
+	import AdminPanelTable from '../components/AdminPanelTable.svelte';
+	import { toast, SvelteToast } from '@zerodevx/svelte-toast';
+	import date from '../utils/date';
+	import FaEdit from 'svelte-icons/fa/FaEdit.svelte';
+	import FaRegPlusSquare from 'svelte-icons/fa/FaRegPlusSquare.svelte';
+	import FaRegMinusSquare from 'svelte-icons/fa/FaRegMinusSquare.svelte';
+	export let users;
+	export let applications;
+	export let groups;
+
+	console.log(users);
+	console.log(groups);
+	console.log(applications);
+
+	let attributeToEdit = '';
+	let editType = '';
+	// The selected columns to show in table
+	let selectedCols = ['fullName', 'discordName', 'email', 'type'];
+	// The selected filters to show in advanced filter
+	let selectedFilters = ['fullName', 'displayName', 'discordName', 'email', 'registerd', 'discordMember', 'type', 'groups', 'applications'];
+	let openEdit = false;
+
+	const toastOptions = {
+		duration: 3000,
+		initial: 1,
+		next: 0,
+		intro: { x: 256 },
+		theme: {
+			'list-style-type': 'none',
+			'--toastColor': 'white',
+			'--toastBarBackground': 'none'
+		}
+	};
+
+	const success = (m) =>
+		toast.push(m, {
+			...toastOptions,
+			theme: {
+				...toastOptions.theme,
+				'--toastBackground': 'var(--green-2)'
+			}
+		});
+
+	const failure = (m) =>
+		toast.push(m, {
+			...toastOptions,
+			theme: {
+				...toastOptions.theme,
+				'--toastBackground': 'var(--error)'
+			}
+		});
+
+	/* Object in ATTRIBUTES
+	{
+		key: identifier of attribute for user in users
+		title: name of the attribute
+		value: function to retrive the value from a user object in users
+		defaultFilterting: default value to filter the attribute on 
+		filter: function that returns if the user matches the filter for that attribute
+		filterValues: list of the possible values this attribute can be filtered on
+		edit: Possible values that this attribute can be set to, '' indicates all strings
+		editConfirm: function to retrive a valid user object to PATCH user after confirmation 
+		isDate: is the attribute a date
+		add: function that returns all valid values that can be added to this user
+		delete: function that returns all valid values that can be deleted for this user
+	}
+	*/
+	const ATTRIBUTES = {
+		fullName: {
+			key: 'fullName',
+			title: 'Navn',
+			value: (r) => r.fullName,
+			defaultFiltering: '',
+			filter: (r, v) => r.fullName.toLocaleLowerCase().indexOf(v?.toLocaleLowerCase()) >= 0
+		},
+		displayName: {
+			key: 'displayName',
+			title: 'Visningsnavn',
+			value: (r) => r.displayName || '',
+			defaultFiltering: '',
+			filter: (r, v) => r.displayName.toLocaleLowerCase().indexOf(v?.toLocaleLowerCase()) >= 0,
+			editOptions: '',
+			editConfirm: (v) => {
+				return { user: { data: { displayName: v } } };
+			}
+		},
+		discordName: {
+			key: 'discordName',
+			title: 'Discord-navn',
+			value: (r) => r.discord?.username || '',
+			defaultFiltering: '',
+			filter: (r, v) => (r.discordUsername || '').toLocaleLowerCase().indexOf(v?.toLocaleLowerCase()) >= 0
+		},
+		discordMember: {
+			key: 'discordMember',
+			title: 'Discord-medlem',
+			value: (r) => (r.discord?.isMember ? 'Ja' : 'Nei'),
+			defaultFiltering: '',
+			isBoolean: true,
+			filter: (r, v) => v === '' || v == r.discord?.isMember
+		},
+		email: {
+			key: 'email',
+			title: 'E-post',
+			value: (r) => r.email,
+			defaultFiltering: '',
+			filter: (r, v) => r.email.toLocaleLowerCase().indexOf(v?.toLocaleLowerCase()) >= 0
+		},
+		registerd: {
+			key: 'insertInstant',
+			title: 'Registrert',
+			value: (r) => r.insertInstant,
+			defaultFiltering: ['', ''],
+			filter: (r, v) => r.insertInstant <= (new Date(v[0]).getTime() || r.insertInstant) && r.insertInstant >= (new Date(v[1]).getTime() || 0),
+			isDate: true
+		},
+		type: {
+			key: 'type',
+			title: 'Medlemstype',
+			value: (r) => r.type || '',
+			defaultFiltering: [],
+			filterValues: ['alumni', 'employee', 'student'],
+			filter: (r, v) => v?.includes(r.type) || v?.length == 0
+		},
+
+		study_program: {
+			key: 'program',
+			title: 'Studieretning',
+			value: (r) => r.study?.program || '',
+			editOptions: '',
+			editConfirm: (v) => {
+				return { user: { data: { study: { program: v } } } };
+			}
+		},
+		study_year: {
+			key: 'year',
+			title: 'Årstrinn',
+			value: (r) => r.study?.year || '',
+			editOptions: [1, 2, 3, 4, 5, 6, 7, 8],
+			editConfirm: (v) => {
+				return { user: { data: { study: { year: v } } } };
+			}
+		},
+		groups: {
+			key: 'groupIds',
+			title: 'Gruppe',
+			title_plural: 'Grupper',
+			value: (r) => r.groupIds?.map((id) => groups[id]?.name),
+			addOptions: (r) =>
+				Object.keys(groups)
+					.filter((id) => !r.groupIds?.includes(id))
+					?.map((id) => {
+						let name = groups[id].name;
+						return { id, name };
+					}),
+			deleteOptions: (r) =>
+				r?.groupIds?.map((g) => {
+					return { id: g, name: groups[g].name };
+				}) || [],
+			defaultFiltering: [],
+			filterValues: Object.keys(groups).map((id) => groups[id].name),
+			filter: (r, v) => r.groupIds?.find((id) => v?.includes(groups[id].name)) || v?.length == 0
+		},
+		applications: {
+			key: 'applicationRoles',
+			title: 'Applikasjon',
+			title_plural: 'Applikasjoner',
+			value: (r) => r.applicationRoles?.map((a) => applications[a.id]?.name),
+			addOptions: (r) =>
+				Object.keys(applications)
+					?.filter((id) => !r.applicationRoles?.find((a) => a.id == id))
+					?.map((id) => {
+						return { id, name: applications[id].name };
+					}),
+			deleteOptions: (r) =>
+				r?.applicationRoles?.map((a) => {
+					let name = applications[a.id].name;
+					return { id: a.id, name };
+				}) || [],
+			defaultFiltering: [],
+			filterValues: Object.keys(applications).map((id) => applications[id].name),
+			filter: (r, v) => r.applicationRoles?.find((app) => v?.includes(applications[app.id].name)) || v?.length == 0
+		}
+	};
+	const simpleFilter = {
+		title: 'Søk etter brukere (navn, discord-navn og epost): ',
+		filter: (r, v) => [r.name, r.discordUsername, r.email].find((e) => e?.toLocaleLowerCase().indexOf(v.toLocaleLowerCase()) >= 0)
+	};
+
+	$: filters = selectedFilters.map((key) => ATTRIBUTES[key]);
+	$: cols = selectedCols.map((key) => ATTRIBUTES[key]);
+
+	const editUser = (type, active) => {
+		attributeToEdit = active;
+		editType = type;
+		openEdit = true;
+	};
+	async function editValue(event) {
+		let user = event.detail.user;
+		let editValue = event.detail.attribute.editConfirm(event.detail.value);
+		const updatedUser = await api.patchUser(user.id, editValue, { fetch: this.fetch });
+		// update rows with updated user
+		if (updatedUser) {
+			users = users.map((u) => (u.id == user.id ? updatedUser.json.user : u));
+			success(event.detail.attribute.title + ' ble oppdatert!');
+		} else {
+			failure(event.detail.attribute.title + ' ble ikke oppdatert');
+		}
+	}
+	function addValue(event) {
+		let info = event.detail.value;
+		let user = event.detail.user;
+		if (event.detail.attribute.key == 'groupIds') {
+			addUserMembership(info, user, this.fetch);
+		} else if (event.detail.attribute.key == 'applicationRoles') {
+			addUserRegistration(info, user, this.fetch);
+		}
+	}
+	async function addUserMembership(groupId, user, fetch) {
+		let members = {};
+		members[groupId] = [{ userId: user.id }];
+		console.log({ members });
+		if ((await api.addUserMembership({ members }, { fetch })).ok) {
+			user.groupIds.push(groupId);
+			users = users;
+			success('Gruppen ' + groups[groupId].name + ' ble lagt til!');
+
+			// Update the applications with roles
+			user.applicationRoles.forEach((app) => {
+				groups[groupId].roles[app.id]?.forEach((role) => {
+					if (!app.roles.includes(role.name)) {
+						app.roles.push(role.name);
+					}
+				});
+			});
+		} else {
+			failure('Gruppen ble ikke lagt til.');
+		}
+	}
+	async function addUserRegistration(appId, user, fetch) {
+		let registration = { applicationId: appId };
+		if ((await api.addUserRegistration(user.id, { registration }, { fetch })).ok) {
+			let roles = [];
+			// Add roles to application based on assigned groups
+			user.groupIds.forEach((id) => {
+				if (groups[id].roles[appId]) {
+					groups[id].roles[appId].forEach((role) => roles.push(role.name));
+				}
+			});
+
+			user.applicationRoles.push({ id: appId, roles });
+			users = users;
+			success('Applikasjonen ' + applications[appId].name + ' ble lagt til!');
+		} else {
+			failure('Applikasjonen ble ikke lagt til.');
+		}
+	}
+
+	function deleteValue(event) {
+		let user = event.detail.user;
+		let deleteId = event.detail.value;
+		if (event.detail.attribute.key == 'groupIds') {
+			deleteUserMembership(deleteId, user, this.fetch);
+		} else if (event.detail.attribute.key == 'applicationRoles') {
+			deleteUserRegistration(deleteId, user, this.fetch);
+		}
+	}
+	async function deleteUserRegistration(appId, user, fetch) {
+		if ((await api.deleteUserRegistration(user.id, appId, { fetch })).ok) {
+			users.find((u) => u.id == user.id).applicationRoles = user.applicationRoles.filter((a) => a.id != appId);
+			users = users;
+			success('Applikasjonen ' + applications[appId].name + ' ble fjernet!');
+		} else {
+			failure('Applikasjonen ble ikke fjernet.');
+		}
+	}
+	async function deleteUserMembership(groupId, user, fetch) {
+		let query = 'groupId=' + groupId + '&userId=' + user.id;
+		if ((await api.deleteUserMembership(query, { fetch })).ok) {
+			// Update the roles of user based on remaning groups
+			let applicationRoles = user.applicationRoles.map((r) => {
+				return { id: r.id, roles: [] };
+			});
+			let updatedGroups = user.groupIds.filter((id) => id != groupId);
+			updatedGroups.forEach((id) => {
+				applicationRoles.forEach((app) => {
+					groups[id].roles[app.id]?.forEach((role) => {
+						if (!app.roles.includes(role.name)) {
+							app.roles.push(role.name);
+						}
+					});
+				});
+			});
+			users.find((u) => u.id == user.id).groupIds = updatedGroups;
+			users.find((u) => u.id == user.id).applicationRoles = applicationRoles;
+			users = users;
+			success('Gruppen ' + groups[groupId].name + ' ble Fjernet!');
+		} else {
+			failure('Gruppen ble ikke fjernet.');
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Admin panel</title>
+</svelte:head>
+
+<main>
+	<div class="wrap">
+		<SvelteToast />
+	</div>
+	<div class="container">
+		<div class="row">
+			<div class="main-info">
+				<h2>Totalt antall medlemmer: {users.length}</h2>
+				<span>Studenter: {users.filter((e) => e.type == 'student').length}</span>
+				<span>Alumni: {users.filter((e) => e.type == 'alumni').length}</span>
+				<span>Ansatte: {users.filter((e) => e.type == 'employee').length}</span>
+			</div>
+			<br />
+			<AdminPanelTable columns={cols} rows={users} {filters} expandRowKey="fullName" simpleFilterOptions={simpleFilter}>
+				<div slot="expanded" let:row class="user-info">
+					<p><b>Fullt Navn: </b>{row.fullName}</p>
+					<p><b>Visningsnavn: </b>{row.displayName} <span on:click={() => editUser('edit', ATTRIBUTES['displayName'])}><FaEdit /></span></p>
+					<p><b>E-post: </b>{row.email}</p>
+					<p><b>Medlemstype: </b>{row.type || 'ikke registrert'}</p>
+					{#if row.type == 'student' || row.type == 'alumni'}
+						<p><b>Studieretning: </b>{row.study.program} <span on:click={() => editUser('edit', ATTRIBUTES['study_program'])}><FaEdit /></span></p>
+						{#if row.type == 'student'}
+							<p><b>Årstrinn: </b>{row.study.year} <span on:click={() => editUser('edit', ATTRIBUTES['study_year'])}><FaEdit /></span></p>
+						{:else}
+							<p><b>Medlemsår: </b>{row.alumni.joinYear}</p>
+						{/if}
+					{:else if row.type == 'employee'}
+						<p><b>Title: </b>{row.employee.title}</p>
+						<p />
+					{/if}
+					{#if row.discord}
+						<p><b>Discord-navn: </b>{row.discord?.username}</p>
+						<p><b>Registrert på discord: </b>{row.discord?.isMember ? 'Ja' : 'Nei'}</p>
+					{/if}
+					<div class="user-roles">
+						<p>
+							<b>Grupper</b>
+							<span class="green" on:click={() => editUser('add', ATTRIBUTES['groups'])}><FaRegPlusSquare /></span>
+							<span class="red" on:click={() => editUser('delete', ATTRIBUTES['groups'])}><FaRegMinusSquare /></span>
+						</p>
+						<hr />
+						{#if row?.groupIds.length != 0}
+							<div class="role-info">
+								<p><b>Navn:</b></p>
+								<p><b>Tilgang til applikasjoner:</b></p>
+								{#each row.groupIds as id}
+									<p>{groups[id]?.name}</p>
+									<p>
+										{Object.keys(groups[id]?.roles)
+											.map((e) => applications[e].name)
+											.join(', ')}
+									</p>
+								{/each}
+							</div>
+						{:else}
+							<p><i>Ikke medlem av noen grupper</i></p>
+						{/if}
+					</div>
+					<div class="user-roles">
+						<p>
+							<b>Applikasjonsroller</b>
+							<span class="green" on:click={() => editUser('add', ATTRIBUTES['applications'])}><FaRegPlusSquare /></span>
+							<span class="red" on:click={() => editUser('delete', ATTRIBUTES['applications'])}><FaRegMinusSquare /></span>
+						</p>
+						<hr />
+						{#if row?.applicationRoles.length != 0}
+							<div class="role-info">
+								<span><b>Applikasjon:</b></span><span><b>Roller fra grupper:</b></span>
+								{#each row.applicationRoles as application}
+									<p>{applications[application.id]?.name}</p>
+									<p>{application.roles?.join(', ') || ''}</p>
+								{/each}
+							</div>
+						{:else}
+							<p><i>Ikke tilgang til noen applikasjoner</i></p>
+						{/if}
+					</div>
+					<p><b>Bruker opprettet: </b>{date.nicePrintDate(new Date(row.insertInstant))}</p>
+					<p><b>Sist logget in: </b>{date.nicePrintDate(new Date(row.lastLoginInstant))}</p>
+					<EditUserPopup bind:openEdit {attributeToEdit} {row} {editType} on:edit={editValue} on:add={addValue} on:delete={deleteValue} />
+				</div>
+			</AdminPanelTable>
+		</div>
+	</div>
+</main>
+
+<style>
+	.wrap {
+		--toastContainerTop: 3rem;
+		--toastContainerRight: 2rem;
+	}
+	.main-info {
+		display: grid;
+		grid-template-columns: 40% 20% 20% 20%;
+		align-items: top;
+		padding: 0.6em;
+	}
+	.user-info {
+		display: grid;
+		grid-template-columns: 50% 50%;
+		align-items: top;
+		padding: 0.6em;
+	}
+	.user-info * {
+		margin: 0.1em 0;
+	}
+	.user-info p,
+	div {
+		width: 100%;
+	}
+	hr {
+		display: block;
+		height: 1px;
+		border: 0;
+		width: 70%;
+		border-top: 1px solid #ccc;
+		margin: 1em 0;
+		padding: 0;
+	}
+	.user-roles {
+		padding: 5px;
+	}
+	.user-roles p {
+		padding: 5px;
+	}
+	.role-info {
+		display: grid;
+		grid-template-columns: 30% 70%;
+		align-items: top;
+		margin: 0;
+		padding: 0;
+	}
+	.role-info p {
+		width: 100%;
+		padding: 0px;
+		padding-left: 5px;
+	}
+	.user-info > p > span,
+	.user-roles > p > span {
+		display: inline-block;
+		height: 0.75em;
+		vertical-align: baseline;
+		margin-left: 4px;
+		color: #fff;
+		transition: 0.1s linear;
+	}
+	span.red:hover {
+		color: var(--error);
+	}
+	.user-info > p > span:hover,
+	.user-roles > p > span.green:hover {
+		color: var(--green-2);
+	}
+</style>
diff --git a/src/server.js b/src/server.js
index 73a34cc..0cb40a6 100644
--- a/src/server.js
+++ b/src/server.js
@@ -9,8 +9,10 @@ import { json as jsonParser } from 'body-parser';
 import './server/load_envs';
 import { router as calender } from './server/calender';
 import { router as user } from './server/user';
+import { router as application } from './server/application';
+import { router as group } from './server/group';
 
-const APIS = [calender, user];
+const APIS = [calender, user, application, group];
 
 const { PORT, NODE_ENV, FUSION_AUTH_CLIENT_ID, FUSION_AUTH_CLIENT_SECRET, FUSION_AUTH_HOST, FUSION_AUTH_SECRET, BASE_URL, MONGO_DB_URL } = process.env;
 const dev = NODE_ENV === 'development';
diff --git a/src/server/application.js b/src/server/application.js
new file mode 100644
index 0000000..f912fce
--- /dev/null
+++ b/src/server/application.js
@@ -0,0 +1,46 @@
+import express from 'express';
+import fusion from '../server/fusion';
+
+export const router = express.Router();
+
+router.get('/application', async (req, res) => {
+	const result = await fusion.getAllApplications();
+
+	if (result.error) {
+		return res.status(400).send({ message: 'Error fetching applications' });
+	}
+	let jsonResult = result.json;
+	let applications = {};
+	for (let i = 0; i < jsonResult.length; i++) {
+		let application = jsonResult[i];
+		let { id, name, roles } = application;
+
+		roles =
+			roles?.map(
+				(r) =>
+					(r = {
+						name: r.name,
+						description: r.description,
+						id: r.id
+					})
+			) || [];
+		applications[id] = { name, roles };
+	}
+	return res.send({ applications });
+});
+
+router.post('/user/registration/:id', async (req, res) => {
+	const result = await fusion.addUserRegistration(req.params.id, req.body.registration);
+	if (result.error) {
+		return res.status(400).send({ message: 'Error adding roles to user' });
+	}
+	return res.send(result.json);
+});
+
+router.delete('/user/registration/:id/:applicationId', async (req, res) => {
+	const result = await fusion.deleteUserRegistration(req.params.id, req.params.applicationId);
+	if (result.error) {
+		return res.status(400).send({ message: 'Error deleting user registration' });
+	}
+	return res.send(result);
+});
diff --git a/src/server/fusion.js b/src/server/fusion.js
index 389e5b8..faf4b07 100644
--- a/src/server/fusion.js
+++ b/src/server/fusion.js
@@ -43,4 +43,63 @@ export const getUser = async (id) => {
 	return res;
 };
 
-export default { createUser, updateUser, getUser };
+export const searchUsers = async (queryString) => {
+	const res = await _fetch(`/api/user/search?${queryString}`);
+	if (res.json?.users) {
+		res.json = res.json.users;
+	}
+	return res;
+};
+
+export const getAllApplications = async () => {
+	const res = await _fetch(`/api/application`);
+	if (res.json?.applications) {
+		res.json = res.json.applications;
+	}
+	return res;
+};
+
+export const getAllGroups = async () => {
+	const res = await _fetch(`/api/group`);
+	if (res.json?.groups) {
+		res.json = res.json.groups;
+	}
+	return res;
+};
+
+export const addUsersToGroup = async (members) => {
+	const res = await _fetch(`/api/group/member`, { method: 'POST', json: { members } });
+	if (res.json?.members) {
+		res.json = res.json.members;
+	}
+	return res;
+};
+
+export const removeUserFromGroup = async (queryString) => {
+	return await _fetch(`/api/group/member?${queryString}`, { method: 'DELETE' });
+};
+
+export const addUserRegistration = async (userId, registration) => {
+	const res = await _fetch(`/api/user/registration/${userId}`, { method: 'POST', json: { registration } });
+	if (res.json?.registration) {
+		res.json = res.json.registration;
+	}
+	return res;
+};
+
+export const deleteUserRegistration = async (userId, applicationId) => {
+	return await _fetch(`/api/user/registration/${userId}/${applicationId}`, { method: 'DELETE' });
+};
+
+export default {
+	createUser,
+	updateUser,
+	getUser,
+	searchUsers,
+	getAllApplications,
+	getAllGroups,
+	addUsersToGroup,
+	removeUserFromGroup,
+	addUserRegistration,
+	deleteUserRegistration
+};
diff --git a/src/server/group.js b/src/server/group.js
new file mode 100644
index 0000000..380a753
--- /dev/null
+++ b/src/server/group.js
@@ -0,0 +1,43 @@
+import express from 'express';
+import fusion from '../server/fusion';
+
+export const router = express.Router();
+
+router.get('/group', async (req, res) => {
+	const result = await fusion.getAllGroups();
+
+	if (result.error) {
+		return res.status(400).send({ message: 'Error fetching groups' });
+	}
+	let jsonResult = result.json;
+	let groups = {};
+	for (let i = 0; i < jsonResult.length; i++) {
+		let group = jsonResult[i];
+		let { id, name, roles } = group;
+
+		let newRoles = {};
+		Object.keys(roles).forEach((k) => {
+			newRoles[k] = roles[k].map((r) => (r = { id: r.id, name: r.name }));
+		});
+		roles = newRoles;
+
+		groups[id] = { name, roles };
+	}
+	return res.send({ groups });
+});
+
+router.post('/group/member', async (req, res) => {
+	const result = await fusion.addUsersToGroup(req.body.members);
+	if (result.error) {
+		return res.status(400).send({ message: 'Error adding user to group' });
+	}
+	return res.send({ result });
+});
+
+router.delete('/group/member?:query', async (req, res) => {
+	const result = await fusion.removeUserFromGroup(req._parsedUrl.query);
+	if (result.error) {
+		return res.status(400).send({ message: 'Error removing user from group' });
+	}
+	return res.send({ result });
+});
diff --git a/src/server/user.js b/src/server/user.js
index 02794b4..8f1cad5 100644
--- a/src/server/user.js
+++ b/src/server/user.js
@@ -41,6 +41,47 @@ const validate_user = (data) => {
 	}
 	return user;
 };
+const findUserData = (userData) => {
+	let { id, email, data, registrations, memberships, fullName, imageUrl, insertInstant, lastLoginInstant } = userData;
+	let { displayName, type, study, alumni, employee, discord } = data || {};
+	let groupIds = memberships?.map((element) => element.groupId) || [];
+
+	let applicationRoles =
+		registrations?.map((element) => {
+			return { id: element.applicationId, roles: element.roles || [] };
+		}) || [];
+	fullName = fullName || displayName;
+	displayName = displayName || fullName;
+	imageUrl = imageUrl || DEFAULT_PROFILE_IMAGE;
+	return {
+		id,
+		email,
+		fullName,
+		displayName,
+		imageUrl,
+		type,
+		study,
+		alumni,
+		employee,
+		discord,
+		insertInstant,
+		lastLoginInstant,
+		groupIds,
+		applicationRoles
+	};
+};
+
+router.get('/user/search?:query', async (req, res) => {
+	const result = await fusion.searchUsers(req._parsedUrl.query);
+	if (result.error) {
+		return res.status(400).send({ message: 'Error fetching user' });
+	}
+	let users = [];
+	for (let i = 0; i < result.json.length; i++) {
+		users.push(findUserData(result.json[i]));
+	}
+	return res.send({ users });
+});
 
 router.get('/user/:id', async (req, res) => {
 	const user = await fusion.getUser(req.params.id);
@@ -65,6 +106,19 @@ router.get('/user/:id', async (req, res) => {
 	return res.send({ id, email, fullName, name: displayName, imageUrl, type, study, alumni, employee, discord: discordUsername, self });
 });
 
+router.patch('/user/:id', async (req, res) => {
+	const result = await fusion.updateUser(req.params.id, req.body.user);
+
+	if (res.status == 404 || result.json?.verified === false) {
+		return res.status(404).send({ message: 'User not found' });
+	}
+	if (result.error) {
+		return res.status(400).send({ message: 'Error fetching user' });
+	}
+	let user = findUserData(result.json.user);
+	return res.send({ user });
+});
+
 router.put('/user', async (req, res) => {
 	if (req.user) {
 		return res.status(400).send({ message: 'You are already registered' });
diff --git a/src/utils/api.js b/src/utils/api.js
index d8777e3..f14cbad 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -64,6 +64,14 @@ export const getUser = async (id, options) => {
 	return await fetchResource(`/api/user/${id}`, options);
 };
 
+export const patchUser = async (id, user, options = {}) => {
+	return await fetchResource(`/api/user/${id}`, { method: 'PATCH', json: user, errorText: 'ERROR', ...options });
+};
+
+export const searchUsers = async (query, options) => {
+	return await fetchResource(`/api/user/search?${query}`, options);
+};
+
 export const getEvents = async (old, options) => {
 	return await fetchResource(`/api/events?old=${old}`, options);
 };
@@ -76,4 +84,46 @@ export const deleteEvent = async (eventId) => {
 	return await fetchResource(`/api/events/${eventId}`, { method: 'DELETE', errorText: 'ERROR' });
 };
 
-export default { registerUser, getUser, getEvents, postEvent, deleteEvent };
+export const getAllApplications = async (options) => {
+	return await fetchResource(`/api/application`, options);
+};
+
+export const getAllGroups = async (options) => {
+	return await fetchResource(`/api/group`, options);
+};
+
+export const addUserMembership = async (members, options) => {
+	return await fetchResource(`/api/group/member`, { method: 'POST', json: members, errorText: 'ERROR', ...options });
+};
+
+export const deleteUserMembership = async (query, options) => {
+	return await fetchResource(`/api/group/member?${query}`, { method: 'DELETE', errorText: 'ERROR', ...options });
+};
+
+export const addUserRegistration = async (userId, registration, options) => {
+	return await fetchResource(`/api/user/registration/${userId}`, { method: 'POST', json: registration, errorText: 'ERROR', ...options });
+};
+
+export const deleteUserRegistration = async (userId, applicationId, options) => {
+	return await fetchResource(`/api/user/registration/${userId}/${applicationId}`, {
+		method: 'DELETE',
+		errorText: 'ERROR',
+		...options
+	});
+};
+
+export default {
+	registerUser,
+	getUser,
+	searchUsers,
+	getEvents,
+	postEvent,
+	deleteEvent,
+	getAllApplications,
+	getAllGroups,
+	patchUser,
+	addUserMembership,
+	deleteUserMembership,
+	addUserRegistration,
+	deleteUserRegistration
+};
diff --git a/src/utils/date.js b/src/utils/date.js
new file mode 100644
index 0000000..1a2ed38
--- /dev/null
+++ b/src/utils/date.js
@@ -0,0 +1,10 @@
+const months = { 0: 'Januar', 1: 'Februar', 2: 'Mars', 3: 'April', 4: 'Mai', 5: 'Juni', 6: 'Juli', 7: 'August', 8: 'September', 9: ' Oktober', 10: 'November', 11: 'Desember' };
+
+export const nicePrintDate = (date) => {
+	let dateString = date.getDate() + '. ';
+	dateString += months[date.getMonth()] + ' ';
+	dateString += date.getFullYear();
+	return dateString;
+};
+
+export default { nicePrintDate };