diff --git a/backend/samfundet/migrations/0010_recruitment_promo_media.py b/backend/samfundet/migrations/0010_recruitment_promo_media.py
new file mode 100644
index 000000000..8aa5e3431
--- /dev/null
+++ b/backend/samfundet/migrations/0010_recruitment_promo_media.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.1 on 2024-10-31 19:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('samfundet', '0009_recruitmentpositionsharedinterviewgroup_name_en_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='recruitment',
+            name='promo_media',
+            field=models.CharField(blank=True, default=None, help_text='Youtube video id', max_length=11, null=True),
+        ),
+    ]
diff --git a/backend/samfundet/models/recruitment.py b/backend/samfundet/models/recruitment.py
index 20dbd2037..514fcda9d 100644
--- a/backend/samfundet/models/recruitment.py
+++ b/backend/samfundet/models/recruitment.py
@@ -31,6 +31,7 @@ class Recruitment(CustomBaseModel):
     organization = models.ForeignKey(null=False, blank=False, to=Organization, on_delete=models.CASCADE, help_text='The organization that is recruiting')
 
     max_applications = models.PositiveIntegerField(null=True, blank=True, verbose_name='Max applications per applicant')
+    promo_media = models.CharField(max_length=11, help_text='Youtube video id', null=True, default=None, blank=True)
 
     def resolve_org(self, *, return_id: bool = False) -> Organization | int:
         if return_id:
diff --git a/backend/samfundet/serializers.py b/backend/samfundet/serializers.py
index a1b38a841..c794ee481 100644
--- a/backend/samfundet/serializers.py
+++ b/backend/samfundet/serializers.py
@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import re
 import itertools
 from typing import TYPE_CHECKING
 from collections import defaultdict
@@ -739,11 +740,22 @@ class Meta:
 
 class RecruitmentSerializer(CustomBaseSerializer):
     separate_positions = RecruitmentSeparatePositionSerializer(many=True, read_only=True)
+    promo_media = serializers.CharField(max_length=100, allow_blank=True, allow_null=True)
 
     class Meta:
         model = Recruitment
         fields = '__all__'
 
+    def validate_promo_media(self, value: str | None) -> str | None:
+        if value is None or value == '':
+            return None
+        match = re.search(r'(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))', value)
+        if match:
+            return match.group(3)
+        if len(value) == 11:
+            return value
+        raise ValidationError('Invalid youtube url')
+
     def to_representation(self, instance: Recruitment) -> dict:
         data = super().to_representation(instance)
         data['organization'] = OrganizationSerializer(instance.organization).data
@@ -770,6 +782,7 @@ class RecruitmentPositionSerializer(CustomBaseSerializer):
 
     gang = GangSerializer(read_only=True)
     interviewers = InterviewerSerializer(many=True, read_only=True)
+    interviewer_ids = serializers.ListField(child=serializers.IntegerField(), write_only=True, required=False)
 
     class Meta:
         model = RecruitmentPosition
@@ -779,37 +792,43 @@ def _update_interviewers(
         self,
         *,
         recruitment_position: RecruitmentPosition,
-        interviewer_objects: list[dict],
+        interviewer_ids: list[int],
     ) -> None:
-        try:
-            interviewers = []
-            if interviewer_objects:
-                interviewer_ids = [interviewer.get('id') for interviewer in interviewer_objects]
-                if interviewer_ids:
-                    interviewers = User.objects.filter(id__in=interviewer_ids)
-            recruitment_position.interviewers.set(interviewers)
-        except (TypeError, KeyError):
-            raise ValidationError('Invalid data for interviewers.') from None
+        if interviewer_ids:
+            try:
+                interviewers = User.objects.filter(id__in=interviewer_ids)
+                found_ids = set(interviewers.values_list('id', flat=True))
+                invalid_ids = set(interviewer_ids) - found_ids
+
+                if invalid_ids:
+                    raise ValidationError(f'Invalid interviewer IDs: {invalid_ids}')
+
+                recruitment_position.interviewers.set(interviewers)
+            except (TypeError, ValueError):
+                raise ValidationError('Invalid interviewer IDs format.') from None
+        else:
+            recruitment_position.interviewers.clear()
 
     def validate(self, data: dict) -> dict:
-        gang_id = self.initial_data.get('gang').get('id')
+        gang_id = self.initial_data.get('gang', {}).get('id')
         if gang_id:
             try:
                 data['gang'] = Gang.objects.get(id=gang_id)
             except Gang.DoesNotExist:
                 raise serializers.ValidationError('Invalid gang id') from None
+
+        self.interviewer_ids = data.pop('interviewer_ids', [])
+
         return super().validate(data)
 
     def create(self, validated_data: dict) -> RecruitmentPosition:
         recruitment_position = super().create(validated_data)
-        interviewer_objects = self.initial_data.get('interviewers', [])
-        self._update_interviewers(recruitment_position=recruitment_position, interviewer_objects=interviewer_objects)
+        self._update_interviewers(recruitment_position=recruitment_position, interviewer_ids=self.interviewer_ids)
         return recruitment_position
 
     def update(self, instance: RecruitmentPosition, validated_data: dict) -> RecruitmentPosition:
         updated_instance = super().update(instance, validated_data)
-        interviewer_objects = self.initial_data.get('interviewers', [])
-        self._update_interviewers(recruitment_position=updated_instance, interviewer_objects=interviewer_objects)
+        self._update_interviewers(recruitment_position=updated_instance, interviewer_ids=self.interviewer_ids)
         return updated_instance
 
     def get_total_applicants(self, recruitment_position: RecruitmentPosition) -> int:
