diff --git a/apps/dashboard/src/components/FindUser.vue b/apps/dashboard/src/components/FindUser.vue
index 3364529c..e4b41a8b 100644
--- a/apps/dashboard/src/components/FindUser.vue
+++ b/apps/dashboard/src/components/FindUser.vue
@@ -1,7 +1,8 @@
 <template>
+  selected: {{ selectedUser }}
   <Dropdown
       v-model="selectedUser"
-      :options="users"
+      :options="users.concat(defaultUser)"
       optionLabel="fullName"
       :loading="loading"
       :filter="true"
@@ -18,21 +19,21 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, type PropType, ref, watch } from "vue";
+import {onBeforeMount, onMounted, type PropType, ref, watch} from "vue";
 import type { Ref } from "vue";
 import apiService from "@/services/ApiService";
 import { debounce } from "lodash";
 import type { BaseUserResponse, UserResponse } from "@sudosos/sudosos-client";
 
 const lastQuery = ref("");
-const selectedUser = ref(null);
+const selectedUser: Ref<UserResponse | undefined> = ref(undefined);
 const loading = ref(false);
 
 const users: Ref<(BaseUserResponse & { fullName: string })[]> = ref([]);
-const emits = defineEmits(['update:value']);
+const emits = defineEmits(['update:modelValue']);
 
