diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index a8955a45..67574b27 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -49,6 +49,7 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
+    "axios": "^1.6.8",
     "eslint": "^8.50.0",
     "eslint-plugin-github-commit-hash": "^1.0.3",
     "eslint-plugin-import": "^2.27.5",
@@ -58,7 +59,6 @@
     "prettier": "^3.1.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vue-tsc": "^2.0.29",
-    "axios": "^1.6.8"
+    "vue-tsc": "^2.0.29"
   }
 }
diff --git a/apps/dashboard/src/components/ChangeInfoComponent.vue b/apps/dashboard/src/components/ChangeInfoComponent.vue
deleted file mode 100644
index 3582b6ce..00000000
--- a/apps/dashboard/src/components/ChangeInfoComponent.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<!-- TODO unused? -->
-<!-- https://github.com/GEWIS/sudosos-frontend/issues/228 -->
-<template>
-  <CardComponent :header="t('profile.changeUserInfo')" :class="{ 'opacity-30': !isLocal}">
-    <form @submit="changeUserInfo">
-      <small v-if="!isLocal">{{ t('profile.notManagedThroughSudoSOS') }}</small>
-      <div class="field">
-        <p>{{ t('profile.firstName')}}</p>
-        <InputText :disabled="!isLocal" v-bind="firstName" />
-        <small class="warning">{{errors.firstName || '&nbsp;'}}</small>
-      </div>
-      <div class="field">
-        <p>{{ t('profile.lastName')}}</p>
-        <InputText :disabled="!isLocal" v-bind="lastName" />
-        <small class="warning">{{errors.lastName || '&nbsp;'}}</small>
-      </div>
-      <div class="field">
-        <p>{{ t('profile.emailAddress')}}</p>
-        <InputText :disabled="!isLocal" v-bind="email" />
-        <small class="warning">{{errors.email || '&nbsp;'}}</small>
-      </div>
-      <div style="margin-top: 1rem" class="flex justify-content-end">
-        <Button :disabled="!isLocal" :label="t('profile.updateInfo')" type="submit" />
-      </div>
-    </form>
-  </CardComponent>
-</template>
-
-<script setup lang="ts">
-import CardComponent from "@/components/CardComponent.vue";
-import { useForm } from "vee-validate";
-import { useUserStore } from "@sudosos/sudosos-frontend-common";
-import { useToast } from "primevue/usetoast";
-import { useI18n } from "vue-i18n";
-import { simpleUserDetailsSchema } from "@/utils/validation-schema";
-import { onBeforeMount } from "vue";
-import apiService from "@/services/ApiService";
-import { handleError } from "@/utils/errorUtils";
-
-const toast = useToast();
-const userStore = useUserStore();
-const { t } = useI18n();
-
-let isLocal = false;
-if(userStore.getCurrentUser.user) {
-  isLocal = (userStore.getCurrentUser.user.type == "LOCAL_USER");
-}
-
-const { defineComponentBinds, handleSubmit, errors, setValues } = useForm({
-  validationSchema: simpleUserDetailsSchema,
-});
-
-const firstName = defineComponentBinds('firstName', {});
-const lastName = defineComponentBinds('lastName', {});
-const email = defineComponentBinds('email', {});
-
-onBeforeMount(() => {
-  setValues({
-      firstName: userStore.getCurrentUser.user?.firstName,
-      lastName: userStore.getCurrentUser.user?.lastName,
-      email: userStore.getCurrentUser.user?.email,
-    }
-  );
-});
-const changeUserInfo = handleSubmit(async (values) => {
-  if (userStore.getCurrentUser.user) {
-    apiService.user.updateUser(userStore.getCurrentUser.user.id, {
-      firstName: values.firstName,
-      lastName: values.lastName,
-      email: values.email,
-    }).then(() => {
-      toast.add({
-        severity: "success",
-        summary: "Success",
-        detail: `${t('userDetails.userInfoUpdated')}`,
-        life: 3000,
-      });
-    }).catch((err) => {
-      handleError(err, toast);
-    });
-  }
-});
-
-
-</script>
-
-<style scoped>
-.warning {
-  color: red; /* Set the error text color to red */
-  margin-top: 4px; /* Add some space between the input and the error text */
-}
-</style>
diff --git a/apps/dashboard/src/components/FormCard.vue b/apps/dashboard/src/components/FormCard.vue
index cbdabce1..b5fde183 100644
--- a/apps/dashboard/src/components/FormCard.vue
+++ b/apps/dashboard/src/components/FormCard.vue
@@ -1,7 +1,7 @@
 <template>
   <CardComponent :header="header">
     <template #topAction>