diff --git a/frontend/.stylelintrc b/frontend/.stylelintrc
index f21a2335d..74d014423 100644
--- a/frontend/.stylelintrc
+++ b/frontend/.stylelintrc
@@ -80,7 +80,7 @@
     "declaration-block-single-line-max-declarations": null,
     "declaration-property-max-values": null,
     "max-nesting-depth": [
-      1,
+      2,
       {
         "ignoreAtRules": [""],
         "ignore": ["pseudo-classes", "blockless-at-rules"]
diff --git a/frontend/src/Components/Carousel/Carousel.module.scss b/frontend/src/Components/Carousel/Carousel.module.scss
index 3c1f6d60e..05626f115 100644
--- a/frontend/src/Components/Carousel/Carousel.module.scss
+++ b/frontend/src/Components/Carousel/Carousel.module.scss
@@ -74,11 +74,11 @@
     transition: 0.2s;
     cursor: pointer;
 
-    /* stylelint-disable-next-line selector-max-class, max-nesting-depth */
+    /* stylelint-disable-next-line selector-max-class */
     &.left {
       left: 1em;
     }
-    /* stylelint-disable-next-line selector-max-class, max-nesting-depth */
+    /* stylelint-disable-next-line selector-max-class */
     &.right {
       right: 3em;
     }
diff --git a/frontend/src/Components/CommandMenu/CommandMenu.scss b/frontend/src/Components/CommandMenu/CommandMenu.scss
index 7b3e02660..b5fbc994b 100644
--- a/frontend/src/Components/CommandMenu/CommandMenu.scss
+++ b/frontend/src/Components/CommandMenu/CommandMenu.scss
@@ -1,6 +1,5 @@
 /* stylelint-disable selector-max-compound-selectors */
 /* stylelint-disable selector-max-combinators */
-/* stylelint-disable max-nesting-depth */
 @import 'src/constants';
 
 @import 'src/mixins';
diff --git a/frontend/src/Components/DatePicker/DatePicker.module.scss b/frontend/src/Components/DatePicker/DatePicker.module.scss
new file mode 100644
index 000000000..3cd9f31c3
--- /dev/null
+++ b/frontend/src/Components/DatePicker/DatePicker.module.scss
@@ -0,0 +1,78 @@
+@use 'sass:color';
+
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
+@import 'src/constants';
+
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
+@import 'src/mixins';
+
+.container {
+  position: relative;
+  width: 260px;
+}
+
+.button {
+  @include rounded-lighter;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  width: 100%;
+  justify-content: flex-start;
+  font-size: 0.875rem;
+  padding: 0.75rem 2.5rem 0.75rem 1rem;
+  color: $black;
+  cursor: pointer;
+  margin-top: 0.5em; // Make sure this is the same for all inputs that should be used together
+  border: 1px solid $grey-35;
+  background-color: $white;
+  font-weight: initial;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &:hover {
+    background-color: $grey-4;
+  }
+
+  &:focus {
+    border-color: $grey-3;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+    outline: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  @include theme-dark {
+    background-color: $theme-dark-input-bg;
+    color: white;
+    border-color: $grey-0;
+    &:focus {
+      border-color: $grey-1;
+      outline: 1px solid rgba(255, 255, 255, 0.6);
+    }
+    &:hover {
+      background-color: color.scale($theme-dark-input-bg, $lightness: 8%);
+    }
+  }
+}
+
+.popover {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  margin-top: 4px;
+  padding: 0.25rem;
+  background: $white;
+  border-radius: 0.5rem;
+  z-index: 100;
+  //box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
+  //box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
+  border: 1px solid $grey-35;
+
+  @include theme-dark {
+    background: $black-1;
+    border-color: $grey-0;
+  }
+}
+
+.hidden {
+  display: none;
+}
diff --git a/frontend/src/Components/DatePicker/DatePicker.stories.tsx b/frontend/src/Components/DatePicker/DatePicker.stories.tsx
new file mode 100644
index 000000000..ecac4211b
--- /dev/null
+++ b/frontend/src/Components/DatePicker/DatePicker.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+
+// Local component config.
+const meta = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const onChange = (value: unknown) => console.log('Selected:', value);
+
+export const Basic: Story = {
+  args: {
+    onChange,
+  },
+};
diff --git a/frontend/src/Components/DatePicker/DatePicker.tsx b/frontend/src/Components/DatePicker/DatePicker.tsx
new file mode 100644
index 000000000..4e6e9c7b9
--- /dev/null
+++ b/frontend/src/Components/DatePicker/DatePicker.tsx
@@ -0,0 +1,76 @@
+import { Icon } from '@iconify/react';
+import classNames from 'classnames';
+import { format } from 'date-fns';
+import React, { useMemo } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, MiniCalendar } from '~/Components';
+import { useClickOutside } from '~/hooks';
+import { KEY } from '~/i18n/constants';
+import styles from './DatePicker.module.scss';
+
+type DatePickerProps = {
+  label?: string;
+  disabled?: boolean;
+  value?: Date | null;
+  buttonClassName?: string;
+  onChange?: (date: Date | null) => void;
+  className?: string;
+
+  minDate?: Date;
+  maxDate?: Date;
+};
+
+export function DatePicker({
+  value: initialValue,
+  onChange,
+  disabled,
+  label,
+  buttonClassName,
+  minDate,
+  maxDate,
+}: DatePickerProps) {
+  const isControlled = initialValue !== undefined;
+
+  const [date, setDate] = useState<Date | null>(null);
+  const [open, setOpen] = useState(false);
+
+  const { t } = useTranslation();
+
+  const clickOutsideRef = useClickOutside<HTMLDivElement>(() => setOpen(false));
+
+  const value = useMemo(() => {
+    if (isControlled) {
+      return initialValue;
+    }
+    return date;
+  }, [isControlled, initialValue, date]);
+
+  function handleChange(d: Date | null) {
+    setDate(d);
+    onChange?.(d);
+  }
+
+  return (
+    <div className={styles.container} ref={clickOutsideRef}>
+      <button
+        type="button"
+        className={classNames(styles.button, buttonClassName)}
+        onClick={() => setOpen((v) => !v)}
+        disabled={disabled}
+      >
+        <Icon icon="material-symbols:calendar-month-outline-rounded" />
+        {value ? format(value, 'PPP') : <span>{label ?? t(KEY.pick_a_date)}</span>}
+      </button>
+      <div className={classNames(styles.popover, !open && styles.hidden)}>
+        <MiniCalendar
+          baseDate={value || new Date()}
+          onChange={handleChange}
+          minDate={minDate}
+          maxDate={maxDate}
+          displayLabel
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/Components/DatePicker/index.ts b/frontend/src/Components/DatePicker/index.ts
new file mode 100644
index 000000000..a4eb7f5cd
--- /dev/null
+++ b/frontend/src/Components/DatePicker/index.ts
@@ -0,0 +1 @@
+export { DatePicker } from './DatePicker';
diff --git a/frontend/src/Components/Dropdown/Dropdown.module.scss b/frontend/src/Components/Dropdown/Dropdown.module.scss
index 99a3ed5b1..aba01c1e6 100644
--- a/frontend/src/Components/Dropdown/Dropdown.module.scss
+++ b/frontend/src/Components/Dropdown/Dropdown.module.scss
@@ -2,6 +2,10 @@
 
 @import 'src/mixins';
 
+.italic {
+  font-style: italic;
+}
+
 // label som wrapper
 .select_wrapper {
   display: flex;
diff --git a/frontend/src/Components/Dropdown/Dropdown.stories.tsx b/frontend/src/Components/Dropdown/Dropdown.stories.tsx
index 933f471c6..efa82ab29 100644
--- a/frontend/src/Components/Dropdown/Dropdown.stories.tsx
+++ b/frontend/src/Components/Dropdown/Dropdown.stories.tsx
@@ -1,42 +1,74 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory, Meta, StoryObj } from '@storybook/react';
 import { Dropdown } from './Dropdown';
 
 // Local component config.
-export default {
+const meta = {
   title: 'Components/Dropdown',
   component: Dropdown,
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Mango', value: 'mango' },
+];
+
+const onChange = (value: unknown) => console.log('Selected:', value);
+
+// Basic uncontrolled dropdown
+export const Basic: Story = {
+  args: {
+    options,
+    onChange,
+  },
+};
+
+// With default value
+export const WithDefaultValue: Story = {
+  args: {
+    options,
+    defaultValue: 'banana',
+    onChange,
+  },
+};
+
+// With null option
+export const WithNullOption: Story = {
   args: {
-    name: 'name',
-    label: 'Choose option',
+    options,
+    nullOption: true,
+    onChange,
   },
-} as ComponentMeta<typeof Dropdown>;
+};
 
-const Template: ComponentStory<typeof Dropdown> = (args) => <Dropdown {...args} />;
+// With custom null option
+export const WithCustomNullOption: Story = {
+  args: {
+    options,
+    nullOption: { label: 'Select a fruit...', disabled: false },
+    onChange,
+  },
+};
 
-export const Basic = Template.bind({});
-Basic.args = {
-  options: [
-    { label: 'alternativ 1', value: 1 },
-    { label: 'alternativ 2', value: 2 },
-  ],
+// With disabled null option (can't reselect null after choosing a value)
+export const WithDisabledNullOption: Story = {
+  args: {
+    options,
+    nullOption: { label: 'Select a fruit...', disabled: true },
+    onChange,
+  },
 };
-export const Many = Template.bind({});
-Many.args = {
-  options: [
-    { label: 'alternativ 1', value: 1 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-    { label: 'alternativ 2', value: 2 },
-  ],
+
+// With label
+export const WithLabel: Story = {
+  args: {
+    options,
+    label: 'Favorite Fruit',
+    onChange,
+  },
 };
diff --git a/frontend/src/Components/Dropdown/Dropdown.tsx b/frontend/src/Components/Dropdown/Dropdown.tsx
index 5a8ffc68e..8be044f1e 100644
--- a/frontend/src/Components/Dropdown/Dropdown.tsx
+++ b/frontend/src/Components/Dropdown/Dropdown.tsx
@@ -1,26 +1,43 @@
 import { Icon } from '@iconify/react';
 import { default as classNames, default as classnames } from 'classnames';
-import React, { type ChangeEvent, type ReactElement } from 'react';
+import React, { type ChangeEvent, type ReactNode, useMemo } from 'react';
 import styles from './Dropdown.module.scss';
 
-export type DropDownOption<T> = {
+export type DropdownOption<T> = {
   label: string;
   value: T;
+  disabled?: boolean;
+};
+
+type NullOption = {
+  label: string;
+  disabled?: boolean;
 };
 
-export type DropdownProps<T> = {
+type PrimitiveDropdownProps<T> = {
   className?: string;
   classNameSelect?: string;
-  defaultValue?: DropDownOption<T>; // issue 1089
-  value?: T;
-  disableIcon?: boolean;
-  options?: DropDownOption<T>[];
-  label?: string | ReactElement;
+  options?: DropdownOption<T>[];
+  label?: string | ReactNode;
   disabled?: boolean;
   error?: boolean;
-  onChange?: (value?: T) => void;
+  disableIcon?: boolean;
+  nullOption?: boolean | NullOption;
+  onChange?: (value: T) => void;
+};
+
+type ControlledDropdownProps<T> = PrimitiveDropdownProps<T> & {
+  value: T | null;
+  defaultValue?: never;
+};
+
+type UncontrolledDropdownProps<T> = PrimitiveDropdownProps<T> & {
+  value?: never;
+  defaultValue?: T | null;
 };
 
+export type DropdownProps<T> = ControlledDropdownProps<T> | UncontrolledDropdownProps<T>;
+
 function DropdownInner<T>(
   {
     options = [],
@@ -32,23 +49,45 @@ function DropdownInner<T>(
     label,
     disabled = false,
     disableIcon = false,
+    nullOption = false,
     error,
   }: DropdownProps<T>,
   ref: React.Ref<HTMLSelectElement>,
 ) {
-  /**
-   * Handles the raw change event from <option>
-   * The raw value choice is an index where -1 is reserved for
-   * the empty/default option. Depending on the index selected
-   * the onChange callback is provided with the respective DropDownOption
-   * @param e Standard onChange HTML event for dropdown
-   */
-  function handleChange(e?: ChangeEvent<HTMLSelectElement>) {
-    const choice = Number.parseInt(e?.currentTarget.value ?? '-1', 10);
-    if (choice >= 0 && choice < options.length) {
-      onChange?.(options[choice].value);
-    } else {
-      onChange?.(defaultValue?.value ?? options[0]?.value);
+  const isControlled = value !== undefined;
+
+  const finalOptions = useMemo<DropdownOption<T>[]>(() => {
+    let opts = [...options];
+
+    if (!nullOption) {
+      return options;
+    }
+
+    if (nullOption) {
+      if (typeof nullOption === 'boolean') {
+        opts = [{ value: null, label: '' } as DropdownOption<T>, ...opts];
+      } else {
+        opts = [{ value: null, label: nullOption.label, disabled: nullOption.disabled } as DropdownOption<T>, ...opts];
+      }
+    }
+
+    return opts;
+  }, [options, nullOption]);
+
+  const selectedIndex = useMemo(() => {
+    if (isControlled) {
+      return finalOptions.findIndex((opt) => opt.value === value);
+    }
+    if (defaultValue !== undefined) {
+      return finalOptions.findIndex((opt) => opt.value === defaultValue);
+    }
+    return 0; // fall back to selecting first element
+  }, [isControlled, value, defaultValue, finalOptions]);
+
+  function handleChange(event: ChangeEvent<HTMLSelectElement>) {
+    const index = Number.parseInt(event.currentTarget.value, 10);
+    if (index >= 0 && index < finalOptions.length) {
+      onChange?.(finalOptions[index].value);
     }
   }
 
@@ -62,16 +101,17 @@ function DropdownInner<T>(
           styles.samf_select,
           !disableIcon && styles.icon_disabled,
           error && styles.error,
+          nullOption && finalOptions[selectedIndex].value === finalOptions[0].value && styles.italic,
         )}
         onChange={handleChange}
         disabled={disabled}
-        value={value !== undefined ? options.findIndex((e) => e.value === value) : -1}
+        defaultValue={!isControlled ? selectedIndex : undefined}
+        value={isControlled ? selectedIndex : undefined}
       >
-        {defaultValue && <option value={-1}>{defaultValue.label}</option>}
-        {options.map((opt, index) => (
+        {finalOptions.map(({ label, value, ...props }, index) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: no other unique value available
-          <option value={index} key={index}>
-            {opt.label}
+          <option value={index} key={index} {...props}>
+            {label}
           </option>
         ))}
       </select>
diff --git a/frontend/src/Components/DynamicBuildingMap/DynamicBuildingMap.module.scss b/frontend/src/Components/DynamicBuildingMap/DynamicBuildingMap.module.scss
index de2aeb19a..e3abe0edf 100644
--- a/frontend/src/Components/DynamicBuildingMap/DynamicBuildingMap.module.scss
+++ b/frontend/src/Components/DynamicBuildingMap/DynamicBuildingMap.module.scss
@@ -1,5 +1,4 @@
 /* stylelint-disable declaration-no-important */
-/* stylelint-disable max-nesting-depth */
 /* stylelint-disable selector-max-class */
 /* stylelint-disable no-descending-specificity */
 /* stylelint-disable selector-max-type */
diff --git a/frontend/src/Components/DynamicOrgOutlet/DynamicOrgOutlet.tsx b/frontend/src/Components/DynamicOrgOutlet/DynamicOrgOutlet.tsx
new file mode 100644
index 000000000..88eaf98bc
--- /dev/null
+++ b/frontend/src/Components/DynamicOrgOutlet/DynamicOrgOutlet.tsx
@@ -0,0 +1,26 @@
+import { useRouteLoaderData } from 'react-router-dom';
+import type { RecruitmentLoader } from '~/router/loaders';
+import { OrgNameType } from '~/types';
+import { IsNumber } from '~/utils';
+import { IsfitOutlet } from '../IsfitOutlet/IsfitOutlet';
+import { SamfOutlet } from '../SamfOutlet/SamfOutlet';
+import { UkaOutlet } from '../UkaOutlet';
+
+export function DynamicOrgOutlet() {
+  const data = useRouteLoaderData('publicRecruitment') as RecruitmentLoader | undefined;
+
+  if (IsNumber(data?.recruitment?.organization)) {
+    // TODO: This should either check for org, or typing should be fixed
+    return <SamfOutlet />;
+  }
+
+  if (data?.recruitment?.organization.name === OrgNameType.ISFIT_NAME) {
+    return <IsfitOutlet />;
+  }
+
+  if (data?.recruitment?.organization.name === OrgNameType.UKA_NAME) {
+    return <UkaOutlet />;
+  }
+
+  return <SamfOutlet />;
+}
diff --git a/frontend/src/Components/Error/Error.module.scss b/frontend/src/Components/Error/Error.module.scss
deleted file mode 100644
index 016166cd9..000000000
--- a/frontend/src/Components/Error/Error.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.error_content {
-  line-height: 2rem;
-}
-
-.header {
-  font-size: 2rem;
-  font-weight: 700;
-}
diff --git a/frontend/src/Components/Error/index.ts b/frontend/src/Components/Error/index.ts
deleted file mode 100644
index 9b35c9f37..000000000
--- a/frontend/src/Components/Error/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Error } from './Error';
diff --git a/frontend/src/Components/ErrorDisplay/ErrorDisplay.module.scss b/frontend/src/Components/ErrorDisplay/ErrorDisplay.module.scss
new file mode 100644
index 000000000..09cbcc887
--- /dev/null
+++ b/frontend/src/Components/ErrorDisplay/ErrorDisplay.module.scss
@@ -0,0 +1,4 @@
+.error_content {
+  line-height: 2rem;
+}
+
diff --git a/frontend/src/Components/Error/Error.stories.tsx b/frontend/src/Components/ErrorDisplay/ErrorDisplay.stories.tsx
similarity index 55%
rename from frontend/src/Components/Error/Error.stories.tsx
rename to frontend/src/Components/ErrorDisplay/ErrorDisplay.stories.tsx
index 67ca825df..12c1c508e 100644
--- a/frontend/src/Components/Error/Error.stories.tsx
+++ b/frontend/src/Components/ErrorDisplay/ErrorDisplay.stories.tsx
@@ -1,13 +1,12 @@
 import type { ComponentStory } from '@storybook/react';
-// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
-import { Error } from './Error';
+import { ErrorDisplay } from './ErrorDisplay';
 
 export default {
   title: 'Components/Error',
-  comonent: Error,
+  comonent: ErrorDisplay,
 };
 
-const Template: ComponentStory<typeof Error> = (args) => <Error {...args} />;
+const Template: ComponentStory<typeof ErrorDisplay> = (args) => <ErrorDisplay {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/frontend/src/Components/Error/Error.tsx b/frontend/src/Components/ErrorDisplay/ErrorDisplay.tsx
similarity index 53%
rename from frontend/src/Components/Error/Error.tsx
rename to frontend/src/Components/ErrorDisplay/ErrorDisplay.tsx
index e990c93ca..ddbdc13ad 100644
--- a/frontend/src/Components/Error/Error.tsx
+++ b/frontend/src/Components/ErrorDisplay/ErrorDisplay.tsx
@@ -1,17 +1,17 @@
+import { H1 } from '~/Components';
 import type { Children } from '~/types';
-import styles from './Error.module.scss';
+import styles from './ErrorDisplay.module.scss';
 
-interface ErrorProps {
+interface ErrorDisplayProps {
   header: string;
   message: string;
   children?: Children;
 }
 
-// biome-ignore lint/suspicious/noShadowRestrictedNames:
-export function Error({ header, message, children }: ErrorProps) {
+export function ErrorDisplay({ header, message, children }: ErrorDisplayProps) {
   return (
     <div>
-      <h1 className={styles.header}>{header}</h1>
+      <H1>{header}</H1>
       <div className={styles.error_content}>
         <p className={styles.message}>{message}</p>
         {children}
diff --git a/frontend/src/Components/ErrorDisplay/index.ts b/frontend/src/Components/ErrorDisplay/index.ts
new file mode 100644
index 000000000..4bf4dbfcc
--- /dev/null
+++ b/frontend/src/Components/ErrorDisplay/index.ts
@@ -0,0 +1 @@
+export { ErrorDisplay } from './ErrorDisplay';
diff --git a/frontend/src/Components/EventQuery/EventQuery.tsx b/frontend/src/Components/EventQuery/EventQuery.tsx
index 402f268ec..6388f6154 100644
--- a/frontend/src/Components/EventQuery/EventQuery.tsx
+++ b/frontend/src/Components/EventQuery/EventQuery.tsx
@@ -5,8 +5,9 @@ import { getEventGroups, getVenues } from '~/api';
 import type { EventDto, EventGroupDto, VenueDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
 import type { SetState } from '~/types';
+import { lowerCapitalize } from '~/utils';
 import { Dropdown } from '../Dropdown';
-import type { DropDownOption } from '../Dropdown/Dropdown';
+import type { DropdownOption } from '../Dropdown/Dropdown';
 import styles from './EventQuery.module.scss';
 import { eventQuery } from './utils';
 
@@ -24,8 +25,8 @@ export function EventQuery({ allEvents, setEvents }: EventQueryProps) {
 
   // Search
   const [search, setSearch] = useState<string>('');
-  const [selectedVenue, setSelectedVenue] = useState<VenueDto>();
-  const [selectedEventGroup, setSelectedEventGroup] = useState<EventGroupDto>();
+  const [selectedVenue, setSelectedVenue] = useState<VenueDto | null>();
+  const [selectedEventGroup, setSelectedEventGroup] = useState<EventGroupDto | null>();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
@@ -37,19 +38,19 @@ export function EventQuery({ allEvents, setEvents }: EventQueryProps) {
       .catch(console.error);
   }, [allEvents]);
 
+  const venueOptions: DropdownOption<number | null>[] = venues.map((venue) => {
+    return { label: venue.name ?? '', value: venue.id } as DropdownOption<number>;
+  });
+
+  const eventGroupOptions: DropdownOption<number | null>[] = eventGroups.map((group) => {
+    return { label: group.name ?? '', value: group.id };
+  });
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     setEvents(eventQuery(allEvents, search, selectedVenue));
   }, [search, selectedVenue, selectedEventGroup]);
 
-  const venueOptions: DropDownOption<VenueDto>[] = venues.map((venue) => {
-    return { label: venue.name ?? '', value: venue };
-  });
-
-  const eventGroupOptions: DropDownOption<EventGroupDto>[] = eventGroups.map((group) => {
-    return { label: group.name ?? '', value: group };
-  });
-
   return (
     <div className={styles.queryBar}>
       <InputField
@@ -58,20 +59,18 @@ export function EventQuery({ allEvents, setEvents }: EventQueryProps) {
         labelClassName={styles.searchBar}
         icon="ic:baseline-search"
       />
-      <Dropdown<VenueDto | undefined>
+      <Dropdown
         options={venueOptions}
-        value={selectedVenue}
-        onChange={(venue) => setSelectedVenue(venue)}
+        onChange={(val) => setSelectedVenue(venues.find((v) => v.id === val))}
         className={styles.element}
-        defaultValue={{ label: `${t(KEY.common_choose)} ${t(KEY.common_venue)}`, value: undefined }}
+        nullOption={{ label: lowerCapitalize(`${t(KEY.common_choose)} ${t(KEY.common_venue)}`) }}
       />
 
-      <Dropdown<EventGroupDto | undefined>
+      <Dropdown
         options={eventGroupOptions}
-        value={selectedEventGroup}
-        onChange={(group) => setSelectedEventGroup(group)}
+        onChange={(val) => setSelectedEventGroup(eventGroups.find((eg) => eg.id === val))}
         className={styles.element}
-        defaultValue={{ label: `${t(KEY.common_choose)} ${t(KEY.event_type)}`, value: undefined }}
+        nullOption={{ label: lowerCapitalize(`${t(KEY.common_choose)} ${t(KEY.event_type)}`) }}
       />
     </div>
   );
diff --git a/frontend/src/Components/EventQuery/utils.ts b/frontend/src/Components/EventQuery/utils.ts
index de6ac3850..1f04c00c4 100644
--- a/frontend/src/Components/EventQuery/utils.ts
+++ b/frontend/src/Components/EventQuery/utils.ts
@@ -15,13 +15,11 @@ function toRepresentation(event: EventDto): string {
   `;
 }
 
-export function eventQuery(events: EventDto[], search: string, venue?: VenueDto): EventDto[] {
-  const searchMatch = queryDtoCustom(search, events, toRepresentation);
+export function eventQuery(events: EventDto[], search: string, venue?: VenueDto | null): EventDto[] {
+  let searchMatch = queryDtoCustom(search, events, toRepresentation);
   // Filter by venue
-  if (venue !== undefined) {
-    return searchMatch.filter((event) => {
-      return event.location.toLowerCase().includes(venue.name);
-    });
+  if (venue) {
+    searchMatch = searchMatch.filter((event) => event.location.toLowerCase().includes(venue.name.toLowerCase()));
   }
   return searchMatch;
 }
diff --git a/frontend/src/Components/Forms/Form.tsx b/frontend/src/Components/Forms/Form.tsx
index 79ede6c4e..012e3ed83 100644
--- a/frontend/src/Components/Forms/Form.tsx
+++ b/frontend/src/Components/Forms/Form.tsx
@@ -97,6 +97,15 @@ export const FormLabel = React.forwardRef<
 });
 FormLabel.displayName = 'FormLabel';
 
+export const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return <p ref={ref} id={formDescriptionId} className={classNames(styles.description, className)} {...props} />;
+  },
+);
+FormDescription.displayName = 'FormDescription';
+
 export const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
   ({ ...props }, ref) => {
     const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
diff --git a/frontend/src/Components/Forms/Forms.module.scss b/frontend/src/Components/Forms/Forms.module.scss
index 2d01d9a82..fcab496a0 100644
--- a/frontend/src/Components/Forms/Forms.module.scss
+++ b/frontend/src/Components/Forms/Forms.module.scss
@@ -10,3 +10,7 @@
   margin-bottom: 0;
   margin-top: 0.5rem;
 }
+
+.description {
+  font-size: 0.8rem;
+}
diff --git a/frontend/src/Components/Input/Input.module.scss b/frontend/src/Components/Input/Input.module.scss
index 10c43a170..541b45e61 100644
--- a/frontend/src/Components/Input/Input.module.scss
+++ b/frontend/src/Components/Input/Input.module.scss
@@ -2,7 +2,18 @@
 
 @import 'src/mixins';
 
-.input_field {
+.input[type="date"],
+.input[type="datetime-local"],
+.input[type="email"],
+.input[type="month"],
+.input[type="number"],
+.input[type="password"],
+.input[type="search"],
+.input[type="tel"],
+.input[type="text"],
+.input[type="time"],
+.input[type="url"],
+.input[type="week"] {
   @include rounded-lighter;
   padding: 0.75rem 1rem;
   border: 1px solid $grey-35;
@@ -17,6 +28,7 @@
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
     outline: 1px solid rgba(0, 0, 0, 0.1);
   }
+
   &.error {
     border: 1px solid $red;
   }
@@ -30,11 +42,13 @@
   }
 }
 
+/* stylelint-disable no-descending-specificity */
 // Hide up and down buttons unless hover/focus
-.number_input {
+.input[type="number"] {
   -webkit-appearance: textfield;
 
   &:hover, &:focus {
     -moz-appearance: initial;
   }
 }
+/* stylelint-enable no-descending-specificity */
diff --git a/frontend/src/Components/Input/Input.tsx b/frontend/src/Components/Input/Input.tsx
index 982c25a43..3bd48faca 100644
--- a/frontend/src/Components/Input/Input.tsx
+++ b/frontend/src/Components/Input/Input.tsx
@@ -2,23 +2,9 @@ import classNames from 'classnames';
 import * as React from 'react';
 import styles from './Input.module.scss';
 
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
-  onChange: (value: string | number | readonly string[] | null) => void;
-  value: string | number | readonly string[] | null | undefined;
-}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, onChange, value, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={classNames(styles.input_field, type === 'number' && styles.number_input, className)}
-        onChange={(event) => (type === 'number' ? onChange?.(+event.target.value) : onChange?.(event.target.value))}
-        ref={ref}
-        value={value === null ? '' : value}
-        {...props}
-      />
-    );
-  },
-);
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return <input ref={ref} type={type} className={classNames(styles.input, className)} {...props} />;
+});
 Input.displayName = 'Input';
diff --git a/frontend/src/Components/IsfitOutlet/IsfitNavbar.tsx b/frontend/src/Components/IsfitOutlet/IsfitNavbar.tsx
new file mode 100644
index 000000000..703e2dd3a
--- /dev/null
+++ b/frontend/src/Components/IsfitOutlet/IsfitNavbar.tsx
@@ -0,0 +1,9 @@
+import { IsfitLogo } from '../Logo/components';
+
+export function IsfitNavbar() {
+  return (
+    <div>
+      <IsfitLogo color="light" size="small" />
+    </div>
+  );
+}
diff --git a/frontend/src/Components/IsfitOutlet/IsfitOutlet.module.scss b/frontend/src/Components/IsfitOutlet/IsfitOutlet.module.scss
new file mode 100644
index 000000000..c7d2f84fe
--- /dev/null
+++ b/frontend/src/Components/IsfitOutlet/IsfitOutlet.module.scss
@@ -0,0 +1,3 @@
+.deleteme {
+  color: red;
+}
diff --git a/frontend/src/Components/IsfitOutlet/IsfitOutlet.tsx b/frontend/src/Components/IsfitOutlet/IsfitOutlet.tsx
new file mode 100644
index 000000000..c1a7cd52d
--- /dev/null
+++ b/frontend/src/Components/IsfitOutlet/IsfitOutlet.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import { IsfitNavbar } from './IsfitNavbar';
+import styles from './IsfitOutlet.module.scss';
+
+export function IsfitOutlet() {
+  return (
+    <>
+      <IsfitNavbar />
+      <div className={styles.navbar_outlet}>
+        <Outlet />
+      </div>
+      {/* <Footer /> */}
+    </>
+  );
+}
diff --git a/frontend/src/Components/IsfitOutlet/index.ts b/frontend/src/Components/IsfitOutlet/index.ts
new file mode 100644
index 000000000..3f87c4a3f
--- /dev/null
+++ b/frontend/src/Components/IsfitOutlet/index.ts
@@ -0,0 +1 @@
+export { IsfitOutlet } from './IsfitOutlet';
diff --git a/frontend/src/Components/MiniCalendar/MiniCalendar.module.scss b/frontend/src/Components/MiniCalendar/MiniCalendar.module.scss
index a1ca6fe6f..2d612aa69 100644
--- a/frontend/src/Components/MiniCalendar/MiniCalendar.module.scss
+++ b/frontend/src/Components/MiniCalendar/MiniCalendar.module.scss
@@ -5,7 +5,7 @@
 .container {
   padding: 10px;
   border-radius: 10px;
-  width: 300px;
+  width: 260px;
 }
 
 .label {
@@ -21,16 +21,17 @@
   text-align: center;
   justify-items: center;
   align-items: center;
+  gap: 0.5rem 0;
 }
 
 .days_header {
   font-weight: 500;
   font-size: 0.9rem;
   text-transform: capitalize;
-  border-bottom: 1px solid $grey-3;
   padding: 0.25rem 0;
   user-select: none;
   color: $grey-2;
+  margin-bottom: 0.25rem;
 
   @include theme-dark {
     color: $grey-2;
@@ -41,21 +42,27 @@
   background: none;
   border: none;
   font-family: inherit;
-  font-size: inherit;
+  font-size: 0.875rem;
   height: 2rem;
   width: 2rem;
-  border-radius: 1.5rem;
+  border-radius: 0.25rem;
   color: $grey-0;
   cursor: pointer;
   position: relative;
 
+  &:not(.disabled_day, .selected_day):hover {
+    background: $grey-4;
+    color: $grey-0;
+  }
+
   @include theme-dark {
     color: $grey-4;
-  }
 
-  &:not(.disabled_day):hover {
-    background: $red-samf;
-    color: $white;
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:not(.disabled_day, .selected_day):hover {
+      background: $grey-0;
+      color: $grey-4;
+    }
   }
 }
 
@@ -115,6 +122,6 @@
   color: $grey-3;
 
   @include theme-dark {
-    color: $grey-2;
+    color: $grey-1;
   }
 }
diff --git a/frontend/src/Components/MiniCalendar/MiniCalendar.tsx b/frontend/src/Components/MiniCalendar/MiniCalendar.tsx
index ab30a15d1..eec6e4ac1 100644
--- a/frontend/src/Components/MiniCalendar/MiniCalendar.tsx
+++ b/frontend/src/Components/MiniCalendar/MiniCalendar.tsx
@@ -129,8 +129,10 @@ export function MiniCalendar({
                 [styles.selected_day]: isSelected,
               })}
               onClick={() => {
-                onChange?.(d);
-                setSelectedDate(d);
+                // If we click the currently selected date, deselect it
+                const newDate = isSelected ? null : d;
+                onChange?.(newDate);
+                setSelectedDate(newDate);
               }}
               disabled={!valid}
             >
diff --git a/frontend/src/Components/MultiSelect/MultiSelect.tsx b/frontend/src/Components/MultiSelect/MultiSelect.tsx
index 386bdb2e8..8e6d2d3dc 100644
--- a/frontend/src/Components/MultiSelect/MultiSelect.tsx
+++ b/frontend/src/Components/MultiSelect/MultiSelect.tsx
@@ -1,12 +1,12 @@
 import { Icon } from '@iconify/react';
 import classNames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Input } from '~/Components';
 import { useDesktop } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { Button } from '../Button';
-import type { DropDownOption } from '../Dropdown/Dropdown';
+import type { DropdownOption } from '../Dropdown/Dropdown';
 import styles from './MultiSelect.module.scss';
 import { SelectBox } from './SelectBox';
 import { exists, searchFilter } from './utils';
@@ -14,8 +14,8 @@ import { exists, searchFilter } from './utils';
 type MultiSelectProps<T> = {
   optionsLabel?: string;
   selectedLabel?: string;
-  selected?: DropDownOption<T>[];
-  options?: DropDownOption<T>[];
+  selected?: DropdownOption<T>[];
+  options?: DropdownOption<T>[];
   onChange?: (values: T[]) => void;
   className?: string;
 };
@@ -24,19 +24,15 @@ type MultiSelectProps<T> = {
  * `options`: All possible options that can be selected.
  * `selected`: Selected values if state is managed outside this component.
  */
-export function MultiSelect<T>({
-  optionsLabel,
-  selectedLabel,
-  className,
-  selected: initialValues = [],
-  options = [],
-  onChange,
-}: MultiSelectProps<T>) {
+function MultiSelectInner<T>(
+  { optionsLabel, selectedLabel, className, selected: initialValues = [], options = [], onChange }: MultiSelectProps<T>,
+  ref: React.Ref<HTMLDivElement>,
+) {
   const { t } = useTranslation();
   const isDesktop = useDesktop();
 
   const [search, setSearch] = useState('');
-  const [selected, setSelected] = useState<DropDownOption<T>[]>(initialValues);
+  const [selected, setSelected] = useState<DropdownOption<T>[]>(initialValues);
 
   const filteredOptions = useMemo(
     () => options.filter((item) => searchFilter(item, search)).filter((item) => !exists(item, selected)),
@@ -49,11 +45,11 @@ export function MultiSelect<T>({
     onChange?.(selected.map((item) => item.value));
   }, [selected, onChange]);
 
-  function selectItem(item: DropDownOption<T>) {
+  function selectItem(item: DropdownOption<T>) {
     setSelected((selected) => [...selected, item]);
   }
 
-  function unselectItem(item: DropDownOption<T>) {
+  function unselectItem(item: DropdownOption<T>) {
     setSelected((selected) => selected.filter((_item) => _item !== item));
   }
 
@@ -66,10 +62,10 @@ export function MultiSelect<T>({
   }
 
   return (
-    <div className={classNames(styles.container, className)}>
+    <div className={classNames(styles.container, className)} ref={ref}>
       <Input
         type="text"
-        onChange={(e) => setSearch(e as string)}
+        onChange={(e) => setSearch(e.target.value)}
         value={search}
         placeholder={`${t(KEY.common_search)}...`}
         className={styles.search_input}
@@ -94,3 +90,8 @@ export function MultiSelect<T>({
     </div>
   );
 }
+
+export const MultiSelect = React.forwardRef(MultiSelectInner) as <T>(
+  props: MultiSelectProps<T> & { ref?: React.Ref<HTMLDivElement> },
+) => ReturnType<typeof MultiSelectInner>;
+(MultiSelect as React.ForwardRefExoticComponent<unknown>).displayName = 'MultiSelect';
diff --git a/frontend/src/Components/MultiSelect/SelectBox.tsx b/frontend/src/Components/MultiSelect/SelectBox.tsx
index 7422360c9..555097300 100644
--- a/frontend/src/Components/MultiSelect/SelectBox.tsx
+++ b/frontend/src/Components/MultiSelect/SelectBox.tsx
@@ -1,12 +1,12 @@
 import { Button } from '~/Components';
 import type { ButtonTheme } from '~/Components/Button';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import styles from './SelectBox.module.scss';
 
 type Props<T> = {
-  items: DropDownOption<T>[];
+  items: DropdownOption<T>[];
   label?: string;
-  onItemClick?: (item: DropDownOption<T>) => void;
+  onItemClick?: (item: DropdownOption<T>) => void;
   itemButtonTheme?: ButtonTheme;
 };
 
diff --git a/frontend/src/Components/MultiSelect/utils.ts b/frontend/src/Components/MultiSelect/utils.ts
index 1cad05988..380368187 100644
--- a/frontend/src/Components/MultiSelect/utils.ts
+++ b/frontend/src/Components/MultiSelect/utils.ts
@@ -1,9 +1,9 @@
-import type { DropDownOption } from '../Dropdown/Dropdown';
+import type { DropdownOption } from '../Dropdown/Dropdown';
 
-export function searchFilter<T>(item: DropDownOption<T>, q: string): boolean {
+export function searchFilter<T>(item: DropdownOption<T>, q: string): boolean {
   return item.label.toLowerCase().includes(q.toLowerCase());
 }
 
-export function exists<T>(item: DropDownOption<T>, items: DropDownOption<T>[]): boolean {
+export function exists<T>(item: DropdownOption<T>, items: DropdownOption<T>[]): boolean {
   return items.some((_item) => _item.value === item.value);
 }
diff --git a/frontend/src/Components/Navbar/Navbar.module.scss b/frontend/src/Components/Navbar/Navbar.module.scss
index 5c8c3a80c..4a2ecb3dc 100644
--- a/frontend/src/Components/Navbar/Navbar.module.scss
+++ b/frontend/src/Components/Navbar/Navbar.module.scss
@@ -1,7 +1,6 @@
 /* stylelint-disable function-comma-space-after */
 /* stylelint-disable selector-max-compound-selectors */
 /* stylelint-disable selector-max-class */
-/* stylelint-disable max-nesting-depth */
 /* TODO: fix later */
 
 @import 'src/mixins';
diff --git a/frontend/src/Components/Navbar/components/HamburgerMenu/HamburgerMenu.module.scss b/frontend/src/Components/Navbar/components/HamburgerMenu/HamburgerMenu.module.scss
index d7c48c88a..024718c1b 100644
--- a/frontend/src/Components/Navbar/components/HamburgerMenu/HamburgerMenu.module.scss
+++ b/frontend/src/Components/Navbar/components/HamburgerMenu/HamburgerMenu.module.scss
@@ -1,5 +1,4 @@
 /* stylelint-disable selector-max-class */
-/* stylelint-disable max-nesting-depth */
 @import 'src/mixins';
 
 @import 'src/constants';
diff --git a/frontend/src/Components/NumberInput/NumberInput.tsx b/frontend/src/Components/NumberInput/NumberInput.tsx
new file mode 100644
index 000000000..4b9b4cce5
--- /dev/null
+++ b/frontend/src/Components/NumberInput/NumberInput.tsx
@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { Input, type InputProps } from '~/Components';
+
+export interface NumberInputProps extends Omit<InputProps, 'onChange'> {
+  onChange?: (...event: unknown[]) => void;
+  allowDecimal?: boolean;
+}
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  ({ onChange, value, type, allowDecimal = true, ...props }, ref) => {
+    const [inputValue, setInputValue] = useState(value || '');
+
+    useEffect(() => {
+      setInputValue(value || '');
+    }, [value]);
+
+    function isValidPartial(s: string) {
+      // Allows for partial inputs like "-" or "1."
+      const re = allowDecimal ? /^-?[0-9]*\.?[0-9]*$/ : /^-?[0-9]*$/;
+      return re.test(s);
+    }
+
+    function previewAfterInsert(input: HTMLInputElement, data: string) {
+      const val = input.value;
+      const start = input.selectionStart || 0;
+      const end = input.selectionEnd || 0;
+
+      return val.slice(0, start) + data + val.slice(end);
+    }
+
+    function previewAfterDelete(input: HTMLInputElement, isBackspace: boolean) {
+      const val = input.value;
+      const start = input.selectionStart || 0;
+      const end = input.selectionEnd || 0;
+
+      if (start !== end) {
+        // Range selected, delete selection
+        return val.slice(0, start) + val.slice(end);
+      }
+
+      if (isBackspace) {
+        // No selection, single char deletion
+        return val.slice(0, start - 1) + val.slice(start);
+      }
+      return val.slice(0, start) + val.slice(start + 1);
+    }
+
+    function onBeforeInput(e: React.FormEvent<HTMLInputElement>) {
+      const event = e as React.CompositionEvent<HTMLInputElement>;
+      if (!event.data) {
+        return;
+      }
+      const preview = previewAfterInsert(event.currentTarget, event.data);
+      if (!isValidPartial(preview)) {
+        e.preventDefault();
+        return;
+      }
+    }
+
+    function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        const preview = previewAfterDelete(event.currentTarget, event.key === 'Backspace');
+        if (!isValidPartial(preview)) {
+          event.preventDefault();
+          return;
+        }
+      }
+
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault();
+        const add = event.key === 'ArrowUp' ? 1 : -1;
+        const newVal = (Number(inputValue) || 0) + add;
+        if (!Number.isNaN(newVal)) {
+          setInputValue(newVal);
+          onChange?.(newVal);
+        }
+      }
+    }
+
+    function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
+      const val = event.target.value;
+      if (isValidPartial(val)) {
+        setInputValue(val);
+      }
+      // This ensures we don't send partially valid inputs
+      const num = Number(val);
+      if (!Number.isNaN(num)) {
+        onChange?.(num);
+      }
+    }
+
+    return (
+      <Input
+        type="text"
+        inputMode="numeric"
+        pattern={allowDecimal ? '-?[0-9]*.?[0-9]+' : '-?[0-9]+'}
+        ref={ref}
+        value={inputValue}
+        onKeyDown={onKeyDown}
+        onBeforeInput={onBeforeInput}
+        onChange={handleOnChange}
+        {...props}
+      />
+    );
+  },
+);
+NumberInput.displayName = 'NumberInput';
diff --git a/frontend/src/Components/NumberInput/index.ts b/frontend/src/Components/NumberInput/index.ts
new file mode 100644
index 000000000..2e1d6a399
--- /dev/null
+++ b/frontend/src/Components/NumberInput/index.ts
@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput';
diff --git a/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.module.scss b/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.module.scss
index b5e9957fa..4fafd89eb 100644
--- a/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.module.scss
+++ b/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.module.scss
@@ -23,25 +23,26 @@
 .interviewField {
   display: flex;
   justify-content: center;
-  background-color: $pending;
+  background-color: $white;
 }
 
 .header {
-  font-size: 0.7em;
-  background-color: $grey-3;
-  color: $black;
+  font-size: 1.0em;
+  background-color: $red-samf;
+  padding: 0.5em 0.8em;
+  color: $white;
   &:hover {
-    background-color: $grey-2;
-    color: $black;
+    background-color: $red_samf_hover;
+    color: $white;
   }
 }
 
 .rows {
-  padding: 0.1em 0.2em;
+  padding: 0.2em 0.8em;
 }
 
 .pending {
-  background-color: $pending;
+  background-color: $white;
 }
 
 .top_reserve {
@@ -82,6 +83,11 @@
 }
 
 .tableRow {
-  border-color: $grey-3;
+  border-color: $grey-35;
   border-width: 0.01em;
 }
+
+.crud {
+  display: flex;
+  justify-content: center;
+}
diff --git a/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.tsx b/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.tsx
index 11cfe544b..23103e743 100644
--- a/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.tsx
+++ b/frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { InputField, TimeDisplay } from '~/Components';
 import { CrudButtons } from '~/Components/CrudButtons/CrudButtons';
-import { type DropDownOption, Dropdown } from '~/Components/Dropdown/Dropdown';
+import { Dropdown, type DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { Table } from '~/Components/Table';
 import { Text } from '~/Components/Text/Text';
 import { putRecruitmentApplicationForGang } from '~/api';
@@ -24,14 +24,14 @@ type RecruitmentApplicantsStatusProps = {
 };
 
 // TODO add backend to fetch these
-const priorityOptions: DropDownOption<number>[] = [
+const priorityOptions: DropdownOption<number>[] = [
   { label: 'Not Set', value: 0 },
   { label: 'Reserve', value: 1 },
   { label: 'Wanted', value: 2 },
   { label: 'Not Wanted', value: 3 },
 ];
 
-const statusOptions: DropDownOption<number>[] = [
+const statusOptions: DropdownOption<number>[] = [
   { label: 'Nothing', value: 0 },
   { label: 'Called and accepted', value: 1 },
   { label: 'Called and rejected', value: 2 },
@@ -57,13 +57,13 @@ export function RecruitmentApplicantsStatus({
   const navigate = useCustomNavigate();
 
   const tableColumns = [
-    { content: t(KEY.recruitment_applicant), sortable: true, hideSortButton: true },
-    { content: t(KEY.recruitment_priority), sortable: true, hideSortButton: true },
+    { content: t(KEY.recruitment_applicant), sortable: true, hideSortButton: false },
+    { content: t(KEY.recruitment_priority), sortable: true, hideSortButton: false },
     { content: t(KEY.recruitment_interview_set), sortable: false, hideSortButton: true },
-    { content: t(KEY.recruitment_interview_time), sortable: true, hideSortButton: true },
-    { content: t(KEY.recruitment_interview_location), sortable: true, hideSortButton: true },
-    { content: t(KEY.recruitment_recruiter_priority), sortable: true, hideSortButton: true },
-    { content: t(KEY.recruitment_recruiter_status), sortable: true, hideSortButton: true },
+    { content: t(KEY.recruitment_interview_time), sortable: true, hideSortButton: false },
+    { content: t(KEY.recruitment_interview_location), sortable: true, hideSortButton: false },
+    { content: t(KEY.recruitment_recruiter_priority), sortable: true, hideSortButton: false },
+    { content: t(KEY.recruitment_recruiter_status), sortable: true, hideSortButton: false },
     { content: t(KEY.recruitment_interview_notes), sortable: false, hideSortButton: true },
   ];
 
@@ -131,7 +131,7 @@ export function RecruitmentApplicantsStatus({
           content: (
             <SetInterviewManuallyModal
               recruitmentId={Number(recruitmentId) || 0}
-              isButtonRounded={true}
+              isButtonRounded={false}
               application={application}
               onSetInterview={onInterviewChange}
             />
@@ -186,25 +186,27 @@ export function RecruitmentApplicantsStatus({
         {
           style: applicationStatusStyle,
           content: (
-            <CrudButtons
-              onView={
-                application.interview?.interview_time != null
-                  ? () => {
-                      navigate({
-                        url: reverse({
-                          pattern: ROUTES.frontend.admin_recruitment_gang_position_applicants_interview_notes,
-                          urlParams: {
-                            recruitmentId: recruitmentId,
-                            gangId: gangId,
-                            positionId: positionId,
-                            interviewId: application.interview?.id,
-                          },
-                        }),
-                      });
-                    }
-                  : undefined
-              }
-            />
+            <div className={styles.crud}>
+              <CrudButtons
+                onView={
+                  application.interview?.interview_time != null
+                    ? () => {
+                        navigate({
+                          url: reverse({
+                            pattern: ROUTES.frontend.admin_recruitment_gang_position_applicants_interview_notes,
+                            urlParams: {
+                              recruitmentId: recruitmentId,
+                              gangId: gangId,
+                              positionId: positionId,
+                              interviewId: application.interview?.id,
+                            },
+                          }),
+                        });
+                      }
+                    : undefined
+                }
+              />
+            </div>
           ),
         },
       ],
diff --git a/frontend/src/Components/RootErrorBoundary/RootErrorBoundary.module.scss b/frontend/src/Components/RootErrorBoundary/RootErrorBoundary.module.scss
new file mode 100644
index 000000000..d6408c820
--- /dev/null
+++ b/frontend/src/Components/RootErrorBoundary/RootErrorBoundary.module.scss
@@ -0,0 +1,14 @@
+@import 'src/constants';
+
+@import 'src/mixins';
+
+.container {
+  width: $primary-content-width-wide;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 2rem 0.75rem;
+
+  @include for-desktop-up {
+    padding: 6rem 4rem;
+  }
+}
diff --git a/frontend/src/Components/RootErrorBoundary/RootErrorBoundary.tsx b/frontend/src/Components/RootErrorBoundary/RootErrorBoundary.tsx
new file mode 100644
index 000000000..9dd58cefc
--- /dev/null
+++ b/frontend/src/Components/RootErrorBoundary/RootErrorBoundary.tsx
@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import { ErrorDisplay } from '~/Components';
+import { KEY } from '~/i18n/constants';
+import styles from './RootErrorBoundary.module.scss';
+
+export function RootErrorBoundary() {
+  const { t } = useTranslation();
+  const error = useRouteError();
+
+  let errorDisplay = <ErrorDisplay header={t(KEY.error_generic)} message={t(KEY.error_generic_description)} />;
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 404) {
+      errorDisplay = <ErrorDisplay header={t(KEY.error_not_found)} message={t(KEY.error_not_found_description)} />;
+    }
+    if (error.status === 403) {
+      errorDisplay = <ErrorDisplay header={t(KEY.error_forbidden)} message={t(KEY.error_forbidden_description)} />;
+    }
+    if (error.status === 500) {
+      errorDisplay = (
+        <ErrorDisplay header={t(KEY.error_server_error)} message={t(KEY.error_server_error_description)} />
+      );
+    }
+  }
+
+  return <div className={styles.container}>{errorDisplay}</div>;
+}
diff --git a/frontend/src/Components/RootErrorBoundary/index.ts b/frontend/src/Components/RootErrorBoundary/index.ts
new file mode 100644
index 000000000..8439a2010
--- /dev/null
+++ b/frontend/src/Components/RootErrorBoundary/index.ts
@@ -0,0 +1 @@
+export { RootErrorBoundary } from './RootErrorBoundary';
diff --git a/frontend/src/Components/SamfOutlet/SamfOutlet.tsx b/frontend/src/Components/SamfOutlet/SamfOutlet.tsx
index 70419d4b5..54ac1a888 100644
--- a/frontend/src/Components/SamfOutlet/SamfOutlet.tsx
+++ b/frontend/src/Components/SamfOutlet/SamfOutlet.tsx
@@ -1,15 +1,22 @@
+import type { ReactNode } from 'react';
 import { Outlet } from 'react-router-dom';
 import { Navbar } from '~/Components/Navbar';
 import { Footer } from '../Footer';
 import styles from './SamfOutlet.module.scss';
 
 export function SamfOutlet() {
+  return (
+    <SamfLayout>
+      <Outlet />
+    </SamfLayout>
+  );
+}
+
+export function SamfLayout({ children }: { children: ReactNode }) {
   return (
     <>
       <Navbar />
-      <div className={styles.navbar_outlet}>
-        <Outlet />
-      </div>
+      <div className={styles.navbar_outlet}>{children}</div>
       <Footer />
     </>
   );
diff --git a/frontend/src/Components/SetInterviewManually/SetInterviewManually.module.scss b/frontend/src/Components/SetInterviewManually/SetInterviewManually.module.scss
index dbcbdb6ae..db6fcac59 100644
--- a/frontend/src/Components/SetInterviewManually/SetInterviewManually.module.scss
+++ b/frontend/src/Components/SetInterviewManually/SetInterviewManually.module.scss
@@ -9,6 +9,12 @@
   padding: 0.5em;
 }
 
+.set_interview_button {
+  width: 94%;
+  font-size: small;
+  padding: 8px 17px;
+}
+
 .date_container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
diff --git a/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx b/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx
index bc5142eb6..ba021575b 100644
--- a/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx
+++ b/frontend/src/Components/SetInterviewManually/SetInterviewManuallyModal.tsx
@@ -26,7 +26,12 @@ export function SetInterviewManuallyModal({
 
   return (
     <>
-      <Button theme="samf" rounded={isButtonRounded} onClick={() => setOpen(true)}>
+      <Button
+        theme="samf"
+        rounded={isButtonRounded}
+        onClick={() => setOpen(true)}
+        className={styles.set_interview_button}
+      >
         {t(KEY.recruitment_interview_set)}
       </Button>
 
diff --git a/frontend/src/Components/TabBar/TabBar.module.scss b/frontend/src/Components/TabBar/TabBar.module.scss
index 60918346d..b3d6dbe7b 100644
--- a/frontend/src/Components/TabBar/TabBar.module.scss
+++ b/frontend/src/Components/TabBar/TabBar.module.scss
@@ -43,7 +43,6 @@
   border: none;
   border-bottom: 3px solid transparent;
 
-  /* stylelint-disable-next-line max-nesting-depth */
   @include theme-dark {
     color: white;
   }
@@ -54,7 +53,6 @@
     color: $blue;
     box-shadow: inset 0 0 1px 1.5px rgba(0, 0, 0, 0.15);
 
-    /* stylelint-disable-next-line max-nesting-depth */
     @include theme-dark {
       border-bottom: 3px solid $white;
       background-color: $grey-2;
diff --git a/frontend/src/Components/Table/Table.module.scss b/frontend/src/Components/Table/Table.module.scss
index cbbd3d0bf..3c98d8871 100644
--- a/frontend/src/Components/Table/Table.module.scss
+++ b/frontend/src/Components/Table/Table.module.scss
@@ -2,7 +2,7 @@
 
 @import 'src/mixins';
 
-/* stylelint-disable selector-max-combinators, selector-max-compound-selectors, selector-max-type, max-nesting-depth */
+/* stylelint-disable selector-max-combinators, selector-max-compound-selectors, selector-max-type */
 
 // Backgrounds
 $table-bg: #ffffff;
diff --git a/frontend/src/Components/TimeslotContainer/TimeslotContainer.module.scss b/frontend/src/Components/TimeslotContainer/TimeslotContainer.module.scss
index 9674f6298..a44ddc21b 100644
--- a/frontend/src/Components/TimeslotContainer/TimeslotContainer.module.scss
+++ b/frontend/src/Components/TimeslotContainer/TimeslotContainer.module.scss
@@ -11,5 +11,5 @@
 .timeslots {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
diff --git a/frontend/src/Components/TimeslotContainer/TimeslotContainer.tsx b/frontend/src/Components/TimeslotContainer/TimeslotContainer.tsx
index 388531b2b..3a9ae63f5 100644
--- a/frontend/src/Components/TimeslotContainer/TimeslotContainer.tsx
+++ b/frontend/src/Components/TimeslotContainer/TimeslotContainer.tsx
@@ -157,7 +157,11 @@ export function TimeslotContainer({
               key={timeslot}
               active={active}
               disabled={disabled || false}
-              onMouseDown={() => {
+              onMouseDown={(event) => {
+                if (event.button !== 0) {
+                  // Ignore if not primary mouse button
+                  return;
+                }
                 toggleTimeslot(selectedDate, timeslot);
                 setDragSetSelected(!active);
               }}
diff --git a/frontend/src/Components/TimeslotContainer/components/TimeslotButton/TimeslotButton.module.scss b/frontend/src/Components/TimeslotContainer/components/TimeslotButton/TimeslotButton.module.scss
index 49fc7ce95..f4004c7a5 100644
--- a/frontend/src/Components/TimeslotContainer/components/TimeslotButton/TimeslotButton.module.scss
+++ b/frontend/src/Components/TimeslotContainer/components/TimeslotButton/TimeslotButton.module.scss
@@ -5,8 +5,8 @@
 .timeslot {
   padding: 0.5rem 1rem;
   border-radius: 5px;
-  border: 1px solid $grey-0;
-  color: $grey-0;
+  border: 1px solid $grey-35;
+  color: inherit;
   cursor: pointer;
   background: none;
   position: relative;
@@ -15,6 +15,12 @@
   gap: 0.25rem;
   font-size: 0.9rem;
   font-weight: 500;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  @include theme-dark {
+    border-color: $grey-0;
+    color: $grey-35;
+  }
 }
 
 .dot {
@@ -23,7 +29,11 @@
   height: $size;
   border-radius: $size;
   display: inline-block;
-  background: $grey-0;
+  border: 1px solid $grey-0;
+
+  @include theme-dark {
+    border-color: $grey-2;
+  }
 }
 
 .timeslot_active {
@@ -32,6 +42,12 @@
 
   .dot {
     background: $red;
+    border-color: $red;
+  }
+
+  @include theme-dark {
+    color: $red;
+    border-color: $red;
   }
 }
 
diff --git a/frontend/src/Components/UkaOutlet/UkaNavbar.tsx b/frontend/src/Components/UkaOutlet/UkaNavbar.tsx
new file mode 100644
index 000000000..90c4c1a31
--- /dev/null
+++ b/frontend/src/Components/UkaOutlet/UkaNavbar.tsx
@@ -0,0 +1,9 @@
+import { UkaLogo } from '../Logo/components';
+
+export function UkaNavbar() {
+  return (
+    <div>
+      <UkaLogo color="light" size="small" />
+    </div>
+  );
+}
diff --git a/frontend/src/Components/UkaOutlet/UkaOutlet.module.scss b/frontend/src/Components/UkaOutlet/UkaOutlet.module.scss
new file mode 100644
index 000000000..c7d2f84fe
--- /dev/null
+++ b/frontend/src/Components/UkaOutlet/UkaOutlet.module.scss
@@ -0,0 +1,3 @@
+.deleteme {
+  color: red;
+}
diff --git a/frontend/src/Components/UkaOutlet/UkaOutlet.tsx b/frontend/src/Components/UkaOutlet/UkaOutlet.tsx
new file mode 100644
index 000000000..8ced1ff5b
--- /dev/null
+++ b/frontend/src/Components/UkaOutlet/UkaOutlet.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import { UkaNavbar } from './UkaNavbar';
+import styles from './UkaOutlet.module.scss';
+
+export function UkaOutlet() {
+  return (
+    <>
+      <UkaNavbar />
+      <div className={styles.navbar_outlet}>
+        <Outlet />
+      </div>
+      {/* <Footer /> */}
+    </>
+  );
+}
diff --git a/frontend/src/Components/UkaOutlet/index.ts b/frontend/src/Components/UkaOutlet/index.ts
new file mode 100644
index 000000000..2a81e1fdd
--- /dev/null
+++ b/frontend/src/Components/UkaOutlet/index.ts
@@ -0,0 +1 @@
+export { UkaOutlet } from './UkaOutlet';
diff --git a/frontend/src/Components/index.ts b/frontend/src/Components/index.ts
index 385a98598..c63343384 100644
--- a/frontend/src/Components/index.ts
+++ b/frontend/src/Components/index.ts
@@ -12,8 +12,9 @@ export { CommandMenu } from './CommandMenu';
 export { ContentCard } from './ContentCard';
 export { Countdown } from './Countdown';
 export { CrudButtons } from './CrudButtons';
+export { DatePicker } from './DatePicker';
 export { Dropdown } from './Dropdown';
-export { Error } from './Error';
+export { ErrorDisplay } from './ErrorDisplay';
 export { EventCard } from './EventCard';
 export { EventQuery } from './EventQuery';
 export { ExpandableHeader } from './ExpandableHeader';
@@ -36,6 +37,7 @@ export { InputField } from './InputField';
 export { InputFile } from './InputFile';
 export { InputTime } from './InputTime';
 export { InterviewFormModal } from './InterviewForm';
+export { IsfitOutlet } from './IsfitOutlet';
 export { Link } from './Link';
 export { List } from './List';
 export { Logo } from './Logo';
@@ -43,6 +45,7 @@ export { MiniCalendar } from './MiniCalendar';
 export { Modal } from './Modal';
 export { Navbar } from './Navbar';
 export { NotificationBadge } from './NotificationBadge';
+export { NumberInput } from './NumberInput';
 export { OccupiedForm, OccupiedFormModal } from './OccupiedForm';
 export { OpeningHours } from './OpeningHours';
 export { Page } from './Page';
@@ -54,6 +57,7 @@ export { PulseEffect } from './PulseEffect';
 export { RadioButton } from './RadioButton';
 export { RecruitmentApplicantsStatus } from './RecruitmentApplicantsStatus';
 export { RecruitmentWithoutInterviewTable } from './RecruitmentWithoutInterviewTable';
+export { RootErrorBoundary } from './RootErrorBoundary';
 export { SamfOutlet } from './SamfOutlet';
 export { SamfundetLogo } from './SamfundetLogo';
 export { SamfundetLogoSpinner } from './SamfundetLogoSpinner';
@@ -79,6 +83,7 @@ export { TimeDuration } from './TimeDuration';
 export { TimeslotContainer } from './TimeslotContainer';
 export { ToggleSwitch } from './ToggleSwitch';
 export { ToolTip } from './ToolTip';
+export { UkaOutlet } from './UkaOutlet';
 export { UserFeedback } from './UserFeedback';
 export { Video } from './Video';
 
diff --git a/frontend/src/Forms/SamfForm.stories.tsx b/frontend/src/Forms/SamfForm.stories.tsx
index 9ec674383..705561876 100644
--- a/frontend/src/Forms/SamfForm.stories.tsx
+++ b/frontend/src/Forms/SamfForm.stories.tsx
@@ -1,5 +1,5 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { AuthContextProvider } from '~/context/AuthContext';
 import { SamfForm, type SamfFormProps } from './SamfForm';
 import { SamfFormField } from './SamfFormField';
@@ -28,7 +28,7 @@ function validate69(values: BasicFormProps) {
   return 'Tallet må være 69';
 }
 
-const options: DropDownOption<string>[] = [
+const options: DropdownOption<string>[] = [
   { label: 'Option 1', value: 'Option 1' },
   { label: 'Option 2', value: 'Option 2' },
 ];
diff --git a/frontend/src/Forms/SamfFormField.tsx b/frontend/src/Forms/SamfFormField.tsx
index 25299b3eb..ecb057e7c 100644
--- a/frontend/src/Forms/SamfFormField.tsx
+++ b/frontend/src/Forms/SamfFormField.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { KEY } from '~/i18n/constants';
 import {
   type FormType,
@@ -72,8 +72,8 @@ export type SamfFormFieldProps<U extends T[keyof T], T extends FormType> = {
   hidden?: boolean;
   validator?: (state: T) => SamfError;
   // Dropdown
-  options?: DropDownOption<unknown>[];
-  defaultOption?: DropDownOption<unknown>;
+  options?: DropdownOption<unknown>[];
+  defaultOption?: DropdownOption<unknown>;
   onChange?: (value: U) => void;
   props?: FieldProps;
 };
diff --git a/frontend/src/Forms/SamfFormFieldTypes.tsx b/frontend/src/Forms/SamfFormFieldTypes.tsx
index 78ff91312..13e4edd78 100644
--- a/frontend/src/Forms/SamfFormFieldTypes.tsx
+++ b/frontend/src/Forms/SamfFormFieldTypes.tsx
@@ -12,7 +12,7 @@ import {
   PhoneNumberField,
   TextAreaField,
 } from '~/Components';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { ImagePicker, type ImagePickerProps } from '~/Components/ImagePicker/ImagePicker';
 import type { InputFieldType } from '~/Components/InputField/InputField';
 import type { InputFileType } from '~/Components/InputFile/InputFile';
@@ -31,7 +31,7 @@ export type FormFieldReturnType =
   | string
   | number
   | boolean
-  | DropDownOption<unknown>
+  | DropdownOption<unknown>
   | ImageDto
   | Date
   | File
@@ -78,8 +78,8 @@ export type SamfFormFieldArgs<T extends FormFieldReturnType> = {
   error: SamfError;
   label?: string; // Text label above the input
   // Custom args for options type
-  defaultOption?: DropDownOption<unknown>;
-  options?: DropDownOption<unknown>[];
+  defaultOption?: DropdownOption<unknown>;
+  options?: DropdownOption<unknown>[];
   props?: FieldProps;
 };
 
@@ -187,9 +187,10 @@ function makeCheckboxInput(args: SamfFormFieldArgs<boolean>) {
 
 // Options dropdown input
 // # issue 1090
-function makeOptionsInput(args: SamfFormFieldArgs<DropDownOption<unknown>>) {
+function makeOptionsInput(args: SamfFormFieldArgs<DropdownOption<unknown>>) {
   const errorBoolean = args.error !== false && args.error !== undefined;
   return (
+    // @ts-ignore
     <Dropdown<unknown>
       {...(args.props as DropdownProps<number | string>)}
       defaultValue={args.defaultOption}
diff --git a/frontend/src/Pages/ComponentPage/ExampleForm.tsx b/frontend/src/Pages/ComponentPage/ExampleForm.tsx
index f2aa727c3..78b3d24db 100644
--- a/frontend/src/Pages/ComponentPage/ExampleForm.tsx
+++ b/frontend/src/Pages/ComponentPage/ExampleForm.tsx
@@ -5,6 +5,7 @@ import { z } from 'zod';
 import {
   Button,
   Checkbox,
+  DatePicker,
   Dropdown,
   Form,
   FormControl,
@@ -13,6 +14,7 @@ import {
   FormLabel,
   FormMessage,
   Input,
+  NumberInput,
 } from '~/Components';
 import { PASSWORD, USERNAME } from '~/schema/user';
 
@@ -21,7 +23,14 @@ const schema = z.object({
   password: PASSWORD,
   organization: z.string().nullish().optional(),
   duration: z.number().min(15).max(60),
+  date: z.date(),
   confirm: z.boolean().refine((v) => v, 'Påkrevd'),
+  image_file: z
+    .instanceof(File)
+    .refine((file) => file.size < 1024 * 1024 * 2, {
+      message: "File can't be larger than 2 MB",
+    })
+    .nullable(),
 });
 
 export function ExampleForm() {
@@ -36,11 +45,13 @@ export function ExampleForm() {
       organization: 'uka',
       duration: 15,
       confirm: false,
+      image_file: null,
     },
   });
 
   function onSubmit(values: z.infer<typeof schema>) {
     setSubmitting(true);
+    console.debug(values);
     setSerialized(JSON.stringify(values));
     setTimeout(() => setSubmitting(false), 600);
   }
@@ -61,7 +72,7 @@ export function ExampleForm() {
             <FormItem>
               <FormLabel>Brukernavn</FormLabel>
               <FormControl>
-                <Input disabled={submitting} autoComplete="off" {...field} />
+                <Input type="text" disabled={submitting} autoComplete="off" {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -87,7 +98,7 @@ export function ExampleForm() {
             <FormItem>
               <FormLabel>Organisasjon</FormLabel>
               <FormControl>
-                <Dropdown options={organizations} disabled={submitting} {...field} />
+                <Dropdown options={organizations} disabled={submitting} nullOption={true} {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -100,7 +111,20 @@ export function ExampleForm() {
             <FormItem>
               <FormLabel>Varighet</FormLabel>
               <FormControl>
-                <Input type="number" disabled={submitting} {...field} />
+                <NumberInput disabled={submitting} {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="date"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Dato</FormLabel>
+              <FormControl>
+                <DatePicker disabled={submitting} {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -119,6 +143,25 @@ export function ExampleForm() {
             </FormItem>
           )}
         />
+
+        <FormField
+          control={form.control}
+          name="image_file"
+          render={({ field: { value, onChange, ...fieldProps } }) => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  type="file"
+                  accept="image/*"
+                  onChange={(event) => onChange(event.target.files?.[0])}
+                  {...fieldProps}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
         <Button type="submit" disabled={submitting}>
           Lagre
         </Button>
diff --git a/frontend/src/Pages/ContributorsPage/components/Contributor/Contributor.tsx b/frontend/src/Pages/ContributorsPage/ContributorItem.tsx
similarity index 90%
rename from frontend/src/Pages/ContributorsPage/components/Contributor/Contributor.tsx
rename to frontend/src/Pages/ContributorsPage/ContributorItem.tsx
index 78dde9035..7348c371e 100644
--- a/frontend/src/Pages/ContributorsPage/components/Contributor/Contributor.tsx
+++ b/frontend/src/Pages/ContributorsPage/ContributorItem.tsx
@@ -7,18 +7,7 @@ import darkAvatar from '~/assets/contributors/default_dark.svg';
 import { THEME } from '~/constants';
 import { useGlobalContext } from '~/context/GlobalContextProvider';
 import { KEY } from '~/i18n/constants';
-
-export type Contributor = {
-  name: string;
-  from: string;
-  to?: string;
-  github?: string;
-  picture?: string;
-  websjef?: {
-    from: string;
-    to: string;
-  };
-};
+import type { Contributor } from './types';
 
 type Props = {
   contributor: Contributor;
diff --git a/frontend/src/Pages/ContributorsPage/ContributorsPage.tsx b/frontend/src/Pages/ContributorsPage/ContributorsPage.tsx
index 2d090cc5f..df8645322 100644
--- a/frontend/src/Pages/ContributorsPage/ContributorsPage.tsx
+++ b/frontend/src/Pages/ContributorsPage/ContributorsPage.tsx
@@ -6,19 +6,14 @@ import robines from '~/assets/contributors/robines.jpg';
 import snorre98 from '~/assets/contributors/snorre98.jpg';
 import sygard from '~/assets/contributors/sygard.jpg';
 import { KEY } from '~/i18n/constants';
+import { ContributorItem } from './ContributorItem';
 import styles from './ContributorsPage.module.scss';
-import { type Contributor, ContributorItem } from './components';
+import type { Contributor } from './types';
 
 // biome-ignore format: array should not be formatted
 const CONTRIBUTORS: Contributor[] = [
   // H17
-  {
-    name: 'Kevin Kristiansen',
-    github: 'KevinKristiansen',
-    from: 'H17',
-    to: 'V20',
-    websjef: { from: 'V18', to: 'H18' },
-  },
+  { name: 'Kevin Kristiansen', github: 'KevinKristiansen', from: 'H17', to: 'V20', websjef: { from: 'V18', to: 'H18' } },
   // H19
   { name: 'Emil Telstad', github: 'emilte', from: 'H19' },
   { name: 'Sigve Røkenes', github: 'evgiz', from: 'H19', to: 'H23', websjef: { from: 'H20', to: 'V21' } },
@@ -39,15 +34,9 @@ const CONTRIBUTORS: Contributor[] = [
   { name: 'Eirik Hoem', github: 'eiriksho', from: 'H22', to: 'V23' },
   { name: 'Simen Seeberg-Rommetveit', github: 'simensee', from: 'H22' },
   // V23
-  {
-    name: 'Robin Espinosa Jelle',
-    github: 'robines',
-    from: 'V23',
-    picture: robines,
-    websjef: { from: 'H23', to: 'V24' },
-  },
+  { name: 'Robin Espinosa Jelle', github: 'robines', from: 'V23', picture: robines, websjef: { from: 'H23', to: 'V24' } },
   { name: 'Johanne Grønlien Gjedrem', github: 'johannegg', from: 'V23' },
-  { name: 'Tinius Presterud', github: 'tiniuspre', from: 'V23' },
+  { name: 'Tinius Presterud', github: 'tiniuspre', from: 'V23', to: 'V24' },
   // H23
   { name: 'Amalie Johansen Vik', github: 'amaliejvik', from: 'H23', picture: amaliejvik },
   { name: 'Marion Lystad', github: 'marionlys', from: 'H23' },
diff --git a/frontend/src/Pages/ContributorsPage/components/Contributor/index.ts b/frontend/src/Pages/ContributorsPage/components/Contributor/index.ts
deleted file mode 100644
index 688926668..000000000
--- a/frontend/src/Pages/ContributorsPage/components/Contributor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { type Contributor, ContributorItem } from './Contributor';
diff --git a/frontend/src/Pages/ContributorsPage/components/index.ts b/frontend/src/Pages/ContributorsPage/components/index.ts
deleted file mode 100644
index 688926668..000000000
--- a/frontend/src/Pages/ContributorsPage/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { type Contributor, ContributorItem } from './Contributor';
diff --git a/frontend/src/Pages/ContributorsPage/types.ts b/frontend/src/Pages/ContributorsPage/types.ts
new file mode 100644
index 000000000..69350b0f6
--- /dev/null
+++ b/frontend/src/Pages/ContributorsPage/types.ts
@@ -0,0 +1,11 @@
+export type Contributor = {
+  name: string;
+  from: string;
+  to?: string;
+  github?: string;
+  picture?: string;
+  websjef?: {
+    from: string;
+    to: string;
+  };
+};
diff --git a/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx
index 029213ca6..12b02ff51 100644
--- a/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx
+++ b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { Link } from '~/Components/Link/Link';
 import { SultenPage } from '~/Components/SultenPage';
 import { SamfForm } from '~/Forms/SamfForm';
@@ -31,19 +31,19 @@ export function LycheReservationPage() {
   const [reservation, setReservation] = useState<FormProps>();
   const [availableDate, setAvailableDate] = useState<boolean>(false);
 
-  const occasionOptions: DropDownOption<string>[] = [
+  const occasionOptions: DropdownOption<string>[] = [
     { value: 'DRINK', label: 'drikke' },
     { value: 'EAT', label: 'spise' },
   ];
 
-  const hoursOptions: DropDownOption<string>[] = [
+  const hoursOptions: DropdownOption<string>[] = [
     { value: '12:00', label: '12:00' },
     { value: '13:00', label: '13:00' },
     { value: '14:00', label: '14:00' },
     { value: '15:00', label: '15:00' },
   ];
 
-  const occupancyOptions: DropDownOption<number>[] = [
+  const occupancyOptions: DropdownOption<number>[] = [
     { value: 1, label: '1' },
     { value: 2, label: '2' },
     { value: 3, label: '3' },
diff --git a/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.tsx b/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.tsx
index d2ab3e25b..8d2479493 100644
--- a/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.tsx
+++ b/frontend/src/Pages/OrganizationRecruitmentPage/OrganizationRecruitmentPage.tsx
@@ -7,7 +7,7 @@ import { PersonalRow } from '~/Pages/RecruitmentPage';
 import { getOrganization, getRecruitment } from '~/api';
 import { useOrganizationContext } from '~/context/OrgContextProvider';
 import type { RecruitmentDto } from '~/dto';
-import { useDesktop } from '~/hooks';
+import { useDesktop, useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { OrgNameType, type OrgNameTypeValue } from '~/types';
 import { dbT, getObjectFieldOrNumber } from '~/utils';
@@ -16,7 +16,6 @@ import styles from './OrganizationRecruitmentPage.module.scss';
 
 export function OrganizationRecruitmentPage() {
   const isDesktop = useDesktop();
-  const embededId = '-nYQb8_TvQ4'; // TODO: Make this dynamic DO IN ISSUE #1121 for backend. #1274 for frontend
   const { recruitmentId } = useParams<{ recruitmentId: string }>();
   const [viewAllPositions, setViewAllPositions] = useState<boolean>(true);
   const { t } = useTranslation();
@@ -24,6 +23,7 @@ export function OrganizationRecruitmentPage() {
   const [recruitment, setRecruitment] = useState<RecruitmentDto>();
   const [organizationName, setOrganizationName] = useState<OrgNameTypeValue>(OrgNameType.FALLBACK);
   const [loading, setLoading] = useState<boolean>(true);
+  useTitle(dbT(recruitment, 'name') ?? '');
 
   useEffect(() => {
     if (recruitmentId) {
@@ -76,9 +76,9 @@ export function OrganizationRecruitmentPage() {
               {dbT(recruitment, 'name')}
             </Text>
           </div>
-          {embededId ? (
+          {recruitment?.promo_media ? (
             <>
-              <Video embedId={embededId} className={styles.video} />
+              <Video embedId={recruitment.promo_media} className={styles.video} />
             </>
           ) : (
             <></>
diff --git a/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx b/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx
index 55dd59e4d..8c51fef0b 100644
--- a/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx
+++ b/frontend/src/PagesAdmin/EventCreatorAdminPage/EventCreatorAdminPage.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Button, ImageCard } from '~/Components';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { type Tab, TabBar } from '~/Components/TabBar/TabBar';
 import { SamfForm } from '~/Forms/SamfForm';
 import { SamfFormField } from '~/Forms/SamfFormField';
@@ -61,11 +61,11 @@ export function EventCreatorAdminPage() {
   const { id } = useParams();
 
   // TODO these are temporary and must be fetched from API when implemented.
-  const eventCategoryOptions: DropDownOption<string>[] = [
+  const eventCategoryOptions: DropdownOption<string>[] = [
     { value: 'concert', label: 'Konsert' },
     { value: 'debate', label: 'Debatt' },
   ];
-  const ageLimitOptions: DropDownOption<EventAgeRestrictionValue>[] = [
+  const ageLimitOptions: DropdownOption<EventAgeRestrictionValue>[] = [
     { value: 'none', label: 'Ingen' },
     { value: 'eighteen', label: '18 år' },
     { value: 'twenty', label: '20 år' },
diff --git a/frontend/src/PagesAdmin/EventCreatorAdminPage/components/PaymentForm.tsx b/frontend/src/PagesAdmin/EventCreatorAdminPage/components/PaymentForm.tsx
index 13a294925..e83ec0577 100644
--- a/frontend/src/PagesAdmin/EventCreatorAdminPage/components/PaymentForm.tsx
+++ b/frontend/src/PagesAdmin/EventCreatorAdminPage/components/PaymentForm.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { SamfFormField } from '~/Forms/SamfFormField';
 import type { EventCustomTicketDto, EventDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
@@ -18,7 +18,7 @@ export function PaymentForm({ event, onChange }: PaymentFormProps) {
   const { t } = useTranslation();
 
   // Dropdown for price group
-  const ticketTypeOptions: DropDownOption<EventTicketTypeValue>[] = ALL_TICKET_TYPES.map((ticketType) => {
+  const ticketTypeOptions: DropdownOption<EventTicketTypeValue>[] = ALL_TICKET_TYPES.map((ticketType) => {
     return {
       value: ticketType,
       label: t(getTicketTypeKey(ticketType)) ?? '',
diff --git a/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx b/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx
index 454ce60b6..4ccd4ede0 100644
--- a/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx
+++ b/frontend/src/PagesAdmin/GangsFormAdminPage/components/GangForm/GangForm.tsx
@@ -18,8 +18,8 @@ const schema = z.object({
   name_en: NAME.min(1),
   abbreviation: ABBREVIATION.optional().or(z.literal('')),
   website: WEBSITE_URL.or(z.literal('')),
-  info_page: GANG_INFO_PAGE.optional(),
-  gang_type: GANG_TYPE.optional(),
+  info_page: GANG_INFO_PAGE.nullish().or(z.literal('')),
+  gang_type: GANG_TYPE.nullish(),
 });
 
 type Props = {
@@ -68,6 +68,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
       abbreviation: gang?.abbreviation ?? '',
       website: gang?.webpage ?? '',
       info_page: gang?.info_page,
+      gang_type: gang?.gang_type,
     },
   });
 
@@ -103,7 +104,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
               <FormItem className={styles.form_item}>
                 <FormLabel>{lowerCapitalize(`${t(KEY.common_norwegian)} ${t(KEY.common_name)}`)}</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input type="text" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -116,7 +117,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
               <FormItem className={styles.form_item}>
                 <FormLabel>{lowerCapitalize(`${t(KEY.common_english)} ${t(KEY.common_name)}`)}</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input type="text" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -131,7 +132,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
               <FormItem className={styles.form_item}>
                 <FormLabel>{lowerCapitalize(t(KEY.admin_gangsadminpage_abbreviation))}</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input type="text" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -144,7 +145,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
               <FormItem className={styles.form_item}>
                 <FormLabel>{lowerCapitalize(t(KEY.admin_gangsadminpage_webpage))}</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input type="text" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -162,11 +163,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
                   {loadingInfoPages ? (
                     <>{t(KEY.common_loading)}...</>
                   ) : (
-                    <Dropdown
-                      defaultValue={infoPageOptions?.find((o) => o.value === gang?.info_page)}
-                      options={infoPageOptions}
-                      {...field}
-                    />
+                    <Dropdown options={infoPageOptions} nullOption={true} {...field} />
                   )}
                 </FormControl>
                 <FormMessage />
@@ -183,11 +180,7 @@ export function GangForm({ gang, onSuccess, onError }: Props) {
                   {loadingGangTypes ? (
                     <>{t(KEY.common_loading)}...</>
                   ) : (
-                    <Dropdown
-                      defaultValue={gangTypeOptions?.find((o) => o.value === gang?.gang_type)}
-                      options={gangTypeOptions}
-                      {...field}
-                    />
+                    <Dropdown options={gangTypeOptions} {...field} />
                   )}
                 </FormControl>
                 <FormMessage />
diff --git a/frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx b/frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx
index 17a0c9d3f..011e6a765 100644
--- a/frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx
+++ b/frontend/src/PagesAdmin/InterviewNotesAdminPage/InterviewNotesAdminPage.tsx
@@ -6,6 +6,7 @@ import { Button } from '~/Components';
 import { TextAreaField } from '~/Components/TextAreaField/TextAreaField';
 import { getRecruitmentApplicationsForGang, putRecruitmentApplicationInterview } from '~/api';
 import type { InterviewDto, RecruitmentApplicationDto } from '~/dto';
+import { useTitle } from '~/hooks';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { ROUTES } from '~/routes';
@@ -25,6 +26,8 @@ export function InterviewNotesPage() {
   const [nameUser, setNameUser] = useState<string>('');
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const title = t(KEY.recruitment_interview_notes);
+  useTitle(title);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: t does not need to be in deplist
   useEffect(() => {
@@ -73,7 +76,7 @@ export function InterviewNotesPage() {
   }
 
   return (
-    <AdminPageLayout title={t(KEY.recruitment_interview_notes)} header={true}>
+    <AdminPageLayout title={title} header={true}>
       <div className={styles.container}>
         <label htmlFor="INotes">
           {t(KEY.recruitment_applicant)}: {nameUser}
diff --git a/frontend/src/PagesAdmin/RecruitmentAdminPage/RecruitmentAdminPage.tsx b/frontend/src/PagesAdmin/RecruitmentAdminPage/RecruitmentAdminPage.tsx
index 18040daf3..b5d8573b1 100644
--- a/frontend/src/PagesAdmin/RecruitmentAdminPage/RecruitmentAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentAdminPage/RecruitmentAdminPage.tsx
@@ -53,7 +53,7 @@ export function RecruitmentAdminPage() {
       cells: [
         {
           content: <Link url={pageUrl}>{dbT(element, 'name')}</Link>,
-          value: ROUTES.frontend.recruitment,
+          value: element.id,
         },
         {
           content: getObjectFieldOrNumber<string>(element?.organization, 'name'),
diff --git a/frontend/src/PagesAdmin/RecruitmentFormAdminPage/RecruitmentFormAdminPage.tsx b/frontend/src/PagesAdmin/RecruitmentFormAdminPage/RecruitmentFormAdminPage.tsx
index 69f641b58..32432db3b 100644
--- a/frontend/src/PagesAdmin/RecruitmentFormAdminPage/RecruitmentFormAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentFormAdminPage/RecruitmentFormAdminPage.tsx
@@ -4,8 +4,20 @@ import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Button, Dropdown, Form, FormControl, FormField, FormItem, FormLabel, FormMessage, Input } from '~/Components';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import {
+  Button,
+  Dropdown,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  NumberInput,
+} from '~/Components';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
+import { FormDescription } from '~/Components/Forms/Form';
 import { getOrganizations, postRecruitment, putRecruitment } from '~/api';
 import type { OrganizationDto, RecruitmentDto } from '~/dto';
 import { useTitle } from '~/hooks';
@@ -23,7 +35,7 @@ export function RecruitmentFormAdminPage() {
   const data = useRouteLoaderData('recruitment') as RecruitmentLoader | undefined;
 
   const { recruitmentId } = useParams();
-  const [organizationOptions, setOrganizationOptions] = useState<DropDownOption<number>[]>([]);
+  const [organizationOptions, setOrganizationOptions] = useState<DropdownOption<number>[]>([]);
 
   useEffect(() => {
     getOrganizations().then((data) => {
@@ -47,6 +59,7 @@ export function RecruitmentFormAdminPage() {
       utcTimestampToLocal(data?.recruitment?.reprioritization_deadline_for_groups, false) || '',
     organization: getObjectFieldOrNumber<number>(data?.recruitment?.organization, 'id') || 1,
     max_applications: data?.recruitment?.max_applications,
+    promo_media: data?.recruitment?.promo_media || '',
   };
 
   const form = useForm<recruitmentFormType>({
@@ -97,7 +110,7 @@ export function RecruitmentFormAdminPage() {
                   <FormItem className={styles.item}>
                     <FormLabel>{`${t(KEY.common_name)} ${t(KEY.common_norwegian)}`}</FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <Input type="text" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -110,7 +123,7 @@ export function RecruitmentFormAdminPage() {
                   <FormItem className={styles.item}>
                     <FormLabel>{`${t(KEY.common_name)} ${t(KEY.common_english)}`}</FormLabel>
                     <FormControl>
-                      <Input {...field} />
+                      <Input type="text" {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -196,7 +209,7 @@ export function RecruitmentFormAdminPage() {
                   <FormItem className={styles.item}>
                     <FormLabel>{t(KEY.max_applications)}</FormLabel>
                     <FormControl>
-                      <Input type="number" {...field} />
+                      <NumberInput allowDecimal={false} {...field} />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -220,6 +233,22 @@ export function RecruitmentFormAdminPage() {
                 )}
               />
             </div>
+            <div className={styles.row}>
+              <FormField
+                control={form.control}
+                name="promo_media"
+                render={({ field }) => (
+                  <FormItem className={styles.item}>
+                    <FormLabel>{t(KEY.recruitment_promo_media)}</FormLabel>
+                    <FormDescription>{t(KEY.promo_media_description)}</FormDescription>
+                    <FormControl>
+                      <Input type="text" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
             <Button type="submit">{submitText}</Button>
           </div>
         </form>
diff --git a/frontend/src/PagesAdmin/RecruitmentFormAdminPage/recruitmentSchema.ts b/frontend/src/PagesAdmin/RecruitmentFormAdminPage/recruitmentSchema.ts
index c721d7d2e..7ae4146a1 100644
--- a/frontend/src/PagesAdmin/RecruitmentFormAdminPage/recruitmentSchema.ts
+++ b/frontend/src/PagesAdmin/RecruitmentFormAdminPage/recruitmentSchema.ts
@@ -14,7 +14,8 @@ export const recruitmentSchema = z
     reprioritization_deadline_for_applicant: LOCAL_DATETIME,
     reprioritization_deadline_for_groups: LOCAL_DATETIME,
     organization: z.number().min(1, { message: 'Organization is required' }),
-    max_applications: z.number().nullable(),
+    max_applications: z.number().min(0).max(99).optional(),
+    promo_media: z.string(),
   })
   .refine(
     (data) => {
@@ -59,6 +60,17 @@ export const recruitmentSchema = z
       message: i18next.t(KEY.error_recruitment_form_4),
       path: ['reprioritization_deadline_for_groups'],
     },
+  )
+  .refine(
+    (data) => {
+      const promoMedia = data.promo_media;
+      const regex = /^(https?:\/\/)?(www\.)?(youtu.*be.*)\/(watch\?v=|embed\/|v|shorts|)(.*?((?=[&#?])|$))/;
+      return promoMedia.match(regex) || promoMedia.length === 11 || promoMedia === '';
+    },
+    {
+      message: i18next.t(KEY.promo_media_invalid),
+      path: ['promo_media'],
+    },
   );
 
 export type recruitmentFormType = z.infer<typeof recruitmentSchema>;
diff --git a/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx b/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx
index 3ab1a42f6..b44137a47 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentGangAdminPage/RecruitmentGangAdminPage.tsx
@@ -73,6 +73,7 @@ export function RecruitmentGangAdminPage() {
       cells: [
         {
           content: <Link url={pageUrl}>{dbT(recruitmentPosition, 'name')}</Link>,
+          value: dbT(recruitmentPosition, 'name'),
         },
         {
           value: recruitmentPosition.is_funksjonaer_position,
diff --git a/frontend/src/PagesAdmin/RecruitmentGangAllApplicantsAdminPage/RecruitmentGangAllApplicantsAdminPage.tsx b/frontend/src/PagesAdmin/RecruitmentGangAllApplicantsAdminPage/RecruitmentGangAllApplicantsAdminPage.tsx
index 4781ad16f..1dfb3a1dd 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangAllApplicantsAdminPage/RecruitmentGangAllApplicantsAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentGangAllApplicantsAdminPage/RecruitmentGangAllApplicantsAdminPage.tsx
@@ -7,7 +7,7 @@ import { Table } from '~/Components/Table';
 import { Text } from '~/Components/Text/Text';
 import { downloadCSVGangRecruitment, getGang, getRecruitment, getRecruitmentApplicationsForGang } from '~/api';
 import type { GangDto, RecruitmentApplicationDto, RecruitmentDto } from '~/dto';
-import { useCustomNavigate } from '~/hooks';
+import { useCustomNavigate, useTitle } from '~/hooks';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
@@ -118,6 +118,7 @@ export function RecruitmentGangAllApplicantsAdminPage() {
   };
 
   const title = t(KEY.recruitment_all_applications);
+  useTitle(title);
   const header = (
     <div className={styles.header}>
       <Text as="strong" size="m" className={styles.headerBold}>
diff --git a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx
index 3dbdab7dd..954c24625 100644
--- a/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentGangOverviewPage/RecruitmentGangOverviewPage.tsx
@@ -76,8 +76,14 @@ export function RecruitmentGangOverviewPage() {
         urlParams: { recruitmentId: recruitmentId, gangId: gang.id },
       });
 
-      return { cells: [{ content: <Link url={pageUrl}>{dbT(gang, 'name')}</Link> }, gang.recruitment_positions] };
+      return {
+        cells: [
+          { content: <Link url={pageUrl}>{dbT(gang, 'name')}</Link>, value: dbT(gang, 'name') },
+          gang.recruitment_positions,
+        ],
+      };
     });
+
     const tableSeparatePositionColumns = [
       { content: t(KEY.common_gang), sortable: true },
       { content: t(KEY.common_url), sortable: true },
@@ -92,8 +98,11 @@ export function RecruitmentGangOverviewPage() {
 
       return {
         cells: [
-          { content: <Link url={pageUrl}>{dbT(separate_position, 'name')}</Link> },
-          { content: <Link url={separate_position.url}>{separate_position.url}</Link> },
+          {
+            content: <Link url={pageUrl}>{dbT(separate_position, 'name')}</Link>,
+            value: dbT(separate_position, 'name'),
+          },
+          { content: <Link url={separate_position.url}>{separate_position.url}</Link>, value: separate_position.url },
           {
             content: (
               <CrudButtons
diff --git a/frontend/src/PagesAdmin/RecruitmentOverviewPage/RecruitmentOverviewPage.tsx b/frontend/src/PagesAdmin/RecruitmentOverviewPage/RecruitmentOverviewPage.tsx
index 7dbffc3a7..738255c51 100644
--- a/frontend/src/PagesAdmin/RecruitmentOverviewPage/RecruitmentOverviewPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentOverviewPage/RecruitmentOverviewPage.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { TabView } from '~/Components';
 import type { Tab } from '~/Components/TabBar/TabBar';
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
+import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { RecruitmentProgression } from './Components/RecruitmentProgression';
 import { RecruitmentStatistics } from './Components/RecruitmentStatistics';
@@ -14,6 +15,7 @@ export function RecruitmentOverviewPage() {
     { key: 1, label: t(KEY.recruitment_progression), value: <RecruitmentProgression /> },
     { key: 2, label: t(KEY.recruitment_statistics), value: <RecruitmentStatistics /> },
   ];
+  useTitle(t(KEY.recruitment_overview));
   return (
     <AdminPageLayout title={`${t(KEY.recruitment_overview)}: ${RECRUITMENT_TITLE_PLACEHOLDER}`}>
       <TabView tabs={tabs} />
diff --git a/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx b/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx
index 89cb38f72..481dbdfc1 100644
--- a/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionForm.tsx
@@ -17,7 +17,9 @@ import {
   Input,
   Textarea,
 } from '~/Components';
+import { MultiSelect } from '~/Components/MultiSelect';
 import { postRecruitmentPosition, putRecruitmentPosition } from '~/api';
+import type { RecruitmentPositionDto, UserDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import { ROUTES } from '~/routes';
@@ -36,24 +38,25 @@ const schema = z.object({
   default_application_letter_nb: NON_EMPTY_STRING,
   default_application_letter_en: NON_EMPTY_STRING,
   tags: NON_EMPTY_STRING,
+  interviewer_ids: z.array(z.number()).optional().nullable(),
 });
 
 type SchemaType = z.infer<typeof schema>;
 
 interface FormProps {
-  initialData: Partial<SchemaType>;
+  initialData: Partial<RecruitmentPositionDto>;
   positionId?: string;
   recruitmentId?: string;
   gangId?: string;
+  users?: Partial<UserDto[]>;
 }
 
-export function RecruitmentPositionForm({ initialData, positionId, recruitmentId, gangId }: FormProps) {
+export function RecruitmentPositionForm({ initialData, positionId, recruitmentId, gangId, users }: FormProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
   const form = useForm<SchemaType>({
     resolver: zodResolver(schema),
-    defaultValues: initialData,
   });
 
   const submitText = positionId ? t(KEY.common_save) : t(KEY.common_create);
@@ -63,7 +66,7 @@ export function RecruitmentPositionForm({ initialData, positionId, recruitmentId
       ...data,
       gang: { id: Number.parseInt(gangId ?? '') },
       recruitment: recruitmentId ?? '',
-      interviewers: [],
+      interviewer_ids: data.interviewer_ids || [],
     };
 
     const action = positionId
@@ -87,9 +90,24 @@ export function RecruitmentPositionForm({ initialData, positionId, recruitmentId
   };
 
   useEffect(() => {
-    form.reset(initialData);
+    form.reset({
+      ...initialData,
+      interviewer_ids: initialData.interviewers?.map((interviewer) => interviewer.id) || [],
+    });
   }, [initialData, form]);
 
+  // Convert users array to dropdown options
+  const interviewerOptions =
+    users
+      ?.filter((user) => user?.id && (user?.username || user?.first_name))
+      .map((user) => ({
+        value: user?.id,
+        label: user?.username || `${user?.first_name} ${user?.last_name}`,
+      })) || [];
+
+  // Get currently selected interviewers
+  const selectedInterviewers = form.watch('interviewer_ids') || [];
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className={styles.form}>
@@ -116,7 +134,7 @@ export function RecruitmentPositionForm({ initialData, positionId, recruitmentId
                 <FormItem className={styles.item}>
                   <FormLabel>{`${t(KEY.common_name)} ${t(KEY.common_norwegian)}`}</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input type="text" {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -129,7 +147,7 @@ export function RecruitmentPositionForm({ initialData, positionId, recruitmentId
                 <FormItem className={styles.item}>
                   <FormLabel>{`${t(KEY.common_name)} ${t(KEY.common_english)}`}</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input type="text" {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -245,12 +263,37 @@ export function RecruitmentPositionForm({ initialData, positionId, recruitmentId
               <FormItem className={styles.item}>
                 <FormLabel>{t(KEY.common_tags)}</FormLabel>
                 <FormControl>
-                  <Input {...field} />
+                  <Input type="text" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Controller
+            name="interviewer_ids"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem className={styles.item}>
+                <FormLabel>{t(KEY.recruitment_interviewers)}</FormLabel>
+                <FormControl>
+                  <MultiSelect
+                    options={interviewerOptions}
+                    selected={interviewerOptions.filter(
+                      (option) => option.value && selectedInterviewers.includes(option.value),
+                    )}
+                    onChange={(values) => {
+                      field.onChange(values);
+                    }}
+                    optionsLabel="Available Interviewers"
+                    selectedLabel="Selected Interviewers"
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
+
           <Button type="submit" rounded={true} theme="green">
             {submitText}
           </Button>
diff --git a/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionFormAdminPage.tsx b/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionFormAdminPage.tsx
index b52b53060..0536248ec 100644
--- a/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionFormAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentPositionFormAdminPage/RecruitmentPositionFormAdminPage.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { getRecruitmentPosition } from '~/api';
-import type { RecruitmentPositionDto } from '~/dto';
+import { getRecruitmentPosition, getUsers } from '~/api';
+import type { RecruitmentPositionDto, UserDto } from '~/dto';
 import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
@@ -16,6 +16,7 @@ export function RecruitmentPositionFormAdminPage() {
   const navigate = useNavigate();
   const { recruitmentId, gangId, positionId } = useParams();
   const [position, setPosition] = useState<Partial<RecruitmentPositionDto>>();
+  const [users, setUsers] = useState<Partial<UserDto[]>>();
 
   useEffect(() => {
     if (positionId) {
@@ -34,6 +35,9 @@ export function RecruitmentPositionFormAdminPage() {
           );
         });
     }
+    getUsers().then((data) => {
+      setUsers(data);
+    });
   }, [positionId, recruitmentId, gangId, navigate, t]);
 
   const initialData: Partial<RecruitmentPositionDto> = {
@@ -48,6 +52,7 @@ export function RecruitmentPositionFormAdminPage() {
     default_application_letter_nb: position?.default_application_letter_nb || '',
     default_application_letter_en: position?.default_application_letter_en || '',
     tags: position?.tags || '',
+    interviewers: position?.interviewers || [],
   };
 
   const title = positionId
@@ -63,6 +68,7 @@ export function RecruitmentPositionFormAdminPage() {
         positionId={positionId}
         recruitmentId={recruitmentId}
         gangId={gangId}
+        users={users}
       />
     </AdminPageLayout>
   );
diff --git a/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx b/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx
index f9e6a3d66..9d75ec8a9 100644
--- a/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx
@@ -27,42 +27,46 @@ export function ProcessedApplicants({ data, type, revertStateFunction }: Process
     revertStateFunction && { content: '', sortable: false },
   ];
 
-  const rows = data.map((application) => ({
-    cells: [
-      {
-        content: (
-          <Link
-            key={application.user.id}
-            url={reverse({
-              pattern: ROUTES.frontend.admin_recruitment_applicant,
-              urlParams: {
-                applicationID: application.id,
-              },
-            })}
-          >
-            {`${application.user.first_name} ${application.user.last_name}`}
-          </Link>
-        ),
-      },
-      { content: application.user?.phone_number, value: application.user?.phone_number },
-      { content: application.user?.email, value: application.user?.email },
-      { content: application.interview?.interview_time, value: application.interview?.interview_time },
-      { content: application.interview?.interview_location, value: application.interview?.interview_location },
-      { content: application.recruiter_status, value: application.recruiter_status },
-      revertStateFunction && {
-        content: (
-          <Button
-            display="pill"
-            theme="outlined"
-            onClick={() => revertStateFunction(application.id, { recruiter_status: 0 })}
-          >
-            {t(KEY.recruitment_revert_status)}
-          </Button>
-        ),
-        value: application.recruiter_status,
-      },
-    ],
-  }));
+  const rows = data.map((application) => {
+    const applicantName = `${application.user.first_name} ${application.user.last_name}`;
+    return {
+      cells: [
+        {
+          content: (
+            <Link
+              key={application.user.id}
+              url={reverse({
+                pattern: ROUTES.frontend.admin_recruitment_applicant,
+                urlParams: {
+                  applicationID: application.id,
+                },
+              })}
+            >
+              {applicantName}
+            </Link>
+          ),
+          value: applicantName,
+        },
+        { content: application.user?.phone_number, value: application.user?.phone_number },
+        { content: application.user?.email, value: application.user?.email },
+        { content: application.interview?.interview_time, value: application.interview?.interview_time },
+        { content: application.interview?.interview_location, value: application.interview?.interview_location },
+        { content: application.recruiter_status, value: application.recruiter_status },
+        revertStateFunction && {
+          content: (
+            <Button
+              display="pill"
+              theme="outlined"
+              onClick={() => revertStateFunction(application.id, { recruiter_status: 0 })}
+            >
+              {t(KEY.recruitment_revert_status)}
+            </Button>
+          ),
+          value: application.recruiter_status,
+        },
+      ],
+    };
+  });
 
   const styleType = {
     withdrawn: styles.withdrawn,
diff --git a/frontend/src/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage.tsx b/frontend/src/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage.tsx
index 8a66eb323..3afb7fb29 100644
--- a/frontend/src/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage.tsx
@@ -7,7 +7,7 @@ import { Table } from '~/Components/Table';
 import { Text } from '~/Components/Text/Text';
 import { getRecruitmentRecruiterDashboard } from '~/api';
 import type { RecruitmentApplicationDto, RecruitmentDto } from '~/dto';
-import { useCustomNavigate } from '~/hooks';
+import { useCustomNavigate, useTitle } from '~/hooks';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
@@ -23,6 +23,7 @@ export function RecruitmentRecruiterDashboardPage() {
   const [recruitment, setRecruitment] = useState<RecruitmentDto>();
   const [applications, setApplications] = useState<RecruitmentApplicationDto[]>();
   const [loading, setLoading] = useState(true);
+  useTitle(`${t(KEY.recruitment_recruiter_dashboard)} ${dbT(recruitment, 'name')}`);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: navigate must not be in deplist
   useEffect(() => {
diff --git a/frontend/src/PagesAdmin/RecruitmentSeparatePositionFormAdminPage/RecruitmentSeparatePositionFormAdminPage.tsx b/frontend/src/PagesAdmin/RecruitmentSeparatePositionFormAdminPage/RecruitmentSeparatePositionFormAdminPage.tsx
index c113d44ed..eead6cb0f 100644
--- a/frontend/src/PagesAdmin/RecruitmentSeparatePositionFormAdminPage/RecruitmentSeparatePositionFormAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentSeparatePositionFormAdminPage/RecruitmentSeparatePositionFormAdminPage.tsx
@@ -5,6 +5,7 @@ import { SamfForm } from '~/Forms/SamfForm';
 import { SamfFormField } from '~/Forms/SamfFormField';
 import { postRecruitmentSeparatePosition, putRecruitmentSeparatePosition } from '~/api';
 import type { RecruitmentSeparatePositionDto } from '~/dto';
+import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import type { SeparatePositionLoader } from '~/router/loaders';
@@ -25,6 +26,8 @@ type FormType = {
 export function RecruitmentSeparatePositionFormAdminPage() {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const title = `${t(KEY.common_create)} ${t(KEY.recruitment_position)}`;
+  useTitle(title);
 
   // Form data
   const { recruitmentId, separatePositionId } = useParams();
@@ -80,7 +83,7 @@ export function RecruitmentSeparatePositionFormAdminPage() {
   }
   return (
     <>
-      <AdminPageLayout title={`${t(KEY.common_create)} ${t(KEY.recruitment_position)}`} header={true}>
+      <AdminPageLayout title={title} header={true}>
         <div className={styles.wrapper}>
           <SamfForm<FormType> onSubmit={handleOnSubmit} initialData={initialData} submitText={submitText}>
             <div className={styles.row}>
diff --git a/frontend/src/PagesAdmin/RecruitmentUsersWithoutInterviewGangPage/RecruitmentUsersWithoutInterviewGangPage.tsx b/frontend/src/PagesAdmin/RecruitmentUsersWithoutInterviewGangPage/RecruitmentUsersWithoutInterviewGangPage.tsx
index e104622ed..3098a460e 100644
--- a/frontend/src/PagesAdmin/RecruitmentUsersWithoutInterviewGangPage/RecruitmentUsersWithoutInterviewGangPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentUsersWithoutInterviewGangPage/RecruitmentUsersWithoutInterviewGangPage.tsx
@@ -6,7 +6,7 @@ import { RecruitmentWithoutInterviewTable } from '~/Components';
 import { Text } from '~/Components/Text/Text';
 import { getApplicantsWithoutInterviews, getGang, getRecruitment } from '~/api';
 import type { GangDto, RecruitmentDto, RecruitmentUserDto } from '~/dto';
-import { useCustomNavigate } from '~/hooks';
+import { useCustomNavigate, useTitle } from '~/hooks';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { ROUTES } from '~/routes';
@@ -73,6 +73,7 @@ export function RecruitmentUsersWithoutInterviewGangPage() {
   }, [recruitmentId]);
 
   const title = t(KEY.recruitment_applicants_without_interview);
+  useTitle(title);
   const header = (
     <div className={styles.header}>
       <Text as="strong" size="m" className={styles.headerBold}>
diff --git a/frontend/src/PagesAdmin/RecruitmentUsersWithoutThreeInterviewCriteriaPage/RecruitmentUsersWithoutThreeInterviewCriteriaPage.tsx b/frontend/src/PagesAdmin/RecruitmentUsersWithoutThreeInterviewCriteriaPage/RecruitmentUsersWithoutThreeInterviewCriteriaPage.tsx
index aba5d48fc..d0784d1c0 100644
--- a/frontend/src/PagesAdmin/RecruitmentUsersWithoutThreeInterviewCriteriaPage/RecruitmentUsersWithoutThreeInterviewCriteriaPage.tsx
+++ b/frontend/src/PagesAdmin/RecruitmentUsersWithoutThreeInterviewCriteriaPage/RecruitmentUsersWithoutThreeInterviewCriteriaPage.tsx
@@ -6,7 +6,7 @@ import { RecruitmentWithoutInterviewTable } from '~/Components';
 import { Text } from '~/Components/Text/Text';
 import { getApplicantsWithoutThreeInterviewCriteria, getRecruitment } from '~/api';
 import type { RecruitmentDto, RecruitmentUserDto } from '~/dto';
-import { useCustomNavigate } from '~/hooks';
+import { useCustomNavigate, useTitle } from '~/hooks';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { ROUTES } from '~/routes';
@@ -21,6 +21,7 @@ export function RecruitmentUsersWithoutThreeInterviewCriteriaPage() {
   const [showSpinner, setShowSpinner] = useState<boolean>(true);
   const { t } = useTranslation();
   const navigate = useCustomNavigate();
+  useTitle(t(KEY.recruitment_three_interviews_criteria_button));
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: t does not need to be in deplist
   useEffect(() => {
diff --git a/frontend/src/PagesAdmin/RoleAdminPage/RoleAdminPage.tsx b/frontend/src/PagesAdmin/RoleAdminPage/RoleAdminPage.tsx
index 13f9dbb3e..c57ce479a 100644
--- a/frontend/src/PagesAdmin/RoleAdminPage/RoleAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RoleAdminPage/RoleAdminPage.tsx
@@ -1,12 +1,15 @@
 import { useTranslation } from 'react-i18next';
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
+import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 
 export function RoleAdminPage() {
   const { t } = useTranslation();
+  const title = t(KEY.common_role);
+  useTitle(title);
 
   return (
-    <AdminPageLayout title={t(KEY.common_roles_view)}>
+    <AdminPageLayout title={title}>
       <div />
     </AdminPageLayout>
   );
diff --git a/frontend/src/PagesAdmin/RoleFormAdminPage/RoleFormAdminPage.tsx b/frontend/src/PagesAdmin/RoleFormAdminPage/RoleFormAdminPage.tsx
new file mode 100644
index 000000000..ff79ed8d4
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoleFormAdminPage/RoleFormAdminPage.tsx
@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next';
+import { useRouteLoaderData } from 'react-router-dom';
+import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
+import { RoleForm } from '~/PagesAdmin/RoleFormAdminPage/components';
+import { KEY } from '~/i18n/constants';
+import type { RoleLoader } from '~/router/loaders';
+import { lowerCapitalize } from '~/utils';
+
+export function RoleFormAdminPage() {
+  const { t } = useTranslation();
+  const data = useRouteLoaderData('role') as RoleLoader | undefined;
+
+  const title = lowerCapitalize(`${t(data?.role ? KEY.common_edit : KEY.common_create)} ${t(KEY.common_role)}`);
+  return (
+    <AdminPageLayout title={title}>
+      <RoleForm role={data?.role} />
+    </AdminPageLayout>
+  );
+}
diff --git a/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.module.scss b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.module.scss
new file mode 100644
index 000000000..e83bbd550
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.module.scss
@@ -0,0 +1,5 @@
+.action_row {
+  display: flex;
+  justify-content: flex-end;
+  margin: 1rem 0;
+}
diff --git a/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx
new file mode 100644
index 000000000..c9322116b
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/RoleForm.tsx
@@ -0,0 +1,175 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { z } from 'zod';
+import {
+  Alert,
+  Button,
+  Dropdown,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '~/Components';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
+import { MultiSelect } from '~/Components/MultiSelect';
+import { createRole, editRole, getPermissions } from '~/api';
+import type { RoleDto } from '~/dto';
+import { KEY } from '~/i18n/constants';
+import { ROLE_CONTENT_TYPE, ROLE_NAME } from '~/schema/role';
+import styles from './RoleForm.module.scss';
+
+const schema = z.object({
+  name: ROLE_NAME,
+  permissions: z.array(z.number()),
+  content_type: ROLE_CONTENT_TYPE.nullish(),
+});
+
+type SchemaType = z.infer<typeof schema>;
+
+type ContentTypeSchemaType = z.infer<typeof ROLE_CONTENT_TYPE>;
+
+type Props = {
+  role?: RoleDto;
+};
+
+export function RoleForm({ role }: Props) {
+  const { t } = useTranslation();
+
+  const {
+    data: allPermissions,
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['permissions'],
+    queryFn: getPermissions,
+  });
+
+  const edit = useMutation({
+    mutationFn: editRole,
+    onSuccess: () => {
+      toast.success(t(KEY.common_save_successful));
+    },
+  });
+
+  const create = useMutation({
+    mutationFn: createRole,
+    onSuccess: () => {
+      toast.success(t(KEY.common_creation_successful));
+    },
+  });
+
+  const isPending = edit.isPending || create.isPending;
+
+  const permissionOptions = useMemo<DropdownOption<number>[]>(() => {
+    if (!allPermissions) {
+      return [];
+    }
+    return allPermissions.map((p) => ({
+      value: p.id,
+      label: p.name,
+    }));
+  }, [allPermissions]);
+
+  const selectedPermissions = useMemo<DropdownOption<number>[]>(() => {
+    if (!allPermissions || !role) {
+      return [];
+    }
+    const permissions = allPermissions.filter((p) => role.permissions.includes(p.id));
+    return permissions.map((p) => ({
+      value: p.id,
+      label: p.name,
+    }));
+  }, [role, allPermissions]);
+
+  const form = useForm<SchemaType>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: role?.name ?? '',
+      permissions: role?.permissions ?? [],
+      content_type: (role?.content_type ?? '') as ContentTypeSchemaType,
+    },
+  });
+
+  function onSubmit(values: SchemaType) {
+    console.log(values);
+    if (role) {
+      edit.mutate({ id: role.id, ...values });
+    } else {
+      create.mutate(values);
+    }
+  }
+
+  const contentTypeLabels: Record<ContentTypeSchemaType, string> = {
+    '': t(KEY.common_any),
+    organization: t(KEY.recruitment_organization),
+    gang: t(KEY.common_gang),
+    section: t(KEY.common_section),
+  };
+
+  const contentTypeOptions: DropdownOption<ContentTypeSchemaType>[] = ROLE_CONTENT_TYPE.options.map((ct) => ({
+    value: ct,
+    label: contentTypeLabels[ct],
+  }));
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t(KEY.common_name)}</FormLabel>
+              <FormControl>
+                <Input type="text" disabled={isLoading || isPending} {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="content_type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t(KEY.role_content_type)}</FormLabel>
+              <FormControl>
+                <Dropdown options={contentTypeOptions} disabled={isLoading || isPending} {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="permissions"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{t(KEY.common_permissions)}</FormLabel>
+              <FormControl>
+                {isLoading ? (
+                  <span>{t(KEY.common_loading)}...</span>
+                ) : isError ? (
+                  <Alert message={t(KEY.role_edit_could_not_load_permissions)} type="error" />
+                ) : (
+                  <MultiSelect options={permissionOptions} selected={selectedPermissions} {...field} />
+                )}
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div className={styles.action_row}>
+          <Button type="submit" theme="green" disabled={isLoading || isPending}>
+            {t(KEY.common_save)}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/index.ts b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/index.ts
new file mode 100644
index 000000000..f4563907a
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoleFormAdminPage/components/RoleForm/index.ts
@@ -0,0 +1 @@
+export { RoleForm } from './RoleForm';
diff --git a/frontend/src/PagesAdmin/RoleFormAdminPage/components/index.ts b/frontend/src/PagesAdmin/RoleFormAdminPage/components/index.ts
new file mode 100644
index 000000000..f4563907a
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoleFormAdminPage/components/index.ts
@@ -0,0 +1 @@
+export { RoleForm } from './RoleForm';
diff --git a/frontend/src/PagesAdmin/RoleFormAdminPage/index.ts b/frontend/src/PagesAdmin/RoleFormAdminPage/index.ts
new file mode 100644
index 000000000..e9fe47865
--- /dev/null
+++ b/frontend/src/PagesAdmin/RoleFormAdminPage/index.ts
@@ -0,0 +1 @@
+export { RoleFormAdminPage } from './RoleFormAdminPage';
diff --git a/frontend/src/PagesAdmin/RolesAdminPage/RolesAdminPage.tsx b/frontend/src/PagesAdmin/RolesAdminPage/RolesAdminPage.tsx
index 1c481a275..96ec3bc2b 100644
--- a/frontend/src/PagesAdmin/RolesAdminPage/RolesAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RolesAdminPage/RolesAdminPage.tsx
@@ -1,31 +1,27 @@
-import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { CrudButtons, Link } from '~/Components';
+import { Button, CrudButtons, Link } from '~/Components';
 import { Table } from '~/Components/Table';
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
-import type { RoleDto } from '~/dto';
+import { getRoles } from '~/api';
+import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
+import { reverse } from '~/named-urls';
+import { ROUTES } from '~/routes';
 import { lowerCapitalize } from '~/utils';
 
 export function RolesAdminPage() {
   const { t } = useTranslation();
-
   const navigate = useNavigate();
+  const title = t(KEY.common_roles);
+  useTitle(title);
 
-  const [roles, setRoles] = useState<RoleDto[]>([
-    {
-      id: 1,
-      name: 'Opptaksansvarlig',
-      permissions: ['samfundet.test_permission', 'samfundet.user_create'],
-    },
-    {
-      id: 2,
-      name: 'Intervjuer',
-      permissions: [],
-    },
-  ]);
-  const [loading, setLoading] = useState(false);
+  const { data: roles, isLoading } = useQuery({
+    queryKey: ['roles'],
+    queryFn: getRoles,
+  });
 
   const columns = [
     { content: t(KEY.common_name), sortable: true },
@@ -53,15 +49,32 @@ export function RolesAdminPage() {
             value: 0,
           },
           {
-            content: <CrudButtons onEdit={() => navigate('#')} />,
+            content: (
+              <CrudButtons
+                onEdit={() =>
+                  navigate(
+                    reverse({
+                      pattern: ROUTES.frontend.admin_roles_edit,
+                      urlParams: { roleId: r.id },
+                    }),
+                  )
+                }
+              />
+            ),
           },
         ],
       };
     });
   }, [roles]);
 
+  const header = (
+    <Button theme="success" link={ROUTES.frontend.admin_roles_create} rounded>
+      {lowerCapitalize(`${t(KEY.common_create)} ${t(KEY.common_role)}`)}
+    </Button>
+  );
+
   return (
-    <AdminPageLayout title={t(KEY.common_roles)} loading={loading}>
+    <AdminPageLayout title={title} loading={isLoading} header={header}>
       <Table data={data} columns={columns} />
     </AdminPageLayout>
   );
diff --git a/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx b/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx
index 535c6216f..058016f03 100644
--- a/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx
+++ b/frontend/src/PagesAdmin/RoomAdminPage/RoomAdminPage.tsx
@@ -6,7 +6,7 @@ import { Button, CrudButtons, Table } from '~/Components';
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
 import { deleteInterviewRoom, getInterviewRoomsForRecruitment } from '~/api';
 import type { InterviewRoomDto } from '~/dto';
-import { useCustomNavigate } from '~/hooks';
+import { useCustomNavigate, useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import type { RecruitmentLoader } from '~/router/loaders';
@@ -17,6 +17,7 @@ export function RoomAdminPage() {
   const data = useRouteLoaderData('recruitment') as RecruitmentLoader | undefined;
   const navigate = useCustomNavigate();
   const { t } = useTranslation();
+  useTitle(`${t(KEY.common_room)} ${t(KEY.common_overview)}`);
 
   useEffect(() => {
     if (data?.recruitment?.id) {
diff --git a/frontend/src/PagesAdmin/SaksdokumentFormAdminPage/SaksdokumentFormAdminPage.tsx b/frontend/src/PagesAdmin/SaksdokumentFormAdminPage/SaksdokumentFormAdminPage.tsx
index 81559d540..bbf3f12d5 100644
--- a/frontend/src/PagesAdmin/SaksdokumentFormAdminPage/SaksdokumentFormAdminPage.tsx
+++ b/frontend/src/PagesAdmin/SaksdokumentFormAdminPage/SaksdokumentFormAdminPage.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { SamfForm } from '~/Forms/SamfForm';
 import { SamfFormField } from '~/Forms/SamfFormField';
 import { getSaksdokument, postSaksdokument, putSaksdokument } from '~/api';
@@ -56,13 +56,13 @@ export function SaksdokumentFormAdminPage() {
   };
 
   // TODO get categories from API (this will not work).
-  const categoryOptions: DropDownOption<string>[] = [
+  const categoryOptions: DropdownOption<string>[] = [
     { value: 'FS_REFERAT', label: 'FS_REFERAT' },
     { value: 'ARSBERETNINGER', label: 'ARSBERETNINGER' },
     { value: 'STYRET', label: 'STYRET' },
     { value: 'RADET', label: 'RADET' },
   ];
-  const defaultCategoryOption: DropDownOption<string> | undefined =
+  const defaultCategoryOption: DropdownOption<string> | undefined =
     saksdok !== undefined
       ? {
           value: saksdok.category,
diff --git a/frontend/src/PagesAdmin/SultenMenuItemFormAdminPage/SultenMenuItemFormAdminPage.tsx b/frontend/src/PagesAdmin/SultenMenuItemFormAdminPage/SultenMenuItemFormAdminPage.tsx
index 5dd91813e..10dc0c12b 100644
--- a/frontend/src/PagesAdmin/SultenMenuItemFormAdminPage/SultenMenuItemFormAdminPage.tsx
+++ b/frontend/src/PagesAdmin/SultenMenuItemFormAdminPage/SultenMenuItemFormAdminPage.tsx
@@ -3,11 +3,12 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { SamfundetLogoSpinner } from '~/Components';
-import type { DropDownOption } from '~/Components/Dropdown/Dropdown';
+import type { DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { SamfForm } from '~/Forms/SamfForm';
 import { SamfFormField } from '~/Forms/SamfFormField';
 import { getFoodCategories, getFoodPreferences, getMenuItem, postMenuItem, putMenuItem } from '~/api';
 import type { FoodCategoryDto, FoodPreferenceDto, MenuItemDto } from '~/dto';
+import { useTitle } from '~/hooks';
 import { STATUS } from '~/http_status_codes';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
@@ -38,8 +39,8 @@ export function SultenMenuItemFormAdminPage() {
   const { id } = useParams();
   const [showSpinner, setShowSpinner] = useState<boolean>(true);
   const [menuItem, setMenuItem] = useState<Partial<MenuItemDto>>({});
-  const [foodPreferenceOptions, setFoodPreferenceOptions] = useState<DropDownOption<number>[]>([]);
-  const [foodCategoryOptions, setFoodCategoryOptions] = useState<DropDownOption<number>[]>([]);
+  const [foodPreferenceOptions, setFoodPreferenceOptions] = useState<DropdownOption<number>[]>([]);
+  const [foodCategoryOptions, setFoodCategoryOptions] = useState<DropdownOption<number>[]>([]);
 
   const initialData: Partial<FormType> = {
     name_nb: menuItem?.name_nb,
@@ -57,6 +58,7 @@ export function SultenMenuItemFormAdminPage() {
 
   const submitText = id ? t(KEY.common_save) : t(KEY.common_create);
   const title = `${id ? t(KEY.common_edit) : t(KEY.common_create)} ${lowerCapitalize(`${t(KEY.sulten_dishes)}`)}`;
+  useTitle(title);
 
   // Fetch data if edit mode.
 
@@ -70,7 +72,7 @@ export function SultenMenuItemFormAdminPage() {
                 ({
                   label: dbT(category, 'name'),
                   value: category.id,
-                }) as DropDownOption<number>,
+                }) as DropdownOption<number>,
             ),
           );
         })
@@ -85,7 +87,7 @@ export function SultenMenuItemFormAdminPage() {
                 ({
                   label: dbT(preference, 'name'),
                   value: preference.id,
-                }) as DropDownOption<number>,
+                }) as DropdownOption<number>,
             ),
           );
         })
diff --git a/frontend/src/PagesAdmin/UsersAdminPage/UsersAdminPage.tsx b/frontend/src/PagesAdmin/UsersAdminPage/UsersAdminPage.tsx
index 8bfd43b72..7fd36c020 100644
--- a/frontend/src/PagesAdmin/UsersAdminPage/UsersAdminPage.tsx
+++ b/frontend/src/PagesAdmin/UsersAdminPage/UsersAdminPage.tsx
@@ -6,6 +6,7 @@ import { Table } from '~/Components/Table';
 import { AdminPageLayout } from '~/PagesAdmin/AdminPageLayout/AdminPageLayout';
 import { getUsers } from '~/api';
 import type { UserDto } from '~/dto';
+import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
 import { getFullName } from '~/utils';
 import { ImpersonateButton } from './components';
@@ -15,6 +16,8 @@ export function UsersAdminPage() {
 
   const [users, setUsers] = useState<UserDto[]>();
   const [loading, setLoading] = useState(true);
+  const title = t(KEY.common_users);
+  useTitle(title);
 
   useEffect(() => {
     setLoading(true);
@@ -70,7 +73,7 @@ export function UsersAdminPage() {
   }, [t, users]);
 
   return (
-    <AdminPageLayout title={t(KEY.common_users)} loading={loading}>
+    <AdminPageLayout title={title} loading={loading}>
       <Table data={data} columns={columns} />
     </AdminPageLayout>
   );
diff --git a/frontend/src/PagesAdmin/index.ts b/frontend/src/PagesAdmin/index.ts
index 38038c005..ce7cbbdae 100644
--- a/frontend/src/PagesAdmin/index.ts
+++ b/frontend/src/PagesAdmin/index.ts
@@ -30,6 +30,7 @@ export { RecruitmentUsersWithoutInterviewGangPage } from './RecruitmentUsersWith
 export { RecruitmentUsersWithoutThreeInterviewCriteriaPage } from './RecruitmentUsersWithoutThreeInterviewCriteriaPage';
 export { RolesAdminPage } from './RolesAdminPage';
 export { RoleAdminPage } from './RoleAdminPage';
+export { RoleFormAdminPage } from './RoleFormAdminPage';
 export { CreateInterviewRoomPage, RoomAdminPage } from './RoomAdminPage';
 export { SaksdokumentAdminPage } from './SaksdokumentAdminPage';
 export { SaksdokumentFormAdminPage } from './SaksdokumentFormAdminPage';
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 065720cc0..45e29ae5b 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -20,6 +20,7 @@ import type {
   MenuItemDto,
   OccupiedTimeslotDto,
   OrganizationDto,
+  PermissionDto,
   PurchaseFeedbackDto,
   RecruitmentApplicationDto,
   RecruitmentApplicationRecruiterDto,
@@ -161,6 +162,13 @@ export async function putVenue(slug: string | number, venue: Partial<VenueDto>):
   return response.data;
 }
 
+export async function getPermissions(): Promise<PermissionDto[]> {
+  const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__permissions_list;
+  const response = await axios.get<PermissionDto[]>(url, { withCredentials: true });
+
+  return response.data;
+}
+
 export async function getInformationPages(): Promise<InformationPageDto[]> {
   const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__information_list;
   const response = await axios.get<InformationPageDto[]>(url, { withCredentials: true });
@@ -391,6 +399,33 @@ export async function getGang(id: string | number): Promise<GangDto> {
   return response.data;
 }
 
+export async function createRole(data: Partial<RoleDto>): Promise<RoleDto> {
+  const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__role_list });
+  const response = await axios.post<RoleDto>(url, data, { withCredentials: true });
+  return response.data;
+}
+
+export async function editRole(data: RoleDto): Promise<RoleDto> {
+  const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__role_detail, urlParams: { pk: data.id } });
+  const response = await axios.put<RoleDto>(url, data, { withCredentials: true });
+
+  return response.data;
+}
+
+export async function getRoles(): Promise<RoleDto[]> {
+  const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__role_list });
+  const response = await axios.get<RoleDto[]>(url, { withCredentials: true });
+
+  return response.data;
+}
+
+export async function getRole(id: number): Promise<RoleDto> {
+  const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__role_detail, urlParams: { pk: id } });
+  const response = await axios.get<RoleDto>(url, { withCredentials: true });
+
+  return response.data;
+}
+
 export async function getRecruitmentGangs(recruitmentId: string | number): Promise<RecruitmentGangDto[]> {
   const url =
     BACKEND_DOMAIN +
@@ -509,18 +544,6 @@ export async function getRecruitment(id: string): Promise<AxiosResponse<Recruitm
   return response;
 }
 
-// Issue #1520 TODO: Setup backend later. Using test data now.
-export async function getRole(id: string): Promise<RoleDto> {
-  //const url = BACKEND_DOMAIN + reverse({ pattern: ROUTES.backend.samfundet__api_, urlParams: ( pk: id ) }):
-  //const response = await axios.get(url, { withCredentials: true });
-  const role = {
-    id: 1,
-    name: 'Opptaksansvarlig',
-    permissions: ['samfundet.test_permission', 'samfundet.user_create'],
-  };
-  return role;
-}
-
 export async function postRecruitment(recruitmentData: RecruitmentDto): Promise<AxiosResponse> {
   const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__recruitment_list;
   const response = await axios.post(url, recruitmentData, { withCredentials: true });
@@ -633,7 +656,7 @@ export async function getRecruitmentPosition(positionId: string): Promise<AxiosR
   return response;
 }
 
-export async function postRecruitmentPosition(recruitmentPosition: RecruitmentPositionPutDto): Promise<AxiosResponse> {
+export async function postRecruitmentPosition(recruitmentPosition: RecruitmentPositionPostDto): Promise<AxiosResponse> {
   const url = BACKEND_DOMAIN + ROUTES.backend.samfundet__recruitment_position_list;
   const response = await axios.post(url, recruitmentPosition, { withCredentials: true });
 
@@ -642,7 +665,7 @@ export async function postRecruitmentPosition(recruitmentPosition: RecruitmentPo
 
 export async function putRecruitmentPosition(
   positionId: string,
-  recruitment: Partial<RecruitmentPositionPostDto>,
+  recruitment: Partial<RecruitmentPositionPutDto>,
 ): Promise<AxiosResponse> {
   const url =
     BACKEND_DOMAIN +
diff --git a/frontend/src/dto.ts b/frontend/src/dto.ts
index 478d4aa59..984de58b2 100644
--- a/frontend/src/dto.ts
+++ b/frontend/src/dto.ts
@@ -312,8 +312,8 @@ export type GangDto = {
   abbreviation: string;
   webpage?: string;
   logo?: string;
-  gang_type?: number;
-  info_page?: string;
+  gang_type?: number | null;
+  info_page?: string | null;
 };
 
 export type RecruitmentGangDto = GangDto & {
@@ -379,7 +379,8 @@ export type KeyValueDto = {
 export type RoleDto = {
   id: number;
   name: string;
-  permissions: string[];
+  permissions: number[];
+  content_type?: string | null;
 };
 
 export type UserGangRoleDto = {
@@ -414,6 +415,7 @@ export type RecruitmentDto = {
   organization: number | OrganizationDto;
   separate_positions?: RecruitmentSeparatePositionDto[];
   recruitment_progress?: number;
+  promo_media?: string;
 };
 
 export type RecruitmentSeparatePositionDto = {
@@ -474,9 +476,15 @@ export type RecruitmentPositionDto = {
   accepted_applicants?: number;
 };
 
-export type RecruitmentPositionPostDto = Omit<RecruitmentPositionDto, 'gang'> & { gang: { id: number } };
+export type RecruitmentPositionPostDto = Omit<RecruitmentPositionDto, 'gang' | 'id'> & {
+  gang: { id: number };
+  interviewer_ids?: number[];
+};
 
-export type RecruitmentPositionPutDto = Omit<RecruitmentPositionDto, 'gang' | 'id'> & { gang: { id: number } };
+export type RecruitmentPositionPutDto = Omit<RecruitmentPositionDto, 'gang'> & {
+  gang: { id: number };
+  interviewer_ids?: number[];
+};
 
 export type RecruitmentRecruitmentPositionDto = {
   id: number;
diff --git a/frontend/src/i18n/constants.ts b/frontend/src/i18n/constants.ts
index 009105469..6f8a67974 100644
--- a/frontend/src/i18n/constants.ts
+++ b/frontend/src/i18n/constants.ts
@@ -54,6 +54,7 @@ export const KEY = {
   // Date related:
   common_today: 'common_today',
   common_tomorrow: 'common_tomorrow',
+  pick_a_date: 'pick_a_date',
 
   // No category:
   common_url: 'common_url',
@@ -61,6 +62,7 @@ export const KEY = {
   common_yes: 'common_yes',
   common_no: 'common_no',
   common_to: 'common_to',
+  common_any: 'common_any',
   common_all: 'common_all',
   common_price: 'common_price',
   common_food: 'common_food',
@@ -83,6 +85,7 @@ export const KEY = {
   common_card: 'common_card',
   common_tags: 'common_tags',
   common_gang: 'common_gang',
+  common_section: 'common_section',
   common_next: 'common_next',
   common_open: 'common_open',
   common_send: 'common_send',
@@ -122,7 +125,7 @@ export const KEY = {
   common_email_subject: 'common_email_subject',
   common_total: 'common_total',
   common_roles: 'common_roles',
-  common_roles_view: 'common_roles_view',
+  common_role: 'common_role',
   common_guests: 'common_guests',
   common_occasion: 'common_occasion',
   common_phonenumber: 'common_phonenumber',
@@ -215,6 +218,8 @@ export const KEY = {
   //        Others        //
   // ==================== //
 
+  role_content_type: 'role_content_type',
+
   // LoginPage:
   loginpage_register: 'loginpage_register',
   loginpage_internal_login: 'loginpage_internal_login',
@@ -227,6 +232,8 @@ export const KEY = {
   contributors_page_text: 'contributors_page_text',
   contributors_page_past_developers: 'contributors_page_past_developers',
 
+  role_edit_could_not_load_permissions: 'role_edit_could_not_load_permissions',
+
   // GroupsPage:
   groupspage_gangs_text: 'groupspage_gangs_text',
   groupspage_gangs_title: 'groupspage_gangs_title',
@@ -270,6 +277,8 @@ export const KEY = {
   recruitment_position: 'recruitment_position',
   recruitment_positions: 'recruitment_positions',
   recruitment_applicant: 'recruitment_applicant',
+  recruitment_interviewer: 'recruitment_interviewer',
+  recruitment_interviewers: 'recruitment_interviewers',
   recruitment_interviews: 'recruitment_interviews',
   recruitment_no_interviews: 'recruitment_no_interviews',
   recruitment_interview_set: 'recruitment_interview_set',
@@ -312,6 +321,7 @@ export const KEY = {
   recrutment_default_application_letter: 'recrutment_default_application_letter',
   reprioritization_deadline_for_groups: 'reprioritization_deadline_for_groups',
   max_applications: 'max_applications',
+  recruitment_promo_media: 'recruitment_promo_media',
   recruitment_norwegian_applicants_only: 'recruitment_norwegian_applicants_only',
   reprioritization_deadline_for_applicant: 'reprioritization_deadline_for_applicant',
   recruitment_show_unprocessed_applicants: 'recruitment_show_unprocessed_applicants',
@@ -461,6 +471,17 @@ export const KEY = {
   notfoundpage_contact_prompt: 'notfoundpage_contact_prompt',
   saksdokumentpage_publication_date: 'saksdokumentpage_publication_date',
   eventsadminpage_successful_delete_toast: 'eventsadminpage_successful_delete_toast',
+  promo_media_description: 'promo_media_description',
+  promo_media_invalid: 'promo_media_invalid',
+
+  error_generic: 'error_generic',
+  error_generic_description: 'error_generic_description',
+  error_not_found: 'error_not_found',
+  error_not_found_description: 'error_not_found_description',
+  error_forbidden: 'error_forbidden',
+  error_forbidden_description: 'error_forbidden_description',
+  error_server_error: 'error_server_error',
+  error_server_error_description: 'error_server_error_description',
 } as const;
 
 // This will ensure that each value matches the key exactly.
diff --git a/frontend/src/i18n/translations.ts b/frontend/src/i18n/translations.ts
index 2d309e50e..09b338f5c 100644
--- a/frontend/src/i18n/translations.ts
+++ b/frontend/src/i18n/translations.ts
@@ -40,6 +40,7 @@ export const nb = prepareTranslations({
   // Date related
   [KEY.common_today]: 'I dag',
   [KEY.common_tomorrow]: 'I morgen',
+  [KEY.pick_a_date]: 'Velg en dato',
 
   // Other common
   [KEY.common_url]: 'URL',
@@ -50,6 +51,7 @@ export const nb = prepareTranslations({
   [KEY.common_all]: 'Alle',
   [KEY.common_price]: 'Pris',
   [KEY.common_food]: 'Mat',
+  [KEY.common_any]: 'Hvilken som helst',
   [KEY.common_preferences]: 'Preferanser',
   [KEY.common_buy]: 'Kjøp',
   [KEY.common_not]: 'Ikke',
@@ -66,8 +68,9 @@ export const nb = prepareTranslations({
   [KEY.common_next]: 'Neste',
   [KEY.common_save]: 'Lagre',
   [KEY.common_gang]: 'Gjeng',
-  [KEY.common_table]: 'Bord',
   [KEY.common_gangs]: 'Gjenger',
+  [KEY.common_section]: 'Seksjon',
+  [KEY.common_table]: 'Bord',
   [KEY.common_gang_type]: 'Gjengtype',
   [KEY.common_edit]: 'Rediger',
   [KEY.common_sheet]: 'Tabell',
@@ -81,7 +84,7 @@ export const nb = prepareTranslations({
   [KEY.common_login]: 'Logg inn',
   [KEY.common_users]: 'Brukere',
   [KEY.common_roles]: 'Roller',
-  [KEY.common_roles_view]: 'Rolle',
+  [KEY.common_role]: 'Rolle',
   [KEY.common_active]: 'Aktiv',
   [KEY.common_event]: 'Arrangement',
   [KEY.common_repeat]: 'Repeter',
@@ -199,6 +202,7 @@ export const nb = prepareTranslations({
   // ==================== //
   //        Others        //
   // ==================== //
+  [KEY.role_content_type]: 'Hierarkinivå',
   [KEY.admin_impersonate]: 'Stjel identitet',
   [KEY.admin_stop_impersonate]: 'Stopp identitetstyveri',
 
@@ -258,6 +262,8 @@ export const nb = prepareTranslations({
   [KEY.recruitment_not_applied]: 'Du har ikke sendt søknader til noen stillinger ennå',
   [KEY.recruitment_will_be_anonymized]: 'All info relatert til dine søknader vil bli slettet 3 uker etter opptaket',
   [KEY.recruitment_interviews]: 'Intervjuer',
+  [KEY.recruitment_interviewer]: 'Intervjuer',
+  [KEY.recruitment_interviewers]: 'Intervjuere',
   [KEY.recruitment_no_interviews]: 'Ingen intervjuer',
   [KEY.recruitment_interview_set]: 'Sett intervju',
   [KEY.recruitment_interview_groups]: 'Intervjugrupper',
@@ -301,6 +307,7 @@ export const nb = prepareTranslations({
   [KEY.recrutment_default_application_letter]: 'Standard søknadstekst',
   [KEY.reprioritization_deadline_for_groups]: 'Flaggefrist',
   [KEY.max_applications]: 'Maks søknader per bruker',
+  [KEY.recruitment_promo_media]: 'Promo video',
   [KEY.recruitment_norwegian_applicants_only]: 'Kun norsktalende søkere',
   [KEY.reprioritization_deadline_for_applicant]: 'Omprioriteringsfrist',
   [KEY.recruitment_show_unprocessed_applicants]: 'Vis ubehandlede søkere',
@@ -417,6 +424,8 @@ export const nb = prepareTranslations({
   [KEY.command_menu_shortcut_control_panel]: 'Kontrollpanel',
   [KEY.command_menu_shortcut_about_samfundet]: 'Om Samfundet',
 
+  [KEY.role_edit_could_not_load_permissions]: 'Klarte ikke laste inn tilganger',
+
   // Sulten / Lyche
   [KEY.sulten_what_is_lyche]: 'Hva er Lyche?',
   [KEY.sulten_page_see_menu]: 'Se meny',
@@ -462,6 +471,19 @@ export const nb = prepareTranslations({
   [KEY.notfoundpage_contact_prompt]: 'Hvis du tror dette er en feil, vennligst',
   [KEY.admin_saksdokumenter_cannot_reupload]: 'Det er ikke mulig å endre filen som er lastet opp.',
   [KEY.eventsadminpage_successful_delete_toast]: 'Slettingen av arrangementet var vellykket.',
+
+  [KEY.promo_media_description]: 'Lenke eller ID til en YouTube-video',
+  [KEY.promo_media_invalid]: 'Må være en gyldig lenke til en YouTube-video',
+
+  // Errors
+  [KEY.error_generic]: 'Uventet feil',
+  [KEY.error_generic_description]: 'En uventet feil oppsto, vennligst prøv igjen',
+  [KEY.error_not_found]: 'Ikke funnet',
+  [KEY.error_not_found_description]: 'Ressursen du forsøkte å hente ble ikke funnet',
+  [KEY.error_forbidden]: 'Ingen adgang',
+  [KEY.error_forbidden_description]: 'Du har ikke adgang til å se denne ressursen',
+  [KEY.error_server_error]: 'Serverfeil',
+  [KEY.error_server_error_description]: 'En serverfeil har opptstått',
 });
 
 export const en = prepareTranslations({
@@ -503,6 +525,7 @@ export const en = prepareTranslations({
   // Date related
   [KEY.common_today]: 'Today',
   [KEY.common_tomorrow]: 'Tomorrow',
+  [KEY.pick_a_date]: 'Pick a date',
 
   // No category:
   [KEY.common_url]: 'URL',
@@ -513,6 +536,7 @@ export const en = prepareTranslations({
   [KEY.common_all]: 'All',
   [KEY.common_price]: 'Price',
   [KEY.common_food]: 'Food',
+  [KEY.common_any]: 'Any',
   [KEY.common_preferences]: 'Preferences',
   [KEY.common_buy]: 'Buy',
   [KEY.common_not]: 'Not',
@@ -536,6 +560,7 @@ export const en = prepareTranslations({
   [KEY.common_gang]: 'Gang',
   [KEY.common_gangs]: 'Gangs',
   [KEY.common_gang_type]: 'Gang type',
+  [KEY.common_section]: 'Section',
   [KEY.common_max]: 'Max',
   [KEY.common_image]: 'Image',
   [KEY.common_venue]: 'Venue',
@@ -544,7 +569,7 @@ export const en = prepareTranslations({
   [KEY.common_login]: 'Log in',
   [KEY.common_users]: 'Users',
   [KEY.common_roles]: 'Roles',
-  [KEY.common_roles_view]: 'Role',
+  [KEY.common_role]: 'Role',
   [KEY.common_active]: 'Active',
   [KEY.common_cancel]: 'Cancel',
   [KEY.common_venues]: 'Venues',
@@ -662,6 +687,7 @@ export const en = prepareTranslations({
   // ==================== //
   //        Others        //
   // ==================== //
+  [KEY.role_content_type]: 'Hierarchical level',
   [KEY.admin_impersonate]: 'Impersonate',
   [KEY.admin_stop_impersonate]: 'Stop impersonation',
 
@@ -721,6 +747,8 @@ export const en = prepareTranslations({
   [KEY.recruitment_will_be_anonymized]:
     'All info related to the applications will be anonymized three weeks after the recruitment is over',
   [KEY.recruitment_interviews]: 'Interviews',
+  [KEY.recruitment_interviewer]: 'Interviewer',
+  [KEY.recruitment_interviewers]: 'Interviewers',
   [KEY.recruitment_no_interviews]: 'No interviews',
   [KEY.recruitment_interview_set]: 'Set Interview',
   [KEY.recruitment_interview_groups]: 'Interview groups',
@@ -763,6 +791,7 @@ export const en = prepareTranslations({
   [KEY.recrutment_default_application_letter]: 'Default application letter',
   [KEY.reprioritization_deadline_for_groups]: 'Group reprioritization deadline',
   [KEY.max_applications]: 'Max applications per user',
+  [KEY.recruitment_promo_media]: 'Promo video',
   [KEY.reprioritization_deadline_for_applicant]: 'Reprioritization deadline',
   [KEY.recruitment_show_unprocessed_applicants]: 'Show unprocessed applicants',
   [KEY.recruitment_show_all_applicants]: 'Show all applicants',
@@ -862,6 +891,10 @@ export const en = prepareTranslations({
   [KEY.admin_information_confirm_cancel]: 'Are you sure you want to exit without saving?',
   [KEY.admin_saksdokumenter_cannot_reupload]: 'It is not possible to change the uploaded file.',
   [KEY.eventsadminpage_successful_delete_toast]: 'Succsessfully deleted event.',
+
+  [KEY.promo_media_description]: 'Link or ID of a YouTube video',
+  [KEY.promo_media_invalid]: 'Must be a valid link to a YouTube video',
+
   [KEY.recruitment_three_interviews_criteria_header]:
     'Applicants with less than 3 interviews, but have applied to more than 3 positions',
   [KEY.recruitment_three_interviews_criteria_button]: 'Applicants with less than 3 interviews',
@@ -884,6 +917,8 @@ export const en = prepareTranslations({
   [KEY.command_menu_shortcut_control_panel]: 'Control panel',
   [KEY.command_menu_shortcut_about_samfundet]: 'About Samfundet',
 
+  [KEY.role_edit_could_not_load_permissions]: 'Could not load permissions',
+
   // Sulten / Lyche:
   [KEY.sulten_dishes]: 'Dishes',
   [KEY.sulten_lyche_goal]: 'Lyches goal',
@@ -928,4 +963,13 @@ export const en = prepareTranslations({
   [KEY.inputfile_no_file_selected]: 'No file selected',
   [KEY.notfoundpage_title]: 'Page not found',
   [KEY.notfoundpage_contact_prompt]: 'If you believe this is an error, please',
+
+  [KEY.error_generic]: 'Unexpected error',
+  [KEY.error_generic_description]: 'An unexpected error has occurred',
+  [KEY.error_not_found]: 'Not found',
+  [KEY.error_not_found_description]: 'The resource you requested was not found',
+  [KEY.error_forbidden]: 'Forbidden',
+  [KEY.error_forbidden_description]: 'You do not have permission to view this resource',
+  [KEY.error_server_error]: 'Server error',
+  [KEY.error_server_error_description]: 'A server error has occurred',
 });
diff --git a/frontend/src/router/loaders.ts b/frontend/src/router/loaders.ts
index 2104ec33f..c3c1ec630 100644
--- a/frontend/src/router/loaders.ts
+++ b/frontend/src/router/loaders.ts
@@ -23,7 +23,7 @@ export type RoleLoader = {
 };
 
 export async function roleLoader({ params }: LoaderFunctionArgs): Promise<RoleLoader> {
-  return { role: await getRole(params.roleId as string) };
+  return { role: await getRole(Number.parseInt(params.roleId as string)) };
 }
 
 export async function recruitmentLoader({ params }: LoaderFunctionArgs): Promise<RecruitmentLoader> {
diff --git a/frontend/src/router/router.tsx b/frontend/src/router/router.tsx
index a417a49eb..d14d0f017 100644
--- a/frontend/src/router/router.tsx
+++ b/frontend/src/router/router.tsx
@@ -1,5 +1,5 @@
 import { Outlet, Route, type UIMatch, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
-import { Link, PermissionRoute, ProtectedRoute, SamfOutlet, SultenOutlet } from '~/Components';
+import { Link, PermissionRoute, ProtectedRoute, RootErrorBoundary, SamfOutlet, SultenOutlet } from '~/Components';
 import {
   AboutPage,
   AdminPage,
@@ -61,6 +61,7 @@ import {
   RecruitmentUsersWithoutInterviewGangPage,
   RecruitmentUsersWithoutThreeInterviewCriteriaPage,
   RoleAdminPage,
+  RoleFormAdminPage,
   RolesAdminPage,
   RoomAdminPage,
   SaksdokumentAdminPage,
@@ -75,8 +76,8 @@ import { ROUTES } from '~/routes';
 
 import { t } from 'i18next';
 import { App } from '~/App';
+import { DynamicOrgOutlet } from '~/Components/DynamicOrgOutlet/DynamicOrgOutlet';
 import { RecruitmentRecruiterDashboardPage } from '~/PagesAdmin/RecruitmentRecruiterDashboardPage/RecruitmentRecruiterDashboardPage';
-import { RoleDto } from '~/dto';
 import { KEY } from '~/i18n/constants';
 import { reverse } from '~/named-urls';
 import {
@@ -101,34 +102,40 @@ export const router = createBrowserRouter(
         {/*
           PUBLIC ROUTES
         */}
-        <Route path={ROUTES.frontend.home} element={<HomePage />} />
-        <Route path={ROUTES.frontend.about} element={<AboutPage />} />
-        <Route path={ROUTES.frontend.venues} element={<VenuePage />} />
-        <Route path={ROUTES.frontend.health} element={<HealthPage />} />
-        <Route path={ROUTES.frontend.components} element={<ComponentPage />} />
-        <Route element={<ProtectedRoute authState={false} element={<Outlet />} />}>
-          <Route path={ROUTES.frontend.login} element={<LoginPage />} />
-          <Route path={ROUTES.frontend.signup} element={<SignUpPage />} />
+        <Route element={<Outlet />} errorElement={<RootErrorBoundary />}>
+          <Route path={ROUTES.frontend.home} element={<HomePage />} />
+          <Route path={ROUTES.frontend.about} element={<AboutPage />} />
+          <Route path={ROUTES.frontend.venues} element={<VenuePage />} />
+          <Route path={ROUTES.frontend.health} element={<HealthPage />} />
+          <Route path={ROUTES.frontend.components} element={<ComponentPage />} />
+          <Route element={<ProtectedRoute authState={false} element={<Outlet />} />}>
+            <Route path={ROUTES.frontend.login} element={<LoginPage />} />
+            <Route path={ROUTES.frontend.signup} element={<SignUpPage />} />
+          </Route>
+          <Route path={ROUTES.frontend.api_testing} element={<ApiTestingPage />} />
+          <Route path={ROUTES.frontend.information_page_detail} element={<InformationPage />} />
+          <Route path={ROUTES.frontend.information_page_list} element={<InformationListPage />} />
+          <Route path={ROUTES.frontend.groups} element={<GroupsPage />} />
+          <Route path={ROUTES.frontend.events} element={<EventsPage />} />
+          <Route path={ROUTES.frontend.event} element={<EventPage />} />
+          <Route path={ROUTES.frontend.saksdokumenter} element={<SaksdokumenterPage />} />
+          <Route path={ROUTES.frontend.route_overview} element={<RouteOverviewPage />} />
+          <Route path={ROUTES.frontend.contributors} element={<ContributorsPage />} />
+          <Route path={ROUTES.frontend.membership} element={<MembershipPage />} />
+          <Route path={ROUTES.frontend.contact} element={<div />} />
+          <Route path={ROUTES.frontend.luka} element={<div />} />
+          {/* Recruitment */}
+          <Route path={ROUTES.frontend.recruitment} element={<RecruitmentPage />} />
         </Route>
-        <Route path={ROUTES.frontend.api_testing} element={<ApiTestingPage />} />
-        <Route path={ROUTES.frontend.information_page_detail} element={<InformationPage />} />
-        <Route path={ROUTES.frontend.information_page_list} element={<InformationListPage />} />
-        <Route path={ROUTES.frontend.groups} element={<GroupsPage />} />
-        <Route path={ROUTES.frontend.events} element={<EventsPage />} />
-        <Route path={ROUTES.frontend.event} element={<EventPage />} />
-        <Route path={ROUTES.frontend.saksdokumenter} element={<SaksdokumenterPage />} />
-        <Route path={ROUTES.frontend.route_overview} element={<RouteOverviewPage />} />
-        <Route path={ROUTES.frontend.contributors} element={<ContributorsPage />} />
-        <Route path={ROUTES.frontend.recruitment} element={<RecruitmentPage />} />
+      </Route>
+      {/* Specific recruitment */}
+      <Route element={<DynamicOrgOutlet />} id="publicRecruitment" loader={recruitmentLoader}>
         <Route path={ROUTES.frontend.recruitment_application} element={<RecruitmentApplicationFormPage />} />
         <Route
           path={ROUTES.frontend.recruitment_application_overview}
           element={<RecruitmentApplicationsOverviewPage />}
         />
         <Route path={ROUTES.frontend.organization_recruitment} element={<OrganizationRecruitmentPage />} />
-        <Route path={ROUTES.frontend.membership} element={<MembershipPage />} />
-        <Route path={ROUTES.frontend.contact} element={<div />} />
-        <Route path={ROUTES.frontend.luka} element={<div />} />
       </Route>
       {/*
             ADMIN ROUTES
@@ -137,340 +144,237 @@ export const router = createBrowserRouter(
         handle={{ crumb: () => <Link url={ROUTES.frontend.admin}>{t(KEY.control_panel_title)}</Link> }}
         element={<AdminLayout />}
       >
-        <Route
-          path={ROUTES.frontend.admin}
-          element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_GANG]} element={<AdminPage />} />}
-        />
-        {/* Gangs */}
-        <Route
-          element={<Outlet />}
-          handle={{ crumb: () => <Link url={ROUTES.frontend.admin_gangs}>{t(KEY.common_gangs)}</Link> }}
-        >
-          <Route
-            path={ROUTES.frontend.admin_gangs}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_GANG]} element={<GangsAdminPage />} />}
-          />
-          <Route
-            path={ROUTES.frontend.admin_gangs_create}
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_ADD_GANG]} element={<GangsFormAdminPage />} />}
-          />
-          <Route
-            path={ROUTES.frontend.admin_gangs_edit}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_CHANGE_GANG]} element={<GangsFormAdminPage />} />}
-            loader={gangLoader}
-            handle={{
-              crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
-            }}
-          />
-        </Route>
-        {/* Users */}
-        <Route
-          element={<Outlet />}
-          handle={{ crumb: () => <Link url={ROUTES.frontend.admin_users}>{t(KEY.common_users)}</Link> }}
-        >
+        <Route element={<Outlet />} errorElement={<RootErrorBoundary />}>
           <Route
-            path={ROUTES.frontend.admin_users}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_USER]} element={<UsersAdminPage />} />}
+            path={ROUTES.frontend.admin}
+            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_GANG]} element={<AdminPage />} />}
           />
-        </Route>
-        {/* Roles */}
-        <Route
-          element={<Outlet />}
-          handle={{ crumb: () => <Link url={ROUTES.frontend.admin_roles}>{t(KEY.common_roles)}</Link> }}
-        >
-          <Route
-            path={ROUTES.frontend.admin_roles}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_ROLE]} element={<RolesAdminPage />} />}
-          />
-          <Route
-            path={ROUTES.frontend.admin_roles_view}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_ROLE]} element={<RoleAdminPage />} />}
-            loader={roleLoader}
-            handle={{
-              crumb: ({ pathname }: UIMatch, { role }: RoleLoader) => <Link url={pathname}>{role?.name}</Link>,
-            }}
-          />
-        </Route>
-        {/* Events */}
-        <Route
-          element={<Outlet />}
-          handle={{ crumb: () => <Link url={ROUTES.frontend.admin_events}>{t(KEY.common_events)}</Link> }}
-        >
-          <Route
-            path={ROUTES.frontend.admin_events}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_EVENT]} element={<EventsAdminPage />} />}
-          />
-          <Route
-            path={ROUTES.frontend.admin_events_create}
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_ADD_EVENT]} element={<EventCreatorAdminPage />} />}
-          />
-          <Route
-            path={ROUTES.frontend.admin_events_edit}
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link> }}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_CHANGE_EVENT]} element={<EventCreatorAdminPage />} />}
-          />
-        </Route>
-        {/*
-          Info pages
-          NOTE: edit/create uses custom views
-        */}
-        <Route
-          path={ROUTES.frontend.admin_information}
-          handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.information_page)}</Link> }}
-          element={
-            <PermissionRoute required={[PERM.SAMFUNDET_VIEW_INFORMATIONPAGE]} element={<InformationAdminPage />} />
-          }
-        />
-        {/* Opening hours, TODO ADD OPENING HOURS PERMISSIONS*/}
-        <Route
-          path={ROUTES.frontend.admin_opening_hours}
-          handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_opening_hours)}</Link> }}
-          element={<PermissionRoute required={[]} element={<OpeningHoursAdminPage />} />}
-        />
-        {/* Closed period */}
-        <Route
-          element={<Outlet />}
-          handle={{
-            crumb: () => <Link url={ROUTES.frontend.admin_closed}>{t(KEY.command_menu_shortcut_closed)}</Link>,
-          }}
-        >
+          {/* Gangs */}
           <Route
-            path={ROUTES.frontend.admin_closed}
-            element={
-              <PermissionRoute required={[PERM.SAMFUNDET_VIEW_CLOSEDPERIOD]} element={<ClosedPeriodAdminPage />} />
-            }
-          />
+            element={<Outlet />}
+            handle={{ crumb: () => <Link url={ROUTES.frontend.admin_gangs}>{t(KEY.common_gangs)}</Link> }}
+          >
+            <Route
+              path={ROUTES.frontend.admin_gangs}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_GANG]} element={<GangsAdminPage />} />}
+            />
+            <Route
+              path={ROUTES.frontend.admin_gangs_create}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_ADD_GANG]} element={<GangsFormAdminPage />} />}
+            />
+            <Route
+              path={ROUTES.frontend.admin_gangs_edit}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_CHANGE_GANG]} element={<GangsFormAdminPage />} />}
+              loader={gangLoader}
+              handle={{
+                crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
+              }}
+            />
+          </Route>
+          {/* Users */}
           <Route
-            path={ROUTES.frontend.admin_closed_create}
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
-            element={
-              <PermissionRoute required={[PERM.SAMFUNDET_ADD_CLOSEDPERIOD]} element={<ClosedPeriodFormAdminPage />} />
-            }
-          />
+            element={<Outlet />}
+            handle={{ crumb: () => <Link url={ROUTES.frontend.admin_users}>{t(KEY.common_users)}</Link> }}
+          >
+            <Route
+              path={ROUTES.frontend.admin_users}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_USER]} element={<UsersAdminPage />} />}
+            />
+          </Route>
+          {/* Roles */}
           <Route
-            path={ROUTES.frontend.admin_closed_edit}
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link> }}
-            element={
-              <PermissionRoute
-                required={[PERM.SAMFUNDET_CHANGE_CLOSEDPERIOD]}
-                element={<ClosedPeriodFormAdminPage />}
+            element={<Outlet />}
+            handle={{ crumb: () => <Link url={ROUTES.frontend.admin_roles}>{t(KEY.common_roles)}</Link> }}
+          >
+            <Route
+              path={ROUTES.frontend.admin_roles}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_ROLE]} element={<RolesAdminPage />} />}
+            />
+            <Route
+              path={ROUTES.frontend.admin_roles_create}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_ADD_ROLE]} element={<RoleFormAdminPage />} />}
+            />
+            <Route
+              id="role"
+              element={<Outlet />}
+              loader={roleLoader}
+              handle={{
+                crumb: (_: UIMatch, { role }: RoleLoader) => (
+                  <Link url={reverse({ pattern: ROUTES.frontend.admin_roles_view, urlParams: { roleId: role?.id } })}>
+                    {role?.name}
+                  </Link>
+                ),
+              }}
+            >
+              <Route
+                path={ROUTES.frontend.admin_roles_view}
+                element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_ROLE]} element={<RoleAdminPage />} />}
               />
-            }
-          />
-        </Route>
-        {/* Images */}
-        <Route
-          element={<Outlet />}
-          handle={{ crumb: () => <Link url={ROUTES.frontend.admin_images}>{t(KEY.admin_images_title)}</Link> }}
-        >
-          <Route
-            path={ROUTES.frontend.admin_images}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_IMAGE]} element={<ImageAdminPage />} />}
-          />
-          <Route
-            path={ROUTES.frontend.admin_images_create}
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
-            element={<PermissionRoute required={[PERM.SAMFUNDET_ADD_IMAGE]} element={<ImageFormAdminPage />} />}
-          />
-        </Route>
-        {/* Saksdokumenter */}
-        <Route
-          element={<Outlet />}
-          handle={{ crumb: () => <Link url={ROUTES.frontend.admin_saksdokumenter}>{t(KEY.admin_saksdokument)}</Link> }}
-        >
-          <Route
-            path={ROUTES.frontend.admin_saksdokumenter}
-            element={
-              <PermissionRoute required={[PERM.SAMFUNDET_VIEW_SAKSDOKUMENT]} element={<SaksdokumentAdminPage />} />
-            }
-          />
-          <Route
-            path={ROUTES.frontend.admin_saksdokumenter_create}
-            handle={{
-              crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link>,
-            }}
-            element={
-              <PermissionRoute required={[PERM.SAMFUNDET_ADD_SAKSDOKUMENT]} element={<SaksdokumentFormAdminPage />} />
-            }
-          />
-          <Route
-            path={ROUTES.frontend.admin_saksdokumenter_edit}
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link> }}
-            element={
-              <PermissionRoute
-                required={[PERM.SAMFUNDET_CHANGE_SAKSDOKUMENT]}
-                element={<SaksdokumentFormAdminPage />}
+              <Route
+                path={ROUTES.frontend.admin_roles_edit}
+                element={<PermissionRoute required={[PERM.SAMFUNDET_CHANGE_ROLE]} element={<RoleFormAdminPage />} />}
+                handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link> }}
               />
-            }
-          />
-        </Route>
-        <Route
-          path={ROUTES.frontend.admin_sulten_menu}
-          handle={{
-            crumb: ({ pathname }: UIMatch) => (
-              <Link url={pathname}>
-                {t(KEY.common_sulten)} {t(KEY.common_menu)}
-              </Link>
-            ),
-          }}
-          element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_MENU]} element={<SultenMenuAdminPage />} />}
-        />
-        <Route
-          path={ROUTES.frontend.admin_sulten_menuitem_create}
-          element={
-            <PermissionRoute required={[PERM.SAMFUNDET_ADD_MENUITEM]} element={<SultenMenuItemFormAdminPage />} />
-          }
-        />
-        <Route
-          path={ROUTES.frontend.admin_sulten_menuitem_edit}
-          element={
-            <PermissionRoute required={[PERM.SAMFUNDET_CHANGE_MENUITEM]} element={<SultenMenuItemFormAdminPage />} />
-          }
-        />
-        {/* Recruitment */}
-        <Route
-          element={<Outlet />}
-          path={ROUTES.frontend.admin_recruitment}
-          handle={{ crumb: () => <Link url={ROUTES.frontend.admin_recruitment}>{t(KEY.common_recruitment)}</Link> }}
-        >
-          <Route
-            path={ROUTES.frontend.admin_recruitment}
-            element={
-              <PermissionRoute required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]} element={<RecruitmentAdminPage />} />
-            }
-          />
-          <Route
-            path={ROUTES.frontend.admin_recruitment_overview}
-            element={
-              <PermissionRoute required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]} element={<RecruitmentOverviewPage />} />
-            }
-          />
-          <Route
-            path={ROUTES.frontend.admin_recruitment_create}
-            element={
-              <PermissionRoute required={[PERM.SAMFUNDET_ADD_RECRUITMENT]} element={<RecruitmentFormAdminPage />} />
-            }
-            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
-          />
-          <Route
-            path={ROUTES.frontend.admin_recruitment_gang_all_applications}
-            element={<RecruitmentGangAllApplicantsAdminPage />}
-          />
-          <Route
-            path={ROUTES.frontend.admin_recruitment_gang_users_without_interview}
-            element={<RecruitmentUsersWithoutInterviewGangPage />}
-          />
+            </Route>
+          </Route>
+          {/* Events */}
           <Route
-            path={ROUTES.frontend.admin_recruitment_users_three_interview_criteria}
-            element={<RecruitmentUsersWithoutThreeInterviewCriteriaPage />}
-          />
+            element={<Outlet />}
+            handle={{ crumb: () => <Link url={ROUTES.frontend.admin_events}>{t(KEY.common_events)}</Link> }}
+          >
+            <Route
+              path={ROUTES.frontend.admin_events}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_EVENT]} element={<EventsAdminPage />} />}
+            />
+            <Route
+              path={ROUTES.frontend.admin_events_create}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_ADD_EVENT]} element={<EventCreatorAdminPage />} />}
+            />
+            <Route
+              path={ROUTES.frontend.admin_events_edit}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link> }}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_CHANGE_EVENT]} element={<EventCreatorAdminPage />} />}
+            />
+          </Route>
+          {/*
+            Info pages
+            NOTE: edit/create uses custom views
+          */}
           <Route
-            path={ROUTES.frontend.admin_recruitment_applicant}
+            path={ROUTES.frontend.admin_information}
+            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.information_page)}</Link> }}
             element={
-              <PermissionRoute
-                required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]}
-                element={<RecruitmentApplicantAdminPage />}
-              />
+              <PermissionRoute required={[PERM.SAMFUNDET_VIEW_INFORMATIONPAGE]} element={<InformationAdminPage />} />
             }
           />
+          {/* Opening hours, TODO ADD OPENING HOURS PERMISSIONS*/}
           <Route
-            path={ROUTES.frontend.admin_recruitment_gang_position_applicants_interview_notes}
-            element={<InterviewNotesPage />}
+            path={ROUTES.frontend.admin_opening_hours}
+            handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_opening_hours)}</Link> }}
+            element={<PermissionRoute required={[]} element={<OpeningHoursAdminPage />} />}
           />
-          {/* Specific recruitment */}
-          {/* TODO ADD PERMISSIONS */}
+          {/* Closed period */}
           <Route
             element={<Outlet />}
-            id="recruitment"
-            loader={recruitmentLoader}
             handle={{
-              crumb: ({ params }: UIMatch, { recruitment }: RecruitmentLoader) => (
-                <Link
-                  url={reverse({
-                    pattern: ROUTES.frontend.admin_recruitment_gang_overview,
-                    urlParams: params,
-                  })}
-                >
-                  {recruitment ? dbT(recruitment, 'name') : t(KEY.common_unknown)}
-                </Link>
-              ),
+              crumb: () => <Link url={ROUTES.frontend.admin_closed}>{t(KEY.command_menu_shortcut_closed)}</Link>,
             }}
           >
             <Route
-              path={ROUTES.frontend.admin_recruitment_edit}
+              path={ROUTES.frontend.admin_closed}
               element={
-                <PermissionRoute
-                  required={[PERM.SAMFUNDET_CHANGE_RECRUITMENT]}
-                  element={<RecruitmentFormAdminPage />}
-                />
+                <PermissionRoute required={[PERM.SAMFUNDET_VIEW_CLOSEDPERIOD]} element={<ClosedPeriodAdminPage />} />
               }
-              handle={{
-                crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
-              }}
             />
             <Route
-              path={ROUTES.frontend.admin_recruitment_recruiter_dashboard}
-              element={<RecruitmentRecruiterDashboardPage />}
-              handle={{
-                crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.recruitment_recruiter_dashboard)}</Link>,
-              }}
+              path={ROUTES.frontend.admin_closed_create}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
+              element={
+                <PermissionRoute required={[PERM.SAMFUNDET_ADD_CLOSEDPERIOD]} element={<ClosedPeriodFormAdminPage />} />
+              }
             />
             <Route
-              path={ROUTES.frontend.admin_recruitment_gang_separateposition_create}
+              path={ROUTES.frontend.admin_closed_edit}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link> }}
               element={
                 <PermissionRoute
-                  required={[PERM.SAMFUNDET_ADD_RECRUITMENTSEPARATEPOSITION]}
-                  element={<RecruitmentSeparatePositionFormAdminPage />}
+                  required={[PERM.SAMFUNDET_CHANGE_CLOSEDPERIOD]}
+                  element={<ClosedPeriodFormAdminPage />}
                 />
               }
+            />
+          </Route>
+          {/* Images */}
+          <Route
+            element={<Outlet />}
+            handle={{ crumb: () => <Link url={ROUTES.frontend.admin_images}>{t(KEY.admin_images_title)}</Link> }}
+          >
+            <Route
+              path={ROUTES.frontend.admin_images}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_IMAGE]} element={<ImageAdminPage />} />}
+            />
+            <Route
+              path={ROUTES.frontend.admin_images_create}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
+              element={<PermissionRoute required={[PERM.SAMFUNDET_ADD_IMAGE]} element={<ImageFormAdminPage />} />}
+            />
+          </Route>
+          {/* Saksdokumenter */}
+          <Route
+            element={<Outlet />}
+            handle={{
+              crumb: () => <Link url={ROUTES.frontend.admin_saksdokumenter}>{t(KEY.admin_saksdokument)}</Link>,
+            }}
+          >
+            <Route
+              path={ROUTES.frontend.admin_saksdokumenter}
+              element={
+                <PermissionRoute required={[PERM.SAMFUNDET_VIEW_SAKSDOKUMENT]} element={<SaksdokumentAdminPage />} />
+              }
+            />
+            <Route
+              path={ROUTES.frontend.admin_saksdokumenter_create}
               handle={{
-                crumb: ({ pathname }: UIMatch) => (
-                  <Link url={pathname}>
-                    {t(KEY.common_create)} {t(KEY.recruitment_gangs_with_separate_positions)}
-                  </Link>
-                ),
+                crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link>,
               }}
+              element={
+                <PermissionRoute required={[PERM.SAMFUNDET_ADD_SAKSDOKUMENT]} element={<SaksdokumentFormAdminPage />} />
+              }
             />
             <Route
-              path={ROUTES.frontend.admin_recruitment_gang_separateposition_edit}
+              path={ROUTES.frontend.admin_saksdokumenter_edit}
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link> }}
               element={
                 <PermissionRoute
-                  required={[PERM.SAMFUNDET_CHANGE_RECRUITMENTSEPARATEPOSITION]}
-                  element={<RecruitmentSeparatePositionFormAdminPage />}
+                  required={[PERM.SAMFUNDET_CHANGE_SAKSDOKUMENT]}
+                  element={<SaksdokumentFormAdminPage />}
                 />
               }
-              loader={separatePositionLoader}
-              handle={{
-                crumb: ({ pathname }: UIMatch, { separatePosition }: SeparatePositionLoader) => (
-                  <Link url={pathname}>
-                    {t(KEY.common_edit)} {t(KEY.recruitment_gangs_with_separate_positions)} -{' '}
-                    {separatePosition ? dbT(separatePosition, 'name') : t(KEY.common_unknown)}
-                  </Link>
-                ),
-              }}
             />
+          </Route>
+          <Route
+            path={ROUTES.frontend.admin_sulten_menu}
+            handle={{
+              crumb: ({ pathname }: UIMatch) => (
+                <Link url={pathname}>
+                  {t(KEY.common_sulten)} {t(KEY.common_menu)}
+                </Link>
+              ),
+            }}
+            element={<PermissionRoute required={[PERM.SAMFUNDET_VIEW_MENU]} element={<SultenMenuAdminPage />} />}
+          />
+          <Route
+            path={ROUTES.frontend.admin_sulten_menuitem_create}
+            element={
+              <PermissionRoute required={[PERM.SAMFUNDET_ADD_MENUITEM]} element={<SultenMenuItemFormAdminPage />} />
+            }
+          />
+          <Route
+            path={ROUTES.frontend.admin_sulten_menuitem_edit}
+            element={
+              <PermissionRoute required={[PERM.SAMFUNDET_CHANGE_MENUITEM]} element={<SultenMenuItemFormAdminPage />} />
+            }
+          />
+          {/* Recruitment */}
+          <Route
+            element={<Outlet />}
+            path={ROUTES.frontend.admin_recruitment}
+            handle={{ crumb: () => <Link url={ROUTES.frontend.admin_recruitment}>{t(KEY.common_recruitment)}</Link> }}
+          >
             <Route
-              path={ROUTES.frontend.admin_recruitment_show_unprocessed_applicants}
-              element={<RecruitmentUnprocessedApplicantsPage />}
-              loader={recruitmentLoader}
-              handle={{
-                crumb: ({ pathname }: UIMatch) => (
-                  <Link url={pathname}>{t(KEY.recruitment_show_unprocessed_applicants)}</Link>
-                ),
-              }}
+              path={ROUTES.frontend.admin_recruitment}
+              element={
+                <PermissionRoute required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]} element={<RecruitmentAdminPage />} />
+              }
             />
-
             <Route
-              path={ROUTES.frontend.admin_recruitment_users_without_interview}
-              element={<RecruitmentUsersWithoutInterviewGangPage />}
-              loader={recruitmentLoader}
-              handle={{
-                crumb: ({ pathname }: UIMatch) => (
-                  <Link url={pathname}>{t(KEY.recruitment_show_applicants_without_interview)}</Link>
-                ),
-              }}
+              path={ROUTES.frontend.admin_recruitment_overview}
+              element={
+                <PermissionRoute required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]} element={<RecruitmentOverviewPage />} />
+              }
             />
             <Route
               path={ROUTES.frontend.admin_recruitment_sharedinterviewgroup_create}
@@ -487,127 +391,264 @@ export const router = createBrowserRouter(
                 crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.recruitment_applet_room_overview)}</Link>,
               }}
             />
-            <Route path={ROUTES.frontend.admin_recruitment_room_create} element={<CreateInterviewRoomPage />} />
-            <Route path={ROUTES.frontend.admin_recruitment_room_edit} element={<CreateInterviewRoomPage />} />
             <Route
-              path={ROUTES.frontend.admin_recruitment_gang_overview}
-              element={<PermissionRoute required={[]} element={<RecruitmentGangOverviewPage />} />}
+              path={ROUTES.frontend.admin_recruitment_create}
+              element={
+                <PermissionRoute required={[PERM.SAMFUNDET_ADD_RECRUITMENT]} element={<RecruitmentFormAdminPage />} />
+              }
+              handle={{ crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_create)}</Link> }}
+            />
+            <Route
+              path={ROUTES.frontend.admin_recruitment_gang_all_applications}
+              element={<RecruitmentGangAllApplicantsAdminPage />}
             />
             <Route
               path={ROUTES.frontend.admin_recruitment_gang_users_without_interview}
               element={<RecruitmentUsersWithoutInterviewGangPage />}
-              loader={recruitmentGangLoader}
-              handle={{
-                crumb: ({ pathname }: UIMatch) => (
-                  <Link url={pathname}>{t(KEY.recruitment_show_applicants_without_interview)}</Link>
-                ),
-              }}
             />
             <Route
-              path={ROUTES.frontend.admin_recruitment_open_to_other_positions}
+              path={ROUTES.frontend.admin_recruitment_users_three_interview_criteria}
+              element={<RecruitmentUsersWithoutThreeInterviewCriteriaPage />}
+            />
+            <Route
+              path={ROUTES.frontend.admin_recruitment_applicant}
               element={
                 <PermissionRoute
                   required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]}
-                  element={<RecruitmentOpenToOtherPositionsPage />}
+                  element={<RecruitmentApplicantAdminPage />}
                 />
               }
-              handle={{
-                crumb: ({ pathname }: UIMatch) => (
-                  <Link url={pathname}>{t(KEY.recruitment_applicants_open_to_other_positions)}</Link>
-                ),
-              }}
             />
+            <Route
+              path={ROUTES.frontend.admin_recruitment_gang_position_applicants_interview_notes}
+              element={<InterviewNotesPage />}
+            />
+            {/* Specific recruitment */}
+            {/* TODO ADD PERMISSIONS */}
             <Route
               element={<Outlet />}
-              loader={gangLoader}
+              id="recruitment"
+              loader={recruitmentLoader}
               handle={{
-                crumb: ({ params }: UIMatch, { gang }: GangLoader) => (
+                crumb: ({ params }: UIMatch, { recruitment }: RecruitmentLoader) => (
                   <Link
                     url={reverse({
-                      pattern: ROUTES.frontend.admin_recruitment_gang_position_overview,
+                      pattern: ROUTES.frontend.admin_recruitment_gang_overview,
                       urlParams: params,
                     })}
                   >
-                    {gang ? dbT(gang, 'name') : t(KEY.common_unknown)}
+                    {recruitment ? dbT(recruitment, 'name') : t(KEY.common_unknown)}
                   </Link>
                 ),
               }}
             >
               <Route
-                path={ROUTES.frontend.admin_recruitment_gang_position_overview}
-                element={<PermissionRoute required={[]} element={<RecruitmentGangAdminPage />} />}
+                path={ROUTES.frontend.admin_recruitment_edit}
+                element={
+                  <PermissionRoute
+                    required={[PERM.SAMFUNDET_CHANGE_RECRUITMENT]}
+                    element={<RecruitmentFormAdminPage />}
+                  />
+                }
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
+                }}
+              />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_recruiter_dashboard}
+                element={<RecruitmentRecruiterDashboardPage />}
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{t(KEY.recruitment_recruiter_dashboard)}</Link>
+                  ),
+                }}
               />
               <Route
-                path={ROUTES.frontend.admin_recruitment_gang_position_create}
-                element={<PermissionRoute required={[]} element={<RecruitmentPositionFormAdminPage />} />}
-                loader={recruitmentGangLoader}
+                path={ROUTES.frontend.admin_recruitment_gang_separateposition_create}
+                element={
+                  <PermissionRoute
+                    required={[PERM.SAMFUNDET_ADD_RECRUITMENTSEPARATEPOSITION]}
+                    element={<RecruitmentSeparatePositionFormAdminPage />}
+                  />
+                }
                 handle={{
                   crumb: ({ pathname }: UIMatch) => (
                     <Link url={pathname}>
-                      {lowerCapitalize(`${t(KEY.common_create)} ${t(KEY.recruitment_position)}`)}
+                      {t(KEY.common_create)} {t(KEY.recruitment_gangs_with_separate_positions)}
+                    </Link>
+                  ),
+                }}
+              />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_gang_separateposition_edit}
+                element={
+                  <PermissionRoute
+                    required={[PERM.SAMFUNDET_CHANGE_RECRUITMENTSEPARATEPOSITION]}
+                    element={<RecruitmentSeparatePositionFormAdminPage />}
+                  />
+                }
+                loader={separatePositionLoader}
+                handle={{
+                  crumb: ({ pathname }: UIMatch, { separatePosition }: SeparatePositionLoader) => (
+                    <Link url={pathname}>
+                      {t(KEY.common_edit)} {t(KEY.recruitment_gangs_with_separate_positions)} -{' '}
+                      {separatePosition ? dbT(separatePosition, 'name') : t(KEY.common_unknown)}
                     </Link>
                   ),
                 }}
               />
-              {/* Position */}
+              <Route
+                path={ROUTES.frontend.admin_recruitment_show_unprocessed_applicants}
+                element={<RecruitmentUnprocessedApplicantsPage />}
+                loader={recruitmentLoader}
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{t(KEY.recruitment_show_unprocessed_applicants)}</Link>
+                  ),
+                }}
+              />
+
+              <Route
+                path={ROUTES.frontend.admin_recruitment_users_without_interview}
+                element={<RecruitmentUsersWithoutInterviewGangPage />}
+                loader={recruitmentLoader}
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{t(KEY.recruitment_show_applicants_without_interview)}</Link>
+                  ),
+                }}
+              />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_room_overview}
+                element={<RoomAdminPage />}
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{t(KEY.recruitment_applet_room_overview)}</Link>
+                  ),
+                }}
+              />
+              <Route path={ROUTES.frontend.admin_recruitment_room_create} element={<CreateInterviewRoomPage />} />
+              <Route path={ROUTES.frontend.admin_recruitment_room_edit} element={<CreateInterviewRoomPage />} />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_gang_overview}
+                element={<PermissionRoute required={[]} element={<RecruitmentGangOverviewPage />} />}
+              />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_gang_users_without_interview}
+                element={<RecruitmentUsersWithoutInterviewGangPage />}
+                loader={recruitmentGangLoader}
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{t(KEY.recruitment_show_applicants_without_interview)}</Link>
+                  ),
+                }}
+              />
+              <Route
+                path={ROUTES.frontend.admin_recruitment_open_to_other_positions}
+                element={
+                  <PermissionRoute
+                    required={[PERM.SAMFUNDET_VIEW_RECRUITMENT]}
+                    element={<RecruitmentOpenToOtherPositionsPage />}
+                  />
+                }
+                handle={{
+                  crumb: ({ pathname }: UIMatch) => (
+                    <Link url={pathname}>{t(KEY.recruitment_applicants_open_to_other_positions)}</Link>
+                  ),
+                }}
+              />
               <Route
                 element={<Outlet />}
-                loader={recruitmentGangPositionLoader}
+                loader={gangLoader}
                 handle={{
-                  crumb: ({ params }: UIMatch, { position }: RecruitmentLoader & GangLoader & PositionLoader) => (
+                  crumb: ({ params }: UIMatch, { gang }: GangLoader) => (
                     <Link
                       url={reverse({
-                        pattern: ROUTES.frontend.admin_recruitment_gang_position_applicants_overview,
+                        pattern: ROUTES.frontend.admin_recruitment_gang_position_overview,
                         urlParams: params,
                       })}
                     >
-                      {position ? dbT(position, 'name') : t(KEY.common_unknown)}
+                      {gang ? dbT(gang, 'name') : t(KEY.common_unknown)}
                     </Link>
                   ),
                 }}
               >
                 <Route
-                  path={ROUTES.frontend.admin_recruitment_gang_position_applicants_overview}
-                  element={<PermissionRoute required={[]} element={<RecruitmentPositionOverviewPage />} />}
+                  path={ROUTES.frontend.admin_recruitment_gang_position_overview}
+                  element={<PermissionRoute required={[]} element={<RecruitmentGangAdminPage />} />}
                 />
                 <Route
-                  path={ROUTES.frontend.admin_recruitment_gang_position_edit}
+                  path={ROUTES.frontend.admin_recruitment_gang_position_create}
                   element={<PermissionRoute required={[]} element={<RecruitmentPositionFormAdminPage />} />}
-                  loader={recruitmentGangPositionLoader}
+                  loader={recruitmentGangLoader}
                   handle={{
-                    crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
+                    crumb: ({ pathname }: UIMatch) => (
+                      <Link url={pathname}>
+                        {lowerCapitalize(`${t(KEY.common_create)} ${t(KEY.recruitment_position)}`)}
+                      </Link>
+                    ),
                   }}
                 />
+                {/* Position */}
+                <Route
+                  element={<Outlet />}
+                  loader={recruitmentGangPositionLoader}
+                  handle={{
+                    crumb: ({ params }: UIMatch, { position }: RecruitmentLoader & GangLoader & PositionLoader) => (
+                      <Link
+                        url={reverse({
+                          pattern: ROUTES.frontend.admin_recruitment_gang_position_applicants_overview,
+                          urlParams: params,
+                        })}
+                      >
+                        {position ? dbT(position, 'name') : t(KEY.common_unknown)}
+                      </Link>
+                    ),
+                  }}
+                >
+                  <Route
+                    path={ROUTES.frontend.admin_recruitment_gang_position_applicants_overview}
+                    element={<PermissionRoute required={[]} element={<RecruitmentPositionOverviewPage />} />}
+                  />
+                  <Route
+                    path={ROUTES.frontend.admin_recruitment_gang_position_edit}
+                    element={<PermissionRoute required={[]} element={<RecruitmentPositionFormAdminPage />} />}
+                    loader={recruitmentGangPositionLoader}
+                    handle={{
+                      crumb: ({ pathname }: UIMatch) => <Link url={pathname}>{t(KEY.common_edit)}</Link>,
+                    }}
+                  />
+                </Route>
               </Route>
             </Route>
           </Route>
+          {/* Sulten Admin */}
+          <Route
+            path={ROUTES.frontend.admin_sulten_reservations}
+            element={
+              <PermissionRoute required={[PERM.SAMFUNDET_VIEW_RESERVATION]} element={<SultenReservationAdminPage />} />
+            }
+          />
+          {/*
+            Info pages
+            Custom layout for edit/create
+          */}
+          <Route
+            path={ROUTES.frontend.admin_information_create}
+            element={
+              <PermissionRoute required={[PERM.SAMFUNDET_ADD_INFORMATIONPAGE]} element={<InformationFormAdminPage />} />
+            }
+          />
+          <Route
+            path={ROUTES.frontend.admin_information_edit}
+            element={
+              <PermissionRoute
+                required={[PERM.SAMFUNDET_CHANGE_INFORMATIONPAGE]}
+                element={<InformationFormAdminPage />}
+              />
+            }
+          />
         </Route>
-        {/* Sulten Admin */}
-        <Route
-          path={ROUTES.frontend.admin_sulten_reservations}
-          element={
-            <PermissionRoute required={[PERM.SAMFUNDET_VIEW_RESERVATION]} element={<SultenReservationAdminPage />} />
-          }
-        />
-        {/*
-        Info pages
-        Custom layout for edit/create
-      */}
-        <Route
-          path={ROUTES.frontend.admin_information_create}
-          element={
-            <PermissionRoute required={[PERM.SAMFUNDET_ADD_INFORMATIONPAGE]} element={<InformationFormAdminPage />} />
-          }
-        />
-        <Route
-          path={ROUTES.frontend.admin_information_edit}
-          element={
-            <PermissionRoute
-              required={[PERM.SAMFUNDET_CHANGE_INFORMATIONPAGE]}
-              element={<InformationFormAdminPage />}
-            />
-          }
-        />
       </Route>
       {/*
             SULTEN ROUTES
diff --git a/frontend/src/routes/frontend.ts b/frontend/src/routes/frontend.ts
index 840452603..f7357bbda 100644
--- a/frontend/src/routes/frontend.ts
+++ b/frontend/src/routes/frontend.ts
@@ -44,6 +44,8 @@ export const ROUTES_FRONTEND = {
   // Roles
   admin_roles: '/control-panel/roles/',
   admin_roles_view: '/control-panel/roles/:roleId/',
+  admin_roles_edit: '/control-panel/roles/:roleId/edit/',
+  admin_roles_create: '/control-panel/roles/create/',
   // Gangs:
   admin_gangs: '/control-panel/gangs/',
   admin_gangs_create: '/control-panel/gangs/create/',
diff --git a/frontend/src/schema/role.ts b/frontend/src/schema/role.ts
new file mode 100644
index 000000000..ad5fcd4cf
--- /dev/null
+++ b/frontend/src/schema/role.ts
@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const ROLE_NAME = z.string().min(1);
+
+const contentTypes = ['', 'organization', 'gang', 'section'] as const;
+
+export const ROLE_CONTENT_TYPE = z.enum(contentTypes);
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
index 6aade2554..8e1d50750 100644
--- a/frontend/src/utils.ts
+++ b/frontend/src/utils.ts
@@ -366,3 +366,7 @@ export function immutableSet(list: unknown[], oldValue: unknown, newValue: unkno
   });
 }
 */
+
+export function IsNumber(value: unknown): value is number {
+  return typeof value === 'number';
+}