-defineProps({
-  value: {
+const props = defineProps({
+  modelValue: {
     type: Object as PropType<UserResponse>,
   },
   placeholder: {
@@ -40,6 +41,11 @@ defineProps({
     required: false,
     default: ''
   },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
 });
 
 const transformUsers = (userData: BaseUserResponse[]) => {
@@ -66,14 +72,29 @@ const filterUsers = (e: any) => {
   }
 };
 
+const defaultUser: Ref<Array<BaseUserResponse & { fullName: string }>> = ref([]);
+
+onBeforeMount(() => {
+  if (props.modelValue) {
+    defaultUser.value = transformUsers([props.modelValue]);
+  }
+});
+
+watch(
+    () => props.modelValue,
+    (newValue) => {
+      selectedUser.value = newValue;
+    }
+);
+
 onMounted(async () => {
   apiService.user.getAllUsers(10, 0).then((res) => {
-    users.value = transformUsers(res.data.records); // Transform users
+    users.value = transformUsers(res.data.records.concat(props.modelValue || [])); // Transform users
   });
 });
 
 watch(selectedUser, () => {
-  emits('update:value', selectedUser.value);
+  emits('update:modelValue', selectedUser.value);
 });
 
 </script>
diff --git a/apps/dashboard/src/components/InputSpan.vue b/apps/dashboard/src/components/InputSpan.vue
index 60bc2703..061710a0 100644
--- a/apps/dashboard/src/components/InputSpan.vue
+++ b/apps/dashboard/src/components/InputSpan.vue
@@ -29,12 +29,9 @@
                 :placeholder="placeholder"
                 v-model="internalValue as number"
                 :disabled="disabled"/>
-
-      <Checkbox v-if="type === 'boolean'"
-                   v-model="internalValue"
-                    binary
+      <InputSwitch v-if="type === 'switch'"
+                   v-model="internalValue as boolean"
                    :disabled="disabled"/>
-
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -49,7 +46,7 @@ import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import ErrorSpan from "@/components/ErrorSpan.vue";
 import CalendarString from "@/components/CalendarString.vue";
-
+import InputSwitch from "primevue/inputswitch";
 import type { HintedString } from "primevue/ts-helpers";
 import InputNumber from "primevue/inputnumber";
 
@@ -95,7 +92,7 @@ const emit = defineEmits(['update:value']);
 
 const stringInputs = ['text', 'textarea'];
 const numberInputs = ['currency', 'number'];
-const booleanInputs = ['boolean'];
+const booleanInputs = ['boolean', 'switch'];
 
 const initialValue = () => {
   if (stringInputs.includes(props.type)) return '';
diff --git a/apps/dashboard/src/locales/en.json b/apps/dashboard/src/locales/en.json
index 61f707a2..ffd1272d 100644
--- a/apps/dashboard/src/locales/en.json
+++ b/apps/dashboard/src/locales/en.json
@@ -272,7 +272,8 @@
     "pointOfSaleCreated": "Successfully created point of sale.",
     "waiveFinesSuccess": "Successfully waived fines.",
     "waiveFinesRejected": "Canceled waiving fines.",
-    "canceled": "Canceled"
+    "canceled": "Canceled",
+    "invoiceCreated": "Successfully created invoice."
   },
   "termsOfService": {
     "acceptFirst": "Accept the Terms of Service",
@@ -394,7 +395,14 @@
     "AreYouSure": "Are you sure you want to delete this invoice?",
     "CreditNoteWarning": "This will not create a credit note.",
     "Unrecoverable": "This deletes the invoice and cannot be undone.",
-    "Credit": "Credit Invoice"
+    "Credit": "Credit Invoice",
+    "InvoiceUsers": "Invoice Users",
+    "Name": "Name",
+    "Balance": "Balance",
+    "CreateInvoice": "Create Invoice",
+    "isCreditInvoice": "Is credit invoice",
+    "InvoiceUsersDescription": "Invoice user with oustanding debts.",
+    "NoInvoiceableUsers": "Currently, there are no users with outstanding debts."
   },
   "pdf": {
     "Table": "Table",
diff --git a/apps/dashboard/src/modules/financial/components/invoice/InvoiceUserTable.vue b/apps/dashboard/src/modules/financial/components/invoice/InvoiceUserTable.vue
new file mode 100644
index 00000000..f794ab86
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/InvoiceUserTable.vue
@@ -0,0 +1,128 @@
+<template>
+  <CardComponent :header="$t('c_invoiceInfo.InvoiceUsers')" class="w-5">
+    <p class="my-0 font-italic text-sm  ">{{ $t('c_invoiceInfo.InvoiceUsersDescription') }}</p>
+    <p v-if="invoiceableUsersWithBalance.length === 0">{{ $t('c_invoiceInfo.NoInvoiceableUsers') }}</p>
+    <DataTable
+        v-else
+        :value="invoiceableUsersWithBalance"
+    >
+      <Column field="user.id" :header="$t('c_invoiceInfo.id')"/>
+      <Column :header="$t('c_invoiceInfo.Name')" field="user.firstName">
+        <template #body="slotProps">
+          {{ `${slotProps.data.user.firstName} ${slotProps.data.user.lastName}` }}
+        </template>
+      </Column>
+      <Column field="balance.amount" :header="$t('c_invoiceInfo.Balance')">
+        <template #body="slotProps">
+          {{ formatPrice(slotProps.data.balance.amount) }}
+        </template>
+      </Column>
+      <Column :header="$t('c_invoiceInfo.Actions')" style="width: 10%">
+        <template #body="slotProps" >
+            <Button
+                type="button"
+                icon="pi pi-file-edit"
+                class="p-button-rounded p-button-text p-button-plain"
+                @click="() => handleCreateInvoice(slotProps.data.user)"
+            />
+        </template>
+      </Column>
+
+    </DataTable>
+  </CardComponent>
+  <FormDialog v-model="showDialog" :form="form" :header="$t('invoice.CreateInvoice')">
+    <template #form="slotProps">
+      <InvoiceCreateForm :form="slotProps.form" @submit:success="showDialog = false"/>
+    </template>
+  </FormDialog>
+</template>
+
+<script setup lang="ts">
+import CardComponent from "@/components/CardComponent.vue";
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import { onMounted, type Ref, ref } from "vue";
+import type { BalanceResponse, UserResponse } from "@sudosos/sudosos-client";
+import apiService from "@/services/ApiService";
+import { formatPrice } from "sudosos-dashboard/src/utils/formatterUtils";
+import FormDialog from "@/components/FormDialog.vue";
+import InvoiceCreateForm from "@/modules/financial/components/invoice/forms/InvoiceCreateForm.vue";
+import { schemaToForm } from "@/utils/formUtils";
+import { createInvoiceSchema } from "@/utils/validation-schema";
+import { useAuthStore, useUserStore } from "@sudosos/sudosos-frontend-common";
+
+interface InvoiceableUserWithBalance {
+  user: UserResponse;
+  balance: BalanceResponse;
+}
+
+const userStore = useUserStore();
+const invoiceableUsers: Ref<UserResponse[]> = ref([]);
+const balances: Ref<BalanceResponse[]> = ref([]);
+const invoiceableUsersWithBalance: Ref<InvoiceableUserWithBalance[]> = ref([]);
+const showDialog: Ref<boolean> = ref(false);
+const form = schemaToForm(createInvoiceSchema);
+
+onMounted(async () => {
+  await getAllUsers(0);
+  await getInvoiceableBalances(0);
+  const usersMap = new Map(
+      invoiceableUsers.value.map(user => [user.id, user])
+  );
+
+  invoiceableUsersWithBalance.value = balances.value
+      .filter(balance => usersMap.has(balance.id))
+      .map(balance => ({
+        user: usersMap.get(balance.id)!,
+        balance: balance
+      }));
+});
+
+const getAllUsers = async (skip: number) => {
+  const response = await apiService.user.getAllUsersOfUserType("INVOICE", Number.MAX_SAFE_INTEGER, skip);
+  invoiceableUsers.value.push(...response.data.records);
+  if (response.data._pagination.count > response.data.records.length) {
+    await getAllUsers(skip + response.data.records.length);
+  }
+};
+
+
+// Typing is absolutely fucked in the api but it works
+const getInvoiceableBalances = async (skip: number) => {
+  //@ts-ignore-next-line
+  const response = await apiService.balance.getAllBalance(undefined, undefined, -1, undefined, undefined, undefined, ["INVOICE"], undefined, undefined, false, Number.MAX_SAFE_INTEGER, skip);
+  //@ts-ignore-next-line
+  balances.value.push(...response.data.records);
+  //@ts-ignore-next-line
+  if (response.data._pagination.count > response.data.records.length) {
+    //@ts-ignore-next-line
+    await getInvoiceableBalances(skip + response.data.records.length);
+  }
+};
+
+const handleCreateInvoice = async (user: UserResponse) => {
+  const invoiceUserDefaults = await apiService.invoices.getSingleInvoiceUser(user.id);
+  showDialog.value = true;
+  const currentUser = userStore.getCurrentUser.user;
+  const values = {
+    for: user,
+    by: currentUser || undefined,
+    addressee: '',
+    description: '',
+    date: '',
+    reference: '',
+    isCreditInvoice: false,
+    street: invoiceUserDefaults.data.street || '',
+    postalCode: invoiceUserDefaults.data.postalCode || '',
+    city: invoiceUserDefaults.data.city || '',
+    country: invoiceUserDefaults.data.country || '',
+    attention: '',
+  };
+  form.context.resetForm({ values });
+};
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceCreateForm.vue b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceCreateForm.vue
new file mode 100644
index 00000000..b20b78cc
--- /dev/null
+++ b/apps/dashboard/src/modules/financial/components/invoice/forms/InvoiceCreateForm.vue
@@ -0,0 +1,132 @@
+<template>
+  <span class="text-gray-700">{{
+      `Creating invoice for ${form.model.for.value.value.firstName} ${form.model.for.value.value.lastName} as `
+    }}</span>
+  <UserLink :user="form.model.by.value.value"/>
+  <div class="flex flex-column justify-content-between gap-2">
+    <InputSpan :label="$t('c_invoiceInfo.Description')"
+               :value="form.model.description.value.value"
+               :attributes="form.model.description.attr.value"
+               @update:value="form.context.setFieldValue('description', $event)"
+               :errors="form.context.errors.value.description"
+               id="description" placeholder="Invoice Description" type="textarea"/>
+    <InputSpan :label="$t('c_invoiceInfo.Reference')"
+               :value="form.model.reference.value.value"
+               :attributes="form.model.reference.attr.value"
+               @update:value="form.context.setFieldValue('reference', $event)"
+               :errors="form.context.errors.value.reference"
+               id="reference" placeholder="Invoice Reference" type="text"/>
+    <InputSpan :label="$t('c_invoiceInfo.Date')"
+               :value="form.model.date.value.value"
+               :attributes="form.model.date.attr.value"
+               @update:value="form.context.setFieldValue('date', $event)"
+               :errors="form.context.errors.value.date"
+               id="date" placeholder="Invoice Date" type="date"/>
+    <InputSpan :label="$t('c_invoiceInfo.Addressee')"
+               :value="form.model.addressee.value.value"
+               :attributes="form.model.addressee.attr.value"
+               @update:value="form.context.setFieldValue('addressee', $event)"
+               :errors="form.context.errors.value.addressee"
+               id="addressee" placeholder="Addressee" type="text"/>
+    <InputSpan :label="$t('c_invoiceInfo.Attention')"
+               :value="form.model.attention?.value.value"
+               :attributes="form.model.attention?.attr.value"
+               @update:value="form.context.setFieldValue('attention', $event)"
+               :errors="form.context.errors.value.attention"
+               id="attention" placeholder="Attention" type="text"/>
+    <InputSpan :label="$t('c_invoiceInfo.Street')"
+               :value="form.model.street.value.value"
+               :attributes="form.model.street.attr.value"
+               @update:value="form.context.setFieldValue('street', $event)"
+               :errors="form.context.errors.value.street"
+               id="street" placeholder="Street" type="text"/>
+    <InputSpan :label="$t('c_invoiceInfo.Postal code')"
+               :value="form.model.postalCode.value.value"
+               :attributes="form.model.postalCode.attr.value"
+               @update:value="form.context.setFieldValue('postalCode', $event)"
+               :errors="form.context.errors.value.postalCode"
+               id="postalCode" placeholder="Postal code" type="text"/>
+    <InputSpan :label="$t('c_invoiceInfo.City')"
+               :value="form.model.city.value.value"
+               :attributes="form.model.city.attr.value"
+               @update:value="form.context.setFieldValue('city', $event)"
+               :errors="form.context.errors.value.city"
+               id="city" placeholder="City" type="text"/>
+    <InputSpan :label="$t('c_invoiceInfo.Country')"
+               :value="form.model.country.value.value"
+               :attributes="form.model.country.attr.value"
+               @update:value="form.context.setFieldValue('country', $event)"
+               :errors="form.context.errors.value.country"
+               id="country" placeholder="Country" type="text"/>
+    <InputSpan :label="$t('c_invoiceInfo.IsCreditInvoice')"
+               :value="form.model.isCreditInvoice.value.value"
+               :attributes="form.model.isCreditInvoice.attr.value"
+               @update:value="form.context.setFieldValue('isCreditInvoice', $event)"
+               :errors="form.context.errors.value.isCreditInvoice"
+               id="isCreditInvoice" type="switch"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import type { PropType } from "vue";
+import { type Form, setSubmit } from "@/utils/formUtils";
+import * as yup from "yup";
+import { createInvoiceSchema } from "@/utils/validation-schema";
+import UserLink from "@/components/UserLink.vue";
+import InputSpan from "@/components/InputSpan.vue";
+import { useInvoiceStore } from "@/stores/invoice.store";
+import type { CreateInvoiceRequest, InvoiceResponse } from "@sudosos/sudosos-client";
+import { handleError } from "@/utils/errorUtils";
+import { useToast } from "primevue/usetoast";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+  form: {
+    type: Object as PropType<Form<yup.InferType<typeof createInvoiceSchema>>>,
+    required: true,
+  },
+});
+const { t } = useI18n();
+const invoiceStore = useInvoiceStore();
+const toast = useToast();
+const router = useRouter();
+
+const emit = defineEmits(['submit:success', 'submit:error']);
+
+setSubmit(props.form, props.form.context.handleSubmit(async (values) => {
+  const request: CreateInvoiceRequest = {
+    forId: props.form.model.for.value.value.id,
+    byId: props.form.model.by.value.value.id,
+    addressee: values.addressee,
+    description: values.description,
+    date: values.date,
+    reference: values.reference,
+    isCreditInvoice: values.isCreditInvoice,
+    street: values.street,
+    postalCode: values.postalCode,
+    city: values.city,
+    country: values.country,
+    attention: values.attention,
+  };
+  await invoiceStore.createInvoice(request).then((res: InvoiceResponse) => {
+    const invoiceId = res.id;
+    emit('submit:success', request);
+    toast.add({
+      severity: 'success',
+      summary: t('successMessages.success'),
+      detail: t('successMessages.invoiceCreated'),
+      life: 3000,
+    });
+    props.form.context.resetForm();
+    router.push({ name: "invoiceInfo", params: { id: invoiceId } });
+  }).catch((err) => {
+    emit('submit:error', err);
+    handleError(err, toast);
+  });
+}));
+</script>
+
+<style scoped>
+
+</style>
diff --git a/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue b/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
index 66026302..1ea64fa8 100644
--- a/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
+++ b/apps/dashboard/src/modules/financial/views/invoice/InvoiceOverview.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="page-container flex flex-column">
     <div class="page-title">{{ $t('c_invoiceInfo.InvoiceOverview') }}</div>
-      <div class="content-wrapper">
+      <div class="content-wrapper flex flex-column gap-5">
           <TabView class="w-full">
             <TabPanel v-for="state in states" :key="state" :header="state">
               <InvoiceTable :state="state" />
             </TabPanel>
           </TabView>
+          <InvoiceUserTable />
       </div>
   </div>
 </template>
@@ -16,6 +17,7 @@ import InvoiceTable from "@/modules/financial/components/invoice/InvoiceTable.vu
 import TabPanel from "primevue/tabpanel";
 import TabView from "primevue/tabview";
 import { InvoiceStatusResponseStateEnum } from "@sudosos/sudosos-client/src/api";
+import InvoiceUserTable from "@/modules/financial/components/invoice/InvoiceUserTable.vue";
 
 const states = [ InvoiceStatusResponseStateEnum.Created, InvoiceStatusResponseStateEnum.Sent,
   InvoiceStatusResponseStateEnum.Paid, InvoiceStatusResponseStateEnum.Deleted ];
diff --git a/apps/dashboard/src/stores/invoice.store.ts b/apps/dashboard/src/stores/invoice.store.ts
index 406e6095..33704401 100644
--- a/apps/dashboard/src/stores/invoice.store.ts
+++ b/apps/dashboard/src/stores/invoice.store.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import type {
-    BaseInvoiceResponse,
+    BaseInvoiceResponse, CreateInvoiceRequest,
     InvoiceResponse,
     PaginatedInvoiceResponse,
     UpdateInvoiceRequest
@@ -30,6 +30,12 @@ export const useInvoiceStore = defineStore('invoice', {
                 return this.invoices[invoice.id];
             });
         },
+        async createInvoice(invoiceRequest: CreateInvoiceRequest): Promise<InvoiceResponse> {
+            return await ApiService.invoices.createInvoice(invoiceRequest).then((res) => {
+                this.invoices[res.data.id] = res.data;
+                return this.invoices[res.data.id];
+            });
+        },
         async getOrFetchInvoice(id: number): Promise<InvoiceResponse> {
             if (this.invoices[id]) {
                 return this.invoices[id];
diff --git a/apps/dashboard/src/utils/validation-schema.ts b/apps/dashboard/src/utils/validation-schema.ts
index 7bb5dd22..12445438 100644
--- a/apps/dashboard/src/utils/validation-schema.ts
+++ b/apps/dashboard/src/utils/validation-schema.ts
@@ -99,4 +99,18 @@ export const addContainerObject =
     yup.object({
         container: yup.mixed<ContainerInStore>().required()
     });
-
+export const createInvoiceSchema =
+  yup.object({
+      for: yup.mixed<BaseUserResponse>().required(),
+      by: yup.mixed<BaseUserResponse>().required(),
+      addressee: yup.string().required(),
+      description: yup.string().required(),
+      date: yup.string().required(),
+      reference: yup.string().required(),
+      isCreditInvoice: yup.boolean().required().default(false),
+      street: yup.string().required(),
+      postalCode: yup.string().required(),
+      city: yup.string().required(),
+      country: yup.string().required(),
+      attention: yup.string(),
+  });