-      <div v-if="showEdit">
+      <div v-if="showEdit" class="mx-2">
         <div v-if="!edit">
           <Button
               severity="primary"
diff --git a/apps/dashboard/src/components/FormInput.vue b/apps/dashboard/src/components/FormInput.vue
index 28ab4320..7d16f58c 100644
--- a/apps/dashboard/src/components/FormInput.vue
+++ b/apps/dashboard/src/components/FormInput.vue
@@ -19,7 +19,6 @@ import { ref, watch, onMounted, type PropType } from 'vue';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Calendar from 'primevue/calendar';
-import type { Ref } from "vue";
 import ErrorSpan from "@/components/ErrorSpan.vue";
 
 const props = defineProps({
diff --git a/apps/dashboard/src/components/InputSpan.vue b/apps/dashboard/src/components/InputSpan.vue
index 5ff9abea..b08e1e1d 100644
--- a/apps/dashboard/src/components/InputSpan.vue
+++ b/apps/dashboard/src/components/InputSpan.vue
@@ -28,7 +28,6 @@
                 :placeholder="placeholder"
                 v-model="internalValue as number"
                 :disabled="disabled"/>
-
       <InputNumber v-if="type === 'percentage'"
                    mode="decimal"
                    :min="0.0"
@@ -37,11 +36,16 @@
                    v-model="internalValue as number"
                    :disabled="disabled"
                    suffix="%"/>
-
       <InputSwitch v-if="type === 'boolean'"
                    v-model="internalValue as boolean"
                    :disabled="disabled"/>
-
+      <Dropdown v-if="type === 'usertype'"
+                :options="userTypes"
+                optionLabel="name"
+                optionValue="value"
+                v-model="internalValue as number"
+                :placeholder="placeholder"
+                :disabled="disabled"/>
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -58,6 +62,8 @@ import ErrorSpan from "@/components/ErrorSpan.vue";
 import CalendarString from "@/components/CalendarString.vue";
 
 import type { HintedString } from "primevue/ts-helpers";
+import InputNumber from "primevue/inputnumber";
+import { userTypes } from "@/utils/validation-schema";
 
 const props = defineProps({
   label: {
@@ -100,7 +106,8 @@ const props = defineProps({
 const emit = defineEmits(['update:value']);
 
 const stringInputs = ['text', 'textarea'];
-const numberInputs = ['currency', 'percentage', 'number'];
+
+const numberInputs = ['currency', 'number', 'usertype', 'percentage'];
 const booleanInputs = ['boolean'];
 
 const initialValue = () => {
diff --git a/apps/dashboard/src/locales/en.json b/apps/dashboard/src/locales/en.json
index 403504a4..43575ef2 100644
--- a/apps/dashboard/src/locales/en.json
+++ b/apps/dashboard/src/locales/en.json
@@ -275,7 +275,8 @@
     "pointOfSaleCreated": "Successfully created point of sale.",
     "waiveFinesSuccess": "Successfully waived fines.",
     "waiveFinesRejected": "Canceled waiving fines.",
-    "canceled": "Canceled"
+    "canceled": "Canceled",
+    "userUpdated": "Successfully updated user."
   },
   "termsOfService": {
     "acceptFirst": "Accept the Terms of Service",
@@ -324,7 +325,8 @@
     "Usertype": "Usertype",
     "passwordUpdated": "Password successfully updated",
     "updatedUserInfo": "Succesfully updated user info.",
-    "userInfoUpdated": "User information successfully updated"
+    "userInfoUpdated": "User information successfully updated",
+    "userInformation": "User information"
   },
   "contact": {
     "Contact": "Contact",
diff --git a/apps/dashboard/src/locales/nl.json b/apps/dashboard/src/locales/nl.json
index 810108ba..f6d8e0df 100644
--- a/apps/dashboard/src/locales/nl.json
+++ b/apps/dashboard/src/locales/nl.json
@@ -276,7 +276,8 @@
     "pointOfSaleCreated": "Point of sale is successvol aangemaakt.",
     "waiveFinesSuccess": "Boetes zijn succesvol kwijtgescholden.",
     "waiveFinesRejected": "Boetes zijn succesvol afgewezen.",
-    "canceled": "Geannuleerd"
+    "canceled": "Geannuleerd",
+    "userUpdated": "Gebruiker is succesvol geüpdatet."
   },
   "termsOfService": {
     "acceptFirst": "Accepteer de Voorwaarden",
@@ -325,7 +326,8 @@
     "Usertype": "Gebruikerstype",
     "passwordUpdated": "Wachtwoord is succesvol geüpdatet",
     "updatedUserInfo": "Profiel is succesvol geüpdatet.",
-    "userInfoUpdated": "Profiel is succesvol aangepast"
+    "userInfoUpdated": "Profiel is succesvol aangepast",
+    "userInformation": "Gebruikersinformatie"
   },
   "validation": {
     "number": {
diff --git a/apps/dashboard/src/main.ts b/apps/dashboard/src/main.ts
index 8dcb4687..71c4c433 100644
--- a/apps/dashboard/src/main.ts
+++ b/apps/dashboard/src/main.ts
@@ -81,6 +81,7 @@ app.component('ToggleButton', ToggleButton);
 app.component('Steps', Steps);
 app.component('Calendar', Calendar);
 app.component('ConfirmDialog', ConfirmDialog);
+app.component('InputSwitch', InputSwitch);
 
 populateStoresFromToken(apiService).then(() => {
     app.mount('#app');
diff --git a/apps/dashboard/src/mixins/pendingPayoutsMixin.ts b/apps/dashboard/src/mixins/pendingPayoutsMixin.ts
index d8acaf5e..bbb3f2ca 100644
--- a/apps/dashboard/src/mixins/pendingPayoutsMixin.ts
+++ b/apps/dashboard/src/mixins/pendingPayoutsMixin.ts
@@ -1,5 +1,5 @@
 // src/mixins/pendingPayoutsMixin.ts
-import { computed, type ComputedRef, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { usePayoutStore } from '@/stores/payout.store';
 import { useUserStore } from '@sudosos/sudosos-frontend-common';
 import { UserRole } from '@/utils/rbacUtils';
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
new file mode 100644
index 00000000..cd33f350
--- /dev/null
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -0,0 +1,62 @@
+<template>
+  <FormCard :header="t('userDetails.userInformation')"
+            @update:modelValue="edit = $event"
+            @save="formSubmit"
+            :enableEdit="true"
+  >
+      <div class="flex flex-column justify-content-between gap-2">
+        <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event"/>
+      </div>
+  </FormCard>
+</template>
+
+<script setup lang="ts">
+import FormCard from "@/components/FormCard.vue";
+import { onMounted, type PropType, ref, watch } from "vue";
+import type { UserResponse } from "@sudosos/sudosos-client";
+import { schemaToForm } from "@/utils/formUtils";
+import { updateUserDetailsObject, userTypes } from "@/utils/validation-schema";
+import UserEditForm from "@/modules/admin/components/users/forms/UserEditForm.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  user: {
+    type: Object as PropType<UserResponse>,
+    required: true
+  }
+});
+
+const edit = ref(false);
+
+const form = schemaToForm(updateUserDetailsObject);
+
+const formSubmit = () => {
+  form.submit();
+};
+
+const updateFieldValues = (p: UserResponse) => {
+  if (!p) return;
+  const values = {
+    ...p,
+    userType: userTypes.value.find(ut => ut.name === p.type)?.value || undefined,
+    isActive: p.active,
+  };
+  form.context.resetForm({ values });
+};
+
+watch(() => props.user, (newValue: UserResponse) => {
+  updateFieldValues(newValue);
+});
+
+onMounted(() => {
+  if (props.user) {
+    updateFieldValues(props.user);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
new file mode 100644
index 00000000..1cdac105
--- /dev/null
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="flex flex-column gap-2">
+    <InputSpan :label="t('userDetails.First name')"
+               :value="form.model.firstName.value.value"
+               :attributes="form.model.firstName.attr.value"
+               @update:value="form.context.setFieldValue('firstName', $event)"
+               :errors="form.context.errors.value.firstName"
+               :disabled="!edit"
+               id="name" :placeholder="t('userDetails.First name')" type="text" />
+    <InputSpan :label="t('userDetails.Last name')"
+               :value="form.model.lastName?.value.value"
+               :attributes="form.model.lastName?.attr.value"
+               @update:value="form.context.setFieldValue('lastName', $event)"
+               :errors="form.context.errors.value.lastName"
+               :disabled="!edit"
+               id="name" placeholder="Doe" type="text" />
+    <InputSpan :label="t('userDetails.Nickname')"
+               :value="form.model.nickname?.value.value || undefined"
+               :attributes="form.model.nickname?.attr.value"
+               @update:value="form.context.setFieldValue('nickname', $event)"
+               :errors="form.context.errors.value.nickname"
+               :disabled="!edit"
+               id="name" :placeholder="t('userDetails.Nickname')" type="text" />
+    <InputSpan
+        v-if="!(props.user?.type === 'MEMBER')"
+               :label="t('userDetails.Email address')"
+               :value="form.model.email?.value.value"
+               :attributes="form.model.email?.attr.value"
+               @update:value="form.context.setFieldValue('email', $event)"
+               :errors="form.context.errors.value.email"
+               :disabled="!edit"
+               id="name" placeholder="first.last@example.com" type="text" />
+    <InputSpan :label="t('userDetails.Usertype')"
+               :value="form.model.userType?.value.value"
+               :attributes="form.model.userType?.attr.value"
+               @update:value="form.context.setFieldValue('userType', $event)"
+               :errors="form.context.errors.value.userType"
+               id="name" :placeholder="t('userDetails.Usertype')" type="usertype" disabled/>
+    <InputSpan :label="t('userDetails.Active')"
+               :value="form.model.isActive?.value.value"
+               :attributes="form.model.isActive?.attr.value"
+               @update:value="form.context.setFieldValue('isActive', $event)"
+               :errors="form.context.errors.value.isActive"
+               :disabled="!edit"
+               id="name" :placeholder="t('userDetails.Active')" type="boolean"/>
+    <InputSpan :label="t('profile.ofAge')"
+               :value="form.model.ofAge?.value.value"
+               :attributes="form.model.ofAge?.attr.value"
+               @update:value="form.context.setFieldValue('ofAge', $event)"
+               :errors="form.context.errors.value.ofAge"
+               :disabled="!edit"
+               id="name" :placeholder="t('profile.ofAge')" type="boolean"/>
+    <InputSpan :label="t('profile.canGoIntoDebt')"
+               :value="form.model.canGoIntoDebt?.value.value"
+               :attributes="form.model.canGoIntoDebt?.attr.value"
+               @update:value="form.context.setFieldValue('canGoIntoDebt', $event)"
+               :errors="form.context.errors.value.canGoIntoDebt"
+               :disabled="!edit"
+               id="name" :placeholder="t('profile.canGoIntoDebt')" type="boolean"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import InputSpan from "@/components/InputSpan.vue";
+import { useI18n } from "vue-i18n";
+import { useToast } from "primevue/usetoast";
+import { type Form, setSubmit } from "@/utils/formUtils";
+import apiService from "@/services/ApiService";
+import type { UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
+import { type PropType } from "vue";
+import * as yup from "yup";
+import { updateUserDetailsObject } from "@/utils/validation-schema";
+import { handleError } from "@/utils/errorUtils";
+
+const { t } = useI18n();
+const toast = useToast();
+
+const emit = defineEmits(['update:edit']);
+
+const props = defineProps({
+  user: {
+    type: Object as PropType<UserResponse>,
+    required: true,
+  },
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof updateUserDetailsObject>>>,
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
+  const updateUserRequest: UpdateUserRequest = {
+    firstName: values.firstName,
+    lastName: values.lastName,
+    email: values.email,
+    nickname: values.nickname || "",
+    active: values.isActive,
+    ofAge: values.ofAge,
+    canGoIntoDebt: values.canGoIntoDebt,
+  };
+  await apiService.user.updateUser(props.user.id, updateUserRequest).then(() => {
+    toast.add({
+      severity: 'success',
+      summary: t('successMessages.success'),
+      detail: t('successMessages.userUpdated'),
+      life: 3000,
+    });
+    emit('update:edit', false);
+  }).catch((error) => {
+    handleError(error, toast);
+  });
+}));
+</script>
diff --git a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
index 1cf9b5d7..4a466fa2 100644
--- a/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
+++ b/apps/dashboard/src/modules/admin/views/AdminSingleUserView.vue
@@ -1,118 +1,52 @@
-<!--TODO: Extract input validation styling-->
-<!--See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/52-->
 <template>
   <div class="page-container">
     <div class="page-title">{{ `${currentUser ? currentUser.firstName : ''}'s profile` }}</div>
-    <div class="flex flex-column md:flex-row flex-wrap justify-content-between gap-5">
-      <!--      TODO: Refactor to extract this component-->
-      <!--      See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/21-->
-      <CardComponent :header="t('userDetails.Personal Info')">
-        <form @submit="handleEditUser">
-          <small v-if="!isLocal">{{ t('profile.notManagedThroughSudoSOS') }}</small>
-          <div class="field">
-            <label for="firstName">{{ t("userDetails.First name") }}</label>
-            <InputText :disabled="!isLocal" id="firstName" v-model="firstName" v-bind="firstNameAttrs" class="w-full" />
-            <span class="error-text">{{ errors.firstName }}</span>
-          </div>
-          <div class="field">
-            <label for="lastName">{{ t("userDetails.Last name") }}</label>
-            <InputText :disabled="!isLocal" id="lastName" v-model="lastName" v-bind="lastNameAttrs" class="w-full" />
-            <span class="error-text">{{ errors.lastName }}</span>
-          </div>
-          <div class="field">
-            <label for="nickname">{{ t("userDetails.Nickname") }}</label>
-            <InputText id="nickname" v-model="nickname" v-bind="nicknameAttrs" class="w-full" />
-          </div>
-          <div class="field">
-            <label for="email">{{ t("userDetails.Email address") }}</label>
-            <InputText :disabled="!isLocal" id="email" v-model="email" v-bind="emailAttrs" class="w-full" />
-          </div>
-          <div class="field">
-            <label for="type">{{ t("userDetails.Usertype") }}</label>
-            <InputText id="userType" disabled :placeholder="userTypeDisplay"
-                       v-bind="userTypeAttrs" class="w-full" />
-            <span class="error-text">{{ errors.userType }}</span>
-          </div>
-          <div class="field">
-            <label for="active">{{ t("userDetails.Active") }}</label>
-            <Checkbox :binary="true" id="active" v-model="isActive" v-bind="isActiveAttrs" class="w-full" />
-          </div>
-          <div class="field">
-            <label for="ofAge">{{ t('profile.ofAge') }}</label>
-            <Checkbox :binary="true" v-model="ofAge" v-bind="ofAgeAttrs" id="ofAge" class="w-full" />
-            <span class="error-text">{{ errors.ofAge }}</span>
-          </div>
-          <div class="field">
-            <label for="canGoIntoDebt">{{ t('profile.canGoIntoDebt') }}</label>
-            <Checkbox :binary="true" v-model="canGoIntoDebt" v-bind="canGoIntoDebtAttrs" id="canGoIntoDebt"
-              class="w-full" />
-            <span class="error-text">{{ errors.canGoIntoDebt }}</span>
-          </div>
-          <div class="flex justify-content-end">
-            <Button type="submit" class="update-button">{{ t('userDetails.Update information') }}</Button>
-          </div>
-        </form>
+
+    <div class="flex flex-column gap-5">
+      <div class="flex flex-column  md:flex-row justify-content-between gap-8">
+        <AdminUserInfoCard :user="currentUser" class="flex-grow-1"/>
+        <AdminUserBalance :user="currentUser"/>
+      </div>
+      <CardComponent
+          :header="t('transactions.recentTransactions')"
+          class="w-full">
+        <MutationsBalanceCard
+            class="w-full"
+            :header="t('userDetails.User Transactions')"
+            paginator
+            modal
+            :get-mutations="getUserMutations"/>
       </CardComponent>
-      <AdminUserBalance :user="currentUser" />
-        <CardComponent
-            :header="t('transactions.recentTransactions')"
-            class="w-full">
-          <MutationsBalanceCard
-              class="w-full"
-              :header="t('userDetails.User Transactions')"
-              paginator
-              modal
-              :get-mutations="getUserMutations" />
-        </CardComponent>
     </div>
   </div>
-</template>
+</template>s
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from "vue";
+import { onBeforeMount, ref } from "vue";
 import type { Ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useUserStore } from "@sudosos/sudosos-frontend-common";
-import type { PaginatedFinancialMutationResponse, UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
+import type { PaginatedFinancialMutationResponse, UserResponse } from "@sudosos/sudosos-client";
 import CardComponent from "@/components/CardComponent.vue";
-import Checkbox from "primevue/checkbox";
 import AdminUserBalance from "@/modules/admin/components/AdminUserBalance.vue";
-import { useForm } from "vee-validate";
 import apiService from "@/services/ApiService";
 import router from "@/router";
-import { userDetailsSchema, userTypes } from "@/utils/validation-schema";
 import { handleError } from "@/utils/errorUtils";
 import { useToast } from "primevue/usetoast";
 import type { AxiosError } from "axios";
-import Button from "primevue/button";
-import { useI18n } from "vue-i18n";
 import MutationsBalanceCard from "@/components/mutations/MutationsBalance.vue";
+import AdminUserInfoCard from "@/modules/admin/components/users/AdminUserInfoCard.vue";
+import { useI18n } from "vue-i18n";
 
-const { defineField, handleSubmit, errors, setValues } = useForm({
-  validationSchema: userDetailsSchema,
-});
+const { t } = useI18n();
 
-const userId = ref();
 const route = useRoute();
 const userStore = useUserStore();
 const toast = useToast();
-const { t } = useI18n();
-const currentUser: Ref<UserResponse | undefined> = ref();
-const [firstName, firstNameAttrs] = defineField('firstName', {});
-const [lastName, lastNameAttrs] = defineField('lastName', {});
-const [email, emailAttrs] = defineField('email', {});
-const [nickname, nicknameAttrs] = defineField('nickname', {});
-const [isActive, isActiveAttrs] = defineField('isActive', {});
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const [userType, userTypeAttrs] = defineField('userType', {});
-const [canGoIntoDebt, canGoIntoDebtAttrs] = defineField('canGoIntoDebt', {});
-const [ofAge, ofAgeAttrs] = defineField('ofAge', {});
-
-const isLocal: Ref<Boolean> = ref(false);
+const currentUser: Ref<UserResponse> = ref<UserResponse>(null!);
 
 onBeforeMount(async () => {
-  userId.value = route.params.userId;
-  await apiService.user.getIndividualUser(userId.value).then((res) => {
+  await apiService.user.getIndividualUser(Number(route.params.userId)).then((res) => {
     currentUser.value = res.data;
   }).catch((error: AxiosError) => {
     handleError(error, toast);
@@ -121,60 +55,14 @@ onBeforeMount(async () => {
     await router.replace({ path: '/error' });
     return;
   }
-  isLocal.value = currentUser.value.type == "LOCAL_USER";
-  setValues({
-    firstName: currentUser.value?.firstName,
-    lastName: currentUser.value?.lastName,
-    email: currentUser.value.email ? currentUser.value.email : '',
-    nickname: currentUser.value.nickname ? currentUser.value.nickname : '',
-    userType: currentUser.value ? currentUser.value.type : '',
-    isActive: currentUser.value.active,
-    ofAge: currentUser.value.ofAge,
-    canGoIntoDebt: currentUser.value?.canGoIntoDebt,
-  });
-});
-
-const handleEditUser = handleSubmit(async (values) => {
-  if (currentUser.value) {
-    const userId = currentUser.value.id;
-    const updateUserRequest: UpdateUserRequest = {
-      firstName: values.firstName,
-      lastName: values.lastName,
-      nickname: values.nickname || '',
-      active: values.isActive,
-      email: values.email || '',
-      canGoIntoDebt: values.canGoIntoDebt,
-      ofAge: values.ofAge
-    };
-    const response = await apiService.user.updateUser(userId, updateUserRequest);
-    if (response.status === 200) {
-      await router.push({ name: 'user', params: { userId } }).then(() => {
-        toast.add({
-          severity: 'success',
-          summary: t('successMessages.success'),
-          detail: t('userDetails.updatedUserInfo'),
-          life: 3000
-        });
-      });
-    } else {
-      console.error(response.status + ": " + response.statusText);
-    }
-  }
 });
 
 const getUserMutations = async (take: number, skip: number):
     Promise<PaginatedFinancialMutationResponse | undefined> => {
-  await userStore.fetchUsersFinancialMutations(userId.value, apiService, take, skip)
+  await userStore.fetchUsersFinancialMutations(Number(route.params.userId), apiService, take, skip)
       .catch((err: AxiosError) => handleError(err, toast));
   return userStore.getCurrentUser.financialMutations;
 };
-
-const userTypeDisplay = computed(() => {
-  const type = currentUser.value ? currentUser.value.type : '';
-  // Assuming type is a numeric ID; find the corresponding name
-  const userTypeObj = userTypes.value.find(ut => ut.name === type);
-  return userTypeObj ? userTypeObj.name : 'Unknown';
-});
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue b/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
index a3dd7d5e..44109878 100644
--- a/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
+++ b/apps/dashboard/src/modules/seller/components/POSAddContainerModal.vue
@@ -22,7 +22,7 @@ const isVisible = defineModel<boolean>('isVisible', { required: true });
 
 const form = schemaToForm(addContainerObject);
 
-const props = defineProps<{
+defineProps<{
   associatedPos: PointOfSaleWithContainersResponse
 }>();
 </script>
diff --git a/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue b/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue
index cc5a5e56..bf91aa5b 100644
--- a/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue
+++ b/apps/dashboard/src/modules/seller/components/ProductActionExistingProductForm.vue
@@ -21,7 +21,7 @@ const { t } = useI18n();
 
 const selectProduct = defineModel('selectProduct');
 
-const props = defineProps<{
+defineProps<{
   products: BaseProductResponse[]
 }>();
 
diff --git a/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue b/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue
index 438f4d2f..e5e6ed56 100644
--- a/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue
+++ b/apps/dashboard/src/modules/seller/components/ProductActionImageForm.vue
@@ -15,7 +15,7 @@
 
 import FileUpload from "primevue/fileupload";
 
-const props = defineProps<{
+defineProps<{
   isEditable?: boolean,
   imageSrc?: string,
 }>();
@@ -48,4 +48,4 @@ const emit = defineEmits<{
   height: 100%;
   object-fit: cover;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/dashboard/src/router/index.ts b/apps/dashboard/src/router/index.ts
index 55712667..ea0de77c 100644
--- a/apps/dashboard/src/router/index.ts
+++ b/apps/dashboard/src/router/index.ts
@@ -75,7 +75,8 @@ router.beforeEach((to, from, next) => {
   } else {
     if(to.meta?.rolesAllowed) {
       // Test overlapping roles between the allowed roles and the roles the user has
-      const rolesUnion = [...new Set([...to.meta.rolesAllowed, ...userStore.current.rolesWithPermissions.map(r => r.name)])];
+      const rolesUnion =
+          [...new Set([...to.meta.rolesAllowed, ...userStore.current.rolesWithPermissions.map(r => r.name)])];
 
       // No overlapping roles -> No correct permissions -> Back to home
       if(rolesUnion.length == 0) ({ name: 'home' });
diff --git a/apps/dashboard/src/utils/validation-schema.ts b/apps/dashboard/src/utils/validation-schema.ts
index 68ac3239..a41f8684 100644
--- a/apps/dashboard/src/utils/validation-schema.ts
+++ b/apps/dashboard/src/utils/validation-schema.ts
@@ -55,6 +55,17 @@ export const updateInvoiceAddressingObject = yup.object({
   country: yup.string().required(),
 });
 
+export const updateUserDetailsObject = yup.object({
+  firstName: yup.string().required(),
+  lastName: yup.string(),
+  email: yup.string().email(),
+  nickname: yup.string().nullable(),
+  userType: yup.number().required(),
+  isActive: yup.boolean().required().default(true),
+  ofAge: yup.boolean().required().default(false),
+  canGoIntoDebt: yup.boolean().required().default(false),
+});
+
 export const editPinSchema = toTypedSchema(
   yup.object({
     pin: yup.string().required()
diff --git a/apps/point-of-sale/package.json b/apps/point-of-sale/package.json
index 3316ee7a..87e2ec62 100644
--- a/apps/point-of-sale/package.json
+++ b/apps/point-of-sale/package.json
@@ -44,6 +44,7 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
+    "axios": "^1.6.8",
     "eslint": "^8.50.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-vue": "^9.15.1",
@@ -55,7 +56,6 @@
     "sass": "^1.69.7",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
-    "vue-tsc": "^2.0.29",
-    "axios": "^1.6.8"
+    "vue-tsc": "^2.0.29"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 9e952bd2..71874320 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5583,6 +5583,7 @@ __metadata:
     "@vue/eslint-config-prettier": "npm:^9.0.0"
     "@vue/eslint-config-typescript": "npm:^12.0.0"
     "@vue/tsconfig": "npm:^0.5.1"
+    axios: "npm:^1.6.8"
     dinero.js: "npm:^1.9.1"
     eslint: "npm:^8.50.0"
     eslint-plugin-github-commit-hash: "npm:^1.0.3"
@@ -5632,6 +5633,7 @@ __metadata:
     "@vue/eslint-config-prettier": "npm:^9.0.0"
     "@vue/eslint-config-typescript": "npm:^12.0.0"
     "@vue/tsconfig": "npm:^0.5.1"
+    axios: "npm:^1.6.8"
     bootstrap: "npm:^5.3.0"
     dinero: "npm:^1.0.1"
     dinero.js: "npm:^1.9.